@charset "UTF-8";
/* Import Inter font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/***** 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;
}

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

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;
  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;
} */
/* Main accordion container - High specificity to override any conflicting styles */
.category-content .zd-custom-accordion,
#main-content .zd-custom-accordion {
  display: block !important; /* Ensure accordion is always visible */
  opacity: 1 !important; /* Prevent any fade-in delays */
  visibility: visible !important; /* Ensure visibility */
}

/* Critical: Ensure accordion items are immediately visible */
.zd-custom-accordion__item {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative; /* Ensure proper stacking */
  /* Ensure accordion items are visible within article body */
}
.zd-custom-accordion__item:last-child {
  margin-bottom: 0;
}
#main-content .zd-custom-accordion__item, .article-content .zd-custom-accordion__item, .article-body .zd-custom-accordion__item {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hidden checkbox toggle */
.zd-custom-accordion__toggle {
  display: none;
}

/* Clickable header */
.zd-custom-accordion__header {
  display: flex;
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  background-color: #FFF;
  transition: background-color 0.25s ease-in-out;
  user-select: none;
  border-bottom: none;
  outline: none;
}
.zd-custom-accordion__header:focus {
  outline: none;
}

/* Show border between header and content when accordion is open */
.zd-custom-accordion__toggle:checked ~ .zd-custom-accordion__header {
  border-bottom: 1px solid #e0e0e0;
}

.zd-custom-accordion__header:hover {
  background-color: #e9ecef;
}

/* Chevron icon */
.zd-custom-accordion__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotate chevron when open */
.zd-custom-accordion__toggle:checked ~ .zd-custom-accordion__header .zd-custom-accordion__icon {
  transform: rotate(180deg);
}

/* Collapsible content wrapper */
.zd-custom-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded state */
.zd-custom-accordion__toggle:checked ~ .zd-custom-accordion__content {
  max-height: 9999px;
  overflow: visible;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Content body with padding - Remove fade-in to prevent flash */
.zd-custom-accordion__body {
  padding: 16px 20px;
  background-color: #f9fafb;
  opacity: 1; /* Always visible to prevent flash */
  transform: none; /* Remove transform to prevent flash */
  transition: none; /* Remove transition to prevent flash */
}

/* Show content body when open - Simplified without fade effects */
.zd-custom-accordion__toggle:checked ~ .zd-custom-accordion__content .zd-custom-accordion__body {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Article list styles within accordion */
.zd-custom-accordion__body {
  /* Article content styles - for article page accordions */
  /* Ensure content visibility */
  /* Basic content elements */
  /* Ordered lists */
  /* Unordered lists */
  /* Nested content */
  /* Tips and callouts */
  /* Links */
  /* Bold text */
}
.zd-custom-accordion__body .article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zd-custom-accordion__body .article-list-item {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  font-size: 1rem;
}
.zd-custom-accordion__body .article-list-item.article-promoted {
  font-weight: 600;
}
.zd-custom-accordion__body .article-list-link {
  flex-grow: 1;
  color: #4b5563;
  text-decoration: none;
}
.zd-custom-accordion__body .article-list-link:hover {
  color: #2563eb;
}
.zd-custom-accordion__body .icon-star, .zd-custom-accordion__body .icon-lock {
  margin-right: 0.5rem;
}
.zd-custom-accordion__body .see-all-articles {
  display: inline-block;
  margin-top: 0.5rem;
  color: #2563eb;
  text-decoration: none;
}
.zd-custom-accordion__body .see-all-articles:hover {
  text-decoration: underline;
}
.zd-custom-accordion__body .category-empty {
  font-style: italic;
  color: #6b7280;
}
.zd-custom-accordion__body .category-empty a {
  color: #2563eb;
  text-decoration: none;
}
.zd-custom-accordion__body .category-empty a:hover {
  text-decoration: underline;
}
.zd-custom-accordion__body.panel-body-expanded {
  overflow: visible !important;
  height: auto !important;
  display: block !important;
}
.zd-custom-accordion__body p, .zd-custom-accordion__body .procedure, .zd-custom-accordion__body .itemizedlist, .zd-custom-accordion__body .tip {
  margin-bottom: 1rem;
  display: block !important;
}
.zd-custom-accordion__body ol.procedure {
  padding-left: 1.5rem;
  display: block !important;
  list-style-type: decimal !important;
}
.zd-custom-accordion__body ol.procedure li.step {
  margin-bottom: 0.5rem;
  display: list-item !important;
  padding-left: 0.5rem;
}
.zd-custom-accordion__body ul.itemizedlist {
  padding-left: 1.5rem;
  display: block !important;
  list-style-type: disc !important;
  margin-bottom: 1rem;
}
.zd-custom-accordion__body ul.itemizedlist li.listitem {
  display: list-item !important;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.zd-custom-accordion__body li > p {
  margin-bottom: 0.5rem;
}
.zd-custom-accordion__body .tip {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 0.375rem;
  border-left: 4px solid #3b82f6;
  margin: 1rem 0;
}
.zd-custom-accordion__body .tip .title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1e3a8a;
}
.zd-custom-accordion__body a.link {
  color: #2563eb;
  text-decoration: none;
}
.zd-custom-accordion__body a.link:hover {
  text-decoration: underline;
}
.zd-custom-accordion__body .bold {
  font-weight: 700;
}

/**
 * Category Accordions Styles
 * Styles for vanilla JavaScript accordions on article pages
 */
/* Sub-topic Accordion Container - Match zd-custom-accordion styling */
.section.accordion.sub-topic {
  margin-bottom: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  background-color: white;
  position: relative;
}
.section.accordion.sub-topic:last-child {
  margin-bottom: 0;
}
.section.accordion.sub-topic .panel.panel-default {
  overflow: hidden;
  margin: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;
}

/* Accordion Header - Match zd-custom-accordion__header styling */
.section.accordion.sub-topic .panel-heading {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #1f2937;
  cursor: pointer;
  transition: background-color 0.25s ease-in-out;
  border: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  background-color: #fff;
  position: relative;
  user-select: none;
  outline: none;
  /* Focus styles for accessibility */
}
.section.accordion.sub-topic .panel-heading:hover {
  background-color: #e9ecef;
}
.section.accordion.sub-topic .panel-heading:focus {
  outline: none;
}
.section.accordion.sub-topic .panel-heading[aria-expanded=true] {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}
.section.accordion.sub-topic .panel-heading[aria-expanded=true] .title {
  color: #1f2937;
}
.section.accordion.sub-topic .panel-heading[aria-expanded=true] .accordion-icon {
  transform: rotate(180deg);
  color: #6b7280;
}
.section.accordion.sub-topic .panel-heading:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

/* Title Container */
.section.accordion.sub-topic .panel-heading .titlepage {
  margin: 0;
  flex: 1;
}

.section.accordion.sub-topic .panel-heading .title {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: #1f2937;
  transition: color 0.15s ease;
}
.section.accordion.sub-topic .panel-heading .title h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.section.accordion.sub-topic .panel-heading .title a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

/* Accordion Icon - Match zd-custom-accordion__icon styling */
.section.accordion.sub-topic .panel-heading .accordion-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
}
.section.accordion.sub-topic .panel-heading .accordion-icon svg {
  width: 14px;
  height: 14px;
}

/* Panel Body - Match zd-custom-accordion__body styling */
.section.accordion.sub-topic .panel-body {
  padding: 16px 20px;
  background-color: #f9fafb;
  font-size: 16px;
  color: #4b5563;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: none;
  /* Collapsed state - must come BEFORE expanded state */
  /* Expanded state - must come AFTER collapsed state to override */
  /* Basic content elements */
  /* Paragraphs */
  /* Ordered lists */
  /* Unordered lists */
  /* Nested content */
  /* Tips and callouts */
  /* Links */
  /* Bold text */
  /* Images */
  /* Code blocks */
}
.section.accordion.sub-topic .panel-body.collapse {
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  display: none;
}
.section.accordion.sub-topic .panel-body.panel-body-expanded {
  overflow: visible !important;
  height: auto !important;
  display: block !important;
  max-height: none !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  opacity: 1;
  transform: none;
  transition: none;
}
.section.accordion.sub-topic .panel-body p,
.section.accordion.sub-topic .panel-body .procedure,
.section.accordion.sub-topic .panel-body .itemizedlist,
.section.accordion.sub-topic .panel-body .tip {
  margin-bottom: 1rem;
  display: block !important;
}
.section.accordion.sub-topic .panel-body p {
  line-height: 1.6;
}
.section.accordion.sub-topic .panel-body ol,
.section.accordion.sub-topic .panel-body ol.procedure {
  padding-left: 1.5rem;
  display: block !important;
  list-style-type: decimal !important;
  margin-bottom: 1rem;
}
.section.accordion.sub-topic .panel-body ol li,
.section.accordion.sub-topic .panel-body ol li.step,
.section.accordion.sub-topic .panel-body ol.procedure li,
.section.accordion.sub-topic .panel-body ol.procedure li.step {
  margin-bottom: 0.5rem;
  display: list-item !important;
  padding-left: 0.5rem;
  line-height: 1.6;
}
.section.accordion.sub-topic .panel-body ul,
.section.accordion.sub-topic .panel-body ul.itemizedlist {
  padding-left: 1.5rem;
  display: block !important;
  list-style-type: disc !important;
  margin-bottom: 1rem;
}
.section.accordion.sub-topic .panel-body ul li,
.section.accordion.sub-topic .panel-body ul li.listitem,
.section.accordion.sub-topic .panel-body ul.itemizedlist li,
.section.accordion.sub-topic .panel-body ul.itemizedlist li.listitem {
  display: list-item !important;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
  line-height: 1.6;
}
.section.accordion.sub-topic .panel-body li > p {
  margin-bottom: 0.5rem;
}
.section.accordion.sub-topic .panel-body .tip {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 0.375rem;
  border-left: 4px solid #3b82f6;
  margin: 1rem 0;
}
.section.accordion.sub-topic .panel-body .tip .title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1e3a8a;
}
.section.accordion.sub-topic .panel-body a,
.section.accordion.sub-topic .panel-body a.link {
  color: #2563eb;
  text-decoration: none;
}
.section.accordion.sub-topic .panel-body a:hover,
.section.accordion.sub-topic .panel-body a.link:hover {
  text-decoration: underline;
}
.section.accordion.sub-topic .panel-body .bold,
.section.accordion.sub-topic .panel-body strong,
.section.accordion.sub-topic .panel-body b {
  font-weight: 700;
}
.section.accordion.sub-topic .panel-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
  margin: 1rem 0;
}
.section.accordion.sub-topic .panel-body code,
.section.accordion.sub-topic .panel-body pre {
  background-color: #f3f4f6;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.875rem;
}
.section.accordion.sub-topic .panel-body pre {
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}

