@charset "UTF-8";
/* ==========================================================================
   YOOBIC HELP CENTRE — style.css
   Option C · YOBI design system · light blue hero
   --------------------------------------------------------------------------
   This is a COMPLETE replacement. Select everything in the Zendesk style.css
   box, delete it, and paste this in its place.

   If you already pasted the Option C block, Fix Pack 1 or Fix Pack 2 at the
   bottom of the old file, that is fine — they all go when you delete it.
   Do not paste them again afterwards.

   WHAT CHANGED FROM YOUR OLD FILE
   · The old "Banner" block at the top is gone. It painted the hero,
     the cards and the tiles blue with !important, which is what every
     override was fighting.
   · Colours are edited in place rather than overridden, so there is now
     exactly one rule per thing and no !important anywhere.
   · The old purples — #8172FF, #5A30F4, #7577FF, #798EF3 — are all gone.
   · Lato is replaced by Quicksand throughout.
   · One malformed rule in the .lt-btn block (a stray selector inside a
     declaration) is repaired; it was silently breaking the rules after it.

   Everything else — category pages, articles, requests, community,
   profiles, search results, pagination — is your original file untouched
   apart from colour and type.

   WHY THERE ARE NO CSS VARIABLES IN HERE
   The previous version defined a palette at the top and referred to it
   everywhere. A comment in its header accidentally contained the
   characters that end a CSS comment, which closed the header early; the
   browser then treated the remaining prose as broken CSS and threw away
   the next rule to recover — which happened to be the palette. Every
   colour in the file pointed at it, so every colour disappeared while the
   layout came through untouched. That is the all-white page.

   This version writes each colour out in full instead, so there is no
   single rule the whole file depends on. Your original stylesheet did the
   same thing: it defined --color-primary-hover and friends at the top and
   then never used one of them.

   ONE THING TO KNOW
   The theme-editor colour pickers (Brand color, Text color, Link color,
   Background color) no longer drive anything — every colour is written
   into this file. The image settings (logo, favicon, community image)
   still work as before.
   ========================================================================== */


/* ==========================================================================
   YOBI TOKENS
   Every colour below comes from here. To change one, change it once.
   ========================================================================== */
/* ==========================================================================
   THE PALETTE
   Written as plain hex values throughout, on purpose — see the note above.
   To change a colour, use Find & Replace on the value in this list.

     #F0F1F4  page background            #2B2F3B  body + heading text, footer
     #FFFFFF  cards, article bodies      #414758  secondary text
     #214ECF  buttons, focus rings       #565E76  placeholder / meta text
     #1A3EA6  button hover               #FFFFFF  text on blue
     #142F7C  button pressed             #325399  links
     #D3DCF5  category card 1            #223766  link hover
     #D7F2ED  category card 2            #C4C8D4  borders, input outlines
     #E9E0FF  category card 3            #E2E4E9  faint dividers
     #FDE2E0  category card 4            #BBD0FF  line under the hero
     #DDE8FF  THE HERO + tip callouts    #EABB00  caution callout edge
     #FBF1CC  caution callout            #D44333  breaking-change edge
     #F6D9D6  breaking-change callout

   Type: "Quicksand", loaded in document_head.hbs
   Corners: 8px small · 12px controls · 16px cards · 9999px pills
   ========================================================================== */

/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: #F0F1F4;
  color: #2B2F3B;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1, h2, h3, h4, h5, h6 {
  color: #2B2F3B;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 0;
}

h1 { font-size: 40px; line-height: 44px; }
h2 { font-size: 32px; line-height: 36px; }
h3 { font-size: 26px; line-height: 30px; }
h4 { font-size: 20px; line-height: 24px; }

a {
  color: #325399;
  font-size: 16px;
  text-decoration: none;
}

a:hover, a:active, a:focus {
  color: #223766;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keyboard focus ring — support sites get a lot of keyboard use */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #214ECF;
  outline-offset: 2px;
}

input,
textarea {
  color: #2B2F3B;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 15px;
}

input {
  box-sizing: border-box;
  font-weight: 500;
  max-width: 100%;
  outline: none;
  transition: border .12s ease-in-out;
}

input:focus {
  border: 1px solid #214ECF;
}

input[disabled] {
  background-color: #E2E4E9;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(/hc/theming_assets/01HZM0XPHSZQ5V2KP3DN5MBN0S) no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #C4C8D4;
  border-radius: 8px;
  color: #414758;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  outline: none;
  padding: 8px 30px 8px 10px;
  width: 100%;
}

select:focus {
  border: 1px solid #214ECF;
}

select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid #C4C8D4;
  border-radius: 8px;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  outline: none;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

textarea:focus {
  border: 1px solid #214ECF;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.container-divider {
  border-top: 1px solid #C4C8D4;
  margin-bottom: 20px;
}

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

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  text-align: initial;
}

.dropdown-toggle:focus {
  outline: 0;
  text-decoration: underline;
}

.dropdown-toggle::after {
  color: inherit;
}


/***** Buttons *****/
.button, [role="button"] {
  border: 1.5px solid #214ECF;
  border-radius: 12px;
  color: #214ECF;
  cursor: pointer;
  display: inline-block;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}

@media (min-width: 768px) {
  .button, [role="button"] {
    width: auto;
  }
}

.button::after, [role="button"]::after {
  color: #214ECF;
}

.button:hover, .button:active, .button:focus, .button[aria-selected="true"], [role="button"]:hover, [role="button"]:active, [role="button"]:focus, [role="button"][aria-selected="true"] {
  background-color: #214ECF;
  color: #FFFFFF;
  text-decoration: none;
}

.button[aria-selected="true"]:hover, .button[aria-selected="true"]:focus, .button[aria-selected="true"]:active, [role="button"][aria-selected="true"]:hover, [role="button"][aria-selected="true"]:focus, [role="button"][aria-selected="true"]:active {
  background-color: #142F7C;
  border-color: #142F7C;
}

.button[data-disabled], [role="button"][data-disabled] {
  cursor: default;
}

.button-large, input[type="submit"] {
  background-color: #214ECF;
  border: 0;
  border-radius: 12px;
  color: #FFFFFF;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}

@media (min-width: 768px) {
  .button-large, input[type="submit"] {
    width: auto;
  }
}

.button-large:hover, .button-large:active, .button-large:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus {
  background-color: #1A3EA6;
}

.button-large[disabled], input[type="submit"][disabled] {
  background-color: #C4C8D4;
}

.button-secondary {
  background-color: transparent;
  border: 1.5px solid #C4C8D4;
  color: #414758;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  background-color: #F0F1F4;
  border: 1.5px solid #C4C8D4;
  color: #2B2F3B;
}


/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
}

@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}

.table th,
.table th a {
  color: #565E76;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

[dir="rtl"] .table th, [dir="rtl"]
.table th a {
  text-align: right;
}

.table tr {
  border-bottom: 1px solid #E2E4E9;
  display: block;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}

.table td {
  display: block;
}

@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}

@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}

@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}


/***** Forms *****/
.form {
  max-width: 650px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #C4C8D4;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
}

.form-field input:focus {
  border: 1px solid #214ECF;
}

.form-field input[type="text"] {
  border: 1px solid #C4C8D4;
  border-radius: 8px;
}

.form-field input[type="text"]:focus {
  border: 1px solid #214ECF;
}

.form-field input[type="checkbox"] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 8px;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}

.form-field .nesty-input:focus {
  border: 1px solid #214ECF;
  text-decoration: none;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid #214ECF;
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type="checkbox"] + label {
  margin: 0 0 0 10px;
}

.form-field.required > label::after {
  content: "*";
  color: #D44333;
  margin-left: 2px;
}

.form-field .optional {
  color: #565E76;
  margin-left: 4px;
}

.form-field p {
  color: #565E76;
  font-size: 13px;
  margin: 5px 0;
}

[data-loading="true"] input,
[data-loading="true"] textarea {
  background: transparent url(/hc/theming_assets/01HZM0XPPAPXANY782S709A9V0) 99% 50% no-repeat;
  background-size: 16px 16px;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: #565E76;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 14px;
  margin-top: 30px;
}

.form .suggestion-list label {
  border-bottom: 1px solid #E2E4E9;
  display: block;
  padding-bottom: 5px;
}

.form .suggestion-list li {
  padding: 10px 0;
}

.form .suggestion-list li a:visited {
  color: #223766;
}


/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 76px;
  justify-content: space-between;
}

@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  max-height: 30px;
}

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}

