@charset "UTF-8";
/***** Base *****/
* {
  box-sizing: border-box;
}

/* Hide the Academy tab and its results panel */
#academy { display: none !important; }
#algolia-academy-results-container { display: none !important; }


body {
  background-color: var(--hc-bg, rgba(251, 247, 239, 1));
  color: var(--hc-text, rgba(28, 28, 30, 1));
  font-family: var(--font-body, roobertpro_body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.banner-logo {
    margin-left: 1rem;
  	display: flex;
    align-items: center;
}
.content-wrapper {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  	text-align: center;
}
.register-content {
    font-family: 'Roobert Pro', sans-serif;
    font-weight: 400;
    font-style: inherit;
    font-size: 18px;
    display: inline-block;
  	vertical-align: middle;
  	max-width: 65%;
}
.register-cursor {
    display: none;
    border-radius: 0.5rem;
    padding: 5px 10px;
    line-height: 150%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
  	margin-left: 1rem;
}
.register-button {
    display: inline-block;
    background-color: #FDE050;
    border-radius: 0.5rem;
    padding: 5px 10px;
    font-family: 'Roobert Pro', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #1C1C1E;
    font-style: italic;
  	margin-left: 1rem;
}
.register-button a:hover {
  text-decoration: none;
}
.register-button a {
  color: #1C1C1E;
}

@media (min-width: 1600px){
  .register-cursor {
    display:inline-block;
  }
}

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

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

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(56, 89, 255, 1);
  text-decoration: none;
}

a:hover, a:active, a:focus {
  text-decoration: underline;
}

input,
textarea {
  color: #000;
  font-size: 14px;
}

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

input:focus {
  border: 1px solid rgba(28, 28, 30, 1);
}

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(/hc/theming_assets/01J0E4W33SRGK49ARS6QRVEBNN) no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}

select:focus {
  border: 1px solid rgba(28, 28, 30, 1);
}

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

textarea {
  border: 1px solid #ddd;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}

textarea:focus {
  border: 1px solid rgba(28, 28, 30, 1);
}

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

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.circle{
  list-style: disc;
  margin: 0 40px 0;
}
.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

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

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

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

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

/***** Buttons *****/
.button, [role="button"] {
  border: 1px solid rgba(28, 28, 30, 1);
  border-radius: 4px;
  color: rgba(28, 28, 30, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}

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

.button::after, [role="button"]::after {
  color: rgba(28, 28, 30, 1);
}

.button:hover, .button:active, .button:focus, .button[aria-selected="true"], [role="button"]:hover, [role="button"]:active, [role="button"]:focus, [role="button"][aria-selected="true"] {
  background-color: rgba(28, 28, 30, 1);
  color: rgba(251, 247, 239, 1);
  text-decoration: none;
}

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

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

.button-large, input[type="submit"] {
  background-color: rgba(28, 28, 30, 1);
  border: 0;
  border-radius: 4px;
  color: rgba(251, 247, 239, 1);
  font-size: 14px;
  font-weight: 400;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}

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

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

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

.button-secondary {
  color: #4d4d53;
  border: 1px solid #ddd;
  background-color: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(28, 28, 30, 1);
  border: 1px solid #ddd;
  background-color: #f8f1e3;
}

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

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

.table th,
.table th a {
  color: #4d4d53;
  font-size: 13px;
  font-weight: 300;
  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;
  }
}

/***** Forms *****/

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

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

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

.form-field input:focus {
  border: 1px solid rgba(28, 28, 30, 1);
}

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

.form-field input[type="text"]:focus {
  border: 1px solid rgba(28, 28, 30, 1);
}

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

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

.form-field .nesty-input:focus {
  border: 1px solid rgba(28, 28, 30, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(28, 28, 30, 1);
  text-decoration: none;
}

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

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

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

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

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

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

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

.form footer a {
  color: lighten(rgba(28, 28, 30, 1) rgba(5, 0, 56, 1), 20%);
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  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: #0023d1;
}

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

.header__menu {
  display: flex;
  flex-shrink : 0;
}

.footer-language-selector {
    margin-top: 0.3rem;
    margin-right : 0.5rem;
}
.logo {
  margin-top : 0.3rem;
}




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

.logo a {
  display: inline-block;
  text-decoration: none;
  font-size: 0;
}

.logo img {
  display: inline-block;
  vertical-align: middle;
  max-height: 40px;
}

.logo-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: rgba(28, 28, 30, 1);
  position: relative;
  top: 2px;
  padding-left: 14px;
}

.logo-text:before {
  content: "";
  background: rgba(28, 28, 30, 1);
  width: 1px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

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

.nav-wrapper a {
  border: 0;
  color: rgba(56, 89, 255, 1);
  display: none;
  font-size: 14px;
  line-height: 2.34;
  padding: 0 20px 0 0;
  width: auto;
}

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

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

.nav-wrapper a:hover, .nav-wrapper a:focus, .nav-wrapper a:active {
  background-color: transparent;
  color: rgba(56, 89, 255, 1);
  text-decoration: underline;
}

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

.nav-wrapper .icon-menu {
  border: 0;
  color: rgba(56, 89, 255, 1);
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
  padding: 0;
  width: auto;
}

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

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

.nav-wrapper .icon-menu:hover, .nav-wrapper .icon-menu:focus, .nav-wrapper .icon-menu:active {
  background-color: transparent;
  color: rgba(56, 89, 255, 1);
}

/***** 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 > [role="button"] {
  border: 0;
  color: rgba(56, 89, 255, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > [role="button"]:hover, .user-info > [role="button"]:focus {
  color: rgba(56, 89, 255, 1);
  background-color: transparent;
}

.user-info > [role="button"]::after {
  color: rgba(56, 89, 255, 1);
  padding-right: 15px;
}

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

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

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

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

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

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

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

.avatar .icon-agent::before {
  background-color: rgba(28, 28, 30, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  color: rgba(251, 247, 239, 1);
  content: "\1F464";
  font-size: 14px;
  height: 14px;
  line-height: 14px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 14px;
}

/***** Footer *****/
.footer {
 border-top: 1px solid #ddd;
 margin-top: 60px;
 padding: 30px;
}
  
.footer a {
  color: #050038;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}

@media (max-width: 414px) {
  .footer {
    margin-top: 30px;
 padding: 15px 0;
  }
  
  .footer-inner {
    display: block;
    text-align: center;
  }
  
  .footer-inner a {
    display: block;
    margin: 4px 0;
  }
}

.footer-language-selector {
  color: #4d4d53;
  display: inline-block;
  font-weight: 300;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
}

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

.breadcrumbs li {
  color: #4d4d53;
  display: inline;
  font-weight: 300;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.breadcrumbs li a:visited {
  color: rgba(56, 89, 255, 1);
}

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

.search input[type="search"] {
 /* border: 1px solid #050038;*/
  border-radius: 40px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 400;
  color: rgba(5, 0, 56, 1);
  height: 60px;
  padding-left: 50px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
}

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

.search input[type="search"]:focus {
  border: 1px solid rgba(28, 28, 30, 1);
  color: #050038;
}

.search::before {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #050038;
  content: "\1F50D";
  font-size: 22px;
  position: absolute;
  left: 20px;
}

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

/*.search-full input[type="search"] {
  border: 1px solid rgba(28, 28, 30, 1);
}*/

.search-home input[type="search"] {
  border: 1px solid #fff;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01J0E4W7J9T228PCWJJQV93V7M);
  background-position: center;
  background-size: cover;
  height: 350px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

.hero-inner {
  position: relative;
  top: 68%;
  transform: translateY(-55%);
  max-width: 610px;
  margin: 0 auto;
}

.hero-inner-header {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  margin: 0 0 20px;
}

.hero-inner-header--black {
  color: #050038;
}

.hero-inner-header--mb-30 {
  margin-bottom: 30px !important;
}

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

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

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

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

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

.page-header-description {
  font-style: italic;
  font-weight: 300;
  margin: 0 0 30px 0;
  word-break: break-word;
}

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

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

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

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

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

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

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}

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

.blocks-item {
  box-sizing: border-box;
  color: rgba(28, 28, 30, 1);
  display: flex;
  flex: 1 0 340px;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  transition: all 0.5s ease-out;
}
  
/* Homepage category icon mapping. */
.blocks-item:nth-of-type(1) .blocks-item-image {
  background-image: url(/hc/theming_assets/01J0E4W1E8N0ZPXASDBNFSZ96H);
}

.blocks-item:nth-of-type(2) .blocks-item-image {
  background-image: url(/hc/theming_assets/01J0E4W13J1YDZS3KCPQ07B7GF);
}

.blocks-item:nth-of-type(3) .blocks-item-image {
  background-image: url(/hc/theming_assets/01J0E4W06FDTP12TZXPZRF44X6);
}

.blocks-item:nth-of-type(4) .blocks-item-image {
  background-image: url(/hc/theming_assets/01J0E4VZDF8AVXT9DCF5AN7191);
}

.blocks-item:nth-of-type(5) .blocks-item-image {
  background-image: url(/hc/theming_assets/01J0E4W0XQ3R5JM332G3TNX798);
}

.blocks-item:nth-of-type(6) .blocks-item-image {
  /* background-image: url('/hc/theming_assets/01J0E4W11TZ3VY5S0YQCSZTS1R');*/
  background-image: url(/hc/theming_assets/01J0E4W2G00H61M6SJTVDK6RA7);
}

.blocks-item:nth-of-type(7) .blocks-item-image {
  background-image: url(/hc/theming_assets/01J0E4W1QPD1QS6VKAWN4B6PH6);
}

.additional-categories {
  margin-top: 30px;
}

.additional-categories .blocks-item:nth-of-type(1) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4VZGKBW12GDTTBTATQX7R');
}

.additional-categories .blocks-item:nth-of-type(2) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W0W50E50EP52NDWH87BH');
}

.additional-categories .blocks-item:nth-of-type(3) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W26Y0YCY8PS5A6Q4G16Q');
}

.additional-categories .blocks-item:nth-of-type(4) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W0Y443FNHBD9SZSP82CH');
}

.additional-categories .blocks-item:nth-of-type(5) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W2G00H61M6SJTVDK6RA7');
}

.additional-categories .blocks-item:nth-of-type(6) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W0EGGSVEHVH6QV759R0Q');
}

.additional-categories .blocks-item:nth-of-type(7) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W1K52WXQJ9JWSRKVP3TY');
}

.additional-categories .blocks-item:nth-of-type(8) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W1QPD1QS6VKAWN4B6PH6');
}



@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}

.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  /*background-color: #f3f4f8;*/
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
    transform: scale(1.25);
  	opacity: 0.8;
    cursor: zoom-in;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  text-decoration: none;
}

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

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

.blocks-item-internal a {
  color: rgba(28, 28, 30, 1);
}

.blocks-item-image {
  background-size: contain;
  width: 180px;
  height: 130px;
  margin: 0 auto 15px;
}

.blocks-item-link {
  color: rgba(28, 28, 30, 1);
  padding: 20px 30px;
}

.blocks-item-link:hover, .blocks-item-link:focus, .blocks-item-link:active {
  text-decoration: none;
}

.blocks-item-title {
  font-weight: 700;
  margin-bottom: 0;
  transition: color 250ms ease;
}

.blocks-item-description {
  font-weight: 300;
  margin: 0;
  transition: color 250ms ease;
}

.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

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

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

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

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

@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%;
    /* Three columns on desktop */
  }
  [dir="rtl"] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}

.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}

.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
  color: rgba(28, 28, 30, 1);
}

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

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

@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

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

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

.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-parent {
  font-size: 16px;
}

.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  color: rgba(28, 28, 30, 1);
  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;
  font-weight: 300;
}

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

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

.recent-activity-item-time, .recent-activity-item-comment {
  color: #4d4d53;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
}

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

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

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

.recent-activity-item-comment span::before {
  color: rgba(28, 28, 30, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 15px;
  padding-right: 3px;
  vertical-align: middle;
}

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

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

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

.category-content {
  flex: 1;
}

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

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

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

.section-tree .section {
  flex: initial;
}

@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%;
    /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}

.section-tree-title {
  margin-bottom: 0;
}

.section-tree-title a {
  color: rgba(28, 28, 30, 1);
}

.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

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

.article-list-item a {
  color: rgba(28, 28, 30, 1);
}

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

.icon-star::before {
  color: rgba(28, 28, 30, 1);
  font-size: 18px;
}

.article-list {
margin-left: 0px;
}

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

.section-list-item a {
color: rgba(28, 28, 30, 1);
font-size: 16px;
}

.section-list {
list-style-type: none;
padding-left: 0px;
text-align: left;
}

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

.section-content {
  flex: 1;
}

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

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

/***** 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-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 {
    flex-direction: row;
    margin-top: 0;
  }
}

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

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

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

.article-title .icon-lock::before {
  content: "\1F512";
  font-size: 20px;
  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 img {
  height: auto;
  max-width: 100%;
  display: inherit;
  transition:all 0.3s ease-out;
}
.article-body img:hover {
  transform: scale(1.04); 
  opacity: 0.8;
  cursor:zoom-in;
}

/* article click image */
#Fullimageview{
 	position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(28,28,28,0.8);
  display:none;
  z-index:100;
  overflow:auto;
}
#FullImage{
    /*height: 100%;
    left: 0;
    padding: 40px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 99994;*/
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%,-8%) scale(0.8);
    width: 100%;
    object-fit: cover;
}
@media (max-width:768px){
  #FullImage{
     top:10px !important;
  }
}
@media (max-width:768px){
  #FullImage{
    width:100%;
    height:auto !important;
  }
}
@media (min-width:768px)and (max-width:1024px){
  #FullImage{
    width:100%;
  }
}

/* End article click image */


.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 a:visited {
  color: #0023d1;
}

.article-body code, .comment-body code, .post-body code {
  padding: 0 5px !important;
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 0 1px;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
}

.article-body pre {
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  overflow: auto;
  white-space: pre;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
  margin: 0.8em 0;
}

.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 1em;
}

.article-body blockquote {
  background: rgba(217, 217, 217, 0.7);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 15px 20px;
  margin: 25px 0;
  border: none;
  border-radius: 12px;
}

.article-body blockquote p {
  margin: 0;
}

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

.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: #4d4d53;
  font-weight: 300;
}

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

