@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* ======================================
   COLORS
   ====================================== */
/* Brand Colors */
/* Primary brand color - deep blue */
/* Highlight color - purple */
/* Accent color - light blue */
/* Borders, etc color - light blue */
/* Actions, e.g. button hovers, buttons, primary buttons, etc */
/* Default button color - uses brand color */
/* Darker version of brand color for button hover states */
/* Text Colors */
/* Default text color - black */
/* Lighter version of text color for secondary text elements */
/* Default color for form field text */
/* Slightly darker text color for focused form fields */
/* Text color for dark backgrounds - white */
/* Background & Surface Colors */
/* Light gray background shade - #f8f8f8 for default background_color */
/* Slightly darker gray - #f2f2f2 for default background_color */
/* Border Colors */
/* 3:1 contrast ratio with white. Use for controls and inputs */
/* Less than 3:1 contrast ratio. For non-interactive elements */
/* Light gray border for menu elements */
/* Light gray border color for link underlines */
/* Border color for system search bar */
/* ======================================
   TYPOGRAPHY
   ====================================== */
/* Font Sizes */
/* Largest standard text size */
/* Default body text size */
/* Size for navigation elements */
/* Size for less important text */
/* Size for auxiliary text */
/* Standard size for form inputs */
/* Font Weights */
/* Light font weight */
/* Regular font weight */
/* Medium font weight */
/* Semi-bold font weight */
/* Bold font weight */
/* Heavy font weight */
/* ======================================
   LAYOUT
   ====================================== */
/* Responsive Breakpoints */
/* First breakpoint of cards relative to screen width */
/* Standard tablet breakpoint */
/* Standard desktop breakpoint */
/* Maximum container width (bumped from 1160px) */
/* First breakpoint of side menu relative to screen width */
/* Extra large: Full hero with maximum spacing */
/* Medium: Tablet-optimized hero */
/* Border Radius */
/* Circular radius (for avatars, etc.) */
/* Large border radius */
/* Medium border radius */
/* Small border radius */
/* ======================================
   EFFECTS
   ====================================== */
/* Shadows */
/* Medium shadow for cards and elevated elements */
/* Inset shadow for pressed or inset elements */
/* Transitions */
/* Smooth transition for form input borders */
/* Hover Effects */
/* For survey bar, tables... */
/* Large scale transform for hover effects */
/* Small scale transform for hover effects */
/* Extra small scale transform for subtle hover effects */
/* ======================================
   GRADIENTS
   ====================================== */
/* Basic Gradients */
/* Pink to blue diagonal gradient */
/* White to light purple horizontal gradient */
/* Radial Gradients */
/* Blue radial gradient for bottom of page backgrounds */
/* Purple radial gradient for desktop viewport page headers */
/* Purple radial gradient for tablet viewport page headers */
/* Purple radial gradient for mobile viewport page headers */
/* Custom Styles */
/**
 * Creates a small rectangular container with rounded corners for profile images
 * The container is 20px wide and 30.25px tall with a 50px border radius
 * Images inside are positioned with negative margins to crop and center them
 */
/**
 * Styles links with Personio brand colors and a bottom border
 * On hover/focus/active states, changes color and border color
 * Removes default underline and sets medium font weight
 */
/**
 * Media query for screens with maximum width of $medium-width
 * Used to apply styles only on medium and smaller screens
 */
/**
 * Creates a translucent glass effect with blur
 * Uses rgba background with 21% opacity and backdrop filters
 */
/**
 * Creates a card component with consistent styling
 * @param {boolean} $hover - Whether to apply hover effects
 * 
 * Features:
 * - White background with shadow effects
 * - Large border radius and brand color text
 * - Optional glass effect when .glass class is added
 * - Enhanced shadow and text decoration on hover/focus/active (if $hover is true)
 */
/**
 * Applies responsive radial gradient backgrounds
 * Uses different gradient variables based on viewport size:
 * - Mobile: blue circle + mobile purple circle gradients
 * - Tablet: blue circle + tablet purple circle gradients
 * - Desktop: blue circle + desktop purple circle gradients
 * - Also handles max-medium breakpoint
 */
.article-toc {
  display: flex;
  flex-direction: column;
  width: 250px;
  gap: 2rem;
  font-size: 14px;
}
@media (max-width: 1023px) {
  .article-toc {
    order: 999;
    width: 100%;
  }
}

/* TOC (Table Of Content) */
ul.toc-list {
  padding-left: 0px;
}

.toc-list-item.is-active-li > a.toc-link:not(.title) {
  font-weight: 500;
}

.single-toc .toc-list-item:last-child a:before {
  height: 0;
}

.js-toc .toc-list-item .toc-list-item a {
  padding-bottom: 2rem;
}

.js-toc a.toc-link {
  display: block;
  position: relative;
  color: #000000;
  text-decoration: none;
}

.toc-sticky {
  position: sticky;
  top: 130px;
  height: fit-content;
  padding: 5px;
}

.toc-container {
  overflow: hidden;
  position: relative;
}
@media (max-width: 1023px) {
  .toc-container {
    display: none;
  }
}

a.toc-link::before {
  left: 9.5px;
}

a.is-active-link::before {
  background: #eee;
}

.toc-link::before {
  background-color: #eee;
  content: " ";
  display: inline-block;
  height: inherit;
  left: 0;
  margin-top: -1px;
  position: absolute;
  width: 2px;
  left: 11px;
  height: 120px;
}

a.toc-link::after {
  background: #f4f7f9;
  color: #555555;
  content: attr(data-after);
  display: inline-block;
  text-align: center;
  height: 20px;
  left: 0;
  top: 1px;
  margin-top: -1px;
  position: absolute;
  width: 20px;
  border-radius: 25px;
}

a.toc-link.empty-content::after {
  content: none;
}

a.toc-link.is-active-link::after {
  background: #1359ec;
  color: white;
}

.toc-link.title {
  font-weight: bold;
  padding-bottom: 30px;
  font-size: 17px;
}

.toc-link.title::before,
.toc-link.title::after {
  content: none;
}

ul.toc-list > li.toc-list-item > .toc-link-internal,
.single-toc .toc-list-item a,
.toc-link-internal-single {
  padding: 0 0 38px 30px;
}

ul.toc-list > li.toc-list-item:last-child > .toc-link-internal:before {
  height: 0;
}

ul.toc-list > li.toc-list-item:last-child > .toc-link-internal-single:before {
  height: inherit;
}

.acc-section .title {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  cursor: pointer;
  padding: 20px;
  font-size: 16px;
  margin-bottom: 20px;
  background-color: white;
  font-weight: 600;
}
.acc-section .title.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.acc-section .title:hover, .acc-section .title:focus, .acc-section .title:active {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), inset 0 0 30px #ffffff;
}
.acc-section .title:hover *, .acc-section .title:focus *, .acc-section .title:active * {
  text-decoration: none;
}

.acc-section .title::before {
  content: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.53125 1C6.21875 0.71875 5.75 0.71875 5.46875 1L1.21875 5.25C0.90625 5.5625 0.90625 6.03125 1.21875 6.3125L1.90625 7.03125C2.21875 7.3125 2.6875 7.3125 2.96875 7.03125L6 4L9 7.03125C9.28125 7.3125 9.78125 7.3125 10.0625 7.03125L10.7812 6.3125C11.0625 6.03125 11.0625 5.5625 10.7812 5.25L6.53125 1Z' fill='%23A5A5A5'/%3E%3C/svg%3E%0A");
  padding-right: 16px;
}