.user-nav[aria-expanded="true"] {
  background-color: #FFFFFF;
  box-shadow: 0 0 4px 0 rgba(43, 47, 59, 0.15), 0 4px 10px 0 rgba(43, 47, 59, 0.1);
  border: solid 1px #C4C8D4;
  border-radius: 12px;
  right: 0;
  left: 0;
  top: 76px;
  z-index: 1;
}

.user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 20px;
}

.nav-wrapper a {
  border: 0;
  color: #325399;
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}

@media (min-width: 768px) {
  .nav-wrapper a {
    display: inline-block;
  }
}

[dir="rtl"] .nav-wrapper a {
  padding: 0 0 0 20px;
}

.nav-wrapper a:hover, .nav-wrapper a:focus, .nav-wrapper a:active {
  background-color: transparent;
  color: #223766;
  text-decoration: underline;
}

.nav-wrapper a.login {
  display: inline-block;
}

.nav-wrapper .icon-menu {
  border: 0;
  color: #325399;
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
  padding: 0;
  width: auto;
}

@media (min-width: 768px) {
  .nav-wrapper .icon-menu {
    display: none;
  }
}

[dir="rtl"] .nav-wrapper .icon-menu {
  margin-left: 10px;
  margin-right: 0;
}

.nav-wrapper .icon-menu:hover, .nav-wrapper .icon-menu:focus, .nav-wrapper .icon-menu:active {
  background-color: transparent;
  color: #325399;
}


/***** User info in header *****/
/* NOTE: these reset the generic [role="button"] styling above, so the
   user menu stays plain text instead of becoming a blue button. */
.user-info {
  display: inline-block;
}

.user-info .dropdown-toggle::after {
  display: none;
}

@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}

.user-info > [role="button"] {
  background: none;
  border: 0;
  border-radius: 0;
  color: #2B2F3B;
  font-weight: 600;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > [role="button"]:hover, .user-info > [role="button"]:focus {
  background-color: transparent;
  color: #325399;
}

.user-info > [role="button"]::after {
  color: #2B2F3B;
  padding-right: 15px;
}

[dir="rtl"] .user-info > [role="button"]::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}

@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}

#user #user-name:hover {
  text-decoration: underline;
}


/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}

.avatar img {
  height: 40px;
  width: 40px;
}

.avatar .icon-agent::before {
  background-color: #214ECF;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  color: #FFFFFF;
  content: "\1F464";
  font-size: 14px;
  height: 14px;
  line-height: 14px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 14px;
}


/***** Footer *****/
.footer {
  background: #2B2F3B;
  border-top: 0;
  margin-top: 60px;
  padding: 34px 0;
}

.footer,
.footer a,
.footer button,
.footer .dropdown-toggle {
  color: #E2E4E9;
  font-size: 14px;
  font-weight: 600;
}

.footer a:hover,
.footer a:focus,
.footer .dropdown-toggle:hover {
  color: #FFFFFF;
}

/* Footer logo, rendered white.
   The asset is the full-colour lockup — a gradient "Y" plus a near-black
   "YOOBIC" wordmark — and the wordmark is invisible on the dark footer,
   which is why only the Y showed. brightness(0) flattens the whole lockup
   to black and invert(1) turns it white. White on a dark ground is an
   approved reversed treatment, so this is the finished state, not a
   placeholder. Uses the existing asset — nothing to upload. */
.footer-logo img,
.footer-inner > a:first-child img {
  display: block;
  filter: brightness(0) invert(1);
  height: 26px;
  opacity: 0.92;
  width: auto;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}

@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 8px;
  }
}

.footer-language-selector {
  color: #E2E4E9;
  display: inline-block;
  font-weight: 600;
  opacity: .8;
}

@media screen and (max-width: 1280px) {
  footer.footer .footer-inner .footer-top .links-column {
    flex: 1 0 68%;
    margin-right: 30px;
  }

  footer.footer .footer-inner .footer-top .links-column ul {
    width: 100%;
  }

  footer.footer .footer-inner .footer-top .links-column ul li a {
    padding-right: 20px;
  }
}


/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}

.breadcrumbs li {
  color: #565E76;
  display: inline;
  font-weight: 600;
  font-size: 14px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}

.breadcrumbs li a,
.breadcrumbs li a:visited {
  color: #325399;
  font-size: 14px;
}


/***** Search field *****/
.search {
  position: relative;
}

.search input[type="search"] {
  background-color: #FFFFFF;
  border: 1px solid #C4C8D4;
  border-radius: 12px;
  box-shadow: none;
  box-sizing: border-box;
  color: #2B2F3B;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  height: 54px;
  padding-left: 46px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
}

[dir="rtl"] .search input[type="search"] {
  padding-right: 46px;
  padding-left: 20px;
}

.search input[type="search"]::placeholder {
  color: #565E76;
  opacity: 1;
}

.search input[type="search"]:focus {
  border: 1px solid #214ECF;
  color: #2B2F3B;
  outline: 2px solid #214ECF;
  outline-offset: 1px;
}