.article-comment-count .icon-comments {
  color: rgba(28, 28, 30, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

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

.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-vote {
  background: transparent;
  border: 1px solid rgba(28, 28, 30, 1);
  color: rgba(28, 28, 30, 1);
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}

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

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

.article-vote::after {
  content: attr(title);
  /* Yes/No label*/
}

.article-vote:focus, .article-vote:active {
  background-color: transparent;
  color: rgba(28, 28, 30, 1);
}

.article-vote:hover {
  background-color: rgba(28, 28, 30, 1);
}

.article-vote:hover::before, .article-vote:hover::after, .article-vote[aria-selected="true"]::before, .article-vote[aria-selected="true"]::after {
  color: rgba(251, 247, 239, 1);
}

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

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

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

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

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

.article-return-to-top a {
  color: rgba(28, 28, 30, 1);
  display: block;
  padding: 20px 0;
}

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

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

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

.article-unsubscribe {
  background-color: rgba(28, 28, 30, 1);
  color: rgba(251, 247, 239, 1);
  text-decoration: none;
}

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

.sidenav-title {
  font-size: 15px;
  position: relative;
}

.sidenav-item {
  border-radius: 4px;
  color: rgba(28, 28, 30, 1);
  display: block;
  font-weight: 300;
  margin-bottom: 10px;
  padding: 10px;
}

.sidenav-item.current-article, .sidenav-item:hover {
  background-color: rgba(28, 28, 30, 1);
  color: rgba(251, 247, 239, 1);
  text-decoration: none;
}

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

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

/***** 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::before {
  color: rgba(28, 28, 30, 1);
  content: "\1F4CE";
  font-size: 15px;
  left: 0;
  position: absolute;
  top: 5px;
}

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

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

.upload-dropzone span {
  color: #4d4d53;
}

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

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

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

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

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

.share a:hover::before {
  color: rgba(28, 28, 30, 1);
}

.share-twitter::before {
  content: "\e901";
}

.share-facebook::before {
  content: "\e903";
}

.share-linkedin::before {
  content: "\e900";
}

.share-googleplus::before {
  content: "\e902";
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

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

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

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

.comment-callout {
  color: #4d4d53;
  display: inline-block;
  font-weight: 300;
  font-size: 13px;
  margin-bottom: 0;
}

.comment-callout a {
  color: rgba(28, 28, 30, 1);
}

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

.comment-sorter .dropdown-toggle {
  color: #4d4d53;
  font-weight: 300;
  font-size: 13px;
}

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

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

.comment-wrapper.comment-official {
  border: 1px solid rgba(28, 28, 30, 1);
  padding: 40px 20px 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.comment-container {
  width: 100%;
}

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

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

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

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

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

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

.comment-ccs {
  display: none;
}

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

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

.comment-attachments a {
  color: rgba(28, 28, 30, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}

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

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

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

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

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

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

.comment-body code, .post-body code {
  padding: 0 1px !important;
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 0 1px;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
}

.comment-body pre {
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  overflow: auto;
  white-space: pre;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
  margin: 0.8em 0;
}

.comment-body pre code {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 1em;
}

.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #4d4d53;
  font-style: italic;
  padding: 0 15px;
}

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

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: inline-block;
  text-align: center;
  width: 35px;
}

.vote a {
  outline: none;
}

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

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

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

.vote-up:hover::before,
.vote-down:hover::before {
  color: rgba(28, 28, 30, 1);
}

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

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

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

.vote-voted::before {
  color: rgba(28, 28, 30, 1);
}

.vote-voted:hover::before {
  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 .dropdown-toggle {
  font-size: 0;
  margin: 15px 0;
}

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

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

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

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

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

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

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

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

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

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

@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 .dropdown {
  width: 100%;
}

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

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

.community-follow [role="button"]:hover {
  background-color: rgba(28, 28, 30, 1);
}

.community-follow [role="button"]:hover::after, .community-follow [role="button"]:focus::after {
  border-color: rgba(251, 247, 239, 1);
  color: rgba(251, 247, 239, 1);
}

.community-follow [role="button"][aria-selected="true"] {
  background-color: rgba(28, 28, 30, 1);
  color: rgba(251, 247, 239, 1);
}

.community-follow [role="button"][aria-selected="true"]::after {
  border-left: 1px solid rgba(251, 247, 239, 1);
  color: rgba(251, 247, 239, 1);
}

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

.community-follow [role="button"]::after {
  border-left: 1px solid rgba(28, 28, 30, 1);
  content: attr(data-follower-count);
  color: rgba(28, 28, 30, 1);
  display: inline-block;
  font-family: -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 [role="button"]::after {
    position: static;
  }
}

[dir="rtl"] .community-follow [role="button"]::after {
  border-left: 0;
  border-right: 1px solid rgba(28, 28, 30, 1);
  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: rgba(56, 89, 255, 1);
  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: #0023d1;
}

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

.striped-list-count {
  color: #4d4d53;
  font-weight: 300;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}

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

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

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

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

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

@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(28, 28, 30, 1);
    display: block;
    font-weight: 400;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #1eb848;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  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: rgba(28, 28, 30, 1);
}

.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-pending, .status-label-not-planned {
  background-color: #eee;
  color: #4d4d53;
}

.status-label-pending {
  text-align: center;
}

.status-label-open {
  background-color: #cc3340;
}

.status-label-closed {
  background-color: #ddd;
}

.status-label-solved {
  background-color: #999;
}

.status-label-new {
  background-color: #ffd12a;
}

.status-label-hold {
  background-color: #000;
}

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

/***** 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: -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 img {
  height: auto;
  max-width: 100%;
}

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

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

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

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

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

.post-body code, .post-body code {
  padding: 0 1px !important;
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 0 1px;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
}

.post-body pre {
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  overflow: auto;
  white-space: pre;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
  margin: 0.8em 0;
}

.post-body pre code {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 1em;
}

.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #4d4d53;
  font-style: italic;
  padding: 0 15px;
}

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

.post-comment-count {
  color: #4d4d53;
  font-weight: 300;
}

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

.post-comment-count .icon-comments {
  color: rgba(28, 28, 30, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.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 h5 {
  font-weight: 600;
}

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

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

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

/* Navigation element that collapses on mobile */
.collapsible-nav {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex-direction: column;
  max-height: 45px;
  overflow: hidden;
  font-size: 14px;
}

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

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

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

.collapsible-nav-list li {
  color: rgba(28, 28, 30, 1);
  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: rgba(28, 28, 30, 1);
  display: block;
}

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

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

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

.collapsible-nav-list li[aria-selected="true"] a {
  color: rgba(28, 28, 30, 1);
}

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

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

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

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

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

/* 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[aria-expanded="true"] {
  max-height: none;
}

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

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

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

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

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

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

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

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

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

.my-activities-sub-nav li[aria-selected="true"] {
  border-color: rgba(28, 28, 30, 1);
}

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

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

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

.requests-table-toolbar .organization-unsubscribe {
  background-color: rgba(28, 28, 30, 1);
  color: rgba(251, 247, 239, 1);
}

.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 */
.subscriptions-unsubscribe a {
  background: rgba(28, 28, 30, 1);
  border-radius: 4px;
  color: rgba(251, 247, 239, 1);
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

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

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

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

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

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

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

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

/* Contributions table */
.contributions-table td:last-child {
  color: #4d4d53;
  font-size: 13px;
  font-weight: 300;
}

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

.no-activities {
  color: #4d4d53;
}

/***** 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: #4d4d53;
  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 rgba(28, 28, 30, 1);
}

.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 rgba(28, 28, 30, 1);
}

.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: #f8f1e3;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}

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

@media (min-width: 1024px) {
  .request-sidebar h5 {
    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: 13px;
  margin: 20px 0 0 0;
}

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

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

.request-details dt {
  color: #4d4d53;
  font-weight: 300;
  width: 40%;
}

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

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

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

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

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

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

.pagination * {
  display: inline-block;
}

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

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

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

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

.pagination li:hover:not(.pagination-current) span, .pagination li:hover:not(.pagination-current) a {
  color: rgba(28, 28, 30, 1);
  text-decoration: none;
}

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

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

.pagination-current {
  background-color: rgba(28, 28, 30, 1);
}

.pagination-current a, .pagination-current span {
  color: rgba(251, 247, 239, 1);
}

.pagination-first {
  border-radius: 3px 0 0 3px;
}

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

.pagination-last {
  border-radius: 0 3px 3px 0;
}

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

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

.meta-group * {
  display: inline;
}

.meta-data {
  color: #4d4d53;
  font-size: 13px;
  font-weight: 300;
}

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

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

.icon-lock::before {
  content: "\1F512";
}

.icon-star::before {
  content: "\2605";
}

.icon-linkedin::before {
  content: "\e900";
}

.icon-twitter::before {
  content: "\e901";
}

.icon-googleplus-::before {
  content: "\e902";
}

.icon-facebook::before {
  content: "\e903";
}

.icon-agent::before {
  content: "\1F464";
}

.icon-close::before {
  content: "\2715";
}

.icon-arrow-up::before {
  content: "\2B06";
}

.icon-arrow-down::before {
  content: "\2B07";
}

.icon-attachments::before {
  content: "\1F4CE";
}

.icon-comments::before {
  content: "\1F4AC";
}

.icon-search::before {
  content: "\1F50D";
}

.icon-vote::before {
  content: "\1F44D";
}

.icon-handle::before {
  content: "\25BE";
}

.icon-check::before {
  content: "\2713";
}

.icon-gear::before {
  content: "\2699";
}

.icon-menu::before {
  content: "\2630";
}

.icon-article::before {
  content: "\1F4C4";
}

.icon-post::before {
  content: "\1F4D4";
}

.icon-notification-alert::before {
  content: "\26A0";
}

.icon-notification-error::before {
  content: "\00D7";
}

.icon-notification-info::before {
  content: "\2139";
}

.icon-notification-success::before {
  content: "\2714";
}

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

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

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

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

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

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

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

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

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

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

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

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

.profile-header .options [data-action="edit-profile"] {
  background-color: rgba(28, 28, 30, 1);
  border: 0;
  color: rgba(251, 247, 239, 1);
  line-height: normal;
  padding: 8px 20px;
  outline-color: rgba(28, 28, 30, 1);
}

.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: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

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

.profile-stats .stat-label {
  color: #4d4d53;
  font-weight: 300;
  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 rgba(28, 28, 30, 1);
  border-radius: 4px;
  color: rgba(28, 28, 30, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}

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

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

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

.profile-section {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}

@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-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-list > .profile-contribution::before {
  left: 0;
  position: absolute;
  font-size: 16px;
  color: #ccc;
  font-family: "copenhagen-icons";
  line-height: 25px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@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: #f8f1e3;
}

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

.profile-activity::before {
  position: absolute;
  left: 0;
  width: 28px;
  border-radius: 50%;
  content: "";
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: rgba(251, 247, 239, 1);
  background-position: 50% 50%;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #ccc;
  font-family: "copenhagen-icons";
}

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

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

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

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

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

/***** Search results *****/
.search-results {
  display: flex;
	flex-direction: row;
  justify-content: space-between;
 /* max-width:1200px;
  width:1200px;
  margin:0 auto;*/
}

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

@media (min-width: 750px) {
  .search-results-column {
    flex: 0 0 55%;
  }
}
@media (max-width: 750px){
  .search-results {
    flex-direction: column !important;
    /* justify-content: space-between; */
	}
  section.search-results-left {
    margin-left: 0 !important;
	}
}
.search-results-list {
  margin-bottom: 25px;
}

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

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

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

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

.search-result-votes::before, .search-result-meta-count::before {
  color: rgba(28, 28, 30, 1);
}

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

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

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

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

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

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

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

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

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

.article-vote-down-explanation {
  display: none;
}

/*.article-vote-down-explanation.active {
  display: block;
}*/

 .article-votes-form-yes {
  display: none;
}

.article-votes-form-yes.visible {
  display: block;
}

.article-votes-form-no {
  display: none;
}

.article-votes-form-no.visible {
  display: block;
}

.article-votes-btn {
  cursor: pointer;
  border: 1px solid rgba(5, 0, 56, 1);
  color: rgba(5, 0, 56, 1);
  border-radius: 4px;
  padding: 6px 20px;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  font-size: 12px;
}

.article-votes-btn.active {
  background: rgba(5, 0, 56, 1);;
  color: #fff;
}

.article-votes-btn-yes {
  margin-right: 10px;
  padding: 6px 16px;
}

.article-votes-title {
  margin-bottom: 14px;
}

.article-votes-btns-wrap {
  margin-bottom: 40px;
}

.article-votes-textarea {
  height: 85px;
  resize: none;
  margin-bottom: 14px;
}

.article-votes-textarea.validationError::-webkit-input-placeholder { /* Chrome */
  color: #f2545b;
}

.article-votes-textarea.validationError:-ms-input-placeholder { /* IE 10+ */
  color: #f2545b;
}

.article-votes-textarea.validationError::-moz-placeholder { /* Firefox 19+ */
  color: #f2545b;
  opacity: 1;
}

.article-votes-textarea.validationError:-moz-placeholder { /* Firefox 4 - 18 */
  color: #f2545b;
  opacity: 1;
}

.article-votes-form-yes {
  position: relative;
  padding: 21px 0 0;
}

.article-votes-textarea-label {
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 10px;
}

.article-votes-form-no-textarea-wrap {
  position: relative;
  padding: 21px 0 0;
}

.article-votes-form-no-textarea-label {
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 10px;
}

.article-votes-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.article-votes-labels label {
  margin: 3px 0;
}

.article-votes-labels label input {
  margin-right: 5px;
}

.article-votes-button {
  background-color: rgba(5, 0, 56, 1);
  border: none;
  color: #fff;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.article-votes-button:focus {
  border: none;
}

.article-votes-btns-wrap.disabled .article-votes-btn {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-form-yes.disabled .article-votes-button {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-form-yes.disabled .article-votes-textarea {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-form-no.disabled .article-votes-button {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-form-no.disabled .article-votes-textarea {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-feedback-success {
  display: none;
}

.article-votes-feedback-success.active {
  display: block;
}

.article-votes-feedback-fail {
  display: none;
}

.article-votes-feedback-fail.active {
  display: block;
}

.article-votes-form-sorry-text {
  font-weight: 700;
  margin-bottom: 10px;
}

.article-votes-form-no .article-votes-button {
  margin-bottom: 20px;
}

.hc-community-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: normal;
}
.hc-community-link__wrap {
  max-width: 1190px;
  margin: 0 auto 40px;
  padding: 0 50px;
}
@media (min-width: 415px) and (max-width: 1199px) {
  .hc-community-link__wrap {
    padding: 0;
  }
}
@media (max-width: 414px) {
  .hc-community-link__wrap {
    padding: 0;
    margin: 0 auto 60px;
  }
}
.hc-community-link__link {
  cursor: pointer;
  text-decoration: none;
  outline: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  text-align: center;
  background: #F3F4F8;
  color: #050038;
  padding: 32px 20px 40px;
  border-radius: 4px;
}
.hc-community-link__link:hover {
  text-decoration: none;
}
.hc-community-link__link-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 12px;
}
.hc-community-link__link-description {
  font-size: 15px;
  line-height: 22px;
  font-weight: 300;
}

.scroll-to-top {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(255, 191, 191, 0.4);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  position: fixed;
  /* Centered on the same vertical axis as the 56px chat launcher (right:20)
     and stacked above it so the two don't overlap. */
  right: 24px;
  bottom: -48px;
  z-index: 899;
  outline: none;
  border: none;
  padding: 0;
  transition: background 250ms ease, bottom 250ms ease;
}

.scroll-to-top.is-active {
  bottom: 88px; /* clears the chat launcher (20 + 56 height + 12 gap) */
}

.scroll-to-top:hover {
  background: rgba(255, 191, 191, 0.6);
}

.scroll-to-top__arrow {
  font-size: 18px;
  font-weight: bold;
  color: rgba(28, 28, 30, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.table-of-contents__wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
}
.table-of-contents__title {
  font-size: 15px;
  margin: 0 0 12px;
}
.table-of-contents__list {
  /* Use most of the viewport height (TOC is sticky at top:92px) so long
     heading lists need far less internal scrolling. */
  max-height: calc(100vh - 150px);
  font-size: 15px;
  margin-left: -4px;
  overflow-y: auto;
}
.table-of-contents__list li a {
  display: block;
  color: #050038;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 250ms ease;
  margin:0 0 15px 0;
}
.table-of-contents__list li a:hover {
  background: var(--hc-chip);
  color: var(--hc-text);
}
.table-of-contents__list li > ul {
  margin-left: 10px;
}
.top-notification-banner {
    background: rgba(5, 0, 56, 0.03)
}

@media (min-width: 1800px) {
    .top-notification-banner {
        padding: 15px 60px 20px
    }
}

@media (min-width: 480px) and (max-width: 1799px) {
    .top-notification-banner {
        padding: 1vw 3.33333333vw 1.33333333vw
    }
}

@media (max-width: 479px) {
    .top-notification-banner {
        padding: 3.28767123vw 5.47945205vw 4.38356164vw
    }
}

.top-notification-banner.is-hidden {
    display: none
}

.top-notification-banner--bg-indigo {
    background: #050038
}

.top-notification-banner--bg-pink {
    background: #ffbfbf
}

.top-notification-banner--bg-red {
    background: #FF6575
}

.top-notification-banner--bg-blue {
    background: #3F53D9
}

.top-notification-banner--bg-yellow {
    background: #ffd02f
}

.top-notification-banner__wrap {
    font-family: "Formular", sans-serif;
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
}

@media (min-width: 1800px) {
    .top-notification-banner__wrap {
        max-width: 1680px;
        margin: 0 auto;
        font-size: 14px;
line-height: 20px;
    }
}

@media (min-width: 1200px) and (max-width: 1799px) {
    .top-notification-banner__wrap {
        max-width: 1680px;
        margin: 0 auto;
        font-size: 14px;
line-height: 20px;
    }
}

@media (min-width: 480px) and (max-width: 1199px) {
    .top-notification-banner__wrap {
        font-size: 14px;
line-height: 20px;
    }
}

@media (max-width: 479px) {
    .top-notification-banner__wrap {
        font-size: 14px;
line-height: 20px;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        -webkit-box-pack: left;
        -ms-flex-pack: left;
        justify-content: left;
        padding-right: 8.21917808vw
    }
}

.top-notification-banner__close {
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    cursor: pointer
}

@media (min-width: 1800px) {
    .top-notification-banner__close {
        top: 3.75px;
        right: -6.25px
    }
}

@media (min-width: 1200px) and (max-width: 1799px) {
    .top-notification-banner__close {
        top: 3px;
        right: -5px
    }
}

@media (min-width: 480px) and (max-width: 1199px) {
    .top-notification-banner__close {
        top: .25vw;
        right: -0.41666667vw
    }
}

@media (max-width: 479px) {
    .top-notification-banner__close {
        top: .54794521vw;
        right: -0.54794521vw
    }
}

.top-notification-banner__close svg {
    display: block;
    color: #050038
}

@media (min-width: 1800px) {
    .top-notification-banner__close svg {
        width: 30px;
        height: 30px
    }
}

@media (min-width: 1200px) and (max-width: 1799px) {
    .top-notification-banner__close svg {
        width: 24px;
        height: 24px
    }
}

@media (min-width: 480px) and (max-width: 1199px) {
    .top-notification-banner__close svg {
        width: 2vw;
        height: 2vw
    }
}

@media (max-width: 479px) {
    .top-notification-banner__close svg {
        width: 6.57534247vw;
        height: 6.57534247vw
    }
}

.top-notification-banner__close--white svg {
    color: #fff
}

@media (min-width: 1800px) {
    .top-notification-banner__emoji {
        margin-right: 6.25px
    }
}

@media (min-width: 1200px) and (max-width: 1799px) {
    .top-notification-banner__emoji {
        margin-right: 5px
    }
}

@media (min-width: 480px) and (max-width: 1199px) {
    .top-notification-banner__emoji {
        margin-right: .41666667vw
    }
}

@media (max-width: 479px) {
    .top-notification-banner__emoji {
        margin-right: 2.73972603vw
    }
}

.top-notification-banner__text {
    color: #050038
}

.top-notification-banner__text a {
    color: #4262FF;
    text-decoration: none;
    border-bottom: 1px solid #4262FF;
    -webkit-transition: border 250ms ease;
    transition: border 250ms ease
}

.top-notification-banner__text a:hover, .top-notification-banner__text a:active {
    border-color: transparent
}

.top-notification-banner__text--text-is-white {
    color: #fff
}

.top-notification-banner__text--link-is-white a {
    color: #fff;
    border-color: #fff
}

.top-notification-banner__text--link-is-yellow a {
    color: #ffd02f;
    border-color: #ffd02f
}

.top-notification-banner__text--link-is-indigo a {
    color: #050038;
    border-color: #050038
}

@media (max-width: 479px) {
    .top-notification-banner__text br {
        display: none
    }
}

/* Colored callouts (admonitions). The base .article-body blockquote sets a
   theme-aware text color (var(--hc-text-2)); here each color variant sets a
   readable background + a solid left accent, with tones swapped per theme via
   the --mhc-adm-* tokens so they stay legible in dark mode. Palette mirrors
   the miro-help-center Docusaurus admonitions (note/success/warning/danger). */
.article-body blockquote.pink,
.article-body blockquote.yellow,
.article-body blockquote.grey,
.article-body blockquote.blue,
.article-body blockquote.green {
  color: var(--hc-text-2);
  border: 1px solid var(--hc-border);
  border-left-width: 4px;
}
.article-body blockquote.blue   { background: var(--mhc-adm-note-bg);    border-left-color: var(--mhc-adm-note-accent); }
.article-body blockquote.green  { background: var(--mhc-adm-success-bg); border-left-color: var(--mhc-adm-success-accent); }
.article-body blockquote.yellow { background: var(--mhc-adm-warning-bg); border-left-color: var(--mhc-adm-warning-accent); }
.article-body blockquote.pink   { background: var(--mhc-adm-danger-bg);  border-left-color: var(--mhc-adm-danger-accent); }
.article-body blockquote.grey   { background: var(--mhc-adm-neutral-bg); border-left-color: var(--mhc-adm-neutral-accent); }

/* Type header (icon + label) per admonition, mirroring the miro-help-center
   Docusaurus admonitions. Icon is a baked-color inline SVG; the label uses the
   theme text color so it stays legible in light and dark. */
.article-body blockquote.blue::before,
.article-body blockquote.green::before,
.article-body blockquote.yellow::before,
.article-body blockquote.pink::before,
.article-body blockquote.grey::before {
  display: block; padding-left: 26px; min-height: 20px; margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; line-height: 20px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--hc-text);
  background-repeat: no-repeat; background-position: 0 center; background-size: 18px 18px;
}
.article-body blockquote.blue::before {
  content: "Note";
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23867AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
}
.article-body blockquote.green::before {
  content: "Tip";
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/></svg>");
}
.article-body blockquote.yellow::before {
  content: "Warning";
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
}
.article-body blockquote.pink::before {
  content: "Danger";
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2Z'/><path d='M12 8v4'/><path d='M12 16h.01'/></svg>");
}
.article-body blockquote.grey::before {
  content: "Info";
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
}

/* =====================================================================
   FEATURE AVAILABILITY block ("Who can use this feature")
   Prepended to article bodies by the Git→Zendesk sync; mirrors the
   miro-help-center Docusaurus <FeatureAvailability> component. Theme CSS only.
   Scoped to .article-body so it can't collide with FontAwesome `fa-*` (the
   pagination `fa fa-angle-*` icons live outside the article body). Dark mode is
   automatic — the --hc-* tokens already flip, so no [data-theme] duplicates. --
   Icons are rendered from the component's feather SVG paths via CSS mask, so
   they inherit the .fa-icon color (currentColor). */
.article-body .feature-availability {
  border: 1px solid var(--hc-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  background: var(--hc-surface);
}
.article-body .fa-header {
  font-weight: 700; font-size: 0.85rem; color: var(--hc-text);
  margin-bottom: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.article-body .fa-rows { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.article-body .fa-row {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; color: var(--hc-text); line-height: 1.4;
}
.article-body .fa-icon {
  display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
  color: var(--hc-text-3);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.article-body .fa-icon-people {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}
.article-body .fa-icon-plan {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 Z'/></svg>");
}
.article-body .fa-icon-platform {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2' ry='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2' ry='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>");
}
.article-body .fa-notes {
  margin-top: 0.6rem; padding-top: 0.5rem;
  border-top: 1px solid var(--hc-border);
  font-size: 0.8rem; color: var(--hc-text-3); line-height: 1.5;
}
/* Links inside notes keep normal article link styling (violet), not muted. */
.article-body .fa-notes a { color: var(--miro-violet); }
html[data-mhc-theme="dark"] .article-body .fa-notes a { color: #A89CFF; }

@media (max-width: 1023px) {
  .article-body iframe,
  .article-body video {
    width: 100%;
    max-width: 100%;
  }

  .article-sidebar {
    order: 1;
  }
  
  .table-of-contents {
    order: 2;
  }
  
  .article {
    order: 3;
  }
  
  .scroll-to-top {
    display: none;
  }
}

/* Updated styles for Lotus tabs and accordions */
.article-info .accordion {
  border: none;
}

.article-info .accordion__item + .accordion__item {
  margin-top: 10px;
}

.article-info .accordion__item-title {
  width: 100%;
  background: rgba(242, 242, 242);
  font-size: 15px;
  color: rgba(28, 28, 30, 1);
  line-height: 24px;
  text-align: left;
  border: none !important;
  border-radius: 12px;
  padding-left: 42px;
  transition: background-color 300ms ease;
}

.article-info .accordion__item-title:before,
.article-info .accordion__item-title:after {
  background-color: rgba(28, 28, 30, 1) !important;
}

.article-info .accordion__item-title:hover {
  background: rgba(232, 232, 232);
}

.article-info .accordion__item-title--active {
  background: #FFDD3B !important;
  color: #000 !important;
  border-radius:12px;
}

.article-info .accordion__item-title--active:before, 
.article-info .accordion__item-title--active:after {
  background-color: #000 !important;
}

.article-info .accordion__item-content {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  display:none;
}

.article-info .tab {
}

.article-info .tabs-menu {
  font-size: 0;
}

.article-info .tabs-link {
  font-size: 15px;
  line-height: 24px;
  border: none !important;
  text-decoration: none !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
 /* transition: 300ms ease;*/
  transition-property: background-color, color;
  background-color: #EDE8D7;
  margin-right:5px
}

.article-info .tabs-link:hover {
  background-color: #EDE8D7;
  color: rgba(28, 28, 30, 1) !important;
  transition: 300ms ease;
  transition-property: border-color, color;
}

.article-info .tabs-link.is-active {
  background-color: #FFDD3B !important;
	color: #000 !important;
}

/*Trending topics */
.hero-color{
  padding: 15px;
}
.col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}
.mb-2 {
    margin-bottom: 3rem!important;
}
.list-group{
  	/*display: flex;
    -ms-flex-direction: column;
    flex-direction: column;*/
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0.25rem;
  	column-count: 2;
    margin-right: -47px;
}
.list-group-flush>.list-group-item {
    border-width: 0 0 1px;
}
.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 0 1rem;
}
@media (max-width:560px){
  .list-group{
    column-count: 1 !important;
    margin-right: 0 !important;
  }
}
/*End Tending Topics */


/* css for FAQ */
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.mb-2 {
    margin-bottom: 3rem!important;
}
.flex-fill {
    -ms-flex: 1 1 auto!important;
    flex: 1 1 auto!important;
}
.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  	padding-right: 15px;
    padding-left: 15px;
  	position:relative
}

.panel.panel-default{
  margin-bottom:10px;
}
.text-dark, a.text-dark, .text-dark a {
    color: hsl(0, 0%, 20%);
    fill: hsl(0, 0%, 20%);
}
.position-relative {
    position: relative!important;
}
.d-block {
    display: block!important;
}

.panel-heading {
    border-color: #333;
}
.panel-title {
    margin: 0 !important;
    padding: 3% 5em 3% 3%;
    cursor: pointer;
}
.panel-title:hover{
  background-color:#EDE8D7
}
a.d-block.position-relative.text-dark.collapsible-link.py-2 {
    padding-right: 3em;
    padding-left: 1em;
}

.collapsible-link::before {
    content: '';
    width: 14px;
    height: 2px;
    background: #333;
    position: absolute;
    right:2rem;
    top: calc(50% - 1px);
    display: block;
    transition: all 0.3s;
}
.collapsible-link.open::before {
    transform: rotate(180deg);
    background-color:#000 !important
}
.collapsible-link::after {
    content: '';
    width: 2px;
    height: 14px;
    background: #333;
    position: absolute;
    display: block;
    transition: all 0.3s;
  	right: calc(2rem + 6px);
  	top: calc(50% - 7px);
}
.open{
  background-color:#FFDD33;
  color:#000;
  border-radius: 5px 5px 0 0;
}
.open:hover {
    background: #FFDD33;
}
.collapsible-link.open::after {
    transform: rotate(90deg) translateX(-1px);
    background-color:#000 !important
}
.panel-collapse.collapse.in {
  max-height: 0;
  overflow: hidden;
}

.panel-body {
   /* background-color: #ffffff;*/
    padding: 1em;
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: #ddd;
}
@media (max-width: 768px) {
  .col-md-6.flex-fill {
    max-width: 100%;
	}
}
.faqborder{
  border:1px solid #000;
  border-radius:5px;
}
/* end css for FAQ */
/* Banner */
/*.card-body {
  padding: 1px;
  background-color: #FDF1C6;
  color: #000;
  display:none;
}
#close {
  margin:10px 20px;
  color: #000;
  font-weight: normal;
  float: right;
  font-size: 25px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}*/
/* End Banner */
/*Algolia Search Styling */
.aa-PanelSections {
  column-gap: var(--aa-spacing);
  display: flex;
}

.aa-PanelSection {
  display: flex;
  flex-direction: column;
}

/* .aa-PanelSection--left {
  width: 30%;
} */
.aa-PanelSection--left {
  width: 30%;
}
.aa-PanelSection--right {
  width: 70%;
  color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));
}
/* Algolian search box Panel section */

.aa-PanelLayout {
  margin: 0 auto;
  background : #ffffff;
  border-radius : 5px;
  box-shadow : 0px 1px 5px 3px rgba(0,0,0,0.15);
  position : relative;
  max-width : 550px; 
  transition : all .5s linear;
}

.aa-PanelSection--left p {
  padding:5px;
  margin: 0 auto;
  background : #ffffff;
  border-radius : 5px;
  box-shadow : 0px 1px 5px 3px rgba(0,0,0,0.15);
  position : relative;
  max-width : 180px; 
}

.search input[type="search"]:focus {
  border:none;
}

.aa-Source ul li:hover {
  transition : all .5s linear;
  background:#ececec;
}

.aa-Label svg {
  display:none;
}

form.aa-Form.search.search-full {
    border-radius: 30px;
    max-width: 550px;
    
}

.sub-nav input[type="search"] {
  border : none !important;
}

#algolia-search-box,
#algolia-is-search-box {
  max-width: 550px;
  margin: 0 auto;
  position: relative;
}

.aa-Autocomplete {
  position: relative;
  display: block;
  width: 100%;
}

#algolia-search-box .aa-Panel,
#algolia-search-box.aa-Autocomplete .aa-Panel,
#algolia-is-search-box .aa-Panel,
#algolia-is-search-box.aa-Autocomplete .aa-Panel {
  left: 0;
  right: auto;
  width: 100%;
}

.algolia-suggestion-item {
  padding: 8px 10px;
}

.algolia-suggestion-title {
  margin: 0 0 4px;
  color: rgba(5, 0, 56, 1);
}

.algolia-suggestion-meta {
  margin: 0 0 4px;
  color: rgba(28, 28, 30, 0.75);
  font-size: 13px;
}

.algolia-suggestion-snippet {
  margin: 0;
  color: rgba(28, 28, 30, 0.75);
  font-size: 14px;
  line-height: 1.4;
}

section.search-results-column {
  margin-right: 7rem;
  margin-top : 2rem;
 }

section.search-results-left {
  margin-left: 2rem;
  margin-top : 2rem;
}

li.ais-RefinementList-item {
    padding: 0.5rem;
}


h3.search-results-subheading {
    margin-left: 1.4rem;
}

li.ais-InfiniteHits-item {
    text-align: justify;
}
button.ais-InfiniteHits-loadMore {
    border: 1px solid black;
    padding: 10px;
    border-radius: 5px;
}
button.ais-InfiniteHits-loadMore:active {
   border: 1px solid rgba(63, 83, 217, 1);
   padding: 10px;
   border-radius: 5px;
  color:rgba(63, 83, 217, 1);
}
span.ais-RefinementList-count {
    background: #e0dada;
    padding: 3px 10px;
    border-radius: 15px;
}
@media (max-width: 425px) {
  section.search-results-left{
    display:none !important;
  }
}
@media (max-width: 750px) {
  section.search-results-column {
   flex: 0 0 100% !important;
   margin-right: 0 !important;
  }
}
@media (max-width: 426px) {
  .logo img{
    max-height: 25px !important;
  }
  .nav-wrapper a{
    font-size: 10px !important;
    padding: 5px 20px 0 0 !important;
  }
  .dropdown-toggle{
    font-size: 10px !important;
  }
}
@media (max-width: 320px) {
  .logo img{
    max-height: 20px !important;
  }
  .logo {
    margin-top: 0rem !important;
	}
}
.aa-DetachedSearchButton{
  border-radius: 30px !important; 
}
#algolia-search-box-container::before{
  display:none;
}



/* search scroll bar color */
.aa-Panel--scrollable::-webkit-scrollbar-thumb {
  background:rgba(63, 83, 217, 1) !important;
}
.aa-Panel--scrollable{
  max-height:350px !important;
  scrollbar-color:rgba(56, 89, 255, 1) #fff !important;
}
/*End search scroll bar color */

/*.hcknowpattren {
  border-bottom: 1px solid rgba(63, 83, 217, 1);
  padding-bottom: 20px;
}*/
.hcknowpattren button{
  background:#EDE8D7;
  border:none;
  font-size:18px;
  font-weight: 600;
   padding:8px;
  border-radius:5px;
  color:#000;
}
.intro{
  background:#FFDD3B !important;
  color:#000 !important;
  padding:8px;
  border-radius:5px;
}
.introone{
  color:#000 !important;
  background:#FFDD3B !important;
  padding:8px;
  border-radius:5px
}
#algolia-academy-search-results .ais-InfiniteHits-item a{
  font-size:22px
}
#algolia-academy-search-results .ais-InfiniteHits-item div{
  font-size:15px
}
/*span.ais-Stats-text i {
    font-size: 15px;
  	background: #7d7d80;
    padding: 3px 10px;
    border-radius: 15px;
}*/
li.ais-InfiniteHits-item div:has(+ div) {
    color: rgba(63, 83, 217, 1) ;
}
.ais-RefinementList-label input{
  margin:0 0.2rem 0 0;
}
.ais-RefinementList-labelText{
  padding:0.3rem;
}
/*End Algolia Search Styling */
.faqborderone{
  border:1px solid #000;
  border-radius:12px;
}
/*New Font Installation 07/11/2023 - Raj*/
@font-face {
  font-family: 'roobertpro_body';
  src: url(/hc/theming_assets/01J0E4W35F7QS2SXRRF17HJH6H) format('woff'),
       url(/hc/theming_assets/01KXG4M5W2CPV3BHP6V4X9PTNB) format('woff2');
}
/**/

/* ============================================================
   Roobert PRO — full brand family (redesign 2026).
   Discrete per-weight faces (Light 300 → Heavy 900), uprights + italics.
   SemiBold ships otf only. Referenced with Zendesk $assets- CSS syntax.
   ============================================================ */
/* Uprights */
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M65YBQY14HY83JXWCW84)    format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M6VNPS5JQEMXZDXD0JR0)  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M5W2CPV3BHP6V4X9PTNB)   format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M87HBC6XGBT2K219ZD8H)   format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M4S2X1YZXQE9CW93R8P8)     format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M6BSSW2MA5Q6FZEZXEN1)    format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
/* Italics */
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M501DWMA3A7QMC4HGSPR)    format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M4XPS4RE3P3VQ5DWSKA3)  format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M7QVCFMY6X820PGMAQDN)   format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M86J4QA2WZ0BYERDAZ3P)   format("opentype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M56BQA18PXJV4Q0GJXE6)     format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Roobert PRO"; src: url(/hc/theming_assets/01KXG4M5BDN96QXZNMM9483GGJ)    format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
/* end Roobert PRO family */

/*CSS for Product Announcements page*/
.announcement-cont {
  position: relative;
  background-color: #f7f7f9;
  margin: 10px 0;
  padding: 20px 20px;
  border-radius: 10px;
}
.announcement-status {
  position: absolute;
  right: 20px;
  top: 20px;
  border-radius: 5px;
  background: green;
  padding: 4px 10px;
  color: white;
}
.announcement-status.Launched {
  background-color: #72B121;
}
.announcement-status.Coming {
  background-color: #217EB1;
}
.announcement-status.Rolling {
  background-color: #217EB1;
}

.announcement-title {
  display: block;
  margin: 10px 0;
  font-size: 24px;
  font-weight: bold;
  color: rgba(5, 0, 56, 1);
}
  .announcement-title:hover {
    text-decoration: none;
  }
.announcement-created-date {
  color: #9C9C9C;
  font-weight: bold;
}
.category-content.announcements {
  flex:1;
  text-align: center;
}
.announcements-left {
  display: inline-block;
  width: 55%;
  text-align: left;
  margin: 0;
  vertical-align: top;
}
.announcements-right {
  display: inline-block;
  width: 29%;  /* Fix later */
  position: relative;
  margin: 0;
  vertical-align: top;
}
.announcements-subscribe {
  background-color: #F7F7F9;
  margin: 0 0 0 30px;
  padding: 80px 20px;
  border-radius: 4px;
}
.announcements-subscribe-title {
  font-size: 24px;
}
.announcements-subscribe-body {
  
}
.announcements-subscribe-button {
  
}
.announcements-filter {
  display: inline-block;
  margin-right: 15px;
}

.category-container.announcements{
    display:block;
}
.header-container {
  //background-color: #F4B31B;
  background-color: #F5B31B;
}

.announcement-description-wrapper {
  background-color: #F5F6F8;
  padding: 1px 10px;
  margin: 0 0 30px;
  text-align: center;
  color: #767676;
}
.announcement-description-wrapper a {
  color: #0061D5;
}
.sub-nav {
  margin-bottom: 0;
}  
.all-content {
  display: flex;
}
@media (max-width: 991px){
  .all-content {
		flex-direction: column-reverse;
  }
}  
.left-content {
  display: inline-block;
  width: 70%;
  vertical-align: top;
}
@media (max-width: 991px){
  .left-content {
    width: 100%;
  }
}  
.right-content {
  display: inline-block;
  width: 30%;
  vertical-align: top;
  padding-left: 60px;
}
@media (max-width: 1024px){
  .right-content {
    padding-left: 30px;
  }
}   
@media (max-width: 991px){
  .right-content {  
    width: 100%;
    padding: 0;
  }   
}  

}  
#overlay {
    display:none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.7);
    z-index: 999;
}  
#custom-filter{
    padding: 20px 0;
    border-bottom: 1px solid #D3D3D3;
    display: flex;
    margin-bottom: 25px;
}    
.select-dropdown {
    position: relative;
    display: inline-block;
    margin-right: 20px;
}
@media (max-width: 767px){
  .select-dropdown {
    margin-right: 5px;
  }  
}
.select-dropdown.article-style {
  	margin-right: 10px;
    margin-left: auto;
    display: flex;
}
@media (max-width: 599px){
  #custom-filter {
    flex-wrap: wrap;
  }
  .select-dropdown {  
    width: 100%;
    margin: 0 0 10px;
  }
  .select-dropdown.article-style {
    width: auto;
    margin: 0 0 10px auto;
    order: -1;
  }
}    
.select-dropdown:last-child {
  margin: 0;
}
.select-dropdown:after {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  	content: "";
    color: #767676;
    z-index: -1;
}  
.select-dropdown select, .select-dropdown select:focus, .select-dropdown select:active {
    background-color: #FFFFFF;
    border: 0;
    border-radius: 0;
    padding: 2px 30px 2px 10px;
    width: 100%;
    color: #767676;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select-dropdown select#filterBySection {
	  min-width: 200px;
}  
.select-dropdown select#statusFilter {
    min-width: 140px;
}
.select-dropdown select:focus {
    color: #222222;
    font-weight: bold;
}
.select-dropdown select option {
    font-weight: normal;
}
.select-dropdown.article-style button {
    border: 0;
    background: transparent url() no-repeat center;
    background-size: contain;
    font-size: 0;
    height: 30px;
    width: 30px;
    vertical-align: top;
    padding: 15px;
    margin-left: 10px;
}
.select-dropdown.article-style button.list {
    background-image: url("//theme.zdassets.com/theme_assets/88181/12d77160d201a5a3057f17aa2f4cb1b0acbb78cd.svg");
}
.select-dropdown.article-style button.list.active {
    background-image: url("//theme.zdassets.com/theme_assets/88181/7a8471a2bf222bb4d8ef6bd628c68b8e28e3d9da.svg");
}
.select-dropdown.article-style button.card {
    background-image: url("//theme.zdassets.com/theme_assets/88181/d97723f71fed1034c44edf9ecf3f22af5b91c7a4.svg");
}
.select-dropdown.article-style button.card.active {
    background-image: url("//theme.zdassets.com/theme_assets/88181/676f467858bfc9ce100f36711b3f95fb97cac703.svg");
}  
.select-dropdown.article-style:after {
    content: none;
}
.messageCard {
  position: relative;
  margin: 10px 0 24px 0;
  padding: 0;
  border-bottom: 1px solid #D3D3D3;

}
.messageCard .postTimeLabel {
    display: block;
  	margin: 16px 0;
}
.messageCard .postTime {
    margin-right: 4px;
    font-size: 12px;
  	display: inline-block;
}  

