/*! HelpScout custom stylesheet S3 link https: //s3.amazonaws.com/helpscout.net/docs/assets/64cb6cf86d4a3e191f237e66/attachments/65290b551ec9493542047bd9/stylesheet.css */

:root {
  /* Color palette */
  --color-white: hsl(0 0% 100%);

  /* Neutral */
  --color-neutral-050: hsl(60 75% 99%);
  --color-neutral-100: hsl(60 30% 96%);
  --color-neutral-200: hsl(60 22% 93%);
  --color-neutral-300: hsl(60 18% 90%);
  --color-neutral-400: hsl(60 12% 84%);
  --color-neutral-500: hsl(60 6% 70%);
  --color-neutral-600: hsl(60 4% 61%);
  --color-neutral-700: hsl(60 4% 50%);
  --color-neutral-800: hsl(60 4% 40%);
  --color-neutral-900: hsl(60 5% 28%);

  /* Brand */
  --color-brand-primary: var(--color-green-300);
  --color-brand-mid: hsl(172 22% 20%);
  --color-brand-dark: hsl(176 20% 16%);

  /* Green */
  --color-green-050: hsl(103 64% 95%);
  --color-green-100: hsl(105 68% 89%);
  --color-green-200: hsl(105 67% 82%);
  --color-green-300: hsl(105 68% 77%);
  --color-green-400: hsl(106 67% 71%);
  --color-green-500: hsl(106 60% 66%);
  --color-green-600: hsl(105 51% 56%);
  --color-green-700: hsl(105 53% 45%);
  --color-green-800: hsl(105 54% 35%);
  --color-green-900: hsl(109 46% 25%);
  --color-green-950: hsl(128 28% 21%);

  /* Aqua */
  --color-aqua-050: hsl(174 68% 94%);
  --color-aqua-100: hsl(175 63% 88%);
  --color-aqua-200: hsl(174 64% 82%);
  --color-aqua-300: hsl(174 64% 77%);
  --color-aqua-400: hsl(173 65% 72%);
  --color-aqua-500: hsl(174 64% 66%);
  --color-aqua-600: hsl(174 60% 60%);
  --color-aqua-700: hsl(174 44% 49%);
  --color-aqua-800: hsl(175 51% 36%);
  --color-aqua-900: hsl(176 59% 22%);
  --color-aqua-950: hsl(175 38% 19%);

  /* Blue */
  --color-blue-050: hsl(207 100% 95%);
  --color-blue-100: hsl(207 100% 92%);
  --color-blue-200: hsl(206 100% 89%);
  --color-blue-300: hsl(207 100% 84%);
  --color-blue-400: hsl(207 100% 78%);
  --color-blue-500: hsl(207 99% 72%);
  --color-blue-600: hsl(207 90% 65%);
  --color-blue-700: hsl(207 60% 52%);
  --color-blue-800: hsl(207 71% 37%);
  --color-blue-900: hsl(206 60% 25%);
  --color-blue-950: hsl(202 51% 20%);

  /* Purple */
  --color-purple-050: hsl(260 100% 96%);
  --color-purple-100: hsl(258 100% 93%);
  --color-purple-200: hsla(259 100% 91%);
  --color-purple-300: hsl(258 100% 88%);
  --color-purple-400: hsl(258 100% 82%);
  --color-purple-500: hsl(258 100% 76%);
  --color-purple-600: hsl(258 100% 70%);
  --color-purple-700: hsl(258 67% 57%);
  --color-purple-800: hsl(259 64% 44%);
  --color-purple-900: hsl(258 76% 29%);
  --color-purple-950: hsl(246 42% 23%);

  /* Fuscia */
  --color-fuscia-050: hsl(289 100% 97%);
  --color-fuscia-100: hsl(289 100% 94%);
  --color-fuscia-200: hsl(289 100% 90%);
  --color-fuscia-300: hsl(289 100% 87%);
  --color-fuscia-400: hsl(289 100% 81%);
  --color-fuscia-500: hsl(289 100% 75%);
  --color-fuscia-600: hsl(289 84% 65%);
  --color-fuscia-700: hsl(289 57% 51%);
  --color-fuscia-800: hsl(289 69% 38%);
  --color-fuscia-900: hsl(289 74% 25%);
  --color-fuscia-900: hsl(275 38% 22%);

  /* Pink */
  --color-pink-050: hsl(338 89% 96%);
  --color-pink-100: hsl(336 94% 93%);
  --color-pink-200: hsl(336 100% 90%);
  --color-pink-300: hsl(336 100% 85%);
  --color-pink-400: hsl(335 100% 79%);
  --color-pink-500: hsl(335 100% 74%);
  --color-pink-600: hsl(335 94% 67%);
  --color-pink-700: hsl(335 63% 54%);
  --color-pink-800: hsl(335 69% 39%);
  --color-pink-900: hsl(334 81% 25%);
  --color-pink-950: hsl(328 33% 20%);

  /* Coral */
  --color-coral-050: hsl(11 91% 95%);
  --color-coral-100: hsl(9 95% 92%);
  --color-coral-200: hsl(8 100% 88%);
  --color-coral-300: hsl(7 100% 83%);
  --color-coral-400: hsl(7 100% 77%);
  --color-coral-500: hsl(7 100% 72%);
  --color-coral-600: hsl(7 92% 65%);
  --color-coral-700: hsl(7 62% 52%);
  --color-coral-800: hsl(7 70% 39%);
  --color-coral-900: hsl(8 77% 24%);
  --color-coral-950: hsl(12 30% 20%);

  /* Orange */
  --color-orange-050: hsl(22 100% 95%);
  --color-orange-100: hsl(24 100% 90%);
  --color-orange-200: hsl(25 100% 85%);
  --color-orange-300: hsl(25 100% 77%);
  --color-orange-400: hsl(25 100% 72%);
  --color-orange-500: hsl(25 100% 67%);
  --color-orange-600: hsl(25 94% 61%);
  --color-orange-700: hsl(25 70% 53%);
  --color-orange-800: hsl(25 72% 38%);
  --color-orange-900: hsl(25 77% 24%);
  --color-orange-950: hsl(33 31% 19%);

  /* Yellow */
  --color-yellow-050: hsl(38 100% 95%);
  --color-yellow-100: hsl(40 100% 88%);
  --color-yellow-200: hsl(40 100% 84%);
  --color-yellow-300: hsl(40 100% 77%);
  --color-yellow-400: hsl(40 100% 72%);
  --color-yellow-500: hsl(40 100% 67%);
  --color-yellow-600: hsl(40 100% 63%);
  --color-yellow-700: hsl(40 75% 54%);
  --color-yellow-800: hsl(40 70% 41%);
  --color-yellow-900: hsl(40 87% 24%);
  --color-yellow-950: hsl(58 28% 19%);

  /* Font family */
  --font-family-sans: "Figtree", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-heading: "Figtree", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heading: var(--font-weight-bold);

  --line-height-regular: 1.4;
  --line-height-tight: 1.25;
  --line-height-heading: var(--line-height-tight);

  --letter-spacing-regular: 0.0075em;
  --letter-spacing-heading: var(--letter-spacing-regular);

  /*
    Fluid type font size
    Viewport min 320px
    Viewport max 1344px
    Font size min 16px with major third scale (1.25)
    Font size max 18px with perfect fourth scale (1.333)
    https://utopia.fyi/type/calculator/?c=320,16,1.25,1344,18,1.333,7,6&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6&g=s,l,xl,12
  */
  --font-size-step--2: clamp(
    12.8 / 16 * 1rem,
    0.7863rem + 0.0687vi,
    13.5 / 16 * 0.844rem
  );
  --font-size-step--1: clamp(
    14.3 / 16 * 1rem,
    0.8703rem + 0.1172vi,
    15.5 / 16 * 1rem
  );
  --font-size-step-0: clamp(
    16 / 16 * 1rem,
    0.9565rem + 0.2174vi,
    18 / 16 * 1rem
  );
  --font-size-step-1: clamp(
    20 / 16 * 1rem,
    1.1632rem + 0.4341vi,
    24 / 16 * 1rem
  );
  --font-size-step-2: clamp(
    25 / 16 * 1rem,
    1.4107rem + 0.7591vi,
    32 / 16 * 1rem
  );
  --font-size-step-3: clamp(
    31.3 / 16 * 1rem,
    1.7056rem + 1.2375vi,
    42.6 / 16 * 1rem
  );
  --font-size-step-4: clamp(
    39.1 / 16 * 1rem,
    2.0551rem + 1.9315vi,
    56.8 / 16 * 1rem
  );
  --font-size-step-5: clamp(
    48.8 / 16 * 1rem,
    2.4663rem + 2.9271vi,
    75.8 / 16 * 1rem
  );
  --font-size-step-6: clamp(
    61 / 16 * 1rem,
    2.9462rem + 4.3423vi,
    101 / 16 * 1rem
  );
  --font-size-step-7: clamp(
    76.3 / 16 * 1rem,
    3.5006rem + 6.3389vi,
    134.6 / 16 * 1rem
  );

  /*
    Fluid space sizes
    https://utopia.fyi/space/calculator/?c=320,16,1.25,1344,18,1.333,7,6,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,3xs-xs%7C2xs-s%7Cxs-m%7Cs-l%7Cm-xl%7Cl-2xl%7Cxl-3xl&g=s,l,xl,12
  */
  --space-step-0: clamp(0.25rem, 0.2305rem + 0.0977vi, 0.3125rem);
  --space-step-1: clamp(0.5rem, 0.4805rem + 0.0977vi, 0.5625rem);
  --space-step-2: clamp(0.75rem, 0.7109rem + 0.1953vi, 0.875rem);
  --space-step-3: clamp(1rem, 0.9609rem + 0.1953vi, 1.125rem);
  --space-step-4: clamp(1.5rem, 1.4414rem + 0.293vi, 1.6875rem);
  --space-step-5: clamp(2rem, 1.9219rem + 0.3906vi, 2.25rem);
  --space-step-6: clamp(3rem, 2.8828rem + 0.5859vi, 3.375rem);
  --space-step-7: clamp(4rem, 3.8438rem + 0.7813vi, 4.5rem);
  --space-step-8: clamp(6rem, 5.7656rem + 1.1719vi, 6.75rem);

  /* One-up pairs */
  --space-step-0-step-1: clamp(0.25rem, 0.1523rem + 0.4883vi, 0.5625rem);
  --space-step-1-step-2: clamp(0.5rem, 0.3828rem + 0.5859vi, 0.875rem);
  --space-step-2-step-3: clamp(0.75rem, 0.6328rem + 0.5859vi, 1.125rem);
  --space-step-3-step-4: clamp(1rem, 0.7852rem + 1.0742vi, 1.6875rem);
  --space-step-4-step-5: clamp(1.5rem, 1.2656rem + 1.1719vi, 2.25rem);
  --space-step-5-step-6: clamp(2rem, 1.5703rem + 2.1484vi, 3.375rem);
  --space-step-6-step-7: clamp(3rem, 2.5313rem + 2.3438vi, 4.5rem);
  --space-step-7-step-8: clamp(4rem, 3.1406rem + 4.2969vi, 6.75rem);

  /* Custom pairs */
  --space-step-0-step-2: clamp(0.25rem, 0.0547rem + 0.9766vi, 0.875rem);
  --space-step-1-step-3: clamp(0.5rem, 0.3047rem + 0.9766vi, 1.125rem);
  --space-step-2-step-4: clamp(0.75rem, 0.457rem + 1.4648vi, 1.6875rem);
  --space-step-3-step-5: clamp(1rem, 0.6094rem + 1.9531vi, 2.25rem);
  --space-step-4-step-6: clamp(1.5rem, 0.9141rem + 2.9297vi, 3.375rem);
  --space-step-5-step-7: clamp(2rem, 1.2188rem + 3.9063vi, 4.5rem);
  --space-step-6-step-8: clamp(3rem, 1.8281rem + 5.8594vi, 6.75rem);

  /* Border radius */
  --border-radius-small: 0.625rem;
  --border-radius-medium: 1.25rem;
  --border-radius-large: 2.5rem;
  --border-radius-full: 100vmax;

  /* Outline */
  --outline-width: 0.125rem;
  --outline-offset: 0.125rem;

  /* Shadow */
  --shadow-raised: 0 0 0.0625rem 0.0625rem hsl(0 0% 9% / 0.05),
    0 0.25rem 0.75rem -0.125rem hsl(0 0% 9% / 0.1);
  --shadow-floating: 0 0 0 0.0625rem hsl(0 0% 9% / 0.05),
    0 0.25rem 0.5rem hsl(0 0% 9% / 0.1), 0 1rem 1.5rem hsl(0 0% 9% / 0.1);

  /* Transition */
  --transition-duration: 150ms;
  --transition-timing-function: ease-out;

  /* Layout */
  --top-navigation-block-size: 5.5rem;
  --container-max-inline-size: calc(
    80rem + calc(var(--space-step-3-step-5) * 2)
  );
  --container-max-inline-size-wide: calc(
    var(--container-max-inline-size) + calc(var(--space-step-5-step-7) * 2)
  );
  --gutter: var(--space-step-7);
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

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

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

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

/**
 * Remove the inner border and padding in Firefox.
 */

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

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

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

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

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

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

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

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* Base */
html,
:host {
  line-height: var(--line-height-regular);
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-family-sans);
  letter-spacing: var(--letter-spacing-regular);
  font-size: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-block-size: 100vh;
  background-color: var(--color-neutral-050);
  color: var(--color-brand-dark);
  font-optical-sizing: auto;
  font-size: var(--font-size-step-0);
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0 0 calc(1rem * 1.5);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-heading) !important;
  line-height: var(--line-height-heading) !important;
  letter-spacing: var(--letter-spacing-heading) !important;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.125rem;
}