.search::before {
  background-color: transparent;
  color: #565E76;
  content: "\1F50D";
  font-size: 16px;
  left: 17px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

[dir="rtl"] .search::before {
  right: 17px;
  left: auto;
}

/* The full-width search in the hero uses the same field as everywhere else */
.search-full input[type="search"] {
  border: 1px solid #C4C8D4;
}


/***** Announcement bar *****/
/* Sandbox renders an empty .alertbox; production uses .alert-banner. */
.alert-banner,
.alertbox:not(:empty) {
  background-color: #DDE8FF;
  color: #2B2F3B;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  position: relative;
  text-align: left;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.alert-banner a,
.alertbox a {
  color: #325399;
  text-decoration: underline;
}

.alert-banner > *,
.alertbox > * {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

/* Add one of these to the bar for a different severity */
.alert-banner.is-caution, .alertbox.is-caution { background-color: #FBF1CC; }
.alert-banner.is-outage,  .alertbox.is-outage  { background-color: #F6D9D6; }

/* Keeps content clear of a fixed banner, if you ever make it fixed */
.content {
  padding-top: 0;
}


/***** Hero — Option C *****/
/* Was a background image at a fixed height:300px with the inner block
   pulled up by transform:translateY(-50%). All of that is gone. */
.hero {
  background-color: #DDE8FF;
  background-image: none;
  border-bottom: 1px solid #BBD0FF;
  height: auto;
  padding: 64px 20px 72px;
  text-align: left;
  width: 100%;
}

.hero-inner {
  margin: 0 auto;
  max-width: 1160px;
  position: static;
  transform: none;
}

.hero-inner h1,
.hero-inner h2 {
  color: #2B2F3B;
  font-size: 46px;
  font-weight: 700;
  line-height: 50px;
  margin: 0 0 10px;
}

.hero-inner .hero-sub {
  color: #414758;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 32px;
  max-width: 60ch;
}

/* The search takes all the room that is left; the Help Assistant button is
   sized to its own content. The search then runs to roughly where the
   headline above it ends. */
.hero-search-row {
  align-items: stretch;
  display: flex;
  gap: 16px;
  max-width: 740px;
  width: 100%;
}

.hero-search-row .search,
.hero-search-row .search-full {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

/* Both controls now have their own edges, so the rule between them is
   redundant. The empty div stays in the template; it just does nothing. */
.assistant-divider {
  display: none;
}


/***** Help Assistant button *****/
/* On a pale hero this becomes the filled primary button — which is the
   honest treatment anyway, since it is the main action on the page. */
/* Help Assistant — one icon, one line, sized by its own label.
   width:auto means the search bar takes whatever is left, so changing the
   wording later adjusts both without touching any numbers. */
.assistant-btn {
  align-items: center;
  background: #214ECF;
  border: none;
  border-radius: 12px;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  gap: 9px;
  height: 54px;
  min-width: 0;
  padding: 0 18px;
  text-align: left;
  transition: background 0.15s;
  white-space: nowrap;
  width: auto;
}

.assistant-btn:hover  { background: #1A3EA6; }
.assistant-btn:active { background: #142F7C; }

/* A sparkle rather than a speech bubble: a bubble reads as "chat with a
   person", and the answers come from a bot. */
.assistant-btn-icon {
  align-items: center;
  display: flex;
  flex: none;
  justify-content: center;
}

.assistant-btn-icon svg,
.assistant-btn-icon svg path {
  fill: #FFFFFF;
}

.assistant-btn-text {
  color: #FFFFFF;
  flex: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}



/***** Page header *****/
.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    margin: 0;
  }
}

.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}

.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}

.page-header-description {
  color: #414758;
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 30px 0;
  word-break: break-word;
}

@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}

.page-header .icon-lock::before {
  content: "\1F512";
  font-size: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

/* Keeps the AI disclaimer on its own line under the H1 */
.page-header > .ai-disclaimer {
  clear: both;
  color: #565E76;
  display: block;
  flex-basis: 100%;
  font-size: 0.9em;
  margin-top: 8px;
  width: 100%;
}

.sub-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 30px;
  min-height: 50px;
  padding-bottom: 15px;
}

@media (min-width: 768px) {
  .sub-nav {
    align-items: baseline;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .sub-nav input[type="search"] {
    min-width: 300px;
  }
}

.sub-nav input[type="search"]::after {
  font-size: 15px;
}


/***** Category cards (homepage, top row) *****/
.blocks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: minmax(240px, 1fr);
  grid-gap: 24px;
  list-style: none;
  padding: 0;
}

/* Colour identifies the category. Keep the same order on the category
   pages if you ever tint those too. */
.blocks-item {
  background-color: #D3DCF5;
  border: 1px solid rgba(43, 47, 59, 0.07);
  border-radius: 16px;
  transition: box-shadow .15s ease, transform .15s ease;
}

.blocks-list .blocks-item:nth-child(2) { background-color: #D7F2ED; }
.blocks-list .blocks-item:nth-child(3) { background-color: #E9E0FF; }
.blocks-list .blocks-item:nth-child(4) { background-color: #FDE2E0; }

.blocks-item:hover, .blocks-item:focus-within {
  box-shadow: 0 2px 4px rgba(43, 47, 59, 0.06), 0 12px 28px rgba(43, 47, 59, 0.10);
  transform: translateY(-2px);
}

/* The old theme turned every word white on hover. Correct on purple,
   invisible on a pale tint. */
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #2B2F3B;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .blocks-item { transition: none; }
  .blocks-item:hover, .blocks-item:focus-within { transform: none; }
}

.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #C4C8D4;
}

.blocks-item-internal .icon-lock::before {
  content: "\1F512";
  font-size: 15px;
  bottom: 5px;
  position: relative;
}

.blocks-item-internal a {
  color: #2B2F3B;
}

/* The link fills the card, so it must stay transparent or it covers
   the tint. This is what the old "Banner" block was painting blue. */
.blocks-item-link {
  align-items: flex-start;
  background-color: transparent;
  color: #2B2F3B;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  padding: 26px 24px 24px;
  text-align: left;
}

.blocks-item-link:hover, .blocks-item-link:focus, .blocks-item-link:active {
  background-color: transparent;
  color: #2B2F3B;
  text-decoration: none;
}

.blocks-item-title {
  color: #2B2F3B;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.blocks-item-description {
  color: #2B2F3B;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  opacity: 0.82;
}

.blocks-list .icon-container {
  margin-bottom: 22px;
  width: auto;
}

/* INTERIM: your four category icons are white SVG files, invisible on a
   light card. brightness(0) renders any image solid black so they show
   without new assets. Replace the four files with dark yobicons when you
   can, then delete the filter line. */
.blocks-list .sect-icon {
  filter: brightness(0);
  height: 30px;
  margin-bottom: 0;
  opacity: 0.88;
  width: 30px;
}


/***** Knowledge Base tiles (homepage, lower grid) *****/
.blocks2-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: minmax(110px, 1fr);
  grid-gap: 16px;
  list-style: none;
  padding: 0;
}

/* Deliberately quieter than the four cards above: white on the grey page
   rather than another block of colour. */
.blocks2-item {
  background-color: #FFFFFF;
  border: 1px solid #C4C8D4;
  border-radius: 12px;
  transition: border-color .15s ease;
}

.blocks2-item:hover, .blocks2-item:focus-within {
  background-color: #FFFFFF;
  border-color: #214ECF;
}

.blocks2-item:hover *, .blocks2-item:focus *, .blocks2-item:active * {
  color: #2B2F3B;
  text-decoration: none;
}

.blocks2-item-internal {
  background-color: transparent;
  border: 1px solid #C4C8D4;
}

.blocks2-item-internal .icon-lock::before {
  content: "\1F512";
  font-size: 15px;
  bottom: 5px;
  position: relative;
}

.blocks2-item-internal a {
  color: #2B2F3B;
}

/* Same as the cards above — the link must not paint over the tile */
.blocks2-item-link {
  align-items: center;
  background-color: transparent;
  color: #2B2F3B;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 18px;
  text-align: center;
}

.blocks2-item-link:hover, .blocks2-item-link:focus, .blocks2-item-link:active {
  background-color: transparent;
  text-decoration: none;
}

.blocks2-item-title {
  color: #2B2F3B;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  text-align: center;
}

.blocks2-item-description {
  color: #565E76;
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 0;
  text-align: center;
}

.blocks2-list .icon-container {
  justify-content: center;
  margin-bottom: 12px;
  width: 100%;
}

/* These icons are already dark, so they only need resizing */
.blocks2-list .sect-icon2 {
  height: 24px;
  margin-bottom: 0;
  width: 24px;
}


/***** Homepage sections *****/
.section {
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

.section h2 {
  margin-bottom: 10px;
  text-align: left;
}

.section.knowledge-base h3 {
  font-size: 26px;
  margin: 56px 0 18px;
}


/***** Promoted articles *****/
.articles h3 {
  align-items: center;
  display: flex;
  font-size: 22px;
  gap: 10px;
  margin: 48px 0 16px;
}

.articles h3 img {
  filter: brightness(0);
  opacity: 0.88;
}

.promoted-articles {
  background: #FFFFFF;
  border: 1px solid #C4C8D4;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 0;
}

.promoted-articles-item {
  flex: 1 0 auto;
}

.promoted-articles-item a {
  border-bottom: 1px solid #E2E4E9;
  color: #325399;
  display: block;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  padding: 13px 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.promoted-articles-item a:hover {
  background: #F0F1F4;
  text-decoration: none;
}

.promoted-articles-item .icon-lock::before {
  vertical-align: baseline;
}

.promoted-articles-item:last-child a {
  border-bottom: 0;
}


/***** Community section on the homepage *****/
.community {
  text-align: center;
}

.community-image {
  min-height: 300px;
  background-image: url(/hc/theming_assets/01HZM0XTGE9HD1Z3KS9V3B93AC);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}

.community,
.activity {
  padding: 30px 0;
}


/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: left;
}

.recent-activity-list {
  padding: 0;
}

.recent-activity-item {
  border-bottom: 1px solid #E2E4E9;
  overflow: auto;
  padding: 20px 0;
}

.recent-activity-item-parent {
  font-size: 20px;
  font-weight: 700;
}

.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  color: #325399;
  display: inline-block;
  width: 100%;
}

@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}

.recent-activity-item-link {
  font-size: 16px;
  font-weight: 600;
}

.recent-activity-item-meta {
  margin: 15px 0 0 0;
  float: none;
}

@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir="rtl"] .recent-activity-item-meta {
    float: left;
  }
}

.recent-activity-item-time, .recent-activity-item-comment {
  color: #565E76;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
}

.recent-activity-item-comment {
  padding-left: 5px;
}

[dir="rtl"] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}

.recent-activity-item-comment::before {
  display: inline-block;
}

.recent-activity-item-comment span::before {
  color: #214ECF;
  content: "\1F4AC";
  display: inline-block;
  font-size: 15px;
  padding-right: 3px;
  vertical-align: middle;
}

[dir="rtl"] .recent-activity-item-comment span::before {
  padding-left: 3px;
}

.recent-activity-controls {
  padding-top: 15px;
}


/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}

.category-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}

/* Each group becomes a card, so four groups read as four groups */
.section-tree .section {
  background: #FFFFFF;
  border: 1px solid #C4C8D4;
  border-radius: 16px;
  flex: initial;
  margin-bottom: 22px;
  padding: 24px 26px;
}

@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 48%;
  }
}

.section-tree-title {
  margin-bottom: 14px;
}

/* Headings stop competing with the links beneath them */
.section-tree-title a {
  color: #2B2F3B;
  font-size: 19px;
  font-weight: 700;
}

.section-tree-title a:hover {
  color: #2B2F3B;
  text-decoration: none;
}