.messageCard .label{
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 650;
  border-radius: 5px;
  margin-top: 5px;
  margin-left: 8px;
  padding: 2px 8px;
  background: #D8F9C9;
  color: #1F5F02;
}  
.messageCard .title{
  display: inline; 
  vertical-align: middle;
  margin-top: 0;
	margin: 10px 0;
  font-size: 22px;
  font-weight: bold;
  color: rgba(5, 0, 56, 1);
}
.messageCard .title:hover { 
  text-decoration: none; 
}
.messageCard .body{
    line-height: 24px;
    max-height: 145px;
    margin: 12px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.messageCard .postTime{
    font-weight: 400;
  	font-size: 13px;
    color: #686685;
    margin-top: 20px;
    display: inline;
}
.messageStatsLeft {
  display: inline-block;
}
.messageCard.Comingsoon .label{
    background-color: #F1F3FD;
  	color: #3859FF;
}
.messageCard.Launched .label{
    background-color: #D8F9C9;
	  color: #1F5F02;
}
.messageCard.Rollingout .label{
    background-color: #F1F3FD;
  	color: #3859FF;
}
.custom-article.card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}  
.custom-article.card .messageCard {
    width: calc(50% - 15px);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
  	
}
@media (max-width: 480px){
  .custom-article.card .messageCard {
    width: 100%;
  }
}
.custom-article.card .messageCard .postTimeLabel {
    flex-direction: column-reverse;
    align-items: flex-start;
}
.custom-article.card .messageCard .postTimeLabel .postTime {
    margin: 8px 0 12px;
}
.custom-article.card .messageCard .label {
    margin: 8px 0;
}
.custom-article.card .messageCard .body{
    -webkit-line-clamp: 7;
    max-height: 168px;  
}
.custom-article.card .messageCard .messageStats {
    margin-top: auto;
}
.message-pagination {
    text-align: center;
    color: #767676;
    padding: 20px 0;
}
.message-pagination i.fa {
    color: #0061D4;
    padding: 0 8px;
}
.message-pagination .pagination-prev {
    margin-left: -22px;
}
.message-pagination .pagination-next {
    margin-right: -22px;
}
a#message-page-upper, a#message-page-lower,a.message-upper-limit,a.message-lower-limit {
    pointer-events: none;
    cursor: default;
    color: #767676;
    margin: 0 4px;
}
.custom-article.card ~ .selection-container .message-pagination {
		margin-top: 20px;
}
.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.pagination-next, .pagination-next:hover {
  text-decoration: none;
  color: #767676;
}

.announcement-article-label {
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 650;
  border-radius: 5px;
  margin-left: 2px;
  padding: 2px 8px;
  background: #F0F0F3;
  color: #716E65;  
}
.announcement-article-header {
  margin-bottom: 10px;
}
.announcement-article-title {
  margin-bottom: 0;
}
.announcement-article-content {
  margin-bottom: 20px;
}
.announcement-meta-data {
  color: #686685;
  font-size: 13px;
  font-weight: 300;
}

.announcement-meta-data:not(:last-child)::after {
  content: "\00B7";
  margin: 0 5px;
}
.sub-nav.announcements {
  display: block; 
  padding-bottom: 40px;

}
.announcements-header {
  display: block;
  text-align: center;
  font-size: 30px;
  color: #050038;
  padding-top: 60px;
  padding-bottom: 20px;
  margin-bottom: 0px;
}
.announcements-subheader {
  text-align: center;
  font-size: 17px;
  color: #686685;  
}
.announcements-welcome-text {
  margin: 20px auto;
  max-width: 778px;
  text-align: left;
  font-size: 17px;
  color: #686685;  
}
#custom-filter.announcements-filter {
  padding: 24px 0;
  margin-right: 0;
  border-bottom: 1px solid #D3D3D3;
}
.announcements-search {
  margin: 50px auto;
  max-width: 778px;
}
.announcements-search .search input[type="search"] {
    border-radius: 40px;
    box-sizing: border-box;
  	border: 1px solid #9998B3 !important;
    font-size: 17px;
    font-weight: 400;
    color: #B3B2C6;
    height: 60px;
    padding-left: 50px;
    padding-right: 20px;
    -webkit-appearance: none;
    width: 100%;  
}
.article-content {
  margin: 16px 0;
}
.messageCard-titlebox {
  display: block;
  vertical-align: middle;
}

/* 2.0.26: old hero illustration removed — heading sits on the page background (light + dark) */
.announcements-hero {
  background: none;
  width: 100%;
  padding: 0 20px;
  margin-top: 0px;
  text-align: center;
}
  

/*CSS ends for Product Announcements page*/

/*Customize Images CSS*/
.wysiwyg-color-black40{
  color: inherit;
}
.article-body img{
  border: 2px solid #1C1C1E;
  border-radius: 8px;
}
.article-body img.icon {
    border: none;
    border-radius: unset;
    display: unset;
    vertical-align: middle;
}
/*Customize Images CSS End*/


@media (max-width: 1024px) {
.intercom-lightweight-app-launcher {
bottom: 72px !important;
}
 
/*localhost*/
.intercom-dfosxs {
bottom: 80px !important;
}
 
iframe[name='intercom-notifications-frame'] {
bottom: 132px !important;
}
}

/* Custom themed chat launcher. Intercom's own launcher is hidden via
   hide_default_launcher (its color/icon live in a cross-origin iframe and can't
   be styled here); this FAB opens the messenger and is themed to match. */
.mhc-chat-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--miro-yellow); color: #050505; border: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--hc-shadow-2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mhc-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.mhc-chat-launcher svg { display: block; }
.mhc-chat-launcher[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mhc-chat-launcher { transition: none; } }


/* =====================================================================
   MIRO HELP CENTER — Landing page + Sidebar nav (custom additions)
   ===================================================================== */

:root {
  /* ---------- Miro brand + tone system (redesign 2026) ---------- */
  --miro-yellow: #FFDD33;
  --miro-blue: #4262FF;
  --miro-blue-hover: #2F4EE8;
  --miro-black: #050505;
  --miro-ink: #1C1C1E;
  --miro-white: #FFFFFF;
  --miro-violet: #867AFF;

  --tone-yellow-xdark: #403300; --tone-yellow-dark: #CFB326; --tone-yellow: #FFDD33; --tone-yellow-light: #FFF3A2;
  --tone-green-xdark:  #21370B; --tone-green-dark:  #297A36; --tone-green:  #6EDB8C; --tone-green-light:  #B7FBCD;
  --tone-cyan-xdark:   #0E4343; --tone-cyan-dark:   #1D6A60; --tone-cyan:   #47D1C4; --tone-cyan-light:   #BCF1ED;
  --tone-red-xdark:    #4B171C; --tone-red-dark:    #6B2020; --tone-red:    #F25A6E; --tone-red-light:    #FFB2B2;
  --tone-orange-xdark: #451901; --tone-orange-dark: #8A4A1E; --tone-orange: #FF9C57; --tone-orange-light: #FFD8B3;
  --tone-purple-xdark: #55055C; --tone-purple-dark: #82209D; --tone-purple: #CE70FC; --tone-purple-light: #F8C8FC;
  --tone-blue-xdark:   #003E57; --tone-blue-dark:   #216E8C; --tone-blue:   #4BD1F6; --tone-blue-light:   #CCF4FF;

  --ai-bg-4: rgba(134,122,255,0.04);
  --ai-bg-12: rgba(134,122,255,0.12);

  /* ---------- Fonts ---------- */
  --font-display: "Roobert PRO", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Roobert PRO", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Surface tokens (LIGHT) ---------- */
  --hc-bg:#FAFAFB; --hc-surface:#F3F3F1; --hc-card:#FFFFFF;
  --hc-text:#050505; --hc-text-2:#3D3D3D; --hc-text-3:#75757A;
  --hc-border:rgba(5,5,5,0.09); --hc-border-2:rgba(5,5,5,0.16);
  --hc-canvas:#F1F1EF; --hc-dot:rgba(5,5,5,0.10);
  --hc-header:rgba(250,250,251,0.88); --hc-chip:#F0F0EC;
  --hc-shadow:0 1px 2px rgba(5,5,5,.06); --hc-shadow-2:0 14px 40px rgba(5,5,5,.12);
  --hc-input:#FFFFFF; --hc-foot:#050505;
  --hc-signin:#3859FF; --hc-search-ring:transparent;
  /* hero: yellow glow + dot grid */
  --hc-hero-base:#F2F2F2; --hc-hero-dot:rgba(5,5,5,0.15);
  --hc-glow-1:rgba(255,221,51,1); --hc-glow-2:rgba(255,221,51,.6); --hc-glow-3:rgba(255,221,51,.3);
  --hc-g1-shape:ellipse 30% 75% at 50% 88%; --hc-g1-mid:50%; --hc-g2-shape:ellipse 48% 110% at 60% 20%;
  /* 68px brand row + 48px category row + 1px border (sticky offsets) */
  --mhc-header-h:117px;

  /* ---------- Legacy --mhc-* aliases now resolve to the new system ---------- */
  --mhc-yellow: var(--miro-yellow);
  --mhc-yellow-hero: var(--miro-yellow);
  --mhc-ink: var(--hc-text);
  --mhc-ink-soft: var(--hc-text-3);
  --mhc-border: var(--hc-border);
  --mhc-card-radius: 20px;
  --mhc-teal: var(--tone-cyan-light);
  --mhc-green: var(--tone-green-light);
  --mhc-purple: var(--tone-purple-light);

  /* ---------- Admonition / colored-callout tones (LIGHT) — reference palette ---------- */
  --mhc-adm-note-bg:#EFF6FF; --mhc-adm-note-accent:#867AFF;
  --mhc-adm-success-bg:#F0FDF4; --mhc-adm-success-accent:#10B981;
  --mhc-adm-warning-bg:#FFFBEB; --mhc-adm-warning-accent:#F59E0B;
  --mhc-adm-danger-bg:#FEF2F2;  --mhc-adm-danger-accent:#EF4444;
  --mhc-adm-neutral-bg:#F4F4F6; --mhc-adm-neutral-accent:#9A9AA2;
}

/* ---------- Surface tokens (DARK) — toggled by header sun/moon button ---------- */
html[data-mhc-theme="dark"] {
  --hc-bg:#1B1B1D; --hc-surface:#242427; --hc-card:#26262A;
  --hc-text:#FFFFFF; --hc-text-2:#C6C6CB; --hc-text-3:#8C8C92;
  --hc-border:rgba(255,255,255,0.10); --hc-border-2:rgba(255,255,255,0.18);
  --hc-canvas:#151517; --hc-dot:rgba(255,255,255,0.07);
  --hc-header:rgba(22,22,24,0.82); --hc-chip:#303035;
  --hc-shadow:0 1px 2px rgba(0,0,0,.4); --hc-shadow-2:0 18px 48px rgba(0,0,0,.5);
  --hc-input:#2C2C30; --hc-foot:#000000;
  --hc-signin:#8FA2FF; --hc-search-ring:rgba(255,255,255,0.10);
  /* hero: no yellow glow in dark mode — just the dot grid on the dark base */
  --hc-hero-base:#1B1B1D; --hc-hero-dot:rgba(255,255,255,0.13);
  --hc-glow-1:transparent; --hc-glow-2:transparent; --hc-glow-3:transparent;

  /* ---------- Admonition / colored-callout tones (DARK) — reference palette ---------- */
  --mhc-adm-note-bg:#1A2332; --mhc-adm-note-accent:#A89CFF;
  --mhc-adm-success-bg:#152A1A; --mhc-adm-success-accent:#34D399;
  --mhc-adm-warning-bg:#2A2510; --mhc-adm-warning-accent:#FBBF24;
  --mhc-adm-danger-bg:#2A1515;  --mhc-adm-danger-accent:#F87171;
  --mhc-adm-neutral-bg:#2C2C2E; --mhc-adm-neutral-accent:#8C8C92;
}