.acc-section.collapsed > .title::before {
  content: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.46875 7.03125C5.75 7.3125 6.21875 7.3125 6.5 7.03125L10.75 2.78125C11.0625 2.46875 11.0625 2 10.75 1.71875L10.0625 1C9.75 0.71875 9.28125 0.71875 9 1L5.96875 4.03125L2.96875 1C2.6875 0.71875 2.21875 0.71875 1.90625 1L1.21875 1.71875C0.90625 2 0.90625 2.46875 1.21875 2.78125L5.46875 7.03125Z' fill='%23A5A5A5'/%3E%3C/svg%3E%0A");
}

.acc-section .details:not([hidden]) {
  margin-bottom: 66px;
  display: block;
}

.article-date {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  padding: 25px 10px;
  text-align: center;
}
.article-date.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}

.center-image {
  width: 100%;
}
.center-image > img {
  margin: 0 auto;
}

a.community_link,
a.community_link:visited {
  background: #1359ec;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 2rem;
  text-decoration: none;
}
a.community_link:hover,
a.community_link:visited:hover {
  background: #0a2e76;
  color: #ffffff;
  text-decoration: none;
}

/*
 Styled brandfolder CDN images 
 Rounded border + Background Shadow
*/
div.article-body p:has(img.no-cache):has(:only-child),
p img[src*="/hc/article_attachments"],
p img[src*="/hc/article_attachments"] {
  display: inline-block;
  position: relative;
  padding: 0px;
  border-radius: 20px;
  background-color: transparent;
}

div.article-body p:has(:only-child) > img.no-cache,
div.article-body img[src*="/hc/article_attachments"] {
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  height: auto;
  display: block;
}

.voyage-searchbar-container.large {
  width: 450px;
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  .voyage-searchbar-container.large {
    width: 100%;
    margin: 0 auto;
  }
}
#global-article-callout {
  margin-bottom: 20px;
}

/**
* Custom Text Tooltips on text-hover
*/
span.tooltip {
  /* 
    border-bottom can be changed.
    Decorates the tooltipped text with a dotted line. You can try different colors and sizes 
  */
  border-bottom: 1px dotted black;
  /* Don't edit this */
  position: relative;
  display: inline-block;
}

/**
* CSS Tooltip by W3 Schools
* https://www.w3schools.com/css/css_tooltip.asp
*/
span.tooltip::before {
  color: #fff;
  bottom: 2em;
  content: attr(data-tooltip);
  visibility: hidden;
  position: absolute;
  width: fit-content;
  text-align: center;
  padding: 6px 8px;
  border-radius: 4px;
  z-index: 1;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(15px);
  outline: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: black;
  opacity: 0;
}

.footer-top {
  color: #000000;
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
  background-color: rgba(255, 255, 255, 0.6);
}
.footer-top .footer-inner {
  display: flex;
  flex-direction: row;
}
@media (max-width: 768px) {
  .footer-top .footer-inner {
    flex-direction: column;
    padding: 2em;
    gap: 2rem;
  }
}
.footer-top a,
.footer-top a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.footer-top a:visited,
.footer-top a:visited:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.footer-top a:hover, .footer-top a:focus, .footer-top a:active,
.footer-top a:visited:hover,
.footer-top a:visited:focus,
.footer-top a:visited:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}
.footer-top h3 {
  margin-bottom: 1rem;
}
.footer-top p {
  margin: 0;
}

.footer-bottom {
  background-color: black;
  color: white;
  padding: 20px 0;
  display: flex;
  min-height: 120px;
}
.footer-bottom .footer-inner {
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 2rem;
}
@media (max-width: 768px) {
  .footer-bottom .footer-inner {
    flex-direction: column;
    margin: 0;
    padding: 2em;
  }
}
@media (min-width: 768px) {
  .footer-bottom {
    padding-bottom: 100px;
  }
}
@media (max-width: 768px) {
  .footer-bottom {
    min-height: 300px;
    padding-bottom: 100px;
  }
}
.footer-bottom a,
.footer-bottom a:visited,
.footer-bottom a:active,
.footer-bottom a:hover {
  color: white;
}

/* Bold */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5HH2ERH0FTFMN273EMSR) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Bold Italic */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5FDNS2PE9P84HHX5GB6M) format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Heavy */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5FSFASY1HMBYPRCM2Q26) format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Heavy Italic */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5FGTEVME2639DQDG3M8P) format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
/* Light */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5F47HE1WY5TMJJRFVQ0J) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* Light Italic */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5F07SYMEB23Q85P0GYXY) format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* Medium */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5G87SNXY12DGP7N7QRE7) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Medium Italic */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5GF8ZHDX6PN2SP1W10FF) format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* Regular */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5GZSPW41HYH0QQVZD37X) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Regular Italic */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5FPV1RP4AB235RK01VWG) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Semibold */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5H1S23MMXD9B0D6GRHCK) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Semibold Italic */
@font-face {
  font-family: "FT Regola Neue";
  src: url(/hc/theming_assets/01JNPB5FX9RVK1EERJBEZYAP0Q) format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01JRW1F1K0ENEWMA0YQB70YJ8J) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01JRW1F1DNGP7D5A01QYHPVDYJ) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01JRW1F1YA2AR4F698BZZG9YP8) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01JRW1F1WR6M99X9EKX1AXFXGM) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01JRW1F1PC41SZY1P14Q5RKQNB) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01JRW1F1HHC3MNS945PJNH7MM7) format("woff2");
}
.search_section {
  padding: 0 30px;
}

.system-search {
  margin-bottom: 2rem;
  padding: 0;
}
.system-search .search:before {
  font-family: "FontAwesome";
  content: "\f002";
  color: #a7a7a7;
  font-size: 1em;
  position: absolute;
  left: 15px;
  top: 8px;
}

.acc-section .title {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  cursor: pointer;
  padding: 20px;
  font-size: 16px;
  margin-bottom: 20px;
  background-color: white;
  font-weight: 600;
}
.acc-section .title.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.acc-section .title:hover, .acc-section .title:focus, .acc-section .title:active {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), inset 0 0 30px #ffffff;
}
.acc-section .title:hover *, .acc-section .title:focus *, .acc-section .title:active * {
  text-decoration: none;
}

.acc-section .title::before {
  content: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.53125 1C6.21875 0.71875 5.75 0.71875 5.46875 1L1.21875 5.25C0.90625 5.5625 0.90625 6.03125 1.21875 6.3125L1.90625 7.03125C2.21875 7.3125 2.6875 7.3125 2.96875 7.03125L6 4L9 7.03125C9.28125 7.3125 9.78125 7.3125 10.0625 7.03125L10.7812 6.3125C11.0625 6.03125 11.0625 5.5625 10.7812 5.25L6.53125 1Z' fill='%23A5A5A5'/%3E%3C/svg%3E%0A");
  padding-right: 16px;
}

.acc-section.collapsed > .title::before {
  content: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.46875 7.03125C5.75 7.3125 6.21875 7.3125 6.5 7.03125L10.75 2.78125C11.0625 2.46875 11.0625 2 10.75 1.71875L10.0625 1C9.75 0.71875 9.28125 0.71875 9 1L5.96875 4.03125L2.96875 1C2.6875 0.71875 2.21875 0.71875 1.90625 1L1.21875 1.71875C0.90625 2 0.90625 2.46875 1.21875 2.78125L5.46875 7.03125Z' fill='%23A5A5A5'/%3E%3C/svg%3E%0A");
}

.acc-section .details:not([hidden]) {
  margin-bottom: 66px;
  display: block;
}

.article-toc {
  display: flex;
  flex-direction: column;
  width: 250px;
  gap: 2rem;
  font-size: 14px;
}
@media (max-width: 1023px) {
  .article-toc {
    order: 999;
    width: 100%;
  }
}

/* TOC (Table Of Content) */
ul.toc-list {
  padding-left: 0px;
}