.section-tree .see-all-articles,
.see-all-articles {
  border-top: 1px solid #E2E4E9;
  color: #325399;
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-top: 16px;
  padding: 14px 0 0;
}

.article-list-item {
  font-size: 15px;
  max-width: 400px;
  overflow: hidden;
  padding: 6px 0;
  text-overflow: ellipsis;
  white-space: normal;
}

.article-list-item a,
.article-list-link {
  color: #325399;
  font-size: 15px;
  font-weight: 600;
}

.article-list-item .icon-lock::before {
  vertical-align: baseline;
}

.icon-star::before {
  color: #214ECF;
  font-size: 18px;
}


/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}

.section-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}

.section-subscribe .dropdown-toggle::after {
  display: none;
}

.section-list {
  margin: 40px 0;
}

.section-list--collapsed .section-list-item:nth-child(1n + 6) {
  display: none;
}

.section-list-item {
  border-bottom: 1px solid #E2E4E9;
  font-size: 16px;
  padding: 15px 0;
}

.section-list-item:first-child {
  border-top: 1px solid #E2E4E9;
}

.section-list-item a {
  align-items: center;
  color: #2B2F3B;
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}

.see-all-sections-trigger[aria-hidden="true"] {
  display: none;
}


/***** Article *****/
.article {
  background: #FFFFFF;
  border: 1px solid #C4C8D4;
  border-radius: 16px;
  flex: 1;
  min-width: 0;
  padding: 40px 44px 36px;
}

@media (max-width: 767px) {
  .article {
    padding: 24px 20px;
  }
}

/* Three-column article layout: contents · article · section list */
.article-container {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 24px;
}

/* Both sidebars sit on their own white card, with the same border and
   radius as the article beside them.

   The doubled class name is deliberate. Your sidebar element also carries
   the class .article-sidebar, whose rule appears further down this file and
   sets border:0 and padding:0 — so it was winning and stripping both. Naming
   the class twice raises this rule's weight just enough to take precedence,
   without touching .article-sidebar, which other pages still use. */
.article-sidebar-toc.article-sidebar-toc,
.article-sidebar-section.article-sidebar-section {
  background: #FFFFFF;
  border: 1px solid #C4C8D4;
  border-radius: 16px;
  flex: 0 0 auto;
  margin-bottom: 0;
  padding: 28px 26px;
  width: 268px;
}

.article-sidebar-toc.article-sidebar-toc {
  align-self: flex-start;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: sticky;
  top: 20px;
}

.article-sidebar-section.article-sidebar-section {
  align-self: flex-start;
  max-height: none;
  overflow-y: visible;
  position: static;
  top: auto;
}

/* The heading inside either card */
#toc-title,
#section-title,
.article-sidebar-toc > h1,
.article-sidebar-toc > h2,
.article-sidebar-toc > h3,
.article-sidebar-toc > h4,
.article-sidebar-toc > p:first-child,
.article-sidebar-toc .sidenav-title,
.article-sidebar-section > h1,
.article-sidebar-section > h2,
.article-sidebar-section > h3,
.article-sidebar-section > h4,
.article-sidebar-section > p:first-child,
.article-sidebar-section .sidenav-title {
  color: #2B2F3B;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 16px;
  padding: 0;
}


.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}

.article-avatar {
  margin-right: 10px;
}

.article-author {
  margin-bottom: 10px;
}

.article-title,
.article-header h1 {
  color: #2B2F3B;
  font-size: 40px;
  line-height: 44px;
}

@media (max-width: 767px) {
  .article-title,
  .article-header h1 {
    font-size: 30px;
    line-height: 34px;
  }
}

@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%;
  }
}

.article-title .icon-lock::before {
  content: "\1F512";
  font-size: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.article [role="button"] {
  flex-shrink: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .article [role="button"] {
    width: auto;
  }
}

.article-info {
  max-width: 100%;
}

.article-meta {
  display: inline-block;
  vertical-align: middle;
}

/* Body copy: 16 on a 26px line, capped near 68 characters.
   Was 15px Lato on a 706px column — about 95 characters. */
.article-body {
  color: #2B2F3B;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  max-width: 660px;
}

.article-body p,
.article-body li {
  max-width: 660px;
}

.article-body h2 {
  color: #2B2F3B;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  font-size: 26px;
  line-height: 30px;
  margin: 34px 0 12px;
}

.article-body h3 {
  font-size: 20px;
  line-height: 24px;
  margin: 26px 0 10px;
}

.article-body a {
  color: #325399;
  font-weight: 700;
}

.article-body a:visited {
  color: #223766;
}

.article-body img {
  border-radius: 8px;
  height: auto;
  max-width: 100%;
}

.article-body td, .article-body th {
  padding: 20px;
}

.article-body ul, .article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.article-body ul > ul, .article-body ol > ol, .article-body ol > ul, .article-body ul > ol, .article-body li > ul, .article-body li > ol {
  margin: 0;
}

.article-body ul {
  list-style-type: disc;
}

/* Quicksand ships no italic, so the browser fakes a slant. Uncomment to
   route emphasis to SemiBold instead — tell the writers first. */
/*
.article-body em,
.article-body i { font-style: normal; font-weight: 600; }
*/

.article-body code {
  background: #F0F1F4;
  border: 1px solid #C4C8D4;
  border-radius: 8px;
  padding: 0 5px;
  margin: 0 2px;
}

.article-body pre {
  background: #F0F1F4;
  border: 1px solid #C4C8D4;
  border-radius: 8px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.article-body blockquote {
  border-left: 3px solid #C4C8D4;
  color: #414758;
  font-style: normal;
  padding: 0 15px;
}

.article-body > p:last-child {
  margin-bottom: 0;
}


/***** Article callouts *****/
/* Writers paste these in the article editor's source view:
     <div class="callout callout-tip"><p>…</p></div>
   The three colours mean the same thing here as they do in the app. */
.article-body .callout {
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 20px;
  max-width: 660px;
  padding: 16px 18px;
}

.article-body .callout p:last-child {
  margin-bottom: 0;
}

.article-body .callout-tip {
  background: #DDE8FF;
  color: #2B2F3B;
}

.article-body .callout-caution {
  background: #FBF1CC;
  border-left: 3px solid #EABB00;
  color: #2B2F3B;
}

.article-body .callout-breaking {
  background: #F6D9D6;
  border-left: 3px solid #D44333;
  color: #2B2F3B;
}


.article-content {
  line-height: 1.625;
  margin: 40px 0;
  word-wrap: break-word;
}

.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.article-comment-count {
  color: #565E76;
  font-weight: 600;
}

.article-comment-count:hover {
  text-decoration: none;
}

.article-comment-count .icon-comments {
  color: #214ECF;
  content: "\1F4AC";
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.article-sidebar {
  align-self: flex-start;
  border: 0;
  color: #414758;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
  position: sticky;
  top: 20px;
}

@media (min-width: 1024px) {
  .article-sidebar {
    flex: 0 0 17%;
    height: auto;
  }
}

.article-relatives {
  border-top: 1px solid #E2E4E9;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}

.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}

.article-relatives > *:last-child {
  padding: 0;
}

@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}

.article-votes {
  border-top: 1px solid #E2E4E9;
  margin-top: 34px;
  padding: 24px 0 30px;
  text-align: center;
}

/* Production-only tweak carried over: hide the +N / -N vote tally. */
.article-votes .article-votes-count {
  display: none;
}

.article-vote {
  background: #FFFFFF;
  border: 1.5px solid #C4C8D4;
  border-radius: 9999px;
  color: #2B2F3B;
  font-size: 14px;
  font-weight: 700;
  margin: 20px 10px;
  min-width: 160px;
  width: auto;
}

.article-vote::before {
  font-size: 8px;
  margin-right: 10px;
}

[dir="rtl"] .article-vote::before {
  margin-right: 0;
  margin-left: 10px;
}

.article-vote::after {
  content: attr(title);
}

.article-vote:focus, .article-vote:active {
  background-color: #FFFFFF;
  border-color: #214ECF;
  color: #214ECF;
}

.article-vote:hover {
  background-color: #214ECF;
  border-color: #214ECF;
}

.article-vote:hover::before, .article-vote:hover::after, .article-vote[aria-selected="true"]::before, .article-vote[aria-selected="true"]::after {
  color: #FFFFFF;
}

.article-vote-up::before   { content: "\2713"; }
.article-vote-down::before { content: "\2715"; }

.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}

.article-return-to-top {
  border-top: 1px solid #E2E4E9;
}

@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}