/* ---------- HERO ---------- */
.mhc-hero {
  position: relative;
  background: #f3f2ef;
  background-image: radial-gradient(#d8d7d2 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  padding: 90px 20px 70px;
  overflow: hidden;
  text-align: center;
}
.mhc-hero-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  z-index: 2;
}
.mhc-hero-eyebrow {
  display: inline-block;
  background: var(--mhc-yellow-hero);
  color: var(--mhc-ink);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.mhc-hero-title {
  font-size: 68px;
  line-height: 1.02;
  font-weight: 700;
  color: var(--mhc-ink);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.mhc-hero-title mark {
  background: var(--mhc-yellow-hero);
  color: var(--mhc-ink);
  padding: 0 10px;
  border-radius: 6px;
}
.mhc-hero-subtitle {
  font-size: 19px;
  color: var(--mhc-ink-soft);
  max-width: 520px;
  margin: 0 auto 34px;
  line-height: 1.5;
}
.mhc-hero-search {
  max-width: 620px;
  margin: 0 auto 18px;
}
.mhc-hero-search .aa-Autocomplete,
.mhc-hero-search input[type="search"] {
  width: 100%;
}
.mhc-hero-popular {
  font-size: 14px;
  color: var(--mhc-ink-soft);
}
.mhc-hero-popular-label { font-weight: 600; margin-right: 8px; }
.mhc-hero-popular a {
  color: var(--mhc-ink);
  margin: 0 10px;
  text-decoration: none;
}
.mhc-hero-popular a:hover { text-decoration: underline; }

/* sticky notes + cursors (decorative) */
.mhc-hero-notes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mhc-note {
  position: absolute;
  width: 120px; height: 118px;
  padding: 16px;
  font-weight: 600; font-size: 15px; line-height: 1.25;
  color: var(--mhc-ink);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  display: flex; align-items: flex-start;
}
.mhc-note--yellow { background: var(--mhc-yellow-hero); }
.mhc-note--teal   { background: var(--mhc-teal); }
.mhc-note--green  { background: var(--mhc-green); }
.mhc-note--purple { background: var(--mhc-purple); }
.mhc-note--1 { top: 60px;  left: 6%;  transform: rotate(-6deg); }
.mhc-note--2 { top: 210px; left: 2%;  transform: rotate(4deg); }
.mhc-note--3 { top: 55px;  right: 6%; transform: rotate(6deg); }
.mhc-note--4 { top: 215px; right: 3%; transform: rotate(-5deg); }
/* Collaborator cursors: real arrow-pointer glyph + name pill (matches the
   Docusaurus reference); gentle float like the sticky notes. */
.mhc-cursor { position: absolute; }
.mhc-cursor-arrow { display: block; filter: drop-shadow(0 2px 3px rgba(5,5,5,.18)); }
.mhc-cursor-label {
  position: absolute; left: 19px; top: 20px;
  padding: 3px 11px; border-radius: 999px;
  border: 1.56px solid; font-size: 11px; font-weight: 500;
  white-space: nowrap;
}
.mhc-cursor--priya { top: 212px; left: 21%; }
.mhc-cursor--marco { top: 196px; right: 20%; }
.mhc-cursor--you   { top: 330px; right: 30%; }
@media (max-width: 900px) { .mhc-hero-notes { display: none; } .mhc-hero-title { font-size: 44px; } }

/* ---------- SECTION HEADINGS ---------- */
.mhc-section-eyebrow {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mhc-ink-soft);
  margin: 60px 0 12px;
}
.mhc-section-title {
  font-size: 34px; font-weight: 700; color: var(--mhc-ink);
  margin: 0 0 34px; letter-spacing: -0.01em;
}
.mhc-topics { margin-top: 10px; }
.mhc-popular .mhc-section-title { margin-top: 60px; }

/* ---------- TOPIC GRID ---------- */
.mhc-topic-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 980px) { .mhc-topic-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px) { .mhc-topic-grid { grid-template-columns: 1fr; } }
.mhc-topic-card { display: flex; }
.mhc-topic-card-link {
  position: relative;
  display: block; width: 100%;
  padding: 28px;
  border: 1px solid var(--mhc-border);
  border-radius: var(--mhc-card-radius);
  background: #fff; text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.mhc-topic-card-link:hover {
  box-shadow: 0 10px 30px rgba(5,0,56,.08);
  transform: translateY(-2px);
  border-color: #d5d5db;
}
.mhc-topic-icon {
  display: block; width: 64px; height: 64px; border-radius: 14px;
  margin-bottom: 22px; background: var(--mhc-yellow) center/32px no-repeat;
}
.mhc-topic-name { font-size: 21px; font-weight: 700; color: var(--mhc-ink); margin: 0 0 10px; }
.mhc-topic-desc { font-size: 15px; color: var(--mhc-ink-soft); line-height: 1.5; margin: 0 0 26px; }
.mhc-topic-count { font-size: 14px; color: var(--mhc-ink-soft); }
.mhc-topic-arrow { position: absolute; right: 28px; bottom: 26px; font-size: 20px; color: var(--mhc-ink); }

/* ---------- POPULAR ARTICLES ---------- */
.mhc-popular-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px;
}
@media (max-width: 760px) { .mhc-popular-grid { grid-template-columns: 1fr; } }
.mhc-popular-link {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  padding: 22px 52px 22px 22px;
  border: 1px solid var(--mhc-border); border-radius: var(--mhc-card-radius);
  background: #fff; text-decoration: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.mhc-popular-link:hover { box-shadow: 0 8px 24px rgba(5,0,56,.07); border-color: #d5d5db; }
.mhc-popular-doc {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  background: #f1f1f3;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h6'/></svg>") center/22px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M9 13h6M9 17h6'/></svg>") center/22px no-repeat;
  background-color: #f1f1f3;
  position: relative;
}
.mhc-popular-doc::after {
  content: ""; position: absolute; inset: 0;
  background: #4d4d53;
  -webkit-mask: inherit; mask: inherit;
}
.mhc-popular-text { display: flex; flex-direction: column; gap: 4px; }
.mhc-popular-cat { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mhc-ink-soft); }
.mhc-popular-title { font-size: 17px; font-weight: 600; color: var(--mhc-ink); }
.mhc-popular-arrow { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--mhc-ink-soft); }

/* ---------- CTA ---------- */
.mhc-cta { margin: 70px auto; }
.mhc-cta-inner {
  position: relative; overflow: hidden;
  background: var(--mhc-yellow-hero);
  border-radius: 28px;
  padding: 56px 60px;
  min-height: 200px;
}
.mhc-cta-text { max-width: 520px; position: relative; z-index: 2; }
.mhc-cta-title { font-size: 34px; font-weight: 700; color: var(--mhc-ink); margin: 0 0 14px; }
.mhc-cta-body { font-size: 17px; color: var(--mhc-ink); opacity: .8; line-height: 1.5; margin: 0 0 28px; }
.mhc-cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.mhc-cta-btn {
  display: inline-block; padding: 15px 26px; border-radius: 10px;
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
}
.mhc-cta-btn--primary { background: var(--mhc-ink); color: #fff; }
.mhc-cta-btn--primary:hover { background: #1a1440; }
.mhc-cta-btn--secondary { background: transparent; color: var(--mhc-ink); border: 1.5px solid rgba(5,0,56,.35); }
.mhc-cta-btn--secondary:hover { border-color: var(--mhc-ink); }
.mhc-cta-art {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%) rotate(-18deg);
  width: 180px; height: 120px; border-radius: 8px;
  background: linear-gradient(135deg,#f2994a 0%, #f2c94c 100%);
  opacity: .9;
}
@media (max-width: 760px) { .mhc-cta-inner { padding: 40px 28px; } .mhc-cta-art { display: none; } }

/* ---------- SIDEBAR NAV TREE (category/section/article pages) ---------- */
.mhc-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
  .mhc-layout { flex-direction: row; align-items: flex-start; }
  .mhc-main { flex: 1 1 auto; min-width: 0; }
}
.mhc-sidebar { flex: 0 0 260px; }
@media (min-width: 1024px) {
  .mhc-sidebar { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
}
.mhc-sidebar-tree { display: block; }
.mhc-tree-cat { border-bottom: 1px solid var(--mhc-border); padding: 4px 0; }
.mhc-tree-cat-title {
  display: block; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--mhc-ink);
  padding: 12px 28px 12px 4px; position: relative;
}
.mhc-tree-cat-title::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--mhc-ink-soft); border-bottom: 2px solid var(--mhc-ink-soft);
  transform: rotate(45deg); transition: transform .18s ease;
}
.mhc-tree-cat[aria-expanded="true"] .mhc-tree-cat-title::after { transform: rotate(-135deg); }
.mhc-tree-sections {
  list-style: none; margin: 0; padding: 0 0 8px;
  display: none;
}
.mhc-tree-cat[aria-expanded="true"] .mhc-tree-sections { display: block; }
.mhc-tree-section-link {
  display: block; padding: 8px 4px 8px 16px;
  font-size: 14px; color: var(--mhc-ink-soft); text-decoration: none;
  border-left: 2px solid transparent;
}
.mhc-tree-section-link:hover { color: var(--mhc-ink); }
.mhc-tree-section-link.mhc-current {
  color: var(--mhc-ink); font-weight: 600;
  border-left-color: var(--mhc-yellow-hero);
  background: #fafaf7;
}
.mhc-sidebar-toggle {
  display: none;
  width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--mhc-border); border-radius: 10px;
  padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--mhc-ink); cursor: pointer;
}
@media (max-width: 1023px) {
  .mhc-sidebar-toggle { display: block; }
  .mhc-sidebar-tree { display: none; margin-top: 10px; }
  .mhc-sidebar-toggle[aria-expanded="true"] + .mhc-sidebar-tree { display: block; }
}

/* ---------- Article/section docs-style sidebar (screenshot 2) ---------- */
/* Ensure the API-built tree renders inside the existing .article-sidebar */
.article-sidebar .mhc-sidebar-tree,
.mhc-sidebar .mhc-sidebar-tree { display: block; }

@media (min-width: 1024px) {
  .article-sidebar { flex: 0 0 280px; }
  .article-sidebar .mhc-sidebar-tree,
  .mhc-sidebar .mhc-sidebar-tree { position: sticky; top: 20px; }
}

/* Section header rows in the docs nav */
.mhc-tree-cat-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mhc-ink);
}
.mhc-tree-section-link {
  font-size: 15px;
  padding: 9px 4px 9px 16px;
  border-radius: 0;
}
/* Current article: yellow left border + subtle fill (matches screenshot) */
.mhc-tree-section-link.mhc-current {
  color: var(--mhc-ink);
  font-weight: 600;
  border-left: 3px solid var(--mhc-yellow-hero);
  background: #f7f6f2;
}

/* ---------- Category redirect fallback page ---------- */
.mhc-cat-redirect { max-width: 900px; margin: 20px auto 60px; }
.mhc-cat-redirect-note { color: var(--mhc-ink-soft); font-size: 15px; margin-top: 8px; }
.mhc-cat-redirect .section-tree { margin-top: 30px; }

/* =====================================================================
   MIRO HELP CENTER — Full visual match (header, top-nav, docs sidebar,
   TOC, theme toggle). This block is appended last so it wins over the
   earlier .mhc-* additions.
   ===================================================================== */

/* ---------- HEADER BAR ---------- */
.mhc-header {
  border-bottom: 1px solid var(--mhc-border);
  background: #fff;
  padding: 0;
}
.mhc-header-inner {
  display: flex; align-items: center; gap: 28px;
  max-width: 1440px; margin: 0 auto;
  padding: 14px 32px;
}
.mhc-logo { flex: 0 0 auto; margin: 0; }
.mhc-logo img { height: 26px; width: auto; display: block; }
.mhc-topnav {
  display: flex; align-items: center; gap: 26px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.mhc-topnav::-webkit-scrollbar { display: none; }
.mhc-topnav-link {
  font-size: 15px; font-weight: 500; color: var(--mhc-ink);
  text-decoration: none; white-space: nowrap; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.mhc-topnav-link:hover { color: #4b3fd6; }
.mhc-topnav-current { color: #4b3fd6; border-bottom-color: #4b3fd6; font-weight: 600; }
.mhc-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.mhc-theme-toggle {
  width: 22px; height: 22px; border: 0; padding: 0; cursor: pointer;
  border-radius: 50%; background: linear-gradient(90deg,#050038 0 50%, #d9d9de 50% 100%);
}
.mhc-header-search-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--mhc-border); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--mhc-ink-soft);
}
.mhc-header-search-ico {
  width: 15px; height: 15px; display: inline-block;
  background: var(--mhc-ink-soft);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>") center/contain no-repeat;
}
.mhc-header-search-kbd { font-size: 12px; color: #9a9aa2; border: 1px solid var(--mhc-border); border-radius: 4px; padding: 1px 5px; }
@media (max-width: 1100px) { .mhc-header-search-label, .mhc-header-search-kbd { display: none; } }

/* ---------- DOCS LAYOUT: sidebar flush + full-height divider ---------- */
@media (min-width: 1024px) {
  .article-container, .mhc-layout {
    position: relative;
    align-items: stretch;
    gap: 0;
  }
  .article-sidebar, .mhc-sidebar {
    flex: 0 0 300px;
    padding: 30px 28px 30px 0;
    border-right: 1px solid var(--mhc-border);
  }
  .mhc-main, .article {
    padding-left: 40px !important;
    min-width: 0;
  }
}

/* ---------- LEFT NAV items (match target) ---------- */
.mhc-nav-header { padding: 2px 0 10px; }
.mhc-nav-header-title {
  font-size: 16px; font-weight: 700; color: var(--mhc-ink);
  display: block; line-height: 1.3;
}
.mhc-nav-flat { list-style: none; margin: 0 0 6px; padding: 0; }
.mhc-nav-item { margin: 0; }
.mhc-nav-link {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; line-height: 1.35; color: var(--mhc-ink-soft);
  text-decoration: none; border-left: 3px solid transparent;
}
.mhc-nav-link:hover { color: var(--hc-text); background: var(--hc-chip); }
.mhc-nav-link.mhc-current {
  background: #f1f0ec; color: var(--mhc-ink); font-weight: 600;
  border-left-color: var(--mhc-yellow-hero); border-radius: 8px;
}
/* group (chevron) rows */
.mhc-nav-group { border-top: 1px solid var(--mhc-border); }
.mhc-nav-group:first-of-type { margin-top: 6px; }
.mhc-nav-group-title {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 14px 4px; font-size: 15px; font-weight: 700; color: var(--mhc-ink);
}
.mhc-nav-chevron {
  width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid var(--mhc-ink-soft); border-bottom: 2px solid var(--mhc-ink-soft);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.mhc-nav-group-title[aria-expanded="true"] .mhc-nav-chevron { transform: rotate(45deg); }
.mhc-nav-group-body { display: none; padding: 0 0 10px 4px; }
.mhc-nav-group-title[aria-expanded="true"] + .mhc-nav-group-body { display: block; }
.mhc-nav-group-body .mhc-nav-group { border-top: 0; margin-left: 8px; }
.mhc-nav-group-body .mhc-nav-group-title { padding: 10px 4px; font-size: 14px; font-weight: 600; }

/* ---------- RIGHT TOC (match target indentation/width) ---------- */
@media (min-width: 1200px) {
  .table-of-contents { flex: 0 0 240px; }
}
.table-of-contents__list { list-style: none; margin: 0; padding: 0; }
.table-of-contents__list li { margin: 0; }
.table-of-contents__list a {
  display: block; padding: 6px 0; font-size: 14px; line-height: 1.4;
  color: var(--mhc-ink-soft); text-decoration: none;
}
.table-of-contents__list a:hover { color: var(--mhc-ink); }
.table-of-contents__list .toc-h3 a,
.table-of-contents__list ul a { padding-left: 16px; font-size: 13px; }
.table-of-contents__title { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mhc-ink-soft); margin-bottom: 10px; }

/* ---------- Mobile: sidebar toggle ---------- */
@media (max-width: 1023px) {
  .article-sidebar, .mhc-sidebar { border-right: 0; padding: 16px 0; }
}

/* ---------- Dark theme now driven by --hc-* tokens (see :root + html[data-mhc-theme=dark]) ---------- */
html[data-mhc-theme="dark"] .mhc-nav-link.mhc-current { background: var(--hc-chip); color: var(--hc-text); }

/* ---------- Header search reveal (now inside body-level modal overlay) ---------- */
#algolia-search-box.mhc-search-open {
  display: block; width: 100%;
  background: var(--hc-card); border-radius: 14px; box-shadow: var(--hc-shadow-2);
  padding: 10px;
}

/* =====================================================================
   ============  MIRO HELP CENTER — REDESIGN 2026 OVERRIDES  ============
   Appended last so it wins over earlier .mhc-* rules. Everything below
   is token-driven so light/dark both work from --hc-* / --tone-*.
   ===================================================================== */

/* ---------- HEADER ---------- */
.mhc-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--hc-header);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hc-border);
  padding: 0;
}
.mhc-header-inner { max-width: 1320px; height: 68px; padding: 0 32px; gap: 28px; }
.mhc-logo .mhc-logo-lockup { display: flex; align-items: center; gap: 12px; }
.mhc-logo .mhc-logo-mark { width: 34px; height: 34px; border-radius: 7px; display: block; }
.mhc-logo-divider { width: 1px; height: 22px; background: var(--hc-border-2); display: inline-block; }
.mhc-logo-word { font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--hc-text); }

.mhc-topnav { gap: 24px; }
.mhc-topnav-link {
  position: relative; font-size: 14.5px; font-weight: 500;
  color: var(--hc-text-2); border-bottom: 0; padding: 6px 0;
}
.mhc-topnav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--miro-yellow); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .16s cubic-bezier(.2,.7,.2,1);
}
.mhc-topnav-link:hover { color: var(--hc-text); }
.mhc-topnav-link:hover::after, .mhc-topnav-current::after { transform: scaleX(1); }
.mhc-topnav-current { color: var(--hc-text); border-bottom: 0; font-weight: 600; }

.mhc-header-actions { gap: 14px; }
.mhc-theme-toggle {
  width: 38px; height: 38px; padding: 0; border: 1px solid var(--hc-border);
  border-radius: 10px; background: transparent; color: var(--hc-text);
  cursor: pointer; display: grid; place-items: center;
}
.mhc-theme-toggle .mhc-ico { display: none; line-height: 0; }
.mhc-theme-toggle .mhc-ico-moon { display: inline-flex; }
html[data-mhc-theme="dark"] .mhc-theme-toggle .mhc-ico-moon { display: none; }
html[data-mhc-theme="dark"] .mhc-theme-toggle .mhc-ico-sun { display: inline-flex; }

.mhc-lang .dropdown-toggle {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0; color: var(--hc-text-2);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.mhc-lang-globe { display: inline-flex; }

.mhc-header-search-btn {
  border: 1px solid var(--hc-border); background: transparent;
  color: var(--hc-text-3); border-radius: 10px;
}
.mhc-header-search-kbd { color: var(--hc-text-3); border: 1px solid var(--hc-border); }

/* ---------- HERO ---------- */
.mhc-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--miro-yellow); color: #050505;
  padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
}
.mhc-hero-title { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.03em; color: var(--hc-text); }
.mhc-hero-title mark {
  background: var(--miro-yellow); color: #050505;
  padding: 0 .14em; border-radius: 8px; display: inline-block;
  transform: rotate(-1.5deg);
}
.mhc-hero-subtitle { color: var(--hc-text-2); }
.mhc-hero-popular a { color: var(--hc-text-2); background: var(--hc-chip); padding: 6px 13px; border-radius: 999px; }
.mhc-hero-popular a:hover { text-decoration: none; color: var(--hc-text); }
.mhc-hero-popular-label { color: var(--hc-text-3); }
/* sticky-note tones */
.mhc-note--yellow { background: var(--tone-yellow-light); color: var(--tone-yellow-xdark); }
.mhc-note--teal   { background: var(--tone-cyan-light);   color: var(--tone-cyan-xdark); }
.mhc-note--green  { background: var(--tone-green-light);  color: var(--tone-green-xdark); }
.mhc-note--purple { background: var(--tone-purple-light); color: var(--tone-purple-xdark); }

/* ---------- SECTION HEADINGS ---------- */
.mhc-section-eyebrow { color: var(--hc-text-3); }
.mhc-section-title { font-family: var(--font-display); color: var(--hc-text); }

/* ---------- TOPIC CARDS: tone grounds + spot illustrations ---------- */
.mhc-topic-card-link {
  background: var(--hc-card); border: 1px solid var(--hc-border);
  border-radius: 20px; padding: 26px; box-shadow: none;
}
.mhc-topic-card-link:hover {
  box-shadow: var(--hc-shadow-2); border-color: var(--hc-border); transform: translateY(-4px);
}
.mhc-topic-icon {
  width: 84px; height: 84px; border-radius: 16px; margin-bottom: 20px;
  background-repeat: no-repeat; background-position: center; background-size: 52px auto;
}
.mhc-topic-name { font-family: var(--font-display); font-weight: 700; color: var(--hc-text); }
.mhc-topic-desc { color: var(--hc-text-2); }
.mhc-topic-count { color: var(--hc-text-3); }
.mhc-topic-arrow { color: var(--hc-text); }
.mhc-topic-card:nth-child(6n+1) .mhc-topic-icon { background-color: var(--tone-yellow-light); background-image: url(/hc/theming_assets/01KXG4M6PGXTYRW4TM33TCHVR4); }
.mhc-topic-card:nth-child(6n+2) .mhc-topic-icon { background-color: var(--tone-cyan-light);   background-image: url(/hc/theming_assets/01KXG4M73CFT8NDACXT3A9HWDK); }
.mhc-topic-card:nth-child(6n+3) .mhc-topic-icon { background-color: var(--tone-green-light);  background-image: url(/hc/theming_assets/01KXG4M7RQZF2X0TPDCMXWZ6N2); }
.mhc-topic-card:nth-child(6n+4) .mhc-topic-icon { background-color: var(--tone-purple-light); background-image: url(/hc/theming_assets/01KXG4M76VM030M56NPAYYB5FR); }
.mhc-topic-card:nth-child(6n+5) .mhc-topic-icon { background-color: var(--tone-orange-light); background-image: url(/hc/theming_assets/01KXG4M7FZ2YKMJ6Q9G3HX1CWV); }
.mhc-topic-card:nth-child(6n+6) .mhc-topic-icon { background-color: var(--tone-blue-light);   background-image: url(/hc/theming_assets/01KXG4M61MDVSHS5BX7B2N7R1R); }

/* ---------- POPULAR ARTICLES ---------- */
.mhc-popular-link { background: var(--hc-card); border: 1px solid var(--hc-border); border-radius: 14px; box-shadow: none; }
.mhc-popular-link:hover { box-shadow: var(--hc-shadow-2); border-color: var(--hc-border); }
.mhc-popular-doc { background-color: var(--hc-chip); }
.mhc-popular-doc::after { background: var(--hc-text); }
.mhc-popular-title { color: var(--hc-text); font-family: var(--font-body); }
.mhc-popular-cat { color: var(--hc-text-3); }
.mhc-popular-arrow { color: var(--hc-text-3); }