/* Glossary definitions - hidden */
.section.accordion.sub-topic .glossary-definitions {
  display: none !important;
}

/* Ensure proper spacing between accordions */
.section.accordion.sub-topic + .section.accordion.sub-topic {
  margin-top: 0;
}

/* RTL support */
[dir=rtl] .section.accordion.sub-topic .panel-heading {
  text-align: right;
}
[dir=rtl] .section.accordion.sub-topic .panel-heading .accordion-icon {
  margin-left: 0;
  margin-right: 16px;
}

.important {
  background-color: rgba(255, 233, 232, 0.3);
  border: 1px solid #CC4744;
  border-radius: 8px;
  color: #333333;
  padding: 20px;
  margin: 20px 0;
  position: relative;
  padding-left: 48px;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.important::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23cc3300' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  color: #333333;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 16px;
  top: 24px;
  width: 24px;
  height: 24px;
}
.important .title {
  color: #333333;
  margin-top: 0;
  margin-bottom: 10px;
}

.note {
  background-color: #fbfaf7;
  border: 1px solid #ffeaca;
  border-radius: 8px;
  color: #333333;
  padding: 20px;
  margin: 8px 0;
  position: relative;
  padding-left: 48px;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 20px !important;
  margin-top: 20px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.note::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffcc00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E");
  color: #333333;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 16px;
  top: 26px;
  width: 24px;
  height: 24px;
}
.note .title {
  color: #333333;
  margin-top: 0;
  margin-bottom: 10px;
}

.warning {
  background-color: #fff1bf;
  border: 1px solid #f9d093;
  border-radius: 8px;
  color: #333333;
  padding: 20px;
  margin: 8px 0;
  position: relative;
  padding-left: 48px;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 20px !important;
  margin-top: 20px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.warning::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffcc00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
  color: #333333;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 16px;
  top: 24px;
  width: 24px;
  height: 24px;
}
.warning .title {
  color: #333333;
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: 32px !important;
}

.alert, .warning, .caution {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 20px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  border-radius: 8px;
  position: relative;
}

.tip {
  background-color: rgba(232, 249, 243, 0.3) !important;
  border: 1px solid rgb(142, 227, 200) !important;
  border-radius: 8px;
  color: #333333;
  padding: 20px;
  margin: 8px 0;
  position: relative;
  padding-left: 48px;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.tip::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M288 32C291.3 32 294.2 34 295.4 37L310.2 73.8L347 88.6C350 89.8 352 92.8 352 96C352 99.2 350 102.2 347 103.4L310.2 118.2L295.4 155C294.2 158 291.2 160 288 160C284.8 160 281.8 158 280.6 155L265.8 118.2L229 103.4C226 102.2 224 99.2 224 96C224 92.8 226 89.8 229 88.6L265.8 73.8L280.6 37C281.8 34 284.8 32 288 32zM492 112C490.7 112 489.4 112.5 488.5 113.5L381.9 220L420 258.1L526.5 151.5C527.4 150.6 528 149.3 528 148C528 146.7 527.5 145.4 526.5 144.5L495.5 113.5C494.6 112.6 493.3 112 492 112zM113.5 488.5C112.6 489.4 112 490.7 112 492C112 493.3 112.5 494.6 113.5 495.5L144.5 526.5C145.4 527.4 146.7 528 148 528C149.3 528 150.6 527.5 151.5 526.5L386.1 292L348 253.9L113.5 488.5zM454.6 79.5C464.5 69.6 478 64 492 64C506 64 519.5 69.6 529.5 79.5L560.5 110.5C570.4 120.5 576 134 576 148C576 162 570.4 175.5 560.5 185.5L185.5 560.5C175.5 570.4 162 576 148 576C134 576 120.5 570.4 110.5 560.5L79.5 529.5C69.6 519.5 64 506 64 492C64 478 69.6 464.5 79.5 454.5L454.5 79.5zM142.7 105.7L164.2 155.8L214.3 177.3C220.2 179.8 224 185.6 224 192C224 198.4 220.2 204.2 214.3 206.7L164.2 228.2L142.7 278.3C140.2 284.2 134.4 288 128 288C121.6 288 115.8 284.2 113.3 278.3L91.8 228.2L41.7 206.7C35.8 204.2 32 198.4 32 192C32 185.6 35.8 179.8 41.7 177.3L91.8 155.8L113.3 105.7C115.8 99.8 121.6 96 128 96C134.4 96 140.2 99.8 142.7 105.7zM510.7 377.7L532.2 427.8L582.3 449.3C588.2 451.8 592 457.6 592 464C592 470.4 588.2 476.2 582.3 478.7L532.2 500.2L510.7 550.3C508.2 556.2 502.4 560 496 560C489.6 560 483.8 556.2 481.3 550.3L459.8 500.2L409.7 478.7C403.8 476.2 400 470.4 400 464C400 457.6 403.8 451.8 409.7 449.3L459.8 427.8L481.3 377.7C483.8 371.8 489.6 368 496 368C502.4 368 508.2 371.8 510.7 377.7z'/%3E%3C/svg%3E");
  color: #333333;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 10px !important;
  top: 26px;
  width: 20px;
  height: 20px;
}
.tip .title {
  color: #333333;
  margin-top: 0;
  margin-bottom: 0px !important;
  margin-left: 32px !important;
}

.alert, .warning, .caution {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 20px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  border-radius: 8px;
  position: relative;
}

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

body {
  background-color: #FFFFFF;
  color: #2F3941;
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  margin-top: 0;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: #000;
  font-size: 14px;
}
.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 #CC4744;
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-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 #87929D;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid #CC4744;
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #87929D;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid #CC4744;
}

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

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

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

.error-page {
  margin: 0 auto;
  padding: 0 5%;
  max-width: 1360px;
}
@media (min-width: 1360px) {
  .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;
}

.osano-cm-window__widget {
  display: none !important;
}