a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  color: var(--color-green-800);
  border-radius: 0.25rem;
  transition-property: color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
a:hover {
  color: var(--color-green-900);
}

button {
  cursor: pointer;
}

/* Navbar */
.navbar .navbar-inner {
  box-shadow: none;
}

.navbar .brand {
  padding-block: var(--space-step-3);
  padding-inline: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-step-2);
  inline-size: 8.875rem;
  block-size: 2.25rem;
  background-image: url(https://s3.amazonaws.com/static.buffer.com/help-scout/images/buffer-logo.png);
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: contain;
  font-size: var(--font-size-step-0);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-regular);
  color: var(--color-brand-dark);
}
.navbar .brand:hover,
.navbar .brand:active,
.navbar .brand:focus {
  color: var(--color-brand-dark);
}

.navbar .brand span {
  /* Accessible visually hidden text */
  position: absolute;
  margin: -1px;
  width: 1px;
  height: 1px;
  border-width: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Main page */
/* Docs search */
#docsSearch {
  border-end-start-radius: var(--border-radius-medium);
  border-end-end-radius: var(--border-radius-medium);
  padding-block: var(--space-step-5-step-7);
  background-color: var(--color-brand-dark);
  color: var(--color-neutral-050);
}

#docsSearch h1 {
  margin-block-end: var(--space-step-3);
}