/* ---------- CTA BAND ---------- */
.mhc-cta-inner { background: var(--miro-yellow); border-radius: 28px; }
.mhc-cta-title { font-family: var(--font-display); font-weight: 900; color: #050505; }
.mhc-cta-body { color: #1c1c1e; opacity: 1; }
.mhc-cta-btn { font-family: var(--font-display); font-weight: 500; border-radius: 11px; }
.mhc-cta-btn--primary { background: #050505; color: #fff; }
.mhc-cta-btn--primary:hover { background: #1c1c1e; }
.mhc-cta-btn--secondary { background: transparent; color: #050505; border: 1.5px solid rgba(5,5,5,.4); }
.mhc-cta-btn--secondary:hover { border-color: #050505; background: transparent; }
.mhc-cta-art {
  background: url(/hc/theming_assets/01KXG4M6E454CY42WER5E5BAYR) center/contain no-repeat;
  width: 230px; height: 190px; border-radius: 0; opacity: 1;
  transform: translateY(-50%) rotate(0);
}
@media (max-width: 760px) { .mhc-cta-art { display: none; } }

/* ---------- FOOTER (dark) ---------- */
.mhc-footer { background: var(--hc-foot); color: #fff; border-top: 1px solid rgba(255,255,255,.08); padding: 0; text-align: left; }
.mhc-footer-inner { max-width: 1320px; margin: 0 auto; padding: 56px 32px 40px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.mhc-footer-brand { max-width: 300px; }
.mhc-footer-lockup { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.mhc-footer-logo { width: 32px; height: 32px; border-radius: 7px; }
.mhc-footer-word { font-weight: 700; font-size: 15px; color: #fff; }
.mhc-footer-tagline { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 0; }
.mhc-footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.mhc-footer-col-head { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; }
.mhc-footer-col-links { display: flex; flex-direction: column; gap: 11px; }
.mhc-footer-col-links a { font-size: 14.5px; color: rgba(255,255,255,.72); text-decoration: none; }
.mhc-footer-col-links a:hover { color: #fff; }
.mhc-footer-bottom { max-width: 1320px; margin: 0 auto; padding: 20px 32px 40px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.5); }
.mhc-footer-legal { display: flex; gap: 24px; }
.mhc-footer-legal a, .mhc-footer-bottom a { color: rgba(255,255,255,.5); text-decoration: none; }
.mhc-footer-legal a:hover { color: #fff; }
.mhc-footer .nav-wrapper { display: none; }

/* ---------- BREADCRUMB STRIP (article/category/section) ---------- */
.sub-nav { background: transparent; border: 0; }
.sub-nav .breadcrumbs { font-size: 14px; color: var(--hc-text-3); }
.sub-nav .breadcrumbs a { color: var(--hc-text-2); text-decoration: none; }
.sub-nav .breadcrumbs a:hover { color: var(--hc-text); }
/* Let native breadcrumbs wrap too (base theme truncates li at 450px w/ ellipsis). */
.sub-nav .breadcrumbs li { max-width: none; overflow: visible; text-overflow: clip; }

/* ---------- ARTICLE: 3-column layout ---------- */
@media (min-width: 1024px) {
  .article-container { align-items: flex-start; gap: 0; }
  .article { flex: 1 1 auto; min-width: 0; padding-left: 40px !important; }
  .article-toc { flex: 0 0 260px; padding-left: 40px; position: sticky; top: 92px; align-self: flex-start; }
}
.article-sidebar, .mhc-sidebar { border-right: 1px solid var(--hc-border); }

/* article header stack */
.article-header { display: flex; flex-direction: column; align-items: flex-start; margin-top: 0; }
.article-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--tone-yellow-light); color: var(--tone-yellow-xdark);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; margin-bottom: 16px;
}
.article-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; color: var(--hc-text); line-height: 1.08; }
.article-author { margin: 14px 0 0; display: flex; align-items: center; gap: 16px; width: 100%; flex-wrap: wrap; }
.article-author .meta-group { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.article-author .meta-group .meta-data { color: var(--hc-text-3); font-size: 14px; }
.article-author .meta-group .meta-data::after { content: none; }

/* article body typography */
.article-body { color: var(--hc-text-2); font-size: 17px; line-height: 1.65; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { font-family: var(--font-display); color: var(--hc-text); letter-spacing: -0.02em; line-height: 1.2; }
.article-body h2 { font-size: 26px; font-weight: 700; margin: 44px 0 16px; }
.article-body h3 { font-size: 21px; font-weight: 700; margin: 32px 0 12px; }
/* Offset anchor jumps (TOC clicks / #hash links) so the target heading lands
   just below the sticky 68px header instead of scrolling behind it. */
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5, .article-body h6 { scroll-margin-top: 85px; }
/* Heading anchor links (injected by article_page.hbs): a "#" that appears on
   heading hover and links to the section. */
.mhc-heading-anchor {
  margin-left: .4em; opacity: 0;
  color: var(--hc-text-3); font-weight: 400; text-decoration: none;
  transition: opacity .12s ease;
}
.article-body h2:hover .mhc-heading-anchor,
.article-body h3:hover .mhc-heading-anchor,
.article-body h4:hover .mhc-heading-anchor,
.article-body h5:hover .mhc-heading-anchor,
.article-body h6:hover .mhc-heading-anchor,
.mhc-heading-anchor:focus { opacity: 1; }
.mhc-heading-anchor:hover { color: var(--miro-violet); text-decoration: none; }
.article-body p { margin: 0 0 20px; }
.article-body a { color: var(--miro-violet); text-decoration: none; } /* #867AFF, matches Docusaurus */
.article-body a:hover { text-decoration: underline; }
html[data-mhc-theme="dark"] .article-body a { color: #A89CFF; }
.article-body strong, .article-body b { color: var(--hc-text); font-weight: 600; }
.article-body ul, .article-body ol { margin: 0 0 24px; padding-left: 26px; }
.article-body li { margin: 0 0 10px; }
.article-body kbd, .article-body code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--hc-chip); border: 1px solid var(--hc-border-2);
  border-radius: 5px; padding: 1px 6px; color: var(--hc-text);
}
.article-body pre { background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: 12px; padding: 16px 18px; overflow: auto; }
.article-body pre code { background: none; border: 0; padding: 0; }
.article-body blockquote {
  margin: 0 0 28px; padding: 18px 20px;
  background: var(--ai-bg-12); border: 1px solid rgba(134,122,255,.3);
  border-radius: 14px; color: var(--hc-text-2);
}
.article-body img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--hc-border); }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
/* cell grid + header row: see ARTICLE TABLES (ported from live) at the end of this file */

/* right-hand TOC + support card */
.article-toc .table-of-contents { flex: none; }
.table-of-contents__title { color: var(--hc-text-3); }
.table-of-contents__wrapper { border-left: 2px solid var(--hc-border); padding-left: 16px; }
.table-of-contents__list a { color: var(--hc-text-2); }
.table-of-contents__list a:hover { color: var(--hc-text); }
/* Active TOC entry mirrors the left-hand nav current item: yellow left accent,
   chip background, bold primary text — identical in light and dark. */
.table-of-contents__list a.is-active,
.article-toc .table-of-contents__list a.is-active,
.article-toc nav a.is-active {
  color: var(--hc-text); font-weight: 600;
  border-left: 3px solid var(--mhc-yellow-hero);
  background: var(--hc-chip);
  padding-left: 10px; border-radius: 8px;
}
.article-support { background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: 16px; padding: 20px; margin-top: 28px; }
.article-support-title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--hc-text); margin-bottom: 6px; }
.article-support-body { font-size: 13.5px; line-height: 1.5; color: var(--hc-text-2); margin: 0 0 14px; }
.article-support-btn { display: block; text-align: center; background: var(--miro-black); color: #fff; border-radius: 10px; padding: 11px; font-family: var(--font-display); font-weight: 500; font-size: 14.5px; text-decoration: none; }
.article-support-btn:hover { background: #1c1c1e; color: #fff; }

/* helpful votes → outlined pills */
.article-votes { border: 1px solid var(--hc-border); border-radius: 16px; padding: 24px 28px; background: var(--hc-surface); margin-top: 40px; }
.article-votes-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--hc-text); margin-bottom: 14px; }
.article-votes-btns-wrap { display: flex; gap: 10px; justify-content: center; }
.article-votes-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; color: var(--hc-text);
  border: 1.5px solid var(--hc-border-2); border-radius: 11px;
  padding: 11px 20px; font-family: var(--font-display); font-weight: 500; font-size: 15px;
}
.article-votes-btn:hover { border-color: var(--hc-text-3); }
.article-votes-btn-yes.active { background: var(--tone-green); color: var(--tone-green-xdark); border-color: var(--tone-green-dark); }
.article-votes-btn-no.active { background: var(--tone-red); color: #fff; border-color: var(--tone-red-dark); }
.article-votes-button { background: var(--miro-black); color: #fff; border: 0; border-radius: 10px; padding: 11px 18px; font-family: var(--font-display); font-weight: 500; cursor: pointer; }

/* related / recent article lists → cards */
.article-relatives .recent-articles-title, .article-relatives h2, .article-relatives h3 { font-family: var(--font-display); color: var(--hc-text); font-weight: 700; letter-spacing: -0.02em; margin: 48px 0 16px; }
.article-relatives ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .article-relatives ul { grid-template-columns: 1fr; } }
.article-relatives li { margin: 0; }
.article-relatives li a { display: block; padding: 16px 18px; border: 1px solid var(--hc-border); border-radius: 13px; background: var(--hc-card); color: var(--hc-text); text-decoration: none; font-weight: 500; }
.article-relatives li a:hover { box-shadow: var(--hc-shadow-2); }
/* Only "Related articles" remains (recently-viewed removed) — let it span the
   full content width so the card grid fills the row instead of a 50% column. */
.article-relatives { display: block; border-top: 0; padding: 0; }
.article-relatives > * { flex: none; min-width: 0; padding-right: 0; }

/* ---------- GENERIC PAGE CHROME (category/section/search/community/requests) ---------- */
.page-header h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--hc-text); }
.page-header-description { color: var(--hc-text-2); }
.section-tree-title a, .article-list-link { color: var(--hc-text); text-decoration: none; }
/* The base theme colors these links near-black via `.article-list-item a`
   (higher specificity), which is unreadable in dark mode — restate here. */
.article-list-item a, .article-list-link { color: var(--hc-text); }
.article-list-item a:hover, .article-list-link:hover { color: var(--miro-violet); }
.article-list-item { border-bottom: 1px solid var(--hc-border); }
.icon-star::before { color: var(--hc-text-3); }

/* Category/section listings: the base theme right-aligns the content column
   (justify-content:flex-end + 80% width), leaving it misaligned with the
   breadcrumbs. Make it a full-width block flush with the breadcrumb strip. */
.mhc-doc-inner .section-container { display: block; }
.mhc-doc-inner .section-content { flex: 1 1 auto; }

/* search results */
.search-results-list .search-result-link, .search-result-title a { color: var(--hc-text); text-decoration: none; }
.search-result-link:hover, .search-result-title a:hover { color: var(--miro-blue); }
.search-result { border-bottom: 1px solid var(--hc-border); }
.search-result-votes, .search-result-meta-data, .search-results-count { color: var(--hc-text-3); }

/* buttons + form controls */
.button, button.button, a.button, input.button, [type="submit"].button {
  background: var(--miro-black); color: #fff; border: 0; border-radius: 10px;
  font-family: var(--font-display); font-weight: 500;
}
.button:hover, button.button:hover, a.button:hover { background: #1c1c1e; color: #fff; }
.button-secondary, .button.secondary { background: transparent; color: var(--hc-text); border: 1.5px solid var(--hc-border-2); }
input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], textarea, select, .form-field input, .form-field textarea, .form-field select {
  background: var(--hc-input); color: var(--hc-text);
  border: 1.5px solid var(--hc-border-2); border-radius: 10px;
}
input::placeholder, textarea::placeholder { color: var(--hc-text-3); }
label, .form-field label { color: var(--hc-text-2); }

/* pagination */
.pagination a, .pagination span { color: var(--hc-text-2); }
.pagination .current, .pagination [aria-current="true"] { color: var(--hc-text); font-weight: 600; }

/* dividers used across pages */
.container-divider { border-color: var(--hc-border); background: var(--hc-border); }

/* dark-mode: keep the JS-built left nav / TOC readable (they inherit tokens now) */
html[data-mhc-theme="dark"] .mhc-topic-icon { filter: none; }

/* hero canvas = dot-grid, token-driven so dark mode flips too */
.mhc-hero {
  background-color: var(--hc-canvas);
  background-image: radial-gradient(var(--hc-dot) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--hc-border);
}
/* Algolia hero search box → redesign pill, token-driven */
.mhc-hero-search .aa-Form {
  background: var(--hc-input);
  border: 1.5px solid var(--hc-border-2);
  border-radius: 16px;
  box-shadow: var(--hc-shadow-2);
}
.mhc-hero-search .aa-Input, .mhc-hero-search .aa-InputWrapper input { color: var(--hc-text); }
.mhc-hero-search .aa-SubmitButton, .mhc-hero-search .aa-Label svg { color: var(--hc-text-3); }
/* Algolia autocomplete dropdown panel in dark mode */
.aa-Panel { background: var(--hc-card); color: var(--hc-text); border: 1px solid var(--hc-border); }
.algolia-suggestion-title { color: var(--hc-text); }
.algolia-suggestion-snippet { color: var(--hc-text-2); }

/* Search modal (borrowed #algolia-search-box) — theme the Algolia classic form
   so the search pill isn't white in dark mode (the CDN theme hard-codes #fff). */
.mhc-search-overlay .aa-Form {
  background: var(--hc-input);
  border: 1.5px solid var(--hc-border-2);
}
.mhc-search-overlay .aa-Input,
.mhc-search-overlay .aa-InputWrapper input { color: var(--hc-text); }
.mhc-search-overlay .aa-SubmitButton,
.mhc-search-overlay .aa-SubmitButton svg,
.mhc-search-overlay .aa-Label svg { color: var(--hc-text-3); }
.mhc-search-overlay .aa-InputWrapperPrefix,
.mhc-search-overlay .aa-InputWrapperSuffix { background: transparent; }

/* =====================================================================
   SEARCH — body-level modal overlay with blurred backdrop
   (matches the miro-help-center reference: fixed, dimmed, blurred).
   The overlay lives on <body> so it escapes the sticky header's
   backdrop-filter stacking context that previously hid the search box.
   ===================================================================== */
.mhc-search-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; padding: 12vh 16px 24px; overflow-y: auto;
  animation: mhcOverlayIn .15s ease-out;
}
.mhc-search-overlay.mhc-search-overlay--open { display: block; }
.mhc-search-overlay-panel { position: relative; max-width: 640px; margin: 0 auto; }
/* ESC affordance (matches the reference modal); replaces Algolia's × */
.mhc-search-esc {
  position: absolute; top: 40px; right: 24px; transform: translateY(-50%);
  z-index: 3; cursor: pointer;
  background: var(--hc-chip); color: var(--hc-text-3);
  border: 1px solid var(--hc-border); border-radius: 7px;
  font: 600 11px/1 var(--font-body); letter-spacing: .06em;
  padding: 6px 8px;
}
.mhc-search-esc:hover { color: var(--hc-text); }
.mhc-search-overlay .aa-ClearButton, .mhc-search-overlay .aa-DetachedCancelButton { display: none !important; }
/* the borrowed search box becomes the modal card, filling the panel width
   (.mhc-search-overlay #id beats the base #algolia-search-box max-width:550) */
.mhc-search-overlay #algolia-search-box.mhc-search-open,
.mhc-search-overlay #algolia-search-box {
  position: static; transform: none; width: 100%; max-width: 100%; margin: 0;
}
body.mhc-search-locked { overflow: hidden; }
@keyframes mhcOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* Results panel stays a child of #algolia-search-box (constrained to the card
   width) — not full-viewport-wide, and it layers within the modal overlay. */
.mhc-search-overlay .aa-Panel { position: static; box-shadow: none; border: 0; background: transparent; margin-top: 6px; }

/* Kill the browser autofill yellow on all inputs (incl. the search field). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--hc-input) inset !important;
  -webkit-text-fill-color: var(--hc-text) !important;
  caret-color: var(--hc-text);
}

/* Hero search pill — a trigger that opens the search modal */
.mhc-hero-search-trigger {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 620px; margin: 0 auto 18px;
  background: var(--hc-input); border: 1.5px solid var(--hc-border-2);
  border-radius: 16px; padding: 6px 6px 6px 20px;
  box-shadow: var(--hc-shadow-2); cursor: pointer; text-align: left;
  transition: border-color .16s ease;
}
.mhc-hero-search-trigger:hover { border-color: var(--hc-text-3); }
.mhc-hero-search-trigger-ico { color: var(--hc-text-3); flex: none; }
.mhc-hero-search-trigger-ph { flex: 1; color: var(--hc-text-3); font-size: 16.5px; padding: 13px 0; }
.mhc-hero-search-trigger-go {
  flex: none; background: var(--miro-black); color: #fff;
  border-radius: 11px; padding: 13px 24px;
  font-family: var(--font-display); font-weight: 500; font-size: 15.5px;
}
@media (max-width: 560px) { .mhc-hero-search-trigger-go { display: none; } }

/* Left nav sticky (article + section pages).
   Containers must not stretch children, or sticky has no room to travel. */
@media (min-width: 1024px) {
  .article-container, .mhc-layout { align-items: flex-start; }
  .article-sidebar, .mhc-sidebar {
    position: sticky; top: 88px; align-self: flex-start;
    max-height: calc(100vh - 104px); overflow-y: auto;
  }
}

/* =====================================================================
   HERO STICKY NOTES — gentle float (reference: hcfloat keyframes)
   ===================================================================== */
.mhc-note { animation: hcfloat 7s ease-in-out infinite; will-change: transform; }
.mhc-note--1 { --rot: rotate(-6deg); animation-duration: 6s;   animation-delay: 0s; }
.mhc-note--2 { --rot: rotate(4deg);  animation-duration: 7.5s; animation-delay: .6s; }
.mhc-note--3 { --rot: rotate(6deg);  animation-duration: 6.8s; animation-delay: .3s; }
.mhc-note--4 { --rot: rotate(-5deg); animation-duration: 8s;   animation-delay: .9s; }
@keyframes hcfloat {
  0%, 100% { transform: var(--rot, none) translateY(0); }
  50%      { transform: var(--rot, none) translateY(-9px); }
}
/* Cursors drift gently too, slightly out of phase with the notes */
.mhc-cursor { animation: hcfloat 7s ease-in-out infinite; will-change: transform; }
.mhc-cursor--priya { animation-duration: 6.4s; animation-delay: .2s; }
.mhc-cursor--marco { animation-duration: 7.2s; animation-delay: .8s; }
.mhc-cursor--you   { animation-duration: 6.9s; animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .mhc-note, .mhc-cursor { animation: none; }
}

/* hero "Popular:" chips row (server- or JS-filled) */
.mhc-hero-popular { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.mhc-hero-popular-links { display: contents; }
.mhc-hero-popular a { margin: 0; }

/* Category page: loader while redirecting to the first article */
[hidden] { display: none !important; }
.mhc-cat-loader {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 60vh; color: var(--hc-text-2); font-size: 15px; text-align: center;
}
.mhc-cat-loading-text { color: var(--hc-text-2); font-weight: 500; letter-spacing: .01em; }
.mhc-cat-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--hc-border-2); border-top-color: var(--miro-yellow);
  animation: mhcSpin .7s linear infinite;
}
@keyframes mhcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mhc-cat-spinner { animation: none; } }

/* =====================================================================
   ROUND-4 FIXES
   ===================================================================== */

/* Header: full-width sticky bar (base .header caps it at 1160px/centered) */
.mhc-header { max-width: none; width: auto; margin: 0; }

/* Search modal: results span the full modal width (drop the 550px inner cap) */
.mhc-search-overlay .aa-PanelLayout {
  max-width: none; width: 100%; margin: 0;
  background: transparent; box-shadow: none; border-radius: 0;
}
.mhc-search-overlay .aa-Panel,
.mhc-search-overlay .aa-Source,
.mhc-search-overlay .aa-List { width: 100%; }
.mhc-search-overlay .aa-PanelSection--left,
.mhc-search-overlay .aa-PanelSection--right { width: 100%; }

/* Left nav: remove the stray top delimiter/space where the category name was */
#mhc-sidebar-tree > .mhc-nav-group:first-child,
.mhc-sidebar-tree > .mhc-nav-group:first-child {
  border-top: 0; margin-top: 0; padding-top: 0;
}
/* Zero the first item's own top padding too, so its text lines up with the
   breadcrumb row rather than sitting lower. */
#mhc-sidebar-tree > .mhc-nav-group:first-child > .mhc-nav-group-title,
.mhc-sidebar-tree > .mhc-nav-group:first-child > .mhc-nav-group-title,
#mhc-sidebar-tree > .mhc-nav-flat:first-child > .mhc-nav-item:first-child > .mhc-nav-link,
.mhc-sidebar-tree > .mhc-nav-flat:first-child > .mhc-nav-item:first-child > .mhc-nav-link {
  padding-top: 0;
}

/* Right TOC: readable links in light AND dark (scoped high enough to beat the
   global `a { color: <link_color> }` rule that was tinting them blue) */
.article-toc .table-of-contents__list a,
.article-toc nav a { color: var(--hc-text-2); }
.article-toc .table-of-contents__list a:hover,
.article-toc nav a:hover { color: var(--hc-text); }
.article-toc .table-of-contents__title { color: var(--hc-text-3); }
.article-toc .table-of-contents__wrapper { border-left-color: var(--hc-border); }
.article-toc .table-of-contents__list a:visited { color: var(--hc-text-2); }

/* Prevent wide article content from spilling under the right TOC column */
.article { min-width: 0; }
.article-body { overflow-wrap: break-word; word-wrap: break-word; }
.article-body pre { display: block; max-width: 100%; overflow-x: auto; }
/* Wide tables only (4+ columns) scroll inside the reading column, so they never run under the
   right TOC; narrower tables stay real tables and fill the column (see ARTICLE TABLES below). */
.article-body table:has(tr > *:nth-child(4)) { display: block; max-width: 100%; overflow-x: auto; }
.article-body img { max-width: 100%; height: auto; }
/* Embedded videos (YouTube/Vimeo/Loom iframes + <video>) fill the content
   column and stay 16:9 responsive instead of rendering at their fixed
   attribute width (which looked small in the widened article column). */
.article-body iframe,
.article-body video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  margin: 24px 0;
}

/* =====================================================================
   FULL-BLEED DOC LAYOUT (article + section pages) — replicates the
   Docusaurus help center: sidebar flush to the viewport edge, content in
   a wide centered column, spanning the full width (no 1160px cap).
   ===================================================================== */
.mhc-doc { display: block; }
.mhc-doc-inner { padding: 0 20px 60px; }
.mhc-doc > .article-sidebar,
.mhc-doc > .mhc-sidebar { padding: 0 20px; }
@media (min-width: 1024px) {
  .mhc-doc { display: flex; align-items: flex-start; width: 100%; }

  /* Left sidebar: flush to the left edge, sticky, own scroll, divider */
  .mhc-doc > .article-sidebar,
  .mhc-doc > .mhc-sidebar {
    flex: 0 0 300px; min-width: 0;
    position: sticky; top: 68px;
    max-height: calc(100vh - 68px); overflow-y: auto;
    border-right: 1px solid var(--hc-border);
    /* padding-top matches the main column's breadcrumb offset (inner 8 + sub-nav
       12) so the first nav item lines up with the breadcrumbs. */
    padding: 20px 20px 40px 32px; margin: 0;
  }

  /* Main area fills the rest; inner column is centered + width-capped */
  .mhc-doc-main { flex: 1 1 auto; min-width: 0; }
  /* 1368 = article 958 + gap 64 + TOC 250 + 2×48 padding, so the reading column
     tops out at 958px (Docusaurus width) with the TOC on the right. */
  .mhc-doc-inner { max-width: 1368px; margin: 0 auto; padding: 8px 48px 96px; }

  /* Body row: article + right TOC */
  .mhc-doc-inner .article-container { display: flex; align-items: flex-start; gap: 64px; margin: 0; }
  /* The base theme caps .article at max-width:66% (legacy 3-column grid). Here we
     cap the reading column at 958px (matches the Docusaurus content width); the
     right TOC keeps its 250px. `padding: 0` (not just padding-left) kills the base
     `.article{padding:0 30px}` right padding that skewed the margins. */
  .mhc-doc-inner .article { flex: 1 1 auto; min-width: 0; max-width: 958px; padding: 0 !important; border-right: 0; }
  .mhc-doc-inner .article-toc { flex: 0 0 250px; position: sticky; top: 92px; padding-left: 0; align-self: flex-start; }
  /* Keep the breadcrumb within the article column so long trails wrap instead
     of running across the right-hand TOC (gap 64 + TOC 250 = 314). */
  .mhc-doc-inner .sub-nav { max-width: calc(100% - 314px); }
}
/* breadcrumb strip inside the centered column */
.mhc-doc-inner .sub-nav { margin: 12px 0 22px; padding: 0; }