/***** 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, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #CC4744;
  border-radius: 4px;
  color: #CC4744;
  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, .section-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, .section-subscribe button:visited, .split-button button:visited {
  color: #CC4744;
}
.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, .section-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, .section-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, .section-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], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: #CC4744;
  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, .section-subscribe button.button-primary:hover, .section-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, .section-subscribe button.button-primary:focus, .section-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, .section-subscribe button.button-primary:active, .section-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], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: #CC4744;
  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: #5a6d7c;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #5a6d7c;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #2F3941;
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

.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, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #CC4744;
  border-radius: 4px;
  color: #CC4744;
  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;
}

.see-more-container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 200px;
  border: none;
}

.see-more-container .button, .see-more-container .pagination-next-link, .see-more-container .pagination-prev-link, .see-more-container .pagination-first-link, .see-more-container .pagination-last-link, .see-more-container .subscriptions-subscribe button, .subscriptions-subscribe .see-more-container button, .see-more-container .requests-table-toolbar .organization-subscribe button, .requests-table-toolbar .organization-subscribe .see-more-container button, .see-more-container .community-follow button, .community-follow .see-more-container button, .see-more-container .article-subscribe button, .article-subscribe .see-more-container button, .see-more-container .section-subscribe button, .section-subscribe .see-more-container button, .see-more-container .split-button button, .split-button .see-more-container button {
  border: none;
  font-size: 16px;
  line-height: 2.34;
  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;
  background-color: transparent !important;
  color: #CC4744;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.see-more-container .button:active, .see-more-container .pagination-next-link:active, .see-more-container .pagination-prev-link:active, .see-more-container .pagination-first-link:active, .see-more-container .pagination-last-link:active, .see-more-container .subscriptions-subscribe button:active, .subscriptions-subscribe .see-more-container button:active, .see-more-container .requests-table-toolbar .organization-subscribe button:active, .requests-table-toolbar .organization-subscribe .see-more-container button:active, .see-more-container .community-follow button:active, .community-follow .see-more-container button:active, .see-more-container .article-subscribe button:active, .article-subscribe .see-more-container button:active, .see-more-container .section-subscribe button:active, .section-subscribe .see-more-container button:active, .see-more-container .split-button button:active, .split-button .see-more-container button:active, .see-more-container .button:focus, .see-more-container .pagination-next-link:focus, .see-more-container .pagination-prev-link:focus, .see-more-container .pagination-first-link:focus, .see-more-container .pagination-last-link:focus, .see-more-container .subscriptions-subscribe button:focus, .subscriptions-subscribe .see-more-container button:focus, .see-more-container .requests-table-toolbar .organization-subscribe button:focus, .requests-table-toolbar .organization-subscribe .see-more-container button:focus, .see-more-container .community-follow button:focus, .community-follow .see-more-container button:focus, .see-more-container .article-subscribe button:focus, .article-subscribe .see-more-container button:focus, .see-more-container .section-subscribe button:focus, .section-subscribe .see-more-container button:focus, .see-more-container .split-button button:focus, .split-button .see-more-container button:focus {
  background-color: transparent !important;
  color: #CC4744;
}

.see-more-container .button svg, .see-more-container .pagination-next-link svg, .see-more-container .pagination-prev-link svg, .see-more-container .pagination-first-link svg, .see-more-container .pagination-last-link svg, .see-more-container .subscriptions-subscribe button svg, .subscriptions-subscribe .see-more-container button svg, .see-more-container .requests-table-toolbar .organization-subscribe button svg, .requests-table-toolbar .organization-subscribe .see-more-container button svg, .see-more-container .community-follow button svg, .community-follow .see-more-container button svg, .see-more-container .article-subscribe button svg, .article-subscribe .see-more-container button svg, .see-more-container .section-subscribe button svg, .section-subscribe .see-more-container button svg, .see-more-container .split-button button svg, .split-button .see-more-container button svg {
  width: 12px;
  height: 12px;
  display: inline-block;
  fill: #CC4744;
}

.see-more-container .button:hover, .see-more-container .pagination-next-link:hover, .see-more-container .pagination-prev-link:hover, .see-more-container .pagination-first-link:hover, .see-more-container .pagination-last-link:hover, .see-more-container .subscriptions-subscribe button:hover, .subscriptions-subscribe .see-more-container button:hover, .see-more-container .requests-table-toolbar .organization-subscribe button:hover, .requests-table-toolbar .organization-subscribe .see-more-container button:hover, .see-more-container .community-follow button:hover, .community-follow .see-more-container button:hover, .see-more-container .article-subscribe button:hover, .article-subscribe .see-more-container button:hover, .see-more-container .section-subscribe button:hover, .section-subscribe .see-more-container button:hover, .see-more-container .split-button button:hover, .split-button .see-more-container button:hover {
  color: #333333;
  background-color: transparent;
}
.see-more-container .button:hover svg, .see-more-container .pagination-next-link:hover svg, .see-more-container .pagination-prev-link:hover svg, .see-more-container .pagination-first-link:hover svg, .see-more-container .pagination-last-link:hover svg, .see-more-container .subscriptions-subscribe button:hover svg, .subscriptions-subscribe .see-more-container button:hover svg, .see-more-container .requests-table-toolbar .organization-subscribe button:hover svg, .requests-table-toolbar .organization-subscribe .see-more-container button:hover svg, .see-more-container .community-follow button:hover svg, .community-follow .see-more-container button:hover svg, .see-more-container .article-subscribe button:hover svg, .article-subscribe .see-more-container button:hover svg, .see-more-container .section-subscribe button:hover svg, .section-subscribe .see-more-container button:hover svg, .see-more-container .split-button button:hover svg, .split-button .see-more-container button:hover svg {
  fill: #333333;
}

.see-more-container .button.active, .see-more-container .active.pagination-next-link, .see-more-container .active.pagination-prev-link, .see-more-container .active.pagination-first-link, .see-more-container .active.pagination-last-link, .see-more-container .subscriptions-subscribe button.active, .subscriptions-subscribe .see-more-container button.active, .see-more-container .requests-table-toolbar .organization-subscribe button.active, .requests-table-toolbar .organization-subscribe .see-more-container button.active, .see-more-container .community-follow button.active, .community-follow .see-more-container button.active, .see-more-container .article-subscribe button.active, .article-subscribe .see-more-container button.active, .see-more-container .section-subscribe button.active, .section-subscribe .see-more-container button.active, .see-more-container .split-button button.active, .split-button .see-more-container button.active,
.see-more-container .button.active:active,
.see-more-container .button.active:focus {
  background-color: transparent !important;
  color: #CC4744;
}
.see-more-container .button.active svg, .see-more-container .active.pagination-next-link svg, .see-more-container .active.pagination-prev-link svg, .see-more-container .active.pagination-first-link svg, .see-more-container .active.pagination-last-link svg, .see-more-container .subscriptions-subscribe button.active svg, .subscriptions-subscribe .see-more-container button.active svg, .see-more-container .requests-table-toolbar .organization-subscribe button.active svg, .requests-table-toolbar .organization-subscribe .see-more-container button.active svg, .see-more-container .community-follow button.active svg, .community-follow .see-more-container button.active svg, .see-more-container .article-subscribe button.active svg, .article-subscribe .see-more-container button.active svg, .see-more-container .section-subscribe button.active svg, .section-subscribe .see-more-container button.active svg, .see-more-container .split-button button.active svg, .split-button .see-more-container button.active svg,
.see-more-container .button.active:active svg,
.see-more-container .button.active:focus svg {
  fill: #CC4744;
}
.see-more-container .button.active:hover, .see-more-container .active.pagination-next-link:hover, .see-more-container .active.pagination-prev-link:hover, .see-more-container .active.pagination-first-link:hover, .see-more-container .active.pagination-last-link:hover, .see-more-container .subscriptions-subscribe button.active:hover, .subscriptions-subscribe .see-more-container button.active:hover, .see-more-container .requests-table-toolbar .organization-subscribe button.active:hover, .requests-table-toolbar .organization-subscribe .see-more-container button.active:hover, .see-more-container .community-follow button.active:hover, .community-follow .see-more-container button.active:hover, .see-more-container .article-subscribe button.active:hover, .article-subscribe .see-more-container button.active:hover, .see-more-container .section-subscribe button.active:hover, .section-subscribe .see-more-container button.active:hover, .see-more-container .split-button button.active:hover, .split-button .see-more-container button.active:hover,
.see-more-container .button.active:active:hover,
.see-more-container .button.active:focus:hover {
  color: #333333;
  background-color: transparent !important;
}
.see-more-container .button.active:hover svg, .see-more-container .active.pagination-next-link:hover svg, .see-more-container .active.pagination-prev-link:hover svg, .see-more-container .active.pagination-first-link:hover svg, .see-more-container .active.pagination-last-link:hover svg, .see-more-container .subscriptions-subscribe button.active:hover svg, .subscriptions-subscribe .see-more-container button.active:hover svg, .see-more-container .requests-table-toolbar .organization-subscribe button.active:hover svg, .requests-table-toolbar .organization-subscribe .see-more-container button.active:hover svg, .see-more-container .community-follow button.active:hover svg, .community-follow .see-more-container button.active:hover svg, .see-more-container .article-subscribe button.active:hover svg, .article-subscribe .see-more-container button.active:hover svg, .see-more-container .section-subscribe button.active:hover svg, .section-subscribe .see-more-container button.active:hover svg, .see-more-container .split-button button.active:hover svg, .split-button .see-more-container button.active:hover svg,
.see-more-container .button.active:active:hover svg,
.see-more-container .button.active:focus:hover svg {
  fill: #333333;
}

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

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

[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 {
  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: #5a6d7c;
  font-size: 14px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  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;
  }
}

/***** Article Body Tables *****/
.article-body table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  border: 1px solid #ddd;
}
@media (max-width: 768px) {
  .article-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.article-body table td, .article-body table th {
  padding: 0.75rem;
  border: 1px solid #ddd !important;
  text-align: left;
  vertical-align: top;
}
[dir=rtl] .article-body table td, [dir=rtl] .article-body table th {
  text-align: right;
}
.article-body table td[align=center], .article-body table th[align=center] {
  text-align: center;
}
.article-body table td[align=center] img, .article-body table th[align=center] img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.article-body table td[align=center] .mediaobject,
.article-body table td[align=center] .mediaobject.image-center, .article-body table th[align=center] .mediaobject,
.article-body table th[align=center] .mediaobject.image-center {
  display: block;
  text-align: center;
}
.article-body table td[align=center] .mediaobject img,
.article-body table td[align=center] .mediaobject.image-center img, .article-body table th[align=center] .mediaobject img,
.article-body table th[align=center] .mediaobject.image-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.article-body table td[align=right], .article-body table th[align=right] {
  text-align: right;
}
[dir=rtl] .article-body table td[align=right], [dir=rtl] .article-body table th[align=right] {
  text-align: left;
}
.article-body table td[align=left], .article-body table th[align=left] {
  text-align: left;
}
[dir=rtl] .article-body table td[align=left], [dir=rtl] .article-body table th[align=left] {
  text-align: right;
}
.article-body table td p, .article-body table th p {
  margin: 0;
}
.article-body table td .bold, .article-body table td strong, .article-body table th .bold, .article-body table th strong {
  font-weight: 600;
}
.article-body table td:first-child,
.article-body table th:first-child {
  vertical-align: middle;
}
.article-body table th {
  background-color: #f0f0f0;
  font-weight: 600;
}
.article-body table tr:nth-child(even) {
  background-color: #f7f7f7;
}
.article-body table tr:hover {
  background-color: #f0f0f0;
}
.article-body table a, .article-body table a.link {
  color: #1F73B7;
  text-decoration: none;
}
.article-body table a:hover, .article-body table a:active, .article-body table a:focus, .article-body table a.link:hover, .article-body table a.link:active, .article-body table a.link:focus {
  text-decoration: underline;
}

/***** Informaltable (legacy support) *****/
.article-body .informaltable {
  width: 100%;
  margin-bottom: 1.5rem;
}
.article-body .informaltable table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.text-large {
  font-size: 20px;
  line-height: 1.5;
}

.text-medium {
  font-size: 16px;
  line-height: 1.6;
}

.text-small {
  font-size: 14px;
  line-height: 1.6;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/***** 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 #87929D;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid #CC4744;
}

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

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

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

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

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

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

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

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

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

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

.form footer a {
  color: #5a6d7c;
  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 {
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 5%;
  max-width: 1360px;
}
@media (min-width: 1360px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

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

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

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

.nav-wrapper-desktop {
  display: none;
}
@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: #2F3941;
  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: #2F3941;
}
.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: #CC4744;
  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 {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: #5a6d7c;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 5%;
  max-width: 1360px;
}
@media (min-width: 1360px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: #5a6d7c;
  display: inline-block;
}

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

/* New Footer Styles */
/* Grid layout is now handled by Tailwind classes in the template */
/* Country selector styling */
select {
  /* Style the dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select:focus {
  outline: none;
}

/* Social media icons hover effects */
.social-icon {
  transition: color 0.2s ease-in-out;
}
.social-icon:hover {
  transform: translateY(-1px);
}

/* Footer section spacing */
.footer-section h3 {
  margin-bottom: 1.5rem;
}
.footer-section ul li {
  margin-bottom: 1rem;
}
.footer-section ul li:last-child {
  margin-bottom: 0;
}

/* Compliance badges */
.compliance-badges img {
  max-height: 4rem;
  width: auto;
  object-fit: contain;
}

/* App download section styling */
.app-download-section .download-box {
  background: rgba(55, 65, 81, 0.8);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
}
.app-download-section .download-box h3 {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.app-download-section .download-box .app-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .app-download-section .download-box .app-buttons {
    flex-direction: row;
  }
}
.app-download-section .download-box .app-buttons img {
  height: 3rem;
  width: auto;
  transition: opacity 0.2s ease-in-out;
}
.app-download-section .download-box .app-buttons img:hover {
  opacity: 0.8;
}

/* Footer navigation improvements */
.footer-nav-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1.5rem;
}
.footer-nav-section ul li {
  margin-bottom: 0.75rem;
}
.footer-nav-section ul li a {
  font-size: 0.875rem;
  color: rgb(209, 213, 219);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.footer-nav-section ul li a:hover {
  color: white;
}
.footer-nav-section ul li button {
  font-size: 0.875rem;
  color: rgb(209, 213, 219);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}
.footer-nav-section ul li button:hover {
  color: white;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs::-webkit-scrollbar {
  display: none;
}
.breadcrumbs li {
  color: #5a6d7c;
  font-size: 14px;
  flex-shrink: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
  flex-shrink: 0;
}
.breadcrumbs li a:visited {
  color: #1F73B7;
}

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

.search {
  border-color: #87929D;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: #666;
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  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: 36px;
  width: 100%;
  background-color: #fff;
  border-radius: 30px;
  text-align: left;
  display: flex;
  align-items: center;
}
.search input[type=search]:focus {
  color: #555;
  background-color: #fff;
}
.search input[type=search]::placeholder {
  color: #666666;
  font-size: 16px;
}
.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: #333333;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: #CC4744;
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #CC4744;
}
.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-has-value input[type=search]:focus {
  border-right-color: #CC4744;
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 30px;
  border-top-right-radius: 30px;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: #CC4744;
}

[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]:focus {
  border-left-color: #CC4744;
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: #CC4744;
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 25px;
  z-index: 1;
  width: 20px;
  height: 20px;
  color: #333333;
  pointer-events: none;
  transition: color border 0.12s ease-in-out;
}
@media (max-width: 768px) {
  .search-icon {
    left: 16px !important;
  }
}
@media (min-width: 768px) {
  .search-icon {
    left: 39px;
  }
}
@media (min-width: 1024px) {
  .search-icon {
    left: 15px;
  }
}
.search:focus-within .search-icon {
  color: #CC4744;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}
@media (max-width: 768px) {
  [dir=rtl] .search-icon {
    right: 31px;
  }
}
@media (min-width: 768px) {
  [dir=rtl] .search-icon {
    right: 39px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-icon {
    right: 15px;
  }
}

/***** Hero search styles *****/
.hero .search {
  background: #fff;
  border-radius: 8px;
  padding: 7px;
  width: 100%;
  position: relative;
}
.hero .search input[type=search] {
  background: transparent;
  border: none;
  font-size: 16px;
  height: 40px;
  padding-left: 40px;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
}
.hero .search input[type=search]:focus {
  outline: none;
}
.hero .search input[type=search]::placeholder {
  color: #666666;
  font-size: 16px;
}
.hero .search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  .hero .search {
    padding: 5px;
  }
  .hero .search input[type=search] {
    font-size: 14px;
    height: 36px;
    padding-left: 32px;
    padding-right: 22px;
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .hero .search-icon {
    left: 26px;
    width: 16px;
    height: 16px;
  }
}
/***** Hero component *****/
.hero {
  background-color: #ffffff;
  padding: 48px 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .hero {
    padding: 24px 16px;
  }
  .hero-inner {
    max-width: 100%;
  }
}

.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 .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.category-search-container {
  margin: 2rem 0;
  padding: 0;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .sub-nav {
    gap: 12px;
    margin-bottom: 30px;
  }
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
@media (max-width: 768px) {
  .sub-nav .breadcrumbs {
    order: 1;
    width: 100%;
  }
}
.sub-nav .search-container {
  position: relative;
  max-width: 300px;
  width: 100%;
}
@media (max-width: 768px) {
  .sub-nav .search-container {
    order: 2;
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav .search-container .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 768px) {
  .sub-nav .search-container .search-icon {
    width: 16px;
    height: 16px;
    left: 10px;
  }
}
.sub-nav input[type=search] {
  padding-left: 40px;
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}
.sub-nav input[type=search]::placeholder {
  color: #666666;
  font-size: 16px;
}
@media (max-width: 768px) {
  .sub-nav input[type=search] {
    padding: 12px 12px 12px 40px;
    font-size: 16px;
    border-radius: 30px;
  }
}

/***** 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 -10px;
  }
}
.blocks-item {
  border: 0.5px solid #CC4744;
  border-radius: 8px;
  box-sizing: border-box;
  color: #CC4744;
  display: flex;
  flex: 1 0 240px;
  margin: 0 0 20px;
  max-width: calc(25% - 20px);
  text-align: center;
  min-height: 150px;
  transition: all 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 10px 20px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #000000;
  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: #2F3941;
}
.blocks-item-link {
  color: #CC4744;
  padding: 20px 25px;
  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 3px #CC4744;
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 600;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/***** Homepage *****/
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 30px;
  }
}

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

/***** Promoted articles *****/
/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01J5VP4B6DJEJS2BE6CDD5FCBQ);
  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: 16px;
  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: #2F3941;
  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: #CC4744;
  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;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

/* DEPRECATED: section-tree styles - now using pure CSS accordions */
.section-tree {
  display: none !important; /* Hide any remaining section-tree elements */
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: #2F3941;
}

.icon-star {
  color: #CC4744;
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: #2F3941;
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
  display: none;
}

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article a {
  text-decoration: none !important;
}
.article a:hover, .article a:active, .article a:focus {
  text-decoration: underline !important;
}
.article-container {
  display: flex;
  flex-direction: column;
}
@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-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@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;
}
.article-body a {
  color: #1F73B7;
  text-decoration: underline;
}
.article-body a:visited {
  color: #9358B0;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #0F3554;
}
.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 {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #111827;
  line-height: 1.2;
}
.article-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
}
.article-body h4 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
  line-height: 1.4;
}
.article-body p {
  margin-bottom: 1rem;
  line-height: 1.5;
}
.article-body ul,
.article-body ol {
  margin-bottom: 1rem;
}
.article-body li {
  margin-bottom: 0.25rem;
}
.article-body .orderedlist {
  margin-bottom: 1rem;
  padding-left: 0;
}
.article-body .orderedlist ol.orderedlist {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.article-body .orderedlist ol.orderedlist[type="1"] {
  list-style-type: decimal;
}
.article-body .orderedlist ol.orderedlist[type=a] {
  list-style-type: lower-alpha;
}
.article-body .orderedlist ol.orderedlist[type=A] {
  list-style-type: upper-alpha;
}
.article-body .orderedlist ol.orderedlist[type=i] {
  list-style-type: lower-roman;
}
.article-body .orderedlist ol.orderedlist[type=I] {
  list-style-type: upper-roman;
}
.article-body .orderedlist .listitem {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.article-body .orderedlist .listitem p {
  margin-bottom: 0.5rem;
}
.article-body .orderedlist .listitem p:last-child {
  margin-bottom: 0;
}
.article-body .orderedlist .listitem .orderedlist {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}
.article-body .orderedlist .listitem .orderedlist ol.orderedlist {
  padding-left: 2rem;
}
.article-body .procedure {
  margin-bottom: 1rem;
  padding-left: 0;
}
.article-body .procedure ol.procedure {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  list-style-type: decimal;
}
.article-body .procedure ol.procedure[type="1"] {
  list-style-type: decimal;
}
.article-body .procedure ol.procedure[type=a] {
  list-style-type: lower-alpha;
}
.article-body .procedure ol.procedure[type=A] {
  list-style-type: upper-alpha;
}
.article-body .procedure .step {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.article-body .procedure .step p {
  margin-bottom: 0.5rem;
}
.article-body .procedure .step p:last-child {
  margin-bottom: 0;
}
.article-body .procedure .step .orderedlist {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}
.article-body .procedure .step .orderedlist ol.orderedlist {
  padding-left: 2rem;
}
.article-body .procedure .step ol.substeps {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  padding-left: 2rem;
  list-style-position: outside;
}
.article-body .procedure .step ol.substeps[type=a] {
  list-style-type: lower-alpha !important;
}
.article-body .procedure .step ol.substeps[type=A] {
  list-style-type: upper-alpha !important;
}
.article-body .procedure .step ol.substeps[type="1"] {
  list-style-type: decimal !important;
}
.article-body .procedure .step ol.substeps .step {
  margin-bottom: 0.5rem;
}
.article-body ol.substeps {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  list-style-position: outside;
}
.article-body ol.substeps[type=a] {
  list-style-type: lower-alpha !important;
}
.article-body ol.substeps[type=A] {
  list-style-type: upper-alpha !important;
}
.article-body ol.substeps[type="1"] {
  list-style-type: decimal !important;
}
.article-body ol.substeps .step {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.article-body ol.substeps .step p {
  margin-bottom: 0.5rem;
}
.article-body ol.substeps .step p:last-child {
  margin-bottom: 0;
}
.article-body .itemizedlist {
  margin-bottom: 1rem;
  padding-left: 0;
}
.article-body .itemizedlist ul.itemizedlist {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.article-body .itemizedlist ul.itemizedlist[style*="list-style-type: disc"] {
  list-style-type: disc;
}
.article-body .itemizedlist ul.itemizedlist[style*="list-style-type: circle"] {
  list-style-type: circle;
}
.article-body .itemizedlist ul.itemizedlist[style*="list-style-type: square"] {
  list-style-type: square;
}
.article-body .itemizedlist .listitem {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.article-body .itemizedlist .listitem p {
  margin-bottom: 0.5rem;
}
.article-body .itemizedlist .listitem p:last-child {
  margin-bottom: 0;
}
.article-body .informaltable.table-responsive ul.itemizedlist {
  padding-left: 0;
}
.article-body .guimenu,
.article-body .guisubmenu,
.article-body .guimenuitem {
  font-weight: 600;
  color: black;
  border: none;
}
.article-body .inlinemediaobject {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
}
.article-body .inlinemediaobject img {
  display: inline !important;
  max-height: 1.2em;
  width: auto;
  margin: 0 0.25rem !important;
  border-radius: 0 !important;
  object-fit: contain;
  vertical-align: middle;
}
.article-body .mediaobject {
  display: block;
}
.article-body .mediaobject.image-center {
  text-align: center;
}
.article-body .mediaobject.image-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.article-body .bold strong,
.article-body span.bold strong {
  font-weight: 700;
  color: #111827;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #5a6d7c;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #CC4744;
  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;
  display: none;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
    display: block;
  }
}
.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: 15px;
  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 #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: #2F3941;
  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: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-articles-container {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.section-articles-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #111827;
  padding-bottom: 8px;
  border-bottom: 2px solid #d1d5db;
}

.section-articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.section-article-item {
  margin-bottom: 8px;
}
.section-article-item:last-child {
  margin-bottom: 0;
}

.section-article-link {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
  background-color: white;
  border: 1px solid #e5e7eb;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .section-article-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.3;
  }
}
.section-article-link:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  transform: translateX(4px);
  text-decoration: none;
  color: #CC4744;
}
.section-article-link.current-article {
  background-color: #CC4744;
  color: white;
  border-color: #CC4744;
  font-weight: 600;
}
.section-article-link.current-article:hover {
  background-color: #ae322f;
  border-color: #ae322f;
  color: white;
}

.section-more-link {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: #CC4744;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.section-more-link:hover {
  background-color: #f3f4f6;
  text-decoration: none;
}

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

.custom-related-articles-sidebar {
  margin-top: 0;
  margin-bottom: 24px;
}
.custom-related-articles-sidebar .related-articles {
  padding: 16px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.custom-related-articles-sidebar .related-articles-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #111827;
  padding-bottom: 8px;
  border-bottom: 2px solid #d1d5db;
}
.custom-related-articles-sidebar .related-articles ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.custom-related-articles-sidebar .related-articles li {
  margin-bottom: 12px;
}
.custom-related-articles-sidebar .related-articles li:last-child {
  margin-bottom: 0;
}
.custom-related-articles-sidebar .related-articles li:nth-child(n+9) {
  display: none;
}
.custom-related-articles-sidebar .related-articles a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
  background-color: white;
  border: 1px solid #e5e7eb;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .custom-related-articles-sidebar .related-articles a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.3;
  }
}
.custom-related-articles-sidebar .related-articles a:hover {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  transform: translateX(4px);
  text-decoration: none;
  color: #CC4744;
}

.mediaobject img {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: #2F3941;
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #5a6d7c;
}

/***** 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: #5a6d7c;
}
.share a:hover {
  text-decoration: none;
  color: #CC4744;
}
.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: #5a6d7c;
  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: #5a6d7c;
  font-size: 14px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #CC4744;
  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: #CC4744;
}
.comment-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
}
.comment-body a {
  color: #1F73B7;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #9358B0;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #0F3554;
}
.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 {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}
.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: #5a6d7c;
  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: #CC4744;
}

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

.vote-voted {
  color: #CC4744;
}

.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/01K1H2GHF476K8B2MV30W0N9QW);
  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: #CC4744;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: #CC4744;
  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 #CC4744;
  content: attr(data-follower-count);
  color: #CC4744;
  display: inline-block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-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 #CC4744;
  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: #5a6d7c;
  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: #2F3941;
    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: #CC4744;
}
.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: #5a6d7c;
}
.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;
  }
}

/***** Status.io Bar *****/
.statusio-container {
  width: 100%;
  margin: 15px 0 0;
  display: flex;
  justify-content: center;
}

.statusio-bar {
  display: flex;
  justify-content: flex-start;
  max-width: 1360px;
  min-width: 1360px;
  padding: 10px 0;
  height: 77px;
  text-align: left;
  background-color: #f4f4f4;
  margin-top: 64px;
  transition: background-color 0.3s ease;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  border-radius: 8px;
}
.statusio-bar:hover {
  opacity: 0.9;
}
.statusio-bar.operational {
  background-color: #D7EBDD;
}
.statusio-bar.operational #statusio-message {
  color: #379B55;
  font-weight: 400;
}
.statusio-bar.operational .statusio-icon {
  background-color: #379B55;
  position: relative;
}
.statusio-bar.operational .statusio-icon:before {
  content: "";
  display: block;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  margin-top: -1px;
}
.statusio-bar.minor {
  background-color: #fce588;
}
.statusio-bar.minor #statusio-message {
  color: #d97706;
  font-weight: 600;
}
.statusio-bar.minor .statusio-icon {
  background-color: #d97706;
}
.statusio-bar.major {
  background-color: #ef8278;
}
.statusio-bar.major #statusio-message {
  color: #fff;
  font-weight: 600;
}
.statusio-bar.major .statusio-icon {
  background-color: #991b1b;
}
.statusio-bar.critical {
  background-color: #ef8278;
}
.statusio-bar.critical #statusio-message {
  color: #fff;
  font-weight: 400;
}
.statusio-bar.critical .statusio-icon {
  background-color: #991b1b;
}
.statusio-bar.maintenance {
  background-color: #6bb3e8;
}
.statusio-bar.maintenance #statusio-message {
  color: #fff;
  font-weight: 400;
}
.statusio-bar.maintenance .statusio-icon {
  background-color: #1e40af;
}
.statusio-bar.loading {
  background-color: #f8f9fa;
}
.statusio-bar.loading .statusio-icon {
  background-color: #6c757d;
  animation: pulse 1.5s ease-in-out infinite;
}
.statusio-bar.error {
  background-color: #f8f9fa;
}
.statusio-bar.error .statusio-icon {
  background-color: #6c757d;
}
.statusio-bar.degraded {
  background-color: #fce588;
}
.statusio-bar.degraded #statusio-message {
  color: #d97706;
  font-weight: 600;
}
.statusio-bar.degraded .statusio-icon {
  background-color: #d97706;
}
.statusio-bar.partial-outage {
  background-color: #ef8278;
}
.statusio-bar.partial-outage #statusio-message {
  color: #fff;
  font-weight: 600;
}
.statusio-bar.partial-outage .statusio-icon {
  background-color: #991b1b;
}
.statusio-bar.major-outage {
  background-color: #ef8278;
}
.statusio-bar.major-outage #statusio-message {
  color: #fff;
  font-weight: 600;
}
.statusio-bar.major-outage .statusio-icon {
  background-color: #991b1b;
}
.statusio-bar.minor-outage {
  background-color: #fce588;
}
.statusio-bar.minor-outage #statusio-message {
  color: #d97706;
  font-weight: 600;
}
.statusio-bar.minor-outage .statusio-icon {
  background-color: #d97706;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.statusio-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 auto;
  padding: 0 3%;
  text-align: left;
  width: 100%;
}