.toc-list-item.is-active-li > a.toc-link:not(.title) {
  font-weight: 500;
}

.single-toc .toc-list-item:last-child a:before {
  height: 0;
}

.js-toc .toc-list-item .toc-list-item a {
  padding-bottom: 2rem;
}

.js-toc a.toc-link {
  display: block;
  position: relative;
  color: #000000;
  text-decoration: none;
}

.toc-sticky {
  position: sticky;
  top: 130px;
  height: fit-content;
  padding: 5px;
}

.toc-container {
  overflow: hidden;
  position: relative;
}
@media (max-width: 1023px) {
  .toc-container {
    display: none;
  }
}

a.toc-link::before {
  left: 9.5px;
}

a.is-active-link::before {
  background: #eee;
}

.toc-link::before {
  background-color: #eee;
  content: " ";
  display: inline-block;
  height: inherit;
  left: 0;
  margin-top: -1px;
  position: absolute;
  width: 2px;
  left: 11px;
  height: 120px;
}

a.toc-link::after {
  background: #f4f7f9;
  color: #555555;
  content: attr(data-after);
  display: inline-block;
  text-align: center;
  height: 20px;
  left: 0;
  top: 1px;
  margin-top: -1px;
  position: absolute;
  width: 20px;
  border-radius: 25px;
}

a.toc-link.empty-content::after {
  content: none;
}

a.toc-link.is-active-link::after {
  background: #1359ec;
  color: white;
}

.toc-link.title {
  font-weight: bold;
  padding-bottom: 30px;
  font-size: 17px;
}

.toc-link.title::before,
.toc-link.title::after {
  content: none;
}

ul.toc-list > li.toc-list-item > .toc-link-internal,
.single-toc .toc-list-item a,
.toc-link-internal-single {
  padding: 0 0 38px 30px;
}

ul.toc-list > li.toc-list-item:last-child > .toc-link-internal:before {
  height: 0;
}

ul.toc-list > li.toc-list-item:last-child > .toc-link-internal-single:before {
  height: inherit;
}

/************************/
/* Start Generate Roles */
/************************/
/* Roles tiles */
.roles.container {
  text-align: center;
}

.search-role-title {
  font-size: 20px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 30px;
}

.role-button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  gap: 20px 15px;
  max-width: 750px;
}

.role-button-container .role-button {
  font-size: 14px;
  background: white;
  border: 1px solid #d8dcde;
  border-radius: 20px;
  font-weight: bold;
  color: #161616;
  padding: 10px 16px;
  cursor: pointer;
}

.role-button-container .role-button:hover,
.role-button-container .role-button.active {
  background: #1359ec;
  color: white;
}

/* Landing category section */
.sections-api.container {
  margin-top: 50px;
  margin-bottom: 50px;
}

#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading-text {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  color: #161616;
  text-align: center;
  margin-top: 25px;
}

.spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #000;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.spinner::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-bottom: 4px solid #7c8fff;
  border-left: 4px solid transparent;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Landing promoted articles section */
section.promoted-articles {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  order: 1;
  margin-bottom: 60px;
  background-color: rgba(233, 235, 248, 0.4);
}

.promoted-articles-title {
  padding: 2rem;
  border-right: 1px solid #6f6f6f;
  height: 100%;
}
@media (max-width: 768px) {
  .promoted-articles-title {
    padding: 0;
    border: none;
  }
}

ul.promoted-articles-list {
  list-style: none;
  padding-left: 2rem;
}
@media (max-width: 768px) {
  ul.promoted-articles-list {
    padding: 0;
  }
}
ul.promoted-articles-list a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
ul.promoted-articles-list a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
ul.promoted-articles-list a:hover, ul.promoted-articles-list a:focus, ul.promoted-articles-list a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}

.promoted-articles-list li {
  text-align: left;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .promoted-articles-list li {
    margin-bottom: 1rem;
  }
}

.promoted-articles-list span {
  font-size: 17px;
  color: black;
  font-weight: 400;
}

/* Landing academy and community  */
section.academy {
  order: 2;
  margin-bottom: 80px;
}

section.community {
  order: 3;
  margin-bottom: 0;
}

.content-section-title {
  margin-bottom: 50px;
  text-align: center;
}

section.community .blocks-item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin: auto;
}

section.posts li.blocks-item {
  align-items: center;
  padding: 20px;
  min-height: auto;
}

section.posts li.blocks-item:hover {
  cursor: hover;
  transform: scale(1.02);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

section.posts li.blocks-item:hover a {
  color: inherit;
}

section.posts li.blocks-item .blocks-item-title {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 20px;
  color: black;
  text-decoration: none;
}

section.posts li.blocks-item .blocks-item-title:visited {
  color: #151414;
}

section.posts li.blocks-item .blocks-item-title:hover {
  color: inherit;
}

section.academy .blocks-item-image {
  align-self: center;
}

section.hidden {
  display: none !important;
}

.content-section-list.custom-block-list a {
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
  font-weight: 500;
  font-size: 14px;
  align-items: center;
  justify-content: start;
}
.content-section-list.custom-block-list .custom-block-item {
  height: fit-content;
  width: 100%;
}
.content-section-list.custom-block-list .custom-block-item-image {
  position: initial;
}

/************************/
/*  End Generate Roles  */
/************************/
button[data-gtm-id="web-components::voyage-search::mock-search-bar::invoke-search-button"] {
  background-color: white !important;
}

/*
#TODO: Update Voyage Search to use parent font families
*/
#voyage-search-dialog-container a,
#voyage-search-dialog-container p,
#voyage-search-dialog-container h1,
#voyage-search-dialog-container h2,
#voyage-search-dialog-container h3,
#voyage-search-dialog-container h4,
#voyage-search-dialog-container h5,
#voyage-search-dialog-container ul,
#voyage-search-dialog-container li,
#voyage-search-dialog-container span,
#voyage-search-dialog-container button,
#voyage-search-dialog-container strong,
#voyage-search-dialog-container b,
#voyage-search-dialog-container u {
  font-family: "Inter" !important;
}

/*
#TODO: Update Mega Menu to inherit parent font families
*/
.octopus-mega-menu a,
.octopus-mega-menu p,
.octopus-mega-menu h1,
.octopus-mega-menu h2,
.octopus-mega-menu h3,
.octopus-mega-menu h4,
.octopus-mega-menu h5,
.octopus-mega-menu ul,
.octopus-mega-menu li,
.octopus-mega-menu span,
.octopus-mega-menu button,
.octopus-mega-menu strong,
.octopus-mega-menu b,
.octopus-mega-menu u {
  font-family: "Inter" !important;
}

.custom-block-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
  list-style: none;
  gap: 2rem;
  padding: 0;
  margin: 0 auto;
  margin-top: 70px;
  margin-bottom: 4rem;
  max-width: 940px;
}
.custom-block-list .custom-block-item {
  height: 199px;
  flex: 1 0 280px;
  max-width: 280px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 30px;
  flex-wrap: wrap;
  position: relative;
}
.custom-block-list .custom-block-item.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.custom-block-list .custom-block-item:hover, .custom-block-list .custom-block-item:focus, .custom-block-list .custom-block-item:active {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), inset 0 0 30px #ffffff;
}
.custom-block-list .custom-block-item:hover *, .custom-block-list .custom-block-item:focus *, .custom-block-list .custom-block-item:active * {
  text-decoration: none;
}
.custom-block-list .custom-block-item-title {
  font-weight: 700;
  font-size: 17px;
  color: #000000;
  min-width: 230px;
  text-decoration: none;
}
.custom-block-list .custom-block-item-image {
  width: 50px;
  height: auto;
  position: absolute;
  bottom: 30px;
  left: 30px;
}
.custom-block-list .custom-block-item-link {
  background: #fff;
  padding: 8px 16px;
  display: flex;
  border: 1px solid #d8dcde;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  color: #000000;
  margin-bottom: 2rem;
  cursor: pointer;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
  margin-bottom: 0;
  position: absolute;
  bottom: 30px;
  right: 30px;
}
.custom-block-list .custom-block-item-link:hover {
  text-decoration: none;
  background-color: #1359ec;
  color: white;
  transition: all 0.1s;
}
.custom-block-list .custom-block-item-link:focus {
  background: #fff;
  color: #000000;
}
@media (max-width: 768px) {
  .custom-block-list .custom-block-item {
    max-width: 90%;
  }
}