#docsSearch #searchBar {
  display: none !important; /* Hidden in favor of Brainfish search */
}

/* Collection categories */
.collection-category h2 {
  margin: 0 0 var(--space-step-3) 0;
  padding: 0;
}

.collection-category h2 a {
  text-decoration: none;
}
.collection-category h2 a:hover,
.collection-category h2 a:focus,
.collection-category h2 a:active {
  text-decoration: underline;
}

.category-list {
  display: grid;
  gap: var(--space-step-3);
}
@media (min-width: 36rem) {
  .category-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .category-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.category-list .category {
  margin: 0;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--color-neutral-400);
  border-radius: var(--border-radius-small);
  background-color: var(--color-neutral-050);
  background-repeat: no-repeat;
  background-position: center 3.125rem;
  background-size: 6.25rem;
  inline-size: initial !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-start: 10rem;
  padding-inline: var(--space-step-3-step-5);
  padding-block-end: var(--space-step-3-step-5);
  text-decoration: none;
  transition-property: border-color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
.category-list .category:hover {
  border-color: var(--color-neutral-700);
  background-color: var(--color-neutral-050);
  background-repeat: no-repeat;
  background-position: center 3.125rem;
  background-size: 6.25rem;
}

.category-list .category h3 {
  margin-block-end: var(--space-step-3);
}

.category-list .category p {
  margin: 0;
}

.category-list .category .article-count,
.category-list .category:hover .article-count,
.category-list .category:focus .article-count,
.category-list .category:active .article-count {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-step--1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-regular);
  color: var(--color-green-800);
}