/* =====================================================================
   ROUND-6: TOP NAV + BREADCRUMBS (match the Docusaurus reference)
   ===================================================================== */

/* Full-width header content (logo flush-left, controls flush-right) */
.mhc-header-inner { max-width: none; width: auto; margin: 0; padding: 0 40px; }

/* Logo lockup: yellow mark + "HELP CENTER" (uppercase, no divider) */
.mhc-logo-divider { display: none; }
.mhc-logo .mhc-logo-word {
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 13px; font-weight: 700; color: var(--hc-text);
}

/* Nav links: dark text; hover/active = Miro violet underline (not yellow) */
.mhc-topnav-link { color: var(--hc-text); font-weight: 500; border-bottom: 2px solid transparent; padding: 6px 0; transition: color .15s ease, border-color .15s ease; }
.mhc-topnav-link::after { content: none !important; }
/* Hover/active show a violet line below the item (border, not text-decoration). */
.mhc-topnav-link:hover { color: var(--miro-violet); border-bottom-color: var(--miro-violet); }
.mhc-topnav-current { color: var(--miro-violet); border-bottom-color: var(--miro-violet); font-weight: 600; }

/* Docusaurus-style: nav + landing-page links change color on hover, never
   underline (the base theme's `a:hover{text-decoration:underline}` otherwise
   underlines them). Article-body links keep their hover underline. */
.mhc-logo a:hover,
.mhc-topnav-link:hover,
.mhc-nav-link:hover,
.mhc-topic-card-link:hover,
.mhc-popular-link:hover,
.mhc-hero-popular a:hover,
.mhc-cta-btn:hover,
.mhc-footer-col-links a:hover,
.mhc-footer-legal a:hover { text-decoration: none; }

/* Theme toggle: borderless contrast icon */
.mhc-theme-toggle {
  width: 40px; height: 40px; padding: 0; border: 0; background: transparent;
  color: var(--hc-text); border-radius: 8px; display: grid; place-items: center; cursor: pointer;
}
.mhc-theme-toggle:hover { background: var(--hc-chip); }
.mhc-theme-ico { display: block; }

/* Language selector reads as icon + label */
.mhc-lang .dropdown-toggle { color: var(--hc-text-2); }

/* Signed-in user / sign-in menu — kept in the header (right side) */
.mhc-user { display: flex; align-items: center; }
/* Auth text follows the theme (base theme hard-codes blue #3859FF); tokens flip
   for dark mode automatically. Avatar and name get a little breathing room. */
.mhc-user a,
.mhc-user .user-info > [role="button"],
.mhc-user .user-info > [role="button"]:hover,
.mhc-user .user-info > [role="button"]:focus { color: var(--hc-text); }
.mhc-user .user-info > [role="button"] { display: inline-flex; align-items: center; gap: 8px; }
.mhc-user .user-info > [role="button"]::after { color: var(--hc-text-3); }
.mhc-user .icon-menu { color: var(--hc-text); }

/* The <header> element carries the base theme's `.header{display:flex}`, which
   made .mhc-header-inner a non-growing flex item (content-width) — so the
   controls stopped mid-bar. Make the header a block so the inner is a
   full-width flex row (like Docusaurus .navbar__inner), then push the controls
   group to the right. */
.mhc-header { display: block; }
.mhc-header-inner { display: flex; align-items: center; width: 100%; max-width: none; margin: 0; padding: 0 40px; }
.mhc-topnav { flex: 0 1 auto; }
.mhc-header-actions { margin-left: auto; flex: 0 0 auto; }

/* ---------- Breadcrumbs: home icon → links (violet) → current (chip) ---------- */
.mhc-crumbs { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 14px; line-height: 1.5; }
.mhc-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
/* Long trails wrap to a second line; the (usually longest) current crumb may
   break within itself rather than overflow the column. */
.mhc-crumb-link { white-space: nowrap; }
.mhc-crumb-current { white-space: normal; overflow-wrap: anywhere; }
.mhc-crumb-home { display: inline-flex; align-items: center; color: var(--miro-violet); }
.mhc-crumb-link { color: var(--miro-violet); text-decoration: none; }
.mhc-crumb-link:hover { text-decoration: underline; }
.mhc-crumb-sep { color: var(--hc-text-3); }
.mhc-crumb-current { background: var(--hc-chip); color: var(--hc-text); padding: 3px 10px; border-radius: 8px; font-weight: 500; }
html[data-mhc-theme="dark"] .mhc-crumb-home,
html[data-mhc-theme="dark"] .mhc-crumb-link { color: #A89CFF; }

/* =====================================================================
   "COPY PAGE" + LLM ACTIONS DROPDOWN (ported from miro-help-center)
   Token-driven, so it themes itself in light + dark automatically.
   Positioned top-right of the article header on desktop.
   ===================================================================== */
/* Lives in the article meta row (read time / "Updated …"), pushed to the right
   and vertically centered with it (see .article-author flex row). */
.llm-actions { margin-left: auto; }
.llm-actions-wrapper { position: relative; display: inline-block; font-family: var(--font-body); }
.llm-actions-btn-group {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--hc-border); border-radius: 10px;
  background: var(--hc-card); overflow: hidden; transition: border-color .15s ease;
}
.llm-actions-btn-group:hover { border-color: var(--hc-border-2); }
.llm-actions-btn-main, .llm-actions-btn-toggle {
  display: inline-flex; align-items: center; background: none; border: none;
  color: var(--hc-text); font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .1s ease; white-space: nowrap; line-height: 1.4;
}
.llm-actions-btn-main { gap: 6px; padding: 7px 10px 7px 12px; }
.llm-actions-btn-toggle { padding: 7px 8px; border-left: 1px solid var(--hc-border); }
.llm-actions-btn-main:hover, .llm-actions-btn-toggle:hover { background: var(--hc-surface); }
.llm-icon { width: 16px; height: 16px; flex-shrink: 0; }
.llm-chevron { width: 14px; height: 14px; flex-shrink: 0; opacity: .45; transition: transform .15s ease; }
.llm-actions-wrapper.is-open .llm-chevron { transform: rotate(180deg); }
.llm-actions-menu {
  position: absolute; top: calc(100% + 6px); right: 0; width: 320px;
  background: var(--hc-card); border: 1px solid var(--hc-border); border-radius: 14px;
  box-shadow: var(--hc-shadow-2); padding: 6px; z-index: 1000;
  animation: llm-menu-enter .12s ease-out;
}
.llm-actions-wrapper:not(.is-open) .llm-actions-menu { display: none; }
@keyframes llm-menu-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.llm-actions-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px;
  border: none; background: none; border-radius: 10px; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--hc-text); transition: background .1s ease;
}
.llm-actions-item:hover { background: var(--hc-surface); }
.llm-actions-item-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--hc-text-3); }
.llm-actions-item-icon .llm-icon { width: 20px; height: 20px; }
.llm-actions-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.llm-actions-item-title { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--hc-text); line-height: 1.35; }
.llm-external { width: 10px; height: 10px; margin-left: 4px; vertical-align: middle; opacity: .4; }
.llm-actions-item-desc { font-size: 12px; color: var(--hc-text-3); line-height: 1.35; font-weight: 400; }
@media (max-width: 768px) {
  .llm-actions-btn-label { display: none; }
  .llm-actions-menu { width: min(320px, calc(100vw - 2rem)); }
}

/* Page-navigation progress bar (see script.js) — feedback during full reloads. */
.mhc-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000;
  background: var(--miro-yellow);
  transform: scaleX(0); transform-origin: left;
  opacity: 0; pointer-events: none;
}
.mhc-progress--active { opacity: 1; transform: scaleX(.92); transition: transform 6s cubic-bezier(.12,.78,.28,1); }
.mhc-progress--done { opacity: 0; transform: scaleX(1); transition: transform .2s ease, opacity .3s ease .05s; }
@media (prefers-reduced-motion: reduce) { .mhc-progress { display: none; } }
.mhc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* =====================================================================
   PRODUCT ANNOUNCEMENTS — release badges (ported from Current Live)
   Used on the announcements category cards (.pa-badges) and the
   announcement article header (.announcement-article-labels).
   ===================================================================== */
.pa-badges,
.announcement-article-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pa-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
}
/* Release status */
.pa-badge--coming-soon { color: #2f5bdb; border-color: #b7ccff; }
.pa-badge--launched    { color: #2d7a34; border-color: #b9e2be; }
.pa-badge--rolling-out { color: #5c667a; border-color: #d5dae3; }
/* Release phase */
.pa-badge--beta        { color: #7a52d1; border-color: #d8c6ff; }
.pa-badge--ga          { color: #42526e; border-color: #cbd2e1; }
/* Availability / Miro plan */
.pa-badge--enterprise  { color: #5c667a; border-color: #d5dae3; }
.pa-badge--add-on      { color: #9a6a00; border-color: #f2d39b; }

/* Hide the old single status label if legacy markup ever appears */
.messageCard .label { display: none; }

/* Dark mode: faint fill so the colored text stays legible on the article page */
html[data-mhc-theme="dark"] .pa-badge { background: rgba(255, 255, 255, 0.06); }
html[data-mhc-theme="dark"] .pa-badge--ga,
html[data-mhc-theme="dark"] .pa-badge--enterprise,
html[data-mhc-theme="dark"] .pa-badge--rolling-out { color: #c6c6cb; border-color: rgba(255,255,255,0.2); }

@media (max-width: 768px) {
  .pa-badges,
  .announcement-article-labels { gap: 6px; margin-top: 8px; }
  .pa-badge { font-size: 11px; padding: 4px 8px; }
}

/* =====================================================================
   v2.0.25 — DESIGN REFRESH (Claude Design "Miro Help Center.dc.html")
   Two-row header with wordmark · glow hero with collaborator pills and
   Apris headline · borderless topic tiles with 3D icons.
   Appended last so it wins over the earlier rounds above.
   ===================================================================== */

@font-face { font-family: "Apris"; src: url(/hc/theming_assets/01M5M170YWXKCMDZ8K21XE9RF7) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- HEADER: row 1 = brand + actions, row 2 = category nav ---------- */
/* height:auto — the base .header{height:71px} clipped the nav row onto the hero */
.mhc-header { height: auto; border-bottom: 1px solid var(--hc-border); }
.mhc-header-inner { height: 68px; justify-content: space-between; gap: 28px; }
.mhc-logo .mhc-logo-lockup { gap: 16px; }
/* scoped under .mhc-logo to beat the earlier `.mhc-logo img { display: block }` */
.mhc-logo .mhc-logo-wordmark { height: 36px; max-height: none; width: auto; display: block; }
.mhc-logo .mhc-logo-wordmark--dark { display: none; }
html[data-mhc-theme="dark"] .mhc-logo .mhc-logo-wordmark--light { display: none; }
html[data-mhc-theme="dark"] .mhc-logo .mhc-logo-wordmark--dark { display: block; }
.mhc-logo .mhc-logo-divider { display: inline-block; width: 1px; height: 28px; background: var(--hc-border-2); }
.mhc-logo .mhc-logo-word { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--hc-text); }

.mhc-header-actions { gap: 28px; }
.mhc-theme-toggle {
  width: 38px; height: 38px; border: 1px solid var(--hc-border); border-radius: 999px;
  background: transparent; color: var(--hc-text);
}
.mhc-theme-toggle:hover { background: var(--hc-chip); }
.mhc-lang .dropdown-toggle { font-size: 16px; font-weight: 400; color: var(--hc-text); }
.mhc-lang-globe { display: none; }
.mhc-user a[data-auth-action="signin"],
.mhc-user .sign-in,
.mhc-user a.sign-in { font-size: 16px; color: var(--hc-signin); }
/* The hero carries the search on the home page; keep the compact header
   search everywhere else. */
body:has(.mhc-hero) .mhc-header-search-btn { display: none; }

.mhc-header-navrow { border-top: 1px solid var(--hc-border); }
.mhc-header-navrow .mhc-topnav {
  height: 48px; padding: 0 40px; gap: 32px;
  display: flex; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.mhc-header-navrow .mhc-topnav-link { font-size: 14.5px; color: var(--hc-text-2); white-space: nowrap; }
.mhc-header-navrow .mhc-topnav-current,
.mhc-header-navrow .mhc-topnav-link:hover { color: var(--miro-violet); }

/* sticky offsets follow the taller header */
@media (min-width: 1024px) {
  .mhc-doc > .article-sidebar,
  .mhc-doc > .mhc-sidebar { top: var(--mhc-header-h); max-height: calc(100vh - var(--mhc-header-h)); }
  .mhc-doc-inner .article-toc,
  .article-toc { top: calc(var(--mhc-header-h) + 24px); }
  .article-sidebar, .mhc-sidebar { top: calc(var(--mhc-header-h) + 20px); }
}
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5, .article-body h6 { scroll-margin-top: calc(var(--mhc-header-h) + 20px); }

@media (max-width: 768px) {
  .mhc-header-inner { padding: 0 16px; gap: 12px; }
  .mhc-header-actions { gap: 12px; }
  .mhc-logo .mhc-logo-wordmark { height: 28px; }
  .mhc-logo .mhc-logo-divider, .mhc-logo .mhc-logo-word { display: none; }
  .mhc-lang .dropdown-toggle { font-size: 14px; }
  .mhc-header-navrow .mhc-topnav { padding: 0 16px; gap: 24px; }
}

/* ---------- HERO: glow + dot grid ---------- */
.mhc-hero {
  padding: 0; border-bottom: 0; text-align: center;
  background-color: var(--hc-hero-base);
  background-image:
    radial-gradient(var(--hc-g1-shape), var(--hc-glow-1) 0%, var(--hc-glow-2) var(--hc-g1-mid), transparent 100%),
    radial-gradient(var(--hc-g2-shape), var(--hc-glow-3) 0%, transparent 72%),
    radial-gradient(var(--hc-hero-dot) 1.3px, transparent 1.3px);
  background-size: 100% 100%, 100% 100%, 18px 18px;
}
.mhc-hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 118px 24px 128px; }
.mhc-hero-title {
  font-family: "Apris", Georgia, serif; font-weight: 400;
  font-size: clamp(40px, 5.4vw, 68px); line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 30px; color: var(--hc-text); text-wrap: balance;
}

/* search pill (opens the shared Algolia modal) */
.mhc-hero-search-trigger {
  gap: 16px; max-width: 640px; height: 64px; margin: 0 auto;
  padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--hc-input);
  box-shadow: 0 0 0 1px var(--hc-search-ring), 0 2px 14px rgba(5,5,5,.06);
}
.mhc-hero-search-trigger:hover { box-shadow: 0 0 0 1px var(--hc-border-2), 0 4px 20px rgba(5,5,5,.10); }
.mhc-hero-search-trigger-ico { color: var(--hc-text); }
.mhc-hero-search-trigger-ph { font-size: 18px; padding: 0; }

/* ---------- HERO: collaborator pills in the gutters ---------- */
.mhc-hero-gutter { position: absolute; top: 0; bottom: 0; width: calc(50% - 330px); }
.mhc-hero-gutter--left { left: 0; }
.mhc-hero-gutter--right { right: 0; }
@media (max-width: 1179px) { .mhc-hero-gutter { display: none; } }

/* Drift uses transform (sub-pixel smooth; margins stepped visibly). The pill
   lives on a permanent GPU layer (translate3d + backface-visibility) so it is
   rasterised the same way moving or paused, instead of flipping between a
   crisp repaint and a soft resampled bitmap. */
.mhc-pill {
  position: absolute;
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.mhc-pill-body {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 13px 3px 3px; border-radius: 999px; border: 2px solid;
  font-size: 17px; line-height: 1; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(5,5,5,.08);
}
.mhc-pill-body img { width: 27px; height: 27px; border-radius: 50%; display: block; }
.mhc-pill-body img + span { padding: 5px 0; }
.mhc-pill--sidekick .mhc-pill-body { gap: 6px; padding: 6px 13px 6px 10px; background: #FFDD33; border-color: #F5C800; color: #050505; }
.mhc-pill-arrow { position: absolute; margin-top: -11px; filter: drop-shadow(0 1px 2px rgba(5,5,5,.15)); }
.mhc-pill--sidekick .mhc-pill-arrow path { fill: #050505; stroke: #050505; }

.mhc-pill--sebastian { left: 6%;  top: 22%; animation: hcdriftA 7s ease-in-out 0s infinite; }
.mhc-pill--sebastian .mhc-pill-body { background: #AEF2EA; border-color: #13A390; color: #063B35; }
.mhc-pill--sebastian .mhc-pill-arrow { right: -30px; top: 62%; transform: rotate(160deg); }
.mhc-pill--sebastian .mhc-pill-arrow path { fill: #AEF2EA; stroke: #13A390; }

.mhc-pill--sofia { left: 16%; top: 52%; animation: hcdriftB 8.5s ease-in-out .8s infinite; }
.mhc-pill--sofia .mhc-pill-body { background: #F8C8FC; border-color: #C93FD3; color: #55055C; }
.mhc-pill--sofia .mhc-pill-arrow { right: -31px; top: 50%; transform: rotate(140deg); }
.mhc-pill--sofia .mhc-pill-arrow path { fill: #F8C8FC; stroke: #C93FD3; }

.mhc-pill--sidekick-l { left: 46%; top: 74%; animation: hcdriftC 6.5s ease-in-out .4s infinite; }
.mhc-pill--sidekick-l .mhc-pill-arrow { right: -30px; top: 38%; transform: rotate(112deg); }

.mhc-pill--sidekick-r { right: 8%; top: 30%; animation: hcdriftB 7.5s ease-in-out .2s infinite; }
.mhc-pill--sidekick-r .mhc-pill-arrow { left: -30px; top: 50%; transform: rotate(-45deg); }

.mhc-pill--nina { right: 34%; top: 57%; animation: hcdriftA 9s ease-in-out 1.1s infinite; }
.mhc-pill--nina .mhc-pill-body { background: #94E6AB; border-color: #1A9B3D; color: #0A3A17; }
.mhc-pill--nina .mhc-pill-arrow { left: -30px; top: 50%; transform: rotate(-45deg); }
.mhc-pill--nina .mhc-pill-arrow path { fill: #94E6AB; stroke: #1A9B3D; }

.mhc-pill--hiroshi { right: 4%; top: 77%; animation: hcdriftC 8s ease-in-out .6s infinite; }
.mhc-pill--hiroshi .mhc-pill-body { background: #C9C2FF; border-color: #7B6CF0; color: #1E0F5C; }
.mhc-pill--hiroshi .mhc-pill-arrow { left: -16px; top: -22px; margin-top: 0; }
.mhc-pill--hiroshi .mhc-pill-arrow path { fill: #C9C2FF; stroke: #7B6CF0; }

@keyframes hcdriftA { 0%,100% { transform: translate3d(0,0,0); } 30% { transform: translate3d(10px,-8px,0); } 65% { transform: translate3d(-6px,6px,0); } }
@keyframes hcdriftB { 0%,100% { transform: translate3d(0,0,0); } 35% { transform: translate3d(-9px,7px,0); } 70% { transform: translate3d(7px,-5px,0); } }
@keyframes hcdriftC { 0%,100% { transform: translate3d(0,0,0); } 40% { transform: translate3d(8px,9px,0); } 75% { transform: translate3d(-8px,-4px,0); } }
@media (prefers-reduced-motion: reduce) { .mhc-pill { animation: none; } }

/* ---------- TOPIC TILES: centered, borderless, 3D icons ---------- */
.mhc-topics.container { max-width: 1200px; margin: 0 auto; padding: 112px 32px 48px; }
.mhc-topic-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 72px 40px; }
.mhc-topic-card { flex: 0 1 calc((100% - 80px) / 3); min-width: 0; }
@media (max-width: 980px) { .mhc-topic-card { flex-basis: calc((100% - 40px) / 2); } }
@media (max-width: 620px) {
  .mhc-topics.container { padding: 64px 16px 32px; }
  .mhc-topic-grid { gap: 32px; }
  .mhc-topic-card { flex-basis: 100%; }
}
.mhc-topic-card-link,
.mhc-topic-card-link:hover {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 100%; padding: 28px 24px 32px; border: 0; border-radius: 20px;
  background: transparent; box-shadow: none; transform: none;
  transition: background .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s cubic-bezier(.2,.7,.2,1);
}
.mhc-topic-card-link:hover { background: var(--hc-card); box-shadow: var(--hc-shadow-2); }
/* .mhc-topics .mhc-topic-grid prefix outranks the old nth-child(6n+…) tone grounds */
.mhc-topics .mhc-topic-grid .mhc-topic-card .mhc-topic-icon {
  width: 76px; height: 76px; margin: 0 0 22px; border-radius: 0;
  background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat;
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.mhc-topics .mhc-topic-grid .mhc-topic-card-link:hover .mhc-topic-icon { transform: translateY(-4px); }
.mhc-topic-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--hc-text); }
.mhc-topic-desc { font-size: 17px; line-height: 1.55; color: var(--hc-text-2); margin: 0; max-width: 350px; text-wrap: pretty; }
.mhc-topic-count, .mhc-topic-arrow { display: none; }

/* icons: by position (Zendesk category order), then by English name so a reorder keeps them right */
.mhc-topic-card:nth-child(7n+1) .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171N60TY905XFYB8CBJV7); }
.mhc-topic-card:nth-child(7n+2) .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M1718PEB1AG70EM6HMTEQ2); }
.mhc-topic-card:nth-child(7n+3) .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171N47GA60CWJ4567VN7V); }
.mhc-topic-card:nth-child(7n+4) .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171HMBT9Q7V7PGKJ0F4T5); }
.mhc-topic-card:nth-child(7n+5) .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M16Y12KZRHNG32V3SSVBSC); }
.mhc-topic-card:nth-child(7n+6) .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171QQDSC88BVG12R231H2); }
.mhc-topic-card:nth-child(7n+7) .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171EKQANTCHX76BP7HX1G); }
.mhc-topic-card[data-name^="Getting" i] .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171N60TY905XFYB8CBJV7); }
.mhc-topic-card[data-name^="Using" i] .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M1718PEB1AG70EM6HMTEQ2); }
.mhc-topic-card[data-name*="Billing" i] .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171N47GA60CWJ4567VN7V); }
.mhc-topic-card[data-name="Administration" i] .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171HMBT9Q7V7PGKJ0F4T5); }
.mhc-topic-card[data-name^="Integrations" i] .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M16Y12KZRHNG32V3SSVBSC); }
.mhc-topic-card[data-name^="Enterprise" i] .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171QQDSC88BVG12R231H2); }
.mhc-topic-card[data-name*="Announcement" i] .mhc-topic-icon { background-image: url(/hc/theming_assets/01M5M171EKQANTCHX76BP7HX1G); }