.article-body .tipp {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.7);
  padding: 25px;
  border-radius: 16px;
  box-shadow: 2px 2px 8px -2px rgba(0, 0, 0, 0.4);
  /*
    When a callout is at the top of an article,
    the spacing between the heading and the callout is too small.

    Addressed by adding a margin-top when the callout is the first child of `.article-body`.
  */
}
.article-body .tipp.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.article-body .tipp:first-child {
  margin-top: 1rem;
}
.article-body .tipp:before {
  font-family: "FontAwesome";
  content: "\f05a";
  margin-right: 1rem;
  color: #1359ec;
  font-size: 16px;
}

.notice {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.7);
  padding: 25px;
  border-radius: 16px;
  box-shadow: 2px 2px 8px -2px rgba(0, 0, 0, 0.4);
  /*
    When a callout is at the top of an article,
    the spacing between the heading and the callout is too small.

    Addressed by adding a margin-top when the callout is the first child of `.article-body`.
  */
}
.notice.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.notice:first-child {
  margin-top: 1rem;
}
.notice:before {
  font-family: "FontAwesome";
  content: "\f071";
  margin-right: 1rem;
  color: #ffa319;
  font-size: 16px;
}

.callout {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.7);
  padding: 25px;
  border-radius: 16px;
  box-shadow: 2px 2px 8px -2px rgba(0, 0, 0, 0.4);
  /*
    When a callout is at the top of an article,
    the spacing between the heading and the callout is too small.

    Addressed by adding a margin-top when the callout is the first child of `.article-body`.
  */
}
.callout.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.callout:first-child {
  margin-top: 1rem;
}
.callout a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.callout a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.callout a:hover, .callout a:focus, .callout a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}

.callout--warning:before {
  font-family: "FontAwesome";
  content: "\f071";
  margin-right: 1rem;
  color: #ffa319;
  font-size: 16px;
}

.callout--disclaimer:before {
  font-family: "FontAwesome";
  content: "\f7d9";
  margin-right: 1rem;
  color: #1359ec;
  font-size: 16px;
}

.callout--academy:before {
  font-family: "FontAwesome";
  content: "\f19d";
  margin-right: 1rem;
  color: #1359ec;
  font-size: 16px;
}

.callout--success:before {
  font-family: "FontAwesome";
  content: "\f058";
  margin-right: 1rem;
  color: #74c970;
  font-size: 16px;
}

.callout--info:before,
.callout--legal:before,
.callout--primary:before {
  font-family: "FontAwesome";
  content: "\f05a";
  margin-right: 1rem;
  color: #1359ec;
  font-size: 16px;
}

.callout--danger:before {
  font-family: "FontAwesome";
  content: "\f06a";
  margin-right: 1rem;
  color: #ec4a3f;
  font-size: 16px;
}

.callout--growth:before {
  font-family: "FontAwesome";
  content: "\f135";
  margin-right: 1rem;
  color: #1359ec;
  font-size: 16px;
}

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

.callout--transparent {
  background-color: transparent;
  border-width: 1px;
}

.callout__title {
  color: #0a2e76;
  font-size: 1.5rem;
}

/*
  Custom Sticky Rating Footer
*/
/* Container styles */
.sticky-rating-footer-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  display: none;
  backdrop-filter: blur(5px);
  z-index: 10;
  background-color: #0a2e76cc;
  /* No border when BG is not white 
  border-top: 1px solid rgb(206, 206, 206); 
  */
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}

/* Layout components */
.sticky-rating-footer {
  position: relative;
  height: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2em;
}

.rating-button-container,
.rating-button-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.rating-button-container {
  gap: 0.5em;
}

.rating-button-content {
  gap: 0.5em;
}

.close-survey-button {
  position: absolute;
  right: 16px;
  cursor: pointer;
  font-size: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: color 0.2s;
}

/* Typography */
.sticky-rating-header {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

.rating-icon {
  font-size: 20px;
}

/* Button styles */
.sticky-rating-button {
  display: block;
  width: 80px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  cursor: pointer;
}

/*
Used with bg:white in container
.sticky-rating-button.active {
  border: none;
  background: rgb(0, 125, 248);
  background: linear-gradient(
    360deg,
    rgb(0, 125, 248) 35%,
    rgb(255, 255, 255) 210%
  );
  background-blend-mode: overlay;
  box-shadow: 0px 1px 2px 0px #007df84d;
}
*/
.sticky-rating-button.inactive,
.sticky-rating-button.active {
  border: none;
  background: white;
  color: black;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.0784313725);
}

.sticky-rating-button.inactive:hover,
.sticky-rating-button.active:hover {
  background: #f5f5f5;
}

.close-survey-button:hover {
  transform: scale(1.1);
}

/* Mobile styles */
@media screen and (max-width: 700px) {
  .sticky-rating-footer {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  .rating-button-container {
    gap: 2rem;
  }
  .sticky-rating-header,
  .sticky-rating-button {
    font-size: 16px;
  }
  .sticky-rating-button {
    padding: 8px 10px;
  }
}
.chip {
  font-size: 12px;
  padding: 2px 12px;
  border-radius: 25px;
  font-weight: 700;
}

.chip.sm {
  font-size: 10px;
}

.chip.md {
  font-size: 12px;
}

.chip.lg {
  font-size: 14px;
}

.chip.xl {
  font-size: 16px;
}

.chip.coral {
  background-color: #ffdedb;
  color: #872a22;
}

.chip.tangerine {
  color: #6f4506;
  background-color: #ffefd6;
}

.chip.lemon {
  color: #705800;
  background-color: #fff4cc;
}

.chip.tangerine {
  color: #6f4506;
  background-color: #ffefd6;
}

.chip.sun {
  color: #575100;
  background-color: #fffccc;
}

.chip.lime {
  color: #475c0a;
  background-color: #f0fad1;
}

.chip.mint {
  color: #335a0c;
  background-color: #e8f9d7;
}

.chip.spring {
  color: #0d593b;
  background-color: #dafbee;
}

.chip.arctic {
  color: #005466;
  background-color: #e0faff;
}

.chip.azure {
  color: #00477a;
  background-color: #e0f2ff;
}

.chip.cornflower {
  color: #19418f;
  background-color: #e0ebff;
}

.chip.tortilla {
  background-color: #f6f2e9;
  color: #624f28;
}

.chip.watermelon {
  background-color: #ffe0e7;
  color: #661929;
}

.chip.rose {
  background-color: #ffe0f5;
  color: #6b2453;
}

.chip.orchid {
  background-color: #f2e5ff;
  color: #522287;
}

.chip.amethyst {
  background-color: #eae5ff;
  color: #382a7e;
}

.chip.green {
  background-color: #cbf5e3;
  color: #255f52;
}

.chip.blue {
  background-color: #d7eeff;
  color: #315297;
}

.chip.indigo {
  background-color: #e3e8ff;
  color: #373c85;
}

.chip.purple {
  background-color: #ede3ff;
  color: #361574;
}

.chip.pink {
  background-color: #ffdaee;
  color: #83225f;
}

.chip.yellow {
  background-color: #fcf08f;
  color: #633807;
}

.container.new-request-page {
  margin-top: 8rem;
  padding-bottom: 8rem;
  /* #TODO: Needs refactoring, workaround */
}
.container.new-request-page .form {
  margin: 0 auto;
}
.container.new-request-page h1 {
  display: none;
}
.container.new-request-page .hidden {
  display: none;
}
.container.new-request-page .callout {
  margin: 0;
  margin-bottom: 10px;
}
.container.new-request-page .submit-button {
  background: #fff;
  padding: 8px 16px;
  display: flex;
  border: 1px solid #d8dcde;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  color: #000000;
  margin-bottom: 2rem;
  cursor: pointer;
  text-decoration: none;
  color: white;
  border: none;
  padding: 12px 18px;
  font-weight: 500;
  font-size: 17px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), #308dff;
  box-shadow: 0px 1px 2px rgba(0, 125, 248, 0.3);
  border-radius: 8px;
}
.container.new-request-page .submit-button:hover {
  text-decoration: none;
  background-color: #1359ec;
  color: white;
  transition: all 0.1s;
}
.container.new-request-page .submit-button:focus {
  background: #fff;
  color: #000000;
}