.statusio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

#statusio-message {
  font-size: 24px;
  font-weight: 400;
  text-align: left;
  width: 100%;
}

@media (min-width: 768px) {
  .statusio-bar {
    padding: 12px 0;
  }
  #statusio-message {
    font-size: 24px;
  }
  .statusio-icon {
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 1400px) {
  .statusio-bar {
    min-width: auto;
    max-width: 100%;
  }
}
/***** 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', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 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;
}
.post-body a {
  color: #1F73B7;
  text-decoration: underline;
}
.post-body a:visited {
  color: #9358B0;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #0F3554;
}
.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 {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #5a6d7c;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #CC4744;
  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: 14px;
  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 #CC4744;
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #2F3941;
  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: #2F3941;
  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 #CC4744;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #2F3941;
}

.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;
  transform: none;
}
.collapsible-sidebar-toggle[aria-expanded=true] .chevron-icon {
  display: inline-block;
  transform: rotate(180deg);
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid #CC4744;
}
.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 *****/
.my-activities-nav {
  background-color: #f2f2f2;
  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;
}
.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: #5a6d7c;
  font-size: 14px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #5a6d7c;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #5a6d7c;
  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 #CC4744;
}
.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 #CC4744;
}
.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: 15px;
  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: #5a6d7c;
  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-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: #5a6d7c;
  font-size: 14px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