/* Public categories */
/* Getting started */
#category-4 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/getting-started.png");
}

/* Buffer social network guides */
#category-500 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/buffer-social-network-guides.png");
}

/* Channel management */
#category-12 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/channel-management.png");
}

/* Creating posts */
#category-495 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/creating-posts.png");
}

/* Managing media */
#category-496 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/managing-media.png");
}

/* Scheduling posts */
#category-13 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/scheduling-posts.png");
}

/* Team collaboration */
#category-499 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/team-collaboration.png");
}

/* Analyzing your data */
#category-6 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/analyzing-your-data.png");
}

/* Engaging with comments */
#category-501 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/engaging-with-comments.png");
}

/* Account settings */
#category-11 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/account-settings.png");
}

/* Billing */
#category-15 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/billing.png");
}

/* Start page landing page */
#category-14 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/start-page-landing-page.png");
}

/* Mobile app */
#category-16 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/mobile-app.png");
}

/* Integrations */
#category-497 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/integrations.png");
}

/* Buffer best practices */
#category-498 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/buffer-best-practices.png");
}

/* Internal categories */
/* Analytics and engage troubleshooting */
#category-784 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-analytics-and-engage-troubleshooting.png");
}

/* Billing */
#category-704 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-billing.png");
}

/* Buffer account management and login */
#category-680 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-buffer-account-management-and-login.png");
}