.custom-error-page {
  background: url(/hc/theming_assets/01JQ3QJN12JYEXM3H4KTT8HMG7);
  height: 100vh;
  width: auto;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.custom-error-page .custom-error-container {
  margin-top: 4rem;
  padding: 1rem;
  position: relative;
  color: #0a2e76;
}
.custom-error-page .custom-error-container a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.custom-error-page .custom-error-container a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.custom-error-page .custom-error-container a:hover, .custom-error-page .custom-error-container a:focus, .custom-error-page .custom-error-container a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}
.custom-error-page .custom-error-container h1 {
  font-size: 4rem;
}
.custom-error-page .custom-error-container h2 {
  font-size: 2rem;
}
.custom-error-page .custom-error-container p {
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .custom-error-page .custom-error-container {
    margin-top: 50%;
    max-width: 90%;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
    border-radius: 16px;
    color: #000000;
    transition: 0.2s;
  }
  .custom-error-page .custom-error-container.glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(7.4px);
    -webkit-backdrop-filter: blur(7.4px);
  }
}
.custom-error-page .error-sun-container {
  position: absolute;
  right: 10%;
  top: 10%;
}

/* 
 May or may not be needed in the future.
 Not in use right now in favour of the `card-table` mixin in `./custom/mixins`
*/
.table--card {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background-color: rgba(255, 255, 255, 0.8784313725);
  border-radius: 12px;
  margin-bottom: 2rem;
}
.table--card.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.table--card thead th {
  font-size: 17px;
}
.table--card tr:last-child {
  border-bottom: none;
}
@media (max-width: 768px) {
  .table--card tbody tr {
    padding: 2rem;
  }
  .table--card thead tr {
    padding: 2rem;
  }
}