/* User Profiles */
.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 .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;
}

.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: #5a6d7c;
  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 #CC4744;
  border-radius: 4px;
  color: #CC4744;
  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: #5a6d7c;
  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: 15px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #5a6d7c;
  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-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: #FFFFFF;
  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-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 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: #2F3941;
}
.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-count {
  font-size: 14px;
  color: #2F3941;
  margin-bottom: 24px;
  margin-top: 24px;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
  list-style: none;
  padding: 0;
}
.search-results-list > li {
  padding: 0;
  margin-bottom: 32px;
}
.search-results-list > li:first-child {
  border-top: none;
}
.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-card h2 {
  margin: 0 0 4px 0 !important;
}
.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-votes, .search-result-meta-count {
  color: #5a6d7c;
  font-size: 14px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #CC4744;
  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;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
@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-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #2F3941;
  word-break: break-word;
  min-height: 4.5em;
}
.search-result-description::before {
  content: "... ";
  color: #68737D;
}
.search-result-description em {
  font-style: normal;
  font-weight: 600;
  color: #000;
}

/* Keyword highlighting in search results */
.search-result-description em {
  font-style: normal;
  font-weight: 600;
  color: #000;
}

/* Add a yellow background for Chinese */
html[lang|=zh] .search-result-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 #87929D;
}

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