/* Channel management */
#category-739 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-channel-management.png");
}

/* Integrations */
#category-802 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-integrations.png");
}

/* How-to guides */
#category-817 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-how-to-guides.png");
}

/* Plans and pricing */
#category-683 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-plans-and-pricing.png");
}

/* Publishing troubleshooting */
#category-775 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-publishing-troubleshooting.png");
}

/* Scheduling posts */
#category-772 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-scheduling-posts.png");
}

/* Troubleshooting failed posts */
#category-793 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-troubleshooting-failed-posts.png");
}

/* Users, drafts, and approvals */
#category-798 {
  background-image: url("https://s3.amazonaws.com/static.buffer.com/help-scout/images/internal-users-drafts-and-approvals.png");
}

/* Category and article page sidebar */
#searchBar.sm {
  margin-block-end: var(--space-step-5);
}

#sidebar form .search-query {
  outline-width: var(--outline-width);
  outline-style: solid;
  outline-color: transparent;
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--color-neutral-400);
  border-radius: 0.25rem;
  background-color: var(--color-neutral-050);
  padding-inline-start: 2.5rem;
  font-family: var(--font-family-sans) !important;
  font-size: var(--font-size-step--1) !important;
  line-height: var(--line-height-regular) !important;
  color: var(--color-brand-dark) !important;
  box-shadow: none !important;
  transition-property: outline-color, border-color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