.article-labels-container {
  display: flex;
  gap: 8px;
  margin: 3% 0;
}
@media (max-width: 768px) {
  .article-labels-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.article-labels-container .article-label {
  padding: 3px 8px;
  font-size: 12px;
  background-color: #0a2e76;
  color: white;
  border-radius: 9999px;
  font-weight: 700;
}

.accordion {
  border-radius: 12px;
  padding-top: 0;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  margin-bottom: calc(16px * 1.5);
}
.accordion.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.accordion .accordion__item:first-child .accordion__item-title {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.accordion__item-title {
  position: relative;
  padding: 15px 20px 15px 52px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.accordion__item-title:before {
  left: 22px;
  top: 45%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-bottom: 2px solid #000000;
  border-left: 2px solid #000000;
  transform: rotate(-45deg);
  transition: transform 0.3s;
  content: "";
  position: absolute;
}
.accordion__item-title--active {
  background-color: #ebf3fd;
}
.accordion__item-title--active:before {
  transform: rotate(135deg);
  transform-origin: center;
  transition: transform 0.3s;
  top: 50%;
}
.accordion__item-title:not(.accordion__item-title--active) {
  border-bottom: 1px solid #ddd;
}

.accordion__item-content {
  display: none;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.accordion__item-content p:last-child {
  margin-bottom: 0;
}

.accordion-title {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  cursor: pointer;
  padding: 20px;
  font-size: 16px;
  margin: 0;
  margin-bottom: 20px;
  background-color: white;
  font-weight: 600;
}
.accordion-title.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.accordion-title:hover, .accordion-title:focus, .accordion-title:active {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), inset 0 0 30px #ffffff;
}
.accordion-title:hover *, .accordion-title:focus *, .accordion-title:active * {
  text-decoration: none;
}
.accordion-title::before {
  content: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.53125 1C6.21875 0.71875 5.75 0.71875 5.46875 1L1.21875 5.25C0.90625 5.5625 0.90625 6.03125 1.21875 6.3125L1.90625 7.03125C2.21875 7.3125 2.6875 7.3125 2.96875 7.03125L6 4L9 7.03125C9.28125 7.3125 9.78125 7.3125 10.0625 7.03125L10.7812 6.3125C11.0625 6.03125 11.0625 5.5625 10.7812 5.25L6.53125 1Z' fill='%23A5A5A5'/%3E%3C/svg%3E%0A");
  padding-right: 16px;
}

.accordion-section.collapsed .accordion-title::before {
  content: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.46875 7.03125C5.75 7.3125 6.21875 7.3125 6.5 7.03125L10.75 2.78125C11.0625 2.46875 11.0625 2 10.75 1.71875L10.0625 1C9.75 0.71875 9.28125 0.71875 9 1L5.96875 4.03125L2.96875 1C2.6875 0.71875 2.21875 0.71875 1.90625 1L1.21875 1.71875C0.90625 2 0.90625 2.46875 1.21875 2.78125L5.46875 7.03125Z' fill='%23A5A5A5'/%3E%3C/svg%3E%0A");
}

.accordion-content {
  display: block;
}
.accordion-content[hidden=until-found] {
  display: revert;
}

.accordion-section.collapsed .accordion-content:not([hidden]) {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  margin-bottom: 0;
}

.sections-and-categories-container {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
  margin-bottom: 8rem;
}
.sections-and-categories-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .sections-and-categories-content {
    flex: 0 0 80%;
  }
}
.sections-and-categories-content .container-divider {
  margin-bottom: 1rem;
}

.content-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 1.1rem;
}
@media (min-width: 768px) {
  .content-tree {
    flex-direction: row;
  }
}
.content-tree .content {
  flex: initial;
  max-width: 100%;
  padding: 0;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .content-tree .content {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.content-tree-title {
  margin-bottom: 14px;
}
.content-tree-title a {
  font-size: 20px;
  color: #000000;
  text-decoration: none;
  font-weight: 700;
  border: none;
}
.content-tree-title a:hover {
  text-decoration: underline;
}
.content-tree-title a:visited {
  color: inherit;
}
.content-tree .see-all-articles {
  margin-top: 10px;
  background: #fff;
  padding: 8px 16px;
  display: flex;
  border: 1px solid #d8dcde;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  color: #000000;
  margin-bottom: 2rem;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 0;
  padding: 10px 20px;
}
.content-tree .see-all-articles:hover {
  text-decoration: none;
  background-color: #1359ec;
  color: white;
  transition: all 0.1s;
}
.content-tree .see-all-articles:focus {
  background: #fff;
  color: #000000;
}

.content-list-item {
  padding: 14px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media (max-width: 768px) {
  .content-list-item {
    padding: 15px 0;
  }
}
.content-list-item a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
  font-size: 17px;
}
.content-list-item a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.content-list-item a:hover, .content-list-item a:focus, .content-list-item a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}

.icon-star .icon-lock {
  color: #17494D;
  font-size: 18px;
}

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

*:target {
  scroll-margin-top: 72px;
}

body {
  color: #000000;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 500px at 50% 100%, rgba(19, 89, 236, 0.8) 0%, rgba(0, 125, 248, 0) 92%);
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 860px) {
  body::before {
    background: radial-gradient(1200px 500px at 50% 2%, rgb(186, 238, 210) 0%, rgba(186, 238, 210, 0.5) 32.5%, rgba(255, 255, 255, 0) 100%);
  }
}
@media (min-width: 768px) {
  body::before {
    background: radial-gradient(1200px 500px at 50% 2%, rgb(186, 238, 210) 0%, rgba(186, 238, 210, 0.5) 32.5%, rgba(255, 255, 255, 0) 100%);
  }
}
@media (max-width: 768px) {
  body::before {
    background: radial-gradient(750px 350px at 50% 2%, rgb(186, 238, 210) 0%, rgba(186, 238, 210, 0.5) 32.5%, rgba(255, 255, 255, 0) 100%);
  }
}
@media (min-width: 1024px) {
  body::before {
    background: radial-gradient(800px 500px at 50% 0%, rgb(186, 238, 210) 0%, rgba(186, 238, 210, 0.5) 32.5%, rgba(255, 255, 255, 0) 100%);
  }
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
}

a:visited {
  color: #9358B0;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "FT Regola Neue", "Georgia", serif;
}

body,
p,
a,
span,
div,
blockquote,
cite,
ul,
ol,
li,
dl,
dt,
dd,
strong,
b,
em,
i,
small,
mark,
del,
ins,
sub,
sup,
q,
samp,
kbd,
var,
time,
address,
pre,
code {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

button,
input,
optgroup,
select,
textarea,
label,
legend,
fieldset {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

.hbs-form input,
.hbs-form textarea,
.search input,
.search textarea {
  color: #000;
  font-size: 15px;
}
.hbs-form input,
.search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])),
.search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus,
.search input:where(:not([type=checkbox])):focus {
  border: 1px solid #0a2e76;
}
.hbs-form input[disabled],
.search input[disabled] {
  background-color: #ddd;
}
.hbs-form select,
.search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #6f6f6f;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #0a2e76;
  width: 100%;
}
.hbs-form select:focus,
.search select:focus {
  border: 1px solid #0a2e76;
}
.hbs-form select::-ms-expand,
.search select::-ms-expand {
  display: none;
}
.hbs-form textarea,
.search textarea {
  border: 1px solid #6f6f6f;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus,
.search textarea:focus {
  border: 1px solid #0a2e76;
}

.container {
  max-width: 1190px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1190px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

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

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

.error-page {
  max-width: 1190px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1190px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #17494D;
  border-radius: 4px;
  color: #17494D;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .split-button button:visited {
  color: #17494D;
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: #17494D;
  color: #FFFFFF;
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #000;
  border-color: #000;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}
.button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .split-button button:focus {
  border-color: #0a2e76;
}

.button-large,
.hbs-form input[type=submit] {
  cursor: pointer;
  background-color: #17494D;
  border: 0;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large,
  .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited,
.hbs-form input[type=submit]:visited {
  color: #FFFFFF;
}
.button-large:hover, .button-large:active, .button-large:focus,
.hbs-form input[type=submit]:hover,
.hbs-form input[type=submit]:active,
.hbs-form input[type=submit]:focus {
  background-color: #000;
}
.button-large[disabled],
.hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #333;
  border: 1px solid #6f6f6f;
  background-color: transparent;
}
.button-secondary:visited {
  color: #333;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #000000;
  border: 1px solid #6f6f6f;
  background-color: #f7f7f7;
}

/***** Split button *****/
.split-button {
  display: flex;
}

.split-button button {
  background-color: #17494D;
  border: 0;
  color: #FFFFFF;
  height: 32px;
  line-height: 16px;
  outline-color: #17494D;
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #FFFFFF;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #FFFFFF;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  /* 
      Global Card-Table Mixin is disabled for now,
     while Edu is gathering feedback about this design / feature.
  */
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #333;
  font-size: 14px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #6f6f6f;
  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;
  }
}

div.article-body .wysiwyg-table {
  overflow-x: auto;
  width: 100%;
  display: block;
  border-radius: 16px;
  border: 2px solid #ddd;
}
div.article-body .wysiwyg-table table {
  width: 100%;
  min-width: 600px;
  overflow: hidden;
  display: table;
  background-color: white;
}
div.article-body .wysiwyg-table td,
div.article-body .wysiwyg-table th {
  padding: 15px;
}
div.article-body .wysiwyg-table td:not(:last-child),
div.article-body .wysiwyg-table th:not(:last-child) {
  border-right: 2px solid #ddd;
}
div.article-body .wysiwyg-table tr {
  position: relative;
}
div.article-body .wysiwyg-table tr:not(:last-child),
div.article-body .wysiwyg-table th {
  border-bottom: 2px solid #ddd;
}
@media (min-width: 1024px) {
  div.article-body .wysiwyg-table tr:hover td:not([rowspan]),
  div.article-body .wysiwyg-table tr:hover th:not([rowspan]) {
    background-color: #f5f5f5;
  }
}
@media (max-width: 768px) {
  div.article-body .wysiwyg-table th,
  div.article-body .wysiwyg-table td {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

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

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

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

.form-field input {
  border: 1px solid #6f6f6f;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid #17494D;
}

.form-field input[type=text] {
  border: 1px solid #6f6f6f;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid #17494D;
}

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

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #6f6f6f;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid #17494D;
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid #6f6f6f;
}

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

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

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

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

.form-field p {
  color: #333;
  font-size: 12px;
  margin: 5px 0;
}

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

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

.form .suggestion-list {
  font-size: 14px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: #9358B0;
}

/***** Header *****/
.header {
  max-width: 1190px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
}
@media (min-width: 1190px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  max-height: 37px;
  vertical-align: middle;
}

.logo span {
  margin: 0 10px;
  color: #17494D;
}

.logo a {
  display: inline-block;
}

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

.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: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}

.user-nav-list {
  display: block;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: #1F73B7;
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: #1F73B7;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #000000;
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #000000;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737d;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}

#zd-modal-container ~ .skip-navigation {
  display: none;
}

/***** User info in header *****/
.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 > button {
  border: 0;
  color: #1F73B7;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #1F73B7;
  background-color: transparent;
}
.user-info > button::after {
  color: #1F73B7;
  padding-right: 15px;
}
[dir=rtl] .user-info > 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 {
  color: #17494D;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer-inner {
  max-width: 1190px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  /* 
    Remove margin: 0 auto property when screen size is less than 1090px 
    Fixes the issue where text unintentionally self-centers on medium sized displays
  */
}
@media (min-width: 1190px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
@media (max-width: 1189px) {
  .footer-inner {
    margin: 0;
  }
}
.footer-language-selector button {
  color: #333;
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #333;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  flex-wrap: wrap;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  font-size: 16px;
  max-width: 850px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 4px 0;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 2px 2px 6px;
}
.breadcrumbs a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.breadcrumbs a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.breadcrumbs a:hover, .breadcrumbs a:focus, .breadcrumbs a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}
@media (max-width: 768px) {
  .breadcrumbs {
    flex-direction: row;
  }
}

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

.search {
  border-color: #a7a7a7;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px;
}
.search input[type=search]:focus::placeholder {
  opacity: 0;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button-icon {
  color: #a7a7a7;
}
.search .clear-button-icon:hover {
  transform: scale(1.1);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search] .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}

/***** Hero component *****/
.hero {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 4rem;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-image {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
}
@media (min-width: 1330px) {
  .hero-image {
    background-image: url(https://cdn-assets-eu.frontify.com/s3/frontify-enterprise-files-eu/eyJwYXRoIjoicGVyc29uaW9cL2ZpbGVcL25QYXB6N1ZnSjUyS0xweG1Ldk05LnBuZyJ9:personio:tmRg3QXFyb-9oUAw5paIthfF5vNjuUPxjTxbjfg5lew);
    background-size: 318px;
    background-repeat: no-repeat;
    background-position-x: right;
    margin-top: -20px;
  }
}
@media (max-width: 1329px) {
  .hero-image {
    background-image: url(https://cdn-assets-eu.frontify.com/s3/frontify-enterprise-files-eu/eyJwYXRoIjoicGVyc29uaW9cL2ZpbGVcL25vRWk2MVZ5clZXZXh5RUttR0M0LnBuZyJ9:personio:F3PNn2FOoThxJx2C1XcarfQ6yAATBO4bWdKRpPYTChw);
    background-size: 150px;
    background-repeat: no-repeat;
    background-position-x: right;
    top: -145px;
  }
}
@media (max-width: 1000px) {
  .hero-image {
    display: none;
  }
}
.hero.article-hero {
  margin-bottom: 4rem;
}
.hero-inner {
  max-width: 700px;
  margin: 0 auto;
}
.hero-inner h1 {
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 24px;
  color: #161616;
  text-align: center;
}
.hero-inner p {
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #151414;
  margin-top: 0;
  margin-bottom: 33px;
}

.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;
    flex-wrap: wrap;
    gap: 16px;
    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 {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header-description a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.page-header-description a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.page-header-description a:hover, .page-header-description a:focus, .page-header-description a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 16px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  height: 199px;
  width: 280px;
  box-sizing: border-box;
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), inset 0 0 30px #ffffff;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: #000000;
}
.blocks-item-link {
  color: #17494D;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 2px #0a2e76;
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/***** Homepage *****/
.section {
  padding-top: 65px;
}
.section.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.section.knowledge-base {
  padding-top: 0;
}

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

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01J5XXABVHJHEJX9JCS07BDMSH);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: #1F73B7;
  text-decoration: underline;
}
.community a:visited {
  color: #9358B0;
}
.community a:hover, .community a:active, .community a:focus {
  color: #0F3554;
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 17px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  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: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #000000;
  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 {
  display: inline-block;
  font-size: 14px;
}
.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-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: #1F73B7;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #9358B0;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #0F3554;
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: #17494D;
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/* @import "category";
@import "section"; We use styles/personio/_sections-and-categories.scss - keeping these as it is original zd code*/
/***** Article *****/
.article {
  flex: 1;
}
@media (min-width: 1024px) {
  .article {
    max-width: 86%;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2rem;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 2rem;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  display: flex;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
  max-width: 870px;
}
.article-body a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.article-body a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.article-body a:hover, .article-body a:focus, .article-body a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.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;
}
.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.7);
  padding: 25px;
  border-radius: 16px;
  box-shadow: 2px 2px 8px -2px rgba(0, 0, 0, 0.4);
  /*
    When a callout is at the top of an article,
    the spacing between the heading and the callout is too small.

    Addressed by adding a margin-top when the callout is the first child of `.article-body`.
  */
  margin: 0;
}
.article-body blockquote.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.article-body blockquote:first-child {
  margin-top: 1rem;
}
.article-body blockquote:before {
  font-family: "FontAwesome";
  content: "\f05a";
  margin-right: 1rem;
  color: #1359ec;
  font-size: 16px;
}
.article-body blockquote img {
  /* Forcing the image to not be displayed, element is difficult to target otherwise. */
  display: none !important;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin-top: 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #333;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #17494D;
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  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 #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: #1F73B7;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #9358B0;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #0F3554;
}
.article-return-to-top {
  border-top: 1px solid #6f6f6f;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: #000000;
  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 {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.sidenav-title {
  font-size: 16px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}
.recent-articles a,
.related-articles a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.recent-articles a:visited,
.related-articles a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.recent-articles a:hover, .recent-articles a:focus, .recent-articles a:active,
.related-articles a:hover,
.related-articles a:focus,
.related-articles a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}

aside.left-side-items {
  /**
  #TODO: Check if circle or squactangle for images 
  & .squactangle {
    @include squactangle;
  }
  */
}
aside.left-side-items .article-author {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
  border-radius: 16px;
  display: flex;
  justify-items: center;
  align-items: center;
  gap: 1rem;
  padding: 10px;
  margin: 2rem 0;
  font-size: 14px;
  color: #000000;
}
aside.left-side-items .article-author.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
aside.left-side-items img {
  height: 30px;
  width: 30px;
  border-radius: 100px;
}
aside.left-side-items img.avatar-fallback {
  border-radius: 0;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.attachments .attachment-meta-item {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  border-radius: 12px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  position: relative;
  margin-bottom: 10px;
  padding: 12px 40px 12px 12px;
  min-height: 50px;
}
.attachments .attachment-meta-item.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.attachments .attachment-meta-item:hover {
  border: #6f6f6f;
  background-color: #ebf3fd;
}
.attachments .attachment-meta-item .attachment-icon {
  color: #000000;
  position: absolute;
  right: 15px;
  bottom: 10px;
  width: 15px;
  height: 15px;
}
.attachments .attachment-meta-item .attachment-name {
  display: block;
  max-width: 185px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attachments .attachment-meta-item:hover {
  text-decoration: underline;
  box-shadow: inset 0 0 15px #ffffff;
}
[dir=rtl] .attachments .attachment-meta-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-meta-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #000000;
}

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

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

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #333;
}
.share a:hover {
  text-decoration: none;
  color: #17494D;
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #333;
  display: inline-block;
  font-size: 14px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #1F73B7;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #9358B0;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #0F3554;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #333;
  font-size: 14px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #17494D;
  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 1 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: #17494D;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  max-width: 870px;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.comment-body a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.comment-body a:hover, .comment-body a:focus, .comment-body a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.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 :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.7);
  padding: 25px;
  border-radius: 16px;
  box-shadow: 2px 2px 8px -2px rgba(0, 0, 0, 0.4);
  /*
    When a callout is at the top of an article,
    the spacing between the heading and the callout is too small.

    Addressed by adding a margin-top when the callout is the first child of `.article-body`.
  */
  margin: 0;
}
.comment-body blockquote.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.comment-body blockquote:first-child {
  margin-top: 1rem;
}
.comment-body blockquote:before {
  font-family: "FontAwesome";
  content: "\f05a";
  margin-right: 1rem;
  color: #1359ec;
  font-size: 16px;
}
.comment-body blockquote img {
  /* Forcing the image to not be displayed, element is difficult to target otherwise. */
  display: none !important;
}
.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #333;
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: #17494D;
}

.vote-up,
.vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #333;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: #17494D;
}

.vote-voted:hover {
  color: #000;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0; /*Avoid collapsing elements in Safari*/
}
.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01J5XXABG3KJ3G9XSJ24ZM2M5M);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

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

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  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;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: #17494D;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: #17494D;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
  background-color: #000;
  border-color: #000;
}
.community-follow button::after {
  border-left: 1px solid #17494D;
  content: attr(data-follower-count);
  color: #17494D;
  display: inline-block;
  font-family: "FT Regola Neue", "Georgia", serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid #17494D;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  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: #1F73B7;
  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: #9358B0;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #333;
  font-size: 14px;
  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 {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: #000000;
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  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: #17494D;
}
.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 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #333;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.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: "Inter", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  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 {
  display: flow-root;
  max-width: 870px;
}
.post-body a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.post-body a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.post-body a:hover, .post-body a:focus, .post-body a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.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 :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.7);
  padding: 25px;
  border-radius: 16px;
  box-shadow: 2px 2px 8px -2px rgba(0, 0, 0, 0.4);
  /*
    When a callout is at the top of an article,
    the spacing between the heading and the callout is too small.

    Addressed by adding a margin-top when the callout is the first child of `.article-body`.
  */
  margin: 0;
}
.post-body blockquote.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.post-body blockquote:first-child {
  margin-top: 1rem;
}
.post-body blockquote:before {
  font-family: "FontAwesome";
  content: "\f05a";
  margin-right: 1rem;
  color: #1359ec;
  font-size: 16px;
}
.post-body blockquote img {
  /* Forcing the image to not be displayed, element is difficult to target otherwise. */
  display: none !important;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #333;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #17494D;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  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-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

.community-badge-titles {
  display: inline;
}

.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  width: 100%;
  height: 100%;
}