.article-return-to-top a {
  color: #2B2F3B;
  display: block;
  padding: 20px 0;
}

.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}

.article-return-to-top .icon-arrow-up::before {
  font-size: 16px;
  margin-left: 5px;
}

[dir="rtl"] .article-return-to-top .icon-arrow-up::before {
  margin-right: 10px;
}

.article-unsubscribe {
  background-color: #214ECF;
  color: #FFFFFF;
  text-decoration: none;
}

.article-unsubscribe:hover {
  background-color: #1A3EA6;
  border-color: #1A3EA6;
}


/***** Article side navigation *****/
.sidenav-title {
  font-size: 15px;
  position: relative;
}

.sidenav-item {
  border-left: 2px solid transparent;
  border-radius: 0;
  color: #414758;
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 6px 10px 6px 14px;
}

.sidenav-item.current-article, .sidenav-item:hover {
  background-color: transparent;
  border-left-color: #214ECF;
  color: #325399;
  font-weight: 700;
  text-decoration: none;
}

.recent-articles h3,
.related-articles h3 {
  font-size: 17px;
  margin: 20px 0;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}

/* Table of contents */
/* The card supplies the padding now */
.toc-wrapper {
  padding: 0;
}

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

#toc-nav li {
  margin-bottom: 6px;
}

#toc-nav a {
  border-left: 2px solid transparent;
  color: #414758;
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  padding-left: 12px;
  text-decoration: none;
}

#toc-nav a:hover {
  border-left-color: #214ECF;
  color: #325399;
  text-decoration: none;
}

#toc-nav .toc-h1 { padding-left: 0; }
#toc-nav .toc-h2 { padding-left: 12px; }
#toc-nav .toc-h3 { padding-left: 24px; }

@media (max-width: 768px) {
  .article-container {
    flex-direction: column;
  }
  .article-sidebar-toc,
  .article-sidebar-section {
    display: none;
  }
}

/* Articles listed in the section sidebar */
.section-articles {
  border-top: 1px solid #E2E4E9;
  margin-top: 2rem;
  padding-top: 1rem;
}

/* When it is the first thing inside the sidebar card, the rule and the big
   top margin have nothing to separate it from. */
.article-sidebar-section > .section-articles:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.section-articles ul a {
  font-size: 13px;
}

.section-articles .sidenav-item {
  background: none;
  border: none;
  color: #325399;
  display: inline;
  font-weight: 500;
  padding: 0;
}

.section-articles .sidenav-item:hover {
  background: none;
  text-decoration: underline;
}

.section-articles .sidenav-item.current-article {
  background: none;
  color: inherit;
  font-weight: 700;
}


/***** Attachments *****/
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}

.attachments .attachment-item:last-child {
  margin-bottom: 0;
}

.attachments .attachment-item::before {
  color: #2B2F3B;
  content: "\1F4CE";
  font-size: 15px;
  left: 0;
  position: absolute;
  top: 5px;
}

[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}

[dir="rtl"] .attachments .attachment-item::before {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #565E76;
}


/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share a {
  border-radius: 50%;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  width: 25px;
}

.share a::before {
  color: #565E76;
  display: block;
  font-size: 23px;
  text-align: center;
  width: 100%;
}

.share a:hover {
  text-decoration: none;
}

.share a:hover::before {
  color: #214ECF;
}

.share-twitter::before  { content: "\e901"; }
.share-facebook::before { content: "\e903"; }
.share-linkedin::before { content: "\e900"; }


/***** Comments *****/
.comment {
  border-bottom: 1px solid #E2E4E9;
  padding: 20px 0;
}

.comment-heading {
  margin-bottom: 5px;
  margin-top: 0;
}

.comment-overview {
  border-bottom: 1px solid #E2E4E9;
  border-top: 1px solid #E2E4E9;
  padding: 20px 0;
}

.comment-overview p {
  margin-top: 0;
}

.comment-callout {
  color: #565E76;
  display: inline-block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 0;
}

.comment-callout a {
  color: #325399;
}

.comment-sorter {
  display: inline-block;
  float: right;
}

.comment-sorter .dropdown-toggle {
  color: #565E76;
  font-weight: 600;
  font-size: 13px;
}

[dir="rtl"] .comment-sorter {
  float: left;
}

.comment-wrapper {
  display: flex;
  position: relative;
}

.comment-wrapper.comment-official {
  border: 1px solid #214ECF;
  border-radius: 12px;
  padding: 40px 20px 20px;
}

@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}

.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}

.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}

.comment-avatar {
  margin-right: 10px;
}

[dir="rtl"] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.comment-meta {
  flex: 1 0 auto;
}

.comment-labels {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}

.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}

.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}

.comment-container {
  width: 100%;
}

.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}

@media (min-width: 768px) {
  [dir="ltr"] .comment-form-controls {
    text-align: right;
  }
}

.comment-form-controls input[type="submit"] {
  margin-top: 15px;
}

@media (min-width: 1024px) {
  .comment-form-controls input[type="submit"] {
    margin-left: 15px;
  }
  [dir="rtl"] .comment-form-controls input[type="submit"] {
    margin-left: 0;
    margin-right: 15px;
  }
}

.comment-form-controls input[type="checkbox"] {
  margin-right: 5px;
}

.comment-form-controls input[type="checkbox"] [dir="rtl"] {
  margin-left: 5px;
}

.comment-ccs {
  display: none;
}

.comment-ccs + textarea {
  margin-top: 10px;
}

.comment-attachments {
  margin-top: 10px;
}

.comment-attachments a {
  color: #325399;
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  line-height: 1.625;
  overflow-x: auto;
}

.comment-body img {
  height: auto;
  max-width: 100%;
}

.comment-body ul, .comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .comment-body ul, [dir="rtl"] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.comment-body ul > ul, .comment-body ol > ol, .comment-body ol > ul, .comment-body ul > ol, .comment-body li > ul, .comment-body li > ol {
  margin: 0;
}

.comment-body ul {
  list-style-type: disc;
}

.comment-body a:visited {
  color: #223766;
}

.comment-body code {
  background: #F0F1F4;
  border: 1px solid #C4C8D4;
  border-radius: 8px;
  padding: 0 5px;
  margin: 0 2px;
}

.comment-body pre {
  background: #F0F1F4;
  border: 1px solid #C4C8D4;
  border-radius: 8px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.comment-body blockquote {
  border-left: 3px solid #C4C8D4;
  color: #414758;
  font-style: normal;
  padding: 0 15px;
}

.comment-mark-as-solved {
  display: inline-block;
}


/***** Vote *****/
.vote {
  display: inline-block;
  text-align: center;
  width: 35px;
}

.vote a {
  outline: none;
}

.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #565E76;
  display: block;
  margin: 3px 0;
}

[dir="rtl"] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up:hover::before,
.vote-down:hover::before {
  color: #214ECF;
}

.vote-up::before, .vote-down::before {
  color: #565E76;
  font-size: 24px;
}

.vote-up::before   { content: "\2B06"; }
.vote-down::before { content: "\2B07"; }

.vote-voted::before {
  color: #214ECF;
}

.vote-voted:hover::before {
  color: #142F7C;
}


/***** Actions *****/
.actions {
  text-align: center;
  flex-shrink: 0;
}

.actions .dropdown-toggle {
  font-size: 0;
  margin: 15px 0;
}

.actions .dropdown-toggle:hover::before, .actions .dropdown-toggle:focus::before, .actions .dropdown-toggle:active::before {
  background-color: #F0F1F4;
}

.actions .dropdown-toggle::before {
  background-color: transparent;
  border-radius: 50%;
  color: #565E76;
  content: "\2699";
  display: block;
  font-size: 13px;
  margin: auto;
  padding: 5px;
}


/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01HZM0XT9QV58C6DB38F7960VF);
  margin-bottom: 10px;
}

.community-footer {
  padding-top: 50px;
  text-align: center;
}

.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}

.community-header {
  margin-bottom: 30px;
}

.community-header h4 {
  margin-bottom: 0;
}

.post-to-community {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

.topics {
  max-width: none;
  width: 100%;
}

.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

.topic-header {
  border-bottom: 1px solid #E2E4E9;
  font-size: 14px;
}

@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}

.topic-header .dropdown {
  display: block;
  border-top: 1px solid #E2E4E9;
  padding: 10px 0;
}

@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

.community-follow {
  margin-bottom: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}

.community-follow .dropdown {
  width: 100%;
}

