@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.1 | 20191019
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
  display: none;
}

body {
  line-height: 1;
}

menu, ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "Hemnet Bonad";
  src: url("https://assets.hemnet.se/assets/fonts/HemnetBonad-Demibold.woff2") format("woff2"), url("https://assets.hemnet.se/assets/fonts/HemnetBonad-Demibold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
  font-display: swap;
}
/* roboto-300 - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-300.woff2") format("woff2"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-300.woff") format("woff");
}
/* roboto-300italic - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  src: local("Roboto Light Italic"), local("Roboto-LightItalic"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-300italic.woff2") format("woff2"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-300italic.woff") format("woff");
}
/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-regular.woff") format("woff");
}
/* roboto-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: local("Roboto Italic"), local("Roboto-Italic"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-italic.woff2") format("woff2"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-italic.woff") format("woff");
}
/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"), local("Roboto-Medium"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-500.woff2") format("woff2"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-500.woff") format("woff");
}
/* roboto-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-500italic.woff2") format("woff2"), url("https://assets.hemnet.se/assets/fonts/roboto-v20-latin-500italic.woff") format("woff");
}
/* roboto-flex - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 900;
  src: local("Roboto Flex"), local("Roboto-Flex"), url("https://assets.hemnet.se/assets/fonts/RobotoFlex-VariableFont.woff2") format("woff2"), url("https://assets.hemnet.se/assets/fonts/RobotoFlex-VariableFont.woff") format("woff");
}
* {
  box-sizing: border-box;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-flex--container {
  display: flex;
}

.hcl-flex--item {
  display: block;
}

.hcl-flex--gap-0 {
  gap: 0px;
}

.hcl-flex--gap-0-0 {
  gap: 0px 0px;
}

.hcl-flex--gap-0-1 {
  gap: 0px 8px;
}

.hcl-flex--gap-0-2 {
  gap: 0px 16px;
}

.hcl-flex--gap-0-3 {
  gap: 0px 24px;
}

.hcl-flex--gap-0-4 {
  gap: 0px 32px;
}

.hcl-flex--gap-0-5 {
  gap: 0px 40px;
}

.hcl-flex--gap-0-6 {
  gap: 0px 48px;
}

.hcl-flex--gap-0-7 {
  gap: 0px 56px;
}

.hcl-flex--gap-0-8 {
  gap: 0px 64px;
}

.hcl-flex--gap-0-9 {
  gap: 0px 72px;
}

.hcl-flex--gap-0-10 {
  gap: 0px 80px;
}

.hcl-flex--gap-0-11 {
  gap: 0px 88px;
}

.hcl-flex--gap-0-12 {
  gap: 0px 96px;
}

.hcl-flex--gap-0-13 {
  gap: 0px 104px;
}

.hcl-flex--gap-0-14 {
  gap: 0px 112px;
}

.hcl-flex--gap-0-15 {
  gap: 0px 120px;
}

.hcl-flex--gap-0-16 {
  gap: 0px 128px;
}

.hcl-flex--gap-0-17 {
  gap: 0px 136px;
}

.hcl-flex--gap-0-18 {
  gap: 0px 144px;
}

.hcl-flex--gap-0-19 {
  gap: 0px 152px;
}

.hcl-flex--gap-0-20 {
  gap: 0px 160px;
}

.hcl-flex--gap-1 {
  gap: 8px;
}

.hcl-flex--gap-1-0 {
  gap: 8px 0px;
}

.hcl-flex--gap-1-1 {
  gap: 8px 8px;
}

.hcl-flex--gap-1-2 {
  gap: 8px 16px;
}

.hcl-flex--gap-1-3 {
  gap: 8px 24px;
}

.hcl-flex--gap-1-4 {
  gap: 8px 32px;
}

.hcl-flex--gap-1-5 {
  gap: 8px 40px;
}

.hcl-flex--gap-1-6 {
  gap: 8px 48px;
}

.hcl-flex--gap-1-7 {
  gap: 8px 56px;
}

.hcl-flex--gap-1-8 {
  gap: 8px 64px;
}

.hcl-flex--gap-1-9 {
  gap: 8px 72px;
}

.hcl-flex--gap-1-10 {
  gap: 8px 80px;
}

.hcl-flex--gap-1-11 {
  gap: 8px 88px;
}

.hcl-flex--gap-1-12 {
  gap: 8px 96px;
}

.hcl-flex--gap-1-13 {
  gap: 8px 104px;
}

.hcl-flex--gap-1-14 {
  gap: 8px 112px;
}

.hcl-flex--gap-1-15 {
  gap: 8px 120px;
}

.hcl-flex--gap-1-16 {
  gap: 8px 128px;
}

.hcl-flex--gap-1-17 {
  gap: 8px 136px;
}

.hcl-flex--gap-1-18 {
  gap: 8px 144px;
}

.hcl-flex--gap-1-19 {
  gap: 8px 152px;
}

.hcl-flex--gap-1-20 {
  gap: 8px 160px;
}

.hcl-flex--gap-2 {
  gap: 16px;
}

.hcl-flex--gap-2-0 {
  gap: 16px 0px;
}

.hcl-flex--gap-2-1 {
  gap: 16px 8px;
}

.hcl-flex--gap-2-2 {
  gap: 16px 16px;
}

.hcl-flex--gap-2-3 {
  gap: 16px 24px;
}

.hcl-flex--gap-2-4 {
  gap: 16px 32px;
}

.hcl-flex--gap-2-5 {
  gap: 16px 40px;
}

.hcl-flex--gap-2-6 {
  gap: 16px 48px;
}

.hcl-flex--gap-2-7 {
  gap: 16px 56px;
}

.hcl-flex--gap-2-8 {
  gap: 16px 64px;
}

.hcl-flex--gap-2-9 {
  gap: 16px 72px;
}

.hcl-flex--gap-2-10 {
  gap: 16px 80px;
}

.hcl-flex--gap-2-11 {
  gap: 16px 88px;
}

.hcl-flex--gap-2-12 {
  gap: 16px 96px;
}

.hcl-flex--gap-2-13 {
  gap: 16px 104px;
}

.hcl-flex--gap-2-14 {
  gap: 16px 112px;
}

.hcl-flex--gap-2-15 {
  gap: 16px 120px;
}

.hcl-flex--gap-2-16 {
  gap: 16px 128px;
}

.hcl-flex--gap-2-17 {
  gap: 16px 136px;
}

.hcl-flex--gap-2-18 {
  gap: 16px 144px;
}

.hcl-flex--gap-2-19 {
  gap: 16px 152px;
}

.hcl-flex--gap-2-20 {
  gap: 16px 160px;
}

.hcl-flex--gap-3 {
  gap: 24px;
}

.hcl-flex--gap-3-0 {
  gap: 24px 0px;
}

.hcl-flex--gap-3-1 {
  gap: 24px 8px;
}

.hcl-flex--gap-3-2 {
  gap: 24px 16px;
}

.hcl-flex--gap-3-3 {
  gap: 24px 24px;
}

.hcl-flex--gap-3-4 {
  gap: 24px 32px;
}

.hcl-flex--gap-3-5 {
  gap: 24px 40px;
}

.hcl-flex--gap-3-6 {
  gap: 24px 48px;
}

.hcl-flex--gap-3-7 {
  gap: 24px 56px;
}

.hcl-flex--gap-3-8 {
  gap: 24px 64px;
}

.hcl-flex--gap-3-9 {
  gap: 24px 72px;
}

.hcl-flex--gap-3-10 {
  gap: 24px 80px;
}

.hcl-flex--gap-3-11 {
  gap: 24px 88px;
}

.hcl-flex--gap-3-12 {
  gap: 24px 96px;
}

.hcl-flex--gap-3-13 {
  gap: 24px 104px;
}

.hcl-flex--gap-3-14 {
  gap: 24px 112px;
}

.hcl-flex--gap-3-15 {
  gap: 24px 120px;
}

.hcl-flex--gap-3-16 {
  gap: 24px 128px;
}

.hcl-flex--gap-3-17 {
  gap: 24px 136px;
}

.hcl-flex--gap-3-18 {
  gap: 24px 144px;
}

.hcl-flex--gap-3-19 {
  gap: 24px 152px;
}

.hcl-flex--gap-3-20 {
  gap: 24px 160px;
}

.hcl-flex--gap-4 {
  gap: 32px;
}

.hcl-flex--gap-4-0 {
  gap: 32px 0px;
}

.hcl-flex--gap-4-1 {
  gap: 32px 8px;
}

.hcl-flex--gap-4-2 {
  gap: 32px 16px;
}

.hcl-flex--gap-4-3 {
  gap: 32px 24px;
}

.hcl-flex--gap-4-4 {
  gap: 32px 32px;
}

.hcl-flex--gap-4-5 {
  gap: 32px 40px;
}

.hcl-flex--gap-4-6 {
  gap: 32px 48px;
}

.hcl-flex--gap-4-7 {
  gap: 32px 56px;
}

.hcl-flex--gap-4-8 {
  gap: 32px 64px;
}

.hcl-flex--gap-4-9 {
  gap: 32px 72px;
}

.hcl-flex--gap-4-10 {
  gap: 32px 80px;
}

.hcl-flex--gap-4-11 {
  gap: 32px 88px;
}

.hcl-flex--gap-4-12 {
  gap: 32px 96px;
}

.hcl-flex--gap-4-13 {
  gap: 32px 104px;
}

.hcl-flex--gap-4-14 {
  gap: 32px 112px;
}

.hcl-flex--gap-4-15 {
  gap: 32px 120px;
}

.hcl-flex--gap-4-16 {
  gap: 32px 128px;
}

.hcl-flex--gap-4-17 {
  gap: 32px 136px;
}

.hcl-flex--gap-4-18 {
  gap: 32px 144px;
}

.hcl-flex--gap-4-19 {
  gap: 32px 152px;
}

.hcl-flex--gap-4-20 {
  gap: 32px 160px;
}

.hcl-flex--gap-5 {
  gap: 40px;
}

.hcl-flex--gap-5-0 {
  gap: 40px 0px;
}

.hcl-flex--gap-5-1 {
  gap: 40px 8px;
}

.hcl-flex--gap-5-2 {
  gap: 40px 16px;
}

.hcl-flex--gap-5-3 {
  gap: 40px 24px;
}

.hcl-flex--gap-5-4 {
  gap: 40px 32px;
}

.hcl-flex--gap-5-5 {
  gap: 40px 40px;
}

.hcl-flex--gap-5-6 {
  gap: 40px 48px;
}

.hcl-flex--gap-5-7 {
  gap: 40px 56px;
}

.hcl-flex--gap-5-8 {
  gap: 40px 64px;
}

.hcl-flex--gap-5-9 {
  gap: 40px 72px;
}

.hcl-flex--gap-5-10 {
  gap: 40px 80px;
}

.hcl-flex--gap-5-11 {
  gap: 40px 88px;
}

.hcl-flex--gap-5-12 {
  gap: 40px 96px;
}

.hcl-flex--gap-5-13 {
  gap: 40px 104px;
}

.hcl-flex--gap-5-14 {
  gap: 40px 112px;
}

.hcl-flex--gap-5-15 {
  gap: 40px 120px;
}

.hcl-flex--gap-5-16 {
  gap: 40px 128px;
}

.hcl-flex--gap-5-17 {
  gap: 40px 136px;
}

.hcl-flex--gap-5-18 {
  gap: 40px 144px;
}

.hcl-flex--gap-5-19 {
  gap: 40px 152px;
}

.hcl-flex--gap-5-20 {
  gap: 40px 160px;
}

.hcl-flex--gap-6 {
  gap: 48px;
}

.hcl-flex--gap-6-0 {
  gap: 48px 0px;
}

.hcl-flex--gap-6-1 {
  gap: 48px 8px;
}

.hcl-flex--gap-6-2 {
  gap: 48px 16px;
}

.hcl-flex--gap-6-3 {
  gap: 48px 24px;
}

.hcl-flex--gap-6-4 {
  gap: 48px 32px;
}

.hcl-flex--gap-6-5 {
  gap: 48px 40px;
}

.hcl-flex--gap-6-6 {
  gap: 48px 48px;
}

.hcl-flex--gap-6-7 {
  gap: 48px 56px;
}

.hcl-flex--gap-6-8 {
  gap: 48px 64px;
}

.hcl-flex--gap-6-9 {
  gap: 48px 72px;
}

.hcl-flex--gap-6-10 {
  gap: 48px 80px;
}

.hcl-flex--gap-6-11 {
  gap: 48px 88px;
}

.hcl-flex--gap-6-12 {
  gap: 48px 96px;
}

.hcl-flex--gap-6-13 {
  gap: 48px 104px;
}

.hcl-flex--gap-6-14 {
  gap: 48px 112px;
}

.hcl-flex--gap-6-15 {
  gap: 48px 120px;
}

.hcl-flex--gap-6-16 {
  gap: 48px 128px;
}

.hcl-flex--gap-6-17 {
  gap: 48px 136px;
}

.hcl-flex--gap-6-18 {
  gap: 48px 144px;
}

.hcl-flex--gap-6-19 {
  gap: 48px 152px;
}

.hcl-flex--gap-6-20 {
  gap: 48px 160px;
}

.hcl-flex--gap-7 {
  gap: 56px;
}

.hcl-flex--gap-7-0 {
  gap: 56px 0px;
}

.hcl-flex--gap-7-1 {
  gap: 56px 8px;
}

.hcl-flex--gap-7-2 {
  gap: 56px 16px;
}

.hcl-flex--gap-7-3 {
  gap: 56px 24px;
}

.hcl-flex--gap-7-4 {
  gap: 56px 32px;
}

.hcl-flex--gap-7-5 {
  gap: 56px 40px;
}

.hcl-flex--gap-7-6 {
  gap: 56px 48px;
}

.hcl-flex--gap-7-7 {
  gap: 56px 56px;
}

.hcl-flex--gap-7-8 {
  gap: 56px 64px;
}

.hcl-flex--gap-7-9 {
  gap: 56px 72px;
}

.hcl-flex--gap-7-10 {
  gap: 56px 80px;
}

.hcl-flex--gap-7-11 {
  gap: 56px 88px;
}

.hcl-flex--gap-7-12 {
  gap: 56px 96px;
}

.hcl-flex--gap-7-13 {
  gap: 56px 104px;
}

.hcl-flex--gap-7-14 {
  gap: 56px 112px;
}

.hcl-flex--gap-7-15 {
  gap: 56px 120px;
}

.hcl-flex--gap-7-16 {
  gap: 56px 128px;
}

.hcl-flex--gap-7-17 {
  gap: 56px 136px;
}

.hcl-flex--gap-7-18 {
  gap: 56px 144px;
}

.hcl-flex--gap-7-19 {
  gap: 56px 152px;
}

.hcl-flex--gap-7-20 {
  gap: 56px 160px;
}

.hcl-flex--gap-8 {
  gap: 64px;
}

.hcl-flex--gap-8-0 {
  gap: 64px 0px;
}

.hcl-flex--gap-8-1 {
  gap: 64px 8px;
}

.hcl-flex--gap-8-2 {
  gap: 64px 16px;
}

.hcl-flex--gap-8-3 {
  gap: 64px 24px;
}

.hcl-flex--gap-8-4 {
  gap: 64px 32px;
}

.hcl-flex--gap-8-5 {
  gap: 64px 40px;
}

.hcl-flex--gap-8-6 {
  gap: 64px 48px;
}

.hcl-flex--gap-8-7 {
  gap: 64px 56px;
}

.hcl-flex--gap-8-8 {
  gap: 64px 64px;
}

.hcl-flex--gap-8-9 {
  gap: 64px 72px;
}

.hcl-flex--gap-8-10 {
  gap: 64px 80px;
}

.hcl-flex--gap-8-11 {
  gap: 64px 88px;
}

.hcl-flex--gap-8-12 {
  gap: 64px 96px;
}

.hcl-flex--gap-8-13 {
  gap: 64px 104px;
}

.hcl-flex--gap-8-14 {
  gap: 64px 112px;
}

.hcl-flex--gap-8-15 {
  gap: 64px 120px;
}

.hcl-flex--gap-8-16 {
  gap: 64px 128px;
}

.hcl-flex--gap-8-17 {
  gap: 64px 136px;
}

.hcl-flex--gap-8-18 {
  gap: 64px 144px;
}

.hcl-flex--gap-8-19 {
  gap: 64px 152px;
}

.hcl-flex--gap-8-20 {
  gap: 64px 160px;
}

.hcl-flex--gap-9 {
  gap: 72px;
}

.hcl-flex--gap-9-0 {
  gap: 72px 0px;
}

.hcl-flex--gap-9-1 {
  gap: 72px 8px;
}

.hcl-flex--gap-9-2 {
  gap: 72px 16px;
}

.hcl-flex--gap-9-3 {
  gap: 72px 24px;
}

.hcl-flex--gap-9-4 {
  gap: 72px 32px;
}

.hcl-flex--gap-9-5 {
  gap: 72px 40px;
}

.hcl-flex--gap-9-6 {
  gap: 72px 48px;
}

.hcl-flex--gap-9-7 {
  gap: 72px 56px;
}

.hcl-flex--gap-9-8 {
  gap: 72px 64px;
}

.hcl-flex--gap-9-9 {
  gap: 72px 72px;
}

.hcl-flex--gap-9-10 {
  gap: 72px 80px;
}

.hcl-flex--gap-9-11 {
  gap: 72px 88px;
}

.hcl-flex--gap-9-12 {
  gap: 72px 96px;
}

.hcl-flex--gap-9-13 {
  gap: 72px 104px;
}

.hcl-flex--gap-9-14 {
  gap: 72px 112px;
}

.hcl-flex--gap-9-15 {
  gap: 72px 120px;
}

.hcl-flex--gap-9-16 {
  gap: 72px 128px;
}

.hcl-flex--gap-9-17 {
  gap: 72px 136px;
}

.hcl-flex--gap-9-18 {
  gap: 72px 144px;
}

.hcl-flex--gap-9-19 {
  gap: 72px 152px;
}

.hcl-flex--gap-9-20 {
  gap: 72px 160px;
}

.hcl-flex--gap-10 {
  gap: 80px;
}

.hcl-flex--gap-10-0 {
  gap: 80px 0px;
}

.hcl-flex--gap-10-1 {
  gap: 80px 8px;
}

.hcl-flex--gap-10-2 {
  gap: 80px 16px;
}

.hcl-flex--gap-10-3 {
  gap: 80px 24px;
}

.hcl-flex--gap-10-4 {
  gap: 80px 32px;
}

.hcl-flex--gap-10-5 {
  gap: 80px 40px;
}

.hcl-flex--gap-10-6 {
  gap: 80px 48px;
}

.hcl-flex--gap-10-7 {
  gap: 80px 56px;
}

.hcl-flex--gap-10-8 {
  gap: 80px 64px;
}

.hcl-flex--gap-10-9 {
  gap: 80px 72px;
}

.hcl-flex--gap-10-10 {
  gap: 80px 80px;
}

.hcl-flex--gap-10-11 {
  gap: 80px 88px;
}

.hcl-flex--gap-10-12 {
  gap: 80px 96px;
}

.hcl-flex--gap-10-13 {
  gap: 80px 104px;
}

.hcl-flex--gap-10-14 {
  gap: 80px 112px;
}

.hcl-flex--gap-10-15 {
  gap: 80px 120px;
}

.hcl-flex--gap-10-16 {
  gap: 80px 128px;
}

.hcl-flex--gap-10-17 {
  gap: 80px 136px;
}

.hcl-flex--gap-10-18 {
  gap: 80px 144px;
}

.hcl-flex--gap-10-19 {
  gap: 80px 152px;
}

.hcl-flex--gap-10-20 {
  gap: 80px 160px;
}

.hcl-flex--gap-11 {
  gap: 88px;
}

.hcl-flex--gap-11-0 {
  gap: 88px 0px;
}

.hcl-flex--gap-11-1 {
  gap: 88px 8px;
}

.hcl-flex--gap-11-2 {
  gap: 88px 16px;
}

.hcl-flex--gap-11-3 {
  gap: 88px 24px;
}

.hcl-flex--gap-11-4 {
  gap: 88px 32px;
}

.hcl-flex--gap-11-5 {
  gap: 88px 40px;
}

.hcl-flex--gap-11-6 {
  gap: 88px 48px;
}

.hcl-flex--gap-11-7 {
  gap: 88px 56px;
}

.hcl-flex--gap-11-8 {
  gap: 88px 64px;
}

.hcl-flex--gap-11-9 {
  gap: 88px 72px;
}

.hcl-flex--gap-11-10 {
  gap: 88px 80px;
}

.hcl-flex--gap-11-11 {
  gap: 88px 88px;
}

.hcl-flex--gap-11-12 {
  gap: 88px 96px;
}

.hcl-flex--gap-11-13 {
  gap: 88px 104px;
}

.hcl-flex--gap-11-14 {
  gap: 88px 112px;
}

.hcl-flex--gap-11-15 {
  gap: 88px 120px;
}

.hcl-flex--gap-11-16 {
  gap: 88px 128px;
}

.hcl-flex--gap-11-17 {
  gap: 88px 136px;
}

.hcl-flex--gap-11-18 {
  gap: 88px 144px;
}

.hcl-flex--gap-11-19 {
  gap: 88px 152px;
}

.hcl-flex--gap-11-20 {
  gap: 88px 160px;
}

.hcl-flex--gap-12 {
  gap: 96px;
}

.hcl-flex--gap-12-0 {
  gap: 96px 0px;
}

.hcl-flex--gap-12-1 {
  gap: 96px 8px;
}

.hcl-flex--gap-12-2 {
  gap: 96px 16px;
}

.hcl-flex--gap-12-3 {
  gap: 96px 24px;
}

.hcl-flex--gap-12-4 {
  gap: 96px 32px;
}

.hcl-flex--gap-12-5 {
  gap: 96px 40px;
}

.hcl-flex--gap-12-6 {
  gap: 96px 48px;
}

.hcl-flex--gap-12-7 {
  gap: 96px 56px;
}

.hcl-flex--gap-12-8 {
  gap: 96px 64px;
}

.hcl-flex--gap-12-9 {
  gap: 96px 72px;
}

.hcl-flex--gap-12-10 {
  gap: 96px 80px;
}

.hcl-flex--gap-12-11 {
  gap: 96px 88px;
}

.hcl-flex--gap-12-12 {
  gap: 96px 96px;
}

.hcl-flex--gap-12-13 {
  gap: 96px 104px;
}

.hcl-flex--gap-12-14 {
  gap: 96px 112px;
}

.hcl-flex--gap-12-15 {
  gap: 96px 120px;
}

.hcl-flex--gap-12-16 {
  gap: 96px 128px;
}

.hcl-flex--gap-12-17 {
  gap: 96px 136px;
}

.hcl-flex--gap-12-18 {
  gap: 96px 144px;
}

.hcl-flex--gap-12-19 {
  gap: 96px 152px;
}

.hcl-flex--gap-12-20 {
  gap: 96px 160px;
}

.hcl-flex--gap-13 {
  gap: 104px;
}

.hcl-flex--gap-13-0 {
  gap: 104px 0px;
}

.hcl-flex--gap-13-1 {
  gap: 104px 8px;
}

.hcl-flex--gap-13-2 {
  gap: 104px 16px;
}

.hcl-flex--gap-13-3 {
  gap: 104px 24px;
}

.hcl-flex--gap-13-4 {
  gap: 104px 32px;
}

.hcl-flex--gap-13-5 {
  gap: 104px 40px;
}

.hcl-flex--gap-13-6 {
  gap: 104px 48px;
}

.hcl-flex--gap-13-7 {
  gap: 104px 56px;
}

.hcl-flex--gap-13-8 {
  gap: 104px 64px;
}

.hcl-flex--gap-13-9 {
  gap: 104px 72px;
}

.hcl-flex--gap-13-10 {
  gap: 104px 80px;
}

.hcl-flex--gap-13-11 {
  gap: 104px 88px;
}

.hcl-flex--gap-13-12 {
  gap: 104px 96px;
}

.hcl-flex--gap-13-13 {
  gap: 104px 104px;
}

.hcl-flex--gap-13-14 {
  gap: 104px 112px;
}

.hcl-flex--gap-13-15 {
  gap: 104px 120px;
}

.hcl-flex--gap-13-16 {
  gap: 104px 128px;
}

.hcl-flex--gap-13-17 {
  gap: 104px 136px;
}

.hcl-flex--gap-13-18 {
  gap: 104px 144px;
}

.hcl-flex--gap-13-19 {
  gap: 104px 152px;
}

.hcl-flex--gap-13-20 {
  gap: 104px 160px;
}

.hcl-flex--gap-14 {
  gap: 112px;
}

.hcl-flex--gap-14-0 {
  gap: 112px 0px;
}

.hcl-flex--gap-14-1 {
  gap: 112px 8px;
}

.hcl-flex--gap-14-2 {
  gap: 112px 16px;
}

.hcl-flex--gap-14-3 {
  gap: 112px 24px;
}

.hcl-flex--gap-14-4 {
  gap: 112px 32px;
}

.hcl-flex--gap-14-5 {
  gap: 112px 40px;
}

.hcl-flex--gap-14-6 {
  gap: 112px 48px;
}

.hcl-flex--gap-14-7 {
  gap: 112px 56px;
}

.hcl-flex--gap-14-8 {
  gap: 112px 64px;
}

.hcl-flex--gap-14-9 {
  gap: 112px 72px;
}

.hcl-flex--gap-14-10 {
  gap: 112px 80px;
}

.hcl-flex--gap-14-11 {
  gap: 112px 88px;
}

.hcl-flex--gap-14-12 {
  gap: 112px 96px;
}

.hcl-flex--gap-14-13 {
  gap: 112px 104px;
}

.hcl-flex--gap-14-14 {
  gap: 112px 112px;
}

.hcl-flex--gap-14-15 {
  gap: 112px 120px;
}

.hcl-flex--gap-14-16 {
  gap: 112px 128px;
}

.hcl-flex--gap-14-17 {
  gap: 112px 136px;
}

.hcl-flex--gap-14-18 {
  gap: 112px 144px;
}

.hcl-flex--gap-14-19 {
  gap: 112px 152px;
}

.hcl-flex--gap-14-20 {
  gap: 112px 160px;
}

.hcl-flex--gap-15 {
  gap: 120px;
}

.hcl-flex--gap-15-0 {
  gap: 120px 0px;
}

.hcl-flex--gap-15-1 {
  gap: 120px 8px;
}

.hcl-flex--gap-15-2 {
  gap: 120px 16px;
}

.hcl-flex--gap-15-3 {
  gap: 120px 24px;
}

.hcl-flex--gap-15-4 {
  gap: 120px 32px;
}

.hcl-flex--gap-15-5 {
  gap: 120px 40px;
}

.hcl-flex--gap-15-6 {
  gap: 120px 48px;
}

.hcl-flex--gap-15-7 {
  gap: 120px 56px;
}

.hcl-flex--gap-15-8 {
  gap: 120px 64px;
}

.hcl-flex--gap-15-9 {
  gap: 120px 72px;
}

.hcl-flex--gap-15-10 {
  gap: 120px 80px;
}

.hcl-flex--gap-15-11 {
  gap: 120px 88px;
}

.hcl-flex--gap-15-12 {
  gap: 120px 96px;
}

.hcl-flex--gap-15-13 {
  gap: 120px 104px;
}

.hcl-flex--gap-15-14 {
  gap: 120px 112px;
}

.hcl-flex--gap-15-15 {
  gap: 120px 120px;
}

.hcl-flex--gap-15-16 {
  gap: 120px 128px;
}

.hcl-flex--gap-15-17 {
  gap: 120px 136px;
}

.hcl-flex--gap-15-18 {
  gap: 120px 144px;
}

.hcl-flex--gap-15-19 {
  gap: 120px 152px;
}

.hcl-flex--gap-15-20 {
  gap: 120px 160px;
}

.hcl-flex--gap-16 {
  gap: 128px;
}

.hcl-flex--gap-16-0 {
  gap: 128px 0px;
}

.hcl-flex--gap-16-1 {
  gap: 128px 8px;
}

.hcl-flex--gap-16-2 {
  gap: 128px 16px;
}

.hcl-flex--gap-16-3 {
  gap: 128px 24px;
}

.hcl-flex--gap-16-4 {
  gap: 128px 32px;
}

.hcl-flex--gap-16-5 {
  gap: 128px 40px;
}

.hcl-flex--gap-16-6 {
  gap: 128px 48px;
}

.hcl-flex--gap-16-7 {
  gap: 128px 56px;
}

.hcl-flex--gap-16-8 {
  gap: 128px 64px;
}

.hcl-flex--gap-16-9 {
  gap: 128px 72px;
}

.hcl-flex--gap-16-10 {
  gap: 128px 80px;
}

.hcl-flex--gap-16-11 {
  gap: 128px 88px;
}

.hcl-flex--gap-16-12 {
  gap: 128px 96px;
}

.hcl-flex--gap-16-13 {
  gap: 128px 104px;
}

.hcl-flex--gap-16-14 {
  gap: 128px 112px;
}

.hcl-flex--gap-16-15 {
  gap: 128px 120px;
}

.hcl-flex--gap-16-16 {
  gap: 128px 128px;
}

.hcl-flex--gap-16-17 {
  gap: 128px 136px;
}

.hcl-flex--gap-16-18 {
  gap: 128px 144px;
}

.hcl-flex--gap-16-19 {
  gap: 128px 152px;
}

.hcl-flex--gap-16-20 {
  gap: 128px 160px;
}

.hcl-flex--gap-17 {
  gap: 136px;
}

.hcl-flex--gap-17-0 {
  gap: 136px 0px;
}

.hcl-flex--gap-17-1 {
  gap: 136px 8px;
}

.hcl-flex--gap-17-2 {
  gap: 136px 16px;
}

.hcl-flex--gap-17-3 {
  gap: 136px 24px;
}

.hcl-flex--gap-17-4 {
  gap: 136px 32px;
}

.hcl-flex--gap-17-5 {
  gap: 136px 40px;
}

.hcl-flex--gap-17-6 {
  gap: 136px 48px;
}

.hcl-flex--gap-17-7 {
  gap: 136px 56px;
}

.hcl-flex--gap-17-8 {
  gap: 136px 64px;
}

.hcl-flex--gap-17-9 {
  gap: 136px 72px;
}

.hcl-flex--gap-17-10 {
  gap: 136px 80px;
}

.hcl-flex--gap-17-11 {
  gap: 136px 88px;
}

.hcl-flex--gap-17-12 {
  gap: 136px 96px;
}

.hcl-flex--gap-17-13 {
  gap: 136px 104px;
}

.hcl-flex--gap-17-14 {
  gap: 136px 112px;
}

.hcl-flex--gap-17-15 {
  gap: 136px 120px;
}

.hcl-flex--gap-17-16 {
  gap: 136px 128px;
}

.hcl-flex--gap-17-17 {
  gap: 136px 136px;
}

.hcl-flex--gap-17-18 {
  gap: 136px 144px;
}

.hcl-flex--gap-17-19 {
  gap: 136px 152px;
}

.hcl-flex--gap-17-20 {
  gap: 136px 160px;
}

.hcl-flex--gap-18 {
  gap: 144px;
}

.hcl-flex--gap-18-0 {
  gap: 144px 0px;
}

.hcl-flex--gap-18-1 {
  gap: 144px 8px;
}

.hcl-flex--gap-18-2 {
  gap: 144px 16px;
}

.hcl-flex--gap-18-3 {
  gap: 144px 24px;
}

.hcl-flex--gap-18-4 {
  gap: 144px 32px;
}

.hcl-flex--gap-18-5 {
  gap: 144px 40px;
}

.hcl-flex--gap-18-6 {
  gap: 144px 48px;
}

.hcl-flex--gap-18-7 {
  gap: 144px 56px;
}

.hcl-flex--gap-18-8 {
  gap: 144px 64px;
}

.hcl-flex--gap-18-9 {
  gap: 144px 72px;
}

.hcl-flex--gap-18-10 {
  gap: 144px 80px;
}

.hcl-flex--gap-18-11 {
  gap: 144px 88px;
}

.hcl-flex--gap-18-12 {
  gap: 144px 96px;
}

.hcl-flex--gap-18-13 {
  gap: 144px 104px;
}

.hcl-flex--gap-18-14 {
  gap: 144px 112px;
}

.hcl-flex--gap-18-15 {
  gap: 144px 120px;
}

.hcl-flex--gap-18-16 {
  gap: 144px 128px;
}

.hcl-flex--gap-18-17 {
  gap: 144px 136px;
}

.hcl-flex--gap-18-18 {
  gap: 144px 144px;
}

.hcl-flex--gap-18-19 {
  gap: 144px 152px;
}

.hcl-flex--gap-18-20 {
  gap: 144px 160px;
}

.hcl-flex--gap-19 {
  gap: 152px;
}

.hcl-flex--gap-19-0 {
  gap: 152px 0px;
}

.hcl-flex--gap-19-1 {
  gap: 152px 8px;
}

.hcl-flex--gap-19-2 {
  gap: 152px 16px;
}

.hcl-flex--gap-19-3 {
  gap: 152px 24px;
}

.hcl-flex--gap-19-4 {
  gap: 152px 32px;
}

.hcl-flex--gap-19-5 {
  gap: 152px 40px;
}

.hcl-flex--gap-19-6 {
  gap: 152px 48px;
}

.hcl-flex--gap-19-7 {
  gap: 152px 56px;
}

.hcl-flex--gap-19-8 {
  gap: 152px 64px;
}

.hcl-flex--gap-19-9 {
  gap: 152px 72px;
}

.hcl-flex--gap-19-10 {
  gap: 152px 80px;
}

.hcl-flex--gap-19-11 {
  gap: 152px 88px;
}

.hcl-flex--gap-19-12 {
  gap: 152px 96px;
}

.hcl-flex--gap-19-13 {
  gap: 152px 104px;
}

.hcl-flex--gap-19-14 {
  gap: 152px 112px;
}

.hcl-flex--gap-19-15 {
  gap: 152px 120px;
}

.hcl-flex--gap-19-16 {
  gap: 152px 128px;
}

.hcl-flex--gap-19-17 {
  gap: 152px 136px;
}

.hcl-flex--gap-19-18 {
  gap: 152px 144px;
}

.hcl-flex--gap-19-19 {
  gap: 152px 152px;
}

.hcl-flex--gap-19-20 {
  gap: 152px 160px;
}

.hcl-flex--gap-20 {
  gap: 160px;
}

.hcl-flex--gap-20-0 {
  gap: 160px 0px;
}

.hcl-flex--gap-20-1 {
  gap: 160px 8px;
}

.hcl-flex--gap-20-2 {
  gap: 160px 16px;
}

.hcl-flex--gap-20-3 {
  gap: 160px 24px;
}

.hcl-flex--gap-20-4 {
  gap: 160px 32px;
}

.hcl-flex--gap-20-5 {
  gap: 160px 40px;
}

.hcl-flex--gap-20-6 {
  gap: 160px 48px;
}

.hcl-flex--gap-20-7 {
  gap: 160px 56px;
}

.hcl-flex--gap-20-8 {
  gap: 160px 64px;
}

.hcl-flex--gap-20-9 {
  gap: 160px 72px;
}

.hcl-flex--gap-20-10 {
  gap: 160px 80px;
}

.hcl-flex--gap-20-11 {
  gap: 160px 88px;
}

.hcl-flex--gap-20-12 {
  gap: 160px 96px;
}

.hcl-flex--gap-20-13 {
  gap: 160px 104px;
}

.hcl-flex--gap-20-14 {
  gap: 160px 112px;
}

.hcl-flex--gap-20-15 {
  gap: 160px 120px;
}

.hcl-flex--gap-20-16 {
  gap: 160px 128px;
}

.hcl-flex--gap-20-17 {
  gap: 160px 136px;
}

.hcl-flex--gap-20-18 {
  gap: 160px 144px;
}

.hcl-flex--gap-20-19 {
  gap: 160px 152px;
}

.hcl-flex--gap-20-20 {
  gap: 160px 160px;
}

.hcl-flex--wrap-nowrap {
  flex-wrap: nowrap;
}

.hcl-flex--wrap-wrap {
  flex-wrap: wrap;
}

.hcl-flex--wrap-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.hcl-flex--justify-flex-start {
  justify-content: flex-start;
}

.hcl-flex--justify-flex-end {
  justify-content: flex-end;
}

.hcl-flex--justify-center {
  justify-content: center;
}

.hcl-flex--justify-space-between {
  justify-content: space-between;
}

.hcl-flex--justify-space-around {
  justify-content: space-around;
}

.hcl-flex--justify-space-evenly {
  justify-content: space-evenly;
}

.hcl-flex--align-start {
  align-items: start;
}

.hcl-flex--align-flex-start {
  align-items: flex-start;
}

.hcl-flex--align-flex-end {
  align-items: flex-end;
}

.hcl-flex--align-center {
  align-items: center;
}

.hcl-flex--align-baseline {
  align-items: baseline;
}

.hcl-flex--align-stretch {
  align-items: stretch;
}

.hcl-flex--align-end {
  align-items: end;
}

.hcl-flex--align-self-end {
  align-items: self-end;
}

.hcl-flex--align-self-start {
  align-items: self-start;
}

.hcl-flex--align-normal {
  align-items: normal;
}

.hcl-flex--align-content-start {
  align-content: start;
}

.hcl-flex--align-content-flex-start {
  align-content: flex-start;
}

.hcl-flex--align-content-flex-end {
  align-content: flex-end;
}

.hcl-flex--align-content-center {
  align-content: center;
}

.hcl-flex--align-content-baseline {
  align-content: baseline;
}

.hcl-flex--align-content-stretch {
  align-content: stretch;
}

.hcl-flex--align-content-end {
  align-content: end;
}

.hcl-flex--align-content-normal {
  align-content: normal;
}

.hcl-flex--align-content-first baseline {
  align-content: first baseline;
}

.hcl-flex--align-content-last baseline {
  align-content: last baseline;
}

.hcl-flex--align-content-space-around {
  align-content: space-around;
}

.hcl-flex--align-content-space-evenly {
  align-content: space-evenly;
}

.hcl-flex--align-content-space-between {
  align-content: space-between;
}

.hcl-flex--direction-row {
  flex-direction: row;
}

.hcl-flex--direction-row-reverse {
  flex-direction: row-reverse;
}

.hcl-flex--direction-column {
  flex-direction: column;
}

.hcl-flex--direction-column-reverse {
  flex-direction: column-reverse;
}

.hcl-flex--align-self-auto {
  align-self: auto;
}

.hcl-flex--align-self-flex-start {
  align-self: flex-start;
}

.hcl-flex--align-self-flex-end {
  align-self: flex-end;
}

.hcl-flex--align-self-center {
  align-self: center;
}

.hcl-flex--align-self-baseline {
  align-self: baseline;
}

.hcl-flex--align-self-stretch {
  align-self: stretch;
}

@media (min-width: 550px) {
  .hcl-flex--sm-wrap-nowrap {
    flex-wrap: nowrap;
  }
  .hcl-flex--sm-wrap-wrap {
    flex-wrap: wrap;
  }
  .hcl-flex--sm-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .hcl-flex--sm-justify-flex-start {
    justify-content: flex-start;
  }
  .hcl-flex--sm-justify-flex-end {
    justify-content: flex-end;
  }
  .hcl-flex--sm-justify-center {
    justify-content: center;
  }
  .hcl-flex--sm-justify-space-between {
    justify-content: space-between;
  }
  .hcl-flex--sm-justify-space-around {
    justify-content: space-around;
  }
  .hcl-flex--sm-justify-space-evenly {
    justify-content: space-evenly;
  }
  .hcl-flex--sm-align-start {
    align-items: start;
  }
  .hcl-flex--sm-align-flex-start {
    align-items: flex-start;
  }
  .hcl-flex--sm-align-flex-end {
    align-items: flex-end;
  }
  .hcl-flex--sm-align-center {
    align-items: center;
  }
  .hcl-flex--sm-align-baseline {
    align-items: baseline;
  }
  .hcl-flex--sm-align-stretch {
    align-items: stretch;
  }
  .hcl-flex--sm-align-end {
    align-items: end;
  }
  .hcl-flex--sm-align-self-end {
    align-items: self-end;
  }
  .hcl-flex--sm-align-self-start {
    align-items: self-start;
  }
  .hcl-flex--sm-align-normal {
    align-items: normal;
  }
  .hcl-flex--sm-align-content-start {
    align-content: start;
  }
  .hcl-flex--sm-align-content-flex-start {
    align-content: flex-start;
  }
  .hcl-flex--sm-align-content-flex-end {
    align-content: flex-end;
  }
  .hcl-flex--sm-align-content-center {
    align-content: center;
  }
  .hcl-flex--sm-align-content-baseline {
    align-content: baseline;
  }
  .hcl-flex--sm-align-content-stretch {
    align-content: stretch;
  }
  .hcl-flex--sm-align-content-end {
    align-content: end;
  }
  .hcl-flex--sm-align-content-normal {
    align-content: normal;
  }
  .hcl-flex--sm-align-content-first baseline {
    align-content: first baseline;
  }
  .hcl-flex--sm-align-content-last baseline {
    align-content: last baseline;
  }
  .hcl-flex--sm-align-content-space-around {
    align-content: space-around;
  }
  .hcl-flex--sm-align-content-space-evenly {
    align-content: space-evenly;
  }
  .hcl-flex--sm-align-content-space-between {
    align-content: space-between;
  }
  .hcl-flex--sm-direction-row {
    flex-direction: row;
  }
  .hcl-flex--sm-direction-row-reverse {
    flex-direction: row-reverse;
  }
  .hcl-flex--sm-direction-column {
    flex-direction: column;
  }
  .hcl-flex--sm-direction-column-reverse {
    flex-direction: column-reverse;
  }
  .hcl-flex--sm-align-self-auto {
    align-self: auto;
  }
  .hcl-flex--sm-align-self-flex-start {
    align-self: flex-start;
  }
  .hcl-flex--sm-align-self-flex-end {
    align-self: flex-end;
  }
  .hcl-flex--sm-align-self-center {
    align-self: center;
  }
  .hcl-flex--sm-align-self-baseline {
    align-self: baseline;
  }
  .hcl-flex--sm-align-self-stretch {
    align-self: stretch;
  }
}
@media (min-width: 670px) {
  .hcl-flex--md-wrap-nowrap {
    flex-wrap: nowrap;
  }
  .hcl-flex--md-wrap-wrap {
    flex-wrap: wrap;
  }
  .hcl-flex--md-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .hcl-flex--md-justify-flex-start {
    justify-content: flex-start;
  }
  .hcl-flex--md-justify-flex-end {
    justify-content: flex-end;
  }
  .hcl-flex--md-justify-center {
    justify-content: center;
  }
  .hcl-flex--md-justify-space-between {
    justify-content: space-between;
  }
  .hcl-flex--md-justify-space-around {
    justify-content: space-around;
  }
  .hcl-flex--md-justify-space-evenly {
    justify-content: space-evenly;
  }
  .hcl-flex--md-align-start {
    align-items: start;
  }
  .hcl-flex--md-align-flex-start {
    align-items: flex-start;
  }
  .hcl-flex--md-align-flex-end {
    align-items: flex-end;
  }
  .hcl-flex--md-align-center {
    align-items: center;
  }
  .hcl-flex--md-align-baseline {
    align-items: baseline;
  }
  .hcl-flex--md-align-stretch {
    align-items: stretch;
  }
  .hcl-flex--md-align-end {
    align-items: end;
  }
  .hcl-flex--md-align-self-end {
    align-items: self-end;
  }
  .hcl-flex--md-align-self-start {
    align-items: self-start;
  }
  .hcl-flex--md-align-normal {
    align-items: normal;
  }
  .hcl-flex--md-align-content-start {
    align-content: start;
  }
  .hcl-flex--md-align-content-flex-start {
    align-content: flex-start;
  }
  .hcl-flex--md-align-content-flex-end {
    align-content: flex-end;
  }
  .hcl-flex--md-align-content-center {
    align-content: center;
  }
  .hcl-flex--md-align-content-baseline {
    align-content: baseline;
  }
  .hcl-flex--md-align-content-stretch {
    align-content: stretch;
  }
  .hcl-flex--md-align-content-end {
    align-content: end;
  }
  .hcl-flex--md-align-content-normal {
    align-content: normal;
  }
  .hcl-flex--md-align-content-first baseline {
    align-content: first baseline;
  }
  .hcl-flex--md-align-content-last baseline {
    align-content: last baseline;
  }
  .hcl-flex--md-align-content-space-around {
    align-content: space-around;
  }
  .hcl-flex--md-align-content-space-evenly {
    align-content: space-evenly;
  }
  .hcl-flex--md-align-content-space-between {
    align-content: space-between;
  }
  .hcl-flex--md-direction-row {
    flex-direction: row;
  }
  .hcl-flex--md-direction-row-reverse {
    flex-direction: row-reverse;
  }
  .hcl-flex--md-direction-column {
    flex-direction: column;
  }
  .hcl-flex--md-direction-column-reverse {
    flex-direction: column-reverse;
  }
  .hcl-flex--md-align-self-auto {
    align-self: auto;
  }
  .hcl-flex--md-align-self-flex-start {
    align-self: flex-start;
  }
  .hcl-flex--md-align-self-flex-end {
    align-self: flex-end;
  }
  .hcl-flex--md-align-self-center {
    align-self: center;
  }
  .hcl-flex--md-align-self-baseline {
    align-self: baseline;
  }
  .hcl-flex--md-align-self-stretch {
    align-self: stretch;
  }
}
@media (min-width: 990px) {
  .hcl-flex--lg-wrap-nowrap {
    flex-wrap: nowrap;
  }
  .hcl-flex--lg-wrap-wrap {
    flex-wrap: wrap;
  }
  .hcl-flex--lg-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .hcl-flex--lg-justify-flex-start {
    justify-content: flex-start;
  }
  .hcl-flex--lg-justify-flex-end {
    justify-content: flex-end;
  }
  .hcl-flex--lg-justify-center {
    justify-content: center;
  }
  .hcl-flex--lg-justify-space-between {
    justify-content: space-between;
  }
  .hcl-flex--lg-justify-space-around {
    justify-content: space-around;
  }
  .hcl-flex--lg-justify-space-evenly {
    justify-content: space-evenly;
  }
  .hcl-flex--lg-align-start {
    align-items: start;
  }
  .hcl-flex--lg-align-flex-start {
    align-items: flex-start;
  }
  .hcl-flex--lg-align-flex-end {
    align-items: flex-end;
  }
  .hcl-flex--lg-align-center {
    align-items: center;
  }
  .hcl-flex--lg-align-baseline {
    align-items: baseline;
  }
  .hcl-flex--lg-align-stretch {
    align-items: stretch;
  }
  .hcl-flex--lg-align-end {
    align-items: end;
  }
  .hcl-flex--lg-align-self-end {
    align-items: self-end;
  }
  .hcl-flex--lg-align-self-start {
    align-items: self-start;
  }
  .hcl-flex--lg-align-normal {
    align-items: normal;
  }
  .hcl-flex--lg-align-content-start {
    align-content: start;
  }
  .hcl-flex--lg-align-content-flex-start {
    align-content: flex-start;
  }
  .hcl-flex--lg-align-content-flex-end {
    align-content: flex-end;
  }
  .hcl-flex--lg-align-content-center {
    align-content: center;
  }
  .hcl-flex--lg-align-content-baseline {
    align-content: baseline;
  }
  .hcl-flex--lg-align-content-stretch {
    align-content: stretch;
  }
  .hcl-flex--lg-align-content-end {
    align-content: end;
  }
  .hcl-flex--lg-align-content-normal {
    align-content: normal;
  }
  .hcl-flex--lg-align-content-first baseline {
    align-content: first baseline;
  }
  .hcl-flex--lg-align-content-last baseline {
    align-content: last baseline;
  }
  .hcl-flex--lg-align-content-space-around {
    align-content: space-around;
  }
  .hcl-flex--lg-align-content-space-evenly {
    align-content: space-evenly;
  }
  .hcl-flex--lg-align-content-space-between {
    align-content: space-between;
  }
  .hcl-flex--lg-direction-row {
    flex-direction: row;
  }
  .hcl-flex--lg-direction-row-reverse {
    flex-direction: row-reverse;
  }
  .hcl-flex--lg-direction-column {
    flex-direction: column;
  }
  .hcl-flex--lg-direction-column-reverse {
    flex-direction: column-reverse;
  }
  .hcl-flex--lg-align-self-auto {
    align-self: auto;
  }
  .hcl-flex--lg-align-self-flex-start {
    align-self: flex-start;
  }
  .hcl-flex--lg-align-self-flex-end {
    align-self: flex-end;
  }
  .hcl-flex--lg-align-self-center {
    align-self: center;
  }
  .hcl-flex--lg-align-self-baseline {
    align-self: baseline;
  }
  .hcl-flex--lg-align-self-stretch {
    align-self: stretch;
  }
}
@media (min-width: 1040px) {
  .hcl-flex--xl-wrap-nowrap {
    flex-wrap: nowrap;
  }
  .hcl-flex--xl-wrap-wrap {
    flex-wrap: wrap;
  }
  .hcl-flex--xl-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .hcl-flex--xl-justify-flex-start {
    justify-content: flex-start;
  }
  .hcl-flex--xl-justify-flex-end {
    justify-content: flex-end;
  }
  .hcl-flex--xl-justify-center {
    justify-content: center;
  }
  .hcl-flex--xl-justify-space-between {
    justify-content: space-between;
  }
  .hcl-flex--xl-justify-space-around {
    justify-content: space-around;
  }
  .hcl-flex--xl-justify-space-evenly {
    justify-content: space-evenly;
  }
  .hcl-flex--xl-align-start {
    align-items: start;
  }
  .hcl-flex--xl-align-flex-start {
    align-items: flex-start;
  }
  .hcl-flex--xl-align-flex-end {
    align-items: flex-end;
  }
  .hcl-flex--xl-align-center {
    align-items: center;
  }
  .hcl-flex--xl-align-baseline {
    align-items: baseline;
  }
  .hcl-flex--xl-align-stretch {
    align-items: stretch;
  }
  .hcl-flex--xl-align-end {
    align-items: end;
  }
  .hcl-flex--xl-align-self-end {
    align-items: self-end;
  }
  .hcl-flex--xl-align-self-start {
    align-items: self-start;
  }
  .hcl-flex--xl-align-normal {
    align-items: normal;
  }
  .hcl-flex--xl-align-content-start {
    align-content: start;
  }
  .hcl-flex--xl-align-content-flex-start {
    align-content: flex-start;
  }
  .hcl-flex--xl-align-content-flex-end {
    align-content: flex-end;
  }
  .hcl-flex--xl-align-content-center {
    align-content: center;
  }
  .hcl-flex--xl-align-content-baseline {
    align-content: baseline;
  }
  .hcl-flex--xl-align-content-stretch {
    align-content: stretch;
  }
  .hcl-flex--xl-align-content-end {
    align-content: end;
  }
  .hcl-flex--xl-align-content-normal {
    align-content: normal;
  }
  .hcl-flex--xl-align-content-first baseline {
    align-content: first baseline;
  }
  .hcl-flex--xl-align-content-last baseline {
    align-content: last baseline;
  }
  .hcl-flex--xl-align-content-space-around {
    align-content: space-around;
  }
  .hcl-flex--xl-align-content-space-evenly {
    align-content: space-evenly;
  }
  .hcl-flex--xl-align-content-space-between {
    align-content: space-between;
  }
  .hcl-flex--xl-direction-row {
    flex-direction: row;
  }
  .hcl-flex--xl-direction-row-reverse {
    flex-direction: row-reverse;
  }
  .hcl-flex--xl-direction-column {
    flex-direction: column;
  }
  .hcl-flex--xl-direction-column-reverse {
    flex-direction: column-reverse;
  }
  .hcl-flex--xl-align-self-auto {
    align-self: auto;
  }
  .hcl-flex--xl-align-self-flex-start {
    align-self: flex-start;
  }
  .hcl-flex--xl-align-self-flex-end {
    align-self: flex-end;
  }
  .hcl-flex--xl-align-self-center {
    align-self: center;
  }
  .hcl-flex--xl-align-self-baseline {
    align-self: baseline;
  }
  .hcl-flex--xl-align-self-stretch {
    align-self: stretch;
  }
}
.hcl-flex--container,
.hcl-flex--item {
  --flex-xs: ;
  --flex-sm: var(--flex-xs);
  --flex-md: var(--flex-sm);
  --flex-lg: var(--flex-md);
  --flex-xl: var(--flex-lg);
  --flex: var(--flex-xs);
  flex: var(--flex);
  --width-xs: ;
  --width-sm: var(--width-xs);
  --width-md: var(--width-sm);
  --width-lg: var(--width-md);
  --width-xl: var(--width-lg);
  --width: var(--width-xs);
  width: var(--width);
  --height-xs: ;
  --height-sm: var(--height-xs);
  --height-md: var(--height-sm);
  --height-lg: var(--height-md);
  --height-xl: var(--height-lg);
  --height: var(--height-xs);
  height: var(--height);
  --order-xs: ;
  --order-sm: var(--order-xs);
  --order-md: var(--order-sm);
  --order-lg: var(--order-md);
  --order-xl: var(--order-lg);
  --order: var(--order-xs);
  order: var(--order);
  --padding-top-xs: ;
  --padding-top-sm: var(--padding-top-xs);
  --padding-top-md: var(--padding-top-sm);
  --padding-top-lg: var(--padding-top-md);
  --padding-top-xl: var(--padding-top-lg);
  --padding-top: var(--padding-top-xs);
  padding-top: var(--padding-top);
  --padding-right-xs: ;
  --padding-right-sm: var(--padding-right-xs);
  --padding-right-md: var(--padding-right-sm);
  --padding-right-lg: var(--padding-right-md);
  --padding-right-xl: var(--padding-right-lg);
  --padding-right: var(--padding-right-xs);
  padding-right: var(--padding-right);
  --padding-left-xs: ;
  --padding-left-sm: var(--padding-left-xs);
  --padding-left-md: var(--padding-left-sm);
  --padding-left-lg: var(--padding-left-md);
  --padding-left-xl: var(--padding-left-lg);
  --padding-left: var(--padding-left-xs);
  padding-left: var(--padding-left);
  --padding-bottom-xs: ;
  --padding-bottom-sm: var(--padding-bottom-xs);
  --padding-bottom-md: var(--padding-bottom-sm);
  --padding-bottom-lg: var(--padding-bottom-md);
  --padding-bottom-xl: var(--padding-bottom-lg);
  --padding-bottom: var(--padding-bottom-xs);
  padding-bottom: var(--padding-bottom);
  --margin-top-xs: ;
  --margin-top-sm: var(--margin-top-xs);
  --margin-top-md: var(--margin-top-sm);
  --margin-top-lg: var(--margin-top-md);
  --margin-top-xl: var(--margin-top-lg);
  --margin-top: var(--margin-top-xs);
  margin-top: var(--margin-top);
  --margin-right-xs: ;
  --margin-right-sm: var(--margin-right-xs);
  --margin-right-md: var(--margin-right-sm);
  --margin-right-lg: var(--margin-right-md);
  --margin-right-xl: var(--margin-right-lg);
  --margin-right: var(--margin-right-xs);
  margin-right: var(--margin-right);
  --margin-left-xs: ;
  --margin-left-sm: var(--margin-left-xs);
  --margin-left-md: var(--margin-left-sm);
  --margin-left-lg: var(--margin-left-md);
  --margin-left-xl: var(--margin-left-lg);
  --margin-left: var(--margin-left-xs);
  margin-left: var(--margin-left);
  --margin-bottom-xs: ;
  --margin-bottom-sm: var(--margin-bottom-xs);
  --margin-bottom-md: var(--margin-bottom-sm);
  --margin-bottom-lg: var(--margin-bottom-md);
  --margin-bottom-xl: var(--margin-bottom-lg);
  --margin-bottom: var(--margin-bottom-xs);
  margin-bottom: var(--margin-bottom);
}
@media (min-width: 321px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --flex: var(--flex-xs);
    --width: var(--width-xs);
    --height: var(--height-xs);
    --order: var(--order-xs);
  }
}
@media (min-width: 550px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --flex: var(--flex-sm);
    --width: var(--width-sm);
    --height: var(--height-sm);
    --order: var(--order-sm);
  }
}
@media (min-width: 670px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --flex: var(--flex-md);
    --width: var(--width-md);
    --height: var(--height-md);
    --order: var(--order-md);
  }
}
@media (min-width: 990px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --flex: var(--flex-lg);
    --width: var(--width-lg);
    --height: var(--height-lg);
    --order: var(--order-lg);
  }
}
@media (min-width: 1040px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --flex: var(--flex-xl);
    --width: var(--width-xl);
    --height: var(--height-xl);
    --order: var(--order-xl);
  }
}
@media (min-width: 321px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --padding-top: var(--padding-top-xs);
    --padding-right: var(--padding-right-xs);
    --padding-left: var(--padding-left-xs);
    --padding-bottom: var(--padding-bottom-xs);
    --margin-top: var(--margin-top-xs);
    --margin-right: var(--margin-right-xs);
    --margin-left: var(--margin-left-xs);
    --margin-bottom: var(--margin-bottom-xs);
  }
}
@media (min-width: 550px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --padding-top: var(--padding-top-sm);
    --padding-right: var(--padding-right-sm);
    --padding-left: var(--padding-left-sm);
    --padding-bottom: var(--padding-bottom-sm);
    --margin-top: var(--margin-top-sm);
    --margin-right: var(--margin-right-sm);
    --margin-left: var(--margin-left-sm);
    --margin-bottom: var(--margin-bottom-sm);
  }
}
@media (min-width: 670px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --padding-top: var(--padding-top-md);
    --padding-right: var(--padding-right-md);
    --padding-left: var(--padding-left-md);
    --padding-bottom: var(--padding-bottom-md);
    --margin-top: var(--margin-top-md);
    --margin-right: var(--margin-right-md);
    --margin-left: var(--margin-left-md);
    --margin-bottom: var(--margin-bottom-md);
  }
}
@media (min-width: 990px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --padding-top: var(--padding-top-lg);
    --padding-right: var(--padding-right-lg);
    --padding-left: var(--padding-left-lg);
    --padding-bottom: var(--padding-bottom-lg);
    --margin-top: var(--margin-top-lg);
    --margin-right: var(--margin-right-lg);
    --margin-left: var(--margin-left-lg);
    --margin-bottom: var(--margin-bottom-lg);
  }
}
@media (min-width: 1040px) {
  .hcl-flex--container,
  .hcl-flex--item {
    --padding-top: var(--padding-top-xl);
    --padding-right: var(--padding-right-xl);
    --padding-left: var(--padding-left-xl);
    --padding-bottom: var(--padding-bottom-xl);
    --margin-top: var(--margin-top-xl);
    --margin-right: var(--margin-right-xl);
    --margin-left: var(--margin-left-xl);
    --margin-bottom: var(--margin-bottom-xl);
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.hcl-grid--gap-1 {
  gap: 8px;
}

.hcl-grid--gap-2 {
  gap: 16px;
}

.hcl-grid--gap-3 {
  gap: 24px;
}

.hcl-grid--gap-4 {
  gap: 32px;
}

.hcl-grid--gap-0-0 {
  gap: 0px 0px;
}

.hcl-grid--gap-0-1 {
  gap: 0px 8px;
}

.hcl-grid--gap-0-2 {
  gap: 0px 16px;
}

.hcl-grid--gap-0-3 {
  gap: 0px 24px;
}

.hcl-grid--gap-0-4 {
  gap: 0px 32px;
}

.hcl-grid--gap-1-0 {
  gap: 8px 0px;
}

.hcl-grid--gap-1-1 {
  gap: 8px 8px;
}

.hcl-grid--gap-1-2 {
  gap: 8px 16px;
}

.hcl-grid--gap-1-3 {
  gap: 8px 24px;
}

.hcl-grid--gap-1-4 {
  gap: 8px 32px;
}

.hcl-grid--gap-2-0 {
  gap: 16px 0px;
}

.hcl-grid--gap-2-1 {
  gap: 16px 8px;
}

.hcl-grid--gap-2-2 {
  gap: 16px 16px;
}

.hcl-grid--gap-2-3 {
  gap: 16px 24px;
}

.hcl-grid--gap-2-4 {
  gap: 16px 32px;
}

.hcl-grid--gap-3-0 {
  gap: 24px 0px;
}

.hcl-grid--gap-3-1 {
  gap: 24px 8px;
}

.hcl-grid--gap-3-2 {
  gap: 24px 16px;
}

.hcl-grid--gap-3-3 {
  gap: 24px 24px;
}

.hcl-grid--gap-3-4 {
  gap: 24px 32px;
}

.hcl-grid--gap-4-0 {
  gap: 32px 0px;
}

.hcl-grid--gap-4-1 {
  gap: 32px 8px;
}

.hcl-grid--gap-4-2 {
  gap: 32px 16px;
}

.hcl-grid--gap-4-3 {
  gap: 32px 24px;
}

.hcl-grid--gap-4-4 {
  gap: 32px 32px;
}

.hcl-grid--columns-1 {
  grid-template-columns: repeat(1, 1fr);
}

.hcl-grid__item-start-1 {
  grid-column-start: 1;
}

.hcl-grid__item-end-1 {
  grid-column-end: 1;
}

.hcl-grid__item-span-1 {
  grid-column-end: span 1;
}

.hcl-grid--columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.hcl-grid__item-start-2 {
  grid-column-start: 2;
}

.hcl-grid__item-end-2 {
  grid-column-end: 2;
}

.hcl-grid__item-span-2 {
  grid-column-end: span 2;
}

.hcl-grid--columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.hcl-grid__item-start-3 {
  grid-column-start: 3;
}

.hcl-grid__item-end-3 {
  grid-column-end: 3;
}

.hcl-grid__item-span-3 {
  grid-column-end: span 3;
}

.hcl-grid--columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.hcl-grid__item-start-4 {
  grid-column-start: 4;
}

.hcl-grid__item-end-4 {
  grid-column-end: 4;
}

.hcl-grid__item-span-4 {
  grid-column-end: span 4;
}

.hcl-grid--columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.hcl-grid__item-start-5 {
  grid-column-start: 5;
}

.hcl-grid__item-end-5 {
  grid-column-end: 5;
}

.hcl-grid__item-span-5 {
  grid-column-end: span 5;
}

.hcl-grid--columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.hcl-grid__item-start-6 {
  grid-column-start: 6;
}

.hcl-grid__item-end-6 {
  grid-column-end: 6;
}

.hcl-grid__item-span-6 {
  grid-column-end: span 6;
}

.hcl-grid--columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.hcl-grid__item-start-7 {
  grid-column-start: 7;
}

.hcl-grid__item-end-7 {
  grid-column-end: 7;
}

.hcl-grid__item-span-7 {
  grid-column-end: span 7;
}

.hcl-grid--columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.hcl-grid__item-start-8 {
  grid-column-start: 8;
}

.hcl-grid__item-end-8 {
  grid-column-end: 8;
}

.hcl-grid__item-span-8 {
  grid-column-end: span 8;
}

.hcl-grid--columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.hcl-grid__item-start-9 {
  grid-column-start: 9;
}

.hcl-grid__item-end-9 {
  grid-column-end: 9;
}

.hcl-grid__item-span-9 {
  grid-column-end: span 9;
}

.hcl-grid--columns-10 {
  grid-template-columns: repeat(10, 1fr);
}

.hcl-grid__item-start-10 {
  grid-column-start: 10;
}

.hcl-grid__item-end-10 {
  grid-column-end: 10;
}

.hcl-grid__item-span-10 {
  grid-column-end: span 10;
}

.hcl-grid--columns-11 {
  grid-template-columns: repeat(11, 1fr);
}

.hcl-grid__item-start-11 {
  grid-column-start: 11;
}

.hcl-grid__item-end-11 {
  grid-column-end: 11;
}

.hcl-grid__item-span-11 {
  grid-column-end: span 11;
}

.hcl-grid--columns-12 {
  grid-template-columns: repeat(12, 1fr);
}

.hcl-grid__item-start-12 {
  grid-column-start: 12;
}

.hcl-grid__item-end-12 {
  grid-column-end: 12;
}

.hcl-grid__item-span-12 {
  grid-column-end: span 12;
}

@media (min-width: 550px) {
  .hcl-grid--sm-columns-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .hcl-grid__item-sm-start-1 {
    grid-column-start: 1;
  }
  .hcl-grid__item-sm-end-1 {
    grid-column-end: 1;
  }
  .hcl-grid__item-sm-span-1 {
    grid-column-end: span 1;
  }
  .hcl-grid--sm-columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hcl-grid__item-sm-start-2 {
    grid-column-start: 2;
  }
  .hcl-grid__item-sm-end-2 {
    grid-column-end: 2;
  }
  .hcl-grid__item-sm-span-2 {
    grid-column-end: span 2;
  }
  .hcl-grid--sm-columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .hcl-grid__item-sm-start-3 {
    grid-column-start: 3;
  }
  .hcl-grid__item-sm-end-3 {
    grid-column-end: 3;
  }
  .hcl-grid__item-sm-span-3 {
    grid-column-end: span 3;
  }
  .hcl-grid--sm-columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .hcl-grid__item-sm-start-4 {
    grid-column-start: 4;
  }
  .hcl-grid__item-sm-end-4 {
    grid-column-end: 4;
  }
  .hcl-grid__item-sm-span-4 {
    grid-column-end: span 4;
  }
  .hcl-grid--sm-columns-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .hcl-grid__item-sm-start-5 {
    grid-column-start: 5;
  }
  .hcl-grid__item-sm-end-5 {
    grid-column-end: 5;
  }
  .hcl-grid__item-sm-span-5 {
    grid-column-end: span 5;
  }
  .hcl-grid--sm-columns-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .hcl-grid__item-sm-start-6 {
    grid-column-start: 6;
  }
  .hcl-grid__item-sm-end-6 {
    grid-column-end: 6;
  }
  .hcl-grid__item-sm-span-6 {
    grid-column-end: span 6;
  }
  .hcl-grid--sm-columns-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .hcl-grid__item-sm-start-7 {
    grid-column-start: 7;
  }
  .hcl-grid__item-sm-end-7 {
    grid-column-end: 7;
  }
  .hcl-grid__item-sm-span-7 {
    grid-column-end: span 7;
  }
  .hcl-grid--sm-columns-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .hcl-grid__item-sm-start-8 {
    grid-column-start: 8;
  }
  .hcl-grid__item-sm-end-8 {
    grid-column-end: 8;
  }
  .hcl-grid__item-sm-span-8 {
    grid-column-end: span 8;
  }
  .hcl-grid--sm-columns-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .hcl-grid__item-sm-start-9 {
    grid-column-start: 9;
  }
  .hcl-grid__item-sm-end-9 {
    grid-column-end: 9;
  }
  .hcl-grid__item-sm-span-9 {
    grid-column-end: span 9;
  }
  .hcl-grid--sm-columns-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .hcl-grid__item-sm-start-10 {
    grid-column-start: 10;
  }
  .hcl-grid__item-sm-end-10 {
    grid-column-end: 10;
  }
  .hcl-grid__item-sm-span-10 {
    grid-column-end: span 10;
  }
  .hcl-grid--sm-columns-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .hcl-grid__item-sm-start-11 {
    grid-column-start: 11;
  }
  .hcl-grid__item-sm-end-11 {
    grid-column-end: 11;
  }
  .hcl-grid__item-sm-span-11 {
    grid-column-end: span 11;
  }
  .hcl-grid--sm-columns-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .hcl-grid__item-sm-start-12 {
    grid-column-start: 12;
  }
  .hcl-grid__item-sm-end-12 {
    grid-column-end: 12;
  }
  .hcl-grid__item-sm-span-12 {
    grid-column-end: span 12;
  }
}
@media (min-width: 670px) {
  .hcl-grid--md-columns-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .hcl-grid__item-md-start-1 {
    grid-column-start: 1;
  }
  .hcl-grid__item-md-end-1 {
    grid-column-end: 1;
  }
  .hcl-grid__item-md-span-1 {
    grid-column-end: span 1;
  }
  .hcl-grid--md-columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hcl-grid__item-md-start-2 {
    grid-column-start: 2;
  }
  .hcl-grid__item-md-end-2 {
    grid-column-end: 2;
  }
  .hcl-grid__item-md-span-2 {
    grid-column-end: span 2;
  }
  .hcl-grid--md-columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .hcl-grid__item-md-start-3 {
    grid-column-start: 3;
  }
  .hcl-grid__item-md-end-3 {
    grid-column-end: 3;
  }
  .hcl-grid__item-md-span-3 {
    grid-column-end: span 3;
  }
  .hcl-grid--md-columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .hcl-grid__item-md-start-4 {
    grid-column-start: 4;
  }
  .hcl-grid__item-md-end-4 {
    grid-column-end: 4;
  }
  .hcl-grid__item-md-span-4 {
    grid-column-end: span 4;
  }
  .hcl-grid--md-columns-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .hcl-grid__item-md-start-5 {
    grid-column-start: 5;
  }
  .hcl-grid__item-md-end-5 {
    grid-column-end: 5;
  }
  .hcl-grid__item-md-span-5 {
    grid-column-end: span 5;
  }
  .hcl-grid--md-columns-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .hcl-grid__item-md-start-6 {
    grid-column-start: 6;
  }
  .hcl-grid__item-md-end-6 {
    grid-column-end: 6;
  }
  .hcl-grid__item-md-span-6 {
    grid-column-end: span 6;
  }
  .hcl-grid--md-columns-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .hcl-grid__item-md-start-7 {
    grid-column-start: 7;
  }
  .hcl-grid__item-md-end-7 {
    grid-column-end: 7;
  }
  .hcl-grid__item-md-span-7 {
    grid-column-end: span 7;
  }
  .hcl-grid--md-columns-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .hcl-grid__item-md-start-8 {
    grid-column-start: 8;
  }
  .hcl-grid__item-md-end-8 {
    grid-column-end: 8;
  }
  .hcl-grid__item-md-span-8 {
    grid-column-end: span 8;
  }
  .hcl-grid--md-columns-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .hcl-grid__item-md-start-9 {
    grid-column-start: 9;
  }
  .hcl-grid__item-md-end-9 {
    grid-column-end: 9;
  }
  .hcl-grid__item-md-span-9 {
    grid-column-end: span 9;
  }
  .hcl-grid--md-columns-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .hcl-grid__item-md-start-10 {
    grid-column-start: 10;
  }
  .hcl-grid__item-md-end-10 {
    grid-column-end: 10;
  }
  .hcl-grid__item-md-span-10 {
    grid-column-end: span 10;
  }
  .hcl-grid--md-columns-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .hcl-grid__item-md-start-11 {
    grid-column-start: 11;
  }
  .hcl-grid__item-md-end-11 {
    grid-column-end: 11;
  }
  .hcl-grid__item-md-span-11 {
    grid-column-end: span 11;
  }
  .hcl-grid--md-columns-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .hcl-grid__item-md-start-12 {
    grid-column-start: 12;
  }
  .hcl-grid__item-md-end-12 {
    grid-column-end: 12;
  }
  .hcl-grid__item-md-span-12 {
    grid-column-end: span 12;
  }
}
@media (min-width: 990px) {
  .hcl-grid--lg-columns-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .hcl-grid__item-lg-start-1 {
    grid-column-start: 1;
  }
  .hcl-grid__item-lg-end-1 {
    grid-column-end: 1;
  }
  .hcl-grid__item-lg-span-1 {
    grid-column-end: span 1;
  }
  .hcl-grid--lg-columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hcl-grid__item-lg-start-2 {
    grid-column-start: 2;
  }
  .hcl-grid__item-lg-end-2 {
    grid-column-end: 2;
  }
  .hcl-grid__item-lg-span-2 {
    grid-column-end: span 2;
  }
  .hcl-grid--lg-columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .hcl-grid__item-lg-start-3 {
    grid-column-start: 3;
  }
  .hcl-grid__item-lg-end-3 {
    grid-column-end: 3;
  }
  .hcl-grid__item-lg-span-3 {
    grid-column-end: span 3;
  }
  .hcl-grid--lg-columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .hcl-grid__item-lg-start-4 {
    grid-column-start: 4;
  }
  .hcl-grid__item-lg-end-4 {
    grid-column-end: 4;
  }
  .hcl-grid__item-lg-span-4 {
    grid-column-end: span 4;
  }
  .hcl-grid--lg-columns-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .hcl-grid__item-lg-start-5 {
    grid-column-start: 5;
  }
  .hcl-grid__item-lg-end-5 {
    grid-column-end: 5;
  }
  .hcl-grid__item-lg-span-5 {
    grid-column-end: span 5;
  }
  .hcl-grid--lg-columns-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .hcl-grid__item-lg-start-6 {
    grid-column-start: 6;
  }
  .hcl-grid__item-lg-end-6 {
    grid-column-end: 6;
  }
  .hcl-grid__item-lg-span-6 {
    grid-column-end: span 6;
  }
  .hcl-grid--lg-columns-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .hcl-grid__item-lg-start-7 {
    grid-column-start: 7;
  }
  .hcl-grid__item-lg-end-7 {
    grid-column-end: 7;
  }
  .hcl-grid__item-lg-span-7 {
    grid-column-end: span 7;
  }
  .hcl-grid--lg-columns-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .hcl-grid__item-lg-start-8 {
    grid-column-start: 8;
  }
  .hcl-grid__item-lg-end-8 {
    grid-column-end: 8;
  }
  .hcl-grid__item-lg-span-8 {
    grid-column-end: span 8;
  }
  .hcl-grid--lg-columns-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .hcl-grid__item-lg-start-9 {
    grid-column-start: 9;
  }
  .hcl-grid__item-lg-end-9 {
    grid-column-end: 9;
  }
  .hcl-grid__item-lg-span-9 {
    grid-column-end: span 9;
  }
  .hcl-grid--lg-columns-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .hcl-grid__item-lg-start-10 {
    grid-column-start: 10;
  }
  .hcl-grid__item-lg-end-10 {
    grid-column-end: 10;
  }
  .hcl-grid__item-lg-span-10 {
    grid-column-end: span 10;
  }
  .hcl-grid--lg-columns-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .hcl-grid__item-lg-start-11 {
    grid-column-start: 11;
  }
  .hcl-grid__item-lg-end-11 {
    grid-column-end: 11;
  }
  .hcl-grid__item-lg-span-11 {
    grid-column-end: span 11;
  }
  .hcl-grid--lg-columns-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .hcl-grid__item-lg-start-12 {
    grid-column-start: 12;
  }
  .hcl-grid__item-lg-end-12 {
    grid-column-end: 12;
  }
  .hcl-grid__item-lg-span-12 {
    grid-column-end: span 12;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-accordion-container {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  margin: 8px 0;
  background-color: #fff;
}

.hcl-accordion-button {
  border: 0;
  text-align: left;
  padding: 12px;
  background-color: transparent;
  width: 100%;
  cursor: pointer;
}
.hcl-accordion-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}
.hcl-accordion-button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hcl-accordion-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hcl-accordion-content {
  border-top: 1px solid rgb(102.6, 136.8, 114);
  background-color: #fff;
}

.hcl-accordion-title {
  color: #013a14;
  margin-right: 8px;
}
@media (min-width: 670px) {
  .hcl-accordion-title {
    font-size: 18px;
  }
}

.hcl-accordion-icon {
  color: #161616;
  height: 12px;
  margin-left: 8px;
  flex-shrink: 0;
}

.hcl-accordion-rotated {
  transform: rotate(180deg);
}

.hcl-accordion--with-green-bg {
  background-color: #e4e8da;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-alert-label {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 5px;
  padding: 8px 12px;
  display: inline-block;
  background: rgb(189.6, 214.8, 235.8);
}

.hcl-alert-label--warning {
  background: #f9e19b;
}

.hcl-alert-label--danger {
  background: #e7b3ad;
}

.hcl-alert-label--success {
  background: rgb(153, 203.4, 181.4);
}

.hcl-alert-label--full-width {
  width: 100%;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-alert {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #b9baba;
  overflow: hidden;
  overflow: hidden;
  border: 1px solid #4ba3b2;
  border-left-width: 12px;
  font-size: 16px;
}

.hcl-alert__inner {
  display: flex;
  flex: 1 1 auto;
}

.hcl-alert--success {
  border-color: #007e47;
}

.hcl-alert--warning {
  border-color: #f4864e;
}

.hcl-alert--danger {
  border-color: #ea6161;
}

.hcl-alert__icon {
  width: 24px;
  height: 24px;
  color: #4ba3b2;
  flex: 0 0 auto;
  align-self: start;
  margin-right: 8px;
}
@media (min-width: 670px) {
  .hcl-alert__icon {
    margin-right: 16px;
  }
}
.hcl-alert--success .hcl-alert__icon {
  color: #007e47;
}
.hcl-alert--warning .hcl-alert__icon {
  color: #f4864e;
}
.hcl-alert--danger .hcl-alert__icon {
  color: #ea6161;
}

.hcl-alert__body {
  flex: 1 1 auto;
}

.hcl-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  appearance: none;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  line-height: 1;
  transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
}
.hcl-button:disabled {
  cursor: not-allowed;
  color: #b9baba;
}
.hcl-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hcl-button--primary {
  border: 1px solid #007e47;
  background-color: #007e47;
}
.hcl-button--primary, .hcl-button--primary:not(:disabled):hover {
  color: #fff;
  text-decoration: none;
}
@media (hover: hover) {
  .hcl-button--primary:not(:disabled):hover {
    border: 1px solid rgb(51, 151.8, 107.8);
    background-color: rgb(51, 151.8, 107.8);
  }
}
.hcl-button--primary:not(:disabled):active {
  border: 1px solid rgb(0, 100.8, 56.8);
  background-color: rgb(0, 100.8, 56.8);
}

.hcl-button--secondary {
  border: 1px solid #b9baba;
  background-color: #fff;
  color: #013a14;
}
.hcl-button--secondary, .hcl-button--secondary:not(:disabled):hover {
  text-decoration: none;
}
@media (hover: hover) {
  .hcl-button--secondary:not(:disabled):hover {
    background-color: #e4e8da;
    color: #161616;
  }
}
.hcl-button--secondary:not(:disabled):active {
  border: 1px solid rgb(182.4, 185.6, 174.4);
  background-color: rgb(182.4, 185.6, 174.4);
  color: #161616;
}

.hcl-button--destructive {
  border: 1px solid rgb(187.2, 77.6, 77.6);
  background-color: rgb(187.2, 77.6, 77.6);
  color: #fff;
}
.hcl-button--destructive, .hcl-button--destructive:not(:disabled):hover {
  text-decoration: none;
}
@media (hover: hover) {
  .hcl-button--destructive:not(:disabled):hover {
    border: 1px solid #ea6161;
    background-color: #ea6161;
  }
}
.hcl-button--destructive:not(:disabled):active {
  border: 1px solid rgb(140.4, 58.2, 58.2);
  background-color: rgb(140.4, 58.2, 58.2);
}

.hcl-button--full-width {
  width: 100%;
}

@media (min-width: 550px) {
  .hcl-button--full-width-sm-on {
    width: 100%;
  }
}
@media (min-width: 550px) {
  .hcl-button--full-width-sm-off {
    width: initial;
  }
}

@media (min-width: 670px) {
  .hcl-button--full-width-md-on {
    width: 100%;
  }
}
@media (min-width: 670px) {
  .hcl-button--full-width-md-off {
    width: initial;
  }
}

@media (min-width: 990px) {
  .hcl-button--full-width-lg-on {
    width: 100%;
  }
}
@media (min-width: 990px) {
  .hcl-button--full-width-lg-off {
    width: initial;
  }
}

.hcl-button--small {
  padding: 8px;
}

.hcl-button--primary-legacy {
  font-weight: 400;
  border: 1px solid #1493bc;
  background-color: #1493bc;
  color: #fff;
  box-shadow: none;
}
@media (hover: hover) {
  .hcl-button--primary-legacy:not(:disabled):hover {
    border: 1px solid #0e798f;
    background-color: #0e798f;
  }
}

.hcl-button--secondary-legacy {
  font-weight: 400;
  border: 1px solid #ddd;
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff, #f4f4f4);
  color: #333;
  box-shadow: none;
}
@media (hover: hover) {
  .hcl-button--secondary-legacy:not(:disabled):hover {
    background-color: #e4e8da;
    color: #161616;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-cardui-body {
  flex: 1 0;
}

.hcl-cardui-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  padding: 8px;
}
@media (min-width: 670px) {
  .hcl-cardui-content {
    padding: 16px;
  }
}

.hcl-cardui-description-container {
  display: block;
}

.hcl-cardui-description-container--truncated {
  --numberOfLines: 1;
  overflow: hidden;
  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
  height: calc(1.5 * var(--numberOfLines) * 1em);
  -webkit-line-clamp: var(--numberOfLines);
  line-clamp: var(--numberOfLines);
  -webkit-box-orient: vertical;
}

.hcl-cardui-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hcl-cardui-image-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex: 1;
  flex-flow: column;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
}

.hcl-cardui-overlay-Container {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.hcl-cardui-overlay-Container:last-child {
  align-items: flex-end;
}

.hcl-cardui-pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hcl-cardui-image {
  width: 100%;
  position: relative;
  object-fit: cover;
  object-position: center;
}

.hcl-cardui-image--fade {
  opacity: 0.5;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-card {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  width: 100%;
  text-decoration: none;
  color: inherit;
  font: inherit;
  display: block;
  text-align: inherit;
  align-items: inherit;
  margin: 0;
  padding: 0;
  appearance: none;
  cursor: pointer;
  position: relative;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #b9baba;
  overflow: hidden;
  transform: translateZ(0);
}
.hcl-card:visited, .hcl-card:hover, .hcl-card:focus, .hcl-card:active {
  text-decoration: none;
  color: inherit;
}
.hcl-card:hover {
  border: 1px solid #007e47;
}
.hcl-card:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hcl-card__title {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #013a14;
}
:visited .hcl-card__title {
  color: #67458c;
}
[href^="#"]:visited .hcl-card__title {
  color: #013a14;
}
@media (min-width: 670px) {
  .hcl-card__title {
    font-size: 18px;
  }
}

.hcl-card__action {
  color: #007e47;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

.hcl-card__action-externalicon,
.hcl-card__title-externalicon {
  display: inline-block;
  height: 1em;
  vertical-align: -1px;
  margin-left: 8px;
}

.hcl-card--highlighted {
  background: #e4e8da;
  border: 1px solid #e4e8da;
}

.hcl-card--borderless {
  border-color: transparent;
}

.hcl-card--shadowless {
  box-shadow: none;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-carousel {
  overflow: hidden;
  width: 100%;
}

.hcl-inner {
  gap: 8px;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style-type: none;
  padding-left: 0;
  padding-right: 10%;
}
@media (min-width: 670px) {
  .hcl-inner {
    padding-right: 5%;
  }
}
.hcl-inner--show-one-item {
  margin: 0;
  padding-right: 0;
}
.hcl-inner--multiple {
  margin-bottom: 0;
  padding-bottom: 16px;
}
@media (min-width: 670px) {
  .hcl-inner--multiple {
    padding-right: 10%;
  }
}

.hcl-inner-wrapper {
  position: relative;
}
.hcl-inner-wrapper--show-arrows {
  margin: 0 16px;
}
.hcl-inner-wrapper--show-arrows-multiple {
  margin: 0;
}

.hcl-inner::-webkit-scrollbar {
  display: none;
}

.hcl-carousel-item {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: center;
}
.hcl-carousel-item--multiple {
  width: 80%;
}
@media (min-width: 670px) {
  .hcl-carousel-item--multiple {
    margin-right: 8px;
    width: 50%;
  }
}

.hcl-indicators {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.hcl-indicator-dot {
  position: relative;
  display: block;
  cursor: pointer;
  border: 0;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  padding: 0;
  background-color: #c2d0bd;
}
.hcl-indicator-dot--active {
  background-color: #007e47;
}
.hcl-indicator-dot::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  height: 20px;
  width: 20px;
}

.hcl-carousel-arrow {
  display: flex;
  width: 50px;
  height: 100%;
  flex: 0 0 auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  border: 0;
  background-color: transparent;
  z-index: 2;
}
@media (min-width: 670px) {
  .hcl-carousel-arrow {
    width: 70px;
  }
}
.hcl-carousel-arrow:hover {
  cursor: pointer;
}
.hcl-carousel-arrow--left {
  left: -16px;
}
.hcl-carousel-arrow--left-multiple {
  left: 4px;
}
.hcl-carousel-arrow--right {
  right: -16px;
}
.hcl-carousel-arrow--right-multiple {
  right: 4px;
}

.hcl-carousel-arrow-icon {
  display: flex;
  height: 48px;
  width: 48px;
  color: #fff;
  background-color: rgba(103, 103, 103, 0.5);
  border: 0;
  border-radius: 50%;
  justify-content: center;
  padding: 8px;
  position: absolute;
}
.hcl-carousel-arrow-icon--multiple {
  background-color: rgba(22, 22, 22, 0.6);
}
.hcl-carousel-arrow-icon--left {
  left: 0;
}
.hcl-carousel-arrow-icon--right {
  right: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-checkbox {
  display: flex;
  position: relative;
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
  align-items: center;
}

.hcl-checkbox--disabled {
  cursor: not-allowed;
}

.hcl-checkbox__input {
  appearance: none;
  opacity: 0;
  cursor: pointer;
  position: absolute;
  outline: none;
  flex: 0 0 auto;
}

.hcl-checkbox__icon {
  display: flex;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
  color: transparent;
  background-color: #fff;
  border: 1px solid #b9baba;
  border-radius: 5px;
  padding: 2px;
  margin-right: 8px;
  transition: box-shadow 125ms, background-color 125ms, border-color 125ms, color 125ms;
}
.hcl-checkbox--has-error .hcl-checkbox__icon {
  border-color: rgb(187.2, 77.6, 77.6);
}
.hcl-checkbox--disabled .hcl-checkbox__icon {
  border-color: #b9baba;
}

.hcl-checkbox__icon--custom {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}

.hcl-checkbox__input:not(:disabled):hover ~ .hcl-checkbox__icon {
  border-color: #007e47;
  background-color: rgb(239.8, 239.8, 239.8);
}

.hcl-checkbox__input:not(:disabled):checked:hover ~ .hcl-checkbox__icon {
  background-color: #c2d0bd;
}

.hcl-checkbox__input:not(:disabled):focus ~ .hcl-checkbox__icon {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hcl-checkbox__input:checked ~ .hcl-checkbox__icon {
  background-color: #e4e8da;
  border-color: #007e47;
  color: #013a14;
  opacity: 1;
}

.hcl-checkbox__label {
  flex: 1;
  color: #013a14;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.5;
}
.hcl-checkbox--has-error .hcl-checkbox__label {
  color: rgb(187.2, 77.6, 77.6);
}
.hcl-checkbox--disabled .hcl-checkbox__label {
  color: #b9baba;
}

/* alternative styles */
.hcl-checkbox__inner {
  padding: 8px;
  border: 1px solid #b9baba;
  border-radius: 5px;
  display: flex;
  align-items: center;
  width: 100%;
}
.hcl-checkbox--has-error .hcl-checkbox__inner {
  color: rgb(187.2, 77.6, 77.6);
  border-color: rgb(187.2, 77.6, 77.6);
}
.hcl-checkbox--disabled .hcl-checkbox__inner {
  color: #b9baba;
  border-color: #b9baba;
}

.hcl-checkbox__input:not(:disabled):hover ~ .hcl-checkbox__inner {
  border-color: #007e47;
  background-color: rgb(239.8, 239.8, 239.8);
}

.hcl-checkbox__input:not(:disabled):checked:hover ~ .hcl-checkbox__inner {
  background-color: #c2d0bd;
}

.hcl-checkbox__input:not(:disabled):focus ~ .hcl-checkbox__inner {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hcl-checkbox__input:checked ~ .hcl-checkbox__inner > .hcl-checkbox__icon:not(.hcl-checkbox__icon--custom) {
  background-color: #e4e8da;
  border-color: #007e47;
  color: #013a14;
  opacity: 1;
}

.hcl-checkbox__input:checked ~ .hcl-checkbox__inner {
  padding: 7px;
  background-color: #e4e8da;
  border: 2px solid #007e47;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-content-area {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #b9baba;
  overflow: hidden;
}

.hcl-content-area--highlighted {
  background: #e4e8da;
  border: 0;
}

.hcl-content-area--on-map-or-image {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  background: #fff;
  border: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-divider {
  margin: 0;
  border: 0;
  height: 1px;
  background-color: #b9baba;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.hcl-fieldset__legend {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161616;
  padding: 0 0 8px;
}

.hcl-fieldset__legend--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-form-label {
  cursor: pointer;
  color: #161616;
}

.hcl-form-label--error {
  color: rgb(187.2, 77.6, 77.6);
}

.hcl-form-label--disabled {
  color: #b9baba;
  cursor: not-allowed;
}

.hcl-form-label__text {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  display: block;
  padding-bottom: 8px;
  color: inherit;
}
.hcl-form-label--hidden .hcl-form-label__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-heading {
  font-family: "Hemnet Bonad", Georgia, "Times New Roman", Times, serif;
  color: #013a14;
  line-height: 1.2;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.hcl-text-container > .hcl-heading {
  margin-bottom: 8px;
}
@media (min-width: 670px) {
  .hcl-text-container > .hcl-heading {
    margin-bottom: 12px;
  }
}

.hcl-heading--with-margin {
  margin-bottom: 8px;
}
@media (min-width: 670px) {
  .hcl-heading--with-margin {
    margin-bottom: 12px;
  }
}

.hcl-heading--on-dark-bg {
  color: #fff;
}

.hcl-heading--on-dark-bg-alt {
  color: #e4e8da;
}

.hcl-heading--size1 {
  font-size: 24px;
}
@media (min-width: 670px) {
  .hcl-heading--size1 {
    font-size: 36px;
  }
}

.hcl-heading--size2 {
  font-size: 22px;
}
@media (min-width: 670px) {
  .hcl-heading--size2 {
    font-size: 28px;
  }
}

.hcl-heading--size3 {
  font-size: 20px;
}
@media (min-width: 670px) {
  .hcl-heading--size3 {
    font-size: 24px;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-hint {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #676767;
  display: flex;
  align-items: center;
  padding-top: 8px;
}
.hcl-hint--error {
  color: rgb(187.2, 77.6, 77.6);
}
.hcl-hint--small {
  font-size: 14px;
}
.hcl-hint--hidden {
  display: none;
}
.hcl-hint__icon {
  width: auto;
  height: 1.2em;
  display: inline-block;
  margin-right: 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-icon-button {
  border: 0;
  background: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  transition: background-color 125ms ease-in-out;
  appearance: none;
}
.hcl-icon-button:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.08);
}
.hcl-icon-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}
.hcl-icon-button:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.hcl-icon-button--on-dark-bg:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.hcl-icon-button--on-dark-bg:active {
  background-color: rgba(255, 255, 255, 0.25);
}
.hcl-icon-button--on-dark-bg .hcl-icon-button__icon {
  color: #fff;
}

.hcl-icon-button__icon {
  width: 50%;
  height: 50%;
  color: #013a14;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-icon {
  display: inline-block;
  width: auto;
  height: 100%;
  color: inherit;
}
.hcl-icon svg {
  max-width: 100%;
  max-height: 100%;
  width: inherit;
  height: inherit;
  fill: currentColor;
  display: block;
}

.hcl-icon--inline {
  display: inline-block;
  height: 1em;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-label {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid transparent;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 550px) {
  .hcl-label {
    font-size: 16px;
  }
}

/* Product labels */
.hcl-label--product {
  font-weight: 500;
  background-color: rgb(229.5, 242.1, 236.6);
  color: #007e47;
}
.hcl-label--product.hcl-label--active {
  background-color: #007e47;
  color: #e4e8da;
}

/* State labels */
.hcl-label--state {
  background-color: rgb(252.3, 252.7, 251.3);
  color: #161616;
}
.hcl-label--state.hcl-label--on-white-background {
  border-color: #b9baba;
}

.hcl-label--toplisting {
  background-color: #f9e19b;
  color: #013a14;
}
.hcl-label--toplisting.hcl-label--on-white-background {
  border-color: transparent;
}

.hcl-label--ongoing-bidding,
.hcl-label--ongoing-verified-bidding {
  color: #013a14;
}

.hcl-label--current-live-stream-showing {
  background-color: #ea6161;
  color: #fff;
}
.hcl-label--current-live-stream-showing.hcl-label--on-white-background {
  border-color: transparent;
}

/* Type labels */
.hcl-label--type {
  background-color: rgb(239.8, 239.8, 239.8);
}

.hcl-label--new-construction-project {
  background-color: #fff;
  border-color: #f4864e;
}

.hcl-label--sold-at {
  background-color: #67458c;
  color: #fff;
  line-height: 1.5;
  border: transparent;
}

/* Feature labels */
.hcl-label--feature {
  background-color: #fff;
  border-color: #b9baba;
}

.hcl-label__icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: text-bottom;
  margin-right: 4px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-labels-list {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hcl-labels-list--row-direction {
  flex-direction: row;
  height: 30px;
  overflow: hidden;
}

.hcl-labels-list__label-item {
  display: flex;
  font-size: 16px;
  height: 30px;
  margin-bottom: 4px;
}
.hcl-labels-list__label-item:last-child {
  margin-bottom: 0;
}

.hcl-labels-list--row-direction .hcl-labels-list__label-item {
  margin-right: 4px;
  margin-bottom: 0;
}
.hcl-labels-list--row-direction .hcl-labels-list__label-item:last-child {
  margin-right: 0;
}

.hcl-labels-list--column-direction .hcl-labels-list__label-item {
  width: 100%;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-link {
  font-weight: 500;
  color: #013a14;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.hcl-link:visited {
  color: #67458c;
}
.hcl-link[href^="#"]:visited {
  color: #013a14;
}
.hcl-link:hover {
  color: #161616;
}
.hcl-link:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}
.hcl-link:active {
  color: #67458c;
}
.hcl-text-container > .hcl-link {
  display: inline-block;
}

.hcl-link--on-dark-bg {
  color: #fff;
}
.hcl-link--on-dark-bg:visited {
  color: #a7b0cb;
}
.hcl-link--on-dark-bg:hover {
  color: #e4e8da;
}
.hcl-link--on-dark-bg:active {
  color: #a7b0cb;
}

.hcl-link--button {
  appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-align: left;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
@keyframes rotating-logo {
  0% {
    transform: perspective(144px) rotateX(0deg) rotateY(360deg);
  }
  50% {
    transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
  }
  75% {
    transform: perspective(144px) rotateX(0deg) rotateY(180deg);
  }
  100% {
    transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
  }
}
.hcl-logo-spinner {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 670px) {
  .hcl-logo-spinner {
    padding: 32px 0;
  }
}

.hcl-logo-spinner__text {
  color: #888;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  margin-top: 16px;
  margin-bottom: 0;
}

.hcl-logo-spinner__logo {
  height: 48px;
  background-color: transparent;
  animation: rotating-logo 6s infinite ease-in-out;
  color: #0bb70b;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-modal-overlay {
  position: fixed;
  background-color: rgba(51, 51, 51, 0.8);
  height: 100%;
  left: 0;
  top: 0;
  overflow-y: auto;
  width: 100%;
  z-index: 2010;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hcl-modal-overlay--after-open {
  opacity: 1;
}

.hcl-modal-overlay--before-close {
  opacity: 0;
}

.hcl-modal-overlay--fullscreen {
  background-color: rgba(255, 255, 255, 0.8);
}

.hcl-modal {
  position: relative;
  max-height: 90%;
  max-width: 560px;
  width: 100%;
  z-index: 2020;
  transform: scale(0.8);
  transition: transform 100ms;
  height: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  outline: 0;
  border-radius: 8px;
  margin: 16px;
  overflow: auto;
}
@media (min-width: 560px) {
  .hcl-modal {
    margin: 24px;
  }
}
.hcl-modal .hcl-modal__container > .hcl-padded-container {
  padding: 16px;
  padding-top: 0;
}
@media (min-width: 670px) {
  .hcl-modal .hcl-modal__container > .hcl-padded-container {
    padding: 24px;
    padding-top: 0;
  }
}

.hcl-modal--with-header {
  overflow: hidden;
}

.hcl-modal--large-size {
  max-width: 760px;
}

.hcl-modal--after-open {
  transform: scale(1);
  height: auto;
}

.hcl-modal--before-close {
  transform: scale(0.9);
}

.hcl-modal--fullscreen {
  border: 0;
  height: 100%;
  max-height: 100vh;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
}

.hcl-modal--promotional {
  border: 0;
  background-color: #013a14;
}
.hcl-modal--promotional .hcl-modal__close-button {
  color: #fff;
}

.hcl-modal__header {
  top: 0;
  width: 100%;
  padding: 16px;
}
@media (min-width: 670px) {
  .hcl-modal__header {
    padding: 24px;
  }
}

.hcl-modal__header--no-sticky {
  padding: 8px;
  padding-bottom: 0;
}
.hcl-modal__header--no-sticky .hcl-modal__close-button {
  display: flex;
  justify-content: flex-end;
  flex: auto;
}

.hcl-modal__header--sticky {
  background-color: inherit;
  position: sticky;
  top: 0;
}
.hcl-modal__header--sticky .hcl-modal__close-button {
  position: absolute;
  right: 4px;
  top: 4px;
}
@media (min-width: 670px) {
  .hcl-modal__header--sticky .hcl-modal__close-button {
    right: 16px;
    top: 16px;
  }
}
.hcl-modal__header--sticky h2 {
  padding-right: 64px;
  margin-bottom: 0;
}

.hcl-modal__header--sticky.hcl-modal__header--active {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 0 2px 0 rgba(0, 0, 0, 0.12);
}

/* customised scroolbar */
.hcl-modal .hcl-modal__container--sticky {
  overflow-y: auto;
  max-height: 460px;
}
@media (min-width: 670px) {
  .hcl-modal .hcl-modal__container--sticky {
    max-height: 600px;
  }
}

.hcl-modal .hcl-modal__container--sticky::-webkit-scrollbar {
  width: 8px;
}

.hcl-modal .hcl-modal__container--sticky::-webkit-scrollbar-thumb {
  /* Foreground */
  background: rgba(103, 103, 103, 0.4);
  border: 0;
  border-radius: 4px;
}

.hcl-modal .hcl-modal__container--sticky::-webkit-scrollbar-track {
  /* Background */
  background: inherit;
  border-radius: 4px;
}

.hcl-modal--communication {
  border: 0;
  background-color: #e4e8da;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-padded-container {
  padding: 8px;
}
@media (min-width: 670px) {
  .hcl-padded-container {
    padding: 16px;
  }
}

.hcl-padded-container--size-1 {
  padding: 8px;
}

.hcl-padded-container--size-2 {
  padding: 16px;
}

.hcl-padded-container--size-3 {
  padding: 24px;
}

.hcl-padded-container--size-4 {
  padding: 32px;
}

@media (min-width: 550px) {
  .hcl-padded-container--sm-size-1 {
    padding: 8px;
  }
  .hcl-padded-container--sm-size-2 {
    padding: 16px;
  }
  .hcl-padded-container--sm-size-3 {
    padding: 24px;
  }
  .hcl-padded-container--sm-size-4 {
    padding: 32px;
  }
}
@media (min-width: 670px) {
  .hcl-padded-container--md-size-1 {
    padding: 8px;
  }
  .hcl-padded-container--md-size-2 {
    padding: 16px;
  }
  .hcl-padded-container--md-size-3 {
    padding: 24px;
  }
  .hcl-padded-container--md-size-4 {
    padding: 32px;
  }
}
@media (min-width: 990px) {
  .hcl-padded-container--lg-size-1 {
    padding: 8px;
  }
  .hcl-padded-container--lg-size-2 {
    padding: 16px;
  }
  .hcl-padded-container--lg-size-3 {
    padding: 24px;
  }
  .hcl-padded-container--lg-size-4 {
    padding: 32px;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-pagination {
  text-align: center;
}

.hcl-pagination-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 670px) {
  .hcl-pagination-nav {
    flex-wrap: nowrap;
  }
}

.hcl-pagination-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
@media (min-width: 670px) {
  .hcl-pagination-items {
    width: auto;
  }
}

.hcl-pagination-button {
  order: 1;
  flex: 1 0 0;
}
@media (min-width: 670px) {
  .hcl-pagination-button {
    flex: 0 1 auto;
    order: initial;
  }
}

.hcl-pagination-button--current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  appearance: none;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  line-height: 1;
  transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
  cursor: default;
  box-shadow: none;
  color: #013a14;
  background-color: #e4e8da;
  border: 1px solid #007e47;
}
.hcl-pagination-button--current:disabled {
  cursor: not-allowed;
  color: #b9baba;
}
.hcl-pagination-button--current:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-radio-button-bar {
  padding: 0;
  margin: 0;
  border: 0;
  display: inline-flex;
  align-items: stretch;
}

.hcl-radio-button-bar--with-shadow {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
}

.hcl-radio-button-bar--full-width {
  width: 100%;
}

.hcl-radio-button-bar__label {
  display: inline-flex;
  position: relative;
  user-select: none;
  flex: auto;
}
.hcl-radio-button-bar__label + .hcl-radio-button-bar__label {
  margin-left: -1px;
}

.hcl-radio-button-bar__label--equalSize {
  flex: 1 1 0;
}

.hcl-radio-button-bar__button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  appearance: none;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  line-height: 1;
  transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
  border: 1px solid #b9baba;
  background-color: #fff;
  color: #013a14;
  display: flex;
  width: 100%;
  justify-content: center;
  box-shadow: none;
  border-radius: 0;
}
.hcl-radio-button-bar__button:disabled {
  cursor: not-allowed;
  color: #b9baba;
}
.hcl-radio-button-bar__button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}
.hcl-radio-button-bar__button, .hcl-radio-button-bar__button:not(:disabled):hover {
  text-decoration: none;
}
@media (hover: hover) {
  .hcl-radio-button-bar__button:not(:disabled):hover {
    background-color: #e4e8da;
    color: #161616;
  }
}
.hcl-radio-button-bar__button:not(:disabled):active {
  border: 1px solid rgb(182.4, 185.6, 174.4);
  background-color: rgb(182.4, 185.6, 174.4);
  color: #161616;
}
.hcl-radio-button-bar__label:first-child .hcl-radio-button-bar__button {
  border-radius: 5px 0 0 5px;
  margin-left: 0;
}
.hcl-radio-button-bar__label:last-child .hcl-radio-button-bar__button {
  border-radius: 0 5px 5px 0;
}

.hcl-radio-button-bar__button--withoutPadding {
  padding: 0;
}

.hcl-radio-button-bar__button--alignment-left {
  justify-content: left;
}

.hcl-radio-button-bar__button--alignment-right {
  justify-content: right;
}

.hcl-radio-button-bar__button--alignment-center {
  justify-content: center;
}

@media (min-width: 550px) {
  .hcl-radio-button-bar__button--sm-alignment-left {
    justify-content: left;
  }
  .hcl-radio-button-bar__button--sm-alignment-right {
    justify-content: right;
  }
  .hcl-radio-button-bar__button--sm-alignment-center {
    justify-content: center;
  }
}
@media (min-width: 670px) {
  .hcl-radio-button-bar__button--md-alignment-left {
    justify-content: left;
  }
  .hcl-radio-button-bar__button--md-alignment-right {
    justify-content: right;
  }
  .hcl-radio-button-bar__button--md-alignment-center {
    justify-content: center;
  }
}
@media (min-width: 990px) {
  .hcl-radio-button-bar__button--lg-alignment-left {
    justify-content: left;
  }
  .hcl-radio-button-bar__button--lg-alignment-right {
    justify-content: right;
  }
  .hcl-radio-button-bar__button--lg-alignment-center {
    justify-content: center;
  }
}
@media (min-width: 1040px) {
  .hcl-radio-button-bar__button--xl-alignment-left {
    justify-content: left;
  }
  .hcl-radio-button-bar__button--xl-alignment-right {
    justify-content: right;
  }
  .hcl-radio-button-bar__button--xl-alignment-center {
    justify-content: center;
  }
}
.hcl-radio-button-bar__input:focus + .hcl-radio-button-bar__button {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hcl-radio-button-bar__input:checked + .hcl-radio-button-bar__button {
  background: #e4e8da;
  border: 2px solid #007e47;
  padding: 11px 15px;
  z-index: 1;
}
.hcl-radio-button-bar__input:checked + .hcl-radio-button-bar__button.hcl-radio-button-bar__button--withoutPadding {
  padding: 0;
}

.hcl-radio-button-bar__input {
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  cursor: inherit;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  pointer-events: none;
}

.hcl-radio-button-bar__icon {
  height: 1em;
  line-height: 0;
  margin-right: 4px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-radiobutton {
  display: flex;
  position: relative;
  font-family: "Roboto", Arial, sans-serif;
  gap: 8px;
  cursor: pointer;
}

.hcl-radiobutton--disabled {
  cursor: not-allowed;
}

.hcl-radiobutton--inline {
  display: inline-flex;
  margin: 0 8px 0 0;
}

.hcl-radiobutton__input {
  appearance: none;
  opacity: 0;
  cursor: pointer;
  position: absolute;
  outline: none;
  flex: 0 0 auto;
}

.hcl-radiobutton__icon {
  display: flex;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
  color: transparent;
  margin-top: 2px;
  transition: box-shadow 125ms, background-color 125ms, border-color 125ms, color 125ms;
  justify-content: center;
  align-items: center;
}
.hcl-radiobutton__icon:not(.hcl-radiobutton__icon--custom) {
  background-color: #fff;
  border: 1px solid #b9baba;
  border-radius: 100%;
  padding: 2px;
}
.hcl-radiobutton--error .hcl-radiobutton__icon {
  border-color: rgb(187.2, 77.6, 77.6);
}
.hcl-radiobutton--disabled .hcl-radiobutton__icon {
  border-color: #b9baba;
}
.hcl-radiobutton__icon:not(.hcl-radiobutton__icon--custom)::before {
  border-radius: 100%;
  background-color: currentColor;
  width: 8px;
  height: 8px;
  content: " ";
  display: block;
}

.hcl-radiobutton__input:not(:disabled):hover ~ .hcl-radiobutton__icon {
  border-color: #007e47;
  background-color: rgb(239.8, 239.8, 239.8);
}

.hcl-radiobutton__input:not(:disabled):checked:hover ~ .hcl-radiobutton__icon {
  background-color: #c2d0bd;
}

.hcl-radiobutton__input:not(:disabled):focus ~ .hcl-radiobutton__icon {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hcl-radiobutton__input:checked ~ .hcl-radiobutton__icon {
  background-color: #e4e8da;
  border-color: #007e47;
  color: #013a14;
  opacity: 1;
}

.hcl-radiobutton__label {
  flex: 1;
  color: #013a14;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.5;
}
.hcl-radiobutton--error .hcl-radiobutton__label {
  color: rgb(187.2, 77.6, 77.6);
}
.hcl-radiobutton--disabled .hcl-radiobutton__label {
  color: #b9baba;
}

/* alternative styles */
.hcl-radiobutton__inner {
  padding: 8px;
  border: 1px solid #b9baba;
  border-radius: 24px;
  display: flex;
  gap: 8px;
  width: 100%;
}
.hcl-radiobutton--has-error .hcl-radiobutton__inner {
  color: rgb(187.2, 77.6, 77.6);
  border-color: rgb(187.2, 77.6, 77.6);
}
.hcl-radiobutton--disabled .hcl-radiobutton__inner {
  color: #b9baba;
  border-color: #b9baba;
}

.hcl-radiobutton__inner--tile {
  border-radius: 5px;
  gap: 4px;
  flex-direction: column;
  padding: 12px 8px;
  align-items: center;
}
.hcl-radiobutton__inner--tile .hcl-radiobutton__icon {
  margin-top: 0;
}

.hcl-radiobutton__input:not(:disabled):hover ~ .hcl-radiobutton__inner {
  border-color: #007e47;
  background-color: rgb(239.8, 239.8, 239.8);
}

.hcl-radiobutton__input:not(:disabled):checked:hover ~ .hcl-radiobutton__inner {
  background-color: #c2d0bd;
}

.hcl-radiobutton__input:not(:disabled):focus ~ .hcl-radiobutton__inner {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hcl-radiobutton__input:checked ~ .hcl-radiobutton__inner > .hcl-radiobutton__icon:not(.hcl-radiobutton__icon--custom) {
  background-color: #e4e8da;
  border-color: #007e47;
  color: #013a14;
  opacity: 1;
}

.hcl-radiobutton__input:checked ~ .hcl-radiobutton__inner {
  padding: 7px;
  background-color: #e4e8da;
  border: 2px solid #007e47;
}

.hcl-radiobutton__input:checked ~ .hcl-radiobutton__inner--tile {
  padding: 11px 7px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-range-input {
  display: flex;
  align-items: center;
}

.hcl-range-input__item {
  flex: 1 1 auto;
}

.hcl-range-input__sign {
  flex: 0 1 0;
  padding: 0 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-screen-reader-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-section-heading {
  font-family: "Hemnet Bonad", Georgia, "Times New Roman", Times, serif;
  color: #013a14;
  line-height: 1.2;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
  display: flex;
  align-items: center;
  margin: 16px 0;
  color: #013a14;
}
@media (min-width: 670px) {
  .hcl-section-heading {
    font-size: 24px;
  }
}
@media (min-width: 670px) {
  .hcl-section-heading {
    margin: 24px 0;
  }
}

.hcl-section-heading__strike {
  display: block;
  flex: 1 0 auto;
  border-top: 2px solid #013a14;
}

.hcl-section-heading__text {
  display: inline-block;
  position: relative;
  margin: 0 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-select {
  position: relative;
  width: auto;
}

.hcl-select--full-width {
  width: 100%;
}

.hcl-select__list {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  appearance: none;
  color: #013a14;
  width: inherit;
  cursor: pointer;
  border: 1px solid #b9baba;
  border-radius: 5px;
  background-color: #fff;
  padding: 8px;
  padding-right: 40px;
  margin: 0;
}
.hcl-select__list:hover {
  border-color: #013a14;
}
.hcl-select__list:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}
.hcl-select--placeholder .hcl-select__list {
  color: #676767;
}
.hcl-select--error .hcl-select__list {
  color: rgb(187.2, 77.6, 77.6);
  border-color: rgb(187.2, 77.6, 77.6);
}
.hcl-select--disabled .hcl-select__list {
  border-color: #b9baba;
  color: #b9baba;
  cursor: not-allowed;
  opacity: 1;
}

.hcl-select__icon {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #013a14;
}
.hcl-select--disabled .hcl-select__icon {
  color: #b9baba;
}
.hcl-select--error .hcl-select__icon {
  color: rgb(187.2, 77.6, 77.6);
  border-color: rgb(187.2, 77.6, 77.6);
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-spacer {
  display: block;
  height: 8px;
}

.hcl-spacer--size-1 {
  height: 8px;
}

.hcl-spacer--size-2 {
  height: 16px;
}

.hcl-spacer--size-3 {
  height: 24px;
}

.hcl-spacer--size-4 {
  height: 32px;
}

.hcl-spacer--size-5 {
  height: 40px;
}

.hcl-spacer--size-6 {
  height: 48px;
}

@media (min-width: 550px) {
  .hcl-spacer--sm-size-1 {
    height: 8px;
  }
  .hcl-spacer--sm-size-2 {
    height: 16px;
  }
  .hcl-spacer--sm-size-3 {
    height: 24px;
  }
  .hcl-spacer--sm-size-4 {
    height: 32px;
  }
  .hcl-spacer--sm-size-5 {
    height: 40px;
  }
  .hcl-spacer--sm-size-6 {
    height: 48px;
  }
}
@media (min-width: 670px) {
  .hcl-spacer--md-size-1 {
    height: 8px;
  }
  .hcl-spacer--md-size-2 {
    height: 16px;
  }
  .hcl-spacer--md-size-3 {
    height: 24px;
  }
  .hcl-spacer--md-size-4 {
    height: 32px;
  }
  .hcl-spacer--md-size-5 {
    height: 40px;
  }
  .hcl-spacer--md-size-6 {
    height: 48px;
  }
}
@media (min-width: 990px) {
  .hcl-spacer--lg-size-1 {
    height: 8px;
  }
  .hcl-spacer--lg-size-2 {
    height: 16px;
  }
  .hcl-spacer--lg-size-3 {
    height: 24px;
  }
  .hcl-spacer--lg-size-4 {
    height: 32px;
  }
  .hcl-spacer--lg-size-5 {
    height: 40px;
  }
  .hcl-spacer--lg-size-6 {
    height: 48px;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-stack {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
  align-items: center;
}

.hcl-stack--column {
  flex-direction: column;
  align-items: initial;
}

.hcl-stack--align-right {
  justify-content: flex-end;
}
.hcl-stack--align-right.hcl-stack--column {
  align-items: flex-end;
  justify-content: initial;
}

.hcl-stack__item {
  padding: 4px;
  flex: 0 1 auto;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-subheading {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  color: #013a14;
  line-height: 1.2;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.hcl-text-container > .hcl-subheading {
  margin-bottom: 8px;
}
@media (min-width: 670px) {
  .hcl-text-container > .hcl-subheading {
    margin-bottom: 12px;
  }
}

.hcl-subheading--with-margin {
  margin-bottom: 8px;
}
@media (min-width: 670px) {
  .hcl-subheading--with-margin {
    margin-bottom: 12px;
  }
}

.hcl-subheading--on-dark-bg {
  color: #fff;
}

.hcl-subheading--on-dark-bg-alt {
  color: #e4e8da;
}

.hcl-subheading--size1 {
  font-size: 18px;
  letter-spacing: 0.03em;
}
@media (min-width: 670px) {
  .hcl-subheading--size1 {
    font-size: 20px;
  }
}

.hcl-subheading--size2 {
  font-size: 16px;
  letter-spacing: 0.02em;
}
@media (min-width: 670px) {
  .hcl-subheading--size2 {
    font-size: 18px;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-tabs {
  border-bottom: 1px solid #b9baba;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  row-gap: 1px;
}

.hcl-tabs__item {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 0;
  background: #fff;
  color: #013a14;
  padding: 16px;
  display: block;
  position: relative;
  margin: 0;
}
.hcl-tabs__item::after {
  height: 1px;
  width: 100%;
  left: 0;
  right: 0;
  bottom: -1px;
  position: absolute;
  background-color: #b9baba;
  content: "";
  display: block;
}
.hcl-tabs__item:link {
  text-decoration: none;
}
.hcl-tabs__item:visited {
  color: #013a14;
}
.hcl-tabs__item:hover {
  color: #013a14;
  background-color: #e4e8da;
  text-decoration: none;
}
.hcl-tabs__item:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
  z-index: 1;
}

.hcl-tabs__item--active {
  color: #007e47;
}
.hcl-tabs__item--active::after {
  height: 3px;
  background-color: #007e47;
}
.hcl-tabs__item--active:hover {
  color: #007e47;
  background-color: #fff;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-text-container > * {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
.hcl-text-container > *:last-child {
  margin-bottom: 0 !important;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-text {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.hcl-text--on-dark-bg {
  color: #fff;
}

.hcl-text--on-dark-bg-alt {
  color: #e4e8da;
}

.hcl-text--light {
  font-weight: 300;
}

.hcl-text--regular {
  font-weight: 400;
}

.hcl-text--medium {
  font-weight: 500;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-text-input {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px;
  color: #161616;
  appearance: none;
  border: 1px solid #b9baba;
  border-radius: 3px;
  background-color: #fff;
}
.hcl-text-input:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hcl-text-input--full-width {
  width: 100%;
}

.hcl-text-input[aria-invalid=true],
.hcl-text-input--error {
  border-color: rgb(187.2, 77.6, 77.6);
}

.hcl-text-input--disabled {
  border-color: #b9baba;
  color: #b9baba;
  cursor: not-allowed;
}
.hcl-text-input--disabled::placeholder {
  color: #b9baba;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hcl-with-icon {
  display: flex;
  justify-content: center;
}

.hcl-with-icon--inline {
  display: inline;
}

.hcl-with-icon__icon {
  vertical-align: middle;
  width: 1em;
  height: 1em;
}
.hcl-with-icon:not(.hcl-with-icon--inline) .hcl-with-icon__icon {
  flex: 0 0 auto;
}

.hcl-with-icon__text {
  margin-left: 8px;
}
.hcl-with-icon--align-right .hcl-with-icon__text {
  margin-right: 8px;
  margin-left: 0;
}
.hcl-with-icon--inline .hcl-with-icon__text {
  margin-left: 4px;
}
.hcl-with-icon--inline.hcl-with-icon--align-right .hcl-with-icon__text {
  margin-right: 4px;
  margin-left: 0;
}
.hcl-with-icon:not(.hcl-with-icon--inline) .hcl-with-icon__text {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* stylelint-disable color-hex-length */
:root {
  --color-text-heading-primary: #013a14;
  --color-text-heading-secondary: #e4e8da;
  --color-text-heading-tertiary: white;
  --color-text-title-primary: #161616;
  --color-text-title-secondary: white;
  --color-text-body-primary: #161616;
  --color-text-body-secondary: #676767;
  --color-text-body-tertiary: white;
  --color-text-label-primary: #161616;
  --color-text-label-secondary: #676767;
  --color-text-label-highlighted: #013a14;
  --color-text-inline-enabled: #013a14;
  --color-text-inline-hover: #346143;
  --color-text-inline-pressed: #678972;
  --color-text-inline-visited: #67458c;
  --color-text-danger: #8c3a3a;
  --color-text-label-highlightedconsistent: #013a14;
  --color-text-label-tertiary: white;
  --color-text-label-notification-default: white;
  --color-text-action-primary: white;
  --color-stroke-action-primary-enabled: #007e47;
  --color-stroke-action-primary-hover: #33986c;
  --color-stroke-action-primary-pressed: #006539;
  --color-stroke-action-primary-focus: white;
  --color-icon-action-primary: white;
  --color-text-action-secondary: #013a14;
  --color-text-selected: #007341;
  --color-text-disabled: #b9baba;
  --color-stroke-disabled: #e1e1e1;
  --color-icon-action-secondary: #013a14;
  --color-icon-inline-enabled: #013a14;
  --color-icon-inline-hover: #346143;
  --color-icon-inline-pressed: #678972;
  --color-icon-selected: #007341;
  --color-icon-inline-visited: #67458c;
  --color-background-container-background: white;
  --color-background-container-foreground: white;
  --color-background-container-highlighted: #e4e8da;
  --color-background-container-backdrop: rgba(0, 0, 0, 0.4);
  --color-background-container-loading: #f0f0f0;
  --color-background-container-tertiary: #013a14;
  --color-background-container-quarternary: #007e47;
  --color-background-success-weak: #99cbb5;
  --color-background-success-strong: #007e47;
  --color-background-info-weak: #bed7ec;
  --color-background-info-strong: #4ba3b2;
  --color-background-danger-weak: #e7b3ad;
  --color-background-danger-strong: #8c3a3a;
  --color-background-warning-weak: #f9e19b;
  --color-background-warning-strong: #f4864e;
  --color-stroke-neutral-default: #e1e1e1;
  --color-stroke-neutral-lighttransparent: rgba(0, 0, 0, 0);
  --color-stroke-highlighted: #007e47;
  --color-stroke-info: #4ba3b2;
  --color-stroke-success: #007e47;
  --color-stroke-danger: #8c3a3a;
  --color-stroke-warning: #f4864e;
  --color-stroke-focus: rgba(0, 126, 71, 0.4980392157);
  --color-stroke-newconstructionproject: #f4864e;
  --color-stroke-action-secondary: #013a14;
  --color-stroke-selected: #007341;
  --color-icon-primary: #161616;
  --color-icon-secondary: #676767;
  --color-icon-highlighted: #013a14;
  --color-icon-info: #4ba3b2;
  --color-icon-success: #007e47;
  --color-icon-danger: #8c3a3a;
  --color-icon-warning: #f4864e;
  --color-icon-tertiary: white;
  --color-icon-property-homestead: #4ba3b2;
  --color-icon-property-allhousingforms: #013a14;
  --color-icon-property-apartment: #67458c;
  --color-icon-property-house: #007e47;
  --color-icon-property-newconstruction: #f4864e;
  --color-icon-property-plot: #bb4e4e;
  --color-icon-property-rowhouse: #66b291;
  --color-icon-property-vacationhome: #045d6c;
  --color-icon-property-other: #ba9f78;
  --color-icon-product-toplisting: #013a14;
  --color-icon-onlineviewingongoing: #bb4e4e;
  --color-icon-ongoingverifiedbidding: #007e47;
  --color-background-action-primary-enabled: #007e47;
  --color-background-action-primary-hover: #33986c;
  --color-background-action-primary-pressed: #006539;
  --color-background-action-secondary-enabled: white;
  --color-background-action-secondary-hover: #e4e8da;
  --color-background-action-secondary-pressed: #b6baae;
  --color-background-action-elavated: white;
  --color-background-form-neutral: #e1e1e1;
  --color-background-form-enabled: white;
  --color-background-action-tertiary-hover: rgba(0, 0, 0, 0.0588235294);
  --color-stroke-action-tertiary-hover: rgba(0, 0, 0, 0.0588235294);
  --color-background-action-tertiary-pressed: rgba(0, 0, 0, 0.1176470588);
  --color-stroke-action-tertiary-pressed: rgba(0, 0, 0, 0.1176470588);
  --color-background-transparent: rgba(0, 0, 0, 0);
  --color-stroke-transparent: rgba(0, 0, 0, 0);
  --color-background-action-destructive-enabled: #bb4e4e;
  --color-stroke-action-destructive-enabled: #bb4e4e;
  --color-background-action-secondary-error: #f7c0c0;
  --color-background-action-destructive-hover: #ea6161;
  --color-stroke-action-destructive-hover: #ea6161;
  --color-background-action-destructive-pressed: #8c3a3a;
  --color-background-form-hover: #f0f0f0;
  --color-stroke-action-destructive-pressed: #8c3a3a;
  --color-stroke-action-destructive-focus: white;
  --color-background-form-pressed: #d1d1d1;
  --color-text-product-productlabel-enabled: #007e47;
  --color-text-product-productlabel-activated: #e5f3ed;
  --color-text-product-toplisting: #013a14;
  --color-stroke-form-enabled: #858585;
  --color-stroke-form-focus: #013a14;
  --color-stroke-action-neutral: #e1e1e1;
  --color-background-selected-enabled: #e4e8da;
  --color-background-selected-hover: #e9ede1;
  --color-background-selected-pressed: #b6baae;
  --color-background-graph-graph1: #495d64;
  --color-background-product-toplisting: #f9e19b;
  --color-background-product-productlabel-enabled: #e5f3ed;
  --color-background-product-productlabel-activated: #006539;
  --color-background-notification: #bb4e4e;
  --color-background-graph-graph2: #4ba3b2;
  --color-background-graph-graph3: #67458c;
  --color-background-graph-graph4: #ea6161;
  --color-background-graph-graph5: #f4864e;
  --color-background-graph-graph6: #ba9f78;
  --color-background-container-neutral: #f0f0f0;
  --color-background-promoted: #67458c;
  --color-background-shadow: #b9baba;
  --color-background-container-navigation: #e4e8da;
  --color-background-badge: #161616;
  --color-background-constant-white: white;
  --color-background-selected-active: #007341;
  --color-background-container-onimage: rgba(255, 255, 255, 0.8);
  --color-background-disabled: #f0f0f0;
  --color-background-overlay-enabled: rgba(0, 0, 0, 0.0588235294);
  --color-background-overlay-hover: rgba(0, 0, 0, 0.1176470588);
  --color-background-overlay-pressed: rgba(0, 0, 0, 0.1764705882);
  --color-icon-disabled: #b9baba;
  --color-stroke-dangerfocus: rgba(234, 97, 97, 0.4980392157);
  /*
  Subheading will be deprecated in the future and the Title component will be used instead.
  Until this is done we need to adjust the colors of the subheading with a made-up color token
  with keeps the logic of subheading but applies also the dark mode.
  */
  --legacy-color-text-title-primary: #013a14;
  --legacy-color-text-title-secondary: #ffff;
  --nest-base-unit: 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclIcon {
  display: inline-block;
  width: auto;
  height: 100%;
  color: inherit;
}

.hclIcon svg {
  max-width: 100%;
  max-height: 100%;
  width: inherit;
  height: inherit;
  fill: currentColor;
  display: block;
}

.hclIconInline {
  display: inline-block;
  height: 1em;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclWithIcon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hclWithIconInline {
  display: inline;
}

.hclWithIconIcon {
  vertical-align: middle;
  width: 1em;
  height: 1em;
}

.hclWithIcon:not(.hclWithIconInline) .hclWithIconIcon {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.hclWithIconText {
  margin-left: 8px;
}

.hclWithIconAlignRight .hclWithIconText {
  margin-right: 8px;
  margin-left: 0;
}

.hclWithIconInline .hclWithIconText {
  margin-left: 4px;
}

.hclWithIconInline.hclWithIconAlignRight .hclWithIconText {
  margin-right: 4px;
  margin-left: 0;
}

.hclWithIcon:not(.hclWithIconInline) .hclWithIconText {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclCard {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  width: 100%;
  text-decoration: none;
  color: inherit;
  font: inherit;
  display: block;
  text-align: inherit;
  -webkit-align-items: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #b9baba;
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.hclCard:visited, .hclCard:hover, .hclCard:focus, .hclCard:active {
  text-decoration: none;
  color: inherit;
}

.hclCard:hover {
  border: 1px solid #007e47;
}

.hclCard:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclCardHighlighted {
  background: #e4e8da;
  border: 1px solid #e4e8da;
}

.hclCardBorderless {
  border-color: transparent;
}

.hclCardShadowless {
  box-shadow: none;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclCardTitle {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #013a14;
}

:visited .hclCardTitle {
  color: #67458c;
}

[href^="#"]:visited .hclCardTitle {
  color: #013a14;
}

@media (min-width: 670px) {
  .hclCardTitle {
    font-size: 18px;
  }
}
.hclCardTitleExternalIcon {
  display: inline-block;
  height: 1em;
  vertical-align: -1px;
  margin-left: 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclCardAction {
  color: #007e47;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

.hclCardActionExternalIcon {
  display: inline-block;
  height: 1em;
  vertical-align: -1px;
  margin-left: 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclHint {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #676767;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 8px;
}

.hclHint.hclHintError {
  color: rgb(187.2, 77.6, 77.6);
}

.hclHint.hclHintSmall {
  font-size: 14px;
}

.hclHint.hclHintHidden {
  display: none;
}

.hclHintIcon {
  width: auto;
  height: 1.2em;
  display: inline-block;
  margin-right: 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclCheckbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.hclCheckboxDisabled {
  cursor: not-allowed;
}

.hclCheckboxInput {
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  cursor: pointer;
  position: absolute;
  outline: none;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.hclCheckboxIcon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
  color: transparent;
  background-color: #fff;
  border: 1px solid #b9baba;
  border-radius: 5px;
  padding: 2px;
  margin-right: 8px;
  transition: box-shadow 125ms, background-color 125ms, border-color 125ms, color 125ms;
}

.hclCheckboxHasError .hclCheckboxIcon {
  border-color: rgb(187.2, 77.6, 77.6);
}

.hclCheckboxDisabled .hclCheckboxIcon {
  border-color: #b9baba;
}

.hclCheckboxIconCustom {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}

.hclCheckboxInput:not(:disabled):hover ~ .hclCheckboxIcon {
  border-color: #007e47;
  background-color: rgb(239.8, 239.8, 239.8);
}

.hclCheckboxInput:not(:disabled):checked:hover ~ .hclCheckboxIcon {
  background-color: #c2d0bd;
}

.hclCheckboxInput:not(:disabled):focus ~ .hclCheckboxIcon {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclCheckboxInput:checked ~ .hclCheckboxIcon {
  background-color: #e4e8da;
  border-color: #007e47;
  color: #013a14;
  opacity: 1;
}

.hclCheckboxLabel {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #013a14;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.5;
}

.hclCheckboxHasError .hclCheckboxLabel {
  color: rgb(187.2, 77.6, 77.6);
}

.hclCheckboxDisabled .hclCheckboxLabel {
  color: #b9baba;
}

/* alternative styles */
.hclCheckboxInner {
  padding: 8px;
  border: 1px solid #b9baba;
  border-radius: 5px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.hclCheckboxHasError .hclCheckboxInner {
  color: rgb(187.2, 77.6, 77.6);
  border-color: rgb(187.2, 77.6, 77.6);
}

.hclCheckboxDisabled .hclCheckboxInner {
  color: #b9baba;
  border-color: #b9baba;
}

.hclCheckboxInput:not(:disabled):hover ~ .hclCheckboxInner {
  border-color: #007e47;
  background-color: rgb(239.8, 239.8, 239.8);
}

.hclCheckboxInput:not(:disabled):checked:hover ~ .hclCheckboxInner {
  background-color: #c2d0bd;
}

.hclCheckboxInput:not(:disabled):focus ~ .hclCheckboxInner {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclCheckboxInput:checked ~ .hclCheckboxInner > .hclCheckboxIcon:not(.hclCheckboxIconCustom) {
  background-color: #e4e8da;
  border-color: #007e47;
  color: #013a14;
  opacity: 1;
}

.hclCheckboxInput:checked ~ .hclCheckboxInner {
  padding: 7px;
  background-color: #e4e8da;
  border: 2px solid #007e47;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclFieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.hclFieldsetLegend {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #161616;
  padding: 0 0 8px;
}

.hclFieldsetLegendHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

.nestBadge {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-width: 24px;
  padding: 2px 6px;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 1000px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Roboto Flex", Arial, sans-serif;
  line-height: 16px;
}

.fixedWidth {
  min-width: unset;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 20px;
  height: 20px;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 100%;
}

.nestBadgeNotification {
  background: var(--color-background-notification, #BB4E4E);
  color: var(--color-text-label-tertiary);
}

.nestBadgePromoted {
  background: var(--color-background-promoted, #67458C);
  color: var(--color-text-label-tertiary);
}

.nestBadgeStrong {
  background: var(--color-background-badge, #161616);
  color: var(--color-text-label-tertiary);
}

.nestBadgeWeak {
  background: var(--color-background-container-background, #FFF);
  color: var(--color-text-label-primary);
}

.nestLabelInternal {
  cursor: pointer;
  color: var(--color-text-body-primary);
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
}

.nestLabelInputInternal {
  display: block;
  font-weight: 600;
  padding-bottom: calc(var(--nest-base-unit) * 0.5);
}

.nestLabelInputInternalError {
  color: var(--color-text-danger);
}

.nestLabelInputInternalNoPadding {
  padding: 0;
}

.nestLabelInputInternalHidden {
  display: none;
}

fieldset:disabled .nestLabelInternal,
.nestLabelInternalDisabled {
  cursor: not-allowed;
  color: var(--color-text-disabled);
}

.nestHintContainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: calc(var(--nest-base-unit) * 0.5);
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding-top: calc(var(--nest-base-unit) * 0.5);
}

.nestHint {
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-body-secondary);
  letter-spacing: 0.2px;
}

.nestHintError {
  color: var(--color-text-danger);
}

.nestHintSmall {
  font-size: 14px;
}

.nestHintHidden {
  display: none;
}

.nestHintIcon {
  width: 20px;
  height: 20px;
  padding: 2px;
  color: var(--color-text-danger);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

fieldset:disabled .nestHint,
.nestHintDisabled {
  color: var(--color-text-disabled);
}

.nestCheckboxGroup {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.nestCheckboxIndicatorWrapper {
  all: unset;
  box-sizing: border-box;
  position: relative;
  margin: 3px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 18px;
  width: 18px;
  color: var(--color-background-transparent);
  border: 2px solid var(--color-icon-primary);
  border-radius: calc(var(--nest-base-unit) * 0.5);
  background-color: var(--color-background-transparent);
}

.nestCheckboxIndicatorWrapper[data-state=checked]:not(:disabled) {
  border-color: var(--color-icon-selected);
  background-color: var(--color-icon-selected);
}

.nestCheckboxIndicatorWrapper:disabled {
  cursor: not-allowed;
  border-color: var(--color-text-disabled);
}

.nestCheckboxIndicatorWrapper:disabled[data-state=checked] * {
  cursor: not-allowed;
  background-color: var(--color-text-disabled);
  color: var(--color-text-action-primary);
}

.nestCheckboxIndicatorWrapper::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  right: 0;
  bottom: 0;
  border-radius: calc(var(--nest-base-unit) * 0.5);
  background-color: var(--color-background-transparent);
  transition: background-color 125ms, border-color 125ms;
  width: calc(var(--nest-base-unit) * 4);
  height: calc(var(--nest-base-unit) * 4);
  z-index: -1;
}

.nestCheckboxIndicatorWrapper:hover:not(:disabled)::before {
  background-color: var(--color-background-form-hover);
}

.nestCheckboxIndicatorWrapper:active:not(:disabled)::before {
  background-color: var(--color-background-form-pressed);
}

.nestCheckboxIndicator {
  height: inherit;
  width: inherit;
  color: var(--color-icon-tertiary);
}

.nestCheckbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--nest-base-unit);
  cursor: pointer;
}

.nestCheckbox:hover:not(.nestCheckboxDisabled) .nestCheckboxRoot::before {
  background-color: var(--color-background-form-hover);
}

.nestCheckbox:checked:not(.nestCheckboxDisabled) .nestCheckboxRoot {
  border-color: var(--color-icon-selected);
  background-color: var(--color-icon-selected);
}

.nestCheckbox:focus-within {
  padding-right: 4px;
  padding-left: 4px;
  margin-left: -4px;
  text-decoration: none;
  outline-color: var(--color-stroke-focus);
  border-radius: 1px;
  outline-width: 4px;
  outline-style: solid;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.nestCheckbox .nestCheckboxRoot:focus-visible {
  outline: none;
}

.nestCheckboxLabel {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Apply disabled styles when the parent of the group is disabled */
fieldset:has([disabled]) .nestCheckboxGroup .nestCheckboxLabel {
  color: var(--color-text-disabled);
}

.nestCheckboxErrorContainer {
  margin-left: 2px;
  margin-top: 4px;
}

.nestDisplayTagContainer {
  padding: 3px 8px;
  border-radius: calc(var(--nest-base-unit) * 0.5);
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: var(--color-background-container-background);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-label-primary);
  gap: calc(var(--nest-base-unit) * 0.5);
}

.nestDisplayTagTypeDefault {
  border: 1px solid var(--color-stroke-neutral-default);
}

.nestDisplayTagTypeOnImage {
  border: 1px solid var(--color-stroke-transparent);
  background: var(--color-background-container-onimage);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.nestDisplayTagTypePromoted {
  border: 1px solid var(--color-stroke-transparent);
  color: var(--color-text-label-tertiary);
  background: var(--color-background-promoted);
}

.nestDisplayTagTypeTinted {
  border: 1px solid var(--color-stroke-transparent);
  color: var(--color-text-product-productlabel-enabled);
  background: var(--color-background-product-productlabel-enabled);
  font-family: "Roboto Flex", Arial, sans-serif;
  font-weight: 600;
}

.nestDisplayTagTypeTinted.nestDisplayTagInverted {
  color: var(--color-background-product-productlabel-enabled);
  background: var(--color-text-product-productlabel-enabled);
}

.nestDisplayTagTypeTopListing {
  border: 1px solid var(--color-stroke-transparent);
  color: var(--color-text-product-toplisting);
  background: var(--color-background-product-toplisting);
  font-weight: 600;
  font-family: "Roboto Flex", Arial, sans-serif;
}

.nestDisplayTagProductIcon {
  width: 20px;
  height: 20px;
}

.nestFieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.nestFieldset:disabled {
  cursor: not-allowed;
  outline: none;
  /* Ensure all children inherit the styling */
}

.nestFieldset:disabled:hover {
  background: none;
}

.nestFieldset:disabled:active {
  background: none;
}

.nestFieldset:disabled * {
  cursor: not-allowed;
  outline: none;
}

.nestFieldset:disabled *:hover {
  background: none;
}

.nestFieldset:disabled *:active {
  background: none;
}

.nestLabel {
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  font-style: normal;
  color: var(--color-text-body-primary);
  margin: 0;
  padding: 0;
}

.nestLabelSpan {
  display: inline-block;
}

.nestLabelLarge {
  font-size: 16px;
  line-height: 24px;
}

.nestLabelMedium {
  font-size: 14px;
  line-height: 20px;
}

.nestLabelSmall {
  font-size: 12px;
  line-height: 16px;
}

.nestLabelWeak {
  font-weight: 400;
}

.nestLabelSecondaryColor {
  color: var(--color-text-body-secondary);
}

.nestLabelTertiaryColor {
  color: var(--color-text-body-tertiary);
}

.nestButton {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: calc(var(--nest-base-unit) * 0.5);
  border-radius: var(--nest-base-unit);
  padding: 9px 16px;
  cursor: pointer;
  outline: unset;
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.nestButton:disabled {
  color: #b9baba;
  cursor: not-allowed;
}

.nestButtonLoadingContainer {
  position: absolute;
}

.nestButtonContainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: var(--nest-base-unit);
}

.nestButtonSmall {
  padding: 7px 12px;
  font-size: 14px;
  line-height: 20px;
}

.nestButtonSmall .nestButtonIcon {
  height: 20px;
}

.nestButtonIcon {
  height: 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.nestButtonHiddenText {
  visibility: hidden;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.nestButtonFullWidth {
  width: 100%;
}

@media (min-width: 550px) {
  .nestButtonFullWidthSm-on {
    width: 100%;
  }
}
@media (min-width: 550px) {
  .nestButtonFullWidthSm-off {
    width: initial;
  }
}
@media (min-width: 670px) {
  .nestButtonFullWidthMd-on {
    width: 100%;
  }
}
@media (min-width: 670px) {
  .nestButtonFullWidthMd-off {
    width: initial;
  }
}
@media (min-width: 990px) {
  .nestButtonFullWidthLg-on {
    width: 100%;
  }
}
@media (min-width: 990px) {
  .nestButtonFullWidthLg-off {
    width: initial;
  }
}
.nestButtonPrimary {
  border: 1px solid var(--color-stroke-action-primary-enabled);
  background: var(--color-background-action-primary-enabled);
  color: var(--color-text-action-primary);
}

.nestButtonPrimary:hover, .nestButtonPrimary:focus-visible:hover {
  border: 1px solid var(--color-stroke-action-primary-hover);
  background: var(--color-background-action-primary-hover);
}

.nestButtonPrimary:active, .nestButtonPrimary:focus-visible:active {
  border: 1px solid var(--color-stroke-action-primary-pressed);
  background: var(--color-background-action-primary-pressed);
}

.nestButtonPrimary:focus-visible {
  border: 1px solid var(--color-stroke-action-primary-focus);
  background: var(--color-background-action-primary-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
}

.nestButtonPrimary.nestButtonElevated {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
}

.nestButtonPrimary.nestButtonElevated:focus-visible {
  box-shadow: 0 0 0 4px var(--color-stroke-focus), 0 0 4px 0 rgba(0, 0, 0, 0.12), 0 4px 6px 0 rgba(0, 0, 0, 0.08), 0 6px 10px 0 rgba(0, 0, 0, 0.06), 0 10px 18px 0 rgba(0, 0, 0, 0.04);
}

.nestButtonSecondary {
  border: 1px solid var(--color-stroke-action-secondary);
  background: var(--color-background-action-secondary-enabled);
  color: var(--color-text-action-secondary);
}

.nestButtonSecondary:hover, .nestButtonSecondary:focus-visible:hover {
  border: 1px solid var(--color-stroke-action-secondary);
  background: var(--color-background-action-secondary-hover);
}

.nestButtonSecondary:active, .nestButtonSecondary:focus-visible:active {
  border: 1px solid var(--color-stroke-action-secondary);
  background: var(--color-background-action-secondary-pressed);
}

.nestButtonSecondary:focus-visible {
  border: 1px solid var(--color-stroke-action-secondary);
  background: var(--color-background-action-secondary-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
}

.nestButtonSecondary.nestButtonElevated {
  border: 1px solid var(--color-stroke-transparent);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
}

.nestButtonSecondary.nestButtonElevated:focus-visible {
  box-shadow: 0 0 0 4px var(--color-stroke-focus), 0 0 4px 0 rgba(0, 0, 0, 0.12), 0 4px 6px 0 rgba(0, 0, 0, 0.08), 0 6px 10px 0 rgba(0, 0, 0, 0.06), 0 10px 18px 0 rgba(0, 0, 0, 0.04);
}

.nestButtonTertiary {
  border: 1px solid var(--color-stroke-transparent);
  background: var(--color-background-transparent);
  color: var(--color-text-action-secondary);
}

.nestButtonTertiary:hover, .nestButtonTertiary:focus-visible:hover {
  border: 1px solid var(--color-stroke-transparent);
  background: var(--color-background-action-tertiary-hover);
  cursor: pointer;
}

.nestButtonTertiary:active, .nestButtonTertiary:focus-visible:active {
  border: 1px solid var(--color-stroke-transparent);
  background: var(--color-background-action-tertiary-pressed);
}

.nestButtonTertiary:focus-visible {
  border: 1px solid var(--color-stroke-transparent);
  background: var(--color-background-transparent);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
}

.nestButtonDestructive {
  border: 1px solid var(--color-stroke-action-destructive-enabled);
  background: var(--color-background-action-destructive-enabled);
  color: var(--color-text-action-primary);
}

.nestButtonDestructive:hover, .nestButtonDestructive:focus-visible:hover {
  border: 1px solid var(--color-stroke-action-destructive-hover);
  background: var(--color-background-action-destructive-hover);
}

.nestButtonDestructive:active, .nestButtonDestructive:focus-visible:active {
  border: 1px solid var(--color-stroke-action-destructive-pressed);
  background: var(--color-background-action-destructive-pressed);
}

.nestButtonDestructive:focus-visible {
  border: 1px solid var(--color-text-action-primary);
  background: var(--color-background-action-destructive-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
}

.nestButtonDestructive.nestButtonElevated {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
}

.nestButtonDestructive.nestButtonElevated:focus-visible {
  box-shadow: 0 0 0 4px var(--color-stroke-focus), 0 0 4px 0 rgba(0, 0, 0, 0.12), 0 4px 6px 0 rgba(0, 0, 0, 0.08), 0 6px 10px 0 rgba(0, 0, 0, 0.06), 0 10px 18px 0 rgba(0, 0, 0, 0.04);
}

.nestLink {
  outline: unset;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: var(--nest-base-unit);
  color: var(--color-text-inline-enabled);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  font-family: "Roboto Flex", Arial, sans-serif;
  text-decoration: none;
  -webkit-text-decoration-color: inherit;
  text-decoration-color: inherit;
  padding: var(--nest-base-unit);
  cursor: pointer;
}

.nestLink:visited {
  color: var(--color-text-inline-visited);
  text-decoration: underline;
}

.nestLink:visited svg {
  fill: var(--color-text-inline-visited);
  color: var(--color-text-inline-visited);
}

.nestLink:hover {
  color: var(--color-text-inline-hover);
  text-decoration: underline;
}

.nestLink:hover svg {
  fill: var(--color-text-inline-hover);
  color: var(--color-text-inline-hover);
}

.nestLink:active {
  color: var(--color-text-inline-pressed);
  text-decoration: underline;
}

.nestLink:active svg {
  fill: var(--color-text-inline-pressed);
  color: var(--color-text-inline-pressed);
}

.nestLink:focus-visible {
  text-decoration: underline;
  outline-color: var(--color-stroke-focus);
  border-radius: 8px;
  outline-width: 4px;
  outline-style: solid;
  outline-offset: 0;
}

.noPadding {
  padding: 0;
}

.noPadding:focus-visible {
  border-radius: 4px;
}

.inline {
  font-weight: 400;
  text-decoration: underline;
}

.inline:focus-visible {
  border-radius: 4px;
}

.negativeMargin {
  margin: calc(-1 * var(--nest-base-unit));
}

.negativeMarginX {
  margin-left: calc(-1 * var(--nest-base-unit));
  margin-right: calc(-1 * var(--nest-base-unit));
}

.negativeMarginY {
  margin-top: calc(-1 * var(--nest-base-unit));
  margin-bottom: calc(-1 * var(--nest-base-unit));
}

.small {
  font-size: 14px;
  line-height: 20px;
}

.nestLinkButton {
  text-decoration: none;
}

.nestLayoutContainer {
  margin: 0 12px;
}

@media (min-width: 321px) {
  .nestLayoutContainer {
    margin: 0 calc(var(--nest-base-unit) * 2);
  }
}
@media (min-width: 670px) {
  .nestLayoutContainer {
    margin: 0 calc(var(--nest-base-unit) * 4);
  }
}
@media (min-width: 990px) {
  .nestLayoutContainer {
    max-width: 1352px;
    margin: 0 auto;
  }
}
.nestRadioGroupRoot {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 24px;
}

.nestRadioGroupRoot[data-disabled] {
  cursor: not-allowed;
  outline: none;
  /* Ensure all children inherit the styling */
}

.nestRadioGroupRoot[data-disabled]:hover {
  background: none;
}

.nestRadioGroupRoot[data-disabled]:active {
  background: none;
}

.nestRadioGroupRoot[data-disabled] * {
  cursor: not-allowed;
  outline: none;
}

.nestRadioGroupRoot[data-disabled] *:hover {
  background: none;
}

.nestRadioGroupRoot[data-disabled] *:active {
  background: none;
}

.nestRadioGroupRoot[data-disabled] * {
  color: var(--color-text-disabled);
  border-color: var(--color-stroke-disabled);
  fill: var(--color-stroke-disabled);
}

.nestRadio {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  outline: unset;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.nestRadio:focus-within {
  text-decoration: none;
  outline-color: var(--color-stroke-focus);
  border-radius: 1px;
  outline-width: 4px;
  outline-style: solid;
}

.nestRadioGroupItem {
  all: unset;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.handleSelected[data-state=checked] .nestRadioGroupIndicatorWrapper {
  border-color: var(--color-icon-selected);
}

.handleSelected[data-disabled] .nestRadioGroupIndicatorWrapper {
  border-color: var(--color-icon-disabled);
}

.handleSelected[data-disabled] .nestRadioGroupIndicatorWrapper:hover {
  background-color: var(--color-background-transparent);
  box-shadow: none;
  cursor: not-allowed;
}

.nestRadioGroupIndicatorWrapper {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 2px solid var(--color-icon-primary);
  margin: 2px;
}

.nestRadioGroupIndicatorWrapper:hover {
  border-radius: 100%;
  background-color: var(--color-background-form-hover);
  box-shadow: 0 0 0 6px var(--color-background-form-hover);
}

.nestRadioGroupIndicatorWrapper:active {
  border-radius: 100%;
  background-color: var(--color-background-form-pressed);
  box-shadow: 0 0 0 6px var(--color-background-form-pressed);
}

.nestRadioGroupIndicator {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  position: relative;
}

.nestRadioGroupIndicator::after {
  content: "";
  display: block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background-color: var(--color-icon-selected);
}

.nestRadioGroupIndicator[data-disabled]::after {
  background-color: var(--color-icon-disabled);
}

.nestRadioGroupLabel {
  font-size: 16px;
  padding-left: var(--nest-base-unit);
  padding-right: 2px;
  cursor: pointer;
}

.nestSpacer {
  --nest-spacing-00: 0;
  --nest-spacing-100: 4px;
  --nest-spacing-200: 8px;
  --nest-spacing-300: 12px;
  --nest-spacing-400: 16px;
  --nest-spacing-500: 24px;
  --nest-spacing-600: 32px;
  --nest-spacing-700: 48px;
  --nest-spacing-800: 64px;
  --nest-spacing-900: 96px;
  --nest-spacing-1000: 128px;
  --nest-spacing-small: calc(2 * var(--nest-base-unit));
  --nest-spacing-medium: calc(4 * var(--nest-base-unit));
  --nest-spacing-large: calc(6 * var(--nest-base-unit));
}

@media (min-width: 670px) {
  .nestSpacer {
    --nest-spacing-small: calc(3 * var(--nest-base-unit));
    --nest-spacing-medium: calc(6 * var(--nest-base-unit));
    --nest-spacing-large: calc(8 * var(--nest-base-unit));
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclRadioButton {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  font-family: "Roboto", Arial, sans-serif;
  gap: 8px;
  cursor: pointer;
}

.hclRadioButtonDisabled {
  cursor: not-allowed;
}

.hclRadioButtonInline {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin: 0 8px 0 0;
}

.hclRadioButtonInput {
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  cursor: pointer;
  position: absolute;
  outline: none;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.hclRadioButtonIcon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
  color: transparent;
  margin-top: 2px;
  transition: box-shadow 125ms, background-color 125ms, border-color 125ms, color 125ms;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.hclRadioButtonIcon:not(.hclRadioButtonIconCustom) {
  background-color: #fff;
  border: 1px solid #b9baba;
  border-radius: 100%;
  padding: 2px;
}

.hclRadioButtonError .hclRadioButtonIcon {
  border-color: rgb(187.2, 77.6, 77.6);
}

.hclRadioButtonDisabled .hclRadioButtonIcon {
  border-color: #b9baba;
}

.hclRadioButtonIcon:not(.hclRadioButtonIconCustom)::before {
  border-radius: 100%;
  background-color: currentColor;
  width: 8px;
  height: 8px;
  content: " ";
  display: block;
}

.hclRadioButtonInput:not(:disabled):hover ~ .hclRadioButtonIcon {
  border-color: #007e47;
  background-color: rgb(239.8, 239.8, 239.8);
}

.hclRadioButtonInput:not(:disabled):checked:hover ~ .hclRadioButtonIcon {
  background-color: #c2d0bd;
}

.hclRadioButtonInput:not(:disabled):focus ~ .hclRadioButtonIcon {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclRadioButtonInput:checked ~ .hclRadioButtonIcon {
  background-color: #e4e8da;
  border-color: #007e47;
  color: #013a14;
  opacity: 1;
}

/* alternative styles */
.hclRadioButtonInner {
  padding: 8px;
  border: 1px solid #b9baba;
  border-radius: 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  width: 100%;
}

.hclRadioButtonHasError .hclRadioButtonInner {
  color: rgb(187.2, 77.6, 77.6);
  border-color: rgb(187.2, 77.6, 77.6);
}

.hclRadioButtonDisabled .hclRadioButtonInner {
  color: #b9baba;
  border-color: #b9baba;
}

.hclRadioButtonInnerTile {
  border-radius: 5px;
  gap: 4px;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 12px 8px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.hclRadioButtonInnerTile .hclRadioButtonIcon {
  margin-top: 0;
}

.hclRadioButtonInput:not(:disabled):hover ~ .hclRadioButtonInner {
  border-color: #007e47;
  background-color: rgb(239.8, 239.8, 239.8);
}

.hclRadioButtonInput:not(:disabled):checked:hover ~ .hclRadioButtonInner {
  background-color: #c2d0bd;
}

.hclRadioButtonInput:not(:disabled):focus ~ .hclRadioButtonInner {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclRadioButtonInput:checked ~ .hclRadioButtonInner > .hclRadioButtonIcon:not(.hclRadioButtonIconCustom) {
  background-color: #e4e8da;
  border-color: #007e47;
  color: #013a14;
  opacity: 1;
}

.hclRadioButtonInput:checked ~ .hclRadioButtonInner {
  padding: 7px;
  background-color: #e4e8da;
  border: 2px solid #007e47;
}

.hclRadioButtonInput:checked ~ .hclRadioButtonInnerTile {
  padding: 11px 7px;
}

.hclRadioButtonLabel {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #013a14;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.5;
}

.hclRadioButtonError .hclRadioButtonLabel {
  color: rgb(187.2, 77.6, 77.6);
}

.hclRadioButtonDisabled .hclRadioButtonLabel {
  color: #b9baba;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl$namespace*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclRadioButtonBar {
  padding: 0;
  margin: 0;
  border: 0;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.hclRadioButtonBarWithShadow {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
}

.hclRadioButtonBarFullWidth {
  width: 100%;
}

.hclRadioButtonBarLabel {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
}

.hclRadioButtonBarLabel + .hclRadioButtonBarLabel {
  margin-left: -1px;
}

.hclRadioButtonBarLabelEqualSize {
  -webkit-flex: 1 1 0;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
}

.hclRadioButtonBarButton {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  -webkit-appearance: none;
  appearance: none;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  line-height: 1;
  transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
  border: 1px solid #b9baba;
  background-color: #fff;
  color: #013a14;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: none;
  border-radius: 0;
}

.hclRadioButtonBarButton:disabled {
  cursor: not-allowed;
  color: #b9baba;
}

.hclRadioButtonBarButton:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclRadioButtonBarButton, .hclRadioButtonBarButton:not(:disabled):hover {
  text-decoration: none;
}

@media (hover: hover) {
  .hclRadioButtonBarButton:not(:disabled):hover {
    background-color: #e4e8da;
    color: #161616;
  }
}
.hclRadioButtonBarButton:not(:disabled):active {
  border: 1px solid rgb(182.4, 185.6, 174.4);
  background-color: rgb(182.4, 185.6, 174.4);
  color: #161616;
}

.hclRadioButtonBarLabel:first-child .hclRadioButtonBarButton {
  border-radius: 5px 0 0 5px;
  margin-left: 0;
}

.hclRadioButtonBarLabel:last-child .hclRadioButtonBarButton {
  border-radius: 0 5px 5px 0;
}

.hclRadioButtonBarButtonWithoutPadding {
  padding: 0;
}

.hclRadioButtonBarButtonAlignmentLeft {
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  justify-content: left;
}

.hclRadioButtonBarButtonAlignmentRight {
  -webkit-justify-content: right;
  -ms-flex-pack: right;
  justify-content: right;
}

.hclRadioButtonBarButtonAlignmentCenter {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media (min-width: 550px) {
  .hclRadioButtonBarButtonSmAlignmentLeft {
    -webkit-justify-content: left;
    -ms-flex-pack: left;
    justify-content: left;
  }
  .hclRadioButtonBarButtonSmAlignmentRight {
    -webkit-justify-content: right;
    -ms-flex-pack: right;
    justify-content: right;
  }
  .hclRadioButtonBarButtonSmAlignmentCenter {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
@media (min-width: 670px) {
  .hclRadioButtonBarButtonMdAlignmentLeft {
    -webkit-justify-content: left;
    -ms-flex-pack: left;
    justify-content: left;
  }
  .hclRadioButtonBarButtonMdAlignmentRight {
    -webkit-justify-content: right;
    -ms-flex-pack: right;
    justify-content: right;
  }
  .hclRadioButtonBarButtonMdAlignmentCenter {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
@media (min-width: 990px) {
  .hclRadioButtonBarButtonLgAlignmentLeft {
    -webkit-justify-content: left;
    -ms-flex-pack: left;
    justify-content: left;
  }
  .hclRadioButtonBarButtonLgAlignmentRight {
    -webkit-justify-content: right;
    -ms-flex-pack: right;
    justify-content: right;
  }
  .hclRadioButtonBarButtonLgAlignmentCenter {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
@media (min-width: 1040px) {
  .hclRadioButtonBarButtonXlAlignmentLeft {
    -webkit-justify-content: left;
    -ms-flex-pack: left;
    justify-content: left;
  }
  .hclRadioButtonBarButtonXlAlignmentRight {
    -webkit-justify-content: right;
    -ms-flex-pack: right;
    justify-content: right;
  }
  .hclRadioButtonBarButtonXlAlignmentCenter {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
.hclRadioButtonBarInput:focus + .hclRadioButtonBarButton {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclRadioButtonBarInput:checked + .hclRadioButtonBarButton {
  background: #e4e8da;
  border: 2px solid #007e47;
  padding: 11px 15px;
  z-index: 1;
}

.hclRadioButtonBarInput:checked + .hclRadioButtonBarButton.hclRadioButtonBarButtonWithoutPadding {
  padding: 0;
}

.hclRadioButtonBarInput {
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  cursor: inherit;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  pointer-events: none;
}

.hclRadioButtonBarIcon {
  height: 1em;
  line-height: 0;
  margin-right: 4px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclSelect {
  position: relative;
  width: auto;
}

.hclSelectFullWidth {
  width: 100%;
}

.hclSelectList {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  color: #013a14;
  width: inherit;
  cursor: pointer;
  border: 1px solid #b9baba;
  border-radius: 5px;
  background-color: #fff;
  padding: 8px;
  padding-right: 40px;
  margin: 0;
}

.hclSelectList:hover {
  border-color: #013a14;
}

.hclSelectList:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclSelectPlaceholder .hclSelectList {
  color: #676767;
}

.hclSelectError .hclSelectList {
  color: rgb(187.2, 77.6, 77.6);
  border-color: rgb(187.2, 77.6, 77.6);
}

.hclSelectDisabled .hclSelectList {
  border-color: #b9baba;
  color: #b9baba;
  cursor: not-allowed;
  opacity: 1;
}

.hclSelectIcon {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 19px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #013a14;
}

.hclSelectDisabled .hclSelectIcon {
  color: #b9baba;
}

.hclSelectError .hclSelectIcon {
  color: rgb(187.2, 77.6, 77.6);
  border-color: rgb(187.2, 77.6, 77.6);
}

.hclFormLabel {
  cursor: pointer;
  color: #161616;
}

.hclFormLabelError {
  color: rgb(187.2, 77.6, 77.6);
}

.hclFormLabelDisabled {
  color: #b9baba;
  cursor: not-allowed;
}

.hclFormLabelText {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  display: block;
  padding-bottom: 8px;
  color: inherit;
}

.hclFormLabelHidden .hclFormLabelText {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclTabs {
  border-bottom: 1px solid #b9baba;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  row-gap: 1px;
}

.hclTabsItem {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 0;
  background: #fff;
  color: #013a14;
  padding: 16px;
  display: block;
  position: relative;
  margin: 0;
}

.hclTabsItem::after {
  height: 1px;
  width: 100%;
  left: 0;
  right: 0;
  bottom: -1px;
  position: absolute;
  background-color: #b9baba;
  content: "";
  display: block;
}

.hclTabsItem:link {
  text-decoration: none;
}

.hclTabsItem:visited {
  color: #013a14;
}

.hclTabsItem:hover {
  color: #013a14;
  background-color: #e4e8da;
  text-decoration: none;
}

.hclTabsItem:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
  z-index: 1;
}

.hclTabsItemActive {
  color: #007e47;
}

.hclTabsItemActive::after {
  height: 3px;
  background-color: #007e47;
}

.hclTabsItemActive:hover {
  color: #007e47;
  background-color: #fff;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclPaddedContainer {
  padding: 8px;
}

@media (min-width: 670px) {
  .hclPaddedContainer {
    padding: 16px;
  }
}
.hclPaddedContainerSize1 {
  padding: 8px;
}

.hclPaddedContainerSize2 {
  padding: 16px;
}

.hclPaddedContainerSize3 {
  padding: 24px;
}

.hclPaddedContainerSize4 {
  padding: 32px;
}

@media (min-width: 550px) {
  .hclPaddedContainerSmSize1 {
    padding: 8px;
  }
  .hclPaddedContainerSmSize2 {
    padding: 16px;
  }
  .hclPaddedContainerSmSize3 {
    padding: 24px;
  }
  .hclPaddedContainerSmSize4 {
    padding: 32px;
  }
}
@media (min-width: 670px) {
  .hclPaddedContainerMdSize1 {
    padding: 8px;
  }
  .hclPaddedContainerMdSize2 {
    padding: 16px;
  }
  .hclPaddedContainerMdSize3 {
    padding: 24px;
  }
  .hclPaddedContainerMdSize4 {
    padding: 32px;
  }
}
@media (min-width: 990px) {
  .hclPaddedContainerLgSize1 {
    padding: 8px;
  }
  .hclPaddedContainerLgSize2 {
    padding: 16px;
  }
  .hclPaddedContainerLgSize3 {
    padding: 24px;
  }
  .hclPaddedContainerLgSize4 {
    padding: 32px;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclSubheading {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  color: #013a14;
  line-height: 1.2;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.hcl-text-container > .hclSubheading {
  margin-bottom: 8px;
}

@media (min-width: 670px) {
  .hcl-text-container > .hclSubheading {
    margin-bottom: 12px;
  }
}
.hclSubheadingWithMargin {
  margin-bottom: 8px;
}

@media (min-width: 670px) {
  .hclSubheadingWithMargin {
    margin-bottom: 12px;
  }
}
.hclSubheadingOnDarkBg {
  color: #fff;
}

.hclSubheadingOnDarkBgAlt {
  color: #e4e8da;
}

.hclSubheadingSize1 {
  font-size: 18px;
  letter-spacing: 0.03em;
}

@media (min-width: 670px) {
  .hclSubheadingSize1 {
    font-size: 20px;
  }
}
.hclSubheadingSize2 {
  font-size: 16px;
  letter-spacing: 0.02em;
}

@media (min-width: 670px) {
  .hclSubheadingSize2 {
    font-size: 18px;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclText {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.hclTextOnDarkBg {
  color: #fff;
}

.hclTextOnDarkBgAlt {
  color: #e4e8da;
}

.hclTextLight {
  font-weight: 300;
}

.hclTextRegular {
  font-weight: 400;
}

.hclTextMedium {
  font-weight: 500;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclAccordionContainer {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  margin: 8px 0;
  background-color: #fff;
}

.hclAccordionButton {
  border: 0;
  text-align: left;
  padding: 12px;
  background-color: transparent;
  width: 100%;
  cursor: pointer;
}

.hclAccordionButton:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclAccordionButton:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hclAccordionLabel {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.hclAccordionContent {
  border-top: 1px solid rgb(102.6, 136.8, 114);
  background-color: #fff;
}

.hclAccordionTitle {
  color: #013a14;
  margin-right: 8px;
}

@media (min-width: 670px) {
  .hclAccordionTitle {
    font-size: 18px;
  }
}
.hclAccordionIcon {
  color: #161616;
  height: 12px;
  margin-left: 8px;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.hclAccordionRotated {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.hclAccordionWithGreenBg {
  background-color: #e4e8da;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclAlert {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #b9baba;
  overflow: hidden;
  overflow: hidden;
  border: 1px solid #4ba3b2;
  border-left-width: 12px;
  font-size: 16px;
}

.hclAlertInner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.hclAlertSuccess {
  border-color: #007e47;
}

.hclAlertWarning {
  border-color: #f4864e;
}

.hclAlertDanger {
  border-color: #ea6161;
}

.hclAlertIcon {
  width: 24px;
  height: 24px;
  color: #4ba3b2;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: start;
  -ms-flex-item-align: start;
  align-self: start;
  margin-right: 8px;
}

@media (min-width: 670px) {
  .hclAlertIcon {
    margin-right: 16px;
  }
}
.hclAlertSuccess .hclAlertIcon {
  color: #007e47;
}

.hclAlertWarning .hclAlertIcon {
  color: #f4864e;
}

.hclAlertDanger .hclAlertIcon {
  color: #ea6161;
}

.hclAlertBody {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclAlertLabel {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 5px;
  padding: 8px 12px;
  display: inline-block;
  background: rgb(189.6, 214.8, 235.8);
}

.hclAlertLabelWarning {
  background: #f9e19b;
}

.hclAlertLabelDanger {
  background: #e7b3ad;
}

.hclAlertLabelSuccess {
  background: rgb(153, 203.4, 181.4);
}

.hclAlertLabelFullWidth {
  width: 100%;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclButton {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  -webkit-appearance: none;
  appearance: none;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  line-height: 1;
  transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
}

.hclButton:disabled {
  cursor: not-allowed;
  color: #b9baba;
}

.hclButton:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclButtonPrimary {
  border: 1px solid #007e47;
  background-color: #007e47;
}

.hclButtonPrimary, .hclButtonPrimary:not(:disabled):hover {
  color: #fff;
  text-decoration: none;
}

@media (hover: hover) {
  .hclButtonPrimary:not(:disabled):hover {
    border: 1px solid rgb(51, 151.8, 107.8);
    background-color: rgb(51, 151.8, 107.8);
  }
}
.hclButtonPrimary:not(:disabled):active {
  border: 1px solid rgb(0, 100.8, 56.8);
  background-color: rgb(0, 100.8, 56.8);
}

.hclButtonSecondary {
  border: 1px solid #b9baba;
  background-color: #fff;
  color: #013a14;
}

.hclButtonSecondary, .hclButtonSecondary:not(:disabled):hover {
  text-decoration: none;
}

@media (hover: hover) {
  .hclButtonSecondary:not(:disabled):hover {
    background-color: #e4e8da;
    color: #161616;
  }
}
.hclButtonSecondary:not(:disabled):active {
  border: 1px solid rgb(182.4, 185.6, 174.4);
  background-color: rgb(182.4, 185.6, 174.4);
  color: #161616;
}

.hclButtonDestructive {
  border: 1px solid rgb(187.2, 77.6, 77.6);
  background-color: rgb(187.2, 77.6, 77.6);
  color: #fff;
}

.hclButtonDestructive, .hclButtonDestructive:not(:disabled):hover {
  text-decoration: none;
}

@media (hover: hover) {
  .hclButtonDestructive:not(:disabled):hover {
    border: 1px solid #ea6161;
    background-color: #ea6161;
  }
}
.hclButtonDestructive:not(:disabled):active {
  border: 1px solid rgb(140.4, 58.2, 58.2);
  background-color: rgb(140.4, 58.2, 58.2);
}

.hclButtonFullWidth {
  width: 100%;
}

@media (min-width: 550px) {
  .hclButtonFullWidthSmOn {
    width: 100%;
  }
}
@media (min-width: 550px) {
  .hclButtonFullWidthSmOff {
    width: initial;
  }
}
@media (min-width: 670px) {
  .hclButtonFullWidthMdOn {
    width: 100%;
  }
}
@media (min-width: 670px) {
  .hclButtonFullWidthMdOff {
    width: initial;
  }
}
@media (min-width: 990px) {
  .hclButtonFullWidthLgOn {
    width: 100%;
  }
}
@media (min-width: 990px) {
  .hclButtonFullWidthLgOff {
    width: initial;
  }
}
.hclButtonSmall {
  padding: 8px;
}

.hclButtonPrimaryLegacy {
  font-weight: 400;
  border: 1px solid #1493bc;
  background-color: #1493bc;
  color: #fff;
  box-shadow: none;
}

@media (hover: hover) {
  .hclButtonPrimaryLegacy:not(:disabled):hover {
    border: 1px solid #0e798f;
    background-color: #0e798f;
  }
}
.hclButtonSecondaryLegacy {
  font-weight: 400;
  border: 1px solid #ddd;
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff, #f4f4f4);
  color: #333;
  box-shadow: none;
}

@media (hover: hover) {
  .hclButtonSecondaryLegacy:not(:disabled):hover {
    background-color: #e4e8da;
    color: #161616;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclButton {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  -webkit-appearance: none;
  appearance: none;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  line-height: 1;
  transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
}

.hclButton:disabled {
  cursor: not-allowed;
  color: #b9baba;
}

.hclButton:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclButtonPrimary {
  border: 1px solid #007e47;
  background-color: #007e47;
}

.hclButtonPrimary, .hclButtonPrimary:not(:disabled):hover {
  color: #fff;
  text-decoration: none;
}

@media (hover: hover) {
  .hclButtonPrimary:not(:disabled):hover {
    border: 1px solid rgb(51, 151.8, 107.8);
    background-color: rgb(51, 151.8, 107.8);
  }
}
.hclButtonPrimary:not(:disabled):active {
  border: 1px solid rgb(0, 100.8, 56.8);
  background-color: rgb(0, 100.8, 56.8);
}

.hclButtonSecondary {
  border: 1px solid #b9baba;
  background-color: #fff;
  color: #013a14;
}

.hclButtonSecondary, .hclButtonSecondary:not(:disabled):hover {
  text-decoration: none;
}

@media (hover: hover) {
  .hclButtonSecondary:not(:disabled):hover {
    background-color: #e4e8da;
    color: #161616;
  }
}
.hclButtonSecondary:not(:disabled):active {
  border: 1px solid rgb(182.4, 185.6, 174.4);
  background-color: rgb(182.4, 185.6, 174.4);
  color: #161616;
}

.hclButtonDestructive {
  border: 1px solid rgb(187.2, 77.6, 77.6);
  background-color: rgb(187.2, 77.6, 77.6);
  color: #fff;
}

.hclButtonDestructive, .hclButtonDestructive:not(:disabled):hover {
  text-decoration: none;
}

@media (hover: hover) {
  .hclButtonDestructive:not(:disabled):hover {
    border: 1px solid #ea6161;
    background-color: #ea6161;
  }
}
.hclButtonDestructive:not(:disabled):active {
  border: 1px solid rgb(140.4, 58.2, 58.2);
  background-color: rgb(140.4, 58.2, 58.2);
}

.hclButtonFullWidth {
  width: 100%;
}

@media (min-width: 550px) {
  .hclButtonFullWidthSmOn {
    width: 100%;
  }
}
@media (min-width: 550px) {
  .hclButtonFullWidthSmOff {
    width: initial;
  }
}
@media (min-width: 670px) {
  .hclButtonFullWidthMdOn {
    width: 100%;
  }
}
@media (min-width: 670px) {
  .hclButtonFullWidthMdOff {
    width: initial;
  }
}
@media (min-width: 990px) {
  .hclButtonFullWidthLgOn {
    width: 100%;
  }
}
@media (min-width: 990px) {
  .hclButtonFullWidthLgOff {
    width: initial;
  }
}
.hclButtonSmall {
  padding: 8px;
}

.hclButtonPrimaryLegacy {
  font-weight: 400;
  border: 1px solid #1493bc;
  background-color: #1493bc;
  color: #fff;
  box-shadow: none;
}

@media (hover: hover) {
  .hclButtonPrimaryLegacy:not(:disabled):hover {
    border: 1px solid #0e798f;
    background-color: #0e798f;
  }
}
.hclButtonSecondaryLegacy {
  font-weight: 400;
  border: 1px solid #ddd;
  background-color: #fff;
  background-image: linear-gradient(180deg, #fff, #f4f4f4);
  color: #333;
  box-shadow: none;
}

@media (hover: hover) {
  .hclButtonSecondaryLegacy:not(:disabled):hover {
    background-color: #e4e8da;
    color: #161616;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclContent {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  padding: 8px;
}

@media (min-width: 670px) {
  .hclContent {
    padding: 16px;
  }
}
.hclImageContainer {
  position: relative;
}

.hclImage {
  width: 100%;
  position: relative;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.hclImageFade {
  opacity: 0.5;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclImageOverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  width: 100%;
}

.hclImageOverlayContainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 8px;
}

.hclImageOverlayContainer:last-child {
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclTruncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclDescriptionContainer {
  display: block;
}

.hclDescriptionContainerTruncated {
  --numberOfLines: 1;
  overflow: hidden;
  display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
  height: calc(1.5 * var(--numberOfLines) * 1em);
  -webkit-line-clamp: var(--numberOfLines);
  line-clamp: var(--numberOfLines);
  -webkit-box-orient: vertical;
}

.hclBody {
  -webkit-flex: 1 0;
  -ms-flex: 1 0;
  flex: 1 0;
}

.hclPaginationContainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclSpacer {
  display: block;
  height: 8px;
}

.hclSpacerSize1 {
  height: 8px;
}

.hclSpacerSize2 {
  height: 16px;
}

.hclSpacerSize3 {
  height: 24px;
}

.hclSpacerSize4 {
  height: 32px;
}

.hclSpacerSize5 {
  height: 40px;
}

.hclSpacerSize6 {
  height: 48px;
}

@media (min-width: 550px) {
  .hclSpacerSmSize1 {
    height: 8px;
  }
  .hclSpacerSmSize2 {
    height: 16px;
  }
  .hclSpacerSmSize3 {
    height: 24px;
  }
  .hclSpacerSmSize4 {
    height: 32px;
  }
  .hclSpacerSmSize5 {
    height: 40px;
  }
  .hclSpacerSmSize6 {
    height: 48px;
  }
}
@media (min-width: 670px) {
  .hclSpacerMdSize1 {
    height: 8px;
  }
  .hclSpacerMdSize2 {
    height: 16px;
  }
  .hclSpacerMdSize3 {
    height: 24px;
  }
  .hclSpacerMdSize4 {
    height: 32px;
  }
  .hclSpacerMdSize5 {
    height: 40px;
  }
  .hclSpacerMdSize6 {
    height: 48px;
  }
}
@media (min-width: 990px) {
  .hclSpacerLgSize1 {
    height: 8px;
  }
  .hclSpacerLgSize2 {
    height: 16px;
  }
  .hclSpacerLgSize3 {
    height: 24px;
  }
  .hclSpacerLgSize4 {
    height: 32px;
  }
  .hclSpacerLgSize5 {
    height: 40px;
  }
  .hclSpacerLgSize6 {
    height: 48px;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclScreenReaderOnly {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclIndicators {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 16px;
}

.hclIndicatorDot {
  position: relative;
  display: block;
  cursor: pointer;
  border: 0;
  border-radius: 100%;
  height: 10px;
  width: 10px;
  padding: 0;
  background-color: #c2d0bd;
}

.hclIndicatorDot::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  height: 20px;
  width: 20px;
}

.hclIndicatorDotActive {
  background-color: #007e47;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclCarouselArrow {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50px;
  height: 100%;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  background-color: transparent;
  z-index: 2;
}

@media (min-width: 670px) {
  .hclCarouselArrow {
    width: 70px;
  }
}
.hclCarouselArrow:hover {
  cursor: pointer;
}

.hclCarouselArrowLeft {
  left: -16px;
}

.hclCarouselArrowLeftMultiple {
  left: 4px;
}

.hclCarouselArrowRight {
  right: -16px;
}

.hclCarouselArrowRightMultiple {
  right: 4px;
}

.hclCarouselArrowIcon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 48px;
  width: 48px;
  color: #fff;
  background-color: rgba(103, 103, 103, 0.5);
  border: 0;
  border-radius: 50%;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 8px;
  position: absolute;
}

.hclCarouselArrowIconMultiple {
  background-color: rgba(22, 22, 22, 0.6);
}

.hclCarouselArrowIconLeft {
  left: 0;
}

.hclCarouselArrowIconRight {
  right: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclCarousel {
  overflow: hidden;
  width: 100%;
}

.hclInnerWrapper {
  position: relative;
}

.hclInnerWrapperShowArrows {
  margin: 0 16px;
}

.hclInnerWrapperShowArrowsMultiple {
  margin: 0;
}

.hclInner {
  gap: 8px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  -webkit-scroll-snap-type: x mandatory;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style-type: none;
  padding-left: 0;
  padding-right: 10%;
}

@media (min-width: 670px) {
  .hclInner {
    padding-right: 5%;
  }
}
.hclInnerShowOneItem {
  margin: 0;
  padding-right: 0;
}

.hclInnerMultiple {
  margin-bottom: 0;
  padding-bottom: 16px;
}

@media (min-width: 670px) {
  .hclInnerMultiple {
    padding-right: 10%;
  }
}
.hcl-inner::-webkit-scrollbar {
  display: none;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclCarouselItem {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: center;
}

.hclCarouselItemMultiple {
  width: 80%;
}

@media (min-width: 670px) {
  .hclCarouselItemMultiple {
    margin-right: 8px;
    width: 50%;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclContentArea {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #b9baba;
  overflow: hidden;
}

.hclContentAreaHighlighted {
  background: #e4e8da;
  border: 0;
}

.hclContentAreaOnMapOrImage {
  background: #fff;
  border: 0;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclDivider {
  margin: 0;
  border: 0;
  height: 1px;
  background-color: #b9baba;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclHeading {
  font-family: "Hemnet Bonad", Georgia, "Times New Roman", Times, serif;
  color: #013a14;
  line-height: 1.2;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.hcl-text-container > .hclHeading {
  margin-bottom: 8px;
}

@media (min-width: 670px) {
  .hcl-text-container > .hclHeading {
    margin-bottom: 12px;
  }
}
.hclHeadingWithMargin {
  margin-bottom: 8px;
}

@media (min-width: 670px) {
  .hclHeadingWithMargin {
    margin-bottom: 12px;
  }
}
.hclHeadingOnDarkBg {
  color: #fff;
}

.hclHeadingOnDarkBgAlt {
  color: #e4e8da;
}

.hclHeadingSize1 {
  font-size: 24px;
}

@media (min-width: 670px) {
  .hclHeadingSize1 {
    font-size: 36px;
  }
}
.hclHeadingSize2 {
  font-size: 22px;
}

@media (min-width: 670px) {
  .hclHeadingSize2 {
    font-size: 28px;
  }
}
.hclHeadingSize3 {
  font-size: 20px;
}

@media (min-width: 670px) {
  .hclHeadingSize3 {
    font-size: 24px;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclIconButton {
  border: 0;
  background: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 100%;
  transition: background-color 125ms ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

.hclIconButton:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.08);
}

.hclIconButton:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclIconButton:active {
  background-color: rgba(0, 0, 0, 0.15);
}

.hclIconButtonOnDarkBg:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.hclIconButtonOnDarkBg:active {
  background-color: rgba(255, 255, 255, 0.25);
}

.hclIconButtonOnDarkBg .hclIconButtonIcon {
  color: #fff;
}

.hclIconButtonIcon {
  width: 50%;
  height: 50%;
  color: #013a14;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclLabel {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid transparent;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 550px) {
  .hclLabel {
    font-size: 16px;
  }
}
/* Product labels */
.hclLabelProduct {
  font-weight: 500;
  background-color: #e5f3ed;
  color: #007e47;
}

.hclLabelProduct.hclLabelActive {
  background-color: #007e47;
  color: #e5f3ed;
}

/* State labels */
.hclLabelState {
  background-color: rgb(252.3, 252.7, 251.3);
  color: #161616;
}

.hclLabelState.hclLabelOnWhiteBackground {
  border-color: #b9baba;
}

.hclLabelToplisting {
  background-color: #f9e19b;
  color: #013a14;
}

.hclLabelToplisting.hclLabelOnWhiteBackground {
  border-color: transparent;
}

.hclLabelOngoingBidding,
.hclLabelOngoingVerifiedBidding {
  color: #013a14;
}

.hclLabelCurrentLiveStreamShowing {
  background-color: #ea6161;
  color: #fff;
}

.hclLabelCurrentLiveStreamShowing.hclLabelOnWhiteBackground {
  border-color: transparent;
}

/* Type labels */
.hclLabelType {
  background-color: rgb(239.8, 239.8, 239.8);
}

.hclLabelNewConstructionProject {
  background-color: #fff;
  border-color: #f4864e;
}

.hclLabelSoldAt {
  background-color: #67458c;
  color: #fff;
  line-height: 1.5;
  border: transparent;
}

/* Feature labels */
.hclLabelFeature {
  background-color: #fff;
  border-color: #b9baba;
}

.hclLabelIcon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: text-bottom;
  margin-right: 4px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclLabelsList {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hclLabelsListRowDirection {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 30px;
  overflow: hidden;
}

.hclLabelsListLabelItem {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  height: 30px;
  margin-bottom: 4px;
}

.hclLabelsListLabelItem:last-child {
  margin-bottom: 0;
}

.hclLabelsListRowDirection .hclLabelsListLabelItem {
  margin-right: 4px;
  margin-bottom: 0;
}

.hclLabelsListRowDirection .hclLabelsListLabelItem:last-child {
  margin-right: 0;
}

.hclLabelsListColumnDirection .hclLabelsListLabelItem {
  width: 100%;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclLink {
  font-weight: 500;
  color: #013a14;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.hclLink:visited {
  color: #67458c;
}

.hclLink[href^="#"]:visited {
  color: #013a14;
}

.hclLink:hover {
  color: #161616;
}

.hclLink:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclLink:active {
  color: #67458c;
}

.hclLinkOnDarkBg {
  color: #fff;
}

.hclLinkOnDarkBg:visited {
  color: #a7b0cb;
}

.hclLinkOnDarkBg:hover {
  color: #e4e8da;
}

.hclLinkOnDarkBg:active {
  color: #a7b0cb;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclLinkButton {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-align: left;
  font-weight: 500;
  color: #013a14;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.hclLinkButton:visited {
  color: #67458c;
}

.hclLinkButton[href^="#"]:visited {
  color: #013a14;
}

.hclLinkButton:hover {
  color: #161616;
}

.hclLinkButton:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclLinkButton:active {
  color: #67458c;
}

.hclLinkButtonOnDarkBg {
  color: #fff;
}

.hclLinkButtonOnDarkBg:visited {
  color: #a7b0cb;
}

.hclLinkButtonOnDarkBg:hover {
  color: #e4e8da;
}

.hclLinkButtonOnDarkBg:active {
  color: #a7b0cb;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
@-webkit-keyframes rotating-logo {
  0% {
    -webkit-transform: perspective(144px) rotateX(0deg) rotateY(360deg);
    transform: perspective(144px) rotateX(0deg) rotateY(360deg);
  }
  50% {
    -webkit-transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
    transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
  }
  75% {
    -webkit-transform: perspective(144px) rotateX(0deg) rotateY(180deg);
    transform: perspective(144px) rotateX(0deg) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
    transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
  }
}
@keyframes rotating-logo {
  0% {
    -webkit-transform: perspective(144px) rotateX(0deg) rotateY(360deg);
    transform: perspective(144px) rotateX(0deg) rotateY(360deg);
  }
  50% {
    -webkit-transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
    transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
  }
  75% {
    -webkit-transform: perspective(144px) rotateX(0deg) rotateY(180deg);
    transform: perspective(144px) rotateX(0deg) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
    transform: perspective(144px) rotateX(0deg) rotateY(-360deg);
  }
}
.hclLogoSpinner {
  padding: 16px 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media (min-width: 670px) {
  .hclLogoSpinner {
    padding: 32px 0;
  }
}
.hclLogoSpinnerText {
  color: #888;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  margin-top: 16px;
  margin-bottom: 0;
}

.hclLogoSpinnerLogo {
  height: 48px;
  background-color: transparent;
  -webkit-animation: rotating-logo 6s infinite ease-in-out;
  animation: rotating-logo 6s infinite ease-in-out;
  color: #0bb70b;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclStack {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -4px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.hclStackColumn {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: initial;
  -ms-flex-align: initial;
  align-items: initial;
}

.hclStackAlignRight {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.hclStackAlignRight.hclStackColumn {
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-justify-content: initial;
  -ms-flex-pack: initial;
  justify-content: initial;
}

.hclStackItem {
  padding: 4px;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclModalOverlay {
  position: fixed;
  background-color: rgba(51, 51, 51, 0.8);
  height: 100%;
  left: 0;
  top: 0;
  overflow-y: auto;
  width: 100%;
  z-index: 2010;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hclModalOverlayAfterOpen {
  opacity: 1;
}

.hclModalOverlayBeforeClose {
  opacity: 0;
}

.hclModalOverlayFullscreen {
  background-color: rgba(255, 255, 255, 0.8);
}

.hclModal {
  position: relative;
  max-height: 90%;
  max-width: 560px;
  width: 100%;
  z-index: 2020;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  transition: -webkit-transform 100ms;
  transition: transform 100ms;
  transition: transform 100ms, -webkit-transform 100ms;
  height: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  outline: 0;
  border-radius: 8px;
  margin: 16px;
  overflow: auto;
}

@media (min-width: 560px) {
  .hclModal {
    margin: 24px;
  }
}
.hclModal .hclModalContainer > .hclModalPaddedContainer {
  padding: 16px;
  padding-top: 0;
}

@media (min-width: 670px) {
  .hclModal .hclModalContainer > .hclModalPaddedContainer {
    padding: 24px;
    padding-top: 0;
  }
}
.hclModalWithHeader {
  overflow: hidden;
}

.hclModalLargeSize {
  max-width: 760px;
}

.hclModalAfterOpen {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  height: auto;
}

.hclModalBeforeClose {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.hclModalFullscreen {
  border: 0;
  height: 100%;
  max-height: 100vh;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
}

.hclModalFullheight {
  height: 100%;
  max-width: 760px;
}

.hclModalPromotional {
  border: 0;
  background-color: #013a14;
}

.hclModalPromotional .hclModalCloseButton {
  color: #fff;
}

.hclModalCommunication {
  border: 0;
  background-color: #e4e8da;
}

.hclModalHeader {
  top: 0;
  width: 100%;
  padding: 16px;
}

@media (min-width: 670px) {
  .hclModalHeader {
    padding: 24px;
  }
}
.hclModalHeaderNoSticky {
  padding: 8px;
  padding-bottom: 0;
}

.hclModalHeaderNoSticky .hclModalCloseButton {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-flex: auto;
  -ms-flex: auto;
  flex: auto;
}

.hclModalHeaderSticky {
  background-color: inherit;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.hclModalHeaderSticky .hclModalCloseButton {
  position: absolute;
  right: 4px;
  top: 4px;
}

@media (min-width: 670px) {
  .hclModalHeaderSticky .hclModalCloseButton {
    right: 16px;
    top: 16px;
  }
}
.hclModalHeaderSticky h2 {
  padding-right: 64px;
  margin-bottom: 0;
}

.hclModalHeaderSticky.hclModalHeaderActive {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 0 2px 0 rgba(0, 0, 0, 0.12);
}

/* customised scroolbar */
.hclModal .hclModalContainerSticky {
  overflow-y: auto;
  max-height: 460px;
}

@media (min-width: 670px) {
  .hclModal .hclModalContainerSticky {
    max-height: 600px;
  }
}
.hclModal .hclModalContainerSticky::-webkit-scrollbar {
  width: 8px;
}

.hclModal .hclModalContainerSticky::-webkit-scrollbar-thumb {
  /* Foreground */
  background: rgba(103, 103, 103, 0.4);
  border: 0;
  border-radius: 4px;
}

.hclModal .hclModalContainerSticky::-webkit-scrollbar-track {
  /* Background */
  background: inherit;
  border-radius: 4px;
}

.nestBody {
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0.3px;
  font-style: normal;
  color: var(--color-text-body-primary);
  margin: 0;
}

*:disabled .nestBody {
  color: var(--color-text-disabled);
}

.nestBodyLarge {
  font-size: 20px;
  line-height: 28px;
}

.nestBodyMedium {
  font-size: 16px;
  line-height: 24px;
}

.nestBodySmall {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
}

.nestBodyStrong {
  font-weight: 600;
}

.nestBodySecondaryColor {
  color: var(--color-text-body-secondary);
}

.nestBodyTertiaryColor {
  color: var(--color-text-body-tertiary);
}

.nestBodyDisabled {
  color: var(--color-text-disabled);
}

.nestSpinner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 20px;
  width: 20px;
}

.nestSpinner .nestSpinnerItem {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -webkit-animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border: 2px solid;
  border-color: var(--color-icon-action-primary) transparent transparent;
}

.nestSpinner .nestSecondary {
  border-color: var(--color-icon-action-secondary) transparent transparent;
}

.nestSpinner .nestSpinnerItem:nth-child(1) {
  -webkit-animation-delay: -0.45s;
  animation-delay: -0.45s;
}

.nestSpinner .nestSpinnerItem:nth-child(2) {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.nestSpinner .nestSpinnerItem:nth-child(3) {
  -webkit-animation-delay: -0.15s;
  animation-delay: -0.15s;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.nestHeading {
  color: var(--color-text-heading-primary);
  font-family: "Hemnet Bonad";
  font-size: 41px;
  line-height: 52px;
  letter-spacing: -0.3px;
  font-style: normal;
  margin: 0;
}

.nestHeadingSecondaryColor {
  color: var(--color-text-heading-secondary);
}

.nestHeadingTertiaryColor {
  color: var(--color-text-heading-tertiary);
}

.nestHeadingWithMargin {
  margin-bottom: calc(var(--nest-base-unit) * 2);
}

.nestHeadingExtraLarge {
  font-size: 41px;
  line-height: 52px;
  letter-spacing: -0.3px;
}

@media (min-width: 670px) {
  .nestHeadingExtraLarge {
    font-size: 52px;
    line-height: 64px;
    letter-spacing: -0.4px;
  }
}
.nestHeadingLarge {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.25px;
}

@media (min-width: 670px) {
  .nestHeadingLarge {
    font-size: 41px;
    line-height: 52px;
    letter-spacing: -0.3px;
  }
}
.nestHeadingMedium {
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.2px;
}

@media (min-width: 670px) {
  .nestHeadingMedium {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.25px;
  }
}
.nestHeadingSmall {
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.2px;
}

.nestIconButton {
  padding: 9px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: var(--nest-base-unit);
  text-align: center;
  cursor: pointer;
  outline: unset;
}

.nestIconButtonLoadingContainer {
  position: absolute;
}

.nestIconButtonIcon {
  height: 24px;
  width: 24px;
}

.nestIconButtonSmall {
  padding: 7px;
}

.nestIconButtonSmall .nestIconButtonIcon {
  height: 20px;
  width: 20px;
}

.nestIconButtonHiddenText {
  visibility: hidden;
}

.nestIconButtonSecondary {
  border: 1px solid var(--color-stroke-action-secondary);
  background: var(--color-background-action-secondary-enabled);
  color: var(--color-icon-action-secondary);
}

.nestIconButtonSecondary:hover, .nestIconButtonSecondary:focus-visible:hover {
  border: 1px solid var(--color-stroke-action-secondary);
  background: var(--color-background-action-secondary-hover);
}

.nestIconButtonSecondary:active, .nestIconButtonSecondary:focus-visible:active {
  border: 1px solid var(--color-stroke-action-secondary);
  background: var(--color-background-action-secondary-pressed);
}

.nestIconButtonSecondary:focus-visible {
  border: 1px solid var(--color-stroke-action-secondary);
  background: var(--color-background-action-secondary-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
}

.nestIconButtonSecondary.nestIconButtonElevated {
  border: 1px solid var(--color-stroke-transparent);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
}

.nestIconButtonSecondary.nestIconButtonElevated:focus-visible {
  box-shadow: 0 0 0 4px var(--color-stroke-focus), 0 0 4px 0 rgba(0, 0, 0, 0.12), 0 4px 6px 0 rgba(0, 0, 0, 0.08), 0 6px 10px 0 rgba(0, 0, 0, 0.06), 0 10px 18px 0 rgba(0, 0, 0, 0.04);
}

.nestIconButtonTertiary {
  border: 1px solid var(--color-stroke-transparent);
  background: var(--color-background-transparent);
  color: var(--color-icon-action-secondary);
}

.nestIconButtonTertiary:hover, .nestIconButtonTertiary:focus-visible:hover {
  border: 1px solid var(--color-stroke-transparent);
  background: var(--color-background-action-tertiary-hover);
}

.nestIconButtonTertiary:active, .nestIconButtonTertiary:focus-visible:active {
  border: 1px solid var(--color-stroke-transparent);
  background: var(--color-background-action-tertiary-pressed);
}

.nestIconButtonTertiary:focus-visible {
  border: 1px solid var(--color-stroke-transparent);
  background: var(--color-background-transparent);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
}

.nestIconButtonDestructive {
  border: 1px solid var(--color-stroke-action-destructive-enabled);
  background: var(--color-background-action-destructive-enabled);
  color: var(--color-icon-action-primary);
}

.nestIconButtonDestructive:hover, .nestIconButtonDestructive:focus-visible:hover {
  border: 1px solid var(--color-stroke-action-destructive-hover);
  background: var(--color-background-action-destructive-hover);
}

.nestIconButtonDestructive:active, .nestIconButtonDestructive:focus-visible:active {
  border: 1px solid var(--color-stroke-action-destructive-pressed);
  background: var(--color-background-action-destructive-pressed);
}

.nestIconButtonDestructive:focus-visible {
  border: 1px solid var(--color-stroke-action-destructive-focus);
  background: var(--color-background-action-destructive-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
}

.nestIconButtonDestructive.nestIconButtonElevated {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 8px 16px 0 rgba(0, 0, 0, 0.04);
}

.nestIconButtonDestructive.nestIconButtonElevated:focus-visible {
  box-shadow: 0 0 0 4px var(--color-stroke-focus), 0 0 4px 0 rgba(0, 0, 0, 0.12), 0 4px 6px 0 rgba(0, 0, 0, 0.08), 0 6px 10px 0 rgba(0, 0, 0, 0.06), 0 10px 18px 0 rgba(0, 0, 0, 0.04);
}

.nestTextAreaContainer {
  line-height: 0;
}

.nestTextArea {
  outline: none;
  resize: vertical;
  padding: 9px 12px;
  gap: var(--nest-base-unit);
  border-radius: 4px;
  border: 1px solid var(--color-stroke-form-enabled);
  background: var(--color-background-form-enabled);
  color: var(--color-text-body-primary);
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.3px;
  max-width: 100%;
  width: 100%;
}

.nestTextArea:focus {
  outline: none;
  background: var(--color-background-form-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
  border-color: var(--color-stroke-form-focus, #013A14);
}

.nestTextArea:hover {
  background: var(--color-background-form-hover);
}

.nestTextArea::-webkit-input-placeholder {
  color: var(--color-text-body-secondary);
}

.nestTextArea:-ms-input-placeholder {
  color: var(--color-text-body-secondary);
}

.nestTextArea::-ms-input-placeholder {
  color: var(--color-text-body-secondary);
}

.nestTextArea::placeholder {
  color: var(--color-text-body-secondary);
}

.nestResizeHorizontal {
  resize: horizontal;
}

.nestResizeVertical {
  resize: vertical;
}

.nestResizeBoth {
  resize: both;
}

.nestResizeNone {
  resize: none;
}

.nestLabelWrapper {
  cursor: pointer;
  color: var(--color-text-label-primary);
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  padding-bottom: calc(var(--nest-base-unit) * 0.5);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.nestCounterThreshold {
  color: var(--color-text-label-secondary);
  font-weight: 400;
}

.nestDisabled {
  cursor: not-allowed;
}

.nestDisabled .nestTextArea {
  border-color: var(--color-stroke-disabled);
  color: var(--color-text-disabled);
  background: var(--color-background-form-enabled);
  cursor: not-allowed;
}

.nestDisabled .nestTextArea::-webkit-input-placeholder {
  color: var(--color-text-disabled);
}

.nestDisabled .nestTextArea:-ms-input-placeholder {
  color: var(--color-text-disabled);
}

.nestDisabled .nestTextArea::-ms-input-placeholder {
  color: var(--color-text-disabled);
}

.nestDisabled .nestTextArea::placeholder {
  color: var(--color-text-disabled);
}

.nestDisabled .nestLabel {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.nestDisabled .nestCounterThreshold {
  color: var(--color-text-disabled);
}

.nestError {
  border-color: var(--color-stroke-danger);
}

.nestError .nestLabel {
  color: var(--color-text-danger);
}

.nestError .nestTextArea {
  border-color: var(--color-stroke-danger);
}

.nestError .nestTextArea:focus {
  background: var(--color-background-form-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-dangerfocus);
}

.nestError .nestTextArea:hover {
  background: var(--color-background-form-hover);
}

.nestReadOnly {
  cursor: not-allowed;
}

.nestReadOnly .nestTextArea {
  border-color: var(--color-background-disabled);
  background: var(--color-background-disabled);
  cursor: not-allowed;
}

.nestReadOnly .nestLabel {
  cursor: not-allowed;
}

.nestWrapper {
  position: relative;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  gap: var(--nest-base-unit);
  width: 100%;
}

.nestTextInput {
  outline: none;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 9px 12px;
  text-overflow: ellipsis;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: var(--nest-base-unit);
  border-radius: 4px;
  border: 1px solid var(--color-stroke-form-enabled);
  background: var(--color-background-form-enabled);
  color: var(--color-text-body-primary);
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.3px;
  width: 100%;
}

.nestTextInput:focus {
  outline: none;
  background: var(--color-background-form-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
  border-color: var(--color-stroke-form-focus, #013A14);
}

.nestTextInput:hover {
  background: var(--color-background-form-hover);
}

.nestTextInput::-webkit-input-placeholder {
  color: var(--color-text-body-secondary);
}

.nestTextInput:-ms-input-placeholder {
  color: var(--color-text-body-secondary);
}

.nestTextInput::-ms-input-placeholder {
  color: var(--color-text-body-secondary);
}

.nestTextInput::placeholder {
  color: var(--color-text-body-secondary);
}

.nestTextInput[type=date] {
  line-height: 24px;
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 16px;
  color: var(--color-text-body-primary);
}

.nestFullWidth {
  width: 100%;
}

.nestLabel {
  cursor: pointer;
  color: inherit;
  display: block;
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  padding-bottom: calc(var(--nest-base-unit) * 0.5);
}

.nestIcon {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 2px;
  color: var(--color-icon-primary);
}

.nestIconSuccess {
  color: var(--color-icon-success);
}

.nestWithIcon {
  padding-right: 35px;
}

.nestWithSuffix {
  padding-right: 70px;
}

.nestSuffix {
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: var(--color-text-body-secondary);
  text-align: right;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  max-width: 50px;
  text-overflow: ellipsis;
}

.nestDisabled {
  cursor: not-allowed;
}

.nestDisabled .nestTextInput {
  border-color: var(--color-stroke-disabled);
  color: var(--color-text-disabled);
  background: var(--color-background-form-enabled);
  cursor: not-allowed;
}

.nestDisabled .nestTextInput::-webkit-input-placeholder {
  color: var(--color-text-disabled);
}

.nestDisabled .nestTextInput:-ms-input-placeholder {
  color: var(--color-text-disabled);
}

.nestDisabled .nestTextInput::-ms-input-placeholder {
  color: var(--color-text-disabled);
}

.nestDisabled .nestTextInput::placeholder {
  color: var(--color-text-disabled);
}

.nestDisabled .nestLabel {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.nestDisabled .nestIcon {
  color: var(--color-icon-disabled);
}

.nestDisabled .nestSuffix {
  color: var(--color-text-disabled);
}

.nestTextInput[aria-invalid=true] .nestTextInput,
.nestError .nestTextInput {
  border: 1px solid var(--color-stroke-danger);
  background: var(--color-background-form-enabled);
}

.nestTextInput[aria-invalid=true] .nestTextInput:focus,
.nestError .nestTextInput:focus {
  background: var(--color-background-form-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-dangerfocus);
}

.nestTextInput[aria-invalid=true] .nestTextInput:hover,
.nestError .nestTextInput:hover {
  background: var(--color-background-form-hover);
}

.nestTextInput[aria-invalid=true] .nestLabel,
.nestError .nestLabel {
  color: var(--color-text-danger);
}

.nestReadOnly {
  cursor: not-allowed;
}

.nestReadOnly .nestTextInput {
  border-color: var(--color-background-disabled);
  background: var(--color-background-disabled);
  cursor: not-allowed;
}

.nestReadOnly .nestLabel {
  cursor: not-allowed;
}

.nestTitle {
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 29px;
  line-height: 36px;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: lining-nums proportional-nums;
  margin: 0;
  color: var(--color-text-title-primary);
}

.nestTitleWithMargin {
  margin-bottom: var(--nest-base-unit);
}

@media (min-width: 670px) {
  .nestTitleWithMargin {
    margin-bottom: calc(var(--nest-base-unit) * 1.5);
  }
}
.nestTitleLarge {
  font-size: 29px;
  line-height: 36px;
}

.nestTitleMedium {
  font-size: 23px;
  line-height: 28px;
}

.nestTitleSmall {
  font-size: 18px;
  line-height: 24px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclPaginationButtonCurrent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  -webkit-appearance: none;
  appearance: none;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  line-height: 1;
  transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
  cursor: default;
  box-shadow: none;
  color: #013a14;
  background-color: #e4e8da;
  border: 1px solid #007e47;
}

.hclPaginationButtonCurrent:disabled {
  cursor: not-allowed;
  color: #b9baba;
}

.hclPaginationButtonCurrent:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclPagination {
  text-align: center;
}

.hclPaginationNav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media (min-width: 670px) {
  .hclPaginationNav {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}
.hclPaginationItems {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

@media (min-width: 670px) {
  .hclPaginationItems {
    width: auto;
  }
}
.hclPaginationButton {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  -webkit-flex: 1 0 0;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
}

@media (min-width: 670px) {
  .hclPaginationButton {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-order: initial;
    -ms-flex-order: initial;
    order: initial;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclRangeInput {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.hclRangeInputItem {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.hclRangeInputSign {
  -webkit-flex: 0 1 0;
  -ms-flex: 0 1 0px;
  flex: 0 1 0;
  padding: 0 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclSectionHeading {
  font-family: "Hemnet Bonad", Georgia, "Times New Roman", Times, serif;
  color: #013a14;
  line-height: 1.2;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 16px 0;
  color: #013a14;
}

@media (min-width: 670px) {
  .hclSectionHeading {
    font-size: 24px;
  }
}
@media (min-width: 670px) {
  .hclSectionHeading {
    margin: 24px 0;
  }
}
.hclSectionHeadingStrike {
  display: block;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  border-top: 2px solid #013a14;
}

.hclSectionHeadingText {
  display: inline-block;
  position: relative;
  margin: 0 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclTextContainer > * {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

.hclTextContainer > *:last-child {
  margin-bottom: 0 !important;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hclTextInput {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px;
  color: #161616;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #b9baba;
  border-radius: 3px;
  background-color: #fff;
}

.hclTextInput:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.hclTextInputFullWidth {
  width: 100%;
}

.hclTextInput[aria-invalid=true],
.hclTextInputError {
  border-color: rgb(187.2, 77.6, 77.6);
}

.hclTextInputDisabled {
  border-color: #b9baba;
  color: #b9baba;
  cursor: not-allowed;
}

.hclTextInputDisabled::-webkit-input-placeholder {
  color: #b9baba;
}

.hclTextInputDisabled:-ms-input-placeholder {
  color: #b9baba;
}

.hclTextInputDisabled::-ms-input-placeholder {
  color: #b9baba;
}

.hclTextInputDisabled::placeholder {
  color: #b9baba;
}

.hclFormLabel {
  cursor: pointer;
  color: #161616;
}

.hclFormLabelError {
  color: rgb(187.2, 77.6, 77.6);
}

.hclFormLabelDisabled {
  color: #b9baba;
  cursor: not-allowed;
}

.hclFormLabelText {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  display: block;
  padding-bottom: 8px;
  color: inherit;
}

.hclFormLabelHidden .hclFormLabelText {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added line */
  border: 0;
}

.nestSelectAndLabelContainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.nestSelect {
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  -webkit-appearance: none;
  appearance: none;
  color: var(--color-text-body-primary);
  width: inherit;
  border: 1px solid;
  border-color: var(--color-stroke-form-enabled, #858585);
  border-radius: 4px;
  background-color: var(--color-background-container-background);
  padding: 9px 12px;
  margin: 0;
  cursor: pointer;
}

.nestSelect:focus {
  outline: none;
  background: var(--color-background-form-enabled);
  box-shadow: 0 0 0 4px var(--color-stroke-focus);
  border-color: var(--color-stroke-form-focus, #013A14);
}

.nestSelect:hover {
  background: var(--color-background-form-hover, #E8E8E8);
}

.nestSelectDisabled,
.nestSelect:disabled {
  cursor: not-allowed;
  color: var(--color-text-disabled);
  border-color: var(--color-stroke-disabled);
}

.nestSelectDisabled:hover,
.nestSelect:disabled:hover {
  background: none;
}

.nestSelectIcon {
  color: var(--color-icon-secondary);
  position: absolute;
  pointer-events: none;
  top: 8px;
  bottom: 0;
  right: 9px;
  width: 24px;
  height: 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.nestSelectIconDisabled,
fieldset:disabled .nestSelectIcon {
  color: var(--color-icon-disabled);
}

.nestSelectAndIconContainer {
  position: relative;
  width: inherit;
}

.nestSelectError {
  border-color: var(--color-stroke-danger);
}

.nestSelectError:focus {
  box-shadow: 0 0 0 4px var(--color-stroke-dangerfocus);
  border-color: var(--color-stroke-danger);
}

.nestFloatingListItem {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: calc(var(--nest-base-unit) * 0.5);
  border: 1px solid var(--color-stroke-action-neutral);
  background: var(--color-background-form-enabled);
}

.nestFloatingListItem:hover {
  background-color: var(--color-background-form-hover);
}

.nestFloatingListItem:active {
  background-color: var(--color-background-form-pressed);
}

.nestFloatingListItem:focus-visible, .nestFloatingListItem:has(:focus-visible) {
  outline-color: var(--color-stroke-focus);
  border: 1px solid var(--color-stroke-form-focus);
  outline-width: 4px;
  outline-style: solid;
}

.nestFloatingListItem:has([data-state=checked]) {
  background: var(--color-background-selected-enabled);
  box-shadow: 0 0 0 2px var(--color-stroke-selected);
}

.nestFloatingListItem:has([data-state=checked]):hover {
  background-color: var(--color-background-selected-hover);
}

.nestFloatingListItem:has([data-state=checked]):active {
  background-color: var(--color-background-selected-pressed);
}

.nestFloatingListItem.nestFloatingListItemDisabled, .nestFloatingListItem:disabled, .nestFloatingListItem:has([data-state=checked]):has([data-disabled]), .nestFloatingListItem:has([data-state=checked]):has(.nestFloatingListItemDisabled) {
  cursor: not-allowed;
  outline: none;
  /* Ensure all children inherit the styling */
  color: var(--color-text-disabled);
  background-color: var(--color-background-form-enabled);
  box-shadow: none;
}

.nestFloatingListItem.nestFloatingListItemDisabled:hover, .nestFloatingListItem:disabled:hover, .nestFloatingListItem:has([data-state=checked]):has([data-disabled]):hover, .nestFloatingListItem:has([data-state=checked]):has(.nestFloatingListItemDisabled):hover {
  background: none;
}

.nestFloatingListItem.nestFloatingListItemDisabled:active, .nestFloatingListItem:disabled:active, .nestFloatingListItem:has([data-state=checked]):has([data-disabled]):active, .nestFloatingListItem:has([data-state=checked]):has(.nestFloatingListItemDisabled):active {
  background: none;
}

.nestFloatingListItem.nestFloatingListItemDisabled *, .nestFloatingListItem:disabled *, .nestFloatingListItem:has([data-state=checked]):has([data-disabled]) *, .nestFloatingListItem:has([data-state=checked]):has(.nestFloatingListItemDisabled) * {
  cursor: not-allowed;
  outline: none;
}

.nestFloatingListItem.nestFloatingListItemDisabled *:hover, .nestFloatingListItem:disabled *:hover, .nestFloatingListItem:has([data-state=checked]):has([data-disabled]) *:hover, .nestFloatingListItem:has([data-state=checked]):has(.nestFloatingListItemDisabled) *:hover {
  background: none;
}

.nestFloatingListItem.nestFloatingListItemDisabled *:active, .nestFloatingListItem:disabled *:active, .nestFloatingListItem:has([data-state=checked]):has([data-disabled]) *:active, .nestFloatingListItem:has([data-state=checked]):has(.nestFloatingListItemDisabled) *:active {
  background: none;
}

fieldset:disabled .nestFloatingListItem:has([data-state=checked]), fieldset:disabled .nestFloatingListItem:hover, fieldset:disabled .nestFloatingListItem:active, fieldset:disabled .nestFloatingListItem:focus-visible, fieldset:disabled .nestFloatingListItem:has(:focus-visible) {
  background: none;
  border-color: var(--color-stroke-action-neutral);
  box-shadow: none;
}

.nestFloatingListItemDisabled label * {
  color: var(--color-text-disabled);
}

.nestFloatingListItemContent {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding-right: var(--nest-base-unit);
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

@media (min-width: 670px) {
  .nestFloatingListItemContent {
    padding-right: 0;
    padding-left: 0;
  }
}
.nestFloatingListItemText {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.nestFloatingListItemLeading {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  min-width: 24px;
  padding: 2px;
}

fieldset:disabled .nestFloatingListItemLeading {
  color: var(--color-icon-disabled);
}

.nestFloatingListItemLeadingLarge {
  height: 40px;
  width: 40px;
  min-width: 40px;
}

.nestFloatingListItemTrailing {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: var(--nest-base-unit);
  height: 20px;
}

.nestFloatingListItemCheckboxLabel,
.nestFloatingListItemRadioLabel {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}

.nestFloatingListItemRadioButton {
  all: unset;
}

.nestAccordionRoot {
  width: 100%;
}

.nestAccordionItem {
  position: relative;
}

.nestAccordionItem[data-disabled], .nestAccordionItem:has([data-disabled]) {
  cursor: not-allowed;
  outline: none;
  /* Ensure all children inherit the styling */
  color: var(--color-text-disabled);
}

.nestAccordionItem[data-disabled]:hover, .nestAccordionItem:has([data-disabled]):hover {
  background: none;
}

.nestAccordionItem[data-disabled]:active, .nestAccordionItem:has([data-disabled]):active {
  background: none;
}

.nestAccordionItem[data-disabled] *, .nestAccordionItem:has([data-disabled]) * {
  cursor: not-allowed;
  outline: none;
}

.nestAccordionItem[data-disabled] *:hover, .nestAccordionItem:has([data-disabled]) *:hover {
  background: none;
}

.nestAccordionItem[data-disabled] *:active, .nestAccordionItem:has([data-disabled]) *:active {
  background: none;
}

.nestAccordionItem[data-disabled] *, .nestAccordionItem:has([data-disabled]) * {
  cursor: not-allowed;
  outline: none;
  /* Ensure all children inherit the styling */
  color: var(--color-text-disabled);
}

.nestAccordionItem[data-disabled] *:hover, .nestAccordionItem:has([data-disabled]) *:hover {
  background: none;
}

.nestAccordionItem[data-disabled] *:active, .nestAccordionItem:has([data-disabled]) *:active {
  background: none;
}

.nestAccordionItem[data-disabled] * *, .nestAccordionItem:has([data-disabled]) * * {
  cursor: not-allowed;
  outline: none;
}

.nestAccordionItem[data-disabled] * *:hover, .nestAccordionItem:has([data-disabled]) * *:hover {
  background: none;
}

.nestAccordionItem[data-disabled] * *:active, .nestAccordionItem:has([data-disabled]) * *:active {
  background: none;
}

.nestAccordionItem::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: var(--color-stroke-neutral-default);
  left: 0;
  width: 100%;
  padding-left: 12px;
  margin-left: -12px;
  padding-right: 12px;
  margin-right: -12px;
}

@media (min-width: 320px) {
  .nestAccordionItem::after {
    padding-left: calc(2 * var(--nest-base-unit));
    margin-left: calc(-2 * var(--nest-base-unit));
    padding-right: calc(2 * var(--nest-base-unit));
    margin-right: calc(-2 * var(--nest-base-unit));
  }
}
@media (min-width: 640px) {
  .nestAccordionItem::after {
    padding: 0;
    margin: 0;
  }
}
.nestAccordionHeader {
  all: unset;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-left: 12px;
  margin-left: -12px;
  padding-right: 12px;
  margin-right: -12px;
}

.nestAccordionHeader:hover {
  cursor: pointer;
  background-color: var(--color-background-form-hover);
  border-radius: 0;
}

@media (min-width: 320px) {
  .nestAccordionHeader:hover {
    padding-left: calc(2 * var(--nest-base-unit));
    margin-left: calc(-2 * var(--nest-base-unit));
    padding-right: calc(2 * var(--nest-base-unit));
    margin-right: calc(-2 * var(--nest-base-unit));
  }
}
@media (min-width: 640px) {
  .nestAccordionHeader:hover {
    border-radius: 4px;
    padding-left: var(--nest-base-unit);
    margin-left: calc(-1 * var(--nest-base-unit));
    padding-right: var(--nest-base-unit);
    margin-right: calc(-1 * var(--nest-base-unit));
  }
}
.nestAccordionHeader:active {
  background-color: var(--color-background-form-pressed);
}

.nestAccordionHeader:focus-visible, .nestAccordionHeader:has(:focus-visible) {
  outline-color: var(--color-stroke-focus);
  border-radius: 0;
  outline-width: 4px;
  outline-style: solid;
  position: relative;
  z-index: 1;
}

@media (min-width: 320px) {
  .nestAccordionHeader:focus-visible, .nestAccordionHeader:has(:focus-visible) {
    padding-left: calc(2 * var(--nest-base-unit));
    margin-left: calc(-2 * var(--nest-base-unit));
    padding-right: calc(2 * var(--nest-base-unit));
    margin-right: calc(-2 * var(--nest-base-unit));
  }
}
@media (min-width: 640px) {
  .nestAccordionHeader:focus-visible, .nestAccordionHeader:has(:focus-visible) {
    border-radius: 4px;
    padding-left: calc(var(--nest-base-unit));
    margin-left: calc(-1 * (var(--nest-base-unit)));
    padding-right: calc(var(--nest-base-unit));
    margin-right: calc(-1 * (var(--nest-base-unit)));
  }
}
.nestAccordionHeader[data-disabled], .nestAccordionHeader:has([data-disabled]) {
  cursor: not-allowed;
  outline: none;
  /* Ensure all children inherit the styling */
  color: var(--color-text-disabled);
}

.nestAccordionHeader[data-disabled]:hover, .nestAccordionHeader:has([data-disabled]):hover {
  background: none;
}

.nestAccordionHeader[data-disabled]:active, .nestAccordionHeader:has([data-disabled]):active {
  background: none;
}

.nestAccordionHeader[data-disabled] *, .nestAccordionHeader:has([data-disabled]) * {
  cursor: not-allowed;
  outline: none;
}

.nestAccordionHeader[data-disabled] *:hover, .nestAccordionHeader:has([data-disabled]) *:hover {
  background: none;
}

.nestAccordionHeader[data-disabled] *:active, .nestAccordionHeader:has([data-disabled]) *:active {
  background: none;
}

.nestAccordionTrigger {
  all: unset;
  font-family: inherit;
  background-color: transparent;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  padding-top: 12px;
  padding-bottom: 12px;
  width: 100%;
}

.nestAccordionContent {
  overflow: hidden;
}

.nestAccordionContent[data-state=open] {
  -webkit-animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
  animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

.nestAccordionContent[data-state=closed] {
  -webkit-animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
  animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
}

.nestAccordionContentText {
  padding-top: 12px;
  padding-bottom: 12px;
}

.nestAccordionChevron {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  transition: -webkit-transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1), -webkit-transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
  color: var(--color-icon-secondary);
}

.nestAccordionTrigger[data-state=open] > .nestAccordionChevron {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

@-webkit-keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
@-webkit-keyframes slideUp {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
@keyframes slideUp {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
.nestAccordionFlexChildren {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  padding-right: var(--nest-base-unit);
  gap: calc(2 * var(--nest-base-unit));
}

.nestAccordionItemLeading {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
  padding: 2px;
  gap: var(--nest-base-unit);
}

.nestAccordionText {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.nestAccordionItemTrailing {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: var(--nest-base-unit);
  color: var(--color-icon-secondary);
}

.nestList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nestListItem {
  position: relative;
}

.nestListItem::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: var(--color-stroke-neutral-default);
  left: 0;
  width: calc(100% + 12px);
}

@media (min-width: 320px) {
  .nestListItem::after {
    width: calc(100% + 2 * var(--nest-base-unit));
  }
}
@media (min-width: 640px) {
  .nestListItem::after {
    width: 100%;
  }
}
.nestListItem:has(.nestListItemLeading)::after {
  left: 36px;
  width: calc(100% - 24px);
}

@media (min-width: 320px) {
  .nestListItem:has(.nestListItemLeading)::after {
    left: calc(2 * var(--nest-base-unit) + 24px);
    width: calc(100% - 24px);
  }
}
@media (min-width: 640px) {
  .nestListItem:has(.nestListItemLeading)::after {
    left: calc(2 * var(--nest-base-unit) + 24px);
    width: calc(100% - 2 * var(--nest-base-unit) - 24px);
  }
}
.nestListItem:has(.nestListItemLeadingLarge)::after {
  left: 52px;
  width: calc(100% - 40px);
}

@media (min-width: 320px) {
  .nestListItem:has(.nestListItemLeadingLarge)::after {
    left: calc(2 * var(--nest-base-unit) + 40px);
    width: calc(100% - 40px);
  }
}
@media (min-width: 640px) {
  .nestListItem:has(.nestListItemLeadingLarge)::after {
    left: calc(2 * var(--nest-base-unit) + 40px);
    width: calc(100% - 2 * var(--nest-base-unit) - 40px);
  }
}
.nestListItem:last-child::after {
  display: none;
}

.nestListItemButton {
  all: unset;
  cursor: pointer;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 12px;
  margin-left: -12px;
  padding-right: 12px;
  margin-right: -12px;
}

.nestListItemButton:hover {
  background-color: var(--color-background-form-hover);
  border-radius: 0;
}

@media (min-width: 320px) {
  .nestListItemButton:hover {
    padding-left: calc(2 * var(--nest-base-unit));
    margin-left: calc(-2 * var(--nest-base-unit));
    padding-right: calc(2 * var(--nest-base-unit));
    margin-right: calc(-2 * var(--nest-base-unit));
  }
}
@media (min-width: 640px) {
  .nestListItemButton:hover {
    border-radius: 4px;
    padding-left: calc(var(--nest-base-unit));
    margin-left: calc(-1 * (var(--nest-base-unit)));
    padding-right: calc(var(--nest-base-unit));
    margin-right: calc(-1 * (var(--nest-base-unit)));
  }
}
.nestListItemButton:active {
  background-color: var(--color-background-form-pressed);
}

.nestListItemButton:focus-visible, .nestListItemButton:has(:focus-visible) {
  outline-color: var(--color-stroke-focus);
  border-radius: 0;
  outline-width: 4px;
  outline-style: solid;
  position: relative;
  z-index: 1;
}

@media (min-width: 320px) {
  .nestListItemButton:focus-visible, .nestListItemButton:has(:focus-visible) {
    padding-left: calc(2 * var(--nest-base-unit));
    margin-left: calc(-2 * var(--nest-base-unit));
    padding-right: calc(2 * var(--nest-base-unit));
    margin-right: calc(-2 * var(--nest-base-unit));
  }
}
@media (min-width: 640px) {
  .nestListItemButton:focus-visible, .nestListItemButton:has(:focus-visible) {
    border-radius: 4px;
    padding-left: calc(var(--nest-base-unit));
    margin-left: calc(-1 * (var(--nest-base-unit)));
    padding-right: calc(var(--nest-base-unit));
    margin-right: calc(-1 * (var(--nest-base-unit)));
  }
}
.nestListItemButton:disabled {
  cursor: not-allowed;
  border-color: var(--color-text-disabled);
}

.nestListItemContent {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  gap: calc(var(--nest-base-unit) * 2);
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-top: 12px;
  padding-bottom: 12px;
}

@media (min-width: 640px) {
  .nestListItemContent {
    padding-right: 0;
    padding-left: 0;
  }
}
.nestListItemText {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.nestListItemLeading {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  min-width: 24px;
  padding: 2px;
}

.nestListItemLeadingLarge {
  height: 40px;
  width: 40px;
  min-width: 40px;
}

.nestListItemTrailing {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: var(--nest-base-unit);
  height: 20px;
  min-width: 24px;
  color: var(--color-icon-secondary);
}

.nestCheckboxInput:not(:disabled):checked + .nestListItemButton .nestCheckboxIcon,
.nestCheckboxInput:not(:disabled):active + .nestListItemButton .nestCheckboxIcon {
  color: var(--color-icon-tertiary);
  background-color: var(--color-icon-selected);
  border-color: var(--color-stroke-selected);
}

.nestListItemDisabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  /* Ensure all children inherit the color */
}

.nestListItemDisabled:hover {
  background-color: transparent;
}

.nestListItemDisabled * {
  color: inherit;
  border-color: inherit;
  cursor: not-allowed;
}

.nestListItemDisabled .nestListItemButton {
  cursor: not-allowed;
}

.nestListItemDisabled .nestListItemButton:hover {
  background-color: transparent;
}

.nestListItemRadioButton {
  all: unset;
}

.tabsList {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-stroke-neutral-default, #E1E1E1);
  -webkit-justify-content: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

@media (min-width: 670px) {
  .tabsList {
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}
.tabsTrigger {
  all: unset;
  cursor: pointer;
  width: 100%;
  padding: 6px 24px 9px;
  color: var(--color-text-label-secondary, #676767);
  border-bottom: 3px solid transparent;
  font-family: "Roboto Flex", Arial, sans-serif;
  font-size: var(--font-size-300, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: var(--font-line-height-300, 24px);
}

@media (min-width: 670px) {
  .tabsTrigger {
    width: auto;
  }
}
.tabsTrigger:hover {
  background: var(--color-background-action-secondary-hover, #E4E8DA);
}

.tabsTrigger:focus {
  outline: none;
  box-shadow: inset 0 0 0 calc(var(--nest-base-unit) * 0.5) var(--color-stroke-focus);
}

.tabsTrigger:active {
  background: var(--color-background-action-secondary-pressed, #B6BAAE);
}

.tabsTrigger[data-state=active] {
  position: relative;
  color: var(--color-text-selected, #007341);
  border-bottom: 3px solid var(--color-stroke-selected, #007341);
}

.nestTabsLabelContainer {
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: lining-nums proportional-nums;
  line-height: var(--font-line-height-300, 24px);
}

.nestTabsSupportingTextContainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--color-text-label-secondary, #676767);
  font-size: var(--font-size-100, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-line-height-100, 16px);
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
.fa {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900);
}

.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
.fa {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

.fas::before,
.far::before,
.fab::before,
.fa-solid::before,
.fa-regular::before,
.fa-brands::before,
.fa::before {
  content: var(--fa);
}

.fa-classic,
.fas,
.fa-solid,
.far,
.fa-regular {
  font-family: "Font Awesome 6 Free";
}

.fa-brands,
.fab {
  font-family: "Font Awesome 6 Brands";
}

.fa-1x {
  font-size: 1em;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-6x {
  font-size: 6em;
}

.fa-7x {
  font-size: 7em;
}

.fa-8x {
  font-size: 8em;
}

.fa-9x {
  font-size: 9em;
}

.fa-10x {
  font-size: 10em;
}

.fa-2xs {
  font-size: 0.625em;
  line-height: 0.1em;
  vertical-align: 0.225em;
}

.fa-xs {
  font-size: 0.75em;
  line-height: 0.0833333337em;
  vertical-align: 0.125em;
}

.fa-sm {
  font-size: 0.875em;
  line-height: 0.0714285718em;
  vertical-align: 0.0535714295em;
}

.fa-lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em;
}

.fa-xl {
  font-size: 1.5em;
  line-height: 0.0416666682em;
  vertical-align: -0.125em;
}

.fa-2xl {
  font-size: 2em;
  line-height: 0.03125em;
  vertical-align: -0.1875em;
}

.fa-fw {
  text-align: center;
  width: 1.25em;
}

.fa-ul {
  list-style-type: none;
  margin-left: var(--fa-li-margin, 2.5em);
  padding-left: 0;
}
.fa-ul > li {
  position: relative;
}

.fa-li {
  left: calc(-1 * var(--fa-li-width, 2em));
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit;
}

.fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.08em);
  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em);
}

.fa-pull-left {
  float: left;
  margin-right: var(--fa-pull-margin, 0.3em);
}

.fa-pull-right {
  float: right;
  margin-left: var(--fa-pull-margin, 0.3em);
}

.fa-beat {
  animation-name: fa-beat;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-bounce {
  animation-name: fa-bounce;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
}

.fa-fade {
  animation-name: fa-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-beat-fade {
  animation-name: fa-beat-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-flip {
  animation-name: fa-flip;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out);
}

.fa-shake {
  animation-name: fa-shake;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin {
  animation-name: fa-spin;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 2s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear);
}

.fa-spin-reverse {
  --fa-animation-direction: reverse;
}

.fa-pulse,
.fa-spin-pulse {
  animation-name: fa-spin;
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, steps(8));
}

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    animation-delay: -1ms;
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-delay: 0s;
    transition-duration: 0s;
  }
}
@keyframes fa-beat {
  0%, 90% {
    transform: scale(1);
  }
  45% {
    transform: scale(var(--fa-beat-scale, 1.25));
  }
}
@keyframes fa-bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
  }
  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
  }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4);
  }
}
@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(var(--fa-beat-fade-scale, 1.125));
  }
}
@keyframes fa-flip {
  50% {
    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
  }
}
@keyframes fa-shake {
  0% {
    transform: rotate(-15deg);
  }
  4% {
    transform: rotate(15deg);
  }
  8%, 24% {
    transform: rotate(-18deg);
  }
  12%, 28% {
    transform: rotate(18deg);
  }
  16% {
    transform: rotate(-22deg);
  }
  20% {
    transform: rotate(22deg);
  }
  32% {
    transform: rotate(-12deg);
  }
  36% {
    transform: rotate(12deg);
  }
  40%, 100% {
    transform: rotate(0deg);
  }
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fa-rotate-90 {
  transform: rotate(90deg);
}

.fa-rotate-180 {
  transform: rotate(180deg);
}

.fa-rotate-270 {
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  transform: scale(1, -1);
}

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
  transform: scale(-1, -1);
}

.fa-rotate-by {
  transform: rotate(var(--fa-rotate-angle, 0));
}

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: var(--fa-stack-z-index, auto);
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: var(--fa-inverse, #fff);
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-0 {
  --fa: "\30 ";
}

.fa-1 {
  --fa: "\31 ";
}

.fa-2 {
  --fa: "\32 ";
}

.fa-3 {
  --fa: "\33 ";
}

.fa-4 {
  --fa: "\34 ";
}

.fa-5 {
  --fa: "\35 ";
}

.fa-6 {
  --fa: "\36 ";
}

.fa-7 {
  --fa: "\37 ";
}

.fa-8 {
  --fa: "\38 ";
}

.fa-9 {
  --fa: "\39 ";
}

.fa-fill-drip {
  --fa: "\f576";
}

.fa-arrows-to-circle {
  --fa: "\e4bd";
}

.fa-circle-chevron-right {
  --fa: "\f138";
}

.fa-chevron-circle-right {
  --fa: "\f138";
}

.fa-at {
  --fa: "\@";
}

.fa-trash-can {
  --fa: "\f2ed";
}

.fa-trash-alt {
  --fa: "\f2ed";
}

.fa-text-height {
  --fa: "\f034";
}

.fa-user-xmark {
  --fa: "\f235";
}

.fa-user-times {
  --fa: "\f235";
}

.fa-stethoscope {
  --fa: "\f0f1";
}

.fa-message {
  --fa: "\f27a";
}

.fa-comment-alt {
  --fa: "\f27a";
}

.fa-info {
  --fa: "\f129";
}

.fa-down-left-and-up-right-to-center {
  --fa: "\f422";
}

.fa-compress-alt {
  --fa: "\f422";
}

.fa-explosion {
  --fa: "\e4e9";
}

.fa-file-lines {
  --fa: "\f15c";
}

.fa-file-alt {
  --fa: "\f15c";
}

.fa-file-text {
  --fa: "\f15c";
}

.fa-wave-square {
  --fa: "\f83e";
}

.fa-ring {
  --fa: "\f70b";
}

.fa-building-un {
  --fa: "\e4d9";
}

.fa-dice-three {
  --fa: "\f527";
}

.fa-calendar-days {
  --fa: "\f073";
}

.fa-calendar-alt {
  --fa: "\f073";
}

.fa-anchor-circle-check {
  --fa: "\e4aa";
}

.fa-building-circle-arrow-right {
  --fa: "\e4d1";
}

.fa-volleyball {
  --fa: "\f45f";
}

.fa-volleyball-ball {
  --fa: "\f45f";
}

.fa-arrows-up-to-line {
  --fa: "\e4c2";
}

.fa-sort-down {
  --fa: "\f0dd";
}

.fa-sort-desc {
  --fa: "\f0dd";
}

.fa-circle-minus {
  --fa: "\f056";
}

.fa-minus-circle {
  --fa: "\f056";
}

.fa-door-open {
  --fa: "\f52b";
}

.fa-right-from-bracket {
  --fa: "\f2f5";
}

.fa-sign-out-alt {
  --fa: "\f2f5";
}

.fa-atom {
  --fa: "\f5d2";
}

.fa-soap {
  --fa: "\e06e";
}

.fa-icons {
  --fa: "\f86d";
}

.fa-heart-music-camera-bolt {
  --fa: "\f86d";
}

.fa-microphone-lines-slash {
  --fa: "\f539";
}

.fa-microphone-alt-slash {
  --fa: "\f539";
}

.fa-bridge-circle-check {
  --fa: "\e4c9";
}

.fa-pump-medical {
  --fa: "\e06a";
}

.fa-fingerprint {
  --fa: "\f577";
}

.fa-hand-point-right {
  --fa: "\f0a4";
}

.fa-magnifying-glass-location {
  --fa: "\f689";
}

.fa-search-location {
  --fa: "\f689";
}

.fa-forward-step {
  --fa: "\f051";
}

.fa-step-forward {
  --fa: "\f051";
}

.fa-face-smile-beam {
  --fa: "\f5b8";
}

.fa-smile-beam {
  --fa: "\f5b8";
}

.fa-flag-checkered {
  --fa: "\f11e";
}

.fa-football {
  --fa: "\f44e";
}

.fa-football-ball {
  --fa: "\f44e";
}

.fa-school-circle-exclamation {
  --fa: "\e56c";
}

.fa-crop {
  --fa: "\f125";
}

.fa-angles-down {
  --fa: "\f103";
}

.fa-angle-double-down {
  --fa: "\f103";
}

.fa-users-rectangle {
  --fa: "\e594";
}

.fa-people-roof {
  --fa: "\e537";
}

.fa-people-line {
  --fa: "\e534";
}

.fa-beer-mug-empty {
  --fa: "\f0fc";
}

.fa-beer {
  --fa: "\f0fc";
}

.fa-diagram-predecessor {
  --fa: "\e477";
}

.fa-arrow-up-long {
  --fa: "\f176";
}

.fa-long-arrow-up {
  --fa: "\f176";
}

.fa-fire-flame-simple {
  --fa: "\f46a";
}

.fa-burn {
  --fa: "\f46a";
}

.fa-person {
  --fa: "\f183";
}

.fa-male {
  --fa: "\f183";
}

.fa-laptop {
  --fa: "\f109";
}

.fa-file-csv {
  --fa: "\f6dd";
}

.fa-menorah {
  --fa: "\f676";
}

.fa-truck-plane {
  --fa: "\e58f";
}

.fa-record-vinyl {
  --fa: "\f8d9";
}

.fa-face-grin-stars {
  --fa: "\f587";
}

.fa-grin-stars {
  --fa: "\f587";
}

.fa-bong {
  --fa: "\f55c";
}

.fa-spaghetti-monster-flying {
  --fa: "\f67b";
}

.fa-pastafarianism {
  --fa: "\f67b";
}

.fa-arrow-down-up-across-line {
  --fa: "\e4af";
}

.fa-spoon {
  --fa: "\f2e5";
}

.fa-utensil-spoon {
  --fa: "\f2e5";
}

.fa-jar-wheat {
  --fa: "\e517";
}

.fa-envelopes-bulk {
  --fa: "\f674";
}

.fa-mail-bulk {
  --fa: "\f674";
}

.fa-file-circle-exclamation {
  --fa: "\e4eb";
}

.fa-circle-h {
  --fa: "\f47e";
}

.fa-hospital-symbol {
  --fa: "\f47e";
}

.fa-pager {
  --fa: "\f815";
}

.fa-address-book {
  --fa: "\f2b9";
}

.fa-contact-book {
  --fa: "\f2b9";
}

.fa-strikethrough {
  --fa: "\f0cc";
}

.fa-k {
  --fa: "K";
}

.fa-landmark-flag {
  --fa: "\e51c";
}

.fa-pencil {
  --fa: "\f303";
}

.fa-pencil-alt {
  --fa: "\f303";
}

.fa-backward {
  --fa: "\f04a";
}

.fa-caret-right {
  --fa: "\f0da";
}

.fa-comments {
  --fa: "\f086";
}

.fa-paste {
  --fa: "\f0ea";
}

.fa-file-clipboard {
  --fa: "\f0ea";
}

.fa-code-pull-request {
  --fa: "\e13c";
}

.fa-clipboard-list {
  --fa: "\f46d";
}

.fa-truck-ramp-box {
  --fa: "\f4de";
}

.fa-truck-loading {
  --fa: "\f4de";
}

.fa-user-check {
  --fa: "\f4fc";
}

.fa-vial-virus {
  --fa: "\e597";
}

.fa-sheet-plastic {
  --fa: "\e571";
}

.fa-blog {
  --fa: "\f781";
}

.fa-user-ninja {
  --fa: "\f504";
}

.fa-person-arrow-up-from-line {
  --fa: "\e539";
}

.fa-scroll-torah {
  --fa: "\f6a0";
}

.fa-torah {
  --fa: "\f6a0";
}

.fa-broom-ball {
  --fa: "\f458";
}

.fa-quidditch {
  --fa: "\f458";
}

.fa-quidditch-broom-ball {
  --fa: "\f458";
}

.fa-toggle-off {
  --fa: "\f204";
}

.fa-box-archive {
  --fa: "\f187";
}

.fa-archive {
  --fa: "\f187";
}

.fa-person-drowning {
  --fa: "\e545";
}

.fa-arrow-down-9-1 {
  --fa: "\f886";
}

.fa-sort-numeric-desc {
  --fa: "\f886";
}

.fa-sort-numeric-down-alt {
  --fa: "\f886";
}

.fa-face-grin-tongue-squint {
  --fa: "\f58a";
}

.fa-grin-tongue-squint {
  --fa: "\f58a";
}

.fa-spray-can {
  --fa: "\f5bd";
}

.fa-truck-monster {
  --fa: "\f63b";
}

.fa-w {
  --fa: "W";
}

.fa-earth-africa {
  --fa: "\f57c";
}

.fa-globe-africa {
  --fa: "\f57c";
}

.fa-rainbow {
  --fa: "\f75b";
}

.fa-circle-notch {
  --fa: "\f1ce";
}

.fa-tablet-screen-button {
  --fa: "\f3fa";
}

.fa-tablet-alt {
  --fa: "\f3fa";
}

.fa-paw {
  --fa: "\f1b0";
}

.fa-cloud {
  --fa: "\f0c2";
}

.fa-trowel-bricks {
  --fa: "\e58a";
}

.fa-face-flushed {
  --fa: "\f579";
}

.fa-flushed {
  --fa: "\f579";
}

.fa-hospital-user {
  --fa: "\f80d";
}

.fa-tent-arrow-left-right {
  --fa: "\e57f";
}

.fa-gavel {
  --fa: "\f0e3";
}

.fa-legal {
  --fa: "\f0e3";
}

.fa-binoculars {
  --fa: "\f1e5";
}

.fa-microphone-slash {
  --fa: "\f131";
}

.fa-box-tissue {
  --fa: "\e05b";
}

.fa-motorcycle {
  --fa: "\f21c";
}

.fa-bell-concierge {
  --fa: "\f562";
}

.fa-concierge-bell {
  --fa: "\f562";
}

.fa-pen-ruler {
  --fa: "\f5ae";
}

.fa-pencil-ruler {
  --fa: "\f5ae";
}

.fa-people-arrows {
  --fa: "\e068";
}

.fa-people-arrows-left-right {
  --fa: "\e068";
}

.fa-mars-and-venus-burst {
  --fa: "\e523";
}

.fa-square-caret-right {
  --fa: "\f152";
}

.fa-caret-square-right {
  --fa: "\f152";
}

.fa-scissors {
  --fa: "\f0c4";
}

.fa-cut {
  --fa: "\f0c4";
}

.fa-sun-plant-wilt {
  --fa: "\e57a";
}

.fa-toilets-portable {
  --fa: "\e584";
}

.fa-hockey-puck {
  --fa: "\f453";
}

.fa-table {
  --fa: "\f0ce";
}

.fa-magnifying-glass-arrow-right {
  --fa: "\e521";
}

.fa-tachograph-digital {
  --fa: "\f566";
}

.fa-digital-tachograph {
  --fa: "\f566";
}

.fa-users-slash {
  --fa: "\e073";
}

.fa-clover {
  --fa: "\e139";
}

.fa-reply {
  --fa: "\f3e5";
}

.fa-mail-reply {
  --fa: "\f3e5";
}

.fa-star-and-crescent {
  --fa: "\f699";
}

.fa-house-fire {
  --fa: "\e50c";
}

.fa-square-minus {
  --fa: "\f146";
}

.fa-minus-square {
  --fa: "\f146";
}

.fa-helicopter {
  --fa: "\f533";
}

.fa-compass {
  --fa: "\f14e";
}

.fa-square-caret-down {
  --fa: "\f150";
}

.fa-caret-square-down {
  --fa: "\f150";
}

.fa-file-circle-question {
  --fa: "\e4ef";
}

.fa-laptop-code {
  --fa: "\f5fc";
}

.fa-swatchbook {
  --fa: "\f5c3";
}

.fa-prescription-bottle {
  --fa: "\f485";
}

.fa-bars {
  --fa: "\f0c9";
}

.fa-navicon {
  --fa: "\f0c9";
}

.fa-people-group {
  --fa: "\e533";
}

.fa-hourglass-end {
  --fa: "\f253";
}

.fa-hourglass-3 {
  --fa: "\f253";
}

.fa-heart-crack {
  --fa: "\f7a9";
}

.fa-heart-broken {
  --fa: "\f7a9";
}

.fa-square-up-right {
  --fa: "\f360";
}

.fa-external-link-square-alt {
  --fa: "\f360";
}

.fa-face-kiss-beam {
  --fa: "\f597";
}

.fa-kiss-beam {
  --fa: "\f597";
}

.fa-film {
  --fa: "\f008";
}

.fa-ruler-horizontal {
  --fa: "\f547";
}

.fa-people-robbery {
  --fa: "\e536";
}

.fa-lightbulb {
  --fa: "\f0eb";
}

.fa-caret-left {
  --fa: "\f0d9";
}

.fa-circle-exclamation {
  --fa: "\f06a";
}

.fa-exclamation-circle {
  --fa: "\f06a";
}

.fa-school-circle-xmark {
  --fa: "\e56d";
}

.fa-arrow-right-from-bracket {
  --fa: "\f08b";
}

.fa-sign-out {
  --fa: "\f08b";
}

.fa-circle-chevron-down {
  --fa: "\f13a";
}

.fa-chevron-circle-down {
  --fa: "\f13a";
}

.fa-unlock-keyhole {
  --fa: "\f13e";
}

.fa-unlock-alt {
  --fa: "\f13e";
}

.fa-cloud-showers-heavy {
  --fa: "\f740";
}

.fa-headphones-simple {
  --fa: "\f58f";
}

.fa-headphones-alt {
  --fa: "\f58f";
}

.fa-sitemap {
  --fa: "\f0e8";
}

.fa-circle-dollar-to-slot {
  --fa: "\f4b9";
}

.fa-donate {
  --fa: "\f4b9";
}

.fa-memory {
  --fa: "\f538";
}

.fa-road-spikes {
  --fa: "\e568";
}

.fa-fire-burner {
  --fa: "\e4f1";
}

.fa-flag {
  --fa: "\f024";
}

.fa-hanukiah {
  --fa: "\f6e6";
}

.fa-feather {
  --fa: "\f52d";
}

.fa-volume-low {
  --fa: "\f027";
}

.fa-volume-down {
  --fa: "\f027";
}

.fa-comment-slash {
  --fa: "\f4b3";
}

.fa-cloud-sun-rain {
  --fa: "\f743";
}

.fa-compress {
  --fa: "\f066";
}

.fa-wheat-awn {
  --fa: "\e2cd";
}

.fa-wheat-alt {
  --fa: "\e2cd";
}

.fa-ankh {
  --fa: "\f644";
}

.fa-hands-holding-child {
  --fa: "\e4fa";
}

.fa-asterisk {
  --fa: "\*";
}

.fa-square-check {
  --fa: "\f14a";
}

.fa-check-square {
  --fa: "\f14a";
}

.fa-peseta-sign {
  --fa: "\e221";
}

.fa-heading {
  --fa: "\f1dc";
}

.fa-header {
  --fa: "\f1dc";
}

.fa-ghost {
  --fa: "\f6e2";
}

.fa-list {
  --fa: "\f03a";
}

.fa-list-squares {
  --fa: "\f03a";
}

.fa-square-phone-flip {
  --fa: "\f87b";
}

.fa-phone-square-alt {
  --fa: "\f87b";
}

.fa-cart-plus {
  --fa: "\f217";
}

.fa-gamepad {
  --fa: "\f11b";
}

.fa-circle-dot {
  --fa: "\f192";
}

.fa-dot-circle {
  --fa: "\f192";
}

.fa-face-dizzy {
  --fa: "\f567";
}

.fa-dizzy {
  --fa: "\f567";
}

.fa-egg {
  --fa: "\f7fb";
}

.fa-house-medical-circle-xmark {
  --fa: "\e513";
}

.fa-campground {
  --fa: "\f6bb";
}

.fa-folder-plus {
  --fa: "\f65e";
}

.fa-futbol {
  --fa: "\f1e3";
}

.fa-futbol-ball {
  --fa: "\f1e3";
}

.fa-soccer-ball {
  --fa: "\f1e3";
}

.fa-paintbrush {
  --fa: "\f1fc";
}

.fa-paint-brush {
  --fa: "\f1fc";
}

.fa-lock {
  --fa: "\f023";
}

.fa-gas-pump {
  --fa: "\f52f";
}

.fa-hot-tub-person {
  --fa: "\f593";
}

.fa-hot-tub {
  --fa: "\f593";
}

.fa-map-location {
  --fa: "\f59f";
}

.fa-map-marked {
  --fa: "\f59f";
}

.fa-house-flood-water {
  --fa: "\e50e";
}

.fa-tree {
  --fa: "\f1bb";
}

.fa-bridge-lock {
  --fa: "\e4cc";
}

.fa-sack-dollar {
  --fa: "\f81d";
}

.fa-pen-to-square {
  --fa: "\f044";
}

.fa-edit {
  --fa: "\f044";
}

.fa-car-side {
  --fa: "\f5e4";
}

.fa-share-nodes {
  --fa: "\f1e0";
}

.fa-share-alt {
  --fa: "\f1e0";
}

.fa-heart-circle-minus {
  --fa: "\e4ff";
}

.fa-hourglass-half {
  --fa: "\f252";
}

.fa-hourglass-2 {
  --fa: "\f252";
}

.fa-microscope {
  --fa: "\f610";
}

.fa-sink {
  --fa: "\e06d";
}

.fa-bag-shopping {
  --fa: "\f290";
}

.fa-shopping-bag {
  --fa: "\f290";
}

.fa-arrow-down-z-a {
  --fa: "\f881";
}

.fa-sort-alpha-desc {
  --fa: "\f881";
}

.fa-sort-alpha-down-alt {
  --fa: "\f881";
}

.fa-mitten {
  --fa: "\f7b5";
}

.fa-person-rays {
  --fa: "\e54d";
}

.fa-users {
  --fa: "\f0c0";
}

.fa-eye-slash {
  --fa: "\f070";
}

.fa-flask-vial {
  --fa: "\e4f3";
}

.fa-hand {
  --fa: "\f256";
}

.fa-hand-paper {
  --fa: "\f256";
}

.fa-om {
  --fa: "\f679";
}

.fa-worm {
  --fa: "\e599";
}

.fa-house-circle-xmark {
  --fa: "\e50b";
}

.fa-plug {
  --fa: "\f1e6";
}

.fa-chevron-up {
  --fa: "\f077";
}

.fa-hand-spock {
  --fa: "\f259";
}

.fa-stopwatch {
  --fa: "\f2f2";
}

.fa-face-kiss {
  --fa: "\f596";
}

.fa-kiss {
  --fa: "\f596";
}

.fa-bridge-circle-xmark {
  --fa: "\e4cb";
}

.fa-face-grin-tongue {
  --fa: "\f589";
}

.fa-grin-tongue {
  --fa: "\f589";
}

.fa-chess-bishop {
  --fa: "\f43a";
}

.fa-face-grin-wink {
  --fa: "\f58c";
}

.fa-grin-wink {
  --fa: "\f58c";
}

.fa-ear-deaf {
  --fa: "\f2a4";
}

.fa-deaf {
  --fa: "\f2a4";
}

.fa-deafness {
  --fa: "\f2a4";
}

.fa-hard-of-hearing {
  --fa: "\f2a4";
}

.fa-road-circle-check {
  --fa: "\e564";
}

.fa-dice-five {
  --fa: "\f523";
}

.fa-square-rss {
  --fa: "\f143";
}

.fa-rss-square {
  --fa: "\f143";
}

.fa-land-mine-on {
  --fa: "\e51b";
}

.fa-i-cursor {
  --fa: "\f246";
}

.fa-stamp {
  --fa: "\f5bf";
}

.fa-stairs {
  --fa: "\e289";
}

.fa-i {
  --fa: "I";
}

.fa-hryvnia-sign {
  --fa: "\f6f2";
}

.fa-hryvnia {
  --fa: "\f6f2";
}

.fa-pills {
  --fa: "\f484";
}

.fa-face-grin-wide {
  --fa: "\f581";
}

.fa-grin-alt {
  --fa: "\f581";
}

.fa-tooth {
  --fa: "\f5c9";
}

.fa-v {
  --fa: "V";
}

.fa-bangladeshi-taka-sign {
  --fa: "\e2e6";
}

.fa-bicycle {
  --fa: "\f206";
}

.fa-staff-snake {
  --fa: "\e579";
}

.fa-rod-asclepius {
  --fa: "\e579";
}

.fa-rod-snake {
  --fa: "\e579";
}

.fa-staff-aesculapius {
  --fa: "\e579";
}

.fa-head-side-cough-slash {
  --fa: "\e062";
}

.fa-truck-medical {
  --fa: "\f0f9";
}

.fa-ambulance {
  --fa: "\f0f9";
}

.fa-wheat-awn-circle-exclamation {
  --fa: "\e598";
}

.fa-snowman {
  --fa: "\f7d0";
}

.fa-mortar-pestle {
  --fa: "\f5a7";
}

.fa-road-barrier {
  --fa: "\e562";
}

.fa-school {
  --fa: "\f549";
}

.fa-igloo {
  --fa: "\f7ae";
}

.fa-joint {
  --fa: "\f595";
}

.fa-angle-right {
  --fa: "\f105";
}

.fa-horse {
  --fa: "\f6f0";
}

.fa-q {
  --fa: "Q";
}

.fa-g {
  --fa: "G";
}

.fa-notes-medical {
  --fa: "\f481";
}

.fa-temperature-half {
  --fa: "\f2c9";
}

.fa-temperature-2 {
  --fa: "\f2c9";
}

.fa-thermometer-2 {
  --fa: "\f2c9";
}

.fa-thermometer-half {
  --fa: "\f2c9";
}

.fa-dong-sign {
  --fa: "\e169";
}

.fa-capsules {
  --fa: "\f46b";
}

.fa-poo-storm {
  --fa: "\f75a";
}

.fa-poo-bolt {
  --fa: "\f75a";
}

.fa-face-frown-open {
  --fa: "\f57a";
}

.fa-frown-open {
  --fa: "\f57a";
}

.fa-hand-point-up {
  --fa: "\f0a6";
}

.fa-money-bill {
  --fa: "\f0d6";
}

.fa-bookmark {
  --fa: "\f02e";
}

.fa-align-justify {
  --fa: "\f039";
}

.fa-umbrella-beach {
  --fa: "\f5ca";
}

.fa-helmet-un {
  --fa: "\e503";
}

.fa-bullseye {
  --fa: "\f140";
}

.fa-bacon {
  --fa: "\f7e5";
}

.fa-hand-point-down {
  --fa: "\f0a7";
}

.fa-arrow-up-from-bracket {
  --fa: "\e09a";
}

.fa-folder {
  --fa: "\f07b";
}

.fa-folder-blank {
  --fa: "\f07b";
}

.fa-file-waveform {
  --fa: "\f478";
}

.fa-file-medical-alt {
  --fa: "\f478";
}

.fa-radiation {
  --fa: "\f7b9";
}

.fa-chart-simple {
  --fa: "\e473";
}

.fa-mars-stroke {
  --fa: "\f229";
}

.fa-vial {
  --fa: "\f492";
}

.fa-gauge {
  --fa: "\f624";
}

.fa-dashboard {
  --fa: "\f624";
}

.fa-gauge-med {
  --fa: "\f624";
}

.fa-tachometer-alt-average {
  --fa: "\f624";
}

.fa-wand-magic-sparkles {
  --fa: "\e2ca";
}

.fa-magic-wand-sparkles {
  --fa: "\e2ca";
}

.fa-e {
  --fa: "E";
}

.fa-pen-clip {
  --fa: "\f305";
}

.fa-pen-alt {
  --fa: "\f305";
}

.fa-bridge-circle-exclamation {
  --fa: "\e4ca";
}

.fa-user {
  --fa: "\f007";
}

.fa-school-circle-check {
  --fa: "\e56b";
}

.fa-dumpster {
  --fa: "\f793";
}

.fa-van-shuttle {
  --fa: "\f5b6";
}

.fa-shuttle-van {
  --fa: "\f5b6";
}

.fa-building-user {
  --fa: "\e4da";
}

.fa-square-caret-left {
  --fa: "\f191";
}

.fa-caret-square-left {
  --fa: "\f191";
}

.fa-highlighter {
  --fa: "\f591";
}

.fa-key {
  --fa: "\f084";
}

.fa-bullhorn {
  --fa: "\f0a1";
}

.fa-globe {
  --fa: "\f0ac";
}

.fa-synagogue {
  --fa: "\f69b";
}

.fa-person-half-dress {
  --fa: "\e548";
}

.fa-road-bridge {
  --fa: "\e563";
}

.fa-location-arrow {
  --fa: "\f124";
}

.fa-c {
  --fa: "C";
}

.fa-tablet-button {
  --fa: "\f10a";
}

.fa-building-lock {
  --fa: "\e4d6";
}

.fa-pizza-slice {
  --fa: "\f818";
}

.fa-money-bill-wave {
  --fa: "\f53a";
}

.fa-chart-area {
  --fa: "\f1fe";
}

.fa-area-chart {
  --fa: "\f1fe";
}

.fa-house-flag {
  --fa: "\e50d";
}

.fa-person-circle-minus {
  --fa: "\e540";
}

.fa-ban {
  --fa: "\f05e";
}

.fa-cancel {
  --fa: "\f05e";
}

.fa-camera-rotate {
  --fa: "\e0d8";
}

.fa-spray-can-sparkles {
  --fa: "\f5d0";
}

.fa-air-freshener {
  --fa: "\f5d0";
}

.fa-star {
  --fa: "\f005";
}

.fa-repeat {
  --fa: "\f363";
}

.fa-cross {
  --fa: "\f654";
}

.fa-box {
  --fa: "\f466";
}

.fa-venus-mars {
  --fa: "\f228";
}

.fa-arrow-pointer {
  --fa: "\f245";
}

.fa-mouse-pointer {
  --fa: "\f245";
}

.fa-maximize {
  --fa: "\f31e";
}

.fa-expand-arrows-alt {
  --fa: "\f31e";
}

.fa-charging-station {
  --fa: "\f5e7";
}

.fa-shapes {
  --fa: "\f61f";
}

.fa-triangle-circle-square {
  --fa: "\f61f";
}

.fa-shuffle {
  --fa: "\f074";
}

.fa-random {
  --fa: "\f074";
}

.fa-person-running {
  --fa: "\f70c";
}

.fa-running {
  --fa: "\f70c";
}

.fa-mobile-retro {
  --fa: "\e527";
}

.fa-grip-lines-vertical {
  --fa: "\f7a5";
}

.fa-spider {
  --fa: "\f717";
}

.fa-hands-bound {
  --fa: "\e4f9";
}

.fa-file-invoice-dollar {
  --fa: "\f571";
}

.fa-plane-circle-exclamation {
  --fa: "\e556";
}

.fa-x-ray {
  --fa: "\f497";
}

.fa-spell-check {
  --fa: "\f891";
}

.fa-slash {
  --fa: "\f715";
}

.fa-computer-mouse {
  --fa: "\f8cc";
}

.fa-mouse {
  --fa: "\f8cc";
}

.fa-arrow-right-to-bracket {
  --fa: "\f090";
}

.fa-sign-in {
  --fa: "\f090";
}

.fa-shop-slash {
  --fa: "\e070";
}

.fa-store-alt-slash {
  --fa: "\e070";
}

.fa-server {
  --fa: "\f233";
}

.fa-virus-covid-slash {
  --fa: "\e4a9";
}

.fa-shop-lock {
  --fa: "\e4a5";
}

.fa-hourglass-start {
  --fa: "\f251";
}

.fa-hourglass-1 {
  --fa: "\f251";
}

.fa-blender-phone {
  --fa: "\f6b6";
}

.fa-building-wheat {
  --fa: "\e4db";
}

.fa-person-breastfeeding {
  --fa: "\e53a";
}

.fa-right-to-bracket {
  --fa: "\f2f6";
}

.fa-sign-in-alt {
  --fa: "\f2f6";
}

.fa-venus {
  --fa: "\f221";
}

.fa-passport {
  --fa: "\f5ab";
}

.fa-thumbtack-slash {
  --fa: "\e68f";
}

.fa-thumb-tack-slash {
  --fa: "\e68f";
}

.fa-heart-pulse {
  --fa: "\f21e";
}

.fa-heartbeat {
  --fa: "\f21e";
}

.fa-people-carry-box {
  --fa: "\f4ce";
}

.fa-people-carry {
  --fa: "\f4ce";
}

.fa-temperature-high {
  --fa: "\f769";
}

.fa-microchip {
  --fa: "\f2db";
}

.fa-crown {
  --fa: "\f521";
}

.fa-weight-hanging {
  --fa: "\f5cd";
}

.fa-xmarks-lines {
  --fa: "\e59a";
}

.fa-file-prescription {
  --fa: "\f572";
}

.fa-weight-scale {
  --fa: "\f496";
}

.fa-weight {
  --fa: "\f496";
}

.fa-user-group {
  --fa: "\f500";
}

.fa-user-friends {
  --fa: "\f500";
}

.fa-arrow-up-a-z {
  --fa: "\f15e";
}

.fa-sort-alpha-up {
  --fa: "\f15e";
}

.fa-chess-knight {
  --fa: "\f441";
}

.fa-face-laugh-squint {
  --fa: "\f59b";
}

.fa-laugh-squint {
  --fa: "\f59b";
}

.fa-wheelchair {
  --fa: "\f193";
}

.fa-circle-arrow-up {
  --fa: "\f0aa";
}

.fa-arrow-circle-up {
  --fa: "\f0aa";
}

.fa-toggle-on {
  --fa: "\f205";
}

.fa-person-walking {
  --fa: "\f554";
}

.fa-walking {
  --fa: "\f554";
}

.fa-l {
  --fa: "L";
}

.fa-fire {
  --fa: "\f06d";
}

.fa-bed-pulse {
  --fa: "\f487";
}

.fa-procedures {
  --fa: "\f487";
}

.fa-shuttle-space {
  --fa: "\f197";
}

.fa-space-shuttle {
  --fa: "\f197";
}

.fa-face-laugh {
  --fa: "\f599";
}

.fa-laugh {
  --fa: "\f599";
}

.fa-folder-open {
  --fa: "\f07c";
}

.fa-heart-circle-plus {
  --fa: "\e500";
}

.fa-code-fork {
  --fa: "\e13b";
}

.fa-city {
  --fa: "\f64f";
}

.fa-microphone-lines {
  --fa: "\f3c9";
}

.fa-microphone-alt {
  --fa: "\f3c9";
}

.fa-pepper-hot {
  --fa: "\f816";
}

.fa-unlock {
  --fa: "\f09c";
}

.fa-colon-sign {
  --fa: "\e140";
}

.fa-headset {
  --fa: "\f590";
}

.fa-store-slash {
  --fa: "\e071";
}

.fa-road-circle-xmark {
  --fa: "\e566";
}

.fa-user-minus {
  --fa: "\f503";
}

.fa-mars-stroke-up {
  --fa: "\f22a";
}

.fa-mars-stroke-v {
  --fa: "\f22a";
}

.fa-champagne-glasses {
  --fa: "\f79f";
}

.fa-glass-cheers {
  --fa: "\f79f";
}

.fa-clipboard {
  --fa: "\f328";
}

.fa-house-circle-exclamation {
  --fa: "\e50a";
}

.fa-file-arrow-up {
  --fa: "\f574";
}

.fa-file-upload {
  --fa: "\f574";
}

.fa-wifi {
  --fa: "\f1eb";
}

.fa-wifi-3 {
  --fa: "\f1eb";
}

.fa-wifi-strong {
  --fa: "\f1eb";
}

.fa-bath {
  --fa: "\f2cd";
}

.fa-bathtub {
  --fa: "\f2cd";
}

.fa-underline {
  --fa: "\f0cd";
}

.fa-user-pen {
  --fa: "\f4ff";
}

.fa-user-edit {
  --fa: "\f4ff";
}

.fa-signature {
  --fa: "\f5b7";
}

.fa-stroopwafel {
  --fa: "\f551";
}

.fa-bold {
  --fa: "\f032";
}

.fa-anchor-lock {
  --fa: "\e4ad";
}

.fa-building-ngo {
  --fa: "\e4d7";
}

.fa-manat-sign {
  --fa: "\e1d5";
}

.fa-not-equal {
  --fa: "\f53e";
}

.fa-border-top-left {
  --fa: "\f853";
}

.fa-border-style {
  --fa: "\f853";
}

.fa-map-location-dot {
  --fa: "\f5a0";
}

.fa-map-marked-alt {
  --fa: "\f5a0";
}

.fa-jedi {
  --fa: "\f669";
}

.fa-square-poll-vertical {
  --fa: "\f681";
}

.fa-poll {
  --fa: "\f681";
}

.fa-mug-hot {
  --fa: "\f7b6";
}

.fa-car-battery {
  --fa: "\f5df";
}

.fa-battery-car {
  --fa: "\f5df";
}

.fa-gift {
  --fa: "\f06b";
}

.fa-dice-two {
  --fa: "\f528";
}

.fa-chess-queen {
  --fa: "\f445";
}

.fa-glasses {
  --fa: "\f530";
}

.fa-chess-board {
  --fa: "\f43c";
}

.fa-building-circle-check {
  --fa: "\e4d2";
}

.fa-person-chalkboard {
  --fa: "\e53d";
}

.fa-mars-stroke-right {
  --fa: "\f22b";
}

.fa-mars-stroke-h {
  --fa: "\f22b";
}

.fa-hand-back-fist {
  --fa: "\f255";
}

.fa-hand-rock {
  --fa: "\f255";
}

.fa-square-caret-up {
  --fa: "\f151";
}

.fa-caret-square-up {
  --fa: "\f151";
}

.fa-cloud-showers-water {
  --fa: "\e4e4";
}

.fa-chart-bar {
  --fa: "\f080";
}

.fa-bar-chart {
  --fa: "\f080";
}

.fa-hands-bubbles {
  --fa: "\e05e";
}

.fa-hands-wash {
  --fa: "\e05e";
}

.fa-less-than-equal {
  --fa: "\f537";
}

.fa-train {
  --fa: "\f238";
}

.fa-eye-low-vision {
  --fa: "\f2a8";
}

.fa-low-vision {
  --fa: "\f2a8";
}

.fa-crow {
  --fa: "\f520";
}

.fa-sailboat {
  --fa: "\e445";
}

.fa-window-restore {
  --fa: "\f2d2";
}

.fa-square-plus {
  --fa: "\f0fe";
}

.fa-plus-square {
  --fa: "\f0fe";
}

.fa-torii-gate {
  --fa: "\f6a1";
}

.fa-frog {
  --fa: "\f52e";
}

.fa-bucket {
  --fa: "\e4cf";
}

.fa-image {
  --fa: "\f03e";
}

.fa-microphone {
  --fa: "\f130";
}

.fa-cow {
  --fa: "\f6c8";
}

.fa-caret-up {
  --fa: "\f0d8";
}

.fa-screwdriver {
  --fa: "\f54a";
}

.fa-folder-closed {
  --fa: "\e185";
}

.fa-house-tsunami {
  --fa: "\e515";
}

.fa-square-nfi {
  --fa: "\e576";
}

.fa-arrow-up-from-ground-water {
  --fa: "\e4b5";
}

.fa-martini-glass {
  --fa: "\f57b";
}

.fa-glass-martini-alt {
  --fa: "\f57b";
}

.fa-square-binary {
  --fa: "\e69b";
}

.fa-rotate-left {
  --fa: "\f2ea";
}

.fa-rotate-back {
  --fa: "\f2ea";
}

.fa-rotate-backward {
  --fa: "\f2ea";
}

.fa-undo-alt {
  --fa: "\f2ea";
}

.fa-table-columns {
  --fa: "\f0db";
}

.fa-columns {
  --fa: "\f0db";
}

.fa-lemon {
  --fa: "\f094";
}

.fa-head-side-mask {
  --fa: "\e063";
}

.fa-handshake {
  --fa: "\f2b5";
}

.fa-gem {
  --fa: "\f3a5";
}

.fa-dolly {
  --fa: "\f472";
}

.fa-dolly-box {
  --fa: "\f472";
}

.fa-smoking {
  --fa: "\f48d";
}

.fa-minimize {
  --fa: "\f78c";
}

.fa-compress-arrows-alt {
  --fa: "\f78c";
}

.fa-monument {
  --fa: "\f5a6";
}

.fa-snowplow {
  --fa: "\f7d2";
}

.fa-angles-right {
  --fa: "\f101";
}

.fa-angle-double-right {
  --fa: "\f101";
}

.fa-cannabis {
  --fa: "\f55f";
}

.fa-circle-play {
  --fa: "\f144";
}

.fa-play-circle {
  --fa: "\f144";
}

.fa-tablets {
  --fa: "\f490";
}

.fa-ethernet {
  --fa: "\f796";
}

.fa-euro-sign {
  --fa: "\f153";
}

.fa-eur {
  --fa: "\f153";
}

.fa-euro {
  --fa: "\f153";
}

.fa-chair {
  --fa: "\f6c0";
}

.fa-circle-check {
  --fa: "\f058";
}

.fa-check-circle {
  --fa: "\f058";
}

.fa-circle-stop {
  --fa: "\f28d";
}

.fa-stop-circle {
  --fa: "\f28d";
}

.fa-compass-drafting {
  --fa: "\f568";
}

.fa-drafting-compass {
  --fa: "\f568";
}

.fa-plate-wheat {
  --fa: "\e55a";
}

.fa-icicles {
  --fa: "\f7ad";
}

.fa-person-shelter {
  --fa: "\e54f";
}

.fa-neuter {
  --fa: "\f22c";
}

.fa-id-badge {
  --fa: "\f2c1";
}

.fa-marker {
  --fa: "\f5a1";
}

.fa-face-laugh-beam {
  --fa: "\f59a";
}

.fa-laugh-beam {
  --fa: "\f59a";
}

.fa-helicopter-symbol {
  --fa: "\e502";
}

.fa-universal-access {
  --fa: "\f29a";
}

.fa-circle-chevron-up {
  --fa: "\f139";
}

.fa-chevron-circle-up {
  --fa: "\f139";
}

.fa-lari-sign {
  --fa: "\e1c8";
}

.fa-volcano {
  --fa: "\f770";
}

.fa-person-walking-dashed-line-arrow-right {
  --fa: "\e553";
}

.fa-sterling-sign {
  --fa: "\f154";
}

.fa-gbp {
  --fa: "\f154";
}

.fa-pound-sign {
  --fa: "\f154";
}

.fa-viruses {
  --fa: "\e076";
}

.fa-square-person-confined {
  --fa: "\e577";
}

.fa-user-tie {
  --fa: "\f508";
}

.fa-arrow-down-long {
  --fa: "\f175";
}

.fa-long-arrow-down {
  --fa: "\f175";
}

.fa-tent-arrow-down-to-line {
  --fa: "\e57e";
}

.fa-certificate {
  --fa: "\f0a3";
}

.fa-reply-all {
  --fa: "\f122";
}

.fa-mail-reply-all {
  --fa: "\f122";
}

.fa-suitcase {
  --fa: "\f0f2";
}

.fa-person-skating {
  --fa: "\f7c5";
}

.fa-skating {
  --fa: "\f7c5";
}

.fa-filter-circle-dollar {
  --fa: "\f662";
}

.fa-funnel-dollar {
  --fa: "\f662";
}

.fa-camera-retro {
  --fa: "\f083";
}

.fa-circle-arrow-down {
  --fa: "\f0ab";
}

.fa-arrow-circle-down {
  --fa: "\f0ab";
}

.fa-file-import {
  --fa: "\f56f";
}

.fa-arrow-right-to-file {
  --fa: "\f56f";
}

.fa-square-arrow-up-right {
  --fa: "\f14c";
}

.fa-external-link-square {
  --fa: "\f14c";
}

.fa-box-open {
  --fa: "\f49e";
}

.fa-scroll {
  --fa: "\f70e";
}

.fa-spa {
  --fa: "\f5bb";
}

.fa-location-pin-lock {
  --fa: "\e51f";
}

.fa-pause {
  --fa: "\f04c";
}

.fa-hill-avalanche {
  --fa: "\e507";
}

.fa-temperature-empty {
  --fa: "\f2cb";
}

.fa-temperature-0 {
  --fa: "\f2cb";
}

.fa-thermometer-0 {
  --fa: "\f2cb";
}

.fa-thermometer-empty {
  --fa: "\f2cb";
}

.fa-bomb {
  --fa: "\f1e2";
}

.fa-registered {
  --fa: "\f25d";
}

.fa-address-card {
  --fa: "\f2bb";
}

.fa-contact-card {
  --fa: "\f2bb";
}

.fa-vcard {
  --fa: "\f2bb";
}

.fa-scale-unbalanced-flip {
  --fa: "\f516";
}

.fa-balance-scale-right {
  --fa: "\f516";
}

.fa-subscript {
  --fa: "\f12c";
}

.fa-diamond-turn-right {
  --fa: "\f5eb";
}

.fa-directions {
  --fa: "\f5eb";
}

.fa-burst {
  --fa: "\e4dc";
}

.fa-house-laptop {
  --fa: "\e066";
}

.fa-laptop-house {
  --fa: "\e066";
}

.fa-face-tired {
  --fa: "\f5c8";
}

.fa-tired {
  --fa: "\f5c8";
}

.fa-money-bills {
  --fa: "\e1f3";
}

.fa-smog {
  --fa: "\f75f";
}

.fa-crutch {
  --fa: "\f7f7";
}

.fa-cloud-arrow-up {
  --fa: "\f0ee";
}

.fa-cloud-upload {
  --fa: "\f0ee";
}

.fa-cloud-upload-alt {
  --fa: "\f0ee";
}

.fa-palette {
  --fa: "\f53f";
}

.fa-arrows-turn-right {
  --fa: "\e4c0";
}

.fa-vest {
  --fa: "\e085";
}

.fa-ferry {
  --fa: "\e4ea";
}

.fa-arrows-down-to-people {
  --fa: "\e4b9";
}

.fa-seedling {
  --fa: "\f4d8";
}

.fa-sprout {
  --fa: "\f4d8";
}

.fa-left-right {
  --fa: "\f337";
}

.fa-arrows-alt-h {
  --fa: "\f337";
}

.fa-boxes-packing {
  --fa: "\e4c7";
}

.fa-circle-arrow-left {
  --fa: "\f0a8";
}

.fa-arrow-circle-left {
  --fa: "\f0a8";
}

.fa-group-arrows-rotate {
  --fa: "\e4f6";
}

.fa-bowl-food {
  --fa: "\e4c6";
}

.fa-candy-cane {
  --fa: "\f786";
}

.fa-arrow-down-wide-short {
  --fa: "\f160";
}

.fa-sort-amount-asc {
  --fa: "\f160";
}

.fa-sort-amount-down {
  --fa: "\f160";
}

.fa-cloud-bolt {
  --fa: "\f76c";
}

.fa-thunderstorm {
  --fa: "\f76c";
}

.fa-text-slash {
  --fa: "\f87d";
}

.fa-remove-format {
  --fa: "\f87d";
}

.fa-face-smile-wink {
  --fa: "\f4da";
}

.fa-smile-wink {
  --fa: "\f4da";
}

.fa-file-word {
  --fa: "\f1c2";
}

.fa-file-powerpoint {
  --fa: "\f1c4";
}

.fa-arrows-left-right {
  --fa: "\f07e";
}

.fa-arrows-h {
  --fa: "\f07e";
}

.fa-house-lock {
  --fa: "\e510";
}

.fa-cloud-arrow-down {
  --fa: "\f0ed";
}

.fa-cloud-download {
  --fa: "\f0ed";
}

.fa-cloud-download-alt {
  --fa: "\f0ed";
}

.fa-children {
  --fa: "\e4e1";
}

.fa-chalkboard {
  --fa: "\f51b";
}

.fa-blackboard {
  --fa: "\f51b";
}

.fa-user-large-slash {
  --fa: "\f4fa";
}

.fa-user-alt-slash {
  --fa: "\f4fa";
}

.fa-envelope-open {
  --fa: "\f2b6";
}

.fa-handshake-simple-slash {
  --fa: "\e05f";
}

.fa-handshake-alt-slash {
  --fa: "\e05f";
}

.fa-mattress-pillow {
  --fa: "\e525";
}

.fa-guarani-sign {
  --fa: "\e19a";
}

.fa-arrows-rotate {
  --fa: "\f021";
}

.fa-refresh {
  --fa: "\f021";
}

.fa-sync {
  --fa: "\f021";
}

.fa-fire-extinguisher {
  --fa: "\f134";
}

.fa-cruzeiro-sign {
  --fa: "\e152";
}

.fa-greater-than-equal {
  --fa: "\f532";
}

.fa-shield-halved {
  --fa: "\f3ed";
}

.fa-shield-alt {
  --fa: "\f3ed";
}

.fa-book-atlas {
  --fa: "\f558";
}

.fa-atlas {
  --fa: "\f558";
}

.fa-virus {
  --fa: "\e074";
}

.fa-envelope-circle-check {
  --fa: "\e4e8";
}

.fa-layer-group {
  --fa: "\f5fd";
}

.fa-arrows-to-dot {
  --fa: "\e4be";
}

.fa-archway {
  --fa: "\f557";
}

.fa-heart-circle-check {
  --fa: "\e4fd";
}

.fa-house-chimney-crack {
  --fa: "\f6f1";
}

.fa-house-damage {
  --fa: "\f6f1";
}

.fa-file-zipper {
  --fa: "\f1c6";
}

.fa-file-archive {
  --fa: "\f1c6";
}

.fa-square {
  --fa: "\f0c8";
}

.fa-martini-glass-empty {
  --fa: "\f000";
}

.fa-glass-martini {
  --fa: "\f000";
}

.fa-couch {
  --fa: "\f4b8";
}

.fa-cedi-sign {
  --fa: "\e0df";
}

.fa-italic {
  --fa: "\f033";
}

.fa-table-cells-column-lock {
  --fa: "\e678";
}

.fa-church {
  --fa: "\f51d";
}

.fa-comments-dollar {
  --fa: "\f653";
}

.fa-democrat {
  --fa: "\f747";
}

.fa-z {
  --fa: "Z";
}

.fa-person-skiing {
  --fa: "\f7c9";
}

.fa-skiing {
  --fa: "\f7c9";
}

.fa-road-lock {
  --fa: "\e567";
}

.fa-a {
  --fa: "A";
}

.fa-temperature-arrow-down {
  --fa: "\e03f";
}

.fa-temperature-down {
  --fa: "\e03f";
}

.fa-feather-pointed {
  --fa: "\f56b";
}

.fa-feather-alt {
  --fa: "\f56b";
}

.fa-p {
  --fa: "P";
}

.fa-snowflake {
  --fa: "\f2dc";
}

.fa-newspaper {
  --fa: "\f1ea";
}

.fa-rectangle-ad {
  --fa: "\f641";
}

.fa-ad {
  --fa: "\f641";
}

.fa-circle-arrow-right {
  --fa: "\f0a9";
}

.fa-arrow-circle-right {
  --fa: "\f0a9";
}

.fa-filter-circle-xmark {
  --fa: "\e17b";
}

.fa-locust {
  --fa: "\e520";
}

.fa-sort {
  --fa: "\f0dc";
}

.fa-unsorted {
  --fa: "\f0dc";
}

.fa-list-ol {
  --fa: "\f0cb";
}

.fa-list-1-2 {
  --fa: "\f0cb";
}

.fa-list-numeric {
  --fa: "\f0cb";
}

.fa-person-dress-burst {
  --fa: "\e544";
}

.fa-money-check-dollar {
  --fa: "\f53d";
}

.fa-money-check-alt {
  --fa: "\f53d";
}

.fa-vector-square {
  --fa: "\f5cb";
}

.fa-bread-slice {
  --fa: "\f7ec";
}

.fa-language {
  --fa: "\f1ab";
}

.fa-face-kiss-wink-heart {
  --fa: "\f598";
}

.fa-kiss-wink-heart {
  --fa: "\f598";
}

.fa-filter {
  --fa: "\f0b0";
}

.fa-question {
  --fa: "\?";
}

.fa-file-signature {
  --fa: "\f573";
}

.fa-up-down-left-right {
  --fa: "\f0b2";
}

.fa-arrows-alt {
  --fa: "\f0b2";
}

.fa-house-chimney-user {
  --fa: "\e065";
}

.fa-hand-holding-heart {
  --fa: "\f4be";
}

.fa-puzzle-piece {
  --fa: "\f12e";
}

.fa-money-check {
  --fa: "\f53c";
}

.fa-star-half-stroke {
  --fa: "\f5c0";
}

.fa-star-half-alt {
  --fa: "\f5c0";
}

.fa-code {
  --fa: "\f121";
}

.fa-whiskey-glass {
  --fa: "\f7a0";
}

.fa-glass-whiskey {
  --fa: "\f7a0";
}

.fa-building-circle-exclamation {
  --fa: "\e4d3";
}

.fa-magnifying-glass-chart {
  --fa: "\e522";
}

.fa-arrow-up-right-from-square {
  --fa: "\f08e";
}

.fa-external-link {
  --fa: "\f08e";
}

.fa-cubes-stacked {
  --fa: "\e4e6";
}

.fa-won-sign {
  --fa: "\f159";
}

.fa-krw {
  --fa: "\f159";
}

.fa-won {
  --fa: "\f159";
}

.fa-virus-covid {
  --fa: "\e4a8";
}

.fa-austral-sign {
  --fa: "\e0a9";
}

.fa-f {
  --fa: "F";
}

.fa-leaf {
  --fa: "\f06c";
}

.fa-road {
  --fa: "\f018";
}

.fa-taxi {
  --fa: "\f1ba";
}

.fa-cab {
  --fa: "\f1ba";
}

.fa-person-circle-plus {
  --fa: "\e541";
}

.fa-chart-pie {
  --fa: "\f200";
}

.fa-pie-chart {
  --fa: "\f200";
}

.fa-bolt-lightning {
  --fa: "\e0b7";
}

.fa-sack-xmark {
  --fa: "\e56a";
}

.fa-file-excel {
  --fa: "\f1c3";
}

.fa-file-contract {
  --fa: "\f56c";
}

.fa-fish-fins {
  --fa: "\e4f2";
}

.fa-building-flag {
  --fa: "\e4d5";
}

.fa-face-grin-beam {
  --fa: "\f582";
}

.fa-grin-beam {
  --fa: "\f582";
}

.fa-object-ungroup {
  --fa: "\f248";
}

.fa-poop {
  --fa: "\f619";
}

.fa-location-pin {
  --fa: "\f041";
}

.fa-map-marker {
  --fa: "\f041";
}

.fa-kaaba {
  --fa: "\f66b";
}

.fa-toilet-paper {
  --fa: "\f71e";
}

.fa-helmet-safety {
  --fa: "\f807";
}

.fa-hard-hat {
  --fa: "\f807";
}

.fa-hat-hard {
  --fa: "\f807";
}

.fa-eject {
  --fa: "\f052";
}

.fa-circle-right {
  --fa: "\f35a";
}

.fa-arrow-alt-circle-right {
  --fa: "\f35a";
}

.fa-plane-circle-check {
  --fa: "\e555";
}

.fa-face-rolling-eyes {
  --fa: "\f5a5";
}

.fa-meh-rolling-eyes {
  --fa: "\f5a5";
}

.fa-object-group {
  --fa: "\f247";
}

.fa-chart-line {
  --fa: "\f201";
}

.fa-line-chart {
  --fa: "\f201";
}

.fa-mask-ventilator {
  --fa: "\e524";
}

.fa-arrow-right {
  --fa: "\f061";
}

.fa-signs-post {
  --fa: "\f277";
}

.fa-map-signs {
  --fa: "\f277";
}

.fa-cash-register {
  --fa: "\f788";
}

.fa-person-circle-question {
  --fa: "\e542";
}

.fa-h {
  --fa: "H";
}

.fa-tarp {
  --fa: "\e57b";
}

.fa-screwdriver-wrench {
  --fa: "\f7d9";
}

.fa-tools {
  --fa: "\f7d9";
}

.fa-arrows-to-eye {
  --fa: "\e4bf";
}

.fa-plug-circle-bolt {
  --fa: "\e55b";
}

.fa-heart {
  --fa: "\f004";
}

.fa-mars-and-venus {
  --fa: "\f224";
}

.fa-house-user {
  --fa: "\e1b0";
}

.fa-home-user {
  --fa: "\e1b0";
}

.fa-dumpster-fire {
  --fa: "\f794";
}

.fa-house-crack {
  --fa: "\e3b1";
}

.fa-martini-glass-citrus {
  --fa: "\f561";
}

.fa-cocktail {
  --fa: "\f561";
}

.fa-face-surprise {
  --fa: "\f5c2";
}

.fa-surprise {
  --fa: "\f5c2";
}

.fa-bottle-water {
  --fa: "\e4c5";
}

.fa-circle-pause {
  --fa: "\f28b";
}

.fa-pause-circle {
  --fa: "\f28b";
}

.fa-toilet-paper-slash {
  --fa: "\e072";
}

.fa-apple-whole {
  --fa: "\f5d1";
}

.fa-apple-alt {
  --fa: "\f5d1";
}

.fa-kitchen-set {
  --fa: "\e51a";
}

.fa-r {
  --fa: "R";
}

.fa-temperature-quarter {
  --fa: "\f2ca";
}

.fa-temperature-1 {
  --fa: "\f2ca";
}

.fa-thermometer-1 {
  --fa: "\f2ca";
}

.fa-thermometer-quarter {
  --fa: "\f2ca";
}

.fa-cube {
  --fa: "\f1b2";
}

.fa-bitcoin-sign {
  --fa: "\e0b4";
}

.fa-shield-dog {
  --fa: "\e573";
}

.fa-solar-panel {
  --fa: "\f5ba";
}

.fa-lock-open {
  --fa: "\f3c1";
}

.fa-elevator {
  --fa: "\e16d";
}

.fa-money-bill-transfer {
  --fa: "\e528";
}

.fa-money-bill-trend-up {
  --fa: "\e529";
}

.fa-house-flood-water-circle-arrow-right {
  --fa: "\e50f";
}

.fa-square-poll-horizontal {
  --fa: "\f682";
}

.fa-poll-h {
  --fa: "\f682";
}

.fa-circle {
  --fa: "\f111";
}

.fa-backward-fast {
  --fa: "\f049";
}

.fa-fast-backward {
  --fa: "\f049";
}

.fa-recycle {
  --fa: "\f1b8";
}

.fa-user-astronaut {
  --fa: "\f4fb";
}

.fa-plane-slash {
  --fa: "\e069";
}

.fa-trademark {
  --fa: "\f25c";
}

.fa-basketball {
  --fa: "\f434";
}

.fa-basketball-ball {
  --fa: "\f434";
}

.fa-satellite-dish {
  --fa: "\f7c0";
}

.fa-circle-up {
  --fa: "\f35b";
}

.fa-arrow-alt-circle-up {
  --fa: "\f35b";
}

.fa-mobile-screen-button {
  --fa: "\f3cd";
}

.fa-mobile-alt {
  --fa: "\f3cd";
}

.fa-volume-high {
  --fa: "\f028";
}

.fa-volume-up {
  --fa: "\f028";
}

.fa-users-rays {
  --fa: "\e593";
}

.fa-wallet {
  --fa: "\f555";
}

.fa-clipboard-check {
  --fa: "\f46c";
}

.fa-file-audio {
  --fa: "\f1c7";
}

.fa-burger {
  --fa: "\f805";
}

.fa-hamburger {
  --fa: "\f805";
}

.fa-wrench {
  --fa: "\f0ad";
}

.fa-bugs {
  --fa: "\e4d0";
}

.fa-rupee-sign {
  --fa: "\f156";
}

.fa-rupee {
  --fa: "\f156";
}

.fa-file-image {
  --fa: "\f1c5";
}

.fa-circle-question {
  --fa: "\f059";
}

.fa-question-circle {
  --fa: "\f059";
}

.fa-plane-departure {
  --fa: "\f5b0";
}

.fa-handshake-slash {
  --fa: "\e060";
}

.fa-book-bookmark {
  --fa: "\e0bb";
}

.fa-code-branch {
  --fa: "\f126";
}

.fa-hat-cowboy {
  --fa: "\f8c0";
}

.fa-bridge {
  --fa: "\e4c8";
}

.fa-phone-flip {
  --fa: "\f879";
}

.fa-phone-alt {
  --fa: "\f879";
}

.fa-truck-front {
  --fa: "\e2b7";
}

.fa-cat {
  --fa: "\f6be";
}

.fa-anchor-circle-exclamation {
  --fa: "\e4ab";
}

.fa-truck-field {
  --fa: "\e58d";
}

.fa-route {
  --fa: "\f4d7";
}

.fa-clipboard-question {
  --fa: "\e4e3";
}

.fa-panorama {
  --fa: "\e209";
}

.fa-comment-medical {
  --fa: "\f7f5";
}

.fa-teeth-open {
  --fa: "\f62f";
}

.fa-file-circle-minus {
  --fa: "\e4ed";
}

.fa-tags {
  --fa: "\f02c";
}

.fa-wine-glass {
  --fa: "\f4e3";
}

.fa-forward-fast {
  --fa: "\f050";
}

.fa-fast-forward {
  --fa: "\f050";
}

.fa-face-meh-blank {
  --fa: "\f5a4";
}

.fa-meh-blank {
  --fa: "\f5a4";
}

.fa-square-parking {
  --fa: "\f540";
}

.fa-parking {
  --fa: "\f540";
}

.fa-house-signal {
  --fa: "\e012";
}

.fa-bars-progress {
  --fa: "\f828";
}

.fa-tasks-alt {
  --fa: "\f828";
}

.fa-faucet-drip {
  --fa: "\e006";
}

.fa-cart-flatbed {
  --fa: "\f474";
}

.fa-dolly-flatbed {
  --fa: "\f474";
}

.fa-ban-smoking {
  --fa: "\f54d";
}

.fa-smoking-ban {
  --fa: "\f54d";
}

.fa-terminal {
  --fa: "\f120";
}

.fa-mobile-button {
  --fa: "\f10b";
}

.fa-house-medical-flag {
  --fa: "\e514";
}

.fa-basket-shopping {
  --fa: "\f291";
}

.fa-shopping-basket {
  --fa: "\f291";
}

.fa-tape {
  --fa: "\f4db";
}

.fa-bus-simple {
  --fa: "\f55e";
}

.fa-bus-alt {
  --fa: "\f55e";
}

.fa-eye {
  --fa: "\f06e";
}

.fa-face-sad-cry {
  --fa: "\f5b3";
}

.fa-sad-cry {
  --fa: "\f5b3";
}

.fa-audio-description {
  --fa: "\f29e";
}

.fa-person-military-to-person {
  --fa: "\e54c";
}

.fa-file-shield {
  --fa: "\e4f0";
}

.fa-user-slash {
  --fa: "\f506";
}

.fa-pen {
  --fa: "\f304";
}

.fa-tower-observation {
  --fa: "\e586";
}

.fa-file-code {
  --fa: "\f1c9";
}

.fa-signal {
  --fa: "\f012";
}

.fa-signal-5 {
  --fa: "\f012";
}

.fa-signal-perfect {
  --fa: "\f012";
}

.fa-bus {
  --fa: "\f207";
}

.fa-heart-circle-xmark {
  --fa: "\e501";
}

.fa-house-chimney {
  --fa: "\e3af";
}

.fa-home-lg {
  --fa: "\e3af";
}

.fa-window-maximize {
  --fa: "\f2d0";
}

.fa-face-frown {
  --fa: "\f119";
}

.fa-frown {
  --fa: "\f119";
}

.fa-prescription {
  --fa: "\f5b1";
}

.fa-shop {
  --fa: "\f54f";
}

.fa-store-alt {
  --fa: "\f54f";
}

.fa-floppy-disk {
  --fa: "\f0c7";
}

.fa-save {
  --fa: "\f0c7";
}

.fa-vihara {
  --fa: "\f6a7";
}

.fa-scale-unbalanced {
  --fa: "\f515";
}

.fa-balance-scale-left {
  --fa: "\f515";
}

.fa-sort-up {
  --fa: "\f0de";
}

.fa-sort-asc {
  --fa: "\f0de";
}

.fa-comment-dots {
  --fa: "\f4ad";
}

.fa-commenting {
  --fa: "\f4ad";
}

.fa-plant-wilt {
  --fa: "\e5aa";
}

.fa-diamond {
  --fa: "\f219";
}

.fa-face-grin-squint {
  --fa: "\f585";
}

.fa-grin-squint {
  --fa: "\f585";
}

.fa-hand-holding-dollar {
  --fa: "\f4c0";
}

.fa-hand-holding-usd {
  --fa: "\f4c0";
}

.fa-chart-diagram {
  --fa: "\e695";
}

.fa-bacterium {
  --fa: "\e05a";
}

.fa-hand-pointer {
  --fa: "\f25a";
}

.fa-drum-steelpan {
  --fa: "\f56a";
}

.fa-hand-scissors {
  --fa: "\f257";
}

.fa-hands-praying {
  --fa: "\f684";
}

.fa-praying-hands {
  --fa: "\f684";
}

.fa-arrow-rotate-right {
  --fa: "\f01e";
}

.fa-arrow-right-rotate {
  --fa: "\f01e";
}

.fa-arrow-rotate-forward {
  --fa: "\f01e";
}

.fa-redo {
  --fa: "\f01e";
}

.fa-biohazard {
  --fa: "\f780";
}

.fa-location-crosshairs {
  --fa: "\f601";
}

.fa-location {
  --fa: "\f601";
}

.fa-mars-double {
  --fa: "\f227";
}

.fa-child-dress {
  --fa: "\e59c";
}

.fa-users-between-lines {
  --fa: "\e591";
}

.fa-lungs-virus {
  --fa: "\e067";
}

.fa-face-grin-tears {
  --fa: "\f588";
}

.fa-grin-tears {
  --fa: "\f588";
}

.fa-phone {
  --fa: "\f095";
}

.fa-calendar-xmark {
  --fa: "\f273";
}

.fa-calendar-times {
  --fa: "\f273";
}

.fa-child-reaching {
  --fa: "\e59d";
}

.fa-head-side-virus {
  --fa: "\e064";
}

.fa-user-gear {
  --fa: "\f4fe";
}

.fa-user-cog {
  --fa: "\f4fe";
}

.fa-arrow-up-1-9 {
  --fa: "\f163";
}

.fa-sort-numeric-up {
  --fa: "\f163";
}

.fa-door-closed {
  --fa: "\f52a";
}

.fa-shield-virus {
  --fa: "\e06c";
}

.fa-dice-six {
  --fa: "\f526";
}

.fa-mosquito-net {
  --fa: "\e52c";
}

.fa-file-fragment {
  --fa: "\e697";
}

.fa-bridge-water {
  --fa: "\e4ce";
}

.fa-person-booth {
  --fa: "\f756";
}

.fa-text-width {
  --fa: "\f035";
}

.fa-hat-wizard {
  --fa: "\f6e8";
}

.fa-pen-fancy {
  --fa: "\f5ac";
}

.fa-person-digging {
  --fa: "\f85e";
}

.fa-digging {
  --fa: "\f85e";
}

.fa-trash {
  --fa: "\f1f8";
}

.fa-gauge-simple {
  --fa: "\f629";
}

.fa-gauge-simple-med {
  --fa: "\f629";
}

.fa-tachometer-average {
  --fa: "\f629";
}

.fa-book-medical {
  --fa: "\f7e6";
}

.fa-poo {
  --fa: "\f2fe";
}

.fa-quote-right {
  --fa: "\f10e";
}

.fa-quote-right-alt {
  --fa: "\f10e";
}

.fa-shirt {
  --fa: "\f553";
}

.fa-t-shirt {
  --fa: "\f553";
}

.fa-tshirt {
  --fa: "\f553";
}

.fa-cubes {
  --fa: "\f1b3";
}

.fa-divide {
  --fa: "\f529";
}

.fa-tenge-sign {
  --fa: "\f7d7";
}

.fa-tenge {
  --fa: "\f7d7";
}

.fa-headphones {
  --fa: "\f025";
}

.fa-hands-holding {
  --fa: "\f4c2";
}

.fa-hands-clapping {
  --fa: "\e1a8";
}

.fa-republican {
  --fa: "\f75e";
}

.fa-arrow-left {
  --fa: "\f060";
}

.fa-person-circle-xmark {
  --fa: "\e543";
}

.fa-ruler {
  --fa: "\f545";
}

.fa-align-left {
  --fa: "\f036";
}

.fa-dice-d6 {
  --fa: "\f6d1";
}

.fa-restroom {
  --fa: "\f7bd";
}

.fa-j {
  --fa: "J";
}

.fa-users-viewfinder {
  --fa: "\e595";
}

.fa-file-video {
  --fa: "\f1c8";
}

.fa-up-right-from-square {
  --fa: "\f35d";
}

.fa-external-link-alt {
  --fa: "\f35d";
}

.fa-table-cells {
  --fa: "\f00a";
}

.fa-th {
  --fa: "\f00a";
}

.fa-file-pdf {
  --fa: "\f1c1";
}

.fa-book-bible {
  --fa: "\f647";
}

.fa-bible {
  --fa: "\f647";
}

.fa-o {
  --fa: "O";
}

.fa-suitcase-medical {
  --fa: "\f0fa";
}

.fa-medkit {
  --fa: "\f0fa";
}

.fa-user-secret {
  --fa: "\f21b";
}

.fa-otter {
  --fa: "\f700";
}

.fa-person-dress {
  --fa: "\f182";
}

.fa-female {
  --fa: "\f182";
}

.fa-comment-dollar {
  --fa: "\f651";
}

.fa-business-time {
  --fa: "\f64a";
}

.fa-briefcase-clock {
  --fa: "\f64a";
}

.fa-table-cells-large {
  --fa: "\f009";
}

.fa-th-large {
  --fa: "\f009";
}

.fa-book-tanakh {
  --fa: "\f827";
}

.fa-tanakh {
  --fa: "\f827";
}

.fa-phone-volume {
  --fa: "\f2a0";
}

.fa-volume-control-phone {
  --fa: "\f2a0";
}

.fa-hat-cowboy-side {
  --fa: "\f8c1";
}

.fa-clipboard-user {
  --fa: "\f7f3";
}

.fa-child {
  --fa: "\f1ae";
}

.fa-lira-sign {
  --fa: "\f195";
}

.fa-satellite {
  --fa: "\f7bf";
}

.fa-plane-lock {
  --fa: "\e558";
}

.fa-tag {
  --fa: "\f02b";
}

.fa-comment {
  --fa: "\f075";
}

.fa-cake-candles {
  --fa: "\f1fd";
}

.fa-birthday-cake {
  --fa: "\f1fd";
}

.fa-cake {
  --fa: "\f1fd";
}

.fa-envelope {
  --fa: "\f0e0";
}

.fa-angles-up {
  --fa: "\f102";
}

.fa-angle-double-up {
  --fa: "\f102";
}

.fa-paperclip {
  --fa: "\f0c6";
}

.fa-arrow-right-to-city {
  --fa: "\e4b3";
}

.fa-ribbon {
  --fa: "\f4d6";
}

.fa-lungs {
  --fa: "\f604";
}

.fa-arrow-up-9-1 {
  --fa: "\f887";
}

.fa-sort-numeric-up-alt {
  --fa: "\f887";
}

.fa-litecoin-sign {
  --fa: "\e1d3";
}

.fa-border-none {
  --fa: "\f850";
}

.fa-circle-nodes {
  --fa: "\e4e2";
}

.fa-parachute-box {
  --fa: "\f4cd";
}

.fa-indent {
  --fa: "\f03c";
}

.fa-truck-field-un {
  --fa: "\e58e";
}

.fa-hourglass {
  --fa: "\f254";
}

.fa-hourglass-empty {
  --fa: "\f254";
}

.fa-mountain {
  --fa: "\f6fc";
}

.fa-user-doctor {
  --fa: "\f0f0";
}

.fa-user-md {
  --fa: "\f0f0";
}

.fa-circle-info {
  --fa: "\f05a";
}

.fa-info-circle {
  --fa: "\f05a";
}

.fa-cloud-meatball {
  --fa: "\f73b";
}

.fa-camera {
  --fa: "\f030";
}

.fa-camera-alt {
  --fa: "\f030";
}

.fa-square-virus {
  --fa: "\e578";
}

.fa-meteor {
  --fa: "\f753";
}

.fa-car-on {
  --fa: "\e4dd";
}

.fa-sleigh {
  --fa: "\f7cc";
}

.fa-arrow-down-1-9 {
  --fa: "\f162";
}

.fa-sort-numeric-asc {
  --fa: "\f162";
}

.fa-sort-numeric-down {
  --fa: "\f162";
}

.fa-hand-holding-droplet {
  --fa: "\f4c1";
}

.fa-hand-holding-water {
  --fa: "\f4c1";
}

.fa-water {
  --fa: "\f773";
}

.fa-calendar-check {
  --fa: "\f274";
}

.fa-braille {
  --fa: "\f2a1";
}

.fa-prescription-bottle-medical {
  --fa: "\f486";
}

.fa-prescription-bottle-alt {
  --fa: "\f486";
}

.fa-landmark {
  --fa: "\f66f";
}

.fa-truck {
  --fa: "\f0d1";
}

.fa-crosshairs {
  --fa: "\f05b";
}

.fa-person-cane {
  --fa: "\e53c";
}

.fa-tent {
  --fa: "\e57d";
}

.fa-vest-patches {
  --fa: "\e086";
}

.fa-check-double {
  --fa: "\f560";
}

.fa-arrow-down-a-z {
  --fa: "\f15d";
}

.fa-sort-alpha-asc {
  --fa: "\f15d";
}

.fa-sort-alpha-down {
  --fa: "\f15d";
}

.fa-money-bill-wheat {
  --fa: "\e52a";
}

.fa-cookie {
  --fa: "\f563";
}

.fa-arrow-rotate-left {
  --fa: "\f0e2";
}

.fa-arrow-left-rotate {
  --fa: "\f0e2";
}

.fa-arrow-rotate-back {
  --fa: "\f0e2";
}

.fa-arrow-rotate-backward {
  --fa: "\f0e2";
}

.fa-undo {
  --fa: "\f0e2";
}

.fa-hard-drive {
  --fa: "\f0a0";
}

.fa-hdd {
  --fa: "\f0a0";
}

.fa-face-grin-squint-tears {
  --fa: "\f586";
}

.fa-grin-squint-tears {
  --fa: "\f586";
}

.fa-dumbbell {
  --fa: "\f44b";
}

.fa-rectangle-list {
  --fa: "\f022";
}

.fa-list-alt {
  --fa: "\f022";
}

.fa-tarp-droplet {
  --fa: "\e57c";
}

.fa-house-medical-circle-check {
  --fa: "\e511";
}

.fa-person-skiing-nordic {
  --fa: "\f7ca";
}

.fa-skiing-nordic {
  --fa: "\f7ca";
}

.fa-calendar-plus {
  --fa: "\f271";
}

.fa-plane-arrival {
  --fa: "\f5af";
}

.fa-circle-left {
  --fa: "\f359";
}

.fa-arrow-alt-circle-left {
  --fa: "\f359";
}

.fa-train-subway {
  --fa: "\f239";
}

.fa-subway {
  --fa: "\f239";
}

.fa-chart-gantt {
  --fa: "\e0e4";
}

.fa-indian-rupee-sign {
  --fa: "\e1bc";
}

.fa-indian-rupee {
  --fa: "\e1bc";
}

.fa-inr {
  --fa: "\e1bc";
}

.fa-crop-simple {
  --fa: "\f565";
}

.fa-crop-alt {
  --fa: "\f565";
}

.fa-money-bill-1 {
  --fa: "\f3d1";
}

.fa-money-bill-alt {
  --fa: "\f3d1";
}

.fa-left-long {
  --fa: "\f30a";
}

.fa-long-arrow-alt-left {
  --fa: "\f30a";
}

.fa-dna {
  --fa: "\f471";
}

.fa-virus-slash {
  --fa: "\e075";
}

.fa-minus {
  --fa: "\f068";
}

.fa-subtract {
  --fa: "\f068";
}

.fa-chess {
  --fa: "\f439";
}

.fa-arrow-left-long {
  --fa: "\f177";
}

.fa-long-arrow-left {
  --fa: "\f177";
}

.fa-plug-circle-check {
  --fa: "\e55c";
}

.fa-street-view {
  --fa: "\f21d";
}

.fa-franc-sign {
  --fa: "\e18f";
}

.fa-volume-off {
  --fa: "\f026";
}

.fa-hands-asl-interpreting {
  --fa: "\f2a3";
}

.fa-american-sign-language-interpreting {
  --fa: "\f2a3";
}

.fa-asl-interpreting {
  --fa: "\f2a3";
}

.fa-hands-american-sign-language-interpreting {
  --fa: "\f2a3";
}

.fa-gear {
  --fa: "\f013";
}

.fa-cog {
  --fa: "\f013";
}

.fa-droplet-slash {
  --fa: "\f5c7";
}

.fa-tint-slash {
  --fa: "\f5c7";
}

.fa-mosque {
  --fa: "\f678";
}

.fa-mosquito {
  --fa: "\e52b";
}

.fa-star-of-david {
  --fa: "\f69a";
}

.fa-person-military-rifle {
  --fa: "\e54b";
}

.fa-cart-shopping {
  --fa: "\f07a";
}

.fa-shopping-cart {
  --fa: "\f07a";
}

.fa-vials {
  --fa: "\f493";
}

.fa-plug-circle-plus {
  --fa: "\e55f";
}

.fa-place-of-worship {
  --fa: "\f67f";
}

.fa-grip-vertical {
  --fa: "\f58e";
}

.fa-hexagon-nodes {
  --fa: "\e699";
}

.fa-arrow-turn-up {
  --fa: "\f148";
}

.fa-level-up {
  --fa: "\f148";
}

.fa-u {
  --fa: "U";
}

.fa-square-root-variable {
  --fa: "\f698";
}

.fa-square-root-alt {
  --fa: "\f698";
}

.fa-clock {
  --fa: "\f017";
}

.fa-clock-four {
  --fa: "\f017";
}

.fa-backward-step {
  --fa: "\f048";
}

.fa-step-backward {
  --fa: "\f048";
}

.fa-pallet {
  --fa: "\f482";
}

.fa-faucet {
  --fa: "\e005";
}

.fa-baseball-bat-ball {
  --fa: "\f432";
}

.fa-s {
  --fa: "S";
}

.fa-timeline {
  --fa: "\e29c";
}

.fa-keyboard {
  --fa: "\f11c";
}

.fa-caret-down {
  --fa: "\f0d7";
}

.fa-house-chimney-medical {
  --fa: "\f7f2";
}

.fa-clinic-medical {
  --fa: "\f7f2";
}

.fa-temperature-three-quarters {
  --fa: "\f2c8";
}

.fa-temperature-3 {
  --fa: "\f2c8";
}

.fa-thermometer-3 {
  --fa: "\f2c8";
}

.fa-thermometer-three-quarters {
  --fa: "\f2c8";
}

.fa-mobile-screen {
  --fa: "\f3cf";
}

.fa-mobile-android-alt {
  --fa: "\f3cf";
}

.fa-plane-up {
  --fa: "\e22d";
}

.fa-piggy-bank {
  --fa: "\f4d3";
}

.fa-battery-half {
  --fa: "\f242";
}

.fa-battery-3 {
  --fa: "\f242";
}

.fa-mountain-city {
  --fa: "\e52e";
}

.fa-coins {
  --fa: "\f51e";
}

.fa-khanda {
  --fa: "\f66d";
}

.fa-sliders {
  --fa: "\f1de";
}

.fa-sliders-h {
  --fa: "\f1de";
}

.fa-folder-tree {
  --fa: "\f802";
}

.fa-network-wired {
  --fa: "\f6ff";
}

.fa-map-pin {
  --fa: "\f276";
}

.fa-hamsa {
  --fa: "\f665";
}

.fa-cent-sign {
  --fa: "\e3f5";
}

.fa-flask {
  --fa: "\f0c3";
}

.fa-person-pregnant {
  --fa: "\e31e";
}

.fa-wand-sparkles {
  --fa: "\f72b";
}

.fa-ellipsis-vertical {
  --fa: "\f142";
}

.fa-ellipsis-v {
  --fa: "\f142";
}

.fa-ticket {
  --fa: "\f145";
}

.fa-power-off {
  --fa: "\f011";
}

.fa-right-long {
  --fa: "\f30b";
}

.fa-long-arrow-alt-right {
  --fa: "\f30b";
}

.fa-flag-usa {
  --fa: "\f74d";
}

.fa-laptop-file {
  --fa: "\e51d";
}

.fa-tty {
  --fa: "\f1e4";
}

.fa-teletype {
  --fa: "\f1e4";
}

.fa-diagram-next {
  --fa: "\e476";
}

.fa-person-rifle {
  --fa: "\e54e";
}

.fa-house-medical-circle-exclamation {
  --fa: "\e512";
}

.fa-closed-captioning {
  --fa: "\f20a";
}

.fa-person-hiking {
  --fa: "\f6ec";
}

.fa-hiking {
  --fa: "\f6ec";
}

.fa-venus-double {
  --fa: "\f226";
}

.fa-images {
  --fa: "\f302";
}

.fa-calculator {
  --fa: "\f1ec";
}

.fa-people-pulling {
  --fa: "\e535";
}

.fa-n {
  --fa: "N";
}

.fa-cable-car {
  --fa: "\f7da";
}

.fa-tram {
  --fa: "\f7da";
}

.fa-cloud-rain {
  --fa: "\f73d";
}

.fa-building-circle-xmark {
  --fa: "\e4d4";
}

.fa-ship {
  --fa: "\f21a";
}

.fa-arrows-down-to-line {
  --fa: "\e4b8";
}

.fa-download {
  --fa: "\f019";
}

.fa-face-grin {
  --fa: "\f580";
}

.fa-grin {
  --fa: "\f580";
}

.fa-delete-left {
  --fa: "\f55a";
}

.fa-backspace {
  --fa: "\f55a";
}

.fa-eye-dropper {
  --fa: "\f1fb";
}

.fa-eye-dropper-empty {
  --fa: "\f1fb";
}

.fa-eyedropper {
  --fa: "\f1fb";
}

.fa-file-circle-check {
  --fa: "\e5a0";
}

.fa-forward {
  --fa: "\f04e";
}

.fa-mobile {
  --fa: "\f3ce";
}

.fa-mobile-android {
  --fa: "\f3ce";
}

.fa-mobile-phone {
  --fa: "\f3ce";
}

.fa-face-meh {
  --fa: "\f11a";
}

.fa-meh {
  --fa: "\f11a";
}

.fa-align-center {
  --fa: "\f037";
}

.fa-book-skull {
  --fa: "\f6b7";
}

.fa-book-dead {
  --fa: "\f6b7";
}

.fa-id-card {
  --fa: "\f2c2";
}

.fa-drivers-license {
  --fa: "\f2c2";
}

.fa-outdent {
  --fa: "\f03b";
}

.fa-dedent {
  --fa: "\f03b";
}

.fa-heart-circle-exclamation {
  --fa: "\e4fe";
}

.fa-house {
  --fa: "\f015";
}

.fa-home {
  --fa: "\f015";
}

.fa-home-alt {
  --fa: "\f015";
}

.fa-home-lg-alt {
  --fa: "\f015";
}

.fa-calendar-week {
  --fa: "\f784";
}

.fa-laptop-medical {
  --fa: "\f812";
}

.fa-b {
  --fa: "B";
}

.fa-file-medical {
  --fa: "\f477";
}

.fa-dice-one {
  --fa: "\f525";
}

.fa-kiwi-bird {
  --fa: "\f535";
}

.fa-arrow-right-arrow-left {
  --fa: "\f0ec";
}

.fa-exchange {
  --fa: "\f0ec";
}

.fa-rotate-right {
  --fa: "\f2f9";
}

.fa-redo-alt {
  --fa: "\f2f9";
}

.fa-rotate-forward {
  --fa: "\f2f9";
}

.fa-utensils {
  --fa: "\f2e7";
}

.fa-cutlery {
  --fa: "\f2e7";
}

.fa-arrow-up-wide-short {
  --fa: "\f161";
}

.fa-sort-amount-up {
  --fa: "\f161";
}

.fa-mill-sign {
  --fa: "\e1ed";
}

.fa-bowl-rice {
  --fa: "\e2eb";
}

.fa-skull {
  --fa: "\f54c";
}

.fa-tower-broadcast {
  --fa: "\f519";
}

.fa-broadcast-tower {
  --fa: "\f519";
}

.fa-truck-pickup {
  --fa: "\f63c";
}

.fa-up-long {
  --fa: "\f30c";
}

.fa-long-arrow-alt-up {
  --fa: "\f30c";
}

.fa-stop {
  --fa: "\f04d";
}

.fa-code-merge {
  --fa: "\f387";
}

.fa-upload {
  --fa: "\f093";
}

.fa-hurricane {
  --fa: "\f751";
}

.fa-mound {
  --fa: "\e52d";
}

.fa-toilet-portable {
  --fa: "\e583";
}

.fa-compact-disc {
  --fa: "\f51f";
}

.fa-file-arrow-down {
  --fa: "\f56d";
}

.fa-file-download {
  --fa: "\f56d";
}

.fa-caravan {
  --fa: "\f8ff";
}

.fa-shield-cat {
  --fa: "\e572";
}

.fa-bolt {
  --fa: "\f0e7";
}

.fa-zap {
  --fa: "\f0e7";
}

.fa-glass-water {
  --fa: "\e4f4";
}

.fa-oil-well {
  --fa: "\e532";
}

.fa-vault {
  --fa: "\e2c5";
}

.fa-mars {
  --fa: "\f222";
}

.fa-toilet {
  --fa: "\f7d8";
}

.fa-plane-circle-xmark {
  --fa: "\e557";
}

.fa-yen-sign {
  --fa: "\f157";
}

.fa-cny {
  --fa: "\f157";
}

.fa-jpy {
  --fa: "\f157";
}

.fa-rmb {
  --fa: "\f157";
}

.fa-yen {
  --fa: "\f157";
}

.fa-ruble-sign {
  --fa: "\f158";
}

.fa-rouble {
  --fa: "\f158";
}

.fa-rub {
  --fa: "\f158";
}

.fa-ruble {
  --fa: "\f158";
}

.fa-sun {
  --fa: "\f185";
}

.fa-guitar {
  --fa: "\f7a6";
}

.fa-face-laugh-wink {
  --fa: "\f59c";
}

.fa-laugh-wink {
  --fa: "\f59c";
}

.fa-horse-head {
  --fa: "\f7ab";
}

.fa-bore-hole {
  --fa: "\e4c3";
}

.fa-industry {
  --fa: "\f275";
}

.fa-circle-down {
  --fa: "\f358";
}

.fa-arrow-alt-circle-down {
  --fa: "\f358";
}

.fa-arrows-turn-to-dots {
  --fa: "\e4c1";
}

.fa-florin-sign {
  --fa: "\e184";
}

.fa-arrow-down-short-wide {
  --fa: "\f884";
}

.fa-sort-amount-desc {
  --fa: "\f884";
}

.fa-sort-amount-down-alt {
  --fa: "\f884";
}

.fa-less-than {
  --fa: "\<";
}

.fa-angle-down {
  --fa: "\f107";
}

.fa-car-tunnel {
  --fa: "\e4de";
}

.fa-head-side-cough {
  --fa: "\e061";
}

.fa-grip-lines {
  --fa: "\f7a4";
}

.fa-thumbs-down {
  --fa: "\f165";
}

.fa-user-lock {
  --fa: "\f502";
}

.fa-arrow-right-long {
  --fa: "\f178";
}

.fa-long-arrow-right {
  --fa: "\f178";
}

.fa-anchor-circle-xmark {
  --fa: "\e4ac";
}

.fa-ellipsis {
  --fa: "\f141";
}

.fa-ellipsis-h {
  --fa: "\f141";
}

.fa-chess-pawn {
  --fa: "\f443";
}

.fa-kit-medical {
  --fa: "\f479";
}

.fa-first-aid {
  --fa: "\f479";
}

.fa-person-through-window {
  --fa: "\e5a9";
}

.fa-toolbox {
  --fa: "\f552";
}

.fa-hands-holding-circle {
  --fa: "\e4fb";
}

.fa-bug {
  --fa: "\f188";
}

.fa-credit-card {
  --fa: "\f09d";
}

.fa-credit-card-alt {
  --fa: "\f09d";
}

.fa-car {
  --fa: "\f1b9";
}

.fa-automobile {
  --fa: "\f1b9";
}

.fa-hand-holding-hand {
  --fa: "\e4f7";
}

.fa-book-open-reader {
  --fa: "\f5da";
}

.fa-book-reader {
  --fa: "\f5da";
}

.fa-mountain-sun {
  --fa: "\e52f";
}

.fa-arrows-left-right-to-line {
  --fa: "\e4ba";
}

.fa-dice-d20 {
  --fa: "\f6cf";
}

.fa-truck-droplet {
  --fa: "\e58c";
}

.fa-file-circle-xmark {
  --fa: "\e5a1";
}

.fa-temperature-arrow-up {
  --fa: "\e040";
}

.fa-temperature-up {
  --fa: "\e040";
}

.fa-medal {
  --fa: "\f5a2";
}

.fa-bed {
  --fa: "\f236";
}

.fa-square-h {
  --fa: "\f0fd";
}

.fa-h-square {
  --fa: "\f0fd";
}

.fa-podcast {
  --fa: "\f2ce";
}

.fa-temperature-full {
  --fa: "\f2c7";
}

.fa-temperature-4 {
  --fa: "\f2c7";
}

.fa-thermometer-4 {
  --fa: "\f2c7";
}

.fa-thermometer-full {
  --fa: "\f2c7";
}

.fa-bell {
  --fa: "\f0f3";
}

.fa-superscript {
  --fa: "\f12b";
}

.fa-plug-circle-xmark {
  --fa: "\e560";
}

.fa-star-of-life {
  --fa: "\f621";
}

.fa-phone-slash {
  --fa: "\f3dd";
}

.fa-paint-roller {
  --fa: "\f5aa";
}

.fa-handshake-angle {
  --fa: "\f4c4";
}

.fa-hands-helping {
  --fa: "\f4c4";
}

.fa-location-dot {
  --fa: "\f3c5";
}

.fa-map-marker-alt {
  --fa: "\f3c5";
}

.fa-file {
  --fa: "\f15b";
}

.fa-greater-than {
  --fa: "\>";
}

.fa-person-swimming {
  --fa: "\f5c4";
}

.fa-swimmer {
  --fa: "\f5c4";
}

.fa-arrow-down {
  --fa: "\f063";
}

.fa-droplet {
  --fa: "\f043";
}

.fa-tint {
  --fa: "\f043";
}

.fa-eraser {
  --fa: "\f12d";
}

.fa-earth-americas {
  --fa: "\f57d";
}

.fa-earth {
  --fa: "\f57d";
}

.fa-earth-america {
  --fa: "\f57d";
}

.fa-globe-americas {
  --fa: "\f57d";
}

.fa-person-burst {
  --fa: "\e53b";
}

.fa-dove {
  --fa: "\f4ba";
}

.fa-battery-empty {
  --fa: "\f244";
}

.fa-battery-0 {
  --fa: "\f244";
}

.fa-socks {
  --fa: "\f696";
}

.fa-inbox {
  --fa: "\f01c";
}

.fa-section {
  --fa: "\e447";
}

.fa-gauge-high {
  --fa: "\f625";
}

.fa-tachometer-alt {
  --fa: "\f625";
}

.fa-tachometer-alt-fast {
  --fa: "\f625";
}

.fa-envelope-open-text {
  --fa: "\f658";
}

.fa-hospital {
  --fa: "\f0f8";
}

.fa-hospital-alt {
  --fa: "\f0f8";
}

.fa-hospital-wide {
  --fa: "\f0f8";
}

.fa-wine-bottle {
  --fa: "\f72f";
}

.fa-chess-rook {
  --fa: "\f447";
}

.fa-bars-staggered {
  --fa: "\f550";
}

.fa-reorder {
  --fa: "\f550";
}

.fa-stream {
  --fa: "\f550";
}

.fa-dharmachakra {
  --fa: "\f655";
}

.fa-hotdog {
  --fa: "\f80f";
}

.fa-person-walking-with-cane {
  --fa: "\f29d";
}

.fa-blind {
  --fa: "\f29d";
}

.fa-drum {
  --fa: "\f569";
}

.fa-ice-cream {
  --fa: "\f810";
}

.fa-heart-circle-bolt {
  --fa: "\e4fc";
}

.fa-fax {
  --fa: "\f1ac";
}

.fa-paragraph {
  --fa: "\f1dd";
}

.fa-check-to-slot {
  --fa: "\f772";
}

.fa-vote-yea {
  --fa: "\f772";
}

.fa-star-half {
  --fa: "\f089";
}

.fa-boxes-stacked {
  --fa: "\f468";
}

.fa-boxes {
  --fa: "\f468";
}

.fa-boxes-alt {
  --fa: "\f468";
}

.fa-link {
  --fa: "\f0c1";
}

.fa-chain {
  --fa: "\f0c1";
}

.fa-ear-listen {
  --fa: "\f2a2";
}

.fa-assistive-listening-systems {
  --fa: "\f2a2";
}

.fa-tree-city {
  --fa: "\e587";
}

.fa-play {
  --fa: "\f04b";
}

.fa-font {
  --fa: "\f031";
}

.fa-table-cells-row-lock {
  --fa: "\e67a";
}

.fa-rupiah-sign {
  --fa: "\e23d";
}

.fa-magnifying-glass {
  --fa: "\f002";
}

.fa-search {
  --fa: "\f002";
}

.fa-table-tennis-paddle-ball {
  --fa: "\f45d";
}

.fa-ping-pong-paddle-ball {
  --fa: "\f45d";
}

.fa-table-tennis {
  --fa: "\f45d";
}

.fa-person-dots-from-line {
  --fa: "\f470";
}

.fa-diagnoses {
  --fa: "\f470";
}

.fa-trash-can-arrow-up {
  --fa: "\f82a";
}

.fa-trash-restore-alt {
  --fa: "\f82a";
}

.fa-naira-sign {
  --fa: "\e1f6";
}

.fa-cart-arrow-down {
  --fa: "\f218";
}

.fa-walkie-talkie {
  --fa: "\f8ef";
}

.fa-file-pen {
  --fa: "\f31c";
}

.fa-file-edit {
  --fa: "\f31c";
}

.fa-receipt {
  --fa: "\f543";
}

.fa-square-pen {
  --fa: "\f14b";
}

.fa-pen-square {
  --fa: "\f14b";
}

.fa-pencil-square {
  --fa: "\f14b";
}

.fa-suitcase-rolling {
  --fa: "\f5c1";
}

.fa-person-circle-exclamation {
  --fa: "\e53f";
}

.fa-chevron-down {
  --fa: "\f078";
}

.fa-battery-full {
  --fa: "\f240";
}

.fa-battery {
  --fa: "\f240";
}

.fa-battery-5 {
  --fa: "\f240";
}

.fa-skull-crossbones {
  --fa: "\f714";
}

.fa-code-compare {
  --fa: "\e13a";
}

.fa-list-ul {
  --fa: "\f0ca";
}

.fa-list-dots {
  --fa: "\f0ca";
}

.fa-school-lock {
  --fa: "\e56f";
}

.fa-tower-cell {
  --fa: "\e585";
}

.fa-down-long {
  --fa: "\f309";
}

.fa-long-arrow-alt-down {
  --fa: "\f309";
}

.fa-ranking-star {
  --fa: "\e561";
}

.fa-chess-king {
  --fa: "\f43f";
}

.fa-person-harassing {
  --fa: "\e549";
}

.fa-brazilian-real-sign {
  --fa: "\e46c";
}

.fa-landmark-dome {
  --fa: "\f752";
}

.fa-landmark-alt {
  --fa: "\f752";
}

.fa-arrow-up {
  --fa: "\f062";
}

.fa-tv {
  --fa: "\f26c";
}

.fa-television {
  --fa: "\f26c";
}

.fa-tv-alt {
  --fa: "\f26c";
}

.fa-shrimp {
  --fa: "\e448";
}

.fa-list-check {
  --fa: "\f0ae";
}

.fa-tasks {
  --fa: "\f0ae";
}

.fa-jug-detergent {
  --fa: "\e519";
}

.fa-circle-user {
  --fa: "\f2bd";
}

.fa-user-circle {
  --fa: "\f2bd";
}

.fa-user-shield {
  --fa: "\f505";
}

.fa-wind {
  --fa: "\f72e";
}

.fa-car-burst {
  --fa: "\f5e1";
}

.fa-car-crash {
  --fa: "\f5e1";
}

.fa-y {
  --fa: "Y";
}

.fa-person-snowboarding {
  --fa: "\f7ce";
}

.fa-snowboarding {
  --fa: "\f7ce";
}

.fa-truck-fast {
  --fa: "\f48b";
}

.fa-shipping-fast {
  --fa: "\f48b";
}

.fa-fish {
  --fa: "\f578";
}

.fa-user-graduate {
  --fa: "\f501";
}

.fa-circle-half-stroke {
  --fa: "\f042";
}

.fa-adjust {
  --fa: "\f042";
}

.fa-clapperboard {
  --fa: "\e131";
}

.fa-circle-radiation {
  --fa: "\f7ba";
}

.fa-radiation-alt {
  --fa: "\f7ba";
}

.fa-baseball {
  --fa: "\f433";
}

.fa-baseball-ball {
  --fa: "\f433";
}

.fa-jet-fighter-up {
  --fa: "\e518";
}

.fa-diagram-project {
  --fa: "\f542";
}

.fa-project-diagram {
  --fa: "\f542";
}

.fa-copy {
  --fa: "\f0c5";
}

.fa-volume-xmark {
  --fa: "\f6a9";
}

.fa-volume-mute {
  --fa: "\f6a9";
}

.fa-volume-times {
  --fa: "\f6a9";
}

.fa-hand-sparkles {
  --fa: "\e05d";
}

.fa-grip {
  --fa: "\f58d";
}

.fa-grip-horizontal {
  --fa: "\f58d";
}

.fa-share-from-square {
  --fa: "\f14d";
}

.fa-share-square {
  --fa: "\f14d";
}

.fa-child-combatant {
  --fa: "\e4e0";
}

.fa-child-rifle {
  --fa: "\e4e0";
}

.fa-gun {
  --fa: "\e19b";
}

.fa-square-phone {
  --fa: "\f098";
}

.fa-phone-square {
  --fa: "\f098";
}

.fa-plus {
  --fa: "\+";
}

.fa-add {
  --fa: "\+";
}

.fa-expand {
  --fa: "\f065";
}

.fa-computer {
  --fa: "\e4e5";
}

.fa-xmark {
  --fa: "\f00d";
}

.fa-close {
  --fa: "\f00d";
}

.fa-multiply {
  --fa: "\f00d";
}

.fa-remove {
  --fa: "\f00d";
}

.fa-times {
  --fa: "\f00d";
}

.fa-arrows-up-down-left-right {
  --fa: "\f047";
}

.fa-arrows {
  --fa: "\f047";
}

.fa-chalkboard-user {
  --fa: "\f51c";
}

.fa-chalkboard-teacher {
  --fa: "\f51c";
}

.fa-peso-sign {
  --fa: "\e222";
}

.fa-building-shield {
  --fa: "\e4d8";
}

.fa-baby {
  --fa: "\f77c";
}

.fa-users-line {
  --fa: "\e592";
}

.fa-quote-left {
  --fa: "\f10d";
}

.fa-quote-left-alt {
  --fa: "\f10d";
}

.fa-tractor {
  --fa: "\f722";
}

.fa-trash-arrow-up {
  --fa: "\f829";
}

.fa-trash-restore {
  --fa: "\f829";
}

.fa-arrow-down-up-lock {
  --fa: "\e4b0";
}

.fa-lines-leaning {
  --fa: "\e51e";
}

.fa-ruler-combined {
  --fa: "\f546";
}

.fa-copyright {
  --fa: "\f1f9";
}

.fa-equals {
  --fa: "\=";
}

.fa-blender {
  --fa: "\f517";
}

.fa-teeth {
  --fa: "\f62e";
}

.fa-shekel-sign {
  --fa: "\f20b";
}

.fa-ils {
  --fa: "\f20b";
}

.fa-shekel {
  --fa: "\f20b";
}

.fa-sheqel {
  --fa: "\f20b";
}

.fa-sheqel-sign {
  --fa: "\f20b";
}

.fa-map {
  --fa: "\f279";
}

.fa-rocket {
  --fa: "\f135";
}

.fa-photo-film {
  --fa: "\f87c";
}

.fa-photo-video {
  --fa: "\f87c";
}

.fa-folder-minus {
  --fa: "\f65d";
}

.fa-hexagon-nodes-bolt {
  --fa: "\e69a";
}

.fa-store {
  --fa: "\f54e";
}

.fa-arrow-trend-up {
  --fa: "\e098";
}

.fa-plug-circle-minus {
  --fa: "\e55e";
}

.fa-sign-hanging {
  --fa: "\f4d9";
}

.fa-sign {
  --fa: "\f4d9";
}

.fa-bezier-curve {
  --fa: "\f55b";
}

.fa-bell-slash {
  --fa: "\f1f6";
}

.fa-tablet {
  --fa: "\f3fb";
}

.fa-tablet-android {
  --fa: "\f3fb";
}

.fa-school-flag {
  --fa: "\e56e";
}

.fa-fill {
  --fa: "\f575";
}

.fa-angle-up {
  --fa: "\f106";
}

.fa-drumstick-bite {
  --fa: "\f6d7";
}

.fa-holly-berry {
  --fa: "\f7aa";
}

.fa-chevron-left {
  --fa: "\f053";
}

.fa-bacteria {
  --fa: "\e059";
}

.fa-hand-lizard {
  --fa: "\f258";
}

.fa-notdef {
  --fa: "\e1fe";
}

.fa-disease {
  --fa: "\f7fa";
}

.fa-briefcase-medical {
  --fa: "\f469";
}

.fa-genderless {
  --fa: "\f22d";
}

.fa-chevron-right {
  --fa: "\f054";
}

.fa-retweet {
  --fa: "\f079";
}

.fa-car-rear {
  --fa: "\f5de";
}

.fa-car-alt {
  --fa: "\f5de";
}

.fa-pump-soap {
  --fa: "\e06b";
}

.fa-video-slash {
  --fa: "\f4e2";
}

.fa-battery-quarter {
  --fa: "\f243";
}

.fa-battery-2 {
  --fa: "\f243";
}

.fa-radio {
  --fa: "\f8d7";
}

.fa-baby-carriage {
  --fa: "\f77d";
}

.fa-carriage-baby {
  --fa: "\f77d";
}

.fa-traffic-light {
  --fa: "\f637";
}

.fa-thermometer {
  --fa: "\f491";
}

.fa-vr-cardboard {
  --fa: "\f729";
}

.fa-hand-middle-finger {
  --fa: "\f806";
}

.fa-percent {
  --fa: "\%";
}

.fa-percentage {
  --fa: "\%";
}

.fa-truck-moving {
  --fa: "\f4df";
}

.fa-glass-water-droplet {
  --fa: "\e4f5";
}

.fa-display {
  --fa: "\e163";
}

.fa-face-smile {
  --fa: "\f118";
}

.fa-smile {
  --fa: "\f118";
}

.fa-thumbtack {
  --fa: "\f08d";
}

.fa-thumb-tack {
  --fa: "\f08d";
}

.fa-trophy {
  --fa: "\f091";
}

.fa-person-praying {
  --fa: "\f683";
}

.fa-pray {
  --fa: "\f683";
}

.fa-hammer {
  --fa: "\f6e3";
}

.fa-hand-peace {
  --fa: "\f25b";
}

.fa-rotate {
  --fa: "\f2f1";
}

.fa-sync-alt {
  --fa: "\f2f1";
}

.fa-spinner {
  --fa: "\f110";
}

.fa-robot {
  --fa: "\f544";
}

.fa-peace {
  --fa: "\f67c";
}

.fa-gears {
  --fa: "\f085";
}

.fa-cogs {
  --fa: "\f085";
}

.fa-warehouse {
  --fa: "\f494";
}

.fa-arrow-up-right-dots {
  --fa: "\e4b7";
}

.fa-splotch {
  --fa: "\f5bc";
}

.fa-face-grin-hearts {
  --fa: "\f584";
}

.fa-grin-hearts {
  --fa: "\f584";
}

.fa-dice-four {
  --fa: "\f524";
}

.fa-sim-card {
  --fa: "\f7c4";
}

.fa-transgender {
  --fa: "\f225";
}

.fa-transgender-alt {
  --fa: "\f225";
}

.fa-mercury {
  --fa: "\f223";
}

.fa-arrow-turn-down {
  --fa: "\f149";
}

.fa-level-down {
  --fa: "\f149";
}

.fa-person-falling-burst {
  --fa: "\e547";
}

.fa-award {
  --fa: "\f559";
}

.fa-ticket-simple {
  --fa: "\f3ff";
}

.fa-ticket-alt {
  --fa: "\f3ff";
}

.fa-building {
  --fa: "\f1ad";
}

.fa-angles-left {
  --fa: "\f100";
}

.fa-angle-double-left {
  --fa: "\f100";
}

.fa-qrcode {
  --fa: "\f029";
}

.fa-clock-rotate-left {
  --fa: "\f1da";
}

.fa-history {
  --fa: "\f1da";
}

.fa-face-grin-beam-sweat {
  --fa: "\f583";
}

.fa-grin-beam-sweat {
  --fa: "\f583";
}

.fa-file-export {
  --fa: "\f56e";
}

.fa-arrow-right-from-file {
  --fa: "\f56e";
}

.fa-shield {
  --fa: "\f132";
}

.fa-shield-blank {
  --fa: "\f132";
}

.fa-arrow-up-short-wide {
  --fa: "\f885";
}

.fa-sort-amount-up-alt {
  --fa: "\f885";
}

.fa-comment-nodes {
  --fa: "\e696";
}

.fa-house-medical {
  --fa: "\e3b2";
}

.fa-golf-ball-tee {
  --fa: "\f450";
}

.fa-golf-ball {
  --fa: "\f450";
}

.fa-circle-chevron-left {
  --fa: "\f137";
}

.fa-chevron-circle-left {
  --fa: "\f137";
}

.fa-house-chimney-window {
  --fa: "\e00d";
}

.fa-pen-nib {
  --fa: "\f5ad";
}

.fa-tent-arrow-turn-left {
  --fa: "\e580";
}

.fa-tents {
  --fa: "\e582";
}

.fa-wand-magic {
  --fa: "\f0d0";
}

.fa-magic {
  --fa: "\f0d0";
}

.fa-dog {
  --fa: "\f6d3";
}

.fa-carrot {
  --fa: "\f787";
}

.fa-moon {
  --fa: "\f186";
}

.fa-wine-glass-empty {
  --fa: "\f5ce";
}

.fa-wine-glass-alt {
  --fa: "\f5ce";
}

.fa-cheese {
  --fa: "\f7ef";
}

.fa-yin-yang {
  --fa: "\f6ad";
}

.fa-music {
  --fa: "\f001";
}

.fa-code-commit {
  --fa: "\f386";
}

.fa-temperature-low {
  --fa: "\f76b";
}

.fa-person-biking {
  --fa: "\f84a";
}

.fa-biking {
  --fa: "\f84a";
}

.fa-broom {
  --fa: "\f51a";
}

.fa-shield-heart {
  --fa: "\e574";
}

.fa-gopuram {
  --fa: "\f664";
}

.fa-earth-oceania {
  --fa: "\e47b";
}

.fa-globe-oceania {
  --fa: "\e47b";
}

.fa-square-xmark {
  --fa: "\f2d3";
}

.fa-times-square {
  --fa: "\f2d3";
}

.fa-xmark-square {
  --fa: "\f2d3";
}

.fa-hashtag {
  --fa: "\#";
}

.fa-up-right-and-down-left-from-center {
  --fa: "\f424";
}

.fa-expand-alt {
  --fa: "\f424";
}

.fa-oil-can {
  --fa: "\f613";
}

.fa-t {
  --fa: "T";
}

.fa-hippo {
  --fa: "\f6ed";
}

.fa-chart-column {
  --fa: "\e0e3";
}

.fa-infinity {
  --fa: "\f534";
}

.fa-vial-circle-check {
  --fa: "\e596";
}

.fa-person-arrow-down-to-line {
  --fa: "\e538";
}

.fa-voicemail {
  --fa: "\f897";
}

.fa-fan {
  --fa: "\f863";
}

.fa-person-walking-luggage {
  --fa: "\e554";
}

.fa-up-down {
  --fa: "\f338";
}

.fa-arrows-alt-v {
  --fa: "\f338";
}

.fa-cloud-moon-rain {
  --fa: "\f73c";
}

.fa-calendar {
  --fa: "\f133";
}

.fa-trailer {
  --fa: "\e041";
}

.fa-bahai {
  --fa: "\f666";
}

.fa-haykal {
  --fa: "\f666";
}

.fa-sd-card {
  --fa: "\f7c2";
}

.fa-dragon {
  --fa: "\f6d5";
}

.fa-shoe-prints {
  --fa: "\f54b";
}

.fa-circle-plus {
  --fa: "\f055";
}

.fa-plus-circle {
  --fa: "\f055";
}

.fa-face-grin-tongue-wink {
  --fa: "\f58b";
}

.fa-grin-tongue-wink {
  --fa: "\f58b";
}

.fa-hand-holding {
  --fa: "\f4bd";
}

.fa-plug-circle-exclamation {
  --fa: "\e55d";
}

.fa-link-slash {
  --fa: "\f127";
}

.fa-chain-broken {
  --fa: "\f127";
}

.fa-chain-slash {
  --fa: "\f127";
}

.fa-unlink {
  --fa: "\f127";
}

.fa-clone {
  --fa: "\f24d";
}

.fa-person-walking-arrow-loop-left {
  --fa: "\e551";
}

.fa-arrow-up-z-a {
  --fa: "\f882";
}

.fa-sort-alpha-up-alt {
  --fa: "\f882";
}

.fa-fire-flame-curved {
  --fa: "\f7e4";
}

.fa-fire-alt {
  --fa: "\f7e4";
}

.fa-tornado {
  --fa: "\f76f";
}

.fa-file-circle-plus {
  --fa: "\e494";
}

.fa-book-quran {
  --fa: "\f687";
}

.fa-quran {
  --fa: "\f687";
}

.fa-anchor {
  --fa: "\f13d";
}

.fa-border-all {
  --fa: "\f84c";
}

.fa-face-angry {
  --fa: "\f556";
}

.fa-angry {
  --fa: "\f556";
}

.fa-cookie-bite {
  --fa: "\f564";
}

.fa-arrow-trend-down {
  --fa: "\e097";
}

.fa-rss {
  --fa: "\f09e";
}

.fa-feed {
  --fa: "\f09e";
}

.fa-draw-polygon {
  --fa: "\f5ee";
}

.fa-scale-balanced {
  --fa: "\f24e";
}

.fa-balance-scale {
  --fa: "\f24e";
}

.fa-gauge-simple-high {
  --fa: "\f62a";
}

.fa-tachometer {
  --fa: "\f62a";
}

.fa-tachometer-fast {
  --fa: "\f62a";
}

.fa-shower {
  --fa: "\f2cc";
}

.fa-desktop {
  --fa: "\f390";
}

.fa-desktop-alt {
  --fa: "\f390";
}

.fa-m {
  --fa: "M";
}

.fa-table-list {
  --fa: "\f00b";
}

.fa-th-list {
  --fa: "\f00b";
}

.fa-comment-sms {
  --fa: "\f7cd";
}

.fa-sms {
  --fa: "\f7cd";
}

.fa-book {
  --fa: "\f02d";
}

.fa-user-plus {
  --fa: "\f234";
}

.fa-check {
  --fa: "\f00c";
}

.fa-battery-three-quarters {
  --fa: "\f241";
}

.fa-battery-4 {
  --fa: "\f241";
}

.fa-house-circle-check {
  --fa: "\e509";
}

.fa-angle-left {
  --fa: "\f104";
}

.fa-diagram-successor {
  --fa: "\e47a";
}

.fa-truck-arrow-right {
  --fa: "\e58b";
}

.fa-arrows-split-up-and-left {
  --fa: "\e4bc";
}

.fa-hand-fist {
  --fa: "\f6de";
}

.fa-fist-raised {
  --fa: "\f6de";
}

.fa-cloud-moon {
  --fa: "\f6c3";
}

.fa-briefcase {
  --fa: "\f0b1";
}

.fa-person-falling {
  --fa: "\e546";
}

.fa-image-portrait {
  --fa: "\f3e0";
}

.fa-portrait {
  --fa: "\f3e0";
}

.fa-user-tag {
  --fa: "\f507";
}

.fa-rug {
  --fa: "\e569";
}

.fa-earth-europe {
  --fa: "\f7a2";
}

.fa-globe-europe {
  --fa: "\f7a2";
}

.fa-cart-flatbed-suitcase {
  --fa: "\f59d";
}

.fa-luggage-cart {
  --fa: "\f59d";
}

.fa-rectangle-xmark {
  --fa: "\f410";
}

.fa-rectangle-times {
  --fa: "\f410";
}

.fa-times-rectangle {
  --fa: "\f410";
}

.fa-window-close {
  --fa: "\f410";
}

.fa-baht-sign {
  --fa: "\e0ac";
}

.fa-book-open {
  --fa: "\f518";
}

.fa-book-journal-whills {
  --fa: "\f66a";
}

.fa-journal-whills {
  --fa: "\f66a";
}

.fa-handcuffs {
  --fa: "\e4f8";
}

.fa-triangle-exclamation {
  --fa: "\f071";
}

.fa-exclamation-triangle {
  --fa: "\f071";
}

.fa-warning {
  --fa: "\f071";
}

.fa-database {
  --fa: "\f1c0";
}

.fa-share {
  --fa: "\f064";
}

.fa-mail-forward {
  --fa: "\f064";
}

.fa-bottle-droplet {
  --fa: "\e4c4";
}

.fa-mask-face {
  --fa: "\e1d7";
}

.fa-hill-rockslide {
  --fa: "\e508";
}

.fa-right-left {
  --fa: "\f362";
}

.fa-exchange-alt {
  --fa: "\f362";
}

.fa-paper-plane {
  --fa: "\f1d8";
}

.fa-road-circle-exclamation {
  --fa: "\e565";
}

.fa-dungeon {
  --fa: "\f6d9";
}

.fa-align-right {
  --fa: "\f038";
}

.fa-money-bill-1-wave {
  --fa: "\f53b";
}

.fa-money-bill-wave-alt {
  --fa: "\f53b";
}

.fa-life-ring {
  --fa: "\f1cd";
}

.fa-hands {
  --fa: "\f2a7";
}

.fa-sign-language {
  --fa: "\f2a7";
}

.fa-signing {
  --fa: "\f2a7";
}

.fa-calendar-day {
  --fa: "\f783";
}

.fa-water-ladder {
  --fa: "\f5c5";
}

.fa-ladder-water {
  --fa: "\f5c5";
}

.fa-swimming-pool {
  --fa: "\f5c5";
}

.fa-arrows-up-down {
  --fa: "\f07d";
}

.fa-arrows-v {
  --fa: "\f07d";
}

.fa-face-grimace {
  --fa: "\f57f";
}

.fa-grimace {
  --fa: "\f57f";
}

.fa-wheelchair-move {
  --fa: "\e2ce";
}

.fa-wheelchair-alt {
  --fa: "\e2ce";
}

.fa-turn-down {
  --fa: "\f3be";
}

.fa-level-down-alt {
  --fa: "\f3be";
}

.fa-person-walking-arrow-right {
  --fa: "\e552";
}

.fa-square-envelope {
  --fa: "\f199";
}

.fa-envelope-square {
  --fa: "\f199";
}

.fa-dice {
  --fa: "\f522";
}

.fa-bowling-ball {
  --fa: "\f436";
}

.fa-brain {
  --fa: "\f5dc";
}

.fa-bandage {
  --fa: "\f462";
}

.fa-band-aid {
  --fa: "\f462";
}

.fa-calendar-minus {
  --fa: "\f272";
}

.fa-circle-xmark {
  --fa: "\f057";
}

.fa-times-circle {
  --fa: "\f057";
}

.fa-xmark-circle {
  --fa: "\f057";
}

.fa-gifts {
  --fa: "\f79c";
}

.fa-hotel {
  --fa: "\f594";
}

.fa-earth-asia {
  --fa: "\f57e";
}

.fa-globe-asia {
  --fa: "\f57e";
}

.fa-id-card-clip {
  --fa: "\f47f";
}

.fa-id-card-alt {
  --fa: "\f47f";
}

.fa-magnifying-glass-plus {
  --fa: "\f00e";
}

.fa-search-plus {
  --fa: "\f00e";
}

.fa-thumbs-up {
  --fa: "\f164";
}

.fa-user-clock {
  --fa: "\f4fd";
}

.fa-hand-dots {
  --fa: "\f461";
}

.fa-allergies {
  --fa: "\f461";
}

.fa-file-invoice {
  --fa: "\f570";
}

.fa-window-minimize {
  --fa: "\f2d1";
}

.fa-mug-saucer {
  --fa: "\f0f4";
}

.fa-coffee {
  --fa: "\f0f4";
}

.fa-brush {
  --fa: "\f55d";
}

.fa-file-half-dashed {
  --fa: "\e698";
}

.fa-mask {
  --fa: "\f6fa";
}

.fa-magnifying-glass-minus {
  --fa: "\f010";
}

.fa-search-minus {
  --fa: "\f010";
}

.fa-ruler-vertical {
  --fa: "\f548";
}

.fa-user-large {
  --fa: "\f406";
}

.fa-user-alt {
  --fa: "\f406";
}

.fa-train-tram {
  --fa: "\e5b4";
}

.fa-user-nurse {
  --fa: "\f82f";
}

.fa-syringe {
  --fa: "\f48e";
}

.fa-cloud-sun {
  --fa: "\f6c4";
}

.fa-stopwatch-20 {
  --fa: "\e06f";
}

.fa-square-full {
  --fa: "\f45c";
}

.fa-magnet {
  --fa: "\f076";
}

.fa-jar {
  --fa: "\e516";
}

.fa-note-sticky {
  --fa: "\f249";
}

.fa-sticky-note {
  --fa: "\f249";
}

.fa-bug-slash {
  --fa: "\e490";
}

.fa-arrow-up-from-water-pump {
  --fa: "\e4b6";
}

.fa-bone {
  --fa: "\f5d7";
}

.fa-table-cells-row-unlock {
  --fa: "\e691";
}

.fa-user-injured {
  --fa: "\f728";
}

.fa-face-sad-tear {
  --fa: "\f5b4";
}

.fa-sad-tear {
  --fa: "\f5b4";
}

.fa-plane {
  --fa: "\f072";
}

.fa-tent-arrows-down {
  --fa: "\e581";
}

.fa-exclamation {
  --fa: "\!";
}

.fa-arrows-spin {
  --fa: "\e4bb";
}

.fa-print {
  --fa: "\f02f";
}

.fa-turkish-lira-sign {
  --fa: "\e2bb";
}

.fa-try {
  --fa: "\e2bb";
}

.fa-turkish-lira {
  --fa: "\e2bb";
}

.fa-dollar-sign {
  --fa: "\$";
}

.fa-dollar {
  --fa: "\$";
}

.fa-usd {
  --fa: "\$";
}

.fa-x {
  --fa: "X";
}

.fa-magnifying-glass-dollar {
  --fa: "\f688";
}

.fa-search-dollar {
  --fa: "\f688";
}

.fa-users-gear {
  --fa: "\f509";
}

.fa-users-cog {
  --fa: "\f509";
}

.fa-person-military-pointing {
  --fa: "\e54a";
}

.fa-building-columns {
  --fa: "\f19c";
}

.fa-bank {
  --fa: "\f19c";
}

.fa-institution {
  --fa: "\f19c";
}

.fa-museum {
  --fa: "\f19c";
}

.fa-university {
  --fa: "\f19c";
}

.fa-umbrella {
  --fa: "\f0e9";
}

.fa-trowel {
  --fa: "\e589";
}

.fa-d {
  --fa: "D";
}

.fa-stapler {
  --fa: "\e5af";
}

.fa-masks-theater {
  --fa: "\f630";
}

.fa-theater-masks {
  --fa: "\f630";
}

.fa-kip-sign {
  --fa: "\e1c4";
}

.fa-hand-point-left {
  --fa: "\f0a5";
}

.fa-handshake-simple {
  --fa: "\f4c6";
}

.fa-handshake-alt {
  --fa: "\f4c6";
}

.fa-jet-fighter {
  --fa: "\f0fb";
}

.fa-fighter-jet {
  --fa: "\f0fb";
}

.fa-square-share-nodes {
  --fa: "\f1e1";
}

.fa-share-alt-square {
  --fa: "\f1e1";
}

.fa-barcode {
  --fa: "\f02a";
}

.fa-plus-minus {
  --fa: "\e43c";
}

.fa-video {
  --fa: "\f03d";
}

.fa-video-camera {
  --fa: "\f03d";
}

.fa-graduation-cap {
  --fa: "\f19d";
}

.fa-mortar-board {
  --fa: "\f19d";
}

.fa-hand-holding-medical {
  --fa: "\e05c";
}

.fa-person-circle-check {
  --fa: "\e53e";
}

.fa-turn-up {
  --fa: "\f3bf";
}

.fa-level-up-alt {
  --fa: "\f3bf";
}

.sr-only,
.fa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:not(:focus),
.fa-sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
:root, :host {
  --fa-style-family-classic: "Font Awesome 6 Free";
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/assets/fa-solid-900-64d74b77.woff2") format("woff2"), url("/assets/fa-solid-900-7c036e8f.ttf") format("truetype");
}
.fas,
.fa-solid {
  font-weight: 900;
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
:root, :host {
  --fa-style-family-classic: "Font Awesome 6 Free";
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/fa-regular-400-0ee0d1e9.woff2") format("woff2"), url("/assets/fa-regular-400-727dcf37.ttf") format("truetype");
}
.far,
.fa-regular {
  font-weight: 400;
}

/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
:root, :host {
  --fa-style-family-brands: "Font Awesome 6 Brands";
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/fa-brands-400-c1dca0e4.woff2") format("woff2"), url("/assets/fa-brands-400-24099ddc.ttf") format("truetype");
}
.fab,
.fa-brands {
  font-weight: 400;
}

.fa-monero {
  --fa: "\f3d0";
}

.fa-hooli {
  --fa: "\f427";
}

.fa-yelp {
  --fa: "\f1e9";
}

.fa-cc-visa {
  --fa: "\f1f0";
}

.fa-lastfm {
  --fa: "\f202";
}

.fa-shopware {
  --fa: "\f5b5";
}

.fa-creative-commons-nc {
  --fa: "\f4e8";
}

.fa-aws {
  --fa: "\f375";
}

.fa-redhat {
  --fa: "\f7bc";
}

.fa-yoast {
  --fa: "\f2b1";
}

.fa-cloudflare {
  --fa: "\e07d";
}

.fa-ups {
  --fa: "\f7e0";
}

.fa-pixiv {
  --fa: "\e640";
}

.fa-wpexplorer {
  --fa: "\f2de";
}

.fa-dyalog {
  --fa: "\f399";
}

.fa-bity {
  --fa: "\f37a";
}

.fa-stackpath {
  --fa: "\f842";
}

.fa-buysellads {
  --fa: "\f20d";
}

.fa-first-order {
  --fa: "\f2b0";
}

.fa-modx {
  --fa: "\f285";
}

.fa-guilded {
  --fa: "\e07e";
}

.fa-vnv {
  --fa: "\f40b";
}

.fa-square-js {
  --fa: "\f3b9";
}

.fa-js-square {
  --fa: "\f3b9";
}

.fa-microsoft {
  --fa: "\f3ca";
}

.fa-qq {
  --fa: "\f1d6";
}

.fa-orcid {
  --fa: "\f8d2";
}

.fa-java {
  --fa: "\f4e4";
}

.fa-invision {
  --fa: "\f7b0";
}

.fa-creative-commons-pd-alt {
  --fa: "\f4ed";
}

.fa-centercode {
  --fa: "\f380";
}

.fa-glide-g {
  --fa: "\f2a6";
}

.fa-drupal {
  --fa: "\f1a9";
}

.fa-jxl {
  --fa: "\e67b";
}

.fa-dart-lang {
  --fa: "\e693";
}

.fa-hire-a-helper {
  --fa: "\f3b0";
}

.fa-creative-commons-by {
  --fa: "\f4e7";
}

.fa-unity {
  --fa: "\e049";
}

.fa-whmcs {
  --fa: "\f40d";
}

.fa-rocketchat {
  --fa: "\f3e8";
}

.fa-vk {
  --fa: "\f189";
}

.fa-untappd {
  --fa: "\f405";
}

.fa-mailchimp {
  --fa: "\f59e";
}

.fa-css3-alt {
  --fa: "\f38b";
}

.fa-square-reddit {
  --fa: "\f1a2";
}

.fa-reddit-square {
  --fa: "\f1a2";
}

.fa-vimeo-v {
  --fa: "\f27d";
}

.fa-contao {
  --fa: "\f26d";
}

.fa-square-font-awesome {
  --fa: "\e5ad";
}

.fa-deskpro {
  --fa: "\f38f";
}

.fa-brave {
  --fa: "\e63c";
}

.fa-sistrix {
  --fa: "\f3ee";
}

.fa-square-instagram {
  --fa: "\e055";
}

.fa-instagram-square {
  --fa: "\e055";
}

.fa-battle-net {
  --fa: "\f835";
}

.fa-the-red-yeti {
  --fa: "\f69d";
}

.fa-square-hacker-news {
  --fa: "\f3af";
}

.fa-hacker-news-square {
  --fa: "\f3af";
}

.fa-edge {
  --fa: "\f282";
}

.fa-threads {
  --fa: "\e618";
}

.fa-napster {
  --fa: "\f3d2";
}

.fa-square-snapchat {
  --fa: "\f2ad";
}

.fa-snapchat-square {
  --fa: "\f2ad";
}

.fa-google-plus-g {
  --fa: "\f0d5";
}

.fa-artstation {
  --fa: "\f77a";
}

.fa-markdown {
  --fa: "\f60f";
}

.fa-sourcetree {
  --fa: "\f7d3";
}

.fa-google-plus {
  --fa: "\f2b3";
}

.fa-diaspora {
  --fa: "\f791";
}

.fa-foursquare {
  --fa: "\f180";
}

.fa-stack-overflow {
  --fa: "\f16c";
}

.fa-github-alt {
  --fa: "\f113";
}

.fa-phoenix-squadron {
  --fa: "\f511";
}

.fa-pagelines {
  --fa: "\f18c";
}

.fa-algolia {
  --fa: "\f36c";
}

.fa-red-river {
  --fa: "\f3e3";
}

.fa-creative-commons-sa {
  --fa: "\f4ef";
}

.fa-safari {
  --fa: "\f267";
}

.fa-google {
  --fa: "\f1a0";
}

.fa-square-font-awesome-stroke {
  --fa: "\f35c";
}

.fa-font-awesome-alt {
  --fa: "\f35c";
}

.fa-atlassian {
  --fa: "\f77b";
}

.fa-linkedin-in {
  --fa: "\f0e1";
}

.fa-digital-ocean {
  --fa: "\f391";
}

.fa-nimblr {
  --fa: "\f5a8";
}

.fa-chromecast {
  --fa: "\f838";
}

.fa-evernote {
  --fa: "\f839";
}

.fa-hacker-news {
  --fa: "\f1d4";
}

.fa-creative-commons-sampling {
  --fa: "\f4f0";
}

.fa-adversal {
  --fa: "\f36a";
}

.fa-creative-commons {
  --fa: "\f25e";
}

.fa-watchman-monitoring {
  --fa: "\e087";
}

.fa-fonticons {
  --fa: "\f280";
}

.fa-weixin {
  --fa: "\f1d7";
}

.fa-shirtsinbulk {
  --fa: "\f214";
}

.fa-codepen {
  --fa: "\f1cb";
}

.fa-git-alt {
  --fa: "\f841";
}

.fa-lyft {
  --fa: "\f3c3";
}

.fa-rev {
  --fa: "\f5b2";
}

.fa-windows {
  --fa: "\f17a";
}

.fa-wizards-of-the-coast {
  --fa: "\f730";
}

.fa-square-viadeo {
  --fa: "\f2aa";
}

.fa-viadeo-square {
  --fa: "\f2aa";
}

.fa-meetup {
  --fa: "\f2e0";
}

.fa-centos {
  --fa: "\f789";
}

.fa-adn {
  --fa: "\f170";
}

.fa-cloudsmith {
  --fa: "\f384";
}

.fa-opensuse {
  --fa: "\e62b";
}

.fa-pied-piper-alt {
  --fa: "\f1a8";
}

.fa-square-dribbble {
  --fa: "\f397";
}

.fa-dribbble-square {
  --fa: "\f397";
}

.fa-codiepie {
  --fa: "\f284";
}

.fa-node {
  --fa: "\f419";
}

.fa-mix {
  --fa: "\f3cb";
}

.fa-steam {
  --fa: "\f1b6";
}

.fa-cc-apple-pay {
  --fa: "\f416";
}

.fa-scribd {
  --fa: "\f28a";
}

.fa-debian {
  --fa: "\e60b";
}

.fa-openid {
  --fa: "\f19b";
}

.fa-instalod {
  --fa: "\e081";
}

.fa-files-pinwheel {
  --fa: "\e69f";
}

.fa-expeditedssl {
  --fa: "\f23e";
}

.fa-sellcast {
  --fa: "\f2da";
}

.fa-square-twitter {
  --fa: "\f081";
}

.fa-twitter-square {
  --fa: "\f081";
}

.fa-r-project {
  --fa: "\f4f7";
}

.fa-delicious {
  --fa: "\f1a5";
}

.fa-freebsd {
  --fa: "\f3a4";
}

.fa-vuejs {
  --fa: "\f41f";
}

.fa-accusoft {
  --fa: "\f369";
}

.fa-ioxhost {
  --fa: "\f208";
}

.fa-fonticons-fi {
  --fa: "\f3a2";
}

.fa-app-store {
  --fa: "\f36f";
}

.fa-cc-mastercard {
  --fa: "\f1f1";
}

.fa-itunes-note {
  --fa: "\f3b5";
}

.fa-golang {
  --fa: "\e40f";
}

.fa-kickstarter {
  --fa: "\f3bb";
}

.fa-square-kickstarter {
  --fa: "\f3bb";
}

.fa-grav {
  --fa: "\f2d6";
}

.fa-weibo {
  --fa: "\f18a";
}

.fa-uncharted {
  --fa: "\e084";
}

.fa-firstdraft {
  --fa: "\f3a1";
}

.fa-square-youtube {
  --fa: "\f431";
}

.fa-youtube-square {
  --fa: "\f431";
}

.fa-wikipedia-w {
  --fa: "\f266";
}

.fa-wpressr {
  --fa: "\f3e4";
}

.fa-rendact {
  --fa: "\f3e4";
}

.fa-angellist {
  --fa: "\f209";
}

.fa-galactic-republic {
  --fa: "\f50c";
}

.fa-nfc-directional {
  --fa: "\e530";
}

.fa-skype {
  --fa: "\f17e";
}

.fa-joget {
  --fa: "\f3b7";
}

.fa-fedora {
  --fa: "\f798";
}

.fa-stripe-s {
  --fa: "\f42a";
}

.fa-meta {
  --fa: "\e49b";
}

.fa-laravel {
  --fa: "\f3bd";
}

.fa-hotjar {
  --fa: "\f3b1";
}

.fa-bluetooth-b {
  --fa: "\f294";
}

.fa-square-letterboxd {
  --fa: "\e62e";
}

.fa-sticker-mule {
  --fa: "\f3f7";
}

.fa-creative-commons-zero {
  --fa: "\f4f3";
}

.fa-hips {
  --fa: "\f452";
}

.fa-css {
  --fa: "\e6a2";
}

.fa-behance {
  --fa: "\f1b4";
}

.fa-reddit {
  --fa: "\f1a1";
}

.fa-discord {
  --fa: "\f392";
}

.fa-chrome {
  --fa: "\f268";
}

.fa-app-store-ios {
  --fa: "\f370";
}

.fa-cc-discover {
  --fa: "\f1f2";
}

.fa-wpbeginner {
  --fa: "\f297";
}

.fa-confluence {
  --fa: "\f78d";
}

.fa-shoelace {
  --fa: "\e60c";
}

.fa-mdb {
  --fa: "\f8ca";
}

.fa-dochub {
  --fa: "\f394";
}

.fa-accessible-icon {
  --fa: "\f368";
}

.fa-ebay {
  --fa: "\f4f4";
}

.fa-amazon {
  --fa: "\f270";
}

.fa-unsplash {
  --fa: "\e07c";
}

.fa-yarn {
  --fa: "\f7e3";
}

.fa-square-steam {
  --fa: "\f1b7";
}

.fa-steam-square {
  --fa: "\f1b7";
}

.fa-500px {
  --fa: "\f26e";
}

.fa-square-vimeo {
  --fa: "\f194";
}

.fa-vimeo-square {
  --fa: "\f194";
}

.fa-asymmetrik {
  --fa: "\f372";
}

.fa-font-awesome {
  --fa: "\f2b4";
}

.fa-font-awesome-flag {
  --fa: "\f2b4";
}

.fa-font-awesome-logo-full {
  --fa: "\f2b4";
}

.fa-gratipay {
  --fa: "\f184";
}

.fa-apple {
  --fa: "\f179";
}

.fa-hive {
  --fa: "\e07f";
}

.fa-gitkraken {
  --fa: "\f3a6";
}

.fa-keybase {
  --fa: "\f4f5";
}

.fa-apple-pay {
  --fa: "\f415";
}

.fa-padlet {
  --fa: "\e4a0";
}

.fa-amazon-pay {
  --fa: "\f42c";
}

.fa-square-github {
  --fa: "\f092";
}

.fa-github-square {
  --fa: "\f092";
}

.fa-stumbleupon {
  --fa: "\f1a4";
}

.fa-fedex {
  --fa: "\f797";
}

.fa-phoenix-framework {
  --fa: "\f3dc";
}

.fa-shopify {
  --fa: "\e057";
}

.fa-neos {
  --fa: "\f612";
}

.fa-square-threads {
  --fa: "\e619";
}

.fa-hackerrank {
  --fa: "\f5f7";
}

.fa-researchgate {
  --fa: "\f4f8";
}

.fa-swift {
  --fa: "\f8e1";
}

.fa-angular {
  --fa: "\f420";
}

.fa-speakap {
  --fa: "\f3f3";
}

.fa-angrycreative {
  --fa: "\f36e";
}

.fa-y-combinator {
  --fa: "\f23b";
}

.fa-empire {
  --fa: "\f1d1";
}

.fa-envira {
  --fa: "\f299";
}

.fa-google-scholar {
  --fa: "\e63b";
}

.fa-square-gitlab {
  --fa: "\e5ae";
}

.fa-gitlab-square {
  --fa: "\e5ae";
}

.fa-studiovinari {
  --fa: "\f3f8";
}

.fa-pied-piper {
  --fa: "\f2ae";
}

.fa-wordpress {
  --fa: "\f19a";
}

.fa-product-hunt {
  --fa: "\f288";
}

.fa-firefox {
  --fa: "\f269";
}

.fa-linode {
  --fa: "\f2b8";
}

.fa-goodreads {
  --fa: "\f3a8";
}

.fa-square-odnoklassniki {
  --fa: "\f264";
}

.fa-odnoklassniki-square {
  --fa: "\f264";
}

.fa-jsfiddle {
  --fa: "\f1cc";
}

.fa-sith {
  --fa: "\f512";
}

.fa-themeisle {
  --fa: "\f2b2";
}

.fa-page4 {
  --fa: "\f3d7";
}

.fa-hashnode {
  --fa: "\e499";
}

.fa-react {
  --fa: "\f41b";
}

.fa-cc-paypal {
  --fa: "\f1f4";
}

.fa-squarespace {
  --fa: "\f5be";
}

.fa-cc-stripe {
  --fa: "\f1f5";
}

.fa-creative-commons-share {
  --fa: "\f4f2";
}

.fa-bitcoin {
  --fa: "\f379";
}

.fa-keycdn {
  --fa: "\f3ba";
}

.fa-opera {
  --fa: "\f26a";
}

.fa-itch-io {
  --fa: "\f83a";
}

.fa-umbraco {
  --fa: "\f8e8";
}

.fa-galactic-senate {
  --fa: "\f50d";
}

.fa-ubuntu {
  --fa: "\f7df";
}

.fa-draft2digital {
  --fa: "\f396";
}

.fa-stripe {
  --fa: "\f429";
}

.fa-houzz {
  --fa: "\f27c";
}

.fa-gg {
  --fa: "\f260";
}

.fa-dhl {
  --fa: "\f790";
}

.fa-square-pinterest {
  --fa: "\f0d3";
}

.fa-pinterest-square {
  --fa: "\f0d3";
}

.fa-xing {
  --fa: "\f168";
}

.fa-blackberry {
  --fa: "\f37b";
}

.fa-creative-commons-pd {
  --fa: "\f4ec";
}

.fa-playstation {
  --fa: "\f3df";
}

.fa-quinscape {
  --fa: "\f459";
}

.fa-less {
  --fa: "\f41d";
}

.fa-blogger-b {
  --fa: "\f37d";
}

.fa-opencart {
  --fa: "\f23d";
}

.fa-vine {
  --fa: "\f1ca";
}

.fa-signal-messenger {
  --fa: "\e663";
}

.fa-paypal {
  --fa: "\f1ed";
}

.fa-gitlab {
  --fa: "\f296";
}

.fa-typo3 {
  --fa: "\f42b";
}

.fa-reddit-alien {
  --fa: "\f281";
}

.fa-yahoo {
  --fa: "\f19e";
}

.fa-dailymotion {
  --fa: "\e052";
}

.fa-affiliatetheme {
  --fa: "\f36b";
}

.fa-pied-piper-pp {
  --fa: "\f1a7";
}

.fa-bootstrap {
  --fa: "\f836";
}

.fa-odnoklassniki {
  --fa: "\f263";
}

.fa-nfc-symbol {
  --fa: "\e531";
}

.fa-mintbit {
  --fa: "\e62f";
}

.fa-ethereum {
  --fa: "\f42e";
}

.fa-speaker-deck {
  --fa: "\f83c";
}

.fa-creative-commons-nc-eu {
  --fa: "\f4e9";
}

.fa-patreon {
  --fa: "\f3d9";
}

.fa-avianex {
  --fa: "\f374";
}

.fa-ello {
  --fa: "\f5f1";
}

.fa-gofore {
  --fa: "\f3a7";
}

.fa-bimobject {
  --fa: "\f378";
}

.fa-brave-reverse {
  --fa: "\e63d";
}

.fa-facebook-f {
  --fa: "\f39e";
}

.fa-square-google-plus {
  --fa: "\f0d4";
}

.fa-google-plus-square {
  --fa: "\f0d4";
}

.fa-web-awesome {
  --fa: "\e682";
}

.fa-mandalorian {
  --fa: "\f50f";
}

.fa-first-order-alt {
  --fa: "\f50a";
}

.fa-osi {
  --fa: "\f41a";
}

.fa-google-wallet {
  --fa: "\f1ee";
}

.fa-d-and-d-beyond {
  --fa: "\f6ca";
}

.fa-periscope {
  --fa: "\f3da";
}

.fa-fulcrum {
  --fa: "\f50b";
}

.fa-cloudscale {
  --fa: "\f383";
}

.fa-forumbee {
  --fa: "\f211";
}

.fa-mizuni {
  --fa: "\f3cc";
}

.fa-schlix {
  --fa: "\f3ea";
}

.fa-square-xing {
  --fa: "\f169";
}

.fa-xing-square {
  --fa: "\f169";
}

.fa-bandcamp {
  --fa: "\f2d5";
}

.fa-wpforms {
  --fa: "\f298";
}

.fa-cloudversify {
  --fa: "\f385";
}

.fa-usps {
  --fa: "\f7e1";
}

.fa-megaport {
  --fa: "\f5a3";
}

.fa-magento {
  --fa: "\f3c4";
}

.fa-spotify {
  --fa: "\f1bc";
}

.fa-optin-monster {
  --fa: "\f23c";
}

.fa-fly {
  --fa: "\f417";
}

.fa-square-bluesky {
  --fa: "\e6a3";
}

.fa-aviato {
  --fa: "\f421";
}

.fa-itunes {
  --fa: "\f3b4";
}

.fa-cuttlefish {
  --fa: "\f38c";
}

.fa-blogger {
  --fa: "\f37c";
}

.fa-flickr {
  --fa: "\f16e";
}

.fa-viber {
  --fa: "\f409";
}

.fa-soundcloud {
  --fa: "\f1be";
}

.fa-digg {
  --fa: "\f1a6";
}

.fa-tencent-weibo {
  --fa: "\f1d5";
}

.fa-letterboxd {
  --fa: "\e62d";
}

.fa-symfony {
  --fa: "\f83d";
}

.fa-maxcdn {
  --fa: "\f136";
}

.fa-etsy {
  --fa: "\f2d7";
}

.fa-facebook-messenger {
  --fa: "\f39f";
}

.fa-audible {
  --fa: "\f373";
}

.fa-think-peaks {
  --fa: "\f731";
}

.fa-bilibili {
  --fa: "\e3d9";
}

.fa-erlang {
  --fa: "\f39d";
}

.fa-x-twitter {
  --fa: "\e61b";
}

.fa-cotton-bureau {
  --fa: "\f89e";
}

.fa-dashcube {
  --fa: "\f210";
}

.fa-42-group {
  --fa: "\e080";
}

.fa-innosoft {
  --fa: "\e080";
}

.fa-stack-exchange {
  --fa: "\f18d";
}

.fa-elementor {
  --fa: "\f430";
}

.fa-square-pied-piper {
  --fa: "\e01e";
}

.fa-pied-piper-square {
  --fa: "\e01e";
}

.fa-creative-commons-nd {
  --fa: "\f4eb";
}

.fa-palfed {
  --fa: "\f3d8";
}

.fa-superpowers {
  --fa: "\f2dd";
}

.fa-resolving {
  --fa: "\f3e7";
}

.fa-xbox {
  --fa: "\f412";
}

.fa-square-web-awesome-stroke {
  --fa: "\e684";
}

.fa-searchengin {
  --fa: "\f3eb";
}

.fa-tiktok {
  --fa: "\e07b";
}

.fa-square-facebook {
  --fa: "\f082";
}

.fa-facebook-square {
  --fa: "\f082";
}

.fa-renren {
  --fa: "\f18b";
}

.fa-linux {
  --fa: "\f17c";
}

.fa-glide {
  --fa: "\f2a5";
}

.fa-linkedin {
  --fa: "\f08c";
}

.fa-hubspot {
  --fa: "\f3b2";
}

.fa-deploydog {
  --fa: "\f38e";
}

.fa-twitch {
  --fa: "\f1e8";
}

.fa-flutter {
  --fa: "\e694";
}

.fa-ravelry {
  --fa: "\f2d9";
}

.fa-mixer {
  --fa: "\e056";
}

.fa-square-lastfm {
  --fa: "\f203";
}

.fa-lastfm-square {
  --fa: "\f203";
}

.fa-vimeo {
  --fa: "\f40a";
}

.fa-mendeley {
  --fa: "\f7b3";
}

.fa-uniregistry {
  --fa: "\f404";
}

.fa-figma {
  --fa: "\f799";
}

.fa-creative-commons-remix {
  --fa: "\f4ee";
}

.fa-cc-amazon-pay {
  --fa: "\f42d";
}

.fa-dropbox {
  --fa: "\f16b";
}

.fa-instagram {
  --fa: "\f16d";
}

.fa-cmplid {
  --fa: "\e360";
}

.fa-upwork {
  --fa: "\e641";
}

.fa-facebook {
  --fa: "\f09a";
}

.fa-gripfire {
  --fa: "\f3ac";
}

.fa-jedi-order {
  --fa: "\f50e";
}

.fa-uikit {
  --fa: "\f403";
}

.fa-fort-awesome-alt {
  --fa: "\f3a3";
}

.fa-phabricator {
  --fa: "\f3db";
}

.fa-ussunnah {
  --fa: "\f407";
}

.fa-earlybirds {
  --fa: "\f39a";
}

.fa-trade-federation {
  --fa: "\f513";
}

.fa-autoprefixer {
  --fa: "\f41c";
}

.fa-whatsapp {
  --fa: "\f232";
}

.fa-square-upwork {
  --fa: "\e67c";
}

.fa-slideshare {
  --fa: "\f1e7";
}

.fa-google-play {
  --fa: "\f3ab";
}

.fa-viadeo {
  --fa: "\f2a9";
}

.fa-line {
  --fa: "\f3c0";
}

.fa-google-drive {
  --fa: "\f3aa";
}

.fa-servicestack {
  --fa: "\f3ec";
}

.fa-simplybuilt {
  --fa: "\f215";
}

.fa-bitbucket {
  --fa: "\f171";
}

.fa-imdb {
  --fa: "\f2d8";
}

.fa-deezer {
  --fa: "\e077";
}

.fa-raspberry-pi {
  --fa: "\f7bb";
}

.fa-jira {
  --fa: "\f7b1";
}

.fa-docker {
  --fa: "\f395";
}

.fa-screenpal {
  --fa: "\e570";
}

.fa-bluetooth {
  --fa: "\f293";
}

.fa-gitter {
  --fa: "\f426";
}

.fa-d-and-d {
  --fa: "\f38d";
}

.fa-microblog {
  --fa: "\e01a";
}

.fa-cc-diners-club {
  --fa: "\f24c";
}

.fa-gg-circle {
  --fa: "\f261";
}

.fa-pied-piper-hat {
  --fa: "\f4e5";
}

.fa-kickstarter-k {
  --fa: "\f3bc";
}

.fa-yandex {
  --fa: "\f413";
}

.fa-readme {
  --fa: "\f4d5";
}

.fa-html5 {
  --fa: "\f13b";
}

.fa-sellsy {
  --fa: "\f213";
}

.fa-square-web-awesome {
  --fa: "\e683";
}

.fa-sass {
  --fa: "\f41e";
}

.fa-wirsindhandwerk {
  --fa: "\e2d0";
}

.fa-wsh {
  --fa: "\e2d0";
}

.fa-buromobelexperte {
  --fa: "\f37f";
}

.fa-salesforce {
  --fa: "\f83b";
}

.fa-octopus-deploy {
  --fa: "\e082";
}

.fa-medapps {
  --fa: "\f3c6";
}

.fa-ns8 {
  --fa: "\f3d5";
}

.fa-pinterest-p {
  --fa: "\f231";
}

.fa-apper {
  --fa: "\f371";
}

.fa-fort-awesome {
  --fa: "\f286";
}

.fa-waze {
  --fa: "\f83f";
}

.fa-bluesky {
  --fa: "\e671";
}

.fa-cc-jcb {
  --fa: "\f24b";
}

.fa-snapchat {
  --fa: "\f2ab";
}

.fa-snapchat-ghost {
  --fa: "\f2ab";
}

.fa-fantasy-flight-games {
  --fa: "\f6dc";
}

.fa-rust {
  --fa: "\e07a";
}

.fa-wix {
  --fa: "\f5cf";
}

.fa-square-behance {
  --fa: "\f1b5";
}

.fa-behance-square {
  --fa: "\f1b5";
}

.fa-supple {
  --fa: "\f3f9";
}

.fa-webflow {
  --fa: "\e65c";
}

.fa-rebel {
  --fa: "\f1d0";
}

.fa-css3 {
  --fa: "\f13c";
}

.fa-staylinked {
  --fa: "\f3f5";
}

.fa-kaggle {
  --fa: "\f5fa";
}

.fa-space-awesome {
  --fa: "\e5ac";
}

.fa-deviantart {
  --fa: "\f1bd";
}

.fa-cpanel {
  --fa: "\f388";
}

.fa-goodreads-g {
  --fa: "\f3a9";
}

.fa-square-git {
  --fa: "\f1d2";
}

.fa-git-square {
  --fa: "\f1d2";
}

.fa-square-tumblr {
  --fa: "\f174";
}

.fa-tumblr-square {
  --fa: "\f174";
}

.fa-trello {
  --fa: "\f181";
}

.fa-creative-commons-nc-jp {
  --fa: "\f4ea";
}

.fa-get-pocket {
  --fa: "\f265";
}

.fa-perbyte {
  --fa: "\e083";
}

.fa-grunt {
  --fa: "\f3ad";
}

.fa-weebly {
  --fa: "\f5cc";
}

.fa-connectdevelop {
  --fa: "\f20e";
}

.fa-leanpub {
  --fa: "\f212";
}

.fa-black-tie {
  --fa: "\f27e";
}

.fa-themeco {
  --fa: "\f5c6";
}

.fa-python {
  --fa: "\f3e2";
}

.fa-android {
  --fa: "\f17b";
}

.fa-bots {
  --fa: "\e340";
}

.fa-free-code-camp {
  --fa: "\f2c5";
}

.fa-hornbill {
  --fa: "\f592";
}

.fa-js {
  --fa: "\f3b8";
}

.fa-ideal {
  --fa: "\e013";
}

.fa-git {
  --fa: "\f1d3";
}

.fa-dev {
  --fa: "\f6cc";
}

.fa-sketch {
  --fa: "\f7c6";
}

.fa-yandex-international {
  --fa: "\f414";
}

.fa-cc-amex {
  --fa: "\f1f3";
}

.fa-uber {
  --fa: "\f402";
}

.fa-github {
  --fa: "\f09b";
}

.fa-php {
  --fa: "\f457";
}

.fa-alipay {
  --fa: "\f642";
}

.fa-youtube {
  --fa: "\f167";
}

.fa-skyatlas {
  --fa: "\f216";
}

.fa-firefox-browser {
  --fa: "\e007";
}

.fa-replyd {
  --fa: "\f3e6";
}

.fa-suse {
  --fa: "\f7d6";
}

.fa-jenkins {
  --fa: "\f3b6";
}

.fa-twitter {
  --fa: "\f099";
}

.fa-rockrms {
  --fa: "\f3e9";
}

.fa-pinterest {
  --fa: "\f0d2";
}

.fa-buffer {
  --fa: "\f837";
}

.fa-npm {
  --fa: "\f3d4";
}

.fa-yammer {
  --fa: "\f840";
}

.fa-btc {
  --fa: "\f15a";
}

.fa-dribbble {
  --fa: "\f17d";
}

.fa-stumbleupon-circle {
  --fa: "\f1a3";
}

.fa-internet-explorer {
  --fa: "\f26b";
}

.fa-stubber {
  --fa: "\e5c7";
}

.fa-telegram {
  --fa: "\f2c6";
}

.fa-telegram-plane {
  --fa: "\f2c6";
}

.fa-old-republic {
  --fa: "\f510";
}

.fa-odysee {
  --fa: "\e5c6";
}

.fa-square-whatsapp {
  --fa: "\f40c";
}

.fa-whatsapp-square {
  --fa: "\f40c";
}

.fa-node-js {
  --fa: "\f3d3";
}

.fa-edge-legacy {
  --fa: "\e078";
}

.fa-slack {
  --fa: "\f198";
}

.fa-slack-hash {
  --fa: "\f198";
}

.fa-medrt {
  --fa: "\f3c8";
}

.fa-usb {
  --fa: "\f287";
}

.fa-tumblr {
  --fa: "\f173";
}

.fa-vaadin {
  --fa: "\f408";
}

.fa-quora {
  --fa: "\f2c4";
}

.fa-square-x-twitter {
  --fa: "\e61a";
}

.fa-reacteurope {
  --fa: "\f75d";
}

.fa-medium {
  --fa: "\f23a";
}

.fa-medium-m {
  --fa: "\f23a";
}

.fa-amilia {
  --fa: "\f36d";
}

.fa-mixcloud {
  --fa: "\f289";
}

.fa-flipboard {
  --fa: "\f44d";
}

.fa-viacoin {
  --fa: "\f237";
}

.fa-critical-role {
  --fa: "\f6c9";
}

.fa-sitrox {
  --fa: "\e44a";
}

.fa-discourse {
  --fa: "\f393";
}

.fa-joomla {
  --fa: "\f1aa";
}

.fa-mastodon {
  --fa: "\f4f6";
}

.fa-airbnb {
  --fa: "\f834";
}

.fa-wolf-pack-battalion {
  --fa: "\f514";
}

.fa-buy-n-large {
  --fa: "\f8a6";
}

.fa-gulp {
  --fa: "\f3ae";
}

.fa-creative-commons-sampling-plus {
  --fa: "\f4f1";
}

.fa-strava {
  --fa: "\f428";
}

.fa-ember {
  --fa: "\f423";
}

.fa-canadian-maple-leaf {
  --fa: "\f785";
}

.fa-teamspeak {
  --fa: "\f4f9";
}

.fa-pushed {
  --fa: "\f3e1";
}

.fa-wordpress-simple {
  --fa: "\f411";
}

.fa-nutritionix {
  --fa: "\f3d6";
}

.fa-wodu {
  --fa: "\e088";
}

.fa-google-pay {
  --fa: "\e079";
}

.fa-intercom {
  --fa: "\f7af";
}

.fa-zhihu {
  --fa: "\f63f";
}

.fa-korvue {
  --fa: "\f42f";
}

.fa-pix {
  --fa: "\e43a";
}

.fa-steam-symbol {
  --fa: "\f3f6";
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0s;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
img {
  max-width: 100%;
  display: block;
}

.image--businesshero {
  border: 1px solid #888;
  margin: 40px auto;
  width: 90%;
}

.is-hidden {
  display: none !important;
}

.is-clickable {
  cursor: pointer;
}

hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin: 32px 0;
}

.hr-dotted {
  border: 1px dotted #ddd;
}

.sub-heading {
  font-size: 18px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.icon::before {
  display: none;
}

.icon--before::after {
  display: none;
}
.icon--before::before {
  margin-right: 4px;
  display: inline-block;
}

.icon--no-margin::before, .icon--no-margin::after {
  margin: 0;
}

.icon--warning {
  color: #ff6800;
}

.icon--green {
  color: #366e34;
}

.icon--gray {
  color: #ddd;
}

.icon--check::before, .icon--check::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f00c";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--check::after {
  margin-left: 4px;
}

.icon--external::before, .icon--external::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f35d";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--external::after {
  margin-left: 4px;
}

.icon--download::before, .icon--download::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f019";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--download::after {
  margin-left: 4px;
}

.icon--pdf::before, .icon--pdf::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f1c1";
  color: #ea6161;
  font-weight: bold;
  font-style: normal;
}
.icon--pdf::after {
  margin-left: 4px;
}

.icon--sent::before, .icon--sent::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f1d8";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--sent::after {
  margin-left: 4px;
}

.icon--paid::before, .icon--paid::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f4d3";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--paid::after {
  margin-left: 4px;
}

.icon--credited::before, .icon--credited::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f55a";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--credited::after {
  margin-left: 4px;
}

.icon--empty::before, .icon--empty::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f05e";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--empty::after {
  margin-left: 4px;
}

.icon--edit::before, .icon--edit::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f044";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--edit::after {
  margin-left: 4px;
}

.icon--delete::before, .icon--delete::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f2ed";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--delete::after {
  margin-left: 4px;
}

.icon--info-circle::before, .icon--info-circle::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f05a";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--info-circle::after {
  margin-left: 4px;
}

.icon--bell::before, .icon--bell::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f0f3";
  color: inherit;
  font-weight: normal;
  font-style: normal;
}
.icon--bell::after {
  margin-left: 4px;
}

.icon--close::before, .icon--close::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f00d";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--close::after {
  margin-left: 4px;
}

.icon--calendar-check::before, .icon--calendar-check::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f274";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--calendar-check::after {
  margin-left: 4px;
}

.icon--calendar-xmark::before, .icon--calendar-xmark::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f273";
  color: inherit;
  font-weight: bold;
  font-style: normal;
}
.icon--calendar-xmark::after {
  margin-left: 4px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
a {
  color: #1493bc;
  text-decoration: none;
}
a:active {
  color: #71bdd6;
  text-decoration: underline;
}
a:hover {
  color: #236377;
  text-decoration: underline;
}

.black-link {
  color: #000;
}

.ng-link {
  color: #1493bc;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 150ms ease-in-out, border-color 150ms ease-in-out, border-width 150ms ease-in-out;
  border-width: 0;
  border-style: solid;
  border-color: #1493bc;
  cursor: pointer;
}
.ng-link:active {
  color: #71bdd6;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #71bdd6;
}
.ng-link:hover {
  color: #236377;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #236377;
}

.ng-link--underlined {
  border-width: 0 0 1px;
}

.ng-link--black {
  color: #0e0e0e;
  border-color: rgba(0, 0, 0, 0.25);
}
.ng-link--black:active {
  color: #0e0e0e;
  border-color: #000;
}
.ng-link--black:hover {
  color: #0e0e0e;
  border-color: #000;
}

.ng-link--superuser {
  color: #ff6800;
  border-color: #ff6800;
}
.ng-link--superuser:active {
  color: #e55d00;
  border-color: #e55d00;
}
.ng-link--superuser:hover {
  color: #e55d00;
  border-color: #e55d00;
}

.list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list--unordered {
  list-style: disc;
  padding-left: 24px;
}

.list--ordered {
  list-style-type: decimal;
  padding-left: 24px;
}

.list__item + .list__item {
  margin-top: 8px;
}

.list__item--indented {
  margin-left: 32px;
}

.incremented-list {
  counter-reset: listCounter;
}

.incremented-list .incremented-list__item::before {
  counter-increment: listCounter;
  content: counter(listCounter) ") ";
}
.incremented-list--dot .incremented-list__item::before {
  counter-increment: listCounter;
  content: counter(listCounter) ". ";
}
.incremented-list--dash .incremented-list__item::before {
  counter-increment: listCounter;
  content: counter(listCounter) " - ";
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.table-container {
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: auto;
  background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-container.reduced-padding-cells .table__cell {
  padding: 8px 12px;
}

.table {
  width: 100%;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
}

.table__caption {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
  background-color: #eee;
  font-weight: 500;
}

.table__cell {
  padding: 8px 16px;
  text-align: left;
  border-color: #ddd;
  border-style: solid;
}
.table--borderless .table__cell {
  border-style: none;
}
.table__head .table__cell, .table__foot .table__cell {
  font-size: 14px;
  font-weight: 500;
  background-color: #eee;
}
.table__head .table__cell {
  border-bottom-width: 1px;
}
.table__head--vertically-aligned .table__cell {
  vertical-align: text-top;
}
.table__foot .table__cell {
  border-top-width: 1px;
}
.table__body .table__row .table__cell {
  border-top-width: 1px;
}
.table__cell + .table__cell {
  border-left-width: 1px;
}

.table__cell--align-right {
  text-align: right;
}

.table__cell--align-center {
  text-align: center;
}

.table__cell--full-width {
  width: 100%;
}

.table--alternate .table__row:nth-child(even) {
  background-color: #f4f4f4;
}

.table--alternate .table__row:nth-child(odd) {
  background-color: #fff;
}

.table__row--active {
  border-left: 8px solid #007e47;
}

.table-row-active-indicator {
  padding-left: 4px;
  border-left: 4px solid #007e47;
}

.table__row--inactive {
  border-left: 8px solid #ea6161;
}

.table__data {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  display: block;
  white-space: nowrap;
}

.table__data--highlight {
  font-weight: 500;
  color: #007e47;
}

.table__data--highlight-secondary {
  color: #676767;
}

.table-default {
  width: 100%;
}
.table-default th,
.table-default td {
  padding: 0.5em 0.75em;
  text-align: left;
}
.table-default th + th,
.table-default td + td {
  border-left: solid 1px #ddd;
}
.table-default thead th,
.table-default tfoot td {
  font-size: 14px;
  font-weight: normal;
  border-bottom: solid 1px #ddd;
}
.table-default tfoot td {
  border-top: solid 1px #ddd;
}
@media only screen and (max-width: 640px) {
  .table-default tr {
    padding: 0.5em 0.75em;
  }
  .table-default td {
    padding: 0;
  }
}
.table-default tr + tr td {
  border-top: 1px solid #ddd;
}
.table-default thead tr,
.table-default tfoot tr {
  background-color: #f4f4f4;
}
.table-default .table-default__cell-right {
  text-align: right;
}
@media only screen and (min-width: 640px) {
  .table-default .count {
    text-align: center;
  }
}
@media only screen and (min-width: 640px) {
  .table-default small {
    display: block;
    color: #888;
  }
}

/* CUSTOM CSS BELOW  */
.table-compact th {
  padding: 0.35em 0.5em;
  font-size: 14px;
}
.table-compact td {
  padding: 0.2em 0.5em;
  font-size: 14px;
}
@media only screen and (max-width: 640px) {
  .table-compact tr {
    padding: 0.5em 0.75em;
  }
  .table-compact td {
    padding: 0;
  }
}

.table-default__deleted-row {
  border-left: 4px solid #f01818;
}

.table-borders tr {
  border-bottom: solid 1px #ddd;
}
.table-borders tr:last-child {
  border-bottom: 0;
}
@media only screen and (max-width: 640px) {
  .table-borders td {
    border-left: 0;
  }
}
.table-borders td + td {
  border-left: solid 1px #ddd;
}

.table-no-stripes tr {
  background: none;
}
.table-no-stripes thead tr {
  background-color: #f4f4f4;
}

.table-vertical-aligned td {
  vertical-align: top;
}

.table-list th {
  font-size: 14px;
  font-weight: normal;
}
.table-list td {
  font-size: 14px;
}
.table-list tr:nth-child(even) {
  background: #f4f4f4;
}
.table-list thead tr {
  background-color: #f4f4f4;
}
@media only screen and (min-width: 640px) {
  .table-list .count {
    text-align: center;
  }
}
@media only screen and (max-width: 640px) {
  .table-list thead {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
  }
  .table-list td {
    display: block;
  }
  .table-list tr::before {
    display: none;
    padding: 0.5em;
    font-weight: 500;
    content: attr(data-label);
  }
}

.permissions-table {
  background-color: #fff;
}
.permissions-table th {
  font-size: 14px;
  font-weight: normal;
}
.permissions-table td {
  font-size: 14px;
}
.permissions-table th,
.permissions-table td {
  text-align: center;
}
.permissions-table th:first-child,
.permissions-table td:first-child {
  text-align: left;
}
.permissions-table td {
  color: #366e34;
}
.permissions-table td:first-child {
  color: #000;
}

.permissions-table__section-header {
  font-weight: 500;
}

@media only screen and (max-width: 640px) {
  table {
    width: 100%;
    /* Labeling
     * adding a data-title attribute to the cells
     * lets us add text before the content to provide
     * the missing context
     *
     * Markup:
     *   <td data-title="Column Header">Content Here</td>
     *
     * Display:
     *   Column Header: Content Here
     */
  }
  table th[data-title]::before,
  table td[data-title]::before {
    content: attr(data-title) " ";
    font-size: 14px;
    color: #888;
    display: block;
  }
  table td:empty {
    display: none;
  }
}
.empty-table {
  background-color: #f4f4f4;
  padding: 5em;
}
@media only screen and (max-width: 640px) {
  .empty-table {
    padding: 2em;
  }
}
.empty-table .empty-table-message {
  background-color: #fff;
  text-align: left;
  padding: 2.188em 1.563em 1em;
}
.empty-table .empty-table-message a {
  display: block;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
body {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #161616;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 16px;
}

pre,
code,
kbd,
samp {
  font-family: Monaco, Courier New, monospace;
  font-size: 14px;
  line-height: 1.5em;
  color: #888;
}

abbr[title] {
  border-bottom: 0;
  cursor: help;
}

i {
  font-style: italic;
}

time {
  white-space: nowrap;
}

p {
  margin: 0 0 1em;
}

small {
  font-size: 14px;
}

blockquote {
  background-color: #f4f4f4;
  padding: 0.7em 1em 0.3em;
  font-style: italic;
}

cite {
  font-size: 14px;
  display: block;
  margin-top: 0.5em;
}

.sub-nav-headline {
  font-size: 16px;
  font-weight: 500;
  float: left;
  margin: 1em 0 0 0.5em;
}

.paragraph {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 24px;
}

@media only screen and (min-width: 960px) {
  .paragraph--limited {
    width: 75%;
  }
}

.paragraph--lead,
.lead-paragraph {
  font-size: 18px;
  line-height: 28px;
}

.secondary-paragraph {
  font-size: 14px;
}

.tertiary-paragraph {
  font-size: 14px;
}

.highlight {
  background-color: #fffbf8;
  padding: 0 5px;
}

.highlight-superuser {
  background-color: #ff6800;
  color: #fff;
  padding: 5px;
  font-weight: 500;
}

.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.info-box-header {
  font-size: 14px;
  color: #888;
}

.editorial-content-box {
  font-size: 14px;
}
.editorial-content-box h3 {
  color: #39aa35;
  font-size: 22px;
}
.editorial-content-box p:last-child {
  margin-bottom: 0;
}

.line-through {
  text-decoration: line-through;
}

.heading {
  margin-bottom: 12px;
  font-weight: 500;
  display: block;
}

.business-heading {
  margin-bottom: 12px;
  display: block;
}

.heading--large {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 32px;
}

.heading--secondary {
  font-weight: 500;
  margin-bottom: 12px;
  display: block;
}

.heading--confirmation {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 32px;
  color: #39aa35;
  margin-bottom: 8px;
}
@media only screen and (min-width: 768px) {
  .heading--confirmation {
    margin-bottom: 16px;
  }
}

.heading--size1 {
  font-size: 22px;
  line-height: 36px;
}

.heading--size2 {
  font-size: 22px;
  line-height: 32px;
}

.heading--size3 {
  font-size: 18px;
  line-height: 24px;
}

.heading--size4 {
  font-size: 18px;
  line-height: 24px;
}

.heading--size5 {
  font-size: 18px;
  line-height: 24px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.mt0 {
  margin-top: 0 !important;
}

.mt1 {
  margin-top: 8px !important;
}

.mt2 {
  margin-top: 16px !important;
}

.mt3 {
  margin-top: 24px !important;
}

.mt4 {
  margin-top: 32px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb1 {
  margin-bottom: 8px !important;
}

.mb2 {
  margin-bottom: 16px !important;
}

.mb3 {
  margin-bottom: 24px !important;
}

.mb4 {
  margin-bottom: 32px !important;
}

.mr1 {
  margin-right: 8px;
}

.mr2 {
  margin-right: 16px;
}

.mr3 {
  margin-right: 24px;
}

.mr4 {
  margin-right: 32px;
}

.ml1 {
  margin-left: 8px;
}

.ml2 {
  margin-left: 16px;
}

.ml3 {
  margin-left: 24px;
}

.ml4 {
  margin-left: 32px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.italic {
  font-style: italic;
}

.nowrap {
  white-space: nowrap;
}

.wrapper--padded {
  width: 100%;
  padding: 0 8px;
}
@media only screen and (min-width: 960px) {
  .wrapper--padded {
    padding: 0 16px;
  }
}

.xl-container {
  max-width: 1440px;
  margin: 0 auto;
}
.xl-container::before, .xl-container::after {
  content: "";
  display: table;
}
.xl-container::after {
  clear: both;
}

.xl-content--padded {
  padding-top: 48px;
  padding-bottom: 48px;
  padding-left: 24px;
  padding-right: 24px;
}
@media only screen and (min-width: 960px) {
  .xl-content--padded {
    padding-top: 160px;
    padding-bottom: 160px;
    padding-left: 80px;
    padding-right: 80px;
  }
}

.content {
  background: #fff;
  padding: 24px;
}
.content::before, .content::after {
  content: "";
  display: table;
}
.content::after {
  clear: both;
}
@media only screen and (max-width: 767px) {
  .content {
    padding: 16px 8px;
  }
}
.content + .content {
  margin-top: 24px;
}
@media only screen and (max-width: 767px) {
  .content + .content {
    margin-top: 16px;
  }
}
.broker-stats.search .content {
  padding: 0;
}

.content__section {
  width: 100%;
}
.content__section::before, .content__section::after {
  content: "";
  display: table;
}
.content__section::after {
  clear: both;
}
.content__section + .content__section {
  margin-top: 16px;
}
@media only screen and (min-width: 768px) {
  .content__section + .content__section {
    margin-top: 32px;
  }
}

.content__section--border {
  border-top: 1px solid #ddd;
  padding-top: 16px;
}
@media only screen and (min-width: 768px) {
  .content__section--border {
    padding-top: 32px;
  }
}

* {
  box-sizing: border-box;
}

.body {
  position: relative;
  overflow-x: hidden;
  background-color: #f4f4f4;
  min-width: 360px;
  font-size: 16px;
}

.row::before, .row::after {
  content: "";
  display: table;
}
.row::after {
  clear: both;
}
@media only screen and (min-width: 640px) {
  .row .column-left {
    float: left;
    width: 49%;
    margin-right: 2%;
  }
  .row .column-left.one-third {
    width: 32%;
  }
  .row .column-left.two-thirds {
    width: 65%;
  }
  .row .column-right {
    float: right;
    width: 49%;
  }
  .row .column-right.one-third {
    width: 32%;
  }
  .row .column-right.two-thirds {
    width: 65%;
  }
  .row .column-no-float {
    float: none;
    width: 49%;
  }
  .row .column-no-float.one-third {
    width: 32%;
  }
  .row .column-no-float.two-thirds {
    width: 65%;
  }
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.flex-row.justified {
  justify-content: space-between;
  align-items: center;
}
.flex-row .column-left,
.flex-row .column-right,
.flex-row .column-no-float {
  flex: 0 1 auto;
  width: 100%;
}
@media only screen and (min-width: 480px) {
  .flex-row .column-left {
    width: 49%;
    margin-right: 2%;
  }
  .flex-row .column-left.one-third {
    width: 32%;
  }
  .flex-row .column-left.two-thirds {
    width: 65%;
  }
  .flex-row .column-right {
    width: 49%;
  }
  .flex-row .column-right.one-third {
    width: 32%;
  }
  .flex-row .column-right.two-thirds {
    width: 65%;
  }
  .flex-row .column-no-float {
    width: 49%;
  }
  .flex-row .column-no-float.one-third {
    width: 32%;
  }
  .flex-row .column-no-float.two-thirds {
    width: 65%;
  }
}

.js-header-sticky {
  padding-top: 61px;
}
@media only screen and (min-width: 768px) {
  .js-header-sticky {
    padding-top: 81px;
  }
}
@media only screen and (min-width: 960px) {
  .js-header-sticky {
    padding-top: 0;
  }
}

.header {
  width: 100%;
  border-top: 8px solid #39aa35;
  box-shadow: 0 0 8px rgba(51, 51, 51, 0.2);
  background-color: #fff;
  padding: 0 8px;
  position: relative;
}
@media only screen and (min-width: 960px) {
  .header {
    position: static;
    padding: 0 16px;
  }
}
.js-header-sticky .header {
  transition: top 0.35s cubic-bezier(1, 0.5, 0.5, 1);
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  top: -61px;
}
@media only screen and (min-width: 768px) {
  .js-header-sticky .header {
    top: -81px;
  }
}
@media only screen and (min-width: 960px) {
  .js-header-sticky .header {
    position: static;
  }
}
.js-header-visible .header {
  top: 0;
}

.header__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
  height: 52px;
}
.header__inner::before, .header__inner::after {
  content: "";
  display: table;
}
.header__inner::after {
  clear: both;
}
.broker-stats.search .header__inner {
  max-width: none;
}
@media only screen and (min-width: 768px) {
  .header__inner {
    height: 72px;
  }
}
@media only screen and (min-width: 960px) {
  .header__inner {
    height: 112px;
  }
}

.header__navigation {
  display: none;
}
@media only screen and (min-width: 768px) {
  .header__navigation {
    display: block;
    padding: 0 5%;
  }
}

.header__navigation-el + .header__navigation-el {
  margin-left: 48px;
}

.header__link {
  margin-left: auto;
  padding-right: 16px;
}
@media only screen and (min-width: 768px) {
  .header__link {
    padding-right: 24px;
  }
}
@media only screen and (min-width: 960px) {
  .header__link {
    padding-right: 40px;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.main {
  width: 100%;
  padding: 0 8px;
  position: relative;
}
@media only screen and (min-width: 960px) {
  .main {
    padding: 0 16px;
  }
}

.main--bare {
  padding: 0;
}

.main-container {
  max-width: 1440px;
  margin: 0 auto;
  box-shadow: 0 1px 2px rgba(51, 51, 51, 0.15);
  border-radius: 3px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.main-container::before, .main-container::after {
  content: "";
  display: table;
}
.main-container::after {
  clear: both;
}
@media only screen and (min-width: 960px) {
  .main-container {
    display: flex;
    margin-top: 32px;
    margin-bottom: 32px;
  }
}
.broker-stats.search .main-container {
  max-width: none;
}

.main-sidebar {
  border-top: 8px solid #39aa35;
  position: fixed;
  z-index: 3;
  background-color: #fff;
  padding-bottom: 32px;
  top: 0;
  bottom: 0;
  width: 360px;
  right: -360px;
  transition: right 0.5s cubic-bezier(1, 0.2, 0.2, 1);
}
.js-navigation--active .main-sidebar {
  right: 0;
  bottom: 0;
  overflow: scroll;
}
@media only screen and (min-width: 768px) {
  .main-sidebar {
    width: 50%;
    right: -50%;
  }
}
@media only screen and (min-width: 960px) {
  .main-sidebar {
    width: 300px;
    padding: 56px 0;
    position: static;
    border-top: 0;
    border-right: 1px solid #eee;
    display: block;
  }
}
@media only screen and (min-width: 1281px) {
  .main-sidebar {
    padding: 72px 0;
  }
}
@media only screen and (min-width: 960px) {
  .main-sidebar + .main-content {
    width: calc(100% - 300px);
  }
}

.main-sidebar--backoffice {
  background-color: #e4e8da;
}

.main-content {
  background-color: #fff;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
}
@media only screen and (min-width: 768px) {
  .main-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
@media only screen and (min-width: 960px) {
  .main-content {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}
@media only screen and (min-width: 1281px) {
  .main-content {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}
@media only screen and (min-width: 768px) {
  .main-content {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media only screen and (min-width: 960px) {
  .main-content {
    padding-left: 56px;
    padding-right: 56px;
  }
}
@media only screen and (min-width: 1281px) {
  .main-content {
    padding-left: 72px;
    padding-right: 72px;
  }
}

.main-content__full-width-section {
  margin: 0 -16px;
}
@media only screen and (min-width: 768px) {
  .main-content__full-width-section {
    margin: 0 -24px;
  }
}
@media only screen and (min-width: 960px) {
  .main-content__full-width-section {
    margin: 0 -56px;
  }
}
@media only screen and (min-width: 1281px) {
  .main-content__full-width-section {
    margin: 0 -72px;
  }
}

.secondary-content,
.messages {
  max-width: 1440px;
  margin: 0 auto;
}
.secondary-content::before, .secondary-content::after,
.messages::before,
.messages::after {
  content: "";
  display: table;
}
.secondary-content::after,
.messages::after {
  clear: both;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.footer-container {
  width: 100%;
  background-color: #fff;
  border-bottom: 8px solid #39aa35;
  padding: 0 8px;
  position: relative;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .footer-container {
    text-align: left;
  }
}
@media only screen and (min-width: 960px) {
  .footer-container {
    padding: 0 16px;
  }
}

.footer {
  margin: 0 auto;
  max-width: 1440px;
  padding: 24px;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
}
@supports (display: grid) {
  .footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "support" "navigation" "social" "logo" "disclaimer";
  }
  @media only screen and (min-width: 768px) {
    .footer {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "support navigation" "logo social" "disclaimer disclaimer";
    }
  }
}

.footer__section {
  padding: 32px 0;
  flex: 0 1 50%;
}

@supports (display: grid) {
  .footer__section--support {
    grid-area: support;
  }
}

@supports (display: grid) {
  .footer__section--navigation {
    grid-area: navigation;
    border-top: 1px solid #e4e8da;
  }
  @media only screen and (min-width: 768px) {
    .footer__section--navigation {
      border: 0;
    }
  }
}

@supports (display: grid) {
  .footer__section--logo {
    grid-area: logo;
  }
}
@media only screen and (min-width: 768px) {
  .footer__section--logo {
    border-top: 1px solid #e4e8da;
  }
}

.footer__section--social {
  border-top: 1px solid #e4e8da;
}
@supports (display: grid) {
  .footer__section--social {
    grid-area: social;
    border-bottom: 1px solid #e4e8da;
  }
  @media only screen and (min-width: 768px) {
    .footer__section--social {
      border-bottom: 0;
    }
  }
}

.footer__section--disclaimer {
  flex: 1 0 100%;
  padding: 0;
}
@supports (display: grid) {
  .footer__section--disclaimer {
    grid-area: disclaimer;
  }
}

.footer__contact {
  margin-bottom: 48px;
}

.footer__contact-element {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .footer__contact-element {
    text-align: left;
  }
}
.footer__contact-element + .footer__contact-element {
  margin-top: 12px;
}

.footer__contact-prefix {
  min-width: 80px;
  color: #434343;
  text-transform: uppercase;
  font-size: 14px;
  display: block;
}
@media only screen and (min-width: 960px) {
  .footer__contact-prefix {
    font-size: 14px;
    display: inline-block;
  }
}

.footer__opening-hours {
  max-width: 360px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .footer__opening-hours {
    margin: 0;
    max-width: none;
  }
}

.footer__opening-hours-element {
  width: 50%;
  text-align: left;
  line-height: 32px;
}
.footer__opening-hours-element:nth-child(2) {
  order: 3;
}
@media only screen and (min-width: 768px) {
  .footer__opening-hours-element {
    width: 45%;
  }
}
@media only screen and (min-width: 960px) {
  .footer__opening-hours-element {
    width: 40%;
  }
}

.footer__opening-hours-element--sunday {
  font-style: italic;
  text-align: right;
}
@media only screen and (min-width: 960px) {
  .footer__opening-hours-element--sunday {
    text-align: left;
  }
}

@media only screen and (min-width: 768px) {
  .footer__navigation {
    margin-top: 48px;
    text-align: right;
  }
}

.footer__navigation-element + .footer__navigation-element {
  margin-top: 14px;
}

.footer__social-icons {
  max-width: 360px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
@media only screen and (min-width: 768px) {
  .footer__social-icons {
    margin: 0;
    max-width: none;
  }
}
@media only screen and (min-width: 960px) {
  .footer__social-icons {
    justify-content: flex-end;
  }
}

@media only screen and (min-width: 960px) {
  .footer__social-icons-element + .footer__social-icons-element {
    margin-left: 24px;
  }
}

.footer__disclaimer {
  display: block;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .footer__disclaimer {
    text-align: right;
  }
}

.social-icon::after {
  width: 32px;
  height: 32px;
  display: inline-block;
  font-family: "Font Awesome 6 Brands";
  font-size: 22px;
  color: #333;
  text-align: center;
  line-height: 32px;
}

.social-icon--facebook::after {
  content: "\f082";
}

.social-icon--instagram::after {
  content: "\f16d";
}

.social-icon--twitter::after {
  content: "\f081";
}

.social-icon__text {
  display: inline-block;
  text-indent: -9999px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.js-navigation::before {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #333;
  content: "";
}

.js-navigation--active::before {
  z-index: 2;
  opacity: 0.5;
}

.navigation {
  text-align: center;
}
@media only screen and (min-width: 960px) {
  .navigation {
    text-align: left;
  }
}
.navigation + .navigation {
  margin-top: 24px;
}

.navigation__item {
  color: #333;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  margin-top: 8px;
  font-weight: 500;
  position: relative;
}
.navigation--second-level .navigation__item {
  text-transform: none;
  color: #5f6368;
  font-weight: normal;
}

.navigation__placeholder,
.navigation__link {
  padding: 4px 40px;
}

.navigation__placeholder {
  pointer-events: none;
}

.navigation__link {
  display: block;
  padding-top: 4px;
  padding-bottom: 4px;
  color: inherit;
}
.navigation__link:hover {
  color: inherit;
}
.navigation__link:hover, .navigation__item--active .navigation__link {
  text-decoration: none;
  color: #333;
}
.navigation__link:hover::before, .navigation__item--active .navigation__link::before {
  position: absolute;
  width: 4px;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: #0bb70b;
  content: "";
}

.navigation__link--external::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f35d";
  margin-left: 4px;
}

.navigation__link--backoffice {
  color: #ff6800;
}
.navigation__link--backoffice:hover {
  color: #ff6800;
}

.subnavigation {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-y: hidden;
}

.sub-navigation {
  border-radius: 3px;
  overflow: hidden;
  margin: 16px 0 32px;
}
@media only screen and (min-width: 768px) {
  .sub-navigation {
    display: flex;
    flex-wrap: wrap;
  }
}

.sub-navigation__item {
  transition-property: background-color;
  transition-duration: 0.5s;
  border: 1px solid #ddd;
  border-bottom: 0;
  flex-grow: 1;
  text-align: center;
  padding: 12px 0;
}
@media (min-width: 550px) {
  .sub-navigation__item {
    border-bottom: 1px solid #ddd;
    border-right: 0;
  }
}
.sub-navigation__item:first-of-type {
  border-radius: 4px 4px 0 0;
}
@media (min-width: 550px) {
  .sub-navigation__item:first-of-type {
    border-radius: 4px 0 0 4px;
  }
}
.sub-navigation__item:last-of-type {
  border-bottom: 1px solid #ddd;
  border-radius: 0 0 4px 4px;
}
@media (min-width: 550px) {
  .sub-navigation__item:last-of-type {
    border-right: 1px solid #ddd;
    border-radius: 0 4px 4px 0;
  }
}
.sub-navigation__item:hover, .sub-navigation__item--active {
  background: #d3dccc;
}

.sub-navigation__link {
  font-size: 14px;
  color: #0e0e0e;
  display: block;
}
.sub-navigation__link:hover {
  color: #0e0e0e;
  text-decoration: none;
}

.sub-navigation__organisation-select {
  margin-left: auto;
  padding: 0 16px;
}
@media only screen and (min-width: 768px) {
  .sub-navigation__organisation-select {
    padding: 0;
  }
}

.navigation-button {
  position: absolute;
  z-index: 2;
  right: 0;
  padding: 8px;
  height: 40px;
  width: 40px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media only screen and (min-width: 960px) {
  .navigation-button {
    display: none;
  }
}
.navigation-button:focus {
  outline: 0;
}
.navigation-button::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f0c9";
  font-size: 18px;
}

.navigation-button--close {
  top: 8px;
  right: 8px;
  background: #fff;
}
.navigation-button--close::before {
  content: "\f00d";
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.user-navigation-container {
  max-width: 380px;
  margin: 24px 0;
  position: relative;
  z-index: 5;
}
@media only screen and (min-width: 960px) {
  .user-navigation-container {
    position: absolute;
    right: 40px;
    top: 12px;
    padding: 16px;
    margin: 0;
  }
  .user-navigation-container:hover {
    box-shadow: 0 0 8px rgba(51, 51, 51, 0.1);
    background: #fff;
  }
}

.user-navigation {
  font-size: 14px;
  text-align: center;
}

.user-navigation--desktop {
  display: none;
  text-align: left;
}
.user-navigation--desktop::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f107";
  color: #1493bc;
  margin-left: 8px;
}
@media only screen and (min-width: 960px) {
  .user-navigation--desktop {
    align-items: flex-start;
    justify-content: flex-start;
    display: flex;
  }
}

.user-navigation--handheld {
  display: block;
  border-bottom: 1px solid #ddd;
  margin-bottom: 32px;
  padding: 0 8px;
}
@media only screen and (min-width: 960px) {
  .user-navigation--handheld {
    display: none;
  }
}

.user-navigation__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  height: 60px;
}
@media only screen and (min-width: 768px) {
  .user-navigation__header {
    height: 75px;
  }
}

.user-navigation__avatar {
  border-radius: 100%;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  overflow: hidden;
  display: none;
}
.user-navigation__avatar::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  font-size: 18px;
}
@media only screen and (min-width: 960px) {
  .user-navigation__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.user-navigation__avatar--default::before {
  content: "\f007";
  color: #39aa35;
}

.user-navigation__avatar--superuser::before {
  content: "\f21b";
  color: #ff6800;
}

.user-navigation__section--top {
  position: relative;
  padding: 16px 0;
}

.user-navigation__section--links {
  display: flex;
  text-transform: uppercase;
}
.user-navigation--handheld .user-navigation__section--links {
  justify-content: center;
  padding: 16px 0;
}
.user-navigation--desktop .user-navigation__section--links {
  justify-content: space-between;
  margin-top: 4px;
}
@media only screen and (min-width: 960px) {
  .user-navigation--desktop .user-navigation__section--links {
    visibility: hidden;
  }
  .user-navigation-container:hover .user-navigation--desktop .user-navigation__section--links {
    visibility: visible;
  }
}

.user-navigation__link {
  font-weight: 500;
}
.user-navigation__link + .user-navigation__link {
  margin-left: 16px;
}

.user-navigation__name,
.user-navigation__organisation {
  margin: 0;
}

.user-navigation__name {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.user-navigation__organisation-section {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.user-navigation__organisation-picker {
  font-size: 16px;
  margin-left: 4px;
}

@media only screen and (min-width: 960px) {
  .logo {
    width: 300px;
  }
}

.logo--header {
  padding-left: 16px;
}
@media only screen and (min-width: 768px) {
  .logo--header {
    padding-left: 24px;
  }
}
@media only screen and (min-width: 960px) {
  .logo--header {
    padding-left: 40px;
  }
}

.logo--footer {
  text-align: center;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .logo--footer {
    text-align: left;
  }
}

.logo__link:hover {
  text-decoration: none;
}

.logo__image {
  width: auto;
  height: 20px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .logo__image {
    height: 28px;
    margin: 0;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.notification-center {
  z-index: 3;
  position: absolute;
  right: 40px;
  top: 0;
  padding: 8px;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .notification-center {
    padding: 12px;
    top: 8px;
  }
}
@media only screen and (min-width: 960px) {
  .notification-center {
    padding: 16px;
    padding-right: 8px;
    top: 8px;
    right: 0;
  }
}

.notification-menu-toggle {
  position: relative;
  padding: 8px;
  background: none;
  border: 0;
  font-size: 16px;
}
.notification-menu-toggle:hover {
  cursor: pointer;
}

.notification-menu-toggle__new-indicator {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0bb70b;
}

.notification-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.notification-list-header__heading {
  font-weight: 500;
  font-size: 14px;
  color: #013a14;
}

.notification-list-heading__close {
  padding: 8px;
}
.notification-list-heading__close:hover {
  cursor: pointer;
}

.notification-list {
  margin-top: 16px;
}

.notification-list__empty-wrapper {
  padding: 16px;
}

.empty-state-bell-wrapper {
  position: relative;
  padding: 4px 8px;
}

.notification {
  background-color: #f4f4f4;
  padding: 16px;
  margin: 0 8px 8px;
  display: flex;
  border-radius: 3px;
}

.notification--unseen {
  margin: 0 0 8px;
}

.notification__unseen-indicator {
  padding: 8px;
  padding: 6px;
  display: flex;
  align-self: flex-start;
  align-items: center;
  border: 0;
  background: none;
}
.notification__unseen-indicator:hover {
  cursor: pointer;
}

.notification__unseen-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0bb70b;
}

.notification__title {
  color: #013a14;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}

.notification__text {
  font-size: 14px;
}

.notification__date {
  font-size: 14px;
  color: #888;
  line-height: 14px;
  margin: 8px 0 16px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.organisation-picker-content-area {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #b9baba;
  overflow: hidden;
  background: #c2d0bd;
  border: 0;
  display: flex;
  align-items: center;
  padding: 8px;
  transition: background-color 0.3s ease;
}

.organisation-picker-content-area--link {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  background: #fff;
  border: 0;
  text-decoration: none;
  color: #333;
}

.organisation-picker-content-area--link:hover {
  text-decoration: none;
  color: #333;
}
@media (min-width: 990px) {
  .organisation-picker-content-area--link:hover {
    background: #e4e8da;
    border: 0;
  }
}

.organisation-picker-content-area__name {
  margin-left: 4px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.system-message-wrapper {
  width: 100%;
  background-color: #888;
}

.system-message-wrapper--environment {
  width: 100%;
  background-color: #c161a5;
}

.system-message-container {
  max-width: 980px;
  margin: 0 auto;
}
.system-message-container::before, .system-message-container::after {
  content: "";
  display: table;
}
.system-message-container::after {
  clear: both;
}
.broker-stats.search .system-message-container {
  max-width: none;
}

.system-message {
  display: flex;
  padding: 8px;
  flex-wrap: wrap;
  align-items: center;
}
@media only screen and (min-width: 480px) {
  .system-message {
    padding: 24px 16px;
  }
}
.system-message-wrapper--environment .system-message {
  text-align: center;
}
.system-message-wrapper--cookie .system-message {
  align-items: flex-start;
}

.system-message__content {
  flex: 1;
}

.system-message__action {
  flex: 1 100%;
  margin-top: 8px;
}
@media only screen and (min-width: 480px) {
  .system-message__action {
    margin-left: 16px;
    flex: 0 1 auto;
    margin: 0 0 0 8px;
  }
}

.system-message__text {
  color: #fff;
  font-weight: 500;
  margin: 0;
}

.faq-container {
  margin: 40px auto;
}

.faq + .faq {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 24px;
  margin-top: 24px;
}

.faq__question {
  display: flex;
  width: 100%;
  padding: 0;
  text-align: left;
  font-size: 16px;
  font-weight: normal;
  background: none;
  color: #013a14;
  border: 0;
  transition: color 150ms ease-in-out;
  cursor: pointer;
}
.faq__question:focus {
  outline: none;
}
.faq__question:hover, .faq--active .faq__question {
  text-decoration: none;
}
.faq__question:visited {
  color: #67458c;
}
.faq__question:active {
  color: #67458c;
}

.faq__answer {
  display: none;
  font-size: 16px;
  margin-top: 16px;
}
.faq--active .faq__answer {
  display: block;
}

.faq__icon {
  color: #333;
  margin-left: auto;
  padding-left: 8px;
}

.faq__icon--active {
  display: none;
}
.faq--active .faq__icon--active {
  display: inline-block;
}

.faq__icon--inactive {
  display: inline-block;
}
.faq--active .faq__icon--inactive {
  display: none;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.data-list {
  font-size: 14px;
  padding: 10px 0;
}

.data-list__item {
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.data-list__item + .data-list__item {
  margin-top: 10px;
}

.data-list__section {
  padding: 0 10px;
}

.data-list__inner {
  overflow: hidden;
  padding: 10px 0;
}
.data-list__section + .data-list__section .data-list__inner {
  border-top: 1px solid #ddd;
}

@media only screen and (max-width: 480px) {
  .data-list__statslist + .data-list__statslist {
    padding-top: 5px;
    margin-top: 5px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .data-list__statslist + .data-list__statslist {
    padding-top: 10px;
    margin-top: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .data-list__statslist {
    width: 100%;
    float: left;
  }
  .data-list__statslist + .data-list__statslist {
    border-top: 1px solid #ddd;
  }
}
@media only screen and (min-width: 768px) {
  .data-list__statslist + .data-list__statslist {
    padding-left: 30px;
  }
}
.data-list__statslist + .data-list__statslist {
  overflow: hidden;
  zoom: 1;
}

.data-list__statslist__item {
  float: left;
}
@media only screen and (max-width: 767px) {
  .data-list__statslist__item--property-index {
    width: 25%;
  }
}
@media only screen and (min-width: 480px) {
  .data-list__statslist__item--property-index[aria-label=Statistik] {
    float: right;
    text-align: right;
  }
}
@media only screen and (min-width: 768px) {
  .data-list__statslist__item--property-index + .data-list__statslist__item--property-index {
    padding-left: 7%;
  }
}
@media only screen and (max-width: 767px) {
  .data-list__statslist__item--property-index + .data-list__statslist__item--property-index {
    padding-left: 5px;
  }
}
.data-list__statslist__item--property-page {
  width: 25%;
}
@media only screen and (max-width: 480px) {
  .data-list__statslist__item--property-page {
    width: 50%;
  }
  .data-list__statslist__item--property-page:nth-child(1n+3) {
    margin-top: 10px;
  }
}
.data-list__statslist__item--long-term-reservation {
  width: 24%;
}
@media only screen and (max-width: 480px) {
  .data-list__statslist__item--long-term-reservation {
    width: 100%;
  }
  .data-list__statslist__item--long-term-reservation + .data-list__statslist__item--long-term-reservation {
    margin-top: 10px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
  }
}
.data-list__statslist__item--brokertip-index {
  width: 100%;
}
@media only screen and (min-width: 480px) {
  .data-list__statslist__item--brokertip-index + .data-list__statslist__item--brokertip-index .data-list__definition {
    display: none;
  }
  .data-list__statslist__item--brokertip-index .data-list__value {
    margin-top: 3px;
  }
}
.data-list__statslist__item--brokertip-index + .data-list__statslist__item--brokertip-index {
  margin-top: 5px;
}
.data-list__statslist__item--brokertip-index:nth-child(even) {
  background-color: #f4f4f4;
}
.data-list__statslist__item a:hover {
  text-decoration: none;
}

.data-list__statslist__section {
  width: 33%;
  float: left;
}

.data-list__definition {
  display: block;
  font-size: 14px;
  color: #888;
}
@media only screen and (max-width: 959px) {
  [aria-label=Statistik] .data-list__definition--property-index {
    text-transform: capitalize;
  }
}
@media only screen and (min-width: 960px) {
  [aria-label=Statistik] .data-list__definition--property-index::before {
    content: attr(data-prefix);
  }
}
.data-list__definition--property-index-empty {
  display: inline-block;
}

.data-list__value--property-index {
  font-weight: 500;
  font-size: 16px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .data-list__value--property-index {
    font-size: 14px;
  }
}
@media only screen and (max-width: 480px) {
  .data-list__value--property-index {
    font-size: 14px;
  }
}
a .data-list__value--property-index {
  font-weight: normal;
  display: block;
}
a:hover .data-list__value--property-index {
  text-decoration: underline;
}
.data-list__value--deactivated {
  font-weight: normal;
  color: #333;
}

.data-list__status {
  font-size: 14px;
  color: #888;
  display: inline-block;
  vertical-align: top;
}
.data-list__status::before, .data-list__status::after {
  float: left;
}
.data-list__status::before {
  content: attr(data-prefix);
}
.data-list__status::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  margin: 0 5px;
}
.data-list__status--check::after {
  color: #39aa35;
  content: "\f00c";
}
.data-list__status--upcoming::after {
  color: #ff6800;
  content: "\f017";
}
.data-list__status--warning::after {
  color: #ff6800;
  content: "\f071";
}
.data-list__status--share::after {
  content: "\f06b";
}
.data-list__status--unshare::after {
  content: "\f00d";
}

.data-list__status__value {
  font-weight: 500;
}

.data-list__heading {
  font-weight: 500;
  font-size: 18px;
}

.data-list__subheading {
  font-size: 14px;
  display: block;
  color: #888;
  margin-top: 4px;
}

.data-list__hemnet-id {
  float: right;
  font-size: 14px;
  color: #888;
}
@media only screen and (max-width: 480px) {
  .data-list__hemnet-id::before {
    content: attr(data-prefixShort);
  }
}
@media only screen and (min-width: 480px) {
  .data-list__hemnet-id::before {
    content: attr(data-prefixLong);
  }
}

.data-list__price {
  float: right;
  font-size: 14px;
}

.data-list__price-value {
  font-weight: 500;
}

.data-list__comment {
  margin: 0;
}

.data-list__comment--heading {
  font-weight: 500;
  display: block;
}

.data-list__divider-heading {
  border-bottom: 1px solid #888;
  background: #ddd;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.box {
  padding: 1.563em;
  background: #fff;
  max-width: 980px;
  margin: 1em auto;
}
.box h3 {
  display: inline;
}
.box .heading {
  text-align: center;
}
.box .success {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3em;
}
.box .font-awesome {
  font-family: FontAwesome, sans-serif;
}

.box-subtle {
  background: #f4f4f4;
  padding: 16px;
}

.box-subtle--underline {
  border-bottom: 4px solid #ddd;
}

.box-center {
  margin-left: auto;
  margin-right: auto;
}

.primary-content-box {
  padding: 32px;
  background-color: #f4f4f4;
  border-radius: 3px;
}

.secondary-content-box {
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-bottom: 1.563em;
}
.secondary-content-box img {
  max-width: 100%;
}
.secondary-content-box.no-border {
  border-style: none;
}

.secondary-content-box-padding {
  padding: 0.938em;
  position: relative;
}

.secondary-content-box__overlay {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.secondary-content-box__overlay-content {
  background-color: #fff;
  margin: 0.938em;
  padding: 0.938em;
}

.editorial-content-box {
  border: solid 1px #39aa35;
  border-radius: 3px;
  padding: 0.938em;
  margin-bottom: 1.563em;
}

.edit-link-box {
  background-color: #eee;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  padding: 0.5em 0.938em;
  font-size: 14px;
  vertical-align: bottom;
}

.content-box {
  border: 1px solid #b9baba;
  border-radius: 3px;
}
.content-box + .content-box {
  margin: 16px 0;
}

.content-box__section + .content-box__section {
  border-top: 1px solid #b9baba;
}

.content-box__inner {
  padding: 12px;
}
.content-box__inner::before, .content-box__inner::after {
  content: "";
  display: table;
}
.content-box__inner::after {
  clear: both;
}

.content-box__heading {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.content-box__heading-badges {
  float: right;
}

.content-box__dl {
  display: table;
  width: 100%;
}
@media only screen and (max-width: 480px) {
  .content-box__dl {
    display: block;
  }
}

.content-box__dl-attributes {
  display: table-cell;
}
@media only screen and (max-width: 480px) {
  .content-box__dl-attributes {
    display: block;
  }
}

.content-box__dt {
  font-size: 14px;
  color: #888;
}

.content-box__dd {
  font-size: 14px;
}

.error-component {
  width: 100%;
  margin-bottom: 16px;
}
@media only screen and (min-width: 480px) {
  .error-component {
    width: 70%;
    margin: 0 auto 56px;
  }
}

.error-component__image-container {
  margin-bottom: 16px;
}
@media only screen and (min-width: 480px) {
  .error-component__image-container {
    margin-top: 56px;
    margin-bottom: 40px;
  }
}

.error-component__image {
  margin: 0 auto;
}

.error-component__body {
  background-color: #f4f4f4;
  padding: 24px;
}

.error-component__heading {
  margin-bottom: 12px;
  font-weight: 500;
  display: block;
  font-size: 22px;
  line-height: 32px;
}

.error-component__nav {
  margin: 8px 0 16px;
}

.error-component__link {
  display: block;
}

.broker-profile input[type=text] {
  margin-bottom: 30px;
}
.broker-profile .sub-label {
  color: #888;
}

.property-preview__heading {
  font-size: 2em;
}

.property-preview__container {
  width: 700px;
  padding: 4px;
  position: relative;
}

.property-preview__top-banner {
  position: absolute;
}

.property-preview__dummy-content {
  width: 690px;
  padding: 10px;
  margin-bottom: 4px;
}

#account_number_field,
#bank_account_field {
  margin-top: 20px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.broker-agency-emails-input-wrapper {
  position: relative;
}

.broker-agency-emails-input input {
  width: 100%;
}

.broker-agency-emails-submit-btn-wrapper {
  position: absolute;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 16px 12px;
  border: 1px solid rgb(239.8, 239.8, 239.8);
  border-top: transparent;
  border-radius: 0 0 8px 8px;
  background-color: #fff;
  box-shadow: 0 3px 3px rgb(239.8, 239.8, 239.8);
}

.broker-agency-emails-submit-btn {
  background-color: rgb(239.8, 239.8, 239.8);
  min-width: 200px;
  text-align: left;
  min-height: 32px;
  border: 1px solid rgb(239.8, 239.8, 239.8);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
}
.broker-agency-emails-submit-btn:hover {
  border-color: #676767;
}

.email-is-already-saved {
  background-color: #f4864e;
  border-color: #f4864e;
}
.email-is-already-saved:hover {
  border-color: #f4864e;
}

.email-container {
  display: inline-flex;
  align-items: center;
  padding-left: 16px;
  background-color: #e4e8da;
  border-radius: 8px;
}
.email-container.disabled {
  /* stylelint-disable */
  background-color: #e1e1e1;
  /* stylelint-enable */
  opacity: 0.67;
}

.disabled-icon {
  height: 24px;
  margin: 12px 16px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.broker-tip-reservation-price {
  margin-bottom: 8px;
}
.broker-tip-reservation-price span {
  font-weight: 500;
}

.broker-tip-icon-description {
  display: flex;
  gap: 8px;
}
.broker-tip-icon-description i {
  margin: auto 0;
}

@media only screen and (max-width: 767px) {
  .broker-tip-reservation-title {
    font-size: 18px;
  }
}

.broker-tip-reservation-line::before, .broker-tip-reservation-line::after {
  content: "";
  display: table;
}
.broker-tip-reservation-line::after {
  clear: both;
}

.broker-tip-reservation-dates-today {
  width: 50%;
}
@media only screen and (min-width: 480px) {
  .broker-tip-reservation-dates-today {
    width: 25%;
  }
}

.broker-tip-reservation-status {
  width: 50%;
  float: right;
  font-size: 0;
  text-align: right;
}
@media only screen and (min-width: 480px) {
  .broker-tip-reservation-status {
    width: 75%;
  }
}

.broker-tip-reservation-legend,
.broker-tip-reservation-legend-status {
  width: 100%;
  margin-top: 16px;
}

.broker-tip-reservation-legend {
  padding: 8px 0;
}

.broker-tip-reservation-legend-status {
  display: block;
  padding: 8px;
  text-align: right;
  border-top: 1px solid #f4f4f4;
}

.broker-tip-reservation {
  position: relative;
  border-left: 2em solid #f4f4f4;
  background: #f4f4f4;
  padding: 0.75em;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 640px) {
  .broker-tip-reservation {
    padding: 10px 20px;
  }
}
@media only screen and (min-width: 480px) {
  .broker-tip-reservation {
    padding: 1em;
  }
}
.broker-tip-reservation:hover, .broker-tip-reservation.is-active {
  background: #fffef8;
  border-color: #ffd700;
}

.broker-tip-reservation__toggle {
  position: absolute;
  top: 1.15em;
  left: -1.6em;
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #ddd;
  color: #fff;
}
.broker-tip-reservation__toggle:hover {
  text-decoration: none;
}
.broker-tip-reservation__toggle::before {
  position: relative;
  left: 0.5em;
  top: 0.1em;
}
.broker-tip-reservation.is-active .broker-tip-reservation__toggle::before {
  left: 0.3em;
}

.broker-tip-reservation__attributes {
  margin-top: 16px;
}

.broker-tip-reservation__attribute {
  margin: 0;
  display: block;
}

.broker-tip-reservation__attribute--price {
  font-size: 14px;
  color: #888;
}

.broker-tip-release-hand {
  display: none;
}
@media only screen and (min-width: 480px) {
  .broker-tip-release-hand {
    display: block;
  }
}

.broker-tip__settlement-notification {
  margin-left: 12px;
  margin-right: 12px;
}

.broker-tip-reservation-id {
  font-weight: 500;
}

.broker-tip-area-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.broker-tip-area-wrapper {
  padding: 24px 0 0;
}
.broker-tip-area-wrapper h3 {
  padding-bottom: 12px;
}

.hcl-link:not(:last-child) {
  margin-right: 24px;
}

.broker-tip-area-container a {
  text-decoration: none;
  line-height: 1.5;
}

.broker-tip-area-container a .area-name {
  text-decoration: underline;
  color: #013a14;
}

.fullbokat {
  color: #013a14;
  font-weight: 400;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.broker-tip-reservation-discount tr,
.broker-tip-reservation-discount td {
  text-align: right;
}
.broker-tip-reservation-discount td {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}
.broker-tip-reservation-discount input {
  width: 40px;
}
.broker-tip-reservation-discount label {
  display: inline;
}

.broker-tip-reservation-discount .broker-office-button {
  text-align: left;
}

.last-row {
  font-weight: 500;
}

.border-row {
  border-top: 2px solid #f4f4f4;
  height: 80px;
}

.broker-tip-reservation-approved {
  margin-top: 0.25em;
}
.broker-tip-reservation-approved input.btn-block {
  background: none repeat scroll 0 0 #ffd700;
}
.broker-tip-reservation-approved .button {
  width: 250px;
}
.broker-tip-reservation-approved .fa-check {
  color: green;
}
.broker-tip-reservation-approved .saved {
  text-align: left;
  color: #888;
  font-size: 0.875em;
}

.broker-tip-ad {
  overflow: hidden;
  position: relative;
  margin: 1em 0 0.5em;
  padding: 1em 0.4em;
  padding: 15px 15px 20px 30px;
  background: #fff;
  border-bottom: 1px solid #f4f4f4;
  cursor: default;
}
.broker-tip-ad::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0.5em;
  padding-left: 0.3em;
  font-size: 16px;
  line-height: 2.3em;
  color: #39aa35;
}
.broker-tip-ad.available::before {
  background: #888;
}
.broker-tip-ad.booked::before {
  background: #39aa35;
}
.broker-tip-ad.booked-with-ads::before {
  background: #39aa35;
}
.broker-tip-ad.booked-by-other::before {
  background: #f01818;
}
.broker-tip-ad:last-child {
  margin-bottom: 0;
}

.broker-tip-ad-space,
.broker-tip-ad-space-legend {
  margin: 0 0 0 5px;
  display: inline-block;
}
.broker-tip-ad-space::after,
.broker-tip-ad-space-legend::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  height: 25px;
  width: 25px;
  content: "";
  display: inline-block;
  text-align: center;
  font-size: 16px;
  line-height: 25px;
  color: #39aa35;
}
@media only screen and (min-width: 480px) {
  .broker-tip-ad-space::after,
  .broker-tip-ad-space-legend::after {
    width: 50px;
  }
}
.broker-tip-ad-space.available::after,
.broker-tip-ad-space-legend.available::after {
  background: #888;
  border-radius: 4px;
  content: " ";
}
.broker-tip-ad-space.booked::after,
.broker-tip-ad-space-legend.booked::after {
  background: #39aa35;
  border-radius: 4px;
  content: " ";
}
.broker-tip-ad-space.comment-present::after,
.broker-tip-ad-space-legend.comment-present::after {
  background: #39aa35;
  border-radius: 4px;
  content: "\f075";
  color: #fff;
}
.broker-tip-ad-space.booked-with-ads::after,
.broker-tip-ad-space-legend.booked-with-ads::after {
  background: #39aa35;
  border-radius: 4px;
  content: "\f00c";
  color: #fff;
}
.broker-tip-ad-space.booked-by-other::after,
.broker-tip-ad-space-legend.booked-by-other::after {
  background: #f01818;
  border-radius: 4px;
  content: " ";
}
.broker-tip-ad-space.booked-by-other-long-term::after,
.broker-tip-ad-space-legend.booked-by-other-long-term::after {
  background: #f01818;
  border-radius: 4px;
  content: "\f023";
  color: #fff;
}
.broker-tip-ad-space.unavailable::after,
.broker-tip-ad-space-legend.unavailable::after {
  background: #888;
  border-radius: 4px;
  content: "\f05e";
  color: #fff;
}

.broker-tip-ad-space-legend {
  color: #888;
  text-align: center;
  font-size: 0.6em;
}
@media only screen and (min-width: 480px) {
  .broker-tip-ad-space-legend {
    margin: 0;
  }
  .broker-tip-ad-space-legend::after {
    display: block;
    margin: 5px 0 0;
  }
}

.broker-tip-prereservation-ad-space {
  margin: 0 0 0 5px;
  display: inline-block;
  border: 3px dotted #007e47;
  border-radius: 8px;
  text-align: center;
  font-size: 0.6em;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
}
@media only screen and (min-width: 480px) {
  .broker-tip-prereservation-ad-space {
    margin: 0 3px;
    width: 50px;
    height: 50px;
  }
  .broker-tip-prereservation-ad-space::after {
    display: block;
  }
}
.broker-tip-prereservation-ad-space::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #39aa35;
}
.broker-tip-prereservation-ad-space.available::after {
  background: #fff;
  border-radius: 8px;
  content: " ";
}
.broker-tip-prereservation-ad-space.booked {
  border-width: 0;
}
.broker-tip-prereservation-ad-space.booked::after {
  background: #39aa35;
  border-radius: 8px;
  content: "\f00c";
  color: #fff;
}
.broker-tip-prereservation-ad-space.booked-by-other-long-term {
  border-width: 0;
}
.broker-tip-prereservation-ad-space.booked-by-other-long-term::after {
  background: #676767;
  border-radius: 8px;
  content: "\f00d";
  color: #fff;
}
.broker-tip-prereservation-ad-space.unavailable::after {
  background: #fff;
  border-radius: 8px;
  content: "\f05e";
  color: #676767;
}

.broker-tip-ad-description {
  color: #888;
  margin-bottom: 8px;
}

.broker-tip-property-address {
  padding-right: 0.5em;
}
@media only screen and (max-width: 640px) {
  .broker-tip-property-address {
    display: block;
  }
}

.brokertip-ad.booked-by-other .broker-tip-ad-description {
  float: left;
}

.broker-tip-ad-heading {
  margin: 0.5em 0 0;
  font-size: 1em;
}

.broker-tip-ad .reservation-comment-form {
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
}
.broker-tip-ad .reservation-comment-form textarea {
  display: block;
  margin: 8px 0;
}
.broker-tip-ad .reservation-comment-form input {
  display: block;
  float: right;
}
.js .broker-tip-ad .reservation-comment-form.is-collapsed {
  margin: 0;
  max-height: 0;
  overflow: hidden;
}

.broker-tip-ad .show-comment-form,
.edit-ad {
  color: #1493bc;
  font-size: 14px;
}

.js-save-notice {
  color: #888;
  opacity: 1;
  display: block;
  transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}

.save-notice--hidden {
  opacity: 0;
  display: none;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.brokerName {
  font-size: 16px;
  font-weight: 400;
  color: #013a14;
  margin: 0;
}

.propertyImage {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.brokerImage {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 8px;
  border: 2px solid #fff;
}

.imageContainer {
  border-radius: 8px;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 8px;
}

.overlayText {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  padding: 6px;
  border-radius: 8px;
}

.error-message {
  color: #8c3a3a;
  font-size: 12px;
  margin-top: 4px;
}

.broker-tip-ad-preview {
  -webkit-font-smoothing: subpixel-antialiased;
  position: relative;
  margin-bottom: 1em;
  padding: 0;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 7px;
}
.broker-tip-ad-preview::after {
  clear: both;
  content: "";
  display: table;
}
.broker-tip-ad-preview .ribbon {
  font-size: 12px;
  position: static;
  display: inline-block;
  margin: 0;
  float: none;
}

.imagecontainer {
  width: 50%;
  display: flex;
}

.broker-tip-ad-preview-web {
  max-width: 702px;
  display: flex;
}
.broker-tip-ad-preview-web a {
  color: #1493bc;
}
.broker-tip-ad-preview-web .broker-tip-ad-preview-images img {
  width: auto;
  height: 168px;
  margin-right: 4px;
}

.broker-tip-ad-edit {
  max-width: none;
  width: 100%;
}

.broker-tip-ad-preview-iphone {
  max-width: 320px;
  padding-top: 22px;
  margin-bottom: 40px;
}
.broker-tip-ad-preview-iphone .broker-tip-ad-preview-images {
  width: 40%;
}
.broker-tip-ad-preview-iphone .broker-tip-ad-preview-images img {
  max-width: 100%;
}
.broker-tip-ad-preview-iphone .ribbon {
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  padding: 0 8px;
}

.broker-tip-ad-preview-ipad {
  max-width: 702px;
}
.broker-tip-ad-preview-ipad .ribbon {
  top: 4px;
  left: 0;
  padding: 0 10px;
  position: absolute;
}
.broker-tip-ad-preview-ipad .broker-tip-ad-preview-images {
  width: 60%;
}
.broker-tip-ad-preview-ipad .broker-tip-ad-preview-images img {
  width: auto;
  height: 168px;
}
.broker-tip-ad-preview-ipad .broker-tip-image-preview {
  width: 205px;
}
.broker-tip-ad-preview-ipad .image-selector {
  float: left;
  width: 130px;
}

.broker-tip-ad-preview-content {
  float: left;
  padding: 20px;
  position: relative;
  flex: 1;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 640px) {
  .broker-tip-ad-preview-content {
    width: 100%;
    margin: 0;
    padding-left: 12px;
  }
}
.broker-tip-ad-preview-content > .ribbon,
.broker-tip-ad-preview-content > input {
  margin: 0;
}
.broker-tip-ad-preview-content > input {
  width: auto;
  max-width: 100%;
  margin-top: 7px;
}

.broker-tip-image-preview {
  float: left;
  height: 168px;
  width: 168px;
  margin-right: 4px;
  overflow: hidden;
}
.broker-tip-image-preview img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transform: translateX(-50%);
}

.broker-tip-ad-preview-address {
  margin: 0;
  color: #666;
}

.broker-tip-ad-preview-property-info {
  font-weight: normal;
}

.broker-tip-ad-preview-content-list {
  overflow: hidden;
  margin-top: 9px;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.broker-tip-ad-preview-content-list > li {
  float: left;
  margin-right: 10px;
  color: #333;
  font-weight: 500;
}

.broker-tip-ad-preview-images,
.image-selectors {
  float: left;
  position: relative;
  height: 100%;
  display: flex;
  width: 100%;
}

.broker-tip-ad-preview-content-ipad {
  line-height: 1.1;
  width: 40%;
  margin: 0;
  padding: 12px;
}

.broker-tip-ad-preview-content-iphone {
  width: 60%;
  margin: 0;
  padding: 4px 0 0 10px;
}
.broker-tip-ad-preview-content-iphone .broker-tip-ad-preview-address {
  font-size: 14px;
}
.broker-tip-ad-preview-content-iphone .broker-tip-ad-preview-region {
  font-size: 12px;
  color: #366e34;
}
.broker-tip-ad-preview-content-iphone .broker-tip-ad-preview-property-info {
  font-size: 16px;
}

.broker-tip-carousel-indicator-container-iphone {
  position: absolute;
  bottom: -25px;
  width: 100%;
  left: 0;
  text-align: center;
}

.broker-tip-carousel-indicator-container-ipad {
  clear: both;
  margin-left: 45%;
  margin-bottom: -30px;
}

.broker-tip-carousel-indicator {
  display: inline-block;
  margin: 8px 4px 0 0;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #dedede;
}

.broker-tip-carousel-indicator-active {
  background-color: #366e34;
}

.broker-tip-ad-address {
  display: block;
  color: #777;
}

.broker-tip-top-content {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  height: 40px;
}

.broker-tip-top-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.broker-tip-logo {
  margin-top: 8px;
  margin-left: 8px;
}

.broker-tip-weeks .broker-tip-week {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.75em;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 640px) {
  .broker-tip-weeks .broker-tip-week {
    padding: 10px 20px;
  }
}
@media only screen and (min-width: 480px) {
  .broker-tip-weeks .broker-tip-week {
    padding: 1em;
  }
}
.broker-tip-weeks .broker-tip-week .reservation-dates {
  font-weight: bold;
  color: #013a14;
}
.broker-tip-weeks .broker-tip-week .broker-tip-spots-overview-text {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.broker-tip-weeks .broker-tip-week-spot {
  display: inline-block;
  border: 3px dotted #007e47;
  border-radius: 8px;
  text-align: center;
  font-size: 0.6em;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  position: relative;
}
.broker-tip-weeks .broker-tip-week-spot::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "";
  position: absolute;
  font-size: 16px;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.broker-tip-weeks .broker-tip-week-spot.booked {
  background: #39aa35;
  border: 0;
}
.broker-tip-weeks .broker-tip-week-spot.booked::after {
  content: "\f00c";
}
.broker-tip-weeks .broker-tip-week-spot.booked-long-term {
  background: #39aa35;
  border: 0;
  color: #fff;
}
.broker-tip-weeks .broker-tip-week-spot.booked-long-term::after {
  content: "\f274";
}
.broker-tip-weeks .broker-tip-week-spot.booked-by-other {
  background: #888;
  border: 0;
}
.broker-tip-weeks .broker-tip-week-spot.booked-by-other::after {
  content: "X";
}
.broker-tip-weeks .broker-tip-week-spot.booked-by-other-long-term {
  background: #888;
  border: 0;
  color: #fff;
}
.broker-tip-weeks .broker-tip-week-spot.booked-by-other-long-term::after {
  content: "\f273";
}
.broker-tip-weeks .broker-tip-week-spot.unavailable {
  background: #888;
  border: 0;
  color: #fff;
}
.broker-tip-weeks .broker-tip-week-spot.unavailable::after {
  content: "\f05e";
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.confirmationContainer {
  display: flex;
  flex-direction: column;
}
.confirmationContainer .link {
  color: #013a14 !important;
  font-weight: 600;
  text-decoration-line: underline;
}

.imageWrapper {
  display: flex;
  justify-content: center;
}
@media (min-width: 550px) {
  .imageWrapper {
    justify-content: left;
  }
}

.buttonContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 670px) {
  .buttonContainer {
    display: flex;
    flex-direction: row;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.broker-tip-ad-ng {
  display: block;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng {
    display: flex;
    flex-direction: row;
    height: 225px;
    border: 1px solid #ddd;
  }
}
@media (min-width: 1040px) {
  .broker-tip-ad-ng {
    box-shadow: none;
  }
}

.broker-tip-ad-ng__paid-placement {
  z-index: 1;
  position: absolute;
  left: 8px;
  top: 8px;
}

.broker-tip-ad-ng__paid-placement-text {
  background-color: #fff;
  color: #161616;
  padding: 4px 8px;
  height: 28px;
  border-radius: 3px;
  white-space: nowrap;
}

.broker-tip-ad-ng__images {
  display: flex;
  flex: 2;
  width: auto;
  height: 150px;
  position: relative;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__images {
    padding-top: 0;
    float: none;
    height: auto;
    display: flex;
    flex: 1;
  }
}

.broker-tip-ad-ng__image-container {
  display: flex;
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: relative;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__image-container {
    width: auto;
    height: auto;
    flex: 1;
  }
}
.broker-tip-ad-ng__image-container + .broker-tip-ad-ng__image-container {
  margin-left: 4px;
}

.broker-tip-ad-ng__image-container--secondary {
  display: none;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__image-container--secondary {
    display: block;
  }
}

.broker-tip-ad-ng__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.broker-tip-ad-ng__sections {
  display: flex;
  height: 110px;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__sections {
    height: auto;
    flex: 1;
  }
}
.broker-tip-ad-ng__item--default .broker-tip-ad-ng__sections {
  height: auto;
}

.broker-tip-ad-ng__sections-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
  position: relative;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__sections-container {
    padding: 16px;
  }
}
@media (min-width: 800px) {
  .broker-tip-ad-ng__sections-container {
    padding: 24px;
  }
}

.broker-tip-ad-ng__section--header {
  display: flex;
  position: relative;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__section--header {
    flex-wrap: wrap;
  }
}

.broker-tip-ad-ng__section--body {
  margin-top: 8px;
  padding-bottom: 4px;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__section--body {
    align-items: flex-end;
    font-size: 16px;
    padding-bottom: 16px;
  }
}

.broker-tip-ad-ng__section--attributes {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}

.broker-tip-ad-ng__attribute {
  white-space: nowrap;
  font-weight: 500;
  color: #333;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__attribute {
    font-size: 16px;
  }
}
.broker-tip-ad-ng__attribute + .broker-tip-ad-ng__attribute {
  padding-left: 4px;
}

.broker-tip-ad-ng__location,
.broker-tip-ad-ng__address-text,
.broker-tip-ad-ng__broker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broker-tip-ad-ng__address-text {
  line-height: 1.3;
  flex-grow: 1;
}

.broker-tip-ad-ng__heading {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  flex: 1 0;
  margin: 0;
  line-height: 1.3;
  color: #333;
  padding-right: 8px;
  overflow: hidden;
}
@media (min-width: 550px) {
  .broker-tip-ad-ng__heading {
    font-size: 18px;
  }
}

.broker-tip-ad-ng__logo {
  flex: 0 1 70px;
  height: 35px;
  text-align: right;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__logo {
    height: 50px;
    flex-basis: 100px;
  }
}

.broker-tip-ad-ng__broker-name {
  height: 35px;
  flex: 0 1 auto;
  max-width: 50%;
  text-align: right;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__broker-name {
    height: 50px;
  }
}

.broker-tip-ad-ng__logo-image {
  max-width: 100%;
  max-height: 100%;
}
@media (min-width: 550px) {
  .broker-tip-ad-ng__logo-image {
    max-width: 100px;
  }
}

.broker-tip-ad-ng__navigation {
  margin: 8px 0 16px;
  text-align: center;
  width: 100%;
  line-height: 0;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__navigation {
    margin: 16px 0;
  }
}

.broker-tip-ad-ng__navigation-button {
  display: inline-block;
  background: #ddd;
  border: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.broker-tip-ad-ng__navigation-button:focus {
  outline: none;
}
.broker-tip-ad-ng__navigation-button + .broker-tip-ad-ng__navigation-button {
  margin-left: 4px;
}
@media (min-width: 670px) {
  .broker-tip-ad-ng__navigation-button + .broker-tip-ad-ng__navigation-button {
    margin-left: 8px;
  }
}

.broker-tip-ad-ng__navigation-button--active {
  background: #39aa35;
}

.broker-tip-ad-ng__ribbon {
  display: flex;
  position: absolute;
  z-index: 1;
  color: #333;
  font-size: 14px;
  line-height: 1.15;
  left: 8px;
  bottom: 8px;
  height: 44px;
}

.broker-tip-ad-ng__ribbon-text {
  width: 100%;
  display: block;
  font-weight: 500;
}

.broker-tip-ad-ng__broker-profile {
  padding: 8px;
  display: flex;
  background: #fff;
  flex-direction: column;
  justify-content: center;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.broker-tip-ad-ng__broker-profile.broker-tip-ad-ng__broker-profile-no-image {
  border-radius: 4px;
}

.broker-tip-ad-ng__broker-profile-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.broker-tip-ad-ng__broker-profile-image img {
  margin-left: 2px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.release__section {
  width: 100%;
}
.release__section::before, .release__section::after {
  content: "";
  display: table;
}
.release__section::after {
  clear: both;
}
.release__section + .release__section {
  margin-top: 16px;
}

.release-counter {
  margin-top: 16px;
}

.release-counter__segment {
  background: #d3dccc;
  padding: 8px;
  display: inline-block;
  border-radius: 3px;
  color: #013a14;
  padding: 16px 24px;
  transition: all 200ms ease-in-out;
}
.release-counter__segment + .release-counter__segment {
  margin-left: 8px;
}

.release-counter__segment--active {
  opacity: 0.5;
}

.release-counter__value {
  font-weight: 500;
  font-size: 18px;
}

.pre-release-landing-checklist {
  font-weight: 500;
  margin-bottom: 32px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.badges__container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  line-height: 1.5;
  font-weight: 500;
  font-family: "Roboto", Arial, sans-serif;
  border-radius: 3px;
  color: #fff;
  background-color: #ff6800;
  width: max-content;
}

.badge--business {
  background-color: #013a14;
}

.badge--hemnet_business_pro {
  background-color: #013a14;
}

.badge--basic,
.badge--plus,
.badge--premium,
.badge--max {
  background-color: rgb(229.5, 242.1, 236.6);
  color: #007e47;
}

.badge--new {
  background-color: #67458c;
}

.badge--raketen {
  background-color: #f9e19b;
  color: #013a14;
  font-weight: normal;
  border-radius: 50%;
  margin-right: 4px;
}
@media only screen and (min-width: 960px) {
  .badge--raketen {
    border-radius: 3px;
  }
}
.badge--raketen .badge__icon {
  color: #013a14;
  background-image: url("~images/raketen/raketen-g1.svg");
  background-size: 13px;
}
.badge--raketen .badge__text {
  display: none;
}
@media only screen and (min-width: 960px) {
  .badge--raketen .badge__text {
    display: inline;
  }
}

.badge--broker_tip {
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
}

.badge__icon {
  height: 16px;
  width: 14px;
  display: inline-block;
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
}

.badge--new_construction_project {
  background-color: rgb(239.8, 239.8, 239.8);
  color: #333;
  font-weight: initial;
}

.badge--delayed_payment {
  background-color: rgb(189.6, 214.8, 235.8);
  color: #333;
  font-weight: initial;
}

.badge-group {
  display: inline-flex;
  margin-top: 8px;
}
@media (min-width: 670px) {
  .badge-group {
    margin-top: 0;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.business-banner {
  padding: 32px;
}

.business-banner__product-name {
  color: #0bb70b;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.button-bar {
  width: auto;
  display: flex;
}

.button-bar--full-width {
  width: 100%;
  flex-direction: column;
}
@media (min-width: 550px) {
  .button-bar--full-width {
    flex-direction: row;
  }
}

.button-bar__label {
  padding: 12px 8px;
  font-size: 14px;
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ddd;
  flex: 0 1 auto;
  border-bottom: 0;
  white-space: nowrap;
  margin: 0;
}
@media (min-width: 550px) {
  .button-bar__label {
    border-bottom: 1px solid #ddd;
    border-right: 0;
  }
}
.button-bar__label:first-of-type {
  border-radius: 4px 4px 0 0;
}
@media (min-width: 550px) {
  .button-bar__label:first-of-type {
    border-radius: 4px 0 0 4px;
  }
}
.button-bar__label:last-of-type {
  border-bottom: 1px solid #ddd;
  border-radius: 0 0 4px 4px;
}
@media (min-width: 550px) {
  .button-bar__label:last-of-type {
    border-right: 1px solid #ddd;
    border-radius: 0 4px 4px 0;
  }
}
.button-bar--full-width .button-bar__label {
  flex: 1 0 auto;
}

.button-bar__radio {
  position: absolute;
  left: -9999px;
}
.button-bar__radio + .button-bar__label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}

.button-bar__radio:checked + .button-bar__label {
  color: #013a14;
  background: #d3dccc;
}

.button-bar__radio:not(:disabled):not(:checked) + .button-bar__label:hover {
  background: #e4e8da;
}

.button-bar__radio:disabled + .button-bar__label {
  opacity: 0.3;
  cursor: not-allowed;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.search-bar {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
@media only screen and (min-width: 768px) {
  .search-bar {
    flex-direction: row;
  }
}
.ie9 .search-bar {
  display: table;
  width: 100%;
}

.search-bar__section {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: flex-start;
  margin: 8px 0;
}
@media only screen and (min-width: 768px) {
  .search-bar__section {
    margin: 0;
    justify-content: center;
    align-items: center;
  }
}
.ie9 .search-bar__section {
  display: table-cell;
  vertical-align: middle;
}

.search-bar__section--search {
  display: flex;
  height: 100%;
}
.ie9 .search-bar__section--search {
  display: table;
}

.search-bar__section--select::after {
  font-weight: normal;
  background-image: linear-gradient(to bottom, #fff, #f6f6f6);
  color: #333;
  border-radius: 4px;
  border: 1px solid #d8d8d8;
  cursor: pointer;
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  border-radius: 3px;
  text-align: center;
  line-height: 32px;
  margin-left: -1px;
  content: "\f107";
  pointer-events: none;
}
.search-bar__section--select::after:focus {
  border-color: #39aa35;
}
.search-bar__section--select::after:active {
  border-color: #777;
  background-image: linear-gradient(to bottom, #ededed, #fff);
}
.search-bar__section--select::after:hover {
  border-color: #777;
  color: #333;
}
.ie9 .search-bar__section--select {
  display: table;
  width: 100%;
}

.search-bar__label {
  margin-bottom: 0;
}

.search-bar__label--checkbox {
  margin-left: 8px;
}

.search-bar__label--select {
  flex: 0 1 auto;
  display: inline-block;
  margin-right: 8px;
  white-space: nowrap;
}
.ie9 .search-bar__label--select {
  display: table-cell;
  padding-right: 8px;
}

input.search-bar__input {
  margin-bottom: 0;
  height: 100%;
  flex: 1;
  line-height: 1rem;
}
.ie9 input.search-bar__input {
  display: table-cell;
}

.search-bar__select {
  cursor: pointer;
  border: 1px solid #ddd;
  border-right: 0;
  background: none;
  padding-top: 0;
  padding-right: 32px;
  padding-bottom: 0;
  padding-left: 8px;
  font-size: 14px;
  height: 32px;
  appearance: none;
  border-radius: 3px;
  width: 100%;
  margin: 0;
  background-color: #fff;
  text-transform: capitalize;
  margin-bottom: 0;
  flex: 1;
  height: 100%;
  width: 100px;
}
.ie9 .search-bar__select {
  display: table-cell;
  width: 100%;
  height: 33px;
}

.search-bar__submit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  appearance: none;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  line-height: 1;
  transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
  border: 1px solid #007e47;
  background-color: #007e47;
  margin-left: 4px;
}
.search-bar__submit:disabled {
  cursor: not-allowed;
  color: #b9baba;
}
.search-bar__submit:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}
.search-bar__submit, .search-bar__submit:not(:disabled):hover {
  color: #fff;
  text-decoration: none;
}
@media (hover: hover) {
  .search-bar__submit:not(:disabled):hover {
    border: 1px solid rgb(51, 151.8, 107.8);
    background-color: rgb(51, 151.8, 107.8);
  }
}
.search-bar__submit:not(:disabled):active {
  border: 1px solid rgb(0, 100.8, 56.8);
  background-color: rgb(0, 100.8, 56.8);
}

.disclaimer {
  font-size: 14px;
  margin: 8px 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.commission-fee {
  display: grid;
  grid-template-columns: 4px auto;
}

.progress-bar {
  background-color: #007e47;
  position: relative;
}
.progress-bar:first-of-type {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.progress-bar::before {
  position: absolute;
  box-sizing: border-box;
  left: -5px;
  height: 14px;
  width: 14px;
  content: "";
  border-radius: 50%;
  background-color: #007e47;
}
.progress-bar:nth-last-of-type(2) {
  background-color: #fff !important;
}

.progress-bar--current {
  background-color: #b9baba;
}
.progress-bar--current::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f00c";
  background-color: #fff;
  left: -8px;
  line-height: 18px;
  font-size: 12px;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #007e47;
  border: 2px solid #007e47;
}
.progress-bar--current ~ .progress-bar {
  background-color: #b9baba;
}
.progress-bar--current ~ .progress-bar::before {
  background-color: #b9baba;
  border: 2px solid #b9baba;
  width: 14px;
  height: 14px;
  left: -5px;
  background-color: #fff;
}
.progress-bar--current + .commission-fee__content-section {
  color: #013a14;
}

.commission-fee__content-section {
  padding-left: 24px;
  color: #676767;
}
.commission-fee__content-section:not(:last-child) {
  padding-bottom: 16px;
  min-height: 80px;
}

.comission-fee__heading {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: inherit;
  line-height: 20px;
}

.fee-period {
  color: #676767;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
#error_explanation ul {
  margin: 0;
}

span.error {
  margin-left: 0.5em;
  padding: 0.25em 0.5em;
  font-size: 14px;
  display: inline-block;
}

.alert-error {
  font-size: 0.875em;
  padding: 15px 20px;
  text-shadow: 0 1px #fff;
  border: 1px solid;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
  border-radius: 3px;
  margin-bottom: 1em;
}

@keyframes flash {
  from {
    background: white;
  }
}
@keyframes flash {
  from {
    background: white;
  }
}
@keyframes flash {
  from {
    background: white;
  }
}
@keyframes flash {
  from {
    background: white;
  }
}
@keyframes flash-text {
  from {
    color: white;
  }
}
@keyframes flash-text {
  from {
    color: white;
  }
}
@keyframes flash-text {
  from {
    color: white;
  }
}
@keyframes flash-text {
  from {
    color: white;
  }
}
.notice {
  animation: flash 0.8s ease-out 0.4s 1;
  animation: flash 0.8s ease-out 0.4s 1;
  animation: flash 0.8s ease-out 0.4s 1;
  animation: flash 0.8s ease-out 0.4s 1;
  animation: flash 0.8s ease-out 0.4s 1;
  color: white;
  background-color: hsla(199, 16%, 20%, 0.8);
  padding: 0.8em 2em;
}
.notice .fa-check {
  animation: flash-text 0.8s ease-out 0.4s 1;
  animation: flash-text 0.8s ease-out 0.4s 1;
  animation: flash-text 0.8s ease-out 0.4s 1;
  animation: flash-text 0.8s ease-out 0.4s 1;
  animation: flash-text 0.8s ease-out 0.4s 1;
  position: relative;
  top: 2px;
  font-size: 1.5em;
  color: #39aa35;
}

.success,
.alert,
.error,
.info,
.warning {
  font-size: 0.875em;
  padding: 15px 20px;
  text-shadow: 0 1px #fff;
  border: 1px solid;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
  border-radius: 3px;
  overflow: hidden;
}
.success .btn,
.alert .btn,
.error .btn,
.info .btn,
.warning .btn {
  text-shadow: none;
  display: inline-block;
  vertical-align: middle;
}
.success .big-icon,
.alert .big-icon,
.error .big-icon,
.info .big-icon,
.warning .big-icon {
  font-size: 3em;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
@media only screen and (max-width: 480px) {
  .success .btn,
  .success .big-icon,
  .alert .btn,
  .alert .big-icon,
  .error .btn,
  .error .big-icon,
  .info .btn,
  .info .big-icon,
  .warning .btn,
  .warning .big-icon {
    display: block;
  }
  .success .big-icon,
  .alert .big-icon,
  .error .big-icon,
  .info .big-icon,
  .warning .big-icon {
    margin: 0 auto;
  }
}

.success {
  background-color: #dceed8;
  border-color: #9cd49a;
}
.success .big-icon {
  color: #9cd49a;
}

.error,
.alert {
  background-color: #ffe9e6;
  border-color: #fababa;
}
.error .big-icon,
.alert .big-icon {
  color: #fababa;
}
.error strong,
.alert strong {
  font-weight: 500;
}

.alert {
  padding: 30px 40px 30px 80px;
  position: relative;
}
.alert .big-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  margin-top: -22px;
}

.info {
  background-color: #e0f2f8;
  border-color: #89c9dd;
}
.info .big-icon {
  color: #89c9dd;
}

.warning {
  background-color: #fffae1;
  border-color: #ffd1b3;
}
.warning .message {
  font-size: 0.875em;
}
.warning .button {
  margin-top: 10px;
}
.warning .column-left {
  float: left;
  width: 68%;
  margin-right: 2%;
}
.warning .column-right {
  float: right;
  width: 30%;
}
.warning ul {
  list-style-type: disc;
  list-style-position: inside;
}

.integrity-message {
  width: 100%;
  padding: 0 8px;
  margin-top: 8px;
}
@media only screen and (min-width: 960px) {
  .integrity-message {
    padding: 0 16px;
  }
}
@media only screen and (min-width: 960px) {
  .integrity-message {
    margin-top: 32px;
  }
}

.confirm-prompt p {
  font-size: 16px;
}

.contacts-description {
  margin-bottom: 32px;
}

.contacts-description--center-layout {
  text-align: center;
}

.contacts {
  display: flex;
  flex-wrap: wrap;
}

.contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  width: 100%;
}
@media only screen and (min-width: 480px) {
  .contact {
    flex-direction: column;
    text-align: center;
    padding: 16px 0;
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  .contact {
    width: 33%;
  }
}
@media only screen and (min-width: 960px) {
  .contact {
    width: 50%;
  }
}
@media only screen and (min-width: 1070px) {
  .contact {
    width: 33%;
  }
}
@media only screen and (min-width: 1281px) {
  .contact {
    width: 25%;
  }
}
.contact + .contact {
  margin-top: 16px;
}
@media only screen and (min-width: 480px) {
  .contact + .contact {
    margin-top: 0;
  }
}

.contact__section--body {
  margin-left: 16px;
}
@media only screen and (min-width: 480px) {
  .contact__section--body {
    margin-left: 0;
  }
}

.contact__image-mask {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  border: 2px solid #e4e8da;
}
@media only screen and (min-width: 480px) {
  .contact__image-mask {
    width: 150px;
    height: 150px;
    display: inline-block;
  }
}

.contact__image {
  max-width: 100%;
  height: auto;
}

.cross-sales-container {
  width: 100%;
}

.cross-sales-container--border {
  border-top: 2px solid #ddd;
  margin-top: 16px;
}

.cross-sales__description {
  margin: 16px 0;
}

.cross-sales__description--centered-layout {
  text-align: center;
}

.cross-sales__heading {
  margin-bottom: 12px;
  font-weight: 500;
  display: block;
  font-size: 22px;
  line-height: 32px;
}

.cross-sales {
  font-size: 0;
  margin-left: -16px;
  margin-right: -16px;
}
@media only screen and (max-width: 767px) {
  .cross-sales {
    margin-left: -8px;
    margin-right: -8px;
  }
}

.cross-sales__card {
  width: 33.3333333%;
  padding: 0 16px;
  display: inline-block;
  vertical-align: top;
}
@media only screen and (max-width: 767px) {
  .cross-sales__card {
    width: 100%;
    margin-top: 12px;
    padding: 0 8px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .cross-sales__card {
    width: 50%;
  }
}

.cross-sales__card-inner {
  width: 100%;
  border: 2px solid #ddd;
  padding: 12px;
  overflow: hidden;
}

.cross-sales__card-heading {
  font-weight: 500;
  margin-bottom: 12px;
  display: block;
  font-size: 16px;
}

.cross-sales__card-image-container {
  text-align: center;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
}

.cross-sales__card-image {
  width: 50%;
  margin: 0 auto;
}
@media only screen and (max-width: 480px) {
  .cross-sales__card-image {
    width: 30%;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.developer small,
.project-ads small,
.click-totals small {
  display: block;
}
.developer .ad-id,
.project-ads .ad-id,
.click-totals .ad-id {
  font-size: 14px;
}
.developer .ad-information,
.project-ads .ad-information,
.click-totals .ad-information {
  font-size: 14px;
  text-align: center;
  display: inline-block;
  min-width: 65px;
}
.developer .active,
.project-ads .active,
.click-totals .active {
  margin-left: 30px;
}
.developer .numeric,
.project-ads .numeric,
.click-totals .numeric {
  width: 50px;
}
.developer .fa-minus-circle,
.project-ads .fa-minus-circle,
.click-totals .fa-minus-circle {
  color: #ff6800;
}
.developer .fa-plus-circle,
.project-ads .fa-plus-circle,
.click-totals .fa-plus-circle {
  color: #ff6800;
}
.developer a:empty,
.project-ads a:empty,
.click-totals a:empty {
  position: relative;
}
.developer .clicks,
.project-ads .clicks,
.click-totals .clicks {
  text-align: right;
}
.developer .clicks .published,
.developer .clicks .expired,
.project-ads .clicks .published,
.project-ads .clicks .expired,
.click-totals .clicks .published,
.click-totals .clicks .expired {
  font-weight: 500;
}
.developer .clicks .published,
.project-ads .clicks .published,
.click-totals .clicks .published {
  color: green;
}

.project-ads th {
  vertical-align: text-top;
}
.project-ads td {
  font-size: 14px;
}

#project-ads-map-preview {
  height: 300px;
  margin-bottom: 2em;
}

.total-clicks-title {
  margin-top: 30px;
}

.publish-project-ad,
.publish-project-ad div {
  display: inline;
}

.stats-report ul {
  list-style-type: disc;
  list-style-position: inside;
  margin-bottom: 1em;
}
.stats-report .input-radio-buttons ul {
  list-style-type: none;
}
.stats-report .input-radio-buttons ul li {
  margin-bottom: 0.5em;
  line-height: 1.5em;
}
.stats-report h3 {
  margin-bottom: 0;
}
.stats-report small {
  margin-bottom: 0.8em;
}

.dropzone {
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}

.dropzone__preview,
.dropzone__copy {
  display: none;
}

.js.dropzone .dropzone__preview,
.js.dropzone .dropzone__copy {
  display: block;
}

.dropzone__preview {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 4px dashed #ddd;
  margin-bottom: 20px;
}
.dropzone__preview:hover {
  background-color: #f4f4f4;
}

.dropzone__preview-icon {
  color: #888;
  display: block;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transform: translateY(-50%);
  transform: translateY(-50%);
}

.js.dropzone .dropzone__label {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}

.js.dropzone .dropzone__file {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.js.dropzone .dropzone__file::-ms-browse {
  padding-right: 100%;
}

.dropzone__icon {
  color: #888;
  float: left;
  margin-right: 10px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.counter {
  background: rgba(255, 193, 0, 0.9);
  border-width: 2px;
  border-style: solid;
  border-color: rgba(237, 169, 0, 0.9);
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 40px #ffd700;
}

.counter__text {
  color: #303c40;
  font-size: 18px;
}

.counter__time {
  color: #fff;
  display: block;
  font-size: 22px;
  line-height: 100%;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.pagination {
  text-align: center;
  margin: 16px 0;
}

.pagination-info {
  padding: 0 8px;
}

a.pagination-arrow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  appearance: none;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  max-width: 100%;
  line-height: 1;
  transition: background-color 125ms, border-color 125ms, color 125ms, top 50ms;
  border: 1px solid #007e47;
  background-color: #007e47;
  display: inline-block;
  padding: 10px 14px;
  position: relative;
  font-family: "FontAwesome";
}
a.pagination-arrow:disabled {
  cursor: not-allowed;
  color: #b9baba;
}
a.pagination-arrow:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}
a.pagination-arrow, a.pagination-arrow:not(:disabled):hover {
  color: #fff;
  text-decoration: none;
}
@media (hover: hover) {
  a.pagination-arrow:not(:disabled):hover {
    border: 1px solid rgb(51, 151.8, 107.8);
    background-color: rgb(51, 151.8, 107.8);
  }
}
a.pagination-arrow:not(:disabled):active {
  border: 1px solid rgb(0, 100.8, 56.8);
  background-color: rgb(0, 100.8, 56.8);
}

.price-table {
  width: 100%;
}
.price-table tbody {
  width: inherit;
}
.price-table tr {
  border-top: 1px dotted #ddd;
}
.price-table th,
.price-table td {
  padding: 0.75em 0;
  text-align: left;
}
.price-table td {
  text-align: right;
}

.price-table__vat {
  color: #888;
  font-size: 14px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.project-ad-wrapper {
  padding: 4px;
  background-color: #ddd;
  margin-bottom: 12px;
  margin-top: -10px;
}
@media only screen and (max-width: 767px) {
  .project-ad-wrapper {
    padding: 0;
    background-color: #fff;
  }
}

.project-ad {
  background: #fff;
  border: 1px solid #ddd;
  width: 32%;
  margin: auto;
  border-radius: 8px;
}
@media only screen and (max-width: 767px) {
  .project-ad {
    width: 100%;
  }
}
.project-ad__content {
  color: #333;
  font-size: 14px;
  padding: 8px;
}
.project-ad__title {
  color: #1493bc;
  line-height: 1.4;
  font-size: 16px;
  margin: 0 0 8px;
  font-weight: 500;
}
.project-ad__details {
  margin: 0;
}
.project-ad__name {
  font-weight: 500;
}
.project-ad__image {
  width: 100%;
  max-width: 100%;
  height: 170px;
  border-radius: 8px 8px 0 0;
}
.project-ad__occupation-at {
  color: #888;
  margin-bottom: 0;
  margin-top: 14px;
}

.publish-project-ad-buttons {
  margin-top: 25px;
  overflow: hidden;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.projects-container {
  margin: 16px 0;
}

.project {
  border: solid 1px #ddd;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.project::before {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 8px;
  content: "";
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.project + .project {
  margin-top: 12px;
}

.project--published::before,
.project--subscription-ongoing::before {
  background: #39aa35;
}

.project--subscription-cancelled::before {
  background: #f01818;
}

.project--unpublished::before {
  background: #f01818;
}

.project__section {
  display: flex;
  padding: 12px 16px 12px 24px;
}

.project__section--body {
  flex-wrap: wrap;
}
@media only screen and (min-width: 480px) {
  .project__section--body {
    flex-wrap: nowrap;
  }
}

.project__section--footer {
  display: flex;
  justify-content: space-between;
  border-top: solid 1px #ddd;
}

.project__header {
  width: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: auto auto;
  grid-template-areas: "title id" "location location" "label label" "status status";
}
@media only screen and (min-width: 480px) {
  .project__header {
    grid-template-columns: auto auto auto;
    grid-template-areas: "title label id" "location location status";
  }
}
@media only screen and (min-width: 960px) {
  .project__header {
    grid-template-columns: max-content auto auto;
  }
}

.project__heading {
  color: #013a14;
  font-size: 18px;
  font-weight: 500;
  grid-area: title;
}

.project__heading_link {
  color: #013a14;
}

.project__subheading {
  grid-area: location;
  color: #676767;
  margin: 0;
  padding: 8px 0;
}
@media only screen and (min-width: 480px) {
  .project__subheading {
    padding: 0;
  }
}

.project-label {
  grid-area: label;
}
@media only screen and (min-width: 480px) {
  .project-label {
    margin: 0 8px;
  }
}

.project__id {
  color: #676767;
  font-size: 14px;
  grid-area: id;
  text-align: right;
  white-space: nowrap;
}

.project__status {
  display: flex;
  flex-direction: column;
  grid-area: status;
}

.project__published-state {
  text-align: right;
  font-size: 14px;
}

.project__subscription-status {
  color: #333;
  font-size: 14px;
  padding: 8px 0;
}
@media only screen and (min-width: 480px) {
  .project__subscription-status {
    padding: 0;
    text-align: right;
  }
}
.project__subscription-status .green-circle {
  background-color: #39aa35;
}
.project__subscription-status .red-circle {
  background-color: #f01818;
}

.project__subscription-status-circle {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: text-top;
}

.project__metadata {
  font-size: 14px;
  color: #333;
  width: 50%;
  padding: 8px 0;
}
@media only screen and (min-width: 480px) {
  .project__metadata {
    font-size: 14px;
    width: 25%;
    padding: 0;
  }
}
@media only screen and (min-width: 768px) {
  .project__metadata {
    width: auto;
  }
  .project__metadata + .project__metadata {
    margin-left: 40px;
  }
}

.project__metadata__hidden-text,
.project_id__hidden-text {
  display: none;
}
@media only screen and (min-width: 480px) {
  .project__metadata__hidden-text,
  .project_id__hidden-text {
    display: inline-block;
  }
}

.project__metadata__value {
  display: block;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.properties-container {
  margin: 16px 0;
}

.properties-container--active {
  position: relative;
}
.properties-container--active::before {
  position: relative;
  content: "Laddar...";
  z-index: 2;
  width: 100%;
  margin: 16px 0;
  text-align: center;
  display: block;
}
.properties-container--active::after {
  position: absolute;
  z-index: 1;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
}

.property {
  border: solid 1px #ddd;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.property::before {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 8px;
  content: "";
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.property + .property {
  margin-top: 12px;
}

.property__section {
  display: flex;
  padding: 12px 16px 12px 24px;
}

.property__section--body {
  flex-wrap: wrap;
}
@media only screen and (min-width: 480px) {
  .property__section--body {
    flex-wrap: nowrap;
  }
}

.property__section--footer {
  display: flex;
  justify-content: space-between;
}

.property__section--footer,
.property__section--settings {
  border-top: solid 1px #ddd;
}

.property__section--settings {
  display: none;
}
.property--active .property__section--settings {
  display: flex;
  justify-content: flex-end;
}

.property__header {
  width: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: auto auto;
  grid-template-areas: "title id" "location location" "label label" "status status";
}
@media only screen and (min-width: 480px) {
  .property__header {
    grid-template-columns: auto auto auto;
    grid-template-areas: "title label id" "location location status";
  }
}
@media only screen and (min-width: 960px) {
  .property__header {
    grid-template-columns: max-content auto auto;
  }
}

.property__heading {
  color: #013a14;
  font-size: 18px;
  font-weight: 500;
  grid-area: title;
}

.property__heading_link {
  color: #013a14;
}

.property__subheading {
  grid-area: location;
  color: #676767;
  margin: 0;
  padding: 8px 0;
}
@media only screen and (min-width: 480px) {
  .property__subheading {
    padding: 0;
  }
}

.project-label {
  grid-area: label;
}
@media only screen and (min-width: 480px) {
  .project-label {
    margin: 0 8px;
  }
}

.property__id {
  color: #676767;
  font-size: 14px;
  grid-area: id;
  text-align: right;
  white-space: nowrap;
}

.subscription-status {
  color: #333;
  grid-area: status;
  font-size: 14px;
  padding: 8px 0;
}
@media only screen and (min-width: 480px) {
  .subscription-status {
    padding: 0;
    text-align: right;
  }
}
.subscription-status .subscription-status-circle {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: text-top;
}
.subscription-status .green-circle {
  background-color: #3cc53c;
}
.subscription-status .red-circle {
  background-color: #ea6161;
}

.property__metadata {
  font-size: 14px;
  color: #333;
  width: 50%;
  padding: 8px 0;
}
@media only screen and (min-width: 480px) {
  .property__metadata {
    font-size: 14px;
    width: 25%;
    padding: 0;
  }
}
@media only screen and (min-width: 768px) {
  .property__metadata {
    width: auto;
  }
  .property__metadata + .property__metadata {
    margin-left: 40px;
  }
}

.property__metadata__hidden-text,
.property_id__hidden-text {
  display: none;
}
@media only screen and (min-width: 480px) {
  .property__metadata__hidden-text,
  .property_id__hidden-text {
    display: inline-block;
  }
}

.property__metadata__value {
  display: block;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.property__page-link {
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  margin-left: auto;
  color: #013a14;
}
.property__page-link::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f105";
  font-size: 16px;
  margin-left: 4px;
}

.property__page-link__hidden-text {
  display: none;
}
@media only screen and (min-width: 480px) {
  .property__page-link__hidden-text {
    display: inline-block;
  }
}

.property__status {
  font-size: 14px;
}
@media only screen and (min-width: 480px) {
  .property__status + .property__trigger {
    margin-left: 8px;
  }
}

.property__status::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  margin-right: 4px;
  font-size: 16px;
}
.property--not-published .property__status::before, .property--published .property__status::before {
  color: #ff6800;
  content: "\f071";
}
.property--unavailable-for-renewal .property__status::before, .property--to-be-published-awaiting-payment .property__status::before {
  color: #f4864e;
  content: "\f073";
}
.property--payment-received .property__status::before, .property--available-for-renewal.has-free-renewal .property__status::before {
  color: #007e47;
  content: "\f058";
  font-weight: 300;
}
.property--unavailable-for-renewal-yet .property__status::before {
  color: #f4864e;
  content: "\f073";
}
.property--seller-notification-sent .property__status::before {
  color: #f4864e;
  content: "\f1d8";
}
.property--available-for-renewal.no-free-renewal .property__status::before {
  color: #007e47;
  content: "\f1d8";
  font-weight: 300;
}

.property__status-description {
  color: #333;
}

.property__status-prefix {
  color: #333;
  font-weight: 500;
}

.property__trigger {
  white-space: nowrap;
  color: #1493bc;
  font-weight: 500;
  cursor: pointer;
}
.property__trigger::after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
}

.property__trigger__hidden-text {
  display: none;
}
@media only screen and (min-width: 480px) {
  .property__trigger__hidden-text {
    display: inline-block;
  }
}

.property__trigger--settings {
  color: #1493bc;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 150ms ease-in-out, border-color 150ms ease-in-out, border-width 150ms ease-in-out;
  border-width: 0;
  border-style: solid;
  border-color: #1493bc;
  cursor: pointer;
  color: #ff6800;
  border-color: #ff6800;
}
.property__trigger--settings:active {
  color: #71bdd6;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #71bdd6;
}
.property__trigger--settings:hover {
  color: #236377;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #236377;
}
.property__trigger--settings:active {
  color: #e55d00;
  border-color: #e55d00;
}
.property__trigger--settings:hover {
  color: #e55d00;
  border-color: #e55d00;
}
.property__trigger--settings::after {
  content: "\f013";
  margin-left: 4px;
  margin-right: 8px;
}

.property__project-topic-subscription-disabled {
  color: #b9baba;
}
.property__project-topic-subscription-disabled .hcl-checkbox__label,
.property__project-topic-subscription-disabled .hcl-checkbox__input:checked ~ .hcl-checkbox__icon {
  color: #b9baba;
}

.property__packages-and-products-confirmation__summary {
  grid-template-columns: 1fr 4fr;
}
.property__packages-and-products-confirmation__summary div {
  padding: 8px;
}
.property__packages-and-products-confirmation__summary div:nth-child(odd) {
  font-weight: 500;
}
.property__packages-and-products-confirmation__summary div:nth-child(4n+2),
.property__packages-and-products-confirmation__summary div:nth-child(4n+1) {
  background: #e4e8da;
}
.property__packages-and-products-confirmation__summary small {
  display: block;
  color: #676767;
  font-weight: initial;
}

.property__packages-and-products-confirmation__info_text {
  font-size: 14px;
  font-style: italic;
  color: #676767;
  margin: 16px 0;
}

.property__publishing_intention {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 670px) {
  .property__publishing_intention {
    flex-direction: row;
    align-items: center;
  }
}
.property__publishing_intention .hcl-icon {
  display: initial;
}
.property__publishing_intention__payment_state {
  font-weight: 500;
}
.property__publishing_intention__calendar-icon::before {
  font-family: "Font Awesome 6 Free";
  width: 16px;
  display: inline-block;
  content: "\f073";
  color: #4ba3b2;
}
.property__publishing_intention__danger-icon {
  width: 16px;
  height: 16px;
  color: #8c3b3b;
}
.property__publishing_intention__check-solid-icon {
  width: 16px;
  height: 16px;
  color: #007e47;
}

dl.order-summary-description {
  display: grid;
  grid-template-columns: max-content auto;
}
dl.order-summary-description dt {
  text-align: left;
  grid-column-start: 1;
}
dl.order-summary-description dd {
  text-align: right;
  grid-column-start: 2;
}

.property-listing-contracts {
  margin: 16px 0;
}

.property-listing-contract .warning {
  width: 300px;
  display: inline-block;
}
.property-listing-contract .fa-exclamation-triangle {
  color: #fbbb1b;
  float: left;
  width: 8%;
  margin-top: 3px;
}
.property-listing-contract .message {
  float: right;
  width: 92%;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
#help-contact strong {
  display: block;
}

.separator {
  min-width: 100%;
  border-bottom: dotted 1px #ddd;
}

#support-contact-box {
  text-align: center;
  color: #fff;
  font-size: 1.25em;
  background: #39aa35;
  margin-top: 10px;
  padding: 10px 0;
}

#property-info-box .property-info-box-header {
  font-size: 0.875em;
  color: #888;
}
#property-info-box .property-info-box-id {
  text-align: right;
  font-size: 0.875em;
}
#property-info-box .property-info-details {
  font-size: 0.875em;
}
@media only screen and (max-width: 850px) {
  #property-info-box .property-info-details .property-info-details-thumb {
    width: 100%;
    display: block;
  }
  #property-info-box .property-info-details .property-info-details-region {
    width: 100%;
    display: block;
  }
}
#property-info-box .property-info-details h4 {
  margin: 1em 0;
  font-size: 1.25em;
  word-break: break-all;
}
#property-info-box .price-info {
  margin-top: 25px;
  font-size: 14px;
}
#property-info-box .price-info strong {
  color: #39aa35;
  display: block;
}

#property-confirmation-box #seller-info ul {
  list-style-type: none;
  margin: 1em 0;
}

.js .property-listing-invoice-overlay {
  position: absolute;
  z-index: 10;
  margin: 0 auto;
  border: solid 5px rgb(195.5, 195.5, 195.5);
  box-shadow: 7px 7px 10px rgba(50, 50, 50, 0.5);
}

@media only screen and (max-width: 640px) {
  .js .property-listing-invoice-overlay {
    top: 200px;
    left: 20px;
  }
}
.property-listing-invoice-overlay {
  background-color: #fff;
  padding: 30px;
  max-width: 928px;
}
@media only screen and (max-width: 850px) {
  .property-listing-invoice-overlay {
    margin-right: 20px;
    max-width: 90%;
  }
}
@media only screen and (max-width: 640px) {
  .property-listing-invoice-overlay {
    margin-right: 20px;
    max-width: 90%;
  }
}
.property-listing-invoice-overlay #property-listing-invoice-overlay-content {
  margin: 3em 0 1em;
  overflow: hidden;
}
@media only screen and (max-width: 640px) {
  .property-listing-invoice-overlay #property-listing-invoice-overlay-content {
    margin: 1em 0;
  }
}
.property-listing-invoice-overlay .one-part {
  width: 29.5%;
  float: left;
}
@media only screen and (max-width: 850px) {
  .property-listing-invoice-overlay .one-part {
    width: 26%;
  }
}
@media only screen and (max-width: 640px) {
  .property-listing-invoice-overlay .one-part {
    width: 100%;
    margin-top: 1em;
  }
}
.property-listing-invoice-overlay .process-arrow {
  float: left;
  padding-top: 20px;
  margin: 10px;
  color: #888;
}
@media only screen and (max-width: 640px) {
  .property-listing-invoice-overlay .process-arrow {
    display: none;
  }
}
.property-listing-invoice-overlay .process-part {
  border: solid 5px #ddd;
  padding: 0.5em;
  background-color: #fffef8;
}
.property-listing-invoice-overlay .number {
  float: left;
  position: absolute;
  background-color: #ff6800;
  color: #fff;
  font-weight: 500;
  width: 35px;
  text-align: center;
  border-radius: 20px;
  font-size: 1.5em;
}
.property-listing-invoice-overlay .close-me {
  float: right;
  position: absolute;
  color: black;
  top: 0;
  right: 7px;
  padding: 5px;
}
.property-listing-invoice-overlay .close-me .fa-remove {
  color: #888;
}
.property-listing-invoice-overlay .read-more {
  text-align: center;
}
.property-listing-invoice-overlay .group-of-icons {
  color: #39aa35;
  text-align: center;
  font-size: 1.5em;
  margin: 1.5em 0;
}
@media only screen and (max-width: 850px) {
  .property-listing-invoice-overlay .group-of-icons {
    font-size: 1em;
  }
}
@media only screen and (max-width: 640px) {
  .property-listing-invoice-overlay .group-of-icons {
    font-size: 2em;
    margin: 0.5em 0;
  }
}
.property-listing-invoice-overlay .group-of-icons .fa-home {
  color: #39aa35;
}
.property-listing-invoice-overlay .description {
  font-size: 14px;
  color: #0e0e0e;
  padding: 0.5em;
}
.property-listing-invoice-overlay .hide-me {
  float: left;
  margin-top: 10px;
  font-size: 14px;
  color: #888;
}
@media only screen and (max-width: 640px) {
  .property-listing-invoice-overlay .hide-me {
    margin-bottom: 1em;
  }
}

.property-listing-invoice-modal .property-listing-invoice-modal__overlay {
  background-color: rgba(0, 0, 0, 0.3);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}
.property-listing-invoice-modal .property-listing-invoice-modal__badge {
  background-color: #ea6161;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-family: "Hemnet Bonad", Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  margin-bottom: 16px;
  padding: 12px 20px;
}
@media (min-width: 990px) {
  .property-listing-invoice-modal .property-listing-invoice-modal__badge {
    font-size: 28px;
    left: 12px;
    margin-bottom: 0;
    position: absolute;
    transform: rotate(-30deg);
  }
}
.property-listing-invoice-modal .property-listing-invoice-modal__header {
  text-align: center;
}
.property-listing-invoice-modal .property-listing-invoice-modal__content {
  background-color: #fff;
  left: 50%;
  padding: 32px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 90%;
  z-index: 20;
}
@media (min-width: 990px) {
  .property-listing-invoice-modal .property-listing-invoice-modal__content {
    max-width: 880px;
    top: 48px;
    width: 100%;
  }
}
.property-listing-invoice-modal .property-listing-invoice-modal__steps {
  margin-bottom: 24px;
  margin-top: 24px;
}
.property-listing-invoice-modal .property-listing-invoice-modal__steps > * + * {
  margin-top: 32px;
}
@media (min-width: 670px) {
  .property-listing-invoice-modal .property-listing-invoice-modal__steps {
    display: flex;
    margin-top: 48px;
  }
  .property-listing-invoice-modal .property-listing-invoice-modal__steps > * + * {
    margin-top: 0;
    margin-left: 32px;
  }
}
.property-listing-invoice-modal .one-part {
  flex: 1;
}
.property-listing-invoice-modal .one-part__description {
  font-size: 14px;
}
.property-listing-invoice-modal .process-part {
  background-color: #007e47;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 8px;
  position: relative;
}
.property-listing-invoice-modal .number {
  align-items: center;
  background-color: #e4e8da;
  border-radius: 100%;
  color: #013a14;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  height: 32px;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 32px;
}
.property-listing-invoice-modal .close-me {
  float: right;
  position: absolute;
  color: black;
  top: 0;
  right: 7px;
  padding: 5px;
}
.property-listing-invoice-modal .read-more {
  align-items: center;
  display: flex;
}
.property-listing-invoice-modal .read-more__link {
  margin-left: 48px;
}
.property-listing-invoice-modal .read-more__link-icon {
  margin-left: 8px;
}
.property-listing-invoice-modal .group-of-icons {
  color: #e4e8da;
  margin-bottom: 32px;
  margin-top: 32px;
  text-align: center;
}
.property-listing-invoice-modal .description {
  font-size: 14px;
  color: #0e0e0e;
  padding: 0.5em;
}
.property-listing-invoice-modal .hide-me {
  margin-bottom: 16px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.property-stats {
  width: 100%;
}
.property-stats th,
.property-stats td {
  padding: 0.5em 0.75em;
  text-align: left;
}
.property-stats th + th,
.property-stats td + td {
  border-left: solid 1px #ddd;
}
.property-stats thead th,
.property-stats tfoot td {
  font-size: 14px;
  font-weight: normal;
  border-bottom: solid 1px #ddd;
}
.property-stats tfoot td {
  border-top: solid 1px #ddd;
}
@media only screen and (max-width: 640px) {
  .property-stats tr {
    padding: 0.5em 0.75em;
  }
  .property-stats td {
    padding: 0;
  }
}
.property-stats tr + tr td {
  border-top: 1px solid #ddd;
}
.property-stats thead tr,
.property-stats tfoot tr {
  background-color: #f4f4f4;
}
.property-stats .table-default__cell-right {
  text-align: right;
}
@media only screen and (min-width: 640px) {
  .property-stats .count {
    text-align: center;
  }
}
@media only screen and (min-width: 640px) {
  .property-stats small {
    display: block;
    color: #888;
  }
}

.property-stats__value {
  font-weight: 500;
}

.property-status {
  display: flex;
  flex-wrap: wrap;
  font-family: "Roboto", Arial, sans-serif;
  margin-bottom: 24px;
}

.property-status__item {
  flex: 0 1 auto;
  margin-right: 16px;
  white-space: nowrap;
}

.property-status__term {
  font-size: 14px;
  color: #888;
}

.property-status__description {
  margin-top: 8px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.receipt-calculations {
  max-width: 360px;
  background-color: #fff;
  border: 1px solid #888;
  box-shadow: 0 0 0 4px #f4f4f4;
}

.receipt-table td {
  padding: 5px 4px;
}

.receipt-description {
  text-align: right;
}

.receipt-amount {
  text-align: right;
  width: 1px;
  white-space: nowrap;
  font-weight: 500;
}

.receipt-total {
  border-top: 1px solid #888;
  height: 2.5em;
}

.receipt-long-term-reservation-start-at-form {
  display: inline;
}

.receipt-description-with-start-date-selection {
  background: #ddd;
  margin-bottom: 20px;
  padding: 5px;
}

.receipt-container {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .receipt-container {
    width: 50%;
  }
}

.receipt {
  font-size: 16px;
}

.receipt--alternate .receipt__body .receipt__row:nth-child(odd) {
  background-color: #e4e8da;
}

.receipt__row--border-top {
  border-top: 1px solid #c2d0bd;
}

.receipt__heading,
.receipt__data {
  padding: 8px;
}

.receipt__heading {
  text-align: left;
  white-space: nowrap;
}

.receipt__data {
  width: 100%;
  text-align: left;
}

.receipt__data-vat {
  font-weight: normal;
  font-size: 14px;
}

.receipt__data--align-right {
  text-align: right;
}

.receipt__data--highlight,
.receipt__heading--highlight {
  font-weight: 500;
}

.receipt__data--broker {
  min-width: 320px;
  width: 320px;
}

.receipt__data--wrap {
  white-space: normal;
}

.receipt__select {
  width: auto;
  margin-bottom: 8px;
}

/* Ribbons */
.ribbon {
  position: relative;
  display: block;
  float: left;
  clear: both;
  height: 22px;
  padding: 0 22px;
  margin: 0 0 2px -22px;
  background: #39aa35;
  color: #fff;
  line-height: 22px;
  font-size: 1.083333em;
  white-space: nowrap;
  z-index: 1;
}

.ribbon-default-right .ribbon,
.ribbon.right {
  margin: 0 -22px 2px 0;
  float: right;
}

/*.ribbons.expandable .ribbon,
.ribbon.expandable,*/
.ribbon.mini {
  max-width: 10px;
  padding: 0 10px;
}

/*.ribbons.expandable .ribbon span,
.ribbon.expandable span,*/
.ribbon.mini span {
  display: block;
  text-indent: -10000em;
  opacity: 0;
}

/*.ribbons.expandable:hover .ribbon,
.ribbon.expandable:hover {
    max-width: 300px;
    padding: 0 22px;
    -webkit-transition: max-width 0.5s linear;
       -moz-transition: max-width 0.5s linear;
        -ms-transition: max-width 0.5s linear;
         -o-transition: max-width 0.5s linear;
            transition: max-width 0.5s linear;
}
.ribbons.expandable:hover .ribbon span,
.ribbon.expandable:hover span {
    text-indent: 0;
    opacity: 1;
    -webkit-transition: opacity 0.4s linear;
       -moz-transition: opacity 0.4s linear;
        -ms-transition: opacity 0.4s linear;
         -o-transition: opacity 0.4s linear;
            transition: opacity 0.4s linear;
            }*/
.ribbon.mini {
  height: 12px;
  width: 15px;
  padding: 0;
}

.ribbon-default-left .ribbon.mini,
.ribbon.left.mini {
  margin-left: -18px;
}

.ribbon-default-right .ribbon.mini,
.ribbon.right.mini {
  margin-right: -18px;
}

.ribbon a {
  color: #fff;
}

.ribbon.ongoing-bidding {
  background: #934c7e;
}

.ribbon.foreclosure {
  background: #1493bc;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.reservation-slots-wrapper {
  margin: 8px 0;
}

.reservation-slots {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin: -4px;
}

.reservation-slot {
  flex: 0 1 auto;
  width: 50%;
  padding: 4px;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .reservation-slot {
    width: 33.3333333333%;
  }
}
@media only screen and (min-width: 1024px) {
  .reservation-slot {
    width: 16.6666666667%;
  }
}

.reservation-slot__item {
  display: block;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 8px 0;
  text-align: center;
  cursor: pointer;
}
.reservation-slot__item::before {
  height: 16px;
  width: 16px;
  background: #fff;
  border: 1px solid #888;
  border-radius: 100%;
  display: inline-block;
  content: "";
  transition: background-color, border-color, 0.1s linear;
}

.reservation-slot__date {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin: 8px 0;
  height: 32px;
}
@media only screen and (max-width: 959px) {
  .reservation-slot__date {
    height: auto;
  }
}

.reservation-slot__count {
  display: block;
  font-size: 14px;
}

.reservation-slot__input {
  position: absolute;
  left: -99999px;
}

.reservation-slot__input:checked + .reservation-slot__item {
  background: #f4f4f4;
  border-color: #39aa35;
}
.reservation-slot__input:checked + .reservation-slot__item::before {
  background: #39aa35;
  border-color: #888;
  box-shadow: inset #fff 0 0 0 4px;
}

.reservation-slot__input:disabled + .reservation-slot__item {
  opacity: 0.5;
  cursor: not-allowed;
}

.reservation-slot__count--highlight {
  color: #f01818;
}

.statistics-box {
  display: inline-block;
  padding: 8px;
  border: 1px solid #b9baba;
  border-radius: 3px;
  margin-right: 24px;
  font-size: 16px;
  font-weight: 500;
}

.green-statistics-box {
  display: inline-block;
  padding: 8px;
  border: 1px solid #b9baba;
  border-radius: 3px;
  margin-right: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #366e34;
}

.statistics-overview {
  display: inline-block;
  width: 100%;
  margin-top: 20px;
}

.statistics-number {
  font-size: 22px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.table-note {
  text-align: right;
}

.stats td {
  font-weight: 500;
  font-size: 16px;
}

.total-row {
  border-top: solid 1px #ddd;
}

.stats-header {
  margin-top: 1em;
}

.organisation-type {
  margin-top: 12px;
}

.organisation-type__button-row {
  text-align: center;
  padding: 12px;
}

.organisation-type__disclaimer {
  margin-bottom: 12px;
  font-style: italic;
  font-size: 14px;
}

.organisation-type__back-link {
  margin-top: 12px;
}

.split-content {
  display: flex;
  flex-wrap: wrap;
  margin: -16px 0;
}
@media only screen and (min-width: 768px) {
  .split-content {
    margin: 16px -16px;
  }
}

.split-content__section {
  width: 100%;
  flex: 0 1 auto;
  padding: 16px 0;
}
@media only screen and (min-width: 768px) {
  .split-content__section {
    width: 50%;
    padding: 16px;
  }
}

@media only screen and (min-width: 768px) {
  .split-content__section--1of3 {
    width: 33%;
    padding: 16px;
  }
}

@media only screen and (min-width: 768px) {
  .split-content__section--2of3 {
    width: 67%;
    padding: 16px;
  }
}

.split-content__section--3of4-responsive {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .split-content__section--3of4-responsive {
    width: 75%;
    padding: 16px;
  }
}

.terms {
  overflow: auto;
  max-height: 0;
  padding: 0;
  background-color: #ddd;
  font-size: 14px;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
}
.terms h2 {
  margin: 1em 0 0.5em;
  text-transform: uppercase;
}
.terms h3 {
  margin: 1.5em 0 0.5em;
}
.terms ul {
  list-style-type: disc;
  list-style-position: inside;
  margin: 1em;
}

.terms:target {
  margin-bottom: 0;
  max-height: 58em;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.text-container-with-img {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "img" "text";
  gap: 24px;
}
@media (min-width: 670px) {
  .text-container-with-img.text-container-with-img_left {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "img text";
  }
}
@media (min-width: 670px) {
  .text-container-with-img.text-container-with-img_left.text-container-with-img_2 {
    grid-template-columns: 1fr 2fr;
  }
}
@media (min-width: 670px) {
  .text-container-with-img.text-container-with-img_left.text-container-with-img_3 {
    grid-template-columns: 1fr 3fr;
  }
}
@media (min-width: 670px) {
  .text-container-with-img.text-container-with-img_left.text-container-with-img_6 {
    grid-template-columns: 1fr 6fr;
  }
}
@media (min-width: 670px) {
  .text-container-with-img.text-container-with-img_right {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "text img";
  }
}
@media (min-width: 670px) {
  .text-container-with-img.text-container-with-img_right.text-container-with-img_2 {
    grid-template-columns: 2fr 1fr;
  }
}
@media (min-width: 670px) {
  .text-container-with-img.text-container-with-img_right.text-container-with-img_6 {
    grid-template-columns: 6fr 1fr;
  }
}

.text-container-with-img_text {
  grid-area: text;
  justify-self: start;
  align-self: center;
}

.text-container-with-img_img {
  grid-area: img;
  justify-self: center;
  align-self: center;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.roles {
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  overflow: hidden;
  height: auto;
  margin: 10px 0;
  max-height: 0;
  width: 0;
}

.roles:target {
  max-height: 80em;
  width: auto;
}

.profile-image-uploader {
  display: flex;
  flex: 0 1 auto;
}
.profile-image-uploader img {
  height: 200px;
  width: auto;
}

.checkbox-wrapper {
  display: flex;
  justify-content: flex-end;
}

@keyframes notice-fade-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.reservation-comment {
  margin-top: 8px;
  float: left;
  width: 100%;
}

.reservation-comment__button {
  color: #1493bc;
  text-decoration: none;
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.reservation-comment__button:active {
  color: #71bdd6;
  text-decoration: underline;
}
.reservation-comment__button:hover {
  color: #236377;
  text-decoration: underline;
}
.reservation-comment__button::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  margin-right: 8px;
  content: "\f075";
  color: inherit;
  font-size: inherit;
}

.reservation-comment__notice {
  animation: notice-fade-out 5s normal forwards ease-in-out;
  margin-left: 8px;
}

.reservation-comment__textarea {
  margin-bottom: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.property-listing-invoice-form .primary-content-box {
  background-color: #fff;
}
.property-listing-invoice-form small {
  display: block;
  font-size: 14px;
}
.property-listing-invoice-form .input {
  max-width: 350px;
  margin: 0 auto;
}
.property-listing-invoice-form__checkbox {
  margin: 24px auto;
}
.property-listing-invoice-form .seller-types {
  margin-bottom: 16px;
}
.property-listing-invoice-form .seller-types__radio-button {
  margin-right: 8px;
}
.property-listing-invoice-form .seller-types__input-container {
  margin: 12px 0;
  padding: 18px 15.6px 18px 12px;
  border-radius: 3px;
  border: 1px solid #ddd;
  font-weight: normal;
  width: 100%;
  float: none;
  display: block;
  box-sizing: border-box;
}
@media only screen and (min-width: 960px) {
  .property-listing-invoice-form .seller-types__input-container {
    float: left;
    width: auto;
    margin: 6px 8px;
  }
}
.property-listing-invoice-form .seller-types__input-container:hover {
  cursor: pointer;
}
.property-listing-invoice-form .seller-types__input-container--active {
  background-color: #39aa35;
  color: #fff;
  border-color: #39aa35;
}
.property-listing-invoice-form__broker_info {
  font-size: 14px;
  margin: 12px auto;
}
.property-listing-invoice-form__broker_info h4 {
  font-size: inherit;
  font-weight: 500;
}
.property-listing-invoice-form .divider::after, .property-listing-invoice-form .divider::before {
  border-bottom: dotted 1px #ddd;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
  display: block;
}
.property-listing-invoice-form .divider.top::before {
  content: "";
  margin-bottom: 30px;
  margin-top: 10px;
}
.property-listing-invoice-form .divider.bottom::after {
  content: "";
  margin-top: 30px;
  margin-bottom: 10px;
}
.property-listing-invoice-form .button-in-the-middle {
  text-align: center;
  margin: 20px auto;
  position: relative;
}
.property-listing-invoice-form .button-in-the-middle .button-wrapper {
  padding: 0 15px;
  background-color: #fff;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.property-listing-invoice-form .button-in-the-middle::after {
  border-bottom: dotted 1px #ddd;
  left: 15px;
  right: 15px;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  content: "";
}
.property-listing-invoice-form .button-in-the-middle button {
  line-height: 20px;
  margin: 0;
}
.property-listing-invoice-form .site-info {
  margin-bottom: 25px;
}
.property-listing-invoice-form .confirm-no-email-checkbox {
  margin-right: 8px;
}

.property-listing-invoice-form__sellers-page-access {
  background-color: #f3fbfe;
  margin-bottom: 12px;
  padding: 12px;
}

.property-listing-invoice-form__error {
  margin-bottom: 8px;
}

.property_listing_invoice_row_sellerInvoiceEmail .hint,
.property_listing_invoice_row_estateTrusteeEmail .hint {
  margin-bottom: 0;
}

.property-listing-invoice-form__email-error-title {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}

.property-listing-invoice-form__hint-toggle {
  color: #1493bc;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 150ms ease-in-out, border-color 150ms ease-in-out, border-width 150ms ease-in-out;
  border-width: 0;
  border-style: solid;
  border-color: #1493bc;
  cursor: pointer;
  color: #0e0e0e;
  border-color: rgba(0, 0, 0, 0.25);
  border-width: 0 0 1px;
  appearance: none;
  background: none;
  padding: 0;
}
.property-listing-invoice-form__hint-toggle:active {
  color: #71bdd6;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #71bdd6;
}
.property-listing-invoice-form__hint-toggle:hover {
  color: #236377;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #236377;
}
.property-listing-invoice-form__hint-toggle:active {
  color: #0e0e0e;
  border-color: #000;
}
.property-listing-invoice-form__hint-toggle:hover {
  color: #0e0e0e;
  border-color: #000;
}

.property-listing-invoice-form__hint-toggle:focus {
  outline: none;
}

.property-listing-invoice-form__hint-information {
  list-style: initial;
  margin-top: 8px;
  padding-left: 20px;
}

.property-listing-invoice-form__standard-invoice-approval {
  color: #000;
  display: flex;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.property-listing-invoice-form__standard-invoice-approval-checkbox {
  margin-right: 8px;
}

.checklist {
  font-size: 16px;
  line-height: 20px;
  margin: 24px 0;
}
@media only screen and (min-width: 768px) {
  .checklist {
    margin: 32px 0;
  }
}

@media only screen and (min-width: 960px) {
  .checklist--large {
    font-size: 18px;
    line-height: 30px;
  }
}

.checklist__item {
  position: relative;
  display: flex;
}
.checklist__item::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  margin-right: 8px;
  content: "\f00c";
  color: inherit;
  font-size: inherit;
}
.checklist__item::before {
  color: #39aa35;
  margin-right: 16px;
  flex: 0 1 auto;
}
.checklist--large .checklist__item::before {
  font-size: 22px;
}
.checklist__item + .checklist__item {
  margin-top: 16px;
}

.checklist__text {
  flex: 0 1 auto;
  display: block;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.rangeslider-wrapper {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

.rangeslider {
  margin: 20px 0 60px;
  position: relative;
  background: #b9baba;
  display: block;
}
.rangeslider .rangeslider__fill {
  display: block;
}
.rangeslider .rangeslider__handle {
  background: #fff;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 -1px 3px rgba(0, 0, 0, 0.4);
}
.rangeslider .rangeslider__handle .rangeslider__active {
  opacity: 1;
}
.rangeslider .rangeslider__handle-tooltip {
  width: 40px;
  height: 40px;
  text-align: center;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  font-weight: normal;
  font-size: 14px;
  transition: all 100ms ease-in;
  border-radius: 4px;
  display: inline-block;
  color: #fff;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
.rangeslider .rangeslider__handle-tooltip span {
  margin-top: 12px;
  display: inline-block;
  line-height: 100%;
}
.rangeslider .rangeslider__handle-tooltip::after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
}

.rangeslider-horizontal {
  height: 4px;
  border-radius: 16px;
}
.rangeslider-horizontal .rangeslider__fill {
  height: 4px;
  background-color: #0bb70b;
  border-radius: 16px;
  position: absolute;
}
.rangeslider-horizontal .rangeslider__handle {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  top: 50%;
  background-color: #0bb70b;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: none;
}
.rangeslider-horizontal .rangeslider__handle:focus {
  outline: none;
}
.rangeslider-horizontal .rangeslider__handle-tooltip {
  top: -55px;
}
.rangeslider-horizontal .rangeslider__handle-tooltip::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.8);
  left: 50%;
  bottom: -8px;
  transform: translate3d(-50%, 0, 0);
}

.rangeslider-vertical {
  margin: 20px auto;
  height: 150px;
  max-width: 10px;
  background-color: transparent;
}
.rangeslider-vertical .rangeslider__fill,
.rangeslider-vertical .rangeslider__handle {
  position: absolute;
}
.rangeslider-vertical .rangeslider__fill {
  width: 100%;
  background-color: #0bb70b;
  box-shadow: none;
  bottom: 0;
}
.rangeslider-vertical .rangeslider__handle {
  width: 30px;
  height: 10px;
  left: -10px;
  box-shadow: none;
}
.rangeslider-vertical .rangeslider__handle-tooltip {
  left: -100%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}
.rangeslider-vertical .rangeslider__handle-tooltip::after {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid rgba(0, 0, 0, 0.8);
  left: 100%;
  top: 12px;
}

.rangeslider-reverse.rangeslider-horizontal .rangeslider__fill {
  right: 0;
}
.rangeslider-reverse.rangeslider-vertical .rangeslider__fill {
  top: 0;
  bottom: inherit;
}

.rangeslider__labels {
  position: relative;
}
.rangeslider-vertical .rangeslider__labels {
  position: relative;
  list-style-type: none;
  margin: 0 0 0 24px;
  padding: 0;
  text-align: left;
  width: 250px;
  height: 100%;
  left: 10px;
}
.rangeslider-vertical .rangeslider__labels .rangeslider__label-item {
  position: absolute;
  transform: translate3d(0, -50%, 0);
}
.rangeslider-vertical .rangeslider__labels .rangeslider__label-item::before {
  content: "";
  width: 10px;
  height: 2px;
  background: #000;
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}
.rangeslider__labels .rangeslider__label-item {
  position: absolute;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  top: 10px;
  transform: translate3d(-50%, 0, 0);
}

.rangeslider__handle-label {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translate(-50%);
}
.rangeslider__handle-label:focus {
  outline: none;
}

.rangeslider__label {
  text-transform: uppercase;
  margin-bottom: 32px;
}
@media only screen and (min-width: 960px) {
  .rangeslider__label {
    margin-bottom: 48px;
  }
}

.rangeslider__price-label {
  text-transform: uppercase;
  margin-bottom: 16px;
}
@media only screen and (min-width: 960px) {
  .rangeslider__price-label {
    margin-bottom: 32px;
  }
}

.broker-preview {
  display: flex;
  flex: 0 1 auto;
  border: 1px solid #ddd;
  padding: 16px;
  margin-bottom: 16px;
}

.broker-preview__image-wrapper {
  min-width: 60px;
  max-width: 120px;
  min-height: 60px;
  max-height: 120px;
  margin-right: 16px;
  border-radius: 100%;
  overflow: hidden;
  flex: 1 1 30%;
  align-self: flex-start;
  position: relative;
}

.broker-preview__image {
  display: block;
  width: 100%;
  height: 100%;
}

.broker-preview__contact-info {
  flex: 2 2 70%;
}

.broker-preview__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  color: rgba(0, 0, 0, 0.4);
  font-size: 30px;
}

.broker-preview__spinner--hidden {
  display: none;
}

.info-mock__line {
  background-color: #f4f4f4;
  height: 24px;
  width: 90%;
  margin-bottom: 8px;
}
@media only screen and (min-width: 480px) {
  .info-mock__line {
    width: 50%;
  }
}
.info-mock__line:nth-child(2n) {
  width: 70%;
}
@media only screen and (min-width: 480px) {
  .info-mock__line:nth-child(2n) {
    width: 40%;
  }
}
.info-mock__line:nth-child(3n) {
  width: 80%;
}
@media only screen and (min-width: 480px) {
  .info-mock__line:nth-child(3n) {
    width: 60%;
  }
}
.info-mock__line:last-child {
  margin-bottom: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.product-price-info {
  margin-top: 8px;
}

.product-price-info__label {
  float: left;
  font-size: 14px;
  line-height: 1.5em;
  margin: 0;
  margin-right: 4px;
}

.product-price-info__heading {
  font-weight: 500;
}

.product-price-info--loading {
  background-color: #f4f4f4;
  color: #434343;
}

.product-price-info--ready {
  transition: background-color 0.2s ease;
  background-color: inherit;
}

.product-price-info__product-section {
  display: inline-block;
  margin-bottom: 8px;
  margin-right: 8px;
  margin-top: 8px;
  vertical-align: top;
  width: calc(50% - 2 * 8px);
}
@media only screen and (max-width: 850px) {
  .product-price-info__product-section {
    width: calc(100% - 8px);
  }
}

.product-price-info__price-items {
  margin-bottom: 16px;
}

.product-price-info__discount-info {
  margin-left: 40%;
}

.product-price-info__price-item {
  display: inline-block;
}

.price-item__product-link {
  font-size: 14px;
}

.price-item__toplisting-clarification {
  display: block;
  position: relative;
  top: 8px;
}

.product-price-info__price-item--wide {
  width: 40%;
}

.product-price-info__price-item--narrow {
  width: 20%;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.breadcrumbs {
  list-style-type: none;
  display: inline-flex;
}

.breadcrumbs__item {
  font-weight: 500;
}
.breadcrumbs__item + .breadcrumbs__item::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f054";
  margin: 0 8px;
}

.breadcrumbs__link {
  color: #1493bc;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 150ms ease-in-out, border-color 150ms ease-in-out, border-width 150ms ease-in-out;
  border-width: 0;
  border-style: solid;
  border-color: #1493bc;
  cursor: pointer;
  color: #0e0e0e;
  border-color: rgba(0, 0, 0, 0.25);
}
.breadcrumbs__link:active {
  color: #71bdd6;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #71bdd6;
}
.breadcrumbs__link:hover {
  color: #236377;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #236377;
}
.breadcrumbs__link:active {
  color: #0e0e0e;
  border-color: #000;
}
.breadcrumbs__link:hover {
  color: #0e0e0e;
  border-color: #000;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.package-recommendation__inner-container {
  margin-left: 40px;
}

.package-recommendation__toggle-recommendation {
  margin-bottom: 0;
}

.package-recommendation__alert-image-wrapper {
  position: relative;
  flex-shrink: 0;
}

.package-recommendation__price-overview {
  padding: 8px;
  border-radius: 3px;
  border: 1px solid #ddd;
}

.package-recommendation__price-overview-title {
  font-weight: 500;
  display: block;
  margin-bottom: 0.5em;
  font-size: 14px;
}

.package-recommendation__packages {
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin-top: 8px;
}

.package-recommendation__package {
  display: flex;
  flex-direction: column;
  margin-right: 24px;
  font-size: 14px;
}

.package-recommendation__option {
  display: flex;
  align-items: center;
}
.package-recommendation__option input {
  height: 20px;
  width: 20px;
  margin-right: 8px;
  margin-left: 0;
}

.package-recommendation__option--disabled {
  color: #888;
}

.package-recommendation__options {
  margin-top: 8px;
  margin-bottom: 8px;
}

.price-link {
  align-items: center;
  font-size: 14px;
  display: flex;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.listing-preview-tabs__tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px 0 0;
  max-width: 420px;
  width: calc(100vw - 32px);
}
@media (min-width: 670px) {
  .listing-preview-tabs__tabs {
    justify-content: flex-start;
    width: 100%;
  }
}

.listing-preview-tabs__broker-recommendation {
  width: 330px;
  margin-bottom: 16px;
  margin-left: 8px;
  position: absolute;
  bottom: 100%;
}
@media (min-width: 670px) {
  .listing-preview-tabs__broker-recommendation {
    margin-bottom: 24px;
    margin-left: 0;
  }
}

.listing-preview-tabs__broker-recommendation--align-with-tab-1 {
  left: 8px;
}

.listing-preview-tabs__broker-recommendation--align-with-tab-2 {
  left: 50%;
  transform: translateX(-50%);
}

.listing-preview-tabs__tabs--recommendation-space {
  padding-top: 136px;
}

.listing-preview-tabs__text {
  margin: 0 16px;
}
@media (min-width: 670px) {
  .listing-preview-tabs__text {
    margin-left: 0;
  }
}

.listing-preview-tabs__tab {
  padding: 8px;
  position: relative;
}
@media (min-width: 370px) {
  .listing-preview-tabs__tab {
    padding: 8px 16px;
  }
}
@media (min-width: 670px) {
  .listing-preview-tabs__tab {
    margin-right: 16px;
  }
}

.listing-preview-tabs__tab--selected {
  border-bottom: 2px solid #007e47;
}
@media (min-width: 670px) {
  .listing-preview-tabs__tab--selected {
    border-bottom: 4px solid #007e47;
  }
}

.listing-preview-tabs__panel {
  padding: 8px 8px 0;
  border-top: 1px solid #ddd;
}
@media (min-width: 321px) {
  .listing-preview-tabs__panel {
    padding: 8px 16px 0;
  }
}

.listing-preview-tabs__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;
}

.tab-button {
  align-items: center;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0;
}
.tab-button:focus {
  outline: 1px solid #4ba3b2;
  outline-offset: 5px;
}
.tab-button:empty {
  display: none;
}

.tab-button__header {
  align-items: center;
  display: flex;
}

.tab-button__price {
  display: block;
  font-family: "Hemnet Bonad", Georgia, "Times New Roman", Times, serif;
  font-size: 21px;
  margin-top: 8px;
}

.tab-button__button-indicator {
  border: 1px solid #161616;
  border-radius: 100%;
  display: block;
  height: 16px;
  margin-right: 8px;
  position: relative;
  width: 16px;
}
.tab-button__button-indicator::before {
  border-radius: 100%;
  content: "";
  display: block;
  height: 10px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 10px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.listing-preview {
  display: flex;
  flex-direction: column;
  color: #333;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  margin: 0 0 24px 0;
  pointer-events: none;
}
@media (min-width: 550px) {
  .listing-preview {
    margin-bottom: 16px;
  }
}
.listing-preview:hover, .listing-preview:focus {
  border: 1px solid #007e47;
  text-decoration: none;
  color: #013a14;
}

@media (min-width: 670px) {
  .listing-preview--enable-desktop {
    flex-direction: row;
    border: 1px solid #ddd;
  }
}
@media (min-width: 990px) {
  .listing-preview--enable-desktop {
    margin: 0 0 16px;
  }
}
@media (min-width: 1040px) {
  .listing-preview--enable-desktop {
    box-shadow: none;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.listing-preview-labels__label {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  margin-right: 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.listing-preview-labels__label--type {
  background-color: #eee;
}

.listing-preview-labels__label--feature {
  border: 1px solid #ddd;
}

.listing-preview-labels__container {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  flex-wrap: wrap;
}

.listing-preview-labels__row {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  min-height: 26px;
}
.listing-preview-labels__row > span {
  margin-right: 4px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.listing-preview-images {
  display: inline-block;
  width: 100%;
}
@media (min-width: 670px) {
  .enable-desktop .listing-preview-images {
    width: 50%;
  }
}

.listing-preview-images__primary-image {
  display: flex;
  flex: 0 2 auto;
  position: relative;
  overflow: hidden;
}
@media (min-width: 670px) {
  .enable-desktop .listing-preview-images__primary-image {
    flex: 1 1 auto;
  }
}

.listing-preview-images__highlighted-showing {
  bottom: 8px;
  left: 8px;
  position: absolute;
}

.listing-preview-images__thumbnails-container {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  grid-template-rows: 100%;
  margin-top: 8px;
  height: 120px;
}

.listing-preview-images__thumbnail-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.listing-preview-image {
  display: flex;
  flex: 1;
  max-width: 100%;
  height: 150px;
  object-fit: cover;
}
@media (min-width: 670px) {
  .enable-desktop .listing-preview-image {
    width: 100%;
    height: 200px;
  }
}

.listing-preview-image--big {
  height: 250px;
}
@media (min-width: 670px) {
  .enable-desktop .listing-preview-image--big {
    height: 300px;
  }
}

.listing-preview-image__thumbnail-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.listing-preview-image__missing-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #f4f4f4;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.listing-preview-information {
  display: inline-block;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 670px) {
  .enable-desktop .listing-preview-information {
    width: 50%;
  }
}

.listing-preview-information__content {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 16px 8px;
  overflow: hidden;
}

.listing-preview-information__header {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  margin-bottom: 8px;
  position: relative;
}

.listing-preview-information__address {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 50px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.listing-preview-information__street-address {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: 1.3;
  align-items: baseline;
  margin: 0 8px 0 0;
}
@media (min-width: 550px) {
  .listing-preview-information__street-address {
    font-size: 18px;
    flex-direction: row;
  }
}

.listing-preview-information__property-type-icon {
  display: inline-flex;
  margin-right: 4px;
}
.listing-preview-information__property-type-icon svg,
.listing-preview-information__property-type-icon img {
  height: 12px;
  width: 12px;
}
@media (min-width: 550px) {
  .listing-preview-information__property-type-icon svg,
  .listing-preview-information__property-type-icon img {
    height: 14px;
    width: 14px;
  }
}
@media (min-width: 670px) {
  .enable-desktop .listing-preview-information__property-type-icon svg,
  .enable-desktop .listing-preview-information__property-type-icon img {
    height: 12px;
    width: 12px;
  }
}
@media (min-width: 850px) {
  .enable-desktop .listing-preview-information__property-type-icon svg,
  .enable-desktop .listing-preview-information__property-type-icon img {
    height: 14px;
    width: 14px;
  }
}

.listing-preview-information__location {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #656565;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  font-weight: normal;
  max-width: 100%;
  margin: 0;
}

.listing-preview-information__location-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-preview-information__broker-logo {
  width: 75px;
  height: 35px;
  text-align: right;
}
.listing-preview-information__broker-logo img {
  max-width: 75px;
  max-height: 35px;
}

.listing-preview-information__description {
  color: #676767;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.listing-preview-attributes__container {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 8px;
}

.listing-preview-attributes__attribute {
  flex: 1;
}
.listing-preview-attributes__attribute:first-child {
  min-width: 100px;
}

.listing-preview-attributes__attribute--primary {
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 321px) {
  .listing-preview-attributes__attribute--primary:first-child {
    flex-basis: 100%;
  }
}
@media (min-width: 550px) {
  .listing-preview-attributes__attribute--primary {
    font-size: 16px;
  }
}
@media (min-width: 670px) {
  .enable-desktop .listing-preview-attributes__attribute--primary {
    font-size: 14px;
  }
}
@media (min-width: 800px) {
  .enable-desktop .listing-preview-attributes__attribute--primary {
    font-size: 16px;
  }
}

.listing-preview-attributes__attribute--secondary {
  font-size: 14px;
  color: #656565;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.joined-area {
  flex: 1;
}
.joined-area:first-child {
  min-width: 100px;
}

.joined-area--primary {
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 800px) {
  .joined-area--primary {
    font-size: 16px;
  }
}

.joined-area--normal-weight {
  font-weight: normal;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.tooltip {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  display: block;
  border: 1px solid;
  border-radius: 6px;
  text-align: center;
}

.tooltip::before,
.tooltip::after {
  content: " ";
  position: absolute;
  display: block;
  bottom: -15px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-width: 16px;
  margin-left: -12px;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.15));
}

.tooltip--arrow-right-10::before,
.tooltip--arrow-right-10::after {
  right: 10%;
}

.tooltip--arrow-left-15::before,
.tooltip--arrow-left-15::after {
  left: 15%;
}

.tooltip--arrow-left-45::before,
.tooltip--arrow-left-45::after {
  left: 45%;
}

.tooltip::before {
  bottom: -16px;
  border-top-color: #ddd;
}

.tooltip--green {
  background-color: #e4e8da;
  border-color: #e4e8da;
}
.tooltip--green::before {
  border-top-color: #e4e8da;
}
.tooltip--green::after {
  border-top-color: #e4e8da;
}

.tooltip__content {
  font-family: "Roboto", Arial, sans-serif;
  padding: 12px 16px;
  margin: 0;
}

.tooltip__image {
  position: relative;
  width: 70px;
  height: 70px;
  max-width: 400px;
  max-height: 400px;
  overflow: hidden;
  border-radius: 100%;
  color: #d3dccc;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.subscriptions {
  margin: 24px 0;
}

.subscription {
  padding: 32px 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border-bottom: 1px solid #e9e7e2;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .subscription {
    flex-direction: row;
  }
}

.subscription__section {
  flex: 1 0 100%;
}
@media only screen and (min-width: 768px) {
  .subscription__section {
    flex: 1 0 50%;
  }
}

.subscription__section--secondary {
  margin-top: 16px;
}
@media only screen and (min-width: 768px) {
  .subscription__section--secondary {
    margin-top: 0;
    text-align: right;
  }
}

.subscription__section--fullwidth {
  flex: 1 0 100%;
}

.subscription__attribute-section + .subscription__attribute-section {
  margin-top: 4px;
}

.subscription__attribute {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #767676;
}

.subscription__attribute--title {
  font-size: 16px;
  color: #333;
}

.subscription__attribute-value {
  color: #333;
}

.subscription__status {
  font-weight: 500;
}

.subscription__status--active {
  color: #39aa35;
}

.subscription__status--cancelled {
  color: #d68a00;
}

.subscription__status--inactive {
  color: #767676;
}

.subscription__status--timedout {
  color: #ea6161;
}

.subscription__attribute--discount {
  color: #39aa35;
}

.subscription__link {
  color: #1493bc;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 150ms ease-in-out, border-color 150ms ease-in-out, border-width 150ms ease-in-out;
  border-width: 0;
  border-style: solid;
  border-color: #1493bc;
  cursor: pointer;
  border-width: 0 0 1px;
  color: #0e0e0e;
  border-color: rgba(0, 0, 0, 0.25);
  font-size: 14px;
}
.subscription__link:active {
  color: #71bdd6;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #71bdd6;
}
.subscription__link:hover {
  color: #236377;
  text-decoration: none;
  border-width: 0 0 1px;
  border-color: #236377;
}
.subscription__link:active {
  color: #0e0e0e;
  border-color: #000;
}
.subscription__link:hover {
  color: #0e0e0e;
  border-color: #000;
}

.subscription__link--cancel {
  padding: 0;
  width: auto;
  background-color: #fff;
}

.cancel-subscription-form::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  margin-right: 8px;
  content: "\f00d";
  color: #bd4d00;
  font-size: 14px;
}
.cancel-subscription-form:hover::before {
  color: #f01818;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.form-review {
  border-radius: 3px;
  border: 1px solid #b9baba;
  padding: 16px;
}

.form-review__description {
  margin-top: 8px;
}

.form-review__section {
  margin-bottom: 32px;
}

.form-review__title {
  margin-bottom: 16px;
}

.form-review__section-header {
  align-items: center;
  display: flex;
  margin-bottom: 8px;
}

.form-review__section-header-number {
  align-items: center;
  background-color: #e4e8da;
  border-radius: 100%;
  border: 1px solid #013a14;
  color: #013a14;
  display: flex;
  font-family: "Hemnet Bonad", Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: 500;
  height: 24px;
  justify-content: center;
  margin-right: 16px;
  width: 24px;
}

.form-review__section-header-line {
  border-color: #013a14;
  border-width: 2px;
  flex: 1;
  margin: 0 16px;
}

.form-review__list > * + * {
  margin-top: 8px;
}

.form-review__list-item {
  font-size: 14px;
}

.form-review__list-item-header {
  font-size: 14px;
  font-weight: 500;
}

.form-review__payment-type {
  font-size: 14px;
}

.form-review__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.form-review__payment-list {
  font-size: 14px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.form-section {
  margin-bottom: 16px;
}
.form-section:last-of-type {
  margin-bottom: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.project-milestones-picker {
  margin-bottom: 8px;
}

.project-milestones-picker__milestone {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.project-milestones-picker__date-picker {
  margin-top: 8px;
}

.project-milestones-picker__date-picker__date-label {
  font-size: 16px;
}

.project-milestones-picker__date-picker__date-label--disabled {
  color: #888;
  font-size: 16px;
}

.project-milestones-picker__date-picker__button--choose-date {
  color: #39aa35;
  font-size: 16px;
  font-weight: 500;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.labeled-content-area {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #b9baba;
  overflow: hidden;
  border: 1px solid #67458c;
}

.labeled-content-area__label {
  background: #67458c;
  color: #fff;
  font-weight: 500;
  text-align: center;
  padding: 8px;
}

.character-counter--container {
  display: flex;
  flex-flow: row-reverse;
}

.character-counter--warning {
  color: #ea6161;
}

.character-counter--text-area-override {
  margin-bottom: 0;
  height: 200px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.stepper {
  align-items: center;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}

.stepper--padded {
  padding: 8px 16px;
}
@media (min-width: 670px) {
  .stepper--padded {
    padding: 8px 40px 32px;
  }
}

@media (min-width: 670px) {
  .stepper--multi-line-padding {
    padding-bottom: 48px;
  }
}

.stepper--green-background {
  background: #e4e8da;
}

.stepper__connection {
  background: #013a14;
  flex-grow: 1;
  height: 2px;
}

.stepper-step--active .stepper-step__number {
  background: #013a14;
  color: #e4e8da;
}

.stepper-step {
  align-items: center;
  color: #013a14;
  display: flex;
  flex-direction: column;
}

.stepper-step__number {
  align-items: center;
  border-radius: 100%;
  border: 2px solid #013a14;
  display: flex;
  font-family: "Hemnet Bonad", Georgia, "Times New Roman", Times, serif;
  font-size: 22px;
  height: 32px;
  width: 32px;
  justify-content: center;
  position: relative;
}

.stepper-step__number-big-responsive {
  font-size: 18px;
}
@media (min-width: 670px) {
  .stepper-step__number-big-responsive {
    font-size: 24px;
    margin-bottom: 4px;
    height: 40px;
    width: 40px;
  }
}

.stepper-step__number::after {
  color: #013a14;
  content: attr(data-text);
  display: none;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  position: absolute;
  top: calc(100% + 4px);
  width: 120px;
  text-align: center;
}
@media (min-width: 670px) {
  .stepper-step__number::after {
    display: block;
  }
}

.stepper-step__number--finished {
  padding-right: 4px;
}

.document-card--container {
  display: flex;
  height: 53px;
}

.document-card--item p {
  font-size: 0.8em;
}
.document-card--item span {
  font-size: 0.8em;
  padding-top: 0;
}

.document-card--description {
  flex-grow: 1;
}

.selling-price-profiles_wrapper {
  border: solid 1px #ddd;
}

.selling-price-profiles_subtitle {
  border-bottom: solid 1px #ddd;
  padding: 8px;
  font-weight: 500;
}

.selling-price-profiles_content {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: center;
}
@media (min-width: 670px) {
  .selling-price-profiles_content {
    width: 50%;
  }
}

.selling-price-profile_form {
  width: 100%;
}

.logo-image {
  width: 50%;
  height: auto;
}

.spp-activation-page {
  background: rgb(238.8, 241.2, 232.8);
}
.spp-activation-page__alert {
  margin: 0 auto;
  max-width: 1440px;
  padding: 24px;
}
.spp-activation-page__container {
  margin: 0 auto;
  max-width: 1440px;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
}
.spp-activation-page__form {
  background: #fff;
  padding: 32px;
  width: 100%;
}
.spp-activation-page__form .spp-activation-page__text-container {
  max-width: 900px;
}
.spp-activation-page__img-container {
  margin: 32px auto;
  padding: 0 32px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.form-text-input__label {
  cursor: pointer;
  color: #161616;
}

.form-text-input__label-text {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  display: block;
  padding-bottom: 8px;
  color: inherit;
}
.form-text-input__label-text--hidden {
  display: none;
}

.form-text-input--text-area {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px;
  color: #161616;
  appearance: none;
  border: 1px solid #b9baba;
  border-radius: 3px;
  background-color: #fff;
}
.form-text-input--text-area:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}
.form-text-input--text-area--full-width {
  width: 100%;
}

.form-text-input__error {
  display: flex;
  flex-wrap: wrap;
  color: #ea6161;
  padding-top: 8px;
}
.form-text-input__error--hidden {
  display: none;
}

.form-text-input__error-icon {
  width: auto;
  height: 1.2em;
  display: inline-block;
  margin-right: 8px;
}

.approval-form-header {
  background: #e4e8da;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 16px 32px;
}

.approval-form-header__address {
  color: #013a14;
  font-weight: 500;
  font-size: 18px;
  margin: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.recommendation__radio-button {
  color: #007e47;
}

.recommendation__text-area-container {
  max-width: 396px;
}

.message-preview {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  background-color: var(--color-background-container-neutral);
  border-color: var(--color-background-container-neutral);
  max-width: 330px;
}

.message-preview__broker-image {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.image-dropzone_label input[type=file] {
  display: none;
}

.image-dropzone_text-container {
  padding: 48px;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px dashed #ddd;
  border-radius: 8px;
  margin: 0;
}
.image-dropzone_text-container:hover {
  background-color: #f4f4f4;
}

.image-dropzone_image-container {
  height: 48px;
  width: auto;
  margin: 24px;
}

.image-dropzone_inner-container {
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 8px;
}

.listing-charge .card {
  color: #013a14;
  display: flex;
  border: 1px solid #b9baba;
  border-radius: 10px;
  padding: 24px;
  margin: 0 0 16px;
  cursor: pointer;
}
.listing-charge .card:has(input:checked) {
  background-color: #e4e8da;
  border-color: #007e47;
}
.listing-charge .card-text {
  margin-left: 32px;
}
.listing-charge input {
  accent-color: #013a14;
}
.listing-charge .invoice-info {
  display: block;
  padding: 8px 0 0;
  font-weight: 400;
}
.listing-charge .confirm-row {
  display: flex;
  justify-content: right;
}
.listing-charge .hcl-checkbox__input {
  opacity: 1;
  appearance: auto;
}
.listing-charge .hcl-checkbox__icon {
  z-index: 2;
}

.login-page {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 768px) {
  .login-page {
    grid-template-columns: 1fr 1fr;
  }
}

.login-page__content-area-padding {
  padding: 16px;
}

body.broker-stats.search .content-primary {
  background-color: inherit;
  padding: 0;
}

body.broker-stats.search .subscription-info {
  max-width: none;
  margin: 0;
}

.landing-intro {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}
.landing-intro ul {
  width: 70%;
  margin: 0.5em auto;
}
@media only screen and (max-width: 640px) {
  .landing-intro ul {
    width: 100%;
  }
}
@media only screen and (max-width: 640px) {
  .landing-intro {
    width: 100%;
  }
}

.landing-list li {
  font-size: 1.25em;
}
.landing-list li::before {
  font-family: FontAwesome;
  content: "\f00c ";
}

.landing-download-icon {
  font-size: 5em;
  color: #ddd;
  margin-left: 1em;
}

.subscription-offer {
  margin: 1%;
  padding: 1em;
  border: 2px solid #ddd;
}
.subscription-offer.single {
  background-color: #fffef8;
  width: 97%;
}
.subscription-offer.single .info-container {
  margin-left: auto;
  margin-right: auto;
  width: 45%;
}
.subscription-offer.single .expired-info-container {
  width: 65%;
}
.subscription-offer.aligned {
  position: relative;
  min-height: 170px;
  width: 48%;
  float: left;
}
.subscription-offer.aligned .btn {
  position: absolute;
  bottom: 0.5em;
  right: 1.5em;
  width: 88%;
}

.subscription-signup {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

.form-header,
.search-header {
  margin-bottom: 12px;
  font-weight: 500;
  display: block;
  font-size: 18px;
  line-height: 24px;
}

.statistics-filter {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.statistics-filter__section {
  flex: 0 0 100%;
}
@media only screen and (min-width: 768px) {
  .statistics-filter__section {
    flex: 0 0 auto;
  }
}
.statistics-filter__section + .statistics-filter__section {
  margin: 8px 0 0;
}
@media only screen and (min-width: 768px) {
  .statistics-filter__section + .statistics-filter__section {
    margin: 0 0 0 8px;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.property-page__property-visits {
  margin-bottom: 8px;
  padding-bottom: 8px;
  font-weight: 500;
}

.property-page-user-stats::before, .property-page-user-stats::after {
  content: "";
  display: table;
}
.property-page-user-stats::after {
  clear: both;
}

@media only screen and (min-width: 480px) {
  .property-page-user-stats__item {
    width: 33.333333%;
    float: left;
  }
}

.property-page__project-properties-box {
  position: relative;
}
.property-page__project-properties-box + .property-page__project-properties-box {
  margin-top: 32px;
}

.property-page__project-properties-heading {
  font-weight: 500;
  text-transform: none;
}

.property-page__project-properties-row::before, .property-page__project-properties-row::after {
  content: "";
  display: table;
}
.property-page__project-properties-row::after {
  clear: both;
}
.property-page__project-properties-row + .property-page__project-properties-row {
  border-top: 1px solid #f4f4f4;
}

.property-page__property-stats-dl-heading {
  margin-top: 16px;
  font-weight: 500;
}

.property-page__property-stats-dl {
  border-top: 1px solid #ddd;
  padding-top: 8px;
  margin-top: 8px;
}
.property-page__property-stats-dl::before, .property-page__property-stats-dl::after {
  content: "";
  display: table;
}
.property-page__property-stats-dl::after {
  clear: both;
}

@media only screen and (min-width: 480px) {
  .property-page__property-main-dl .property-page__description-wrapper {
    width: 33.333333%;
    float: left;
  }
}
@media only screen and (min-width: 480px) {
  .property-page__property-stats-dl .property-page__description-wrapper {
    width: 20%;
    float: left;
  }
}
.property-page__property-main-dl .property-page__description-wrapper + .property-page__description-wrapper, .property-page__property-stats-dl .property-page__description-wrapper + .property-page__description-wrapper {
  margin-top: 8px;
}
@media only screen and (min-width: 480px) {
  .property-page__property-main-dl .property-page__description-wrapper + .property-page__description-wrapper, .property-page__property-stats-dl .property-page__description-wrapper + .property-page__description-wrapper {
    margin: 0;
  }
}

.property-page__description-list-key {
  font-size: 14px;
  color: #888;
}
@media only screen and (min-width: 480px) {
  .property-page__property-stats-dl .property-page__description-list-key {
    display: none;
  }
}

.property-page__description-list-value {
  text-overflow: ellipsis;
  overflow: hidden;
}

.property-page__icon {
  font-size: 14px;
}
.property-page__icon::before {
  font-family: "Font Awesome 6 Free";
  font-size: 16px;
  width: 16px;
  display: inline-block;
  margin-right: 4px;
}

.property-page__icon--chart-bar::before {
  content: "\f080";
}

.property-page__icon--calendar-check::before {
  content: "\f274";
}

.property-page__icon--heart::before {
  content: "\f004";
}

.property-page__icon--bell::before {
  content: "\f0f3";
}

.property-page__icon--envelope::before {
  content: "\f0e0";
}

.property-page__icon--phone::before {
  content: "\f879";
  font-weight: bold;
}

.property-page__icon--comment-dots::before {
  content: "\f4ad";
}

.property-page__icon--check::before {
  color: #39aa35;
  content: "\f00c";
  font-weight: bold;
}

.property-page__icon--minus::before {
  color: #ff6800;
  content: "\f068";
  font-weight: bold;
}

.property-page__icon--close::before {
  color: #f01818;
  content: "\f00d";
  font-weight: bold;
}

.property-page__sellers-page__heading {
  font-weight: 500;
  margin-bottom: 5px;
}

.property-page__sellers-page__web-address-container {
  margin-top: 20px;
}

@media only screen and (min-width: 768px) {
  .property-page__sellers-page__web-address-input-wrapper {
    width: 72%;
  }
}
@media only screen and (min-width: 960px) {
  .property-page__sellers-page__web-address-input-wrapper {
    width: 62%;
  }
}

.property-page__sellers-page__web-address-button {
  display: inherit;
  margin: -15px 0 25px;
}

.property-page__video-input {
  max-width: 160px;
}
@media only screen and (min-width: 768px) {
  .property-page__video-input {
    margin-left: 4px;
  }
}

.property-page__3d-input {
  max-width: 260px;
}

.property-page__video-input-container + .property-page__video-input-container {
  margin: 24px 0;
}
.property-page__video-input-container .hint {
  margin-top: 0;
}

.property-page__video-input-wrapper {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

@media only screen and (min-width: 768px) {
  .property-page__republish {
    align-items: flex-start;
    display: flex;
  }
}

.property-page__unit-table-header {
  display: none;
}
@media only screen and (min-width: 960px) {
  .property-page__unit-table-header {
    display: grid;
    grid-template-columns: 4fr repeat(2, 2fr) repeat(2, 3fr) 4fr;
  }
}
@media only screen and (min-width: 960px) {
  .property-page__unit-table-header > div:first-child {
    width: 300px;
    overflow: hidden;
  }
}
.property-page__unit-table-header .light-header {
  color: #676767;
}

.property-page__unit-table-row {
  font-size: 14px;
  border-bottom: 1px solid rgb(233.4, 236.6, 225.4);
  height: max-content;
  padding: 16px 0;
}
@media only screen and (min-width: 960px) {
  .property-page__unit-table-row {
    grid-template-columns: 4fr 10fr 4fr;
    font-size: 16px;
  }
}
@media only screen and (min-width: 960px) {
  .property-page__unit-table-row > div:first-child {
    width: 300px;
    overflow: hidden;
  }
}
.property-page__unit-table-row > div img {
  display: block;
  border-radius: 8px;
  object-fit: cover;
  width: 123px;
  height: 76px;
}
@media only screen and (min-width: 960px) {
  .property-page__unit-table-row > div img {
    max-width: 129px;
    height: 116px;
  }
}
.property-page__unit-table-row .info-row div {
  padding: 4px 0;
}
.property-page__unit-table-row .info-row-featured div {
  padding: 16px 0;
}
@media only screen and (min-width: 960px) {
  .property-page__unit-table-row .info-row div,
  .property-page__unit-table-row .info-row-featured div {
    margin: 0;
    padding: 0;
  }
}
.property-page__unit-table-row .info-row-featured {
  grid-template-columns: repeat(2, 2fr) repeat(2, 3fr);
}
@media only screen and (min-width: 960px) {
  .property-page__unit-table-row .info-row-featured,
  .property-page__unit-table-row .info-row {
    grid-template-columns: repeat(2, 2fr) repeat(2, 3fr);
  }
}

.property-page__detail-title {
  font-weight: 500;
  width: 123px;
}
@media only screen and (min-width: 960px) {
  .property-page__detail-title {
    font-weight: 400;
    width: max-content;
  }
}

.property-page__placeholder-row {
  padding: 8px 0;
  border-bottom: 0.5px solid rgb(233.4, 236.6, 225.4);
  color: #676767;
}
.property-page__placeholder-row img {
  min-width: 81px;
  height: auto;
  align-self: center;
  margin: 24px;
}
@media only screen and (min-width: 960px) {
  .property-page__placeholder-row div {
    width: max-content;
  }
}

.property-page__placeholder-text {
  align-self: center;
}

.property-page__project_units_list__list_description {
  font-size: 14px;
  color: #676767;
  margin-bottom: 16px;
}

.property-page__label-with-icon {
  display: flex;
  width: max-content;
}
.property-page__label-with-icon .info-icon {
  width: 15px;
  height: 15px;
  margin-left: 8px;
}

.property-page-tooltip__container {
  position: absolute;
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  left: 15%;
  padding: 8px;
  color: #fff;
  background: #67458c;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1;
  z-index: 100;
  top: 20%;
  max-width: 220px;
}
@media (min-width: 990px) {
  .property-page-tooltip__container {
    top: 0;
    max-width: 350px;
    right: 0;
    left: auto;
  }
}

.property-page-tooltip__container--hidden {
  visibility: hidden;
  opacity: 0;
}

.property-page-tooltip__arrow {
  position: absolute;
  margin-left: -12px;
  width: 12px;
  height: 24px;
  top: 35%;
  left: 0;
}
@media (min-width: 990px) {
  .property-page-tooltip__arrow {
    top: 100%;
    right: 10%;
    margin-top: -12px;
    left: auto;
  }
}
.property-page-tooltip__arrow::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 0;
  top: 50%;
  transform: translate(50%, -50%) rotate(-45deg);
  background-color: #67458c;
}

.property-page-tooltip__description {
  padding: 4px 0;
  max-width: 65%;
}
@media (min-width: 990px) {
  .property-page-tooltip__description {
    max-width: 70%;
  }
}

.property-page-tooltip__button {
  align-self: flex-end;
}
.property-page-tooltip__button button {
  color: #fff;
  font-weight: 400;
}
.property-page-tooltip__button button:hover {
  color: #d3dccc;
}

.property-page__disabled-text {
  color: #676767;
}

.after-marketing-section__img-rights-title {
  display: flex;
  flex-wrap: wrap;
}

.after-marketing-section__img-rights-update-date {
  margin-left: 0;
  color: #676767;
  font-size: 14px;
  align-self: end;
}
@media (min-width: 550px) {
  .after-marketing-section__img-rights-update-date {
    margin-left: 16px;
  }
}

.business-subscribe-wrapper {
  width: 100%;
  background-color: #dceed8;
}

.business-subscribe {
  max-width: 1440px;
  margin: 0 auto;
}
.business-subscribe::before, .business-subscribe::after {
  content: "";
  display: table;
}
.business-subscribe::after {
  clear: both;
}

.business-subscribe__section {
  padding-top: 16px;
}
@media only screen and (min-width: 768px) {
  .business-subscribe__section {
    padding-top: 0;
  }
}

.hero-desk {
  margin: 0 auto;
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 960px) {
  .hero-desk {
    width: 80%;
  }
}

.zero-publish-wrapper {
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 960px) {
  .zero-publish-wrapper {
    width: 50%;
  }
}

.business-subscribe__lead {
  text-align: center;
  margin-bottom: 48px;
  width: 100%;
}
@media only screen and (min-width: 960px) {
  .business-subscribe__lead {
    padding-top: 0;
    padding-right: 24px;
    padding-bottom: 0;
    padding-left: 24px;
    padding: 0;
    margin-bottom: 48px;
    font-size: 22px;
    line-height: 40px;
  }
}
@media only screen and (min-width: 960px) and (min-width: 960px) {
  .business-subscribe__lead {
    padding-right: 80px;
    padding-left: 80px;
  }
}

.js-cannot-change-invoice-msg {
  display: block;
  margin-bottom: 16px;
}

.cannot-change-invoice-msg--hidden {
  display: none;
}

.business-invoice__content {
  padding-top: 0;
  padding-right: 24px;
  padding-bottom: 0;
  padding-left: 24px;
  background-color: #f9f7f5;
  border: 1px solid #eae5e1;
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.67);
  padding-top: 80px;
  padding-bottom: 80px;
}
@media only screen and (min-width: 960px) {
  .business-invoice__content {
    padding-right: 80px;
    padding-left: 80px;
  }
}

.business-input.fortnox_customer_orgno {
  width: 100%;
}
@media only screen and (min-width: 960px) {
  .business-input.fortnox_customer_orgno {
    width: 60%;
  }
}

.business-invoice__form-wrapper {
  margin-bottom: 24px;
}

.business-select-dropdown {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}
@media only screen and (min-width: 480px) {
  .business-select-dropdown {
    width: 320px;
  }
}
@media only screen and (min-width: 960px) {
  .business-select-dropdown {
    margin-bottom: 40px;
  }
}

.business-invoice__submit-button-wrapper {
  display: block;
  text-align: right;
  margin-bottom: 32px;
}

.business-invoice__submit-button-wrapper--hidden {
  display: none;
}

.business-invoice__footer {
  padding-top: 48px;
  border-top: 2px dotted rgba(151, 151, 151, 0.5);
}

.business-invoice__start-subscription-wrapper {
  text-align: right;
}

.business-postal-wrapper {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.business-postal-wrapper__zipcode {
  flex: 0 1 auto;
  width: 100%;
  margin-right: 0;
}
@media only screen and (min-width: 1024px) {
  .business-postal-wrapper__zipcode {
    width: 32%;
    margin-right: 2%;
  }
}

.business-postal-wrapper__postal-city {
  flex: 0 1 auto;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .business-postal-wrapper__postal-city {
    width: 65%;
  }
}

.business-invoice__info-container + .business-invoice__info-container {
  margin-top: 16px;
}

.business-invoice__info {
  margin-bottom: 0;
}

.business-invoice__info--key {
  color: #777;
}

.business-invoice__info--value {
  font-weight: bold;
}

.business-confirmation-wrapper {
  width: 100%;
  box-shadow: inset 0 5px 15px -5px rgba(0, 0, 0, 0.1);
  background-color: #dceed8;
  font-size: 14px;
  text-align: center;
}
@media only screen and (min-width: 960px) {
  .business-confirmation-wrapper {
    font-size: 18px;
    line-height: 30px;
    text-align: left;
  }
}

.business-confirmation {
  max-width: 1440px;
  margin: 0 auto;
}
.business-confirmation::before, .business-confirmation::after {
  content: "";
  display: table;
}
.business-confirmation::after {
  clear: both;
}

.business-confirmation__paragraph-wrapper {
  width: 100%;
}
@media only screen and (min-width: 960px) {
  .business-confirmation__paragraph-wrapper {
    width: 75%;
  }
}

.business-confirmation__product-name {
  color: #37ab35;
}

.business-confirmation__desk-image {
  padding-left: 0;
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 480px) {
  .business-confirmation__desk-image {
    padding-left: 32px;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
@media only screen and (max-width: 767px) {
  .hcl-grid__item-md-span-5 {
    order: -1;
  }
}
.pre-reservation__break-out-section {
  padding: 40px 0;
  background-color: #d3dccc;
  border-radius: 8px;
  padding-left: 16px;
  padding-right: 16px;
}
@media only screen and (min-width: 768px) {
  .pre-reservation__break-out-section {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media only screen and (min-width: 960px) {
  .pre-reservation__break-out-section {
    padding-left: 56px;
    padding-right: 56px;
  }
}
@media only screen and (min-width: 1281px) {
  .pre-reservation__break-out-section {
    padding-left: 72px;
    padding-right: 72px;
  }
}
.pre-reservation__break-out-section .hcl-button {
  display: inline-block;
  width: auto;
}
@media only screen and (max-width: 480px) {
  .pre-reservation__break-out-section .hcl-button {
    width: 100%;
  }
}

.pre-reservation__centered-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pre-reservation__centered-container img {
  min-width: 100%;
}

.pre-reservation__centered-container h3 {
  margin-bottom: 8px !important;
}

.pre-reservation__break-out-section .hcl-link {
  color: #013a14;
}

.pre-reservation__text-centered {
  text-align: left;
}

.pre-reservation__text-centered .hcl-link {
  color: #013a14;
}

.pre-reservation__list-icon,
.pre-reservation__link {
  display: inline-block;
  vertical-align: middle;
  padding-top: 7px;
}

.icon-image {
  width: 24px;
  height: auto;
}

.pre-reservation__list {
  display: flex;
  flex-direction: column;
}

.pre-reservation__list-item {
  display: flex;
}

.pre-reservation__list-content {
  margin: 0;
  padding-top: 8px;
}

.pre-reservation__list-icon {
  color: #39aa35;
  text-align: center;
  flex: 0 1 auto;
  font-size: 24px;
  width: 32px;
  margin-right: 16px;
}
.pre-reservation__list-icon.pdf-icon {
  color: #f01818;
}

.cmore-new-wrapper {
  width: 100%;
}

.cmore-new {
  max-width: 1440px;
  margin: 0 auto;
  max-width: 968px;
  padding-top: 40px;
  padding-bottom: 80px;
  padding-left: 32px;
  padding-right: 32px;
}
.cmore-new::before, .cmore-new::after {
  content: "";
  display: table;
}
.cmore-new::after {
  clear: both;
}

.cmore-new__content {
  padding-top: 0;
  padding-right: 24px;
  padding-bottom: 0;
  padding-left: 24px;
  background-color: #fff;
  border-radius: 8px;
  padding-top: 48px;
  padding-bottom: 48px;
}
@media only screen and (min-width: 960px) {
  .cmore-new__content {
    padding-right: 80px;
    padding-left: 80px;
  }
}
@media only screen and (min-width: 960px) {
  .cmore-new__content {
    padding-left: 112px;
    padding-right: 112px;
  }
}

.cmore-image {
  width: 205px;
  margin: 0 auto;
}

.business-select-dropdown {
  margin-left: 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.cmore-campaign {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.cmore-icon-text-item {
  display: flex;
  flex-direction: row;
  margin: 8px 0;
}

.cmore-icon-text-item--icon {
  height: 12px;
  min-width: 12px;
  background-color: #007e47;
  border-radius: 50%;
  color: #fff;
  box-sizing: content-box;
  padding: 4px;
  line-height: 16px;
  margin-right: 8px;
  font-size: 14px;
}

.cmore-icon-text-item__text {
  max-width: 218px;
  font-size: 14px;
}

.cmore-campaign__card {
  width: 280px;
}

.cmore-campaign__card--active {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}

.cmore-campaign__card--wide {
  width: 692px;
}

.cmore-campaign__card--wide .cmore-icon-text-item__text {
  max-width: 593px;
}

.cmore-campaign__label {
  font-size: 14px;
  background-color: rgba(146, 188, 223, 0.6);
  position: absolute;
  top: 0;
  right: 16px;
  display: inline;
  padding: 4px 8px;
  border-radius: 0 0 6px 6px;
}

.cmore-campaign__rebate {
  color: #676767;
  font-size: 16px;
  font-weight: 400;
  font-family: "Roboto", Arial, sans-serif;
}

.cmore-campaign__offer {
  height: 80px;
}

.cmore-campaign__strikethrough {
  font-weight: 400;
  color: #676767;
  font-family: "Roboto", Arial, sans-serif;
}

.submit-button-wrapper {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.delete-scaled-image-button {
  display: none;
}

.project-email-subscription__accordion {
  overflow: hidden;
}
.project-email-subscription__accordion-item__label {
  display: flex;
  font-size: 16px;
  cursor: pointer;
}
.project-email-subscription__accordion-item__content {
  max-height: 0;
  transition: all 0.35s;
  padding-left: 4px;
}
.project-email-subscription__accordion-item input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.project-email-subscription__accordion-item input:checked + .project-email-subscription__accordion-item__label .hcl-icon {
  transform: rotate(180deg);
}
.project-email-subscription__accordion-item input:checked ~ .project-email-subscription__accordion-item__content {
  max-height: 100%;
}

.project-email-subscription__deactivated-option {
  color: #676767;
}

.chevron-down-icon {
  vertical-align: middle;
  margin-left: 4px;
}
.chevron-down-icon svg {
  width: 16px;
  height: 16px;
}

@keyframes wiggle {
  0% {
    margin-right: 0;
  }
  25% {
    margin-right: -4px;
  }
  50% {
    margin-right: 0;
  }
  75% {
    margin-right: -4px;
  }
}
.statistics-cards {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
@supports (display: grid) {
  .statistics-cards {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr;
  }
}

@supports (display: grid) {
  @media only screen and (min-width: 768px) {
    .statistics-cards--kpi {
      grid-template-columns: 1fr 2fr 2fr;
    }
  }
}

@supports (display: grid) {
  .statistics-cards--ads {
    align-items: end;
  }
  @media only screen and (min-width: 768px) {
    .statistics-cards--ads {
      grid-template-columns: 1fr 1fr;
    }
  }
}

.statistics-cards__card {
  border-radius: 3px;
  padding: 24px;
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
  background-color: #e4e8da;
  font-family: "Roboto", Arial, sans-serif;
  flex-grow: 1;
  margin-bottom: 8px;
}
.statistics-cards__card + .statistics-cards__card {
  margin-left: 0;
}
@media only screen and (min-width: 768px) {
  .statistics-cards__card + .statistics-cards__card {
    margin-left: 16px;
  }
}
@supports (display: grid) {
  .statistics-cards__card {
    margin-bottom: 0;
  }
  .statistics-cards__card + .statistics-cards__card {
    margin-left: 0;
  }
}
.statistics-cards--kpi .statistics-cards__card:nth-child(1) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.2s;
}
.statistics-cards--kpi .statistics-cards__card:nth-child(2) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.3s;
}
.statistics-cards--kpi .statistics-cards__card:nth-child(3) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.4s;
}
.statistics-cards--kpi .statistics-cards__card:nth-child(4) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.5s;
}
.statistics-cards--ads .statistics-cards__card:nth-child(1) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.2s;
}
.statistics-cards--ads .statistics-cards__card:nth-child(2) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.3s;
}
.statistics-cards--ads .statistics-cards__card:nth-child(3) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.4s;
}

.statistics-cards__card--clickable-icon {
  display: none;
}
.statistics-cards__card--clickable-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  margin-right: 8px;
  content: "\f054";
  color: inherit;
  font-size: inherit;
}
.statistics-cards__card--clickable-icon::before {
  transition: all 100ms ease-in-out;
  margin-right: 0;
}
.statistics-cards__card--clickable .statistics-cards__card--clickable-icon {
  display: inline;
}

.statistics-cards__card--clickable {
  transition: all 100ms ease-in-out;
}
.statistics-cards__card--clickable:focus, .statistics-cards__card--clickable:hover {
  cursor: pointer;
  box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.2);
}
.statistics-cards__card--clickable:focus .statistics-cards__card--clickable-icon::before, .statistics-cards__card--clickable:hover .statistics-cards__card--clickable-icon::before {
  animation: wiggle 600ms ease-in-out;
}

.visits-card-content {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  height: 100%;
}

.statistics-cards__content-row {
  display: flex;
  justify-content: space-between;
}

.statistics-cards__content-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 15%;
}
.statistics-cards__content-column + .statistics-cards__content-column {
  margin-left: 8px;
}

.kpi-label {
  margin-bottom: 8px;
  color: #013a14;
}

.statistics-cards__kpi-value {
  font-size: 18px;
}
.statistics-cards--kpi .statistics-cards__kpi-value {
  margin-bottom: 8px;
}
.statistics-cards--ads .statistics-cards__kpi-value {
  margin-bottom: 0;
}

.previous-kpi-label {
  color: #656565;
  font-size: 14px;
  margin-bottom: 0;
}

.previous-kpi {
  margin-bottom: 0;
}

.kpi-superuser {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
}
.kpi-superuser::before, .kpi-superuser::after {
  content: "\f21b";
  color: #ff6800;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.vimeo-player {
  max-width: 100%;
  max-height: 100%;
}

.toplisting-blurb {
  display: flex;
  padding: 32px;
}

.toplisting-blurb__body {
  flex: 0 1 auto;
  color: #013a14;
}
@media only screen and (min-width: 768px) {
  .toplisting-blurb__body {
    padding-right: 32px;
  }
}

.toplisting-blurb__image-container {
  display: none;
}
@media only screen and (min-width: 768px) {
  .toplisting-blurb__image-container {
    display: block;
    flex: 1 0 30%;
  }
}

.toplisting-blurb__image {
  width: auto;
  height: 100%;
}

.republish-ad-blurb {
  padding: 32px;
}

.republish-ad-blurb__section {
  align-items: center;
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .republish-ad-blurb__section {
    justify-content: start;
  }
}
.republish-ad-blurb__section + .republish-ad-blurb__section {
  margin-top: 24px;
}
@media only screen and (min-width: 768px) {
  .republish-ad-blurb__section + .republish-ad-blurb__section {
    margin-top: 40px;
  }
}

.republish-ad-blurb__body {
  flex: 0 1 auto;
}
@media only screen and (min-width: 480px) {
  .republish-ad-blurb__body {
    padding: 0 0 0 32px;
  }
  .republish-ad-blurb__section:nth-child(odd) .republish-ad-blurb__body {
    padding: 0 32px 0 0;
  }
}

.republish-ad-blurb__image-container {
  display: none;
}
@media only screen and (min-width: 480px) {
  .republish-ad-blurb__image-container {
    display: block;
    flex: 1 0 100px;
  }
}
@media only screen and (min-width: 768px) {
  .republish-ad-blurb__image-container {
    flex: 1 0 200px;
  }
}
.republish-ad-blurb__section:nth-child(odd) .republish-ad-blurb__image-container {
  order: 2;
}

.packages-image {
  max-width: 320px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .packages-image {
    max-width: 100%;
  }
}

.product-table-button-icon {
  height: 12px;
  display: inline-block;
  margin-left: 8px;
}

.product-table {
  position: relative;
  width: 100%;
  margin-top: 40px;
}
@media (min-width: 670px) {
  .product-table {
    margin-top: 64px;
  }
}

.product-table__header {
  z-index: 1;
  padding-top: 12px;
  top: 0;
  position: sticky;
  background-color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 670px) {
  .product-table__header {
    padding-top: 16px;
  }
}

.product-table__body {
  margin-bottom: 24px;
  text-align: center;
}
@media (min-width: 670px) {
  .product-table__body {
    margin-bottom: 32px;
    text-align: left;
  }
}

.product-table__header-row {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 670px) {
  .product-table__header-row {
    justify-content: flex-end;
  }
}

.product-table__header-item {
  display: flex;
  justify-content: center;
  flex: 0 0 28%;
  padding-bottom: 8px;
}
@media (min-width: 670px) {
  .product-table__header-item {
    flex-basis: 18%;
    margin-left: 32px;
    padding-bottom: 16px;
  }
}

.product-table__header-promotion--align-with-column-3 {
  left: -180%;
}
@media (min-width: 400px) {
  .product-table__header-promotion--align-with-column-3 {
    left: -150%;
  }
}
@media (min-width: 670px) {
  .product-table__header-promotion--align-with-column-3 {
    left: -90%;
  }
}

.product-table__header-promotion--align-with-column-2 {
  left: -70%;
}
@media (min-width: 400px) {
  .product-table__header-promotion--align-with-column-2 {
    left: -60%;
  }
}
@media (min-width: 670px) {
  .product-table__header-promotion--align-with-column-2 {
    left: -50%;
  }
}

.product-table__product-description-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
@media (min-width: 670px) {
  .product-table__product-description-row {
    margin-bottom: 24px;
    justify-content: flex-end;
  }
}

.product-table__product-description-item {
  flex: 0 0 28%;
  text-align: center;
  border-bottom: 1px solid #ddd;
  margin-top: 8px;
  padding-bottom: 8px;
}
@media (min-width: 670px) {
  .product-table__product-description-item {
    text-align: left;
    flex-basis: 18%;
    margin-top: 16px;
    margin-left: 32px;
    padding-bottom: 16px;
  }
}

.product-table__product-description-extra {
  font-size: 12px;
  font-style: italic;
  color: #333;
  margin: 4px 0 0;
}

.product-table__body-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 16px;
}
@media (min-width: 670px) {
  .product-table__body-row {
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 0;
  }
}

.product-table__description {
  width: 100%;
  line-height: 1.5;
  text-align: center;
  margin: 4px 0 8px;
}
@media (min-width: 670px) {
  .product-table__description {
    width: auto;
    flex-grow: 1;
    text-align: left;
    margin: 0;
  }
}
.product-table__description:first-child {
  margin-top: 0;
}

.product-table__feature-flag {
  flex: 0 0 28%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}
@media (min-width: 670px) {
  .product-table__feature-flag {
    flex-basis: 18%;
    margin-left: 32px;
    min-height: 56px;
  }
}

.product-table__feature-flag--highlight {
  background-color: #e4e8da;
}

.product-table__feature-flag--limited-offer {
  background-color: #67458c;
}

.product-table__icon {
  height: 24px;
  color: #b9baba;
}
.product-table__feature-flag--highlight .product-table__icon {
  color: #0bb70b;
}

.product-table__text {
  color: #fff;
  margin: 0;
  padding: 0 8px;
  text-align: center;
  font-size: 12px;
}
@media (min-width: 1040px) {
  .product-table__text {
    font-size: 14px;
    padding: 0 16px;
  }
}

.product-label-container {
  display: inline-block;
  margin-right: 4px;
}

.listing-card-images {
  display: flex;
  justify-content: center;
}

.listing-card-images__large {
  flex: 0 1 auto;
  display: none;
}
@media only screen and (min-width: 768px) {
  .listing-card-images__large {
    display: block;
  }
}

.listing-card-images__small {
  flex: 0 1 auto;
  display: block;
}
@media only screen and (min-width: 768px) {
  .listing-card-images__small {
    display: none;
  }
}

.package-features {
  display: grid;
  grid-gap: 24px;
  grid-template-columns: initial;
}
@media only screen and (min-width: 768px) {
  .package-features {
    grid-template-columns: repeat(2, [col-start] 1fr);
  }
}

.package-feature {
  display: flex;
}

.package-feature__image {
  flex: 0 1 100px;
}

.package-feature__body {
  flex: 1;
  padding-left: 16px;
}

.package-feature--main .package-feature__image,
.package-feature--main .package-feature__body {
  flex: 0 1 50%;
}

.package-feature-modal-image {
  align-items: flex-end;
  background-color: #e4e8da;
  display: flex;
  justify-content: center;
  padding: 16px;
}

.package-feature-modal-image__labeled-image {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.free-renewal-offer {
  grid-column: 1/-1;
}

.free-renewal-offer__terms {
  font-size: 14px;
  font-weight: 400;
}

@media (min-width: 990px) {
  .free-renewal-offer__terms--mobile {
    display: none;
  }
}

.free-renewal-offer__terms--desktop {
  display: none;
}
@media (min-width: 990px) {
  .free-renewal-offer__terms--desktop {
    display: inline-block;
    padding-left: 4px;
  }
}

.new_construction__listing-preview-caption {
  font-size: 14px;
  font-style: italic;
}

.new_construction__listing-preview--desktop {
  display: none;
}
@media (min-width: 670px) {
  .new_construction__listing-preview--desktop {
    display: block;
  }
}

.new_construction__listing-preview--mobile {
  display: block;
}
@media (min-width: 670px) {
  .new_construction__listing-preview--mobile {
    display: none;
  }
}

.new_construction__listing-preview-container {
  display: flex;
}

.new_construction__listing-preview-side-image {
  display: none;
  align-self: center;
  min-width: 40%;
  margin-left: 50px;
}
@media (min-width: 670px) {
  .new_construction__listing-preview-side-image {
    display: block;
  }
}

.new_construction__listing-preview-subtitle {
  text-align: center;
  font-size: 16px;
}

.new_construction__external-link {
  font-weight: 500;
  color: #013a14;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  text-decoration: none;
}
.new_construction__external-link:visited {
  color: #67458c;
}
.new_construction__external-link[href^="#"]:visited {
  color: #013a14;
}
.new_construction__external-link:hover {
  color: #161616;
}
.new_construction__external-link:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 126, 71, 0.5);
}
.new_construction__external-link:active {
  color: #67458c;
}
.hcl-text-container > .new_construction__external-link {
  display: inline-block;
}
.new_construction__external-link:hover {
  text-decoration: none;
}

.new_construction__external-link-label {
  text-decoration: underline;
}
.new_construction__external-link-label:hover {
  text-decoration: underline;
}

.new_construction__package-table {
  border: 1px solid #013a14;
  background-color: #e4e8da;
}

.new_construction__package-table-mobile {
  border: 0;
  background-color: #e4e8da;
  table-layout: fixed;
}

.new_construction__package-table-cell {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 14px;
  background-color: #e4e8da;
  border: 1px solid #013a14;
  color: #013a14;
  padding: 8px;
  text-align: left;
  width: 190px;
}

.new_construction__package-table-cell--heading {
  font-weight: 500;
  font-family: "Hemnet Bonad", Georgia, "Times New Roman", Times, serif;
}

.new_construction__package-table-cell--subheading {
  font-weight: 500;
  font-family: "Roboto", Arial, sans-serif;
}

.new_construction__package-table-mobile-cell {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 14px;
  background-color: rgb(239.8, 239.8, 239.8);
  border: 2px solid #fff;
  color: #013a14;
  padding: 8px;
  text-align: left;
  width: 100px;
}

.new_construction__package-table-mobile-cell--heading {
  font-weight: 500;
  background-color: #e4e8da;
  font-size: 16px;
  padding-left: 0;
}

.new_construction__package-table-caption {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  color: #013a14;
  line-height: 1.2;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  text-align: left;
}
@media (min-width: 670px) {
  .new_construction__package-table-caption {
    font-size: 20px;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.republish__description {
  margin-right: 16px;
  margin-bottom: 24px;
}

.republish__handle-payment {
  flex: 1 0 calc(50% - 32px);
}
@media only screen and (min-width: 768px) {
  .republish__handle-payment {
    margin-left: 32px;
  }
}

.republish__box {
  border-radius: 8px;
  background-color: #e4e8da;
  padding: 16px;
}

.republish__overlay_background {
  min-height: 250px;
}

.republish-payment-email-status {
  font-size: 12px;
  margin: 8px 0 16px;
}

.republish__price-information,
.republish__benefits {
  display: grid;
  flex: 1 0 45%;
  grid-row-gap: 4px;
  margin-bottom: 24px;
}
.republish__price-information:last-child,
.republish__benefits:last-child {
  margin-bottom: 0;
}

.republish__price-information {
  grid-template-columns: 40% auto;
}

.republish__benefits {
  grid-template-columns: 40% repeat(2, 1fr);
}

.republish-price-information__header {
  font-weight: 500;
  grid-column: 1/-1;
}

.republish-price-information__inserted,
.republish-price-information__deleted {
  text-decoration: none;
}

.republish-price-information__deleted {
  position: relative;
  white-space: nowrap;
}
.republish-price-information__deleted::before {
  content: "";
  display: block;
  width: 100%;
  border-top: 2px solid #ea6161;
  height: 51%;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(-12deg);
}

.republish-pending-information {
  align-items: flex-start;
  display: flex;
}

.republish-pending-information__image {
  margin-right: 24px;
  padding-top: 8px;
}

.republish-unavailable {
  position: relative;
}

.republish-unavailable__overlay {
  align-items: center;
  background-color: rgba(22, 22, 22, 0.8);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  border-radius: 3px;
}

.republish-unavailable-overlay__message {
  background-color: #fff;
  margin-left: 24px;
  margin-right: 24px;
  padding: 24px;
  border-radius: 8px;
}

.republish-unavailable-message__title {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 8px;
}

.republish-unavailable-message__text--nowrap {
  white-space: nowrap;
}

.republish-payment-received__image-container {
  display: flex;
  align-items: center;
  height: 100%;
}

.republish-payment-received__image {
  transform: scaleX(-1);
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.detailed-statistics-container {
  width: 400px;
  font-family: "Roboto", Arial, sans-serif;
}

@supports (display: grid) {
  .detailed-statistics-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
}

.detailed-statistics-list__row {
  margin-bottom: 8px;
}
@supports (display: grid) {
  .detailed-statistics-list__row {
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 8px;
    margin-bottom: 0;
  }
}

.detailed-statistics-value {
  font-size: 18px;
}

.detailed-statistics-icon {
  font-size: 14px;
}
.detailed-statistics-icon::before {
  font-family: "Font Awesome 6 Free";
  font-size: 16px;
  width: 16px;
  display: inline-block;
  margin-right: 8px;
  margin-left: 16px;
}
@supports (display: grid) {
  .detailed-statistics-icon::before {
    margin-left: 0;
  }
}

.detailed-statistics-icon--envelope::before {
  content: "\f0e0";
}

.detailed-statistics-icon--phone::before {
  content: "\f879";
  font-weight: bold;
}

.detailed-statistics-icon--comment-dots::before {
  content: "\f4ad";
}

.detailed-statistics-icon--calendar-check::before {
  content: "\f274";
}

.detailed-statistics-icon--heart::before {
  content: "\f004";
}

.detailed-statistics-icon--comments::before {
  content: "\f086";
}

.detailed-statistics-icon--clipboard-list::before {
  content: "\f46d";
  font-weight: bold;
}

.detailed-statistics-icon--bell::before {
  content: "\f0f3";
}

.detailed-statistics-fade-in:nth-child(1) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.2s;
}
.detailed-statistics-fade-in:nth-child(2) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.3s;
}
.detailed-statistics-fade-in:nth-child(3) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.4s;
}
.detailed-statistics-fade-in:nth-child(4) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.5s;
}
.detailed-statistics-fade-in:nth-child(5) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.6s;
}
.detailed-statistics-fade-in:nth-child(6) {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0.7s;
}

.fetch-more-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-listings-search-button {
  align-items: flex-end;
  display: flex;
  height: 100%;
}

.project-listings-select-sort {
  display: flex;
  justify-content: flex-end;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.property-listing-invoice__form {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-top: 0;
  border: 1px solid #b9baba;
  padding: 16px;
}
.property-listing-invoice__form .hcl-radiobutton,
.property-listing-invoice__form .hcl-hint__icon {
  line-height: 1;
}

.property-listing-invoice__payment-options {
  list-style-type: disc;
  padding-left: 20px;
}

.property-listing-invoice__payment-options-image {
  padding-left: 20px;
}

.property-listing-invoice__form-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}

.property-listing-invoice__form-footer--single-button {
  justify-content: flex-end;
}

.property-listing-invoice-form-header {
  background: #e4e8da;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 14px;
  padding: 16px;
}

.property-listing-invoice-form-header__address {
  border-radius: 8px;
  color: #013a14;
  display: inline-block;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 18px;
  padding: 4px 0;
}

.property-listing-invoice__social-security-alert {
  margin-bottom: 16px;
  margin-top: 16px;
}

.property-listing-invoice__form-row {
  display: flex;
  justify-content: space-between;
  flex: 1 1 100%;
}

.property-listing-invoice__form-col {
  flex: 1;
}

.property-listing-invoice__form-col-small {
  flex: 0 0 33%;
  margin-right: 8px;
}

.property-listing-invoice__form-col-medium {
  flex: 1 0 66%;
  margin-right: 8px;
}

.form-stack > * + * {
  margin-top: 16px;
}

.form-stack--small > * + * {
  margin-top: 8px;
}

.property-listing-invoice-form-header__title {
  font-size: 28px;
  font-weight: 600;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.approval-form {
  border-left: 1px solid #b9baba;
  border-right: 1px solid #b9baba;
  border-bottom: 1px solid #b9baba;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0s;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.hemnet-business-image-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hemnet-business-image_container__image {
  max-height: 240px;
  width: auto;
}

.hemnet-business-padded-section {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 40px;
  padding-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .hemnet-business-padded-section {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media only screen and (min-width: 960px) {
  .hemnet-business-padded-section {
    padding-left: 56px;
    padding-right: 56px;
  }
}
@media only screen and (min-width: 1281px) {
  .hemnet-business-padded-section {
    padding-left: 72px;
    padding-right: 72px;
  }
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  animation: fade-in 300ms forwards ease-in;
  animation-delay: 0s;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.project-subscription__image {
  max-height: 165px;
}

.project-subscription__list {
  max-width: 720px;
}

.project-subscription__clarification {
  font-size: 14px;
  color: #676767;
  font-style: italic;
}

.project-subscription__highlighted-container {
  background-color: rgb(238.8, 241.2, 232.8);
  padding: 16px;
  border-radius: 4px;
}

.project-subscription__list-container {
  display: flex;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.product-request_form-container {
  padding: 40px 32px;
}

.product-request_form-header {
  text-align: center;
}

@media (min-width: 670px) {
  .product-request_form {
    margin: 0 25%;
  }
}

.product-request_selected-area-list {
  display: flex;
  flex-wrap: wrap;
}

.product-request_selected-area-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border-radius: 24px;
  padding: 0 0 0 16px;
  margin: 8px 8px 8px 0;
}

/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.smart-sales-exposure_faq-header {
  display: flex;
  justify-content: center;
  margin: 0 0 24px 0;
}

.smart-sales-exposure_hero-checklist-item {
  line-height: 1.4;
}

@media (min-width: 670px) {
  .smart-sales-exposure_faq-header {
    margin: 32px 0;
  }
  .smart-sales-exposure_hero-checklist-item {
    font-size: large;
  }
}
.smart-sales-exposure_hero-image-container {
  display: none;
}

@media (min-width: 1040px) {
  .smart-sales-exposure_hero-image-container {
    display: flex;
  }
  .smart-sales-exposure_hero-image-container img {
    width: 700px;
    max-height: 330px;
  }
}
/**
* This mixin is used to add responsivity with dynamic css properties. I.e. Properties that don't have a defined set of values and can take any value such as width and height.
* IMPORTANT: Always generate this in a css class which is the container of your component. Never on :root as that means your components will overwrite each others values.
*
* $dynamicProperties: A map of all the css properties you want to generate responsive classes for. Example value: (width, height, flex);
*
* See examples here: styles/tests/_responsive-dynamic-properties.test.scss
*
* NOTE: There's a limitation when it comes to short-hands. For example flex is a shorthand for flex-grow, flex-shrink and flex-basis. The last one you define in $dynamicProperties will take precedence over the other one.
* You should either define the shorthand or the separate properties, not all of them.
*/
/* stylelint-disable max-nesting-depth */
/**
* A mixin used to generate hcl classes for static css properties, i.e. properties with a set of defined values such as text-align or justify-content
*
* $namespace: A string that defines the namespace for hcl, all classes will start with .hcl-$namespace-*
* $staticProperties: A scss map, similar to js objects, containing all css properties you want to generate. It's in this shape
*      classKey: (
*         property-name: *name of css property*, //text-align, justify-content etc.
*         values: * an array of the values this css property can have*, // (right, left, center)
*      )
*
* See examples here: styles/tests/_responsive-static-properties.test.scss
*/
.sbu-stats-count {
  font-size: 29px;
  font-weight: 600;
  font-family: "Roboto Flex", Arial, sans-serif;
}

.sbu-stats-card-heading {
  font-size: 18px;
  font-weight: 600;
  font-family: "Roboto Flex", Arial, sans-serif;
}

.arrow-icon {
  margin-right: 2px;
}

.hide-on-mobile {
  display: none;
}
@media (min-width: 670px) {
  .hide-on-mobile {
    display: block;
  }
}

.button_to,
.button_to div {
  display: inline;
}

.explanation {
  font-size: 14px;
}

.link-cancel-block {
  display: block;
  margin: 0.4em;
  text-align: center;
}
@media only screen and (min-width: 640px) {
  .link-cancel-block {
    display: inline-block;
  }
}

.action-edit {
  margin-right: 0.5em;
  padding: 2px 0;
  white-space: nowrap;
}

.description {
  clear: both;
  color: #888;
  font-size: 14px;
}

.togglable-form {
  display: none;
}

.togglable-form:target {
  display: block;
}

/*# sourceMappingURL=/assets/application-df6f2be7.css.map */