/***** 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;
}

.video-card {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.video-card:hover {
  transform: translateY(-5px);
}
.video-card-image-container {
  overflow: hidden;
  height: 250px;
  position: relative;
  background-color: #EBB5B3;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
}
.video-card-image {
  width: 80%;
  height: auto;
  object-contain: fit;
  display: block;
  margin: 0 auto;
}

.video-card--purple {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.video-card--purple:hover {
  transform: translateY(-5px);
}
.video-card--purple-image-container {
  overflow: hidden;
  height: 250px;
  position: relative;
  background-color: #C3BFDF;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
}
.video-card--purple-image {
  width: 80%;
  height: auto;
  object-contain: fit;
  display: block;
  margin: 0 auto;
}

.video-card--green {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.video-card--green:hover {
  transform: translateY(-5px);
}
.video-card--green-image-container {
  overflow: hidden;
  height: 250px;
  position: relative;
  background-color: #BEE3BC;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
}
.video-card--green-image {
  width: 80%;
  height: auto;
  object-contain: fit;
  display: block;
  margin: 0 auto;
}

.video-card--orange {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.video-card--orange:hover {
  transform: translateY(-5px);
}
.video-card--orange-image-container {
  overflow: hidden;
  height: 250px;
  position: relative;
  background-color: #FFE1B2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
}
.video-card--orange-image {
  width: 80%;
  height: auto;
  object-contain: fit;
  display: block;
  margin: 0 auto;
}

.video-card-content {
  padding: 20px;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: white;
  border-radius: 16px;
}

.video-card-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 8px;
  color: #333;
  line-height: 1.3;
}

.video-card-category {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #CC4744;
}

.video-section {
  margin: 50px 0 70px;
}
.video-section .video-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.video-section .glide__arrow {
  position: static;
  transform: none;
  border: none;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.video-section .glide__arrow:hover {
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.video-section .glide__arrow svg {
  width: 24px;
  height: 24px;
  color: #333;
}
.video-section .glide__slides {
  padding: 10px 0;
}
.video-section .glide__slide {
  padding: 10px;
}

/**
 * Responsive video container styling
 */
.mediaobject .video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 1.5rem 0;
}
.mediaobject .video-container .videoobject iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/***** Trending Articles Section *****/
.trending-articles-container {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
.animate-pulse {
  animation: pulse 1.5s infinite ease-in-out;
}

#trending-articles-skeleton,
#trending-articles-content {
  min-height: 100px;
}

.trending-articles-api-item {
  transition: all 0.2s ease-in-out;
}
.trending-articles-api-item a {
  text-decoration: none;
  height: 100%;
}

/***** Tip Element Styling Overrides *****/
.section.accordion.sub-topic .panel-body .tip {
  background-color: #f9fafb;
  border-radius: 0.375rem;
  border-left: 4px solid #3b82f6;
  padding: 1rem;
  margin: 1rem 0;
  display: block !important;
}
.section.accordion.sub-topic .panel-body .tip .title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1e3a8a;
}
.section.accordion.sub-topic .panel-body .tip p {
  display: block !important;
  margin-bottom: 0.5rem;
}
.section.accordion.sub-topic .panel-body ul.itemizedlist {
  list-style-type: disc !important;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  display: block !important;
}
.section.accordion.sub-topic .panel-body ul.itemizedlist li.listitem {
  display: list-item !important;
  margin-bottom: 0.5rem;
}
.section.accordion.sub-topic .panel-body ul.itemizedlist li.listitem p {
  display: block !important;
  margin-bottom: 0.5rem;
}
.section.accordion.sub-topic .panel-body ol.procedure {
  list-style-type: decimal !important;
  padding-left: 8px !important;
  margin-bottom: 1rem;
  display: block !important;
}
.section.accordion.sub-topic .panel-body ol.procedure li.step {
  display: list-item !important;
  margin-bottom: 0.5rem;
}
.section.accordion.sub-topic .panel-body ol.procedure li.step > p {
  display: block !important;
  margin-bottom: 0.5rem;
}
.section.accordion.sub-topic .panel-body ol.procedure li.step .itemizedlist {
  margin-top: 0.5rem;
}
.section.accordion.sub-topic .panel-body li[style*="display:"] {
  display: list-item !important;
}

/***** Tabbed Article Layout *****/
.article-body.tabbed-layout .tab-panel .titlepage {
  display: none;
}
.article-body.tabbed-layout .tab-panel p, .article-body.tabbed-layout .tab-panel ol, .article-body.tabbed-layout .tab-panel ul, .article-body.tabbed-layout .tab-panel .tip, .article-body.tabbed-layout .tab-panel .procedure, .article-body.tabbed-layout .tab-panel .itemizedlist {
  @apply mb-4;
}
.article-body.tabbed-layout .tab-panel ol {
  @apply list-decimal pl-6;
}
.article-body.tabbed-layout .tab-panel ol li {
  @apply mb-2;
}
.article-body.tabbed-layout .tab-panel ul {
  @apply list-disc pl-6;
}
.article-body.tabbed-layout .tab-panel ul li {
  @apply mb-2;
}
.article-body.tabbed-layout .tab-panel .tip {
  @apply bg-gray-50 border-l-4 border-primary p-4 rounded-r mb-4;
}
.article-body.tabbed-layout .tab-panel .tip .title {
  @apply font-semibold text-gray-800 mb-2;
}
@media (max-width: 767px) {
  .article-body.tabbed-layout button[role=tab] {
    @apply px-4 py-2 text-xs;
  }
}

.tab-panel {
  transition: opacity 0.2s ease-in-out;
}

.mega-menu-viewport {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  top: 100%;
  left: 0;
  perspective: 2000px;
  z-index: 50;
}

.mega-menu-content {
  position: relative;
  transform-origin: top center;
  margin-top: 10px;
  width: 100%;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;
  transition: width, height, 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-menu-content[data-state=open] {
  animation: scaleIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-menu-content[data-state=closed] {
  animation: scaleOut 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-menu-content[data-motion=from-start] {
  animation-name: enterFromLeft;
}
.mega-menu-content[data-motion=from-end] {
  animation-name: enterFromRight;
}
.mega-menu-content[data-motion=to-start] {
  animation-name: exitToLeft;
}
.mega-menu-content[data-motion=to-end] {
  animation-name: exitToRight;
}
@media only screen and (min-width: 600px) {
  .mega-menu-content {
    width: auto;
  }
}

.mega-menu-arrow {
  position: relative;
  top: 70%;
  background-color: white;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-top-left-radius: 2px;
  margin: 0 auto;
}

.caret-down {
  position: relative;
  color: #D43C2E;
  top: 1px;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.caret-down[data-state=open] {
  transform: rotate(-180deg);
}

@keyframes enterFromRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes enterFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes exitToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}
@keyframes exitToLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100px);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: rotateX(-20deg) scale(0.95);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
}
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: rotateX(-10deg) scale(0.98);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.mega-menu-item {
  display: block;
  outline: none;
  text-decoration: none;
  user-select: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-menu-item:focus {
  box-shadow: 0 0 0 2px #D43C2E;
}
.mega-menu-item:hover {
  background-color: #f3f4f6;
  color: #D43C2E;
}

.mega-menu-category-heading {
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 5px;
  color: #D43C2E;
}

.mega-menu-category-text {
  color: #6b7280;
  line-height: 1.4;
  font-weight: initial;
}

.mega-menu-full-width {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: 50;
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.mega-menu-full-width[data-state=open] {
  animation: slideDown 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-menu-full-width[data-state=closed] {
  animation: slideUp 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-5px);
  }
}
.mega-menu-trigger {
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-menu-trigger[data-state=open] {
  background-color: #f3f4f6;
  color: #D43C2E;
}
.mega-menu-trigger:hover {
  background-color: #f3f4f6;
  color: #D43C2E;
}

/***** Error Page Styles *****/
.error-page-section {
  background-color: #FFFFFF;
  padding: 2rem 0;
  min-height: 60vh;
}
@media (min-width: 768px) {
  .error-page-section {
    padding: 3rem 0;
  }
}
@media (min-width: 1024px) {
  .error-page-section {
    padding: 4rem 0;
  }
}

.error-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 0 auto;
  padding: 0 5%;
  max-width: 1360px;
}
@media (min-width: 1360px) {
  .error-page-container {
    padding: 0;
    width: 90%;
  }
}
@media (min-width: 768px) {
  .error-page-container {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }
}
@media (min-width: 1024px) {
  .error-page-container {
    gap: 4rem;
  }
}

.error-page-content {
  flex: 1;
  width: 100%;
}
@media (min-width: 768px) {
  .error-page-content {
    max-width: 50%;
  }
}

.error-page-text {
  text-align: center;
}
@media (min-width: 768px) {
  .error-page-text {
    text-align: left;
  }
}

.error-page-title {
  font-size: 2rem;
  font-weight: 600;
  color: #CC4744;
  margin-bottom: 1rem;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .error-page-title {
    font-size: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .error-page-title {
    font-size: 3rem;
  }
}

.error-page-description {
  font-size: 1.125rem;
  color: #2F3941;
  margin-bottom: 2rem;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .error-page-description {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
  }
}

.error-page-links {
  margin-top: 2rem;
}

.error-page-link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .error-page-link-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
@media (min-width: 1024px) {
  .error-page-link-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

.error-page-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: #FFFFFF;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  text-decoration: none;
  color: #2F3941;
  transition: all 0.2s ease;
}
.error-page-link:hover {
  background-color: #f7f7f7;
  border-color: #CC4744;
  color: #2F3941;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.error-page-link:focus {
  outline: 2px solid #CC4744;
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .error-page-link {
    padding: 1rem 1.25rem;
    gap: 1rem;
  }
}

.error-page-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #f7f7f7;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .error-page-link-icon {
    width: 3rem;
    height: 3rem;
  }
}

.error-page-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #CC4744;
}
@media (min-width: 768px) {
  .error-page-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.error-page-link-text {
  font-weight: 600;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .error-page-link-text {
    font-size: 1rem;
  }
}

.error-page-actions {
  margin-top: 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .error-page-actions {
    text-align: left;
  }
}

.error-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: #CC4744;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.error-page-button:hover {
  background-color: #000;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.error-page-button:focus {
  outline: 2px solid #CC4744;
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .error-page-button {
    padding: 1rem 2rem;
    font-size: 1.125rem;
  }
}