.community-follow [role="button"] {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow [role="button"] {
    width: auto;
  }
}

.community-follow [role="button"]:hover {
  background-color: #214ECF;
}

.community-follow [role="button"]:hover::after, .community-follow [role="button"]:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.community-follow [role="button"][aria-selected="true"] {
  background-color: #214ECF;
  color: #FFFFFF;
}

.community-follow [role="button"][aria-selected="true"]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}

.community-follow [role="button"][aria-selected="true"]:hover {
  background-color: #142F7C;
  border-color: #142F7C;
}

.community-follow [role="button"]::after {
  border-left: 1px solid #214ECF;
  content: attr(data-follower-count);
  color: #214ECF;
  display: inline-block;
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}

@media (min-width: 768px) {
  .community-follow [role="button"]::after {
    position: static;
  }
}

[dir="rtl"] .community-follow [role="button"]::after {
  border-left: 0;
  border-right: 1px solid #214ECF;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}


/***** Striped list *****/
.striped-list {
  padding: 0;
}

.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #E2E4E9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}

.striped-list-info {
  flex: 2;
}

.striped-list-title {
  color: #325399;
  margin-bottom: 10px;
  margin-right: 5px;
}

.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}

.striped-list-title:visited {
  color: #223766;
}

.striped-list .meta-group {
  margin: 5px 0;
}

.striped-list-count {
  color: #565E76;
  font-weight: 600;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}

@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}

.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}

@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}

.striped-list-count-item:last-child::after {
  display: none;
}

.striped-list-number {
  font-weight: 600;
  text-align: center;
}

@media (min-width: 768px) {
  .striped-list-number {
    color: #2B2F3B;
    display: block;
    font-weight: 600;
  }
}


/***** Status labels *****/
.status-label {
  background-color: #3DA36D;
  border-radius: 9999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}

.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: #214ECF;
}

.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 8px 8px;
    right: 30px;
    width: auto;
  }
}

[dir="rtl"] .status-label-official {
  left: 30px;
  right: auto;
}

.status-label-not-planned, .status-label-closed {
  background-color: #E2E4E9;
  color: #414758;
}

.status-label-pending { background-color: #325399; text-align: center; }
.status-label-open    { background-color: #D44333; }
.status-label-solved  { background-color: #565E76; }
.status-label-new     { background-color: #EABB00; color: #5E4B00; }
.status-label-hold    { background-color: #2B2F3B; }

.status-label-open, .status-label-closed, .status-label-solved, .status-label-new, .status-label-hold, .status-label-answered {
  text-transform: lowercase;
}


/***** Post *****/
.post {
  flex: 1;
  margin-bottom: 10px;
}

@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}

.post-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}

.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}

.post-header .status-label {
  vertical-align: super;
}

.post-title {
  margin-bottom: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}

.post-title h1 {
  display: inline;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}

.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.post-avatar {
  margin-bottom: 30px;
}

.post-content {
  font-family: "Quicksand", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  line-height: 1.625;
  word-break: break-word;
}

.post-info-container {
  display: flex;
  margin-bottom: 40px;
}

.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}

[dir="rtl"] .post-info {
  padding-right: 0;
  padding-left: 20px;
}

.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}

[dir="rtl"] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}

.post-body img {
  height: auto;
  max-width: 100%;
}

.post-body ul, .post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}

[dir="rtl"] .post-body ul, [dir="rtl"] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

.post-body ul > ul, .post-body ol > ol, .post-body ol > ul, .post-body ul > ol, .post-body li > ul, .post-body li > ol {
  margin: 0;
}

.post-body ul {
  list-style-type: disc;
}

.post-body a:visited {
  color: #223766;
}

.post-body code {
  background: #F0F1F4;
  border: 1px solid #C4C8D4;
  border-radius: 8px;
  padding: 0 5px;
  margin: 0 2px;
}

.post-body pre {
  background: #F0F1F4;
  border: 1px solid #C4C8D4;
  border-radius: 8px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.post-body blockquote {
  border-left: 3px solid #C4C8D4;
  color: #414758;
  font-style: normal;
  padding: 0 15px;
}

.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.post-comment-count {
  color: #565E76;
  font-weight: 600;
}

.post-comment-count:hover {
  text-decoration: none;
}

.post-comment-count .icon-comments {
  color: #214ECF;
  content: "\1F4AC";
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.post-sidebar {
  border-top: 1px solid #E2E4E9;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}

@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir="rtl"] .post-sidebar {
    padding: 0 50px 0 0;
  }
}

.post-sidebar h5 {
  font-weight: 700;
}

@media (min-width: 1024px) {
  .post-sidebar h5 {
    border-bottom: 1px solid #E2E4E9;
    padding-bottom: 20px;
  }
}

.post-comments {
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}


/***** Collapsible navigation *****/
.collapsible-nav {
  border-bottom: 1px solid #E2E4E9;
  border-top: 1px solid #E2E4E9;
  flex-direction: column;
  max-height: 45px;
  overflow: hidden;
  font-size: 14px;
}

@media (min-width: 768px) {
  .collapsible-nav {
    border: 0;
    height: auto;
    flex-direction: row;
    max-height: none;
  }
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}

.collapsible-nav-list li {
  color: #2B2F3B;
  line-height: 45px;
  order: 1;
}

@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir="rtl"] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}

.collapsible-nav-list li a {
  color: #2B2F3B;
  display: block;
}

@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #C4C8D4;
  }
  .collapsible-nav-list li:hover a {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}

.collapsible-nav-list li[aria-selected="true"] {
  order: 0;
  position: relative;
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"] {
    border-bottom: 4px solid #214ECF;
    order: 1;
    padding: 15px 0 11px 0;
  }
}

.collapsible-nav-list li[aria-selected="true"] a {
  color: #2B2F3B;
}

.collapsible-nav-list li[aria-selected="true"]::after {
  content: "\25BE";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"]::after {
    display: none;
  }
}

[dir="rtl"] .collapsible-nav-list li[aria-selected="true"]::after {
  left: 0;
  right: auto;
}

.collapsible-nav[aria-expanded="true"] {
  max-height: none;
}

.collapsible-nav[aria-expanded="true"] li[aria-selected="true"]::after {
  content: "\2715";
}

.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}

.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
  content: "\2715";
}

@media (min-width: 1024px) {
  .collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
    display: none;
  }
}

.collapsible-sidebar-title {
  margin-top: 0;
}

.collapsible-sidebar-title::after {
  content: "\25BE";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 1024px) {
  .collapsible-sidebar-title::after {
    display: none;
  }
}

[dir="rtl"] .collapsible-sidebar-title::after {
  left: 10px;
  right: auto;
}


/***** My activities *****/
.my-activities-nav {
  background-color: #E2E4E9;
  border: 0;
  margin-bottom: 20px;
}

.my-activities-sub-nav {
  background-color: transparent;
  border-bottom: 1px solid #E2E4E9;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .my-activities-sub-nav li:hover {
    border-bottom: 4px solid #C4C8D4;
  }
}

.my-activities-sub-nav li[aria-selected="true"] {
  border-color: #214ECF;
}

.my-activities-table .striped-list-title {
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}

@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.my-activities-table thead {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}

.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}

.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}

.my-activities-table td:not(:first-child) {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}


/***** Requests *****/
.requests-search {
  width: 100%;
}

.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}

.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}

.requests-table-toolbar .request-table-filter {
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}

.requests-table-toolbar .request-filter {
  display: block;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}

.requests-table-toolbar .request-filter-label {
  font-size: 14px;
  margin-top: 30px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}

.requests-table-toolbar select {
  max-height: 44px;
  margin-bottom: 30px;
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}

.requests-table-toolbar .organization-subscribe,
.requests-table-toolbar .organization-unsubscribe {
  line-height: 40px;
  max-height: 44px;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe,
  .requests-table-toolbar .organization-unsubscribe {
    margin-left: 10px;
  }
  [dir="rtl"] .requests-table-toolbar .organization-subscribe, [dir="rtl"]
  .requests-table-toolbar .organization-unsubscribe {
    margin: 0 10px 0 0;
  }
}

.requests-table-toolbar .organization-unsubscribe {
  background-color: #214ECF;
  color: #FFFFFF;
}

.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}

.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}

.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}

.requests-table-toolbar + .requests {
  margin-top: 40px;
}

.requests .requests-table-meta {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}

.requests .requests-table thead {
  display: none;
}

@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}

.requests .requests-table-info {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}