.community-badge-achievements {
  display: flex;
}

.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

.community-badge {
  margin: 2px;
}

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 15px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: 22.5px;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid #0a2e76;
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #000000;
  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: #000000;
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid #0a2e76;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #000000;
}

.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
  display: block;
}

/* Sidebar navigation that collapses on mobile */
.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-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid #17494D;
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.container.my-activities-wrapper {
  margin-top: 8rem;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  padding: 4rem;
  margin-bottom: 4rem;
}
.container.my-activities-wrapper.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}

.my-activities-nav {
  background-color: #0a2e76;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title {
  /* My activities tables */
  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 table */
.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: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.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;
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.requests .requests-table .requests-link:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.requests .requests-table .requests-link:hover, .requests .requests-table .requests-link:focus, .requests .requests-table .requests-link:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.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 */
.contributions-table td:last-child {
  color: #333;
  font-size: 14px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #333;
}

/***** Request *****/
.request-wrapper {
  margin-top: 4rem;
}
.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;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
    border-radius: 16px;
    color: #000000;
    transition: 0.2s;
    padding: 4rem;
    margin-bottom: 4rem;
  }
  .request-container.glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(7.4px);
    -webkit-backdrop-filter: blur(7.4px);
  }
}
.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: 2px;
  border: 1px solid #ddd;
  color: #333;
  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 #17494D;
}
.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 #17494D;
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 14px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  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 {
  line-break: strict;
  color: #333;
  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-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}
.pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link {
  background: rgba(255, 255, 255, 0.7);
  border-color: #0a2e76;
  color: #000000;
  font-size: 17px;
  text-decoration: none;
  border-radius: 100px;
}
.pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover {
  background-color: #1359ec;
  color: white;
}
.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
  padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
  padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
  margin-right: 10px;
}

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

.meta-group-opposite {
  float: right;
}

[dir=rtl] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #333;
  font-size: 14px;
}

/* User Profiles */
.profile-wrapper {
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  padding: 4rem;
  max-width: 80%;
  margin: 8rem auto;
}
.profile-wrapper.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}

.profile-header {
  padding: 30px 0;
  background-color: #f7f7f7;
}

.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: 80px;
  height: 80px;
}

.profile-avatar .icon-agent {
  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;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}
.profile-header .basic-info .name a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.profile-header .basic-info .name a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.profile-header .basic-info .name a:hover, .profile-header .basic-info .name a:focus, .profile-header .basic-info .name a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}

.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;
  }
}

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}
.user-profile-actions button {
  background: #fff;
  padding: 8px 16px;
  display: flex;
  border: 1px solid #d8dcde;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  color: #000000;
  margin-bottom: 2rem;
  cursor: pointer;
  text-decoration: none;
}
.user-profile-actions button:hover {
  text-decoration: none;
  background-color: #1359ec;
  color: white;
  transition: all 0.1s;
}
.user-profile-actions button:focus {
  background: #fff;
  color: #000000;
}
.user-profile-actions button:focus {
  background: #fff;
  padding: 8px 16px;
  display: flex;
  border: 1px solid #d8dcde;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
  color: #000000;
  margin-bottom: 2rem;
  cursor: pointer;
  text-decoration: none;
}
.user-profile-actions button:focus:hover {
  text-decoration: none;
  background-color: #1359ec;
  color: white;
  transition: all 0.1s;
}
.user-profile-actions button:focus:focus {
  background: #fff;
  color: #000000;
}

.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: #333;
  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 #ddd;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

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

@media (min-width: 768px) {
  .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;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}
@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;
  }
}
@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;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px #0a2e76;
  border-radius: 4px;
  color: #0a2e76;
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #f2f2f2;
  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: #333;
  font-size: 14px;
  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 #eee;
  font-size: 14px;
}
.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;
  }
}
@media (min-width: 768px) {
  .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-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}
.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 16px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #333;
  font-size: 14px;
  margin: 0;
}
.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.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-title a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.profile-contribution-title a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.profile-contribution-title a:hover, .profile-contribution-title a:focus, .profile-contribution-title a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}

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

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@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 #eee;
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}

.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: #999;
}

.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  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;
  }
}

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

.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: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
@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-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #0a2e76;
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
.search-wrapper {
  margin-top: 8rem;
}

.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: #000000;
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #e9ebed;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545c;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #1F73B7;
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 2rem;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px, inset 0 0 5px #ffffff;
  border-radius: 16px;
  color: #000000;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
}
.search-results-list > li.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7.4px);
  -webkit-backdrop-filter: blur(7.4px);
}
.search-results-list > li:hover, .search-results-list > li:focus, .search-results-list > li:active {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), inset 0 0 30px #ffffff;
}
.search-results-list > li:hover *, .search-results-list > li:focus *, .search-results-list > li:active * {
  text-decoration: none;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2f3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737d;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: #1F73B7;
}
.search-results .no-results .action-prompt a:visited {
  color: #1F73B7;
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 19px;
  margin-bottom: 1rem;
}
.search-result-title a {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
  font-size: 19px;
}
.search-result-title a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #000000;
  font-weight: 500;
}
.search-result-title a:hover, .search-result-title a:focus, .search-result-title a:active {
  color: #575757;
  border-bottom: 1px solid #575757;
  text-decoration: none;
}
.search-result-votes, .search-result-meta-count {
  color: #333;
  font-size: 14px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #17494D;
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|=zh] .search-results-description em {
  font-style: normal;
  background: yellow;
}

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-inline.notification-error::before,
.notification-text,
.notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

/* Dismiss button */
.notification-dismiss,
a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}
[dir=rtl] .notification-inline {
  text-align: right;
}
.notification-inline[aria-hidden=true] {
  display: none;
}
.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}
[dir=rtl] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}
.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}
.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir=rtl] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

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

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
  display: none !important;
}

.dropdown-menu-end {
  left: auto;
  right: 0;
}

.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}

[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}

.dropdown-chevron-icon {
  vertical-align: middle;
}

.content-tags > p {
  color: #68737d;
  margin-top: 32px;
  margin-bottom: 4px;
}
.content-tags-add-hint {
  color: #68737d;
  font-size: 14px;
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-right: 1px solid #c2c8cc;
  margin-bottom: 4px;
}
[dir=ltr] .content-tag-list li {
  padding-right: 8px;
  margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
  padding-left: 8px;
  margin-left: 8px;
}
.content-tag-list li:last-child {
  border: none;
}

/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid #6f6f6f;
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid #6f6f6f;
}

/***** Summary component *****/
zd-summary-block {
  background: #f3f6f6;
}
[dir=ltr] zd-summary-block {
  border-left-color: #859fa1;
}
[dir=rtl] zd-summary-block {
  border-right-color: #859fa1;
}