.error-page-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
@media (min-width: 768px) {
  .error-page-visual {
    max-width: 50%;
  }
}

.error-page-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
}
@media (min-width: 768px) {
  .error-page-illustration {
    max-width: 500px;
  }
}

.error-page-404 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
}
@media (min-width: 768px) {
  .error-page-404 {
    height: 400px;
  }
}

.error-page-404-number {
  font-size: 8rem;
  font-weight: 900;
  color: #CC4744;
  opacity: 0.1;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .error-page-404-number {
    font-size: 10rem;
  }
}
@media (min-width: 1024px) {
  .error-page-404-number {
    font-size: 12rem;
  }
}

.error-page-404-decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 3px solid #CC4744;
  border-radius: 50%;
  opacity: 0.2;
}
.error-page-404-decoration::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border: 2px solid #CC4744;
  border-radius: 50%;
  opacity: 0.3;
}
.error-page-404-decoration::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 1px solid #CC4744;
  border-radius: 50%;
  opacity: 0.4;
}
@media (min-width: 768px) {
  .error-page-404-decoration {
    width: 250px;
    height: 250px;
  }
  .error-page-404-decoration::before {
    width: 200px;
    height: 200px;
  }
  .error-page-404-decoration::after {
    width: 125px;
    height: 125px;
  }
}

.error-page-icon-large {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: #f7f7f7;
  border-radius: 50%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .error-page-icon-large {
    width: 250px;
    height: 250px;
  }
}
@media (min-width: 1024px) {
  .error-page-icon-large {
    width: 300px;
    height: 300px;
  }
}

.error-page-icon-svg {
  width: 80px;
  height: 80px;
  color: #CC4744;
}
@media (min-width: 768px) {
  .error-page-icon-svg {
    width: 100px;
    height: 100px;
  }
}
@media (min-width: 1024px) {
  .error-page-icon-svg {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 768px) {
  .error-page-container {
    padding: 0 1rem;
  }
  .error-page-title {
    font-size: 1.75rem;
  }
  .error-page-description {
    font-size: 1rem;
  }
  .error-page-link-grid {
    grid-template-columns: 1fr;
  }
  .error-page-404-number {
    font-size: 6rem;
  }
  .error-page-404-decoration {
    width: 150px;
    height: 150px;
  }
  .error-page-404-decoration::before {
    width: 120px;
    height: 120px;
  }
  .error-page-404-decoration::after {
    width: 80px;
    height: 80px;
  }
  .error-page-icon-large {
    width: 150px;
    height: 150px;
  }
  .error-page-icon-svg {
    width: 60px;
    height: 60px;
  }
}
@media (prefers-contrast: high) {
  .error-page-link {
    border-width: 2px;
  }
  .error-page-button {
    border: 2px solid #CC4744;
  }
}
@media (prefers-reduced-motion: reduce) {
  .error-page-link,
  .error-page-button {
    transition: none;
  }
  .error-page-link:hover,
  .error-page-button:hover {
    transform: none;
  }
}
.glide {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.glide * {
  box-sizing: inherit;
}
.glide__track {
  overflow: hidden;
}
.glide__slides {
  position: relative;
  width: 100%;
  list-style: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  touch-action: pan-Y;
  overflow: hidden;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}
.glide__slides--dragging {
  user-select: none;
}
.glide__slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  white-space: normal;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.glide__slide a {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.glide__arrows {
  -webkit-touch-callout: none;
  user-select: none;
}
.glide__bullets {
  -webkit-touch-callout: none;
  user-select: none;
}
.glide--rtl {
  direction: rtl;
}

.glide__arrow {
  position: absolute;
  display: block;
  top: 50%;
  z-index: 2;
  color: white;
  text-transform: uppercase;
  padding: 9px 12px;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
  text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  opacity: 1;
  cursor: pointer;
  transition: opacity 150ms ease, border 300ms ease-in-out;
  transform: translateY(-50%);
  line-height: 1;
}
.glide__arrow:focus {
  outline: none;
}
.glide__arrow:hover {
  border-color: white;
}
.glide__arrow--left {
  left: 2em;
}
.glide__arrow--right {
  right: 2em;
}
.glide__arrow--disabled {
  opacity: 0.33;
}
.glide__bullets {
  position: absolute;
  z-index: 2;
  bottom: 2em;
  left: 50%;
  display: inline-flex;
  list-style: none;
  transform: translateX(-50%);
}
.glide__bullet {
  background-color: rgba(255, 255, 255, 0.5);
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
  margin: 0 0.25em;
}
.glide__bullet:focus {
  outline: none;
}
.glide__bullet:hover, .glide__bullet:focus {
  border: 2px solid white;
  background-color: rgba(255, 255, 255, 0.5);
}
.glide__bullet--active {
  background-color: white;
}
.glide--swipeable {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.glide--dragging {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

:root {
  --black-a1: hsl(0, 0%, 0%, 0.025);
  --black-a2: hsl(0, 0%, 0%, 0.05);
  --black-a3: hsl(0, 0%, 0%, 0.075);
  --black-a4: hsl(0, 0%, 0%, 0.1);
  --black-a5: hsl(0, 0%, 0%, 0.125);
  --black-a6: hsl(0, 0%, 0%, 0.15);
  --black-a7: hsl(0, 0%, 0%, 0.2);
  --black-a8: hsl(0, 0%, 0%, 0.275);
  --black-a9: hsl(0, 0%, 0%, 0.5);
  --black-a10: hsl(0, 0%, 0%, 0.55);
  --black-a11: hsl(0, 0%, 0%, 0.65);
  --black-a12: hsl(0, 0%, 0%, 0.9);
  --violet-1: hsl(255, 65%, 99.4%);
  --violet-2: hsl(252, 100%, 99%);
  --violet-3: hsl(252, 96%, 98%);
  --violet-4: hsl(252, 91%, 96.4%);
  --violet-5: hsl(252, 85%, 94.7%);
  --violet-6: hsl(252, 78%, 92.2%);
  --violet-7: hsl(252, 72%, 88.6%);
  --violet-8: hsl(252, 68%, 83.2%);
  --violet-9: hsl(252, 56%, 57.5%);
  --violet-10: hsl(251, 48%, 53.5%);
  --violet-11: hsl(250, 43%, 48%);
  --violet-12: hsl(254, 60%, 18.5%);
  --mauve-1: hsl(300, 20%, 99%);
  --mauve-2: hsl(300, 7%, 97%);
  --mauve-3: hsl(291, 7%, 94%);
  --mauve-4: hsl(280, 6%, 90.5%);
  --mauve-5: hsl(283, 5%, 87%);
  --mauve-6: hsl(281, 5%, 82.5%);
  --mauve-7: hsl(279, 4%, 76%);
  --mauve-8: hsl(275, 4%, 66%);
  --mauve-9: hsl(272, 3%, 50%);
  --mauve-10: hsl(272, 4%, 44%);
  --mauve-11: hsl(272, 4%, 36%);
  --mauve-12: hsl(272, 6%, 16%);
  --purple-1: hsl(280, 65%, 99.4%);
  --purple-2: hsl(276, 100%, 99%);
  --purple-3: hsl(276, 83%, 97%);
  --purple-4: hsl(275, 76%, 94.7%);
  --purple-5: hsl(275, 70%, 91.8%);
  --purple-6: hsl(274, 65%, 87.8%);
  --purple-7: hsl(273, 61%, 81.7%);
  --purple-8: hsl(272, 60%, 73.5%);
  --purple-9: hsl(272, 51%, 54%);
  --purple-10: hsl(272, 46%, 50%);
  --purple-11: hsl(272, 50%, 45%);
  --purple-12: hsl(276, 62%, 23.5%);
  --indigo-1: hsl(225, 60%, 99.4%);
  --indigo-2: hsl(223, 100%, 98.6%);
  --indigo-3: hsl(223, 98%, 97%);
  --indigo-4: hsl(223, 92%, 95%);
  --indigo-5: hsl(224, 87%, 92%);
  --indigo-6: hsl(224, 81%, 87%);
  --indigo-7: hsl(225, 76%, 81%);
  --indigo-8: hsl(226, 70%, 73.5%);
  --indigo-9: hsl(226, 70%, 55.5%);
  --indigo-10: hsl(226, 58%, 51%);
  --indigo-11: hsl(226, 55%, 45%);
  --indigo-12: hsl(226, 62%, 17%);
  --gray-50: #f9fafb;
  --gray-hover: #f4f4f4;
}

/* reset */
.NavigationMenuRoot {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  z-index: 50;
  background-color: white;
}

.NavigationMenuList {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  padding: 4px;
  border-radius: 6px;
  list-style: none;
  margin: 0;
}

.NavigationMenuTrigger,
.NavigationMenuLink {
  padding: 16px 16px;
  outline: none;
  user-select: none;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  font-size: 15px !important;
  font-weight: 600;
  color: #333333;
}

.NavigationMenuTrigger:focus,
.NavigationMenuTrigger:hover,
.NavigationMenuLink:hover {
  background-color: var(--gray-hover);
}

.NavigationMenuTrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.NavigationMenuLink {
  display: block;
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
}

.NavigationMenuContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation-duration: 250ms;
  animation-timing-function: ease;
}

.NavigationMenuContent[data-motion=from-start] {
  animation-name: enterFromLeft;
}

.NavigationMenuContent[data-motion=from-end] {
  animation-name: enterFromRight;
}

.NavigationMenuContent[data-motion=to-start] {
  animation-name: exitToLeft;
}

.NavigationMenuContent[data-motion=to-end] {
  animation-name: exitToRight;
}

@media only screen and (min-width: 600px) {
  .NavigationMenuContent {
    width: auto;
  }
}
.NavigationMenuIndicator {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 10px;
  top: 100%;
  overflow: hidden;
  z-index: 1;
  transition: width, transform 250ms ease;
}

.NavigationMenuIndicator[data-state=visible] {
  animation: fadeIn 200ms ease;
}

.NavigationMenuIndicator[data-state=hidden] {
  animation: fadeOut 200ms ease;
}

.NavigationMenuViewport {
  position: relative;
  transform-origin: top center;
  margin-top: 0px;
  width: 100%;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: hsla(206, 22%, 7%, 0.35) 0px 10px 38px -10px, hsla(206, 22%, 7%, 0.2) 0px 10px 20px -15px;
  height: var(--radix-navigation-menu-viewport-height);
  transition: width, height, 300ms ease;
}

.NavigationMenuViewport[data-state=open] {
  animation: scaleIn 200ms ease;
}

.NavigationMenuViewport[data-state=closed] {
  animation: scaleOut 200ms ease;
}

@media only screen and (min-width: 600px) {
  .NavigationMenuViewport {
    width: var(--radix-navigation-menu-viewport-width);
  }
}
.List {
  display: grid;
  padding: 22px;
  margin: 0;
  column-gap: 10px;
  list-style: none;
}

@media only screen and (min-width: 600px) {
  .List.one {
    width: 1000px;
    grid-template-columns: 0.75fr 1fr;
  }
  .List.two {
    width: 1000px;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 1fr);
  }
  .List.fullwidth {
    width: 100vw;
  }
}
.ListItemLink {
  display: block;
  outline: none;
  text-decoration: none;
  user-select: none;
  border-radius: 6px;
  line-height: 1;
}

.ListItemLink:focus {
  box-shadow: 0 0 0 2px var(--black-a7);
}

.ListItemLink:hover {
  background-color: var(--gray-50);
}

.ListItemHeading {
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 3px;
  color: var(--black-a12);
}

.ListItemText {
  color: var(--mauve-11);
  line-height: 1.4;
}

.Callout {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--purple-9) 0%, var(--indigo-9) 100%);
  border-radius: 6px;
  padding: 25px;
  text-decoration: none;
  outline: none;
  user-select: none;
}

.Callout:focus {
  box-shadow: 0 0 0 2px var(--violet-7);
}

.CalloutHeading {
  color: white;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 16px;
  margin-bottom: 7px;
}

.CalloutText {
  color: var(--mauve-4);
  font-size: 14px;
  line-height: 1.3;
}

.ViewportPosition {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  top: 100%;
  left: 0;
  perspective: 2000px;
}

.CaretDown {
  position: relative;
  color: var(--violet-10);
  top: 1px;
  transition: transform 250ms ease;
}

[data-state=open] > .CaretDown {
  transform: rotate(-180deg);
}

/* Style the trigger when the menu is open */
.NavigationMenuTrigger[data-state=open] {
  background-color: var(--gray-hover);
  color: #333333;
}

/* Style the entire navigation item when open */
.NavigationMenuRoot [data-state=open] {
  /* Add any styles you want for the open state */
}

/* Style the content when it's open */
.NavigationMenuContent[data-state=open] {
  /* Add styles for the open content */
}

.Arrow {
  position: relative;
  top: 70%;
  background-color: white;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-top-left-radius: 2px;
}

@keyframes enterFromRight {
  from {
    opacity: 0;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes enterFromLeft {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes exitToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(200px);
  }
}
@keyframes exitToLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-200px);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: rotateX(-30deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
}
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: rotateX(-10deg) scale(0.95);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Blur effect for main content when navigation is open */
.main-content-blur {
  filter: blur(3px);
  transition: filter 250ms ease;
  pointer-events: none;
}

/* Ensure main content transitions smoothly */
#main-content,
[id=main-content],
.container,
.section {
  transition: filter 250ms ease;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Signed-in user menu in the header's top row (left of the locale flag).
   It sits outside .NavigationMenuList so a long display name grows into the
   header's own whitespace instead of pushing nav items off the viewport. */
.header-user-menu {
  max-width: 20rem;
  min-width: 0;
}
.header-user-menu > .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #333333;
}
.header-user-menu > .dropdown-toggle:hover, .header-user-menu > .dropdown-toggle:focus {
  background-color: var(--gray-hover);
}
.header-user-menu .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.header-user-menu .dropdown-chevron-icon {
  flex-shrink: 0;
}

/* An unusually long display name truncates instead of widening the header. */
.header-user-menu__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 12rem;
}