.requests .requests-table .requests-link {
  position: relative;
}

.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

.subscriptions-unsubscribe a {
  background: #214ECF;
  border-radius: 12px;
  color: #FFFFFF;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  line-height: 2.34;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

@media (min-width: 768px) {
  .subscriptions-unsubscribe a {
    width: auto;
  }
}

.subscriptions-unsubscribe a:hover {
  background-color: #1A3EA6;
  text-decoration: none;
}

.subscriptions-table td:last-child {
  display: block;
}

@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}

.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}

.subscriptions-table .user-avatar {
  margin-right: 10px;
}

.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

.contributions-table td:last-child {
  color: #565E76;
  font-size: 13px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #565E76;
}


/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}

.request-container .comment-container {
  min-width: 0;
}

.request-breadcrumbs {
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}

.request-main {
  flex: 1 0 auto;
  order: 1;
}

.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}

.request-main .comment-fields.shown {
  display: block;
}

.request-main .request-submit-comment.shown {
  display: inline;
}

@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}

.request-main .comment-form-controls {
  display: block;
}

.request-main .comment-ccs {
  display: block;
}

.request-main .comment-show-container {
  border-radius: 8px;
  border: 1px solid #C4C8D4;
  color: #414758;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}

.request-main .comment-show-container.hidden {
  display: none;
}

.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid #214ECF;
}

.request-main .form-field.comment-ccs > input[type="text"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid #214ECF;
}

.request-main input#mark_as_solved {
  display: none;
}

.request-title {
  width: 100%;
}

@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #E2E4E9;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}

.request-sidebar {
  border-bottom: 1px solid #E2E4E9;
  border-top: 1px solid #E2E4E9;
  flex: 1 0 auto;
  order: 0;
}

@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #FFFFFF;
    border: 1px solid #C4C8D4;
    border-radius: 16px;
    font-size: 14px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}

.request-sidebar h5 {
  font-size: 15px;
  font-weight: 700;
  position: relative;
}

@media (min-width: 1024px) {
  .request-sidebar h5 {
    display: none;
  }
}

.request-details {
  border-bottom: 1px solid #E2E4E9;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}

.request-details:last-child {
  border: 0;
}

.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  margin: 20px 0 0 0;
}

.request-details dd {
  padding: 0 10px;
  width: 60%;
}

.request-details dd::after {
  content: "\A";
  white-space: pre;
}

.request-details dt {
  color: #565E76;
  font-weight: 600;
  width: 40%;
}

.request-details .request-collaborators {
  display: inline-block;
}

.request-attachments dt, .request-attachments dd {
  width: 100%;
}

.request-attachments dd {
  margin: 10px 0 0 0;
}

.request-form textarea {
  min-height: 120px;
}

.request-follow-up {
  padding-top: 20px;
}


/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}

.pagination * {
  display: inline-block;
}

.pagination li {
  border-radius: 50%;
  height: 40px;
  float: left;
  margin-left: 5px;
  width: 40px;
}

@media (min-width: 768px) {
  .pagination li {
    height: 30px;
    width: 30px;
  }
}

[dir="rtl"] .pagination li {
  float: right;
}

.pagination li:hover:not(.pagination-current) {
  background-color: #E2E4E9;
}

.pagination li:hover:not(.pagination-current) span, .pagination li:hover:not(.pagination-current) a {
  color: #2B2F3B;
  text-decoration: none;
}

.pagination a, .pagination span {
  font-size: 15px;
  color: #565E76;
  padding: 10px 12px;
}

@media (min-width: 768px) {
  .pagination a, .pagination span {
    font-size: 14px;
    padding: 5px 12px;
  }
}

.pagination-current {
  background-color: #214ECF;
}

.pagination-current a, .pagination-current span {
  color: #FFFFFF;
}

.pagination-first { border-radius: 8px 0 0 8px; }
[dir="rtl"] .pagination-first { border-radius: 0 8px 8px 0; }
.pagination-last  { border-radius: 0 8px 8px 0; }
[dir="rtl"] .pagination-last { border-radius: 8px 0 0 8px; }


/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #565E76;
  font-size: 14px;
  font-weight: 600;
}

.meta-data:not(:last-child)::after {
  content: "\00B7";
  margin: 0 5px;
}


/***** Icons *****/
[class^="icon-"]::before,
[class*=" icon-"]::before,
.icon,
.search::before,
.recent-activity-item-comment span::before,
.article-vote::before,
.attachments .attachment-item::before,
.share a::before,
.vote-up::before,
.vote-down::before,
.actions .dropdown-toggle::before,
.collapsible-nav-list li[aria-selected="true"]::after,
.collapsible-sidebar-title::after,
.search-result-votes::before,
.search-result-meta-count::before {
  font-family: "copenhagen-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  line-height: 1em;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

.icon-lock::before               { content: "\1F512"; }
.icon-star::before               { content: "\2605"; }
.icon-linkedin::before           { content: "\e900"; }
.icon-twitter::before            { content: "\e901"; }
.icon-facebook::before           { content: "\e903"; }
.icon-agent::before              { content: "\1F464"; }
.icon-close::before              { content: "\2715"; }
.icon-arrow-up::before           { content: "\2B06"; }
.icon-arrow-down::before         { content: "\2B07"; }
.icon-attachments::before        { content: "\1F4CE"; }
.icon-comments::before           { content: "\1F4AC"; }
.icon-search::before             { content: "\1F50D"; }
.icon-vote::before               { content: "\1F44D"; }
.icon-handle::before             { content: "\25BE"; }
.icon-check::before              { content: "\2713"; }
.icon-gear::before               { content: "\2699"; }
.icon-menu::before               { content: "\2630"; }
.icon-article::before            { content: "\1F4C4"; }
.icon-post::before               { content: "\1F4D4"; }
.icon-notification-alert::before   { content: "\26A0"; }
.icon-notification-error::before   { content: "\00D7"; }
.icon-notification-info::before    { content: "\2139"; }
.icon-notification-success::before { content: "\2714"; }


/***** User profiles *****/
.profile-header {
  padding: 30px 0;
  background-color: #FFFFFF;
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}

[dir="rtl"] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 65px;
  height: 65px;
}

.profile-avatar .icon-agent::before {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.profile-header .basic-info .name {
  margin: 0;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir="rtl"] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir="rtl"] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.profile-header .options [data-action="edit-profile"] {
  background-color: #214ECF;
  border: 0;
  color: #FFFFFF;
  line-height: normal;
  padding: 8px 20px;
  outline-color: #214ECF;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #565E76;
  font-weight: 600;
  flex: 0 0 100px;
  margin-right: 10px;
}

[dir="rtl"] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #E2E4E9;
  margin-top: 15px;
}

@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
  .profile-stats-activity .stat {
    flex-direction: column;
  }
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #E2E4E9;
}

@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
  .profile-stats-counters .stat {
    flex-direction: column;
  }
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
  .profile-stats-counters .stat {
    flex-direction: row;
  }
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px #214ECF;
  border-radius: 8px;
  color: #214ECF;
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}

.profile-private-badge::after {
  content: "\1f512";
  margin-left: 5px;
  font-family: "copenhagen-icons";
  vertical-align: middle;
  line-height: 15px;
}

@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #E2E4E9;
  border: 0;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}

@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #565E76;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #E2E4E9;
  font-size: 13px;
}

.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}

.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}

[dir="rtl"] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}

@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #E2E4E9;
}

@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir="rtl"] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #E2E4E9;
}

.profile-contribution-list > .profile-contribution::before {
  left: 0;
  position: absolute;
  font-size: 16px;
  color: #C4C8D4;
  font-family: "copenhagen-icons";
  line-height: 25px;
}

[dir="rtl"] .profile-contribution-list > .profile-contribution::before {
  right: 0;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}

[dir="rtl"] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}

@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}

[dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}

@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #565E76;
}

.profile-section .private-activity::before {
  content: "\1f512";
  font-family: "copenhagen-icons";
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  vertical-align: middle;
  margin-right: 10px;
}

[dir="rtl"] .profile-section .private-activity::before {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir="rtl"] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
  .profile-activity:not(:last-child) {
    border-left: 1px solid #E2E4E9;
  }
  [dir="rtl"] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #E2E4E9;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}

[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}

@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}

[dir="rtl"] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 700;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #F0F1F4;
}