/* ---------- Category page: first-article redirect vs. ?view=sections list ---------- */
html:not(.mhc-cat-sections) .mhc-cat-sections-view { display: none !important; }
html.mhc-cat-sections .mhc-cat-loader { display: none; }
.mhc-cat-sections-view .see-all-articles { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--miro-violet); }

/* ---------- Header actions: search · language · theme · sign in ---------- */
.mhc-header-actions { gap: 24px; }
.mhc-header-actions .mhc-theme-toggle { margin-right: -12px; } /* toggle sits 12px from the user module */

.mhc-lang.footer-language-selector { margin: 0; color: var(--hc-text); font-weight: 400; }
.mhc-lang .dropdown { position: relative; }
.mhc-lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border: 0; border-radius: 8px; background: transparent;
  font: 400 15px/1.2 var(--font-body); color: var(--hc-text); cursor: pointer; white-space: nowrap;
  transition: background .15s ease;
}
.mhc-lang .mhc-lang-btn { font-size: 15px; color: var(--hc-text); }
.mhc-lang .mhc-lang-btn:hover,
.mhc-lang .mhc-lang-btn[aria-expanded="true"] { background: var(--hc-chip); text-decoration: none; }
.mhc-lang .mhc-lang-btn:focus { text-decoration: none; }
.mhc-lang .mhc-lang-btn:focus-visible { outline: 2px solid var(--miro-violet); outline-offset: 2px; }
.mhc-lang .mhc-lang-btn--static { cursor: default; }
.mhc-lang .mhc-lang-btn--static:hover { background: transparent; }
.mhc-lang .dropdown-toggle::after { display: none; }
.mhc-lang-chev { color: var(--hc-text-3); transition: transform .15s ease; }
.mhc-lang-btn[aria-expanded="true"] .mhc-lang-chev { transform: rotate(180deg); }
.mhc-lang .mhc-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 1000;
  min-width: 220px; padding: 6px; margin: 0;
  background: var(--hc-card); border: 1px solid var(--hc-border); border-radius: 12px;
  box-shadow: var(--hc-shadow-2);
}
.mhc-lang .mhc-lang-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 14.5px; line-height: 1.3; color: var(--hc-text); text-decoration: none; white-space: nowrap;
}
.mhc-lang .mhc-lang-menu a:hover,
.mhc-lang .mhc-lang-menu a:focus { background: var(--hc-surface); color: var(--hc-text); text-decoration: none; }
@media (max-width: 768px) {
  .mhc-header-actions { gap: 12px; }
  .mhc-header-actions .mhc-theme-toggle { margin-right: -4px; }
  .mhc-lang-label { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- SEARCH MODAL — Mintlify-style card ----------
   Input on top, recent searches / results with section path, keyboard footer. */
.mhc-search-overlay { padding-top: 10vh; background: rgba(5,5,5,.28); }
.mhc-search-overlay #algolia-search-box,
.mhc-search-overlay #algolia-search-box.mhc-search-open {
  background: var(--hc-card); border: 1px solid var(--hc-border); border-radius: 18px;
  box-shadow: 0 24px 64px rgba(5,5,5,.22); padding: 8px; overflow: hidden;
}
html[data-mhc-theme="dark"] .mhc-search-overlay #algolia-search-box { box-shadow: 0 24px 64px rgba(0,0,0,.6); }
.mhc-search-overlay .aa-Autocomplete { width: 100%; }
.mhc-search-overlay .aa-Form {
  height: 52px; margin: 0; border-radius: 12px; box-shadow: none;
  background: var(--hc-input); border: 1px solid var(--hc-border-2);
}
.mhc-search-overlay .aa-Form:focus-within { box-shadow: none; border-color: var(--hc-text-3); }
.mhc-search-overlay .aa-Input { font: 400 17px var(--font-body); }
.mhc-search-overlay .aa-Input::placeholder { color: var(--hc-text-3); }
.mhc-search-esc { top: 34px; right: 20px; }

.mhc-search-overlay .aa-Panel { margin: 4px 0 0; padding: 0; }
.mhc-search-overlay .aa-PanelLayout { padding: 4px 0 2px; max-height: min(60vh, 480px); overflow-y: auto; }
.mhc-search-overlay .aa-Source { margin: 0; }
.mhc-search-overlay .aa-Source + .aa-Source { margin-top: 6px; }
.mhc-search-overlay .aa-SourceHeader { margin: 10px 12px 4px; }
.mhc-sr-heading { font-size: 12.5px; font-weight: 500; color: var(--hc-text-3); letter-spacing: .01em; }
.mhc-search-overlay .aa-List { margin: 0; padding: 0; }
.mhc-search-overlay .aa-Item {
  display: block; min-height: 0; padding: 0; margin: 0; border-radius: 10px;
  background: transparent; color: var(--hc-text); cursor: pointer;
}
.mhc-search-overlay .aa-Item[aria-selected="true"] { background: var(--hc-surface); }

.mhc-sr-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 10px 12px; color: inherit; text-decoration: none;
}
.mhc-sr-item:hover, .mhc-sr-item:focus { text-decoration: none; color: inherit; }
.mhc-sr-icon { flex: none; display: inline-flex; margin-top: 2px; color: var(--hc-text-3); }
.aa-Item[aria-selected="true"] .mhc-sr-icon { color: var(--hc-text); }
.mhc-sr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mhc-sr-title { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--hc-text); }
.mhc-sr-path { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; line-height: 1.35; color: var(--hc-text-3); }
.mhc-sr-sep { opacity: .7; }
.mhc-sr-snippet {
  font-size: 13px; line-height: 1.45; color: var(--hc-text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mhc-sr-snippet:empty { display: none; }
.mhc-sr-item mark {
  background: rgba(255,221,51,.5); color: inherit; border-radius: 3px; padding: 0 1px;
}
html[data-mhc-theme="dark"] .mhc-sr-item mark { background: rgba(255,221,51,.28); }
.mhc-sr-remove {
  flex: none; align-self: center; width: 26px; height: 26px; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent;
  font-size: 18px; line-height: 1; color: var(--hc-text-3); cursor: pointer; opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}
.aa-Item:hover .mhc-sr-remove, .aa-Item[aria-selected="true"] .mhc-sr-remove { opacity: 1; }
.mhc-sr-remove:hover { background: var(--hc-chip); color: var(--hc-text); }
.mhc-sr-empty { padding: 22px 12px; text-align: center; font-size: 14px; color: var(--hc-text-3); }

.mhc-sr-footer {
  display: flex; align-items: center; gap: 18px;
  margin: 4px 0 0; padding: 10px 12px 4px; border-top: 1px solid var(--hc-border);
  font-size: 12.5px; color: var(--hc-text-3);
}
.mhc-sr-hint { display: inline-flex; align-items: center; gap: 4px; }
.mhc-sr-hint--end { margin-left: auto; }
.mhc-sr-footer kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  font: 500 11px/1 var(--font-body); color: var(--hc-text-2);
  background: var(--hc-chip); border: 1px solid var(--hc-border); border-radius: 4px;
}
@media (max-width: 560px) { .mhc-sr-footer { display: none; } }
.mhc-sr-item--all .mhc-sr-title { font-weight: 400; color: var(--hc-text-2); }
.mhc-search-overlay .aa-Source[data-autocomplete-source-id="all"] { border-top: 1px solid var(--hc-border); margin-top: 6px; padding-top: 4px; }

/* Search modal input: neutralise the legacy pill styles that leaked in —
   form.aa-Form.search.search-full (550px cap, 30px radius), the base
   `.search input[type=search]` (40px radius, 60px height, focus border) and
   the `.search::before` emoji icon — so the form is one clean 12px box. */
.mhc-search-overlay form.aa-Form.search.search-full {
  max-width: none; width: 100%; border-radius: 12px;
}
.mhc-search-overlay .search::before { content: none; display: none; }
.mhc-search-overlay .search input[type="search"],
.mhc-search-overlay .search input[type="search"]:focus,
.mhc-search-overlay .aa-Input {
  height: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; outline: none;
  background: transparent; color: var(--hc-text);
  font: 400 17px var(--font-body);
}
.mhc-search-overlay .aa-InputWrapperPrefix { height: 100%; padding-left: 4px; }
.mhc-search-overlay .aa-Label, .mhc-search-overlay .aa-SubmitButton { height: 100%; display: flex; align-items: center; }
.mhc-search-overlay .aa-Label svg { display: block; color: var(--hc-text-3); width: 20px; height: 20px; }
.mhc-search-overlay .aa-InputWrapper { height: 100%; padding-right: 64px; } /* room for the ESC chip */

/* Search modal scrollbar: neutral grey (beats the legacy blue !important rules) */
.mhc-search-overlay .aa-Panel--scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--hc-border-2) transparent !important;
}
.mhc-search-overlay .aa-Panel--scrollable::-webkit-scrollbar { width: 10px; }
.mhc-search-overlay .aa-Panel--scrollable::-webkit-scrollbar-track { background: transparent; }
.mhc-search-overlay .aa-Panel--scrollable::-webkit-scrollbar-thumb {
  background: var(--hc-border-2) !important;
  border: 3px solid var(--hc-card); border-radius: 999px;
}
.mhc-search-overlay .aa-Panel--scrollable::-webkit-scrollbar-thumb:hover { background: var(--hc-text-3) !important; }
/* only the active row is highlighted (legacy `.aa-Source ul li:hover` added a second grey row) */
.mhc-search-overlay .aa-Source ul li:hover { background: transparent; transition: none; }
.mhc-search-overlay .aa-Source ul li[aria-selected="true"] { background: var(--hc-surface); }

/* ---------- Header controls: one row, one rhythm ----------
   search · language · theme · user — all 36px tall, 12px apart, centred. */
.mhc-header-actions { gap: 12px; align-items: center; }
.mhc-header-actions > * { margin: 0; flex: none; }
.mhc-header-actions .mhc-theme-toggle { margin-right: 0; }
.mhc-header-search-btn {
  height: 36px; padding: 0 8px 0 12px; gap: 8px; border-radius: 10px;
  display: inline-flex; align-items: center; font-size: 14px; line-height: 1;
}
.mhc-header-search-btn:hover { background: var(--hc-chip); }
.mhc-header-search-kbd { height: 20px; display: inline-flex; align-items: center; border-radius: 5px; padding: 0 5px; font-size: 11.5px; }
.mhc-header-actions .mhc-theme-toggle { width: 36px; height: 36px; }
.mhc-user, .mhc-user .user-info { display: flex; align-items: center; height: 36px; }
.mhc-user .user-info > [role="button"] {
  height: 36px; padding: 0 10px; border: 0; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 8px; line-height: 1; font-size: 14.5px;
}
.mhc-user .user-info > [role="button"]:hover,
.mhc-user .user-info > [role="button"][aria-expanded="true"] { background: var(--hc-chip); }
.mhc-user a[data-auth-action="signin"], .mhc-user a.sign-in {
  height: 36px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; line-height: 1;
}
.mhc-user a[data-auth-action="signin"]:hover, .mhc-user a.sign-in:hover { background: var(--hc-chip); text-decoration: none; }