/* The nav row needs ~1187px at full spacing but the desktop layout starts at
   1024px, so tighten the item spacing across that gap. Tightened, the row
   measures ~1011px and fits at 1024. */
@media (max-width: 1239px) {
  .NavigationMenuTrigger,
  .NavigationMenuLink {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px !important;
  }
}
/* Last-resort guard: if the items still don't fit, scroll the list instead of
   bleeding past the viewport edge. Safe to scroll here because the dropdown
   panels live in .ViewportPosition, a sibling of the list, not inside it. */
.NavigationMenuList {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.NavigationMenuList::-webkit-scrollbar {
  display: none;
}

/* Mobile Navigation Styles */
.mobile-nav-overlay {
  backdrop-filter: blur(4px);
  animation: fadeIn 300ms ease;
}

.mobile-nav-drawer {
  animation: slideInFromRight 300ms ease;
  box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.1), -10px 0 10px -5px rgba(0, 0, 0, 0.04);
}

.mobile-nav-drawer.closing {
  animation: slideOutToRight 300ms ease;
}

/* Mobile navigation responsive behavior */
@media (min-width: 1024px) {
  .mobile-nav-overlay {
    display: none !important;
  }
}
/* Hide desktop navigation on mobile */
@media (max-width: 1023px) {
  .NavigationMenuRoot {
    display: none;
  }
}
/* Mobile navigation animations */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideOutToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
/* Enhanced mobile navigation item styles */
.mobile-nav-item {
  min-height: 44px; /* Touch-friendly minimum height */
  display: flex;
  align-items: center;
  transition: all 200ms ease;
}

.mobile-nav-item:active {
  background-color: var(--gray-50);
  transform: scale(0.98);
}

/* Mobile navigation section headers */
.mobile-nav-section-header {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mauve-11);
  margin-bottom: 0.5rem;
}

/* Mobile navigation user section */
.mobile-nav-user-section {
  border-bottom: 1px solid var(--mauve-6);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* Mobile navigation auth buttons */
.mobile-nav-auth-buttons {
  border-top: 1px solid var(--mauve-6);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

/* Ensure proper z-index stacking */
.mobile-nav-overlay {
  z-index: 9999;
}

/* Mobile navigation focus styles for accessibility */
.mobile-nav-drawer button:focus,
.mobile-nav-drawer a:focus {
  outline: 2px solid #CC4744;
  outline-offset: 2px;
}

/* Mobile navigation scrollbar styling */
.mobile-nav-drawer::-webkit-scrollbar {
  width: 4px;
}

.mobile-nav-drawer::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-nav-drawer::-webkit-scrollbar-thumb {
  background: var(--mauve-8);
  border-radius: 2px;
}

.mobile-nav-drawer::-webkit-scrollbar-thumb:hover {
  background: var(--mauve-9);
}

/* Liquid Glass CTA Banner - Inspired by Apple's glass morphism */
.mobile-cta-banner {
  /* Specular highlight - top shimmer */
  /* Inner refraction layer */
}
.mobile-cta-banner__glass-container {
  position: relative;
  overflow: hidden;
  /* Glass morphism effect with tinted base */
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.06) 50%, rgba(236, 72, 153, 0.08) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  /* Border with subtle gradient */
  border-bottom: 1px solid rgba(99, 102, 241, 0.15);
  /* Soft shadows for depth */
  box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.03), 0 4px 16px 0 rgba(99, 102, 241, 0.08);
}
.mobile-cta-banner__glass-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
  background-size: 200% 200%;
  background-position: 50% 50%;
  animation: mobile-cta-drift 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.mobile-cta-banner__glass-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.mobile-cta-banner__content {
  position: relative;
  z-index: 1;
}

/* Drift animation for the specular highlight */
@keyframes mobile-cta-drift {
  0% {
    background-position: 50% 50%;
    opacity: 1;
  }
  25% {
    background-position: 60% 40%;
    opacity: 0.8;
  }
  50% {
    background-position: 40% 60%;
    opacity: 1;
  }
  75% {
    background-position: 55% 45%;
    opacity: 0.9;
  }
  100% {
    background-position: 50% 50%;
    opacity: 1;
  }
}