@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir="rtl"] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity::before {
  position: absolute;
  left: 0;
  width: 28px;
  border-radius: 50%;
  content: "";
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #F0F1F4;
  background-position: 50% 50%;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #C4C8D4;
  font-family: "copenhagen-icons";
}

[dir="rtl"] .profile-activity::before {
  right: 0;
}

@media (min-width: 768px) {
  .profile-activity::before {
    left: -14px;
  }
  [dir="rtl"] .profile-activity::before {
    right: -14px;
  }
}

.profile-articles > .profile-contribution::before,
.profile-activity-list > li[class$="-article"]::before {
  content: "\1f4c4";
}

.profile-posts > .profile-contribution::before,
.profile-activity-list > li[class$="-post"]::before {
  content: "\1f4d4";
}

.profile-comments > .profile-contribution::before,
.profile-activity-list > li[class$="-comment"]::before {
  content: "\1f4ac";
  line-height: 35px;
}


/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}

.search-results-column {
  flex: 1;
}

@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 45%;
  }
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  border-bottom: 1px solid #E2E4E9;
  padding: 20px 0;
}

.search-results-list > li:first-child {
  border-top: 1px solid #E2E4E9;
}

.search-result-description {
  margin-top: 15px;
  word-break: break-word;
}

.search-result-votes, .search-result-meta-count {
  color: #565E76;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes::before, .search-result-meta-count::before {
  color: #214ECF;
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result-votes::before      { content: "\1F44D"; }
.search-result-meta-count::before { content: "\1F4AC"; }

.search-result .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

.search-result-breadcrumbs li:last-child::after {
  content: "·";
  display: inline-block;
  margin: 0 5px;
}

/* Non-latin search results highlight */
html[lang|="zh"] .search-result-description em {
  font-style: normal;
  background: #FBF1CC;
}

html[lang|="ar"] .search-result-description em,
html[lang|="bg"] .search-result-description em,
html[lang|="el"] .search-result-description em,
html[lang|="he"] .search-result-description em,
html[lang|="hi"] .search-result-description em,
html[lang|="ko"] .search-result-description em,
html[lang|="ja"] .search-result-description em,
html[lang|="ru"] .search-result-description em,
html[lang|="th"] .search-result-description em {
  font-style: normal;
  font-weight: 700;
}


/***** Notification banner (MW) *****/
.ns-box {
  position: relative;
  background: #F6D9D6;
  border-bottom: 1px solid #C4C8D4;
  color: #2B2F3B;
  font-size: 15px;
  line-height: 1.4;
  padding: 10px 20px 20px 20px;
  pointer-events: none;
  z-index: 1000;
}

.ns-box.ns-info {
  background: #DDE8FF;
}

.ns-box.ns-show, .ns-box.ns-visible {
  pointer-events: auto;
}

.ns-box a {
  color: #325399;
  font-weight: 700;
  opacity: 0.85;
}

.ns-box a:hover, .ns-box a:focus {
  opacity: 1;
}

.ns-box p {
  margin: 0;
}

.ns-close {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 4px;
  top: 20px;
  overflow: hidden;
  text-indent: 100%;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ns-close:hover, .ns-close:focus {
  outline: none;
}

.ns-close::before, .ns-close::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 60%;
  top: 50%;
  left: 50%;
  background: #414758;
}

.ns-close:hover::before, .ns-close:hover::after {
  background: #2B2F3B;
}

.ns-close::before {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg);
}

.ns-close::after {
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
  transform: translate(-50%,-50%) rotate(-45deg);
}

.ns-box-inner i {
  color: #2B2F3B;
  font-size: 3.8em;
}

.megaphone:before {
  content: '\1F4E3';
  font-family: "entypo";
  font-size: 2.2em;
}

.ns-box.ns-bar {
  top: 0;
  left: 0;
  width: 100%;
}

.ns-bar .ns-close {
  background: transparent;
  margin-top: 15px;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ns-bar .ns-close::before, .ns-bar .ns-close::after {
  background: #414758;
}

[class^="ns-effect-"].ns-bar.ns-hide,
[class*=" ns-effect-"].ns-bar.ns-hide {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.ns-effect-slidetop {
  box-shadow: inset 5.4em 0 rgba(43, 47, 59, 0.06);
}

.ns-effect-slidetop .icon {
  position: absolute;
  display: block;
  font-size: 109%;
  top: 50%;
  left: 1em;
  -webkit-transform: translate3d(0,-20%,0);
  transform: translate3d(0,-20%,0);
}

.ns-effect-slidetop p {
  padding: 0 3.2em;
  font-size: 1.1em;
  display: inline-block;
}

.ns-effect-slidetop .ns-close::before,
.ns-effect-slidetop .ns-close::after {
  width: 2px;
  background: #2B2F3B;
}

.ns-effect-slidetop.ns-show .icon,
.ns-effect-slidetop.ns-show p {
  -webkit-animation-name: animScaleUp;
  animation-name: animScaleUp;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.ns-effect-slidetop.ns-show p {
  -webkit-animation-name: animFade;
  animation-name: animFade;
}

@keyframes animScaleUp {
  0%   { opacity: 0; transform: translate3d(0,-50%,0) scale3d(0,0,1); }
  100% { opacity: 1; transform: translate3d(0,-50%,0) scale3d(1,1,1); }
}

.ns-effect-slidetop.ns-show,
.ns-effect-slidetop.ns-hide {
  -webkit-animation-name: animSlideTop;
  animation-name: animSlideTop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

@keyframes animSlideTop {
  0%   { transform: translate3d(0,-100%,0); }
  100% { transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .ns-effect-slidetop.ns-show,
  .ns-effect-slidetop.ns-hide,
  .ns-effect-slidetop.ns-show .icon,
  .ns-effect-slidetop.ns-show p {
    animation: none;
  }
}


/***** Footer submit-ticket panel *****/
.lt-py-7 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.lt-px-5 {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

.lt-footer-submit-ticket {
  background: #214ECF;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 20px 20px;
  border-radius: 16px;
}

.lt-footer-submit-ticket__title,
.lt-footer-submit-ticket__subtitle {
  color: #FFFFFF;
}

.lt-footer-submit-ticket__title h2,
.lt-footer-submit-ticket__subtitle h4 {
  color: #FFFFFF;
}

.lt-footer-submit-ticket__btn {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #214ECF;
}

.lt-footer-submit-ticket__btn:hover {
  background-color: #D3DCF5;
  color: #142F7C;
  text-decoration: none;
}

/* NOTE: the original version of this rule had a stray "a:-webkit-any-link"
   selector inside the declaration block, which silently broke everything
   after it. Repaired here. */
.lt-btn,
.lt-section-subscribe button,
.lt-article-subscribe button,
.lt-community-follow button,
.lt-profile__buttons button,
.lt-profile__buttons a,
.lt-requests-table-toolbar .organization-subscribe button,
.lt-subscriptions-subscribe button,
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link,
.recent-activity-controls a {
  background-image: none;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0;
  padding: 0.625rem 1rem;
  text-align: center;
  touch-action: manipulation;
  transition: all 0.3s ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}


/***** Role-based content blocks *****/
div.anonymous, div.end_user, div.agent, div.manager {
  width: 100%;
  text-align: center;
  display: none;
}


/***** Small screens *****/
/* Quicksand runs wider than Lato, and French headings run 15–20% longer
   than English. These are the places that overflow first. */
@media (max-width: 1023px) {
  .hero {
    padding: 48px 20px 52px;
  }
  .hero-inner h1,
  .hero-inner h2 {
    font-size: 36px;
    line-height: 40px;
  }
}

/* Below 900px the two controls stop fitting side by side — the search gets
   squeezed to a stub long before the phone breakpoint. Stack them here and
   let both run the full width. */
@media (max-width: 899px) {
  .hero-search-row {
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
  }
  .hero-search-row .search,
  .hero-search-row .search-full,
  .assistant-btn {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Full width on its own row, so the label sits centred rather than
     stranded against the left edge. */
  .assistant-btn {
    justify-content: center;
    padding: 0 18px;
  }
}

@media (max-width: 767px) {
  .hero-inner h1,
  .hero-inner h2 {
    font-size: 30px;
    line-height: 34px;
  }
  .hero-inner .hero-sub {
    font-size: 16px;
  }
  /* Comfortable tap target, and no iOS zoom-on-focus (needs 16px+) */
  .search input[type="search"],
  .hero-search-row input[type="search"] {
    font-size: 16px;
    height: 52px;
  }
  .blocks-list {
    grid-auto-rows: auto;
  }
}