#searchBar.sm .search-query:focus {
  outline-width: var(--outline-width);
  outline-style: solid;
  outline-color: var(--color-brand-dark);
  border-color: var(--color-neutral-700);
}

#searchBar.sm .search-query::placeholder {
  color: var(--color-neutral-800);
}

#searchBar.sm button,
#searchBar.sm button:hover {
  block-size: 2.5rem;
  inline-size: 2.5rem;
  inset-block-start: 0.0625rem;
  inset-inline-start: 0;
  background: url(https://s3.amazonaws.com/static.buffer.com/help-scout/images/Search.png)
    center center no-repeat;
  cursor: pointer;
}

#searchBar.sm button .icon-search {
  display: none;
}

#sidebar h3 {
  margin-block-end: var(--space-step-2);
  font-size: var(--font-size-step-0);
  color: inherit;
  text-transform: none;
}

#sidebar .nav-list {
  margin: 0;
  list-style: "";
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-step-2);
}

#sidebar .nav-list li {
  margin: 0;
}

#sidebar .nav-list a {
  padding: 0;
  font-size: var(--font-size-step--1);
  color: var(--color-brand-dark);
  text-decoration: none;
}
#sidebar .nav-list a:hover {
  font-weight: var(--font-weight-regular);
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus,
#sidebar .nav-list a:hover,
#sidebar .nav-list a:focus {
  color: var(--color-green-800);
}

#sidebar .nav-list .active a .icon-arrow {
  display: none !important;
}

/* Category page */
#categoryHead {
  position: relative;
  margin-block-end: var(--space-step-3-step-5);
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 36rem) {
  #categoryHead {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

#categoryHead h1 {
  margin: 0 0 var(--space-step-3) 0;
}
@media (min-width: 36rem) {
  #categoryHead h1 {
    margin: 0;
  }
}

#categoryHead .descrip {
  display: none;
}

#categoryHead .sort {
  position: relative;
  inset-block-start: initial;
  inset-inline-start: initial;
  inset-block-end: initial;
  inset-inline-end: initial;
}

#categoryHead .sort form {
  margin: 0;
}

#categoryHead .sort select {
  block-size: 2.5rem;
  inline-size: 10rem;
}

.articleList {
  list-style: "";
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-step-2);
}

.articleList li {
  margin: 0;
}

.articleList li a {
  position: relative;
}

.articleList i.icon-article-doc {
  display: none;
}

/* Article page */
#main-content {
  background: none;
}

.contentWrapper {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--color-neutral-400);
  border-radius: var(--border-radius-medium);
  background-color: var(--color-neutral-050);
  box-shadow: none;
}

#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-step--1);
  line-height: var(--line-height-regular);
  color: var(--color-brand-dark);
}

#fullArticle .callout,
#fullArticle .callout-red,
#fullArticle .callout-yellow,
#fullArticle .callout-blue,
#fullArticle .callout-green {
  border-radius: var(--border-radius-small);
  border: none;
  padding: var(--space-step-3-step-5);
}

#fullArticle .callout {
  background-color: var(--color-neutral-100);
}

#fullArticle .callout-red {
  background-color: var(--color-coral-100);
}

#fullArticle .callout-yellow {
  background-color: var(--color-yellow-100);
}

#fullArticle .callout-blue {
  background-color: var(--color-blue-100);
}

#fullArticle .callout-green {
  background-color: var(--color-green-100);
}

#fullArticle ul,
#fullArticle ol {
  padding-inline-start: 1.5rem;
}

#fullArticle pre {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: var(--color-green-400);
  border-radius: var(--border-radius-small);
  background-color: var(--color-green-050);
  padding: var(--space-step-3);
}

.printArticle {
  text-decoration: none !important;
}

[class^="icon-"] {
  color: var(--color-neutral-600);
  transition-property: color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
}
#fullArticle .printArticle:hover .icon-print {
  color: var(--color-brand-dark);
}