/* ---------- Language switch — Mintlify look, Miro tokens ---------- */
.mhc-lang, .mhc-lang .dropdown { display: flex; align-items: center; }
.mhc-lang .mhc-lang-btn {
  height: 36px; padding: 0 10px 0 12px; gap: 6px; border-radius: 10px;
  font: 500 14.5px/1 var(--font-body); color: var(--hc-text);
}
.mhc-lang .mhc-lang-btn--static { padding: 0 12px; }
.mhc-lang-chev { color: var(--hc-text-3); width: 14px; height: 14px; }
.mhc-lang .mhc-lang-menu {
  top: calc(100% + 6px); min-width: 180px; padding: 4px;
  border-radius: 14px; box-shadow: 0 12px 32px rgba(5,5,5,.12), 0 1px 2px rgba(5,5,5,.06);
}
html[data-mhc-theme="dark"] .mhc-lang .mhc-lang-menu { box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.mhc-lang .mhc-lang-menu .mhc-lang-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 15px; line-height: 1.3; color: var(--hc-text-2); text-decoration: none; white-space: nowrap;
}
.mhc-lang .mhc-lang-menu a.mhc-lang-item:hover,
.mhc-lang .mhc-lang-menu a.mhc-lang-item:focus { background: var(--hc-surface); color: var(--hc-text); text-decoration: none; }
.mhc-lang .mhc-lang-menu .mhc-lang-item--current { color: var(--miro-violet); font-weight: 500; cursor: default; }
html[data-mhc-theme="dark"] .mhc-lang .mhc-lang-menu .mhc-lang-item--current { color: #A89CFF; }
.mhc-lang-check { flex: none; }

@media (max-width: 768px) {
  .mhc-header-actions { gap: 8px; }
}

/* ---------- Account menu (user_info helper) — same card as the language menu ---------- */
.mhc-user .user-info { position: relative; }
.mhc-user #user-name { display: inline-block; font-size: 14.5px; font-weight: 500; color: var(--hc-text); }
.mhc-user #user-name:hover { text-decoration: none; }
.mhc-user .user-info > [role="button"] .user-avatar { width: 24px; height: 24px; }
/* chevron: replace the icon-font glyph with the same SVG chevron as the language switch */
.mhc-user .user-info > [role="button"]::after {
  content: ""; display: inline-block; width: 14px; height: 14px; padding: 0; margin: 0;
  background: var(--hc-text-3);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
  transition: transform .15s ease;
}
.mhc-user .user-info > [role="button"][aria-expanded="true"]::after { transform: rotate(180deg); }
@media (max-width: 767px) { .mhc-user #user-name { display: none; } }

.mhc-user .mhc-account-menu {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 1000;
  min-width: 240px; padding: 4px; margin: 0;
  background: var(--hc-card); border: 1px solid var(--hc-border); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(5,5,5,.12), 0 1px 2px rgba(5,5,5,.06);
  font-family: var(--font-body);
}
html[data-mhc-theme="dark"] .mhc-user .mhc-account-menu { box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.mhc-account-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 12px; margin: 0 0 4px; border-bottom: 1px solid var(--hc-border);
}
.mhc-account-head img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.mhc-account-name { font-size: 15px; font-weight: 600; color: var(--hc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhc-user .mhc-account-menu .mhc-account-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 10px; background: transparent;
  font-size: 14.5px; font-weight: 400; line-height: 1.3; color: var(--hc-text-2);
  text-decoration: none; text-align: left; white-space: nowrap; cursor: pointer;
}
.mhc-user .mhc-account-menu .mhc-account-item:hover,
.mhc-user .mhc-account-menu .mhc-account-item:focus { background: var(--hc-surface); color: var(--hc-text); text-decoration: none; outline: none; }
.mhc-user .mhc-account-menu .mhc-account-item:focus-visible { box-shadow: inset 0 0 0 2px var(--miro-violet); }
.mhc-account-ico { flex: none; width: 16px; height: 16px; display: inline-flex; color: var(--hc-text-3); }
.mhc-account-item:hover .mhc-account-ico { color: var(--hc-text); }
.mhc-account-sep { height: 1px; margin: 4px 8px; background: var(--hc-border); }
.mhc-user .mhc-account-menu .mhc-account-item--signout:hover { color: #D93251; }
.mhc-user .mhc-account-menu .mhc-account-item--signout:hover .mhc-account-ico { color: #D93251; }
html[data-mhc-theme="dark"] .mhc-user .mhc-account-menu .mhc-account-item--signout:hover,
html[data-mhc-theme="dark"] .mhc-user .mhc-account-menu .mhc-account-item--signout:hover .mhc-account-ico { color: #FF8A9B; }

/* ---------- Topic tiles: equal heights across ALL rows ----------
   The flex-wrap grid only equalised heights within a row, so a short last row
   (Product Announcements alone) came out shorter. Grid with 1fr auto-rows makes
   every row as tall as the tallest tile. 6 tracks / span 2 = 3 per row, which
   lets a lone last tile (or last pair) sit centred like before. */
.mhc-topics .mhc-topic-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr;
  gap: 72px 40px; justify-content: initial;
}
.mhc-topics .mhc-topic-grid .mhc-topic-card { grid-column: span 2; flex: none; display: flex; }
.mhc-topics .mhc-topic-grid .mhc-topic-card-link { height: 100%; justify-content: flex-start; }
.mhc-topics .mhc-topic-grid .mhc-topic-card:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
.mhc-topics .mhc-topic-grid .mhc-topic-card:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
@media (max-width: 980px) {
  .mhc-topics .mhc-topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mhc-topics .mhc-topic-grid .mhc-topic-card,
  .mhc-topics .mhc-topic-grid .mhc-topic-card:last-child:nth-child(3n+1),
  .mhc-topics .mhc-topic-grid .mhc-topic-card:nth-last-child(2):nth-child(3n+1) { grid-column: span 2; }
  .mhc-topics .mhc-topic-grid .mhc-topic-card:last-child:nth-child(2n+1) { grid-column: 2 / span 2; }
}
@media (max-width: 620px) {
  .mhc-topics .mhc-topic-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 32px; }
  .mhc-topics .mhc-topic-grid .mhc-topic-card,
  .mhc-topics .mhc-topic-grid .mhc-topic-card:last-child:nth-child(2n+1) { grid-column: auto; }
}

/* Search modal: Algolia's scroll fades (.aa-GradientTop/Bottom) and other
   classic-theme surfaces paint with --aa-background-color-rgb, which defaults
   to white — a white band on the dark card. Point it at the card colour
   (--hc-card: #FFFFFF light / #26262A dark). */
.mhc-search-overlay { --aa-background-color-rgb: 255, 255, 255; --aa-background-color-alpha: 1; }
html[data-mhc-theme="dark"] .mhc-search-overlay { --aa-background-color-rgb: 38, 38, 42; }

/* Top-nav placeholder bars (header.hbs) until the categories paint */
.mhc-topnav-skel {
  flex: none; display: inline-block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--hc-chip) 0%, var(--hc-border-2) 50%, var(--hc-chip) 100%);
  background-size: 200% 100%;
  animation: mhcSkel 1.4s ease-in-out infinite;
}
@keyframes mhcSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .mhc-topnav-skel { animation: none; } }
@media (max-width: 768px) { .mhc-topnav-skel:nth-child(n+4) { display: none; } }

/* Account + language menus: Zendesk's platform CSS paints .dropdown-menu white
   (and restyles separators), which made the dark card unreadable. Pin the card
   surface with !important so the tokens win in both themes. */
.mhc-user .mhc-account-menu,
.mhc-lang .mhc-lang-menu {
  background: var(--hc-card) !important;
  border: 1px solid var(--hc-border-2) !important;
  color: var(--hc-text) !important;
}
.mhc-account-head { border-bottom: 1px solid var(--hc-border) !important; }
.mhc-account-name { color: var(--hc-text) !important; }
.mhc-user .mhc-account-menu .mhc-account-sep {
  display: block !important; height: 1px !important; min-height: 0 !important;
  margin: 4px 8px !important; padding: 0 !important; border: 0 !important;
  background: var(--hc-border) !important;
}
.mhc-user .mhc-account-menu .mhc-account-item { color: var(--hc-text-2) !important; }
.mhc-user .mhc-account-menu .mhc-account-item:hover,
.mhc-user .mhc-account-menu .mhc-account-item:focus { color: var(--hc-text) !important; background: var(--hc-surface) !important; }
.mhc-user .mhc-account-menu .mhc-account-item--signout:hover { color: #D93251 !important; }
html[data-mhc-theme="dark"] .mhc-user .mhc-account-menu .mhc-account-item--signout:hover { color: #FF8A9B !important; }
html[data-mhc-theme="dark"] .mhc-user .mhc-account-menu .mhc-account-item:hover,
html[data-mhc-theme="dark"] .mhc-user .mhc-account-menu .mhc-account-item:focus { background: var(--hc-chip) !important; }
.mhc-lang .mhc-lang-menu a.mhc-lang-item { color: var(--hc-text-2) !important; }
.mhc-lang .mhc-lang-menu a.mhc-lang-item:hover,
.mhc-lang .mhc-lang-menu a.mhc-lang-item:focus { color: var(--hc-text) !important; background: var(--hc-surface) !important; }
html[data-mhc-theme="dark"] .mhc-lang .mhc-lang-menu a.mhc-lang-item:hover,
html[data-mhc-theme="dark"] .mhc-lang .mhc-lang-menu a.mhc-lang-item:focus { background: var(--hc-chip) !important; }
.mhc-lang .mhc-lang-menu .mhc-lang-item--current { color: var(--miro-violet) !important; }
html[data-mhc-theme="dark"] .mhc-lang .mhc-lang-menu .mhc-lang-item--current { color: #A89CFF !important; }

/* Triggers: no underline on focus/hover (base .dropdown-toggle:focus and #user-name:hover add one) */
.mhc-user .user-info > [role="button"],
.mhc-user .user-info > [role="button"]:hover,
.mhc-user .user-info > [role="button"]:focus,
.mhc-user .user-info > [role="button"] #user-name,
.mhc-user #user-name:hover,
.mhc-lang .mhc-lang-btn:focus { text-decoration: none !important; }
.mhc-user .user-info > [role="button"]:focus-visible { outline: 2px solid var(--miro-violet); outline-offset: 2px; }

/* ---------- Scroll-to-top: neutral card button (was a pale red square) ----------
   Round, token-driven, centred on the chat launcher's axis (launcher: right 20,
   56px → centre 48px from the edge; 44px button → right 26) and stacked above it. */
.scroll-to-top {
  width: 44px; height: 44px; right: 26px; bottom: -64px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--hc-border-2);
  background: var(--hc-card); color: var(--hc-text);
  box-shadow: 0 6px 18px rgba(5,5,5,.12), 0 1px 2px rgba(5,5,5,.06);
  cursor: pointer; opacity: 0;
  transition: bottom 250ms ease, opacity 200ms ease, background .15s ease, transform .15s ease;
}
.scroll-to-top.is-active { bottom: 88px; opacity: 1; }
.scroll-to-top:hover { background: var(--hc-chip); transform: translateY(-2px); }
.scroll-to-top:focus-visible { outline: 2px solid var(--miro-violet); outline-offset: 2px; }
.scroll-to-top__icon { display: block; }
html[data-mhc-theme="dark"] .scroll-to-top { box-shadow: 0 6px 18px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .scroll-to-top { transition: none; } .scroll-to-top:hover { transform: none; } }
/* keep the base theme's behaviour: hidden on small screens */
@media (max-width: 1023px) { .scroll-to-top { display: none; } }

/* =====================================================================
   PRODUCT ANNOUNCEMENTS FEED — token-driven (was hard-coded for white:
   #050038 navy titles/heading, #686685 muted text, #D3D3D3 rules), so it
   now reads correctly in dark mode and matches the rest of the site.
   ===================================================================== */
.announcements-header {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 40px);
  letter-spacing: -0.02em; line-height: 1.1; color: var(--hc-text);
}
.announcements-subheader, .announcements-welcome-text { color: var(--hc-text-2); }

/* filters */
#custom-filter.announcements-filter { border-bottom-color: var(--hc-border); }
.announcements-filter select,
#filterBySection, #statusFilter, #phaseFilter {
  height: 40px; padding: 0 36px 0 14px; margin: 0 8px 8px 0;
  font: 400 14.5px var(--font-body); color: var(--hc-text);
  background-color: var(--hc-input); border: 1px solid var(--hc-border-2); border-radius: 10px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2375757A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .15s ease;
}
.announcements-filter select:hover,
#filterBySection:hover, #statusFilter:hover, #phaseFilter:hover { border-color: var(--hc-text-3); }
.announcements-filter select:focus-visible,
#filterBySection:focus-visible, #statusFilter:focus-visible, #phaseFilter:focus-visible { outline: 2px solid var(--miro-violet); outline-offset: 2px; }
html[data-mhc-theme="dark"] .announcements-filter select option { background: var(--hc-card); color: var(--hc-text); }

/* cards */
.messageCard { border-bottom: 1px solid var(--hc-border); padding-bottom: 4px; }
.messageCard .title, .messageCard a.title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em;
  color: var(--hc-text); text-decoration: none; transition: color .15s ease;
}
.messageCard .title:hover, .messageCard a.title:hover { color: var(--miro-violet); text-decoration: none; }
html[data-mhc-theme="dark"] .messageCard .title:hover,
html[data-mhc-theme="dark"] .messageCard a.title:hover { color: #A89CFF; }
.messageCard .body { color: var(--hc-text-2); line-height: 1.6; }
.messageCard .postTime, .messageCard .postTimeLabel { color: var(--hc-text-3); }

/* pagination */
.message-pagination,
a#message-page-upper, a#message-page-lower, a.message-upper-limit, a.message-lower-limit,
.pagination-next, .pagination-next:hover, .pagination-prev, .pagination-prev:hover { color: var(--hc-text-3); }
.message-pagination i.fa { color: var(--miro-violet); }
html[data-mhc-theme="dark"] .message-pagination i.fa { color: #A89CFF; }

/* release badges: brighter tones on dark (light-mode tones lost contrast) */
html[data-mhc-theme="dark"] .pa-badge--coming-soon { color: #8FA2FF; border-color: rgba(143,162,255,.45); }
html[data-mhc-theme="dark"] .pa-badge--launched    { color: #6EDB8C; border-color: rgba(110,219,140,.45); }
html[data-mhc-theme="dark"] .pa-badge--beta        { color: #B8ACFF; border-color: rgba(184,172,255,.45); }
html[data-mhc-theme="dark"] .pa-badge--add-on      { color: #F2C46B; border-color: rgba(242,196,107,.45); }

/* ---------- Product announcements pager (script.js mhcRenderPager) ---------- */
.message-pagination.mhc-pager-on { padding: 32px 0 8px; }
.message-pagination.mhc-pager-on > :not(.mhc-pager) { display: none !important; } /* legacy "1 of 40 ›" */
.mhc-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.mhc-pager[hidden] { display: none; }
.mhc-pager-nums { display: inline-flex; align-items: center; gap: 4px; }
.mhc-pager-btn {
  min-width: 36px; height: 36px; padding: 0 10px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 10px; background: transparent;
  font: 500 14.5px/1 var(--font-body); color: var(--hc-text-2);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.mhc-pager-btn:hover:not(:disabled) { background: var(--hc-chip); color: var(--hc-text); }
.mhc-pager-btn:focus-visible { outline: 2px solid var(--miro-violet); outline-offset: 2px; }
.mhc-pager-btn[aria-current="page"] { background: var(--hc-text); color: var(--hc-bg); cursor: default; }
.mhc-pager-step { border: 1px solid var(--hc-border-2); padding: 0 12px; color: var(--hc-text); }
.mhc-pager-step:disabled { opacity: .4; cursor: default; }
.mhc-pager-btn svg { flex: none; }
.mhc-pager-gap { min-width: 24px; text-align: center; color: var(--hc-text-3); user-select: none; }
.mhc-pager-compact { display: none; font-size: 14.5px; color: var(--hc-text-2); }
@media (max-width: 640px) {
  .mhc-pager-nums, .mhc-pager-word { display: none; }
  .mhc-pager-compact { display: inline; }
  .mhc-pager-step { width: 40px; padding: 0; }
}

/* ---------- Welcome banner (header.hbs, theme settings "Welcome banner") ---------- */
.mhc-banner {
  position: relative; z-index: 41;
  background: var(--tone-yellow-light); color: #050505;
  border-bottom: 1px solid rgba(5,5,5,.06);
  overflow: hidden; max-height: 160px;
  transition: max-height .2s ease, opacity .2s ease;
}
.mhc-banner[hidden] { display: none; }
.mhc-banner--closing { max-height: 0; opacity: 0; }
html[data-mhc-theme="dark"] .mhc-banner {
  background: var(--hc-surface); color: var(--hc-text); border-bottom-color: var(--hc-border);
}
.mhc-banner-inner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  min-height: 44px; padding: 8px 56px 8px 40px; text-align: center;
  font-size: 14.5px; line-height: 1.4;
}
.mhc-banner-icon { display: inline-flex; color: #050505; }
html[data-mhc-theme="dark"] .mhc-banner-icon { color: var(--miro-yellow); }
.mhc-banner-text { margin: 0; color: inherit; font-weight: 500; }
.mhc-banner-links { display: inline-flex; align-items: center; gap: 14px; }
.mhc-banner-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(5,5,5,.35);
}
.mhc-banner-link:hover { color: inherit; text-decoration-color: currentColor; }
html[data-mhc-theme="dark"] .mhc-banner-link { text-decoration-color: rgba(255,255,255,.35); }
.mhc-banner-link--primary { font-weight: 600; text-decoration: none; }
.mhc-banner-link--primary:hover { text-decoration: underline; }
.mhc-banner-link--primary svg { transition: transform .15s ease; }
.mhc-banner-link--primary:hover svg { transform: translateX(2px); }
.mhc-banner-link:focus-visible, .mhc-banner-close:focus-visible { outline: 2px solid var(--miro-violet); outline-offset: 2px; border-radius: 4px; }
.mhc-banner-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent;
  color: inherit; opacity: .65; cursor: pointer; transition: opacity .15s ease, background .15s ease;
}
.mhc-banner-close:hover { opacity: 1; background: rgba(5,5,5,.07); }
html[data-mhc-theme="dark"] .mhc-banner-close:hover { background: var(--hc-chip); }
@media (max-width: 640px) {
  .mhc-banner-inner { justify-content: flex-start; text-align: left; padding: 10px 52px 10px 16px; font-size: 14px; }
  .mhc-banner-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mhc-banner { transition: none; } }

/* ---------- Redesign feedback: banner trigger + popover (script.js wireRedesignFeedback) ---------- */
.mhc-banner-feedback {
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 500;
}
.mhc-banner-note { font-weight: 500; opacity: .75; }

.mhc-fb {
  position: fixed; z-index: 999; width: min(360px, calc(100vw - 32px));
  padding: 18px 18px 16px; border-radius: 14px;
  background: var(--hc-card); color: var(--hc-text);
  border: 1px solid var(--hc-border-2);
  box-shadow: 0 16px 40px rgba(5,5,5,.16), 0 1px 2px rgba(5,5,5,.06);
  font-family: var(--font-body); text-align: left;
  animation: mhcFbIn .14s ease-out;
}
.mhc-fb[hidden] { display: none; }
html[data-mhc-theme="dark"] .mhc-fb { box-shadow: 0 16px 40px rgba(0,0,0,.55); }
@keyframes mhcFbIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mhc-fb-close {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--hc-text-3); cursor: pointer;
}
.mhc-fb-close:hover { background: var(--hc-chip); color: var(--hc-text); }
.mhc-fb-title { margin: 0 28px 12px 0; font: 600 15.5px/1.35 var(--font-display); color: var(--hc-text); }
.mhc-fb-sub { margin: -4px 0 0; font-size: 14px; line-height: 1.45; color: var(--hc-text-2); }
.mhc-fb-votes { display: flex; gap: 8px; }
.mhc-fb-vote {
  flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--hc-border-2); border-radius: 10px; background: transparent;
  font: 500 14.5px var(--font-body); color: var(--hc-text); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mhc-fb-vote:hover { background: var(--hc-chip); }
.mhc-fb-vote[aria-pressed="true"] { background: var(--hc-text); color: var(--hc-bg); border-color: var(--hc-text); }
.mhc-fb-form { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.mhc-fb-form[hidden], .mhc-fb-reasons[hidden], .mhc-fb-step[hidden] { display: none; }
.mhc-fb-reasons { border: 0; padding: 0; margin: 0 0 4px; display: flex; flex-direction: column; gap: 2px; }
.mhc-fb-label { padding: 0; margin: 0 0 4px; font-size: 13.5px; font-weight: 500; color: var(--hc-text-2); }
.mhc-fb-optional { font-weight: 400; color: var(--hc-text-3); }
.mhc-fb-reasons label {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0;
  border-radius: 8px; font-size: 14.5px; font-weight: 400; color: var(--hc-text); cursor: pointer;
}
.mhc-fb-reasons label:hover { background: var(--hc-surface); }
.mhc-fb-reasons input { accent-color: var(--miro-violet); margin: 0; }
.mhc-fb-comment {
  width: 100%; min-height: 72px; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--hc-border-2); border-radius: 10px;
  background: var(--hc-input); color: var(--hc-text);
  font: 400 14.5px/1.45 var(--font-body);
}
.mhc-fb-comment:focus { outline: none; border-color: var(--hc-text-3); }
.mhc-fb-send {
  align-self: flex-end; height: 38px; padding: 0 16px; margin-top: 4px;
  border: 0; border-radius: 10px; background: var(--miro-black); color: #fff;
  font: 500 14.5px var(--font-display); cursor: pointer; transition: opacity .15s ease;
}
html[data-mhc-theme="dark"] .mhc-fb-send { background: #fff; color: #050505; }
.mhc-fb-send:disabled { opacity: .35; cursor: default; }
.mhc-fb-vote:focus-visible, .mhc-fb-send:focus-visible, .mhc-fb-close:focus-visible,
.mhc-banner-feedback:focus-visible { outline: 2px solid var(--miro-violet); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mhc-fb { animation: none; } }


/* =====================================================================
   PORTED FROM THE LIVE THEME (1.4.17) for 2.0.26 — article tables and
   inline icons, verbatim apart from colour tokens. "line NNN" references in
   these comments point at the LIVE theme's style.css, not this file.
   ===================================================================== */
/* =====================================================================
   ARTICLE TABLES
   Added in v1.4. This theme had no `.article-body table` rules at all:
   on prod every table carries its own inline styling, so none were needed.
   The Git→Zendesk publisher's sanitizer keeps `style` only for `width`
   (convert.py, `_WIDTH_STYLE_TAGS` / `_width_only_style`), so a published
   body arrives with 0 of prod's inline table styling — measured on
   "Plans and features available": 1451 style attributes in, 6 out, all six
   `<col>` widths. Across `docs/` that is 505 `border-bottom`, 2883
   `text-align`, 3050 `padding`, 288 `background-color` and 3642 `height`
   declarations dropped over 99 articles / 194 tables. Hence unruled text.

   Deliberately ONE style for all 194 tables rather than a port of prod's
   per-article choices. Prod hand-picked 3 header colours (`pink`, `#f4f4f4`,
   `#f2f2f2`), 3 band colours (`#d0d0d0`, `#000066`, `#ffbfbf`) and 2 grid
   colours (`#dddddd`, `#2f3941`), and none of that survives as anything a
   selector can read — there is no hook to branch on, so normalising is the
   only available answer as well as the better one. Values follow the
   dominant idiom (`1px solid #dddddd` grid, `#f2f2f2` header).

   Redesign port (2.0.26): colours mapped to --hc-* tokens so the block
   follows dark mode; light values are visually unchanged.
   ===================================================================== */
/* `:not([style*="border"])` on the three border rules below is what makes this
   block safe to run against a PROD body as well as a published one. Prod's cells
   carry their own inline `border-bottom` and nothing else, so an unqualified
   `border: 1px solid` shorthand would add top/left/right rules prod has never
   had. A published body has no inline style at all, so it takes the full grid.
   The test is per TABLE, not per cell, and that distinction is load-bearing:
   in prod's plan-comparison table exactly 1 of the 6 `<th>` declares a border,
   so a per-cell test grids the other 5 and leaves the sixth bare — a header row
   that is half boxed. One cell carrying a border means the author styled that
   table, so the whole table is left alone.

   The outer-border selector also skips any table with an inline `style`, which
   catches prod's `border-collapse: collapse` by substring — the wanted answer,
   since prod tables have no outer border either. */
.article-body table:not(:has(td[style*="border"], th[style*="border"])):not([style*="border"]) {
  border: 1px solid var(--hc-border-2);
}
.article-body table:not(:has(td[style*="border"], th[style*="border"])) th,
.article-body table:not(:has(td[style*="border"], th[style*="border"])) td {
  border: 1px solid var(--hc-border-2);
}
.article-body table {
  width: 100%;
  max-width: 100%;
  /* Explicit, not inherited: `.table` (line 317) sets `table-layout: fixed`,
     and under fixed layout a `<col>` percentage is obeyed to the pixel with the
     content overflowing rather than the column growing. Stating `auto` here at
     `.article-body table` specificity means no other rule can put a published
     table into that mode. */
  table-layout: auto;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  line-height: 1.5;
}
/* `overflow-wrap: normal` is load-bearing, not tidying. `.article-content` sets
   `word-wrap: break-word` (line 1659), the property is inherited, and inside a
   table Chrome/WebKit let it shrink a column BELOW its min-content width. With
   `width: 100%` added above, the plan-comparison table's `<colgroup>` — which
   reads `70% / 15% / 4% / 4% / 4% / 3%` — was then taken literally and printed
   "Starter", "Business", "Enterprise" and "Education" one letter per line.
   Restoring `normal` puts the min-content floor back, so no `<col>` percentage
   can narrow a column past its longest word.

   Cost: a cell holding one long unbreakable token (a URL, an ID) can now push
   the table past the reading column instead of breaking mid-token. `max-width`
   above and the mobile scroll rule below contain it; vertical text was worse. */
.article-body table th,
.article-body table td {
  padding: 10px 12px;
  vertical-align: middle;
  text-align: left;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Header row. `<thead>` survives on 51 of the 194 tables; the rest lead with a
   bare `<tr>` of `<th>`, which the second selector picks up. */
.article-body table thead th,
.article-body table tr:first-child th {
  background: var(--hc-surface);
  font-weight: 600;
  color: var(--hc-text);
}

/* Section band — a row that is a single spanning cell holding a heading. All 8
   in the published corpus are in "Plans and features available"; the heading is
   what keeps this off the other 36 single-spanning-cell rows, which are layout
   artifacts rather than bands. Prod tinted these
   #ffbfbf, #d0d0d0 or #000066; neutral grey here because #000066 was navy
   behind white text and the white came from a `color:` the sanitizer drops, so
   reproducing prod's dark bands would render black on navy. #F0F0F3 is the
   grey this theme already uses for .announcement-article-label.

   Painted on the `<tr>`, not the `<td>`, and that is the whole point: prod
   declares its band colour inline on the row, a cell background paints OVER a
   row background, so setting this on the cell would repaint prod's pink band
   grey. On the row, prod's inline declaration wins and prod is untouched. */
.article-body table tr:has(> td[colspan]:only-child:has(> h1, > h2, > h3, > h4, > h5, > h6)) {
  background: var(--hc-chip);
}
.article-body table td[colspan]:only-child:has(> h1, > h2, > h3, > h4, > h5, > h6) {
  text-align: center;
}

/* Block content authored inside cells. Prod's cells are full of `<p>`, and 38
   tables hold a list; with this theme's normal article margins (`p` 1em,
   `ul` 20px 0 20px 20px) every such row gains 20-40px of dead height. */
.article-body table p,
.article-body table h1,
.article-body table h2,
.article-body table h3,
.article-body table h4,
.article-body table h5,
.article-body table h6,
.article-body table ul,
.article-body table ol {
  margin: 0;
}
.article-body table p + p,
.article-body table p + ul,
.article-body table p + ol,
.article-body table ul + p,
.article-body table ol + p {
  margin-top: 0.5rem;
}
.article-body table ul,
.article-body table ol {
  padding-left: 1.1rem;
}
.article-body table h1,
.article-body table h2,
.article-body table h3,
.article-body table h4,
.article-body table h5,
.article-body table h6 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Alignment. `class` survives the sanitizer, so Zendesk's `wysiwyg-text-align-*`
   is the one piece of prod's alignment still in a published body. Zendesk ships
   no CSS for those classes to a custom theme, so until now they were inert
   markup.

   Scoped to `.article-body` but in practice table-only: counted over `docs/`,
   every surviving instance is inside a table (237 `-center`, 71 `-left`, 0
   `-right`). The export strips `class` off prose, so the centred images and
   centred prose PREFLIP_PLAN.md lists as accepted losses have no class left for
   these rules to reach — they stay lost, and this does not quietly revive them. */
.article-body .wysiwyg-text-align-center { text-align: center; }
.article-body .wysiwyg-text-align-right { text-align: right; }
.article-body .wysiwyg-text-align-left { text-align: left; }

/* Comparison matrices: label column left, data columns centred. Prod said so
   explicitly — 627 of "Plans and features available"'s 682 `text-align`
   declarations are `center` — but per-cell alignment is NOT recoverable from
   the published body: a cell holding a bare `1+` or `✔` has no `<p>` and so no
   `wysiwyg-text-align-*` class to read, which is why such cells sit left while
   their neighbours centre. Reconstructed by position instead, and gated on a
   row of 5+ cells so it reaches the 15 wide matrices (14 articles, 1592 cells)
   and none of the 179 narrower prose tables ("Setting / Description" et al.)
   where centring would be wrong.

   `text-align` inherits, so the `<p>` prod wraps most cell values in needs no
   rule of its own — and must not get one: 71 cells carry an explicit
   `wysiwyg-text-align-left`, and forcing `inherit` on cell children would
   override exactly the alignment that did survive. */
.article-body table:has(tr > *:nth-child(5)) td:not(:first-child),
.article-body table:has(tr > *:nth-child(5)) th:not(:first-child) {
  text-align: center;
}

/* Wide tables on small screens. The theme is mobile-first, so this is the only
   max-width query in the block, and it is scoped to 4+ column tables (47 of
   194) — a 2-column prose table wraps perfectly well.

   `display: block` on the `<table>` is the whole mechanism: the rows get
   re-parented into an anonymous table box that shrink-to-fits its content, so
   when the columns need more than the reading column the block scrolls. No
   `min-width` and no wrapper element are needed, and `<thead>`/`<tbody>` must
   NOT be given their own `display: table` — that makes them independent tables
   and the header stops lining up with the body. */
@media (max-width: 767px) {
  .article-body table:has(tr > *:nth-child(4)) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .article-body table th,
  .article-body table td {
    padding: 8px 10px;
  }
}

/* An unsurvivable `<colgroup>`: any column specified under 10% of the table.

   This is the root cause of the plan-comparison table looking nothing like
   prod, and it is a data problem the theme can only paper over. Prod stated
   column widths TWICE — once on `<col>` and once per cell — and the two
   disagree. Prod renders the per-cell numbers (512 of them, `width: 4813.74%`
   and friends, which browsers normalise to ~16.6% each) and ignores the
   colgroup. The publisher's sanitizer drops the per-cell widths for being
   >= 100% and keeps the colgroup, so a published body carries only the half
   prod overrode, and asks the browser to lay out `70% / 15% / 4% / 4% / 4% / 3%`
   — a layout no reader has ever seen on prod.

   Measured over `docs/`, "has a column under 10%" selects exactly the 2 tables
   where this contradiction exists (plans-and-features 3%, understand-admin-roles
   9%) and none of the other 33 tables whose surviving colgroup is the author's
   only statement and is honoured as-is. A column under a tenth of the table
   cannot hold a header word at any viewport, so there is no case where obeying
   one is right.

   Two prefixes per digit because `[style^="width: 1"]` would also catch 15%
   and 12%. The real fix is converter-side — normalise the per-cell ratios
   instead of discarding them — after which this rule stops matching anything
   and can be deleted.

   `!important` is required, not stylistic: the width being overridden is an
   INLINE `style` attribute on the `<col>`, and an inline declaration beats any
   author rule at any specificity without it. Everything else in this block
   styles what the sanitizer left bare and needs no such escape. */
.article-body table:has(> colgroup > col[style^="width: 0"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 1%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 1."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 2%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 2."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 3%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 3."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 4%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 4."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 5%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 5."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 6%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 6."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 7%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 7."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 8%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 8."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 9%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 9."]) > colgroup > col {
  width: auto !important;
}
/*ARTICLE TABLES end*/
/* =====================================================================
   INLINE ICONS
   Added in v1.7. An icon inside a sentence — the toolbar glyph in
   "Click on the Media, Tools and Integrations ( + ) icon" — was breaking onto
   its own line, in a bordered box, in the sandbox but not on prod.

   Why an image's display is context-dependent at all: `.article-body img`
   (line 1522) sets `display: inherit`, so the image takes its PARENT's
   display. Measured over `docs/`, that resolves to `block` for the 1376 images
   in a `<p>`, `list-item` for the 139 in an `<li>`, `table-cell` for the 47 in
   a `<td>`, and `inline` for the 327 in an `<em>`. So an icon only stays on the
   text baseline if something says so, and normally that is `class="icon"`
   (line 6055, whose `display: unset` computes to `inline`).

   The class is derived at publish time from the width (`convert.py`,
   `ICON_MAX_WIDTH_PX = 36`), which means it is missing from every body
   published before that derivation existed — 93 images in `docs/` are
   icon-width, and a body from before the fix carries the width but not the
   class. This rule keys off the width directly, so the same 36px threshold
   applies whether or not the class made it into the body, and the two agree
   once it has. No `!important` needed: an attribute selector outranks the
   plain `.article-body img` rules it corrects.

   This is a safety net, not the fix. The fix is republishing the affected
   articles so the class is present; see the note in the handover.
   ===================================================================== */
.article-body img[width="1"],
.article-body img[width="2"],
.article-body img[width="3"],
.article-body img[width="4"],
.article-body img[width="5"],
.article-body img[width="6"],
.article-body img[width="7"],
.article-body img[width="8"],
.article-body img[width="9"],
.article-body img[width="10"],
.article-body img[width="11"],
.article-body img[width="12"],
.article-body img[width="13"],
.article-body img[width="14"],
.article-body img[width="15"],
.article-body img[width="16"],
.article-body img[width="17"],
.article-body img[width="18"],
.article-body img[width="19"],
.article-body img[width="20"],
.article-body img[width="21"],
.article-body img[width="22"],
.article-body img[width="23"],
.article-body img[width="24"],
.article-body img[width="25"],
.article-body img[width="26"],
.article-body img[width="27"],
.article-body img[width="28"],
.article-body img[width="29"],
.article-body img[width="30"],
.article-body img[width="31"],
.article-body img[width="32"],
.article-body img[width="33"],
.article-body img[width="34"],
.article-body img[width="35"],
.article-body img[width="36"] {
  display: inline;
  vertical-align: middle;
  border: none;
  border-radius: unset;
}
/*INLINE ICONS end*/

/* Build canary (pattern from the live theme): in the console,
   getComputedStyle(document.documentElement).getPropertyValue('--hc-theme-build') */
:root { --hc-theme-build: "redesign-2.0.26"; }