/* Help Center Aurora theme 
 * NOTE: @import will not work on the zendesk platform
 * base.css is loaded in the header instead
 * includes base reset, styling, and variables for colors, sizing, font, etc
 * IMPORTANT: references to $assets only works in style.css
*/

/* Columns */
.article-columns {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 auto;
  padding: 0 1rem;
  max-width: calc(var(--max-content-width) + 2rem);
}

.main-column {
  margin-bottom: 2.5rem;
}

.main-column-form input {
  width: 100%;
}
.main-column-form label {
  margin: 1rem 0 .5rem
}

.main-column-form input[type="submit"] {
  margin-top: 1rem;
}

.main-column-form .comment-list .comment {
  display: flex;
  gap: 1rem;
}

.main-column-form .comment-form {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--neutral-200);
  border: 1px solid var(--neutral-400);
  border-radius: 0.25rem;
}

.main-column-form .comment-form .comment-container {
  width: 100%;
}

.main-column-form .comment-form .comment-container textarea {
  width: 100%;
  background-color: #fff;
  color: var(--neutral-1000);
  padding: .5rem;
  font-size: 1rem;
}

.main-column-form .comment-form .comment-container textarea::selection,
input::selection {
  background-color: #B4D5FE;
}

.main-column-form .comment-form .comment-container .upload-dropzone {
  width: 100%;
  background-color: #fff;
}

.main-column-form .comment-form .comment-container .upload-dropzone span {
  color: var(--neutral-800);
}

.main-column-form span.optional {
  color: var(--neutral-800);
  font-weight: 400;
  display: inline-block;
  margin-left: .5rem;
  font-size: .875rem;
}

.request-table {
  width: 100%;
}

.logo {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.logo a,
.logo img {
  display: inline-block;
  height: 1.25rem;
  width: auto;
}

.logo img {
  filter: var(--logo-filter);
}

.user-nav {
  text-align: right;
}

[dir="rtl"] .user-nav {
  text-align: left;
}

/* Home page */
.hero-unit {
  background-color: var(--background-header);
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 2rem 0;
  position: relative;
  z-index: 1;
}

.hero-unit-inner {
  display: flex;
  flex-direction: column;
  max-width: 38.5rem;
  margin: 0 1rem;
  width: 100%;
}

.hero-unit .search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 auto;
  width: 100%;
}

.search input[type="search"],
.search input[type="submit"] {
  font-size: 1rem;
  padding: 0.5625rem 0.75rem;
}
.search input[type="search"] {
  flex: 1 1 auto;
}
.search input[type="submit"] {
  padding: 0.5625rem 1rem 0.5625rem 3rem;
  background-image: url(/hc/theming_assets/01HZH3TNPM9X1RP5W30469539N);
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: 1rem center;
}

/* Top FAQs */
.faqs-wrapper {
  display: flex;
  justify-content: center;
  background-color: var(--background-header);
  padding-bottom: 2rem;
}
.faqs-wrapper:not(:has(.faqs-listitem)) {
  display: none;
}
.faqs {
  background-color: var(--background-color);
  border-radius: var(--border-radius);
  border: 2px solid var(--expressive-earth-500);
  flex: 1;
  margin: 0 1rem;
  max-width: var(--max-content-width);
  padding: 1rem;
}

.faqs-headline {
  background-image: url(/hc/theming_assets/01HZH3TNJMK7NY2A4V870A7DGQ);
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 1.5rem;
}

.faqs-listitem {
  padding-bottom: 1rem;
}
.faqs a {
  text-decoration: underline;
}

.faqs-more {
  align-items: center;
  background: none;
  border: none;
  color: var(--link-color);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  justify-content: center;
  padding: 0.5rem 0;
  position: relative;
  width: 100%;
}

.faqs-more-icon {
  transition: transform 0.25s ease-in-out;
}

.faqs-more:hover {
  color: var(--link-hover-color);
}

[data-expanded="true"] .faqs-more-text--more,
[data-expanded="false"] .faqs-more-text--less {
  display: none;
}

[data-expanded="true"] .faqs-more-icon {
  transform: rotate(180deg);
}

/* Knowledge base */
.article-list li {
  margin-bottom: 0.75rem;
}

.article-list li a {
  color: var(--link-color);
  text-decoration: underline;
}
.article-list li a:hover {
  color: var(--link-hover-color);
}

.category {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.category h2 a,
.section h3 a {
  color: var(--text-color);
  font-weight: bold;
}
.knowledge-base {
  padding: 0 1rem;
}
.category-tree {
  margin: 2rem auto 1rem;
  max-width: 73.5rem;
}

.section-tree {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.section-name {
  font-size: 1.5rem;
  font-weight: bold;
}
.section {
  border: 1px solid var(--primary-border-color);
  border-radius: 0.5rem;
  display: flex;
  flex: 1 1 30rem; /* 480px */
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
  max-width: var(--max-content-width);
  padding: 1rem;
  position: relative;
}

html:lang(ja) div,
html:lang(nl) div {
  background-image: none;
}

.section-sidebar {
  margin-top: 0.6rem;
}

.see-all-articles {
  color: var(--link-color);
  display: inline-flex;
  font-weight: bold;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.see-all-articles:hover {
  color: var(--link-hover-color);
}

[dir="rtl"] .see-all-articles-arrow {
  transform: rotate(180deg);
}

.page-header {
  border-bottom: 2px solid var(--primary-border-color);
  margin-bottom: 2rem;
  padding-right: 5rem; /* prevent text covering image*/
  position: relative;
}
.section-image,
.page-header:after {
  display: inline-flex;
  background-repeat: no-repeat;
  background-position: top;
  background-size: auto;
  content: " ";
}
/* lg = 200x180, md = 150x120 */
.section-image {
  flex: 0 0 auto;
  height: auto;
  min-height: 4rem;
  width: 6.25rem; /* 100px */
}
.section-links {
  flex: 1 1 auto;
}
.page-header:after {
  background-position: left bottom;
  height: 4rem;
  width: 5rem;
  right: 0;
  bottom: 0;
  position: absolute;
}
.page-header-h1 {
  position: relative;
  z-index: 1;
}

/* homepage section and section page illustrations 
 * note: separate ids in stage and prod
*/
.section-360012053491 > .section-image,
.section-200771624 > .section-image,
.section-360012053491:after,
.section-200771624:after {
  background-image: url(/hc/theming_assets/01HZH3TPWR8ECTR2KHBYF6BY7P);
}

.section-201844486 > .section-image,
.section-115000838803 > .section-image,
.section-201844486:after,
.section-115000838803:after {
  background-image: url(/hc/theming_assets/01HZH3TQVGZPG3HMJD4TQ2P45Q);
}

.section-201844486:after,
.section-115000838803:after {
  bottom: -0.8rem;
}

.section-201844476 > .section-image,
.section-360012614292 > .section-image,
.section-201844476:after,
.section-360012614292:after {
  background-image: url(/hc/theming_assets/01HZH3TSMQY6385EBX4FTDN8X7);
}
.section-201844466 > .section-image,
.section-200771634 > .section-image,
.section-201844466:after,
.section-200771634:after {
  background-image: url(/hc/theming_assets/01HZH3TQ5D3KKSK1RFN6GE5B87);
}
.section-5713236908045 > .section-image,
.section-200771644 > .section-image,
.section-5713236908045:after,
.section-200771644:after {
  background-image: url(/hc/theming_assets/01HZH3TSGF5YS7S7962H62AEF8);
}
.section-5713312080013 > .section-image,
.section-200801640 > .section-image,
.section-5713312080013:after,
.section-200801640:after {
  background-image: url(/hc/theming_assets/01HZH3TS7T10NNPNRAFQJN6VB6);
  bottom: -1px;
}
.section-5713342181005 > .section-image,
.section-200798504 > .section-image,
.section-5713342181005:after,
.section-200798504:after {
  background-image: url(/hc/theming_assets/01HZH3TQ9Z3QSSAPJKA5TJWM2K);
}
.section-5713367297549 > .section-image,
.section-360002868851 > .section-image,
.section-5713367297549:after,
.section-360002868851:after {
  background-image: url(/hc/theming_assets/01HZH3TS43JV8AE754EEPE2JFG);
}
.section-5713338124045 > .section-image,
.section-360013970032 > .section-image,
.section-5713338124045:after,
.section-360013970032:after {
  background-image: url(/hc/theming_assets/01HZH3TRXMXZ6DMZ5QDJSD6091);
  bottom: -0.5rem;
}
.section-5713382026125 > .section-image,
.section-4418654296333 > .section-image,
.section-5713382026125:after,
.section-4418654296333:after {
  background-image: url(/hc/theming_assets/01HZH3TQJ43VZ46Y4WJFHDNTG0);
}
.section-5713387248013 > .section-image,
.section-4406395135117 > .section-image,
.section-5713387248013:after,
.section-4406395135117:after {
  background-image: url(/hc/theming_assets/01HZH3TPR2Z4BFDP3CVTR6SMX0);
}
/* Japan LINEと連携 (send messages to job seekers) */
.section-4406572201869 > .section-image,
.section-4406572201869:after {
  background-image: url(/hc/theming_assets/01HZH3TRHTHW57JN8E470DQQHJ);
}
/* Japan Employer email / Indeed message */
.section-9534873695629 > .section-image,
.section-9534873695629:after {
  background-image: url(/hc/theming_assets/01HZH3TRCX27G0NF0YPAK77NSP);
}
/* Japan resume maker app */
.section-4406579940365 > .section-image,
.section-4406579940365:after {
  background-image: url($assets-spot-japan-only-resume-2-svg);
}
/* ro Ukranian aid page */
.section-7797527424525 > .section-image,
.section-7797527424525:after,
/* hu Ukranian aid page */
.section-7796869128589 > .section-image,
.section-7796869128589:after,
/* cs Ukranian aid page */
.section-7796702604301 > .section-image,
.section-7796702604301:after {
  background-image: url(/hc/theming_assets/01HZH3TRT03PVWSQT55JH67FHF);
}

/* Sub-nav */
.sub-nav {
  margin: 2rem auto;
  padding: 0 1rem;
  max-width: calc(var(--max-content-width) + 2rem);
  width: 100%;
}
.sub-nav .breadcrumbs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
}
.sub-nav .breadcrumbs li {
  position: relative;
}

.sub-nav .breadcrumbs li a {
  color: var(--link-color);
  font-size: 0.875rem;
  padding-right: 1rem;
}

.sub-nav .breadcrumbs li:not(:last-of-type):after {
  display: inline-block;
  content: "\203A";
  font-size: 1.75rem;
  position: absolute;
  height: 1rem;
  width: 1rem;
  position: absolute;
  right: -0.6rem;
  top: -0.6rem;
}

[dir="rtl"] .sub-nav .breadcrumbs li:not(:last-of-type):after {
  left: -1.3rem;
}

button.close-button {
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: .5rem;
  display: inline-block;
  transition: all 150ms var(--default-transition);
}

button.close-button:active {
  background-color: var(--primary-400);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-shadow: rgba(45, 45, 45, 0.08) 0px 0.125rem 0.25rem 0px inset, rgba(45, 45, 45, 0.12) 0px 0.0625rem 0.1875rem 0px inset, rgba(45, 45, 45, 0.2) 0px 0px 0.125rem 0px inset;
}

button.close-button img {
  display: block;
}

/* Article */
.article-voting {
  margin-top: 2rem;
}
.article-vote-container {
  align-items: center;
  background-color: var(--background-header);
  border-radius: var(--border-radius);
  padding: 1rem;
  width: 100%;
}
.article-vote {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.article-vote-question {
  font-size: 1rem;
}
.article-vote-controls {
  margin: 0 0.5rem;
}
.article-vote-count {
  color: var(--neutral-800);
  min-width: 20%;
}
.article-vote-up,
.article-vote-down {
  color: inherit;
  font-family: inherit;
  background-color: var(--neutral-0);
}
.article-vote-up:before {
  background-size: contain;
  background-image: url(/hc/theming_assets/01HZH3TP50FAZQVEB9J0WVQ8A7);
  background-repeat: no-repeat;
  content: "";
  display: inline-flex;
  height: 1rem;
  width: 1rem;
  margin-right: 0.5rem;
  padding: 2px;
}
.article-vote-down:before {
  background-size: contain;
  background-image: url(/hc/theming_assets/01HZH3TNZ7KRZEWM2XBGSGTKXR);
  background-repeat: no-repeat;
  content: "";
  display: inline-flex;
  height: 1rem;
  width: 1rem;
  margin-right: 0.5rem;
  padding: 2px;
}
.article-voted {
  pointer-events: none;
}

.article-vote-success {
  background-color: transparent;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  padding: 0 1rem;
  margin-top: 0;
  opacity: 0;
  height: 0;
  width: 100%;
  transition: all 300ms var(--default-transition);
  overflow: hidden;
  color: var(--neutral-1000);
}

.article-vote-success.show {
  background-color: var(--success-200);
  border-color: var(--success-400);
  padding: 1rem;
  margin-top: 1rem;
  opacity: 1;
  height: fit-content;
}

.article-vote-success-inner{
  display: flex;
  gap: 1rem;
  flex-direction: row;
}

.article-vote-success-content{
  display: flex;
  gap: 1rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
}

.article-vote-followup {
  color: var(--text-color);
  background-color: transparent;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  padding: 0 1rem;
  margin-top: 0;
  opacity: 0;
  height: 0;
  width: 100%;
  transition: all 300ms var(--default-transition);
  overflow: hidden;
  pointer-events: none;
}

.article-vote-followup.show {
  background-color: var(--background-color);
  border-color: var(--input-border-color-light);
  padding: 1rem;
  margin-top: 1rem;
  opacity: 1;
  height: fit-content;
  pointer-events: all;
}

.article-vote-followup .textarea-wrapper {
  border: 1px solid var(--input-border-color-light);
  border-radius: var(--border-radius);
  background-color: var(--background-textarea);
  padding: .5rem;
  margin: .25rem 0;
}

.article-vote-followup .textarea-wrapper:focus-within {
  border-color: var(--input-border-color-active);
}

.article-vote-followup textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  background-color: var(--background-textarea);
  color: var(--text-color);
  border: 0;
}

.article-vote-followup textarea:focus,
.article-vote-followup textarea:focus-within {
  outline: none;
}

.article-vote-followup input {
  width: 100%;
}

.article-vote-followup .character-count {
  font-size: .875rem;
  color: var(--text-color);
  margin-bottom: .25rem;
  opacity: .75;
}

.article-vote-response-cancel.button {
  width: 100%;
  display: block;
}

  /* BEGIN - article css used in articles editor */
.article-links {
  background-color: var(--background-article-links);
  border-radius: var(--border-radius);
  font-size: 1rem;
  margin: 2rem 0 2.5rem;
  padding: 1rem;
}
.article-links > ul {
  line-height: 2.5;
  margin: 0 0 0 1rem !important;
}
.article-links > h2 {
  align-items: center;
  display: flex;
  font-size: 1.25rem;
  border-bottom: none !important;
  margin: 0 !important;
}
.article-links > h2::before {
  background-image: url(/hc/theming_assets/01HZH3TNJMK7NY2A4V870A7DGQ);
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 0.25rem;
}
.article-links > h2 + p {
  margin-top: 0.5rem;
}
/* 2 column layout */
.article-2col {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.article-2col-image {
  background-color: var(--primary-200);
  flex: 0 1 auto;
  padding: 1rem 1rem 0.5rem;
}
.article-2col:nth-of-type(3) .article-2col-image {
  background-color: var(--expressive-purple-200);
}
.article-2col:nth-of-type(4) .article-2col-image {
  background-color: var(--expressive-green-200);
}
.article-2col:nth-of-type(5) .article-2col-image {
  background-color: var(--expressive-earth-200);
}

.article-2col-content {
  flex: 1 1 auto;
}
:root .article-2col-content ul {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-2col-content li a {
  cursor: pointer;
}
h2 + .article-2col {
  margin-top: 2rem;
}
.article-all-tasks {
  align-items: center;
  display: inline-flex;
  font-weight: bold;
  margin-top: 0.75rem;
  position: relative;
}
.article-all-tasks:after {
  display: inline-flex;
  background-image: url(/hc/theming_assets/01HZH3TMWTXKJVMYVZ8WS2ZZ8E);
  content: "";
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  position: absolute;
  right: -2rem;
}
/* article callout boxes */
.text-info, /* info DEPRECATED */
.text-tip,
.text-idea {
  align-items: center;
  background-color: var(--primary-100);
  border-left: 7px solid var(--expressive-green-400);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  color: var(--neutral-1000);
  display: block;
  font-size: 0.875rem;
  margin: 0.5rem 0;
  padding: 1.25rem 1rem 1.25rem 2.75rem;
  position: relative;
}
.text-tip:before,
.text-idea:before {
  display: inline-block;
  background-image: url(/hc/theming_assets/01HZH3TNEQ59Y56FGN710MESKS);
  content: "";
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 0.25rem;
  vertical-align: bottom;
  position: absolute;
  left: 0.75rem;
  top: 1.25rem;
}
.text-idea:before {
  background-image: url(/hc/theming_assets/01HZH3TPADXKH5M3W3CDPW1WZS);
}
.text-tip {
  border-left-color: var(--primary-700);
}
.text-idea {
  background-color: var(--warning-200);
  border-left-color: var(--warning-700);
}
.text-info > div, .text-tip > div, .text-idea > div{
  margin-top: .5rem;
}

.text-info a[target="_blank"], .text-tip a[target="_blank"], .text-idea a[target="_blank"] {
  display: inline-flex;
  align-items: center;
}

/* END - article css used in articles editor */

button.article-vote-up.article-voted {
  color: var(--success-800);
  border-color: var(--success-800);
}

button.article-vote-down.article-voted {
  color: var(--warning-1000);
  border-color: var(--warning-700);
  background-color: var(--warning-200);
}

/* Side column */
.side-column h2 {
  border-bottom: 2px solid var(--primary-border-color);
  font-size: 1.25rem;
  padding-bottom: 0.5rem;
  padding-right: 4.5rem;
  margin: 0 0 1rem;
}
.side-column li {
  margin-bottom: 0.75rem;
}

.visibility-internal-icon:before {
  content: "\1F512";
  display: inline-block;
  font-family: "entypo";
  text-align: center;
  width: 13px;
}

.related-articles {
  margin-bottom: 2.5rem;
}

.article-links a,
.related-articles a {
  text-decoration: underline;
}
.article-links a:hover,
.related-articles a:hover {
  text-decoration: none;
}

.related-articles-title,
.need-help-title {
  position: relative;
}

.related-articles-title:after,
.need-help-title:after {
  background-image: url(/hc/theming_assets/01HZH3TQEBD1TA7T714YY9Q288);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-flex;
  height: 4rem;
  width: 5rem;
  position: absolute;
  right: 0;
  bottom: -0.6875rem;
  z-index: -1;
}

.related-articles-title:after {
  background-image: url(/hc/theming_assets/01HZH3TQZKCBKVCVVBJT2WXY40);
  bottom: -0.5rem;
}
.need-help-title:after {
  background-image: url(/hc/theming_assets/01HZH3TRP9CMWM4W9HRN3S18RX);
  bottom: -0.8rem;
}
.need-help-wrapper {
  display: flex;
}
.need-help {
  display: none;
}

/* search results */
.search-results {
  margin: 0 auto;
  padding: 0 2rem;
  max-width: var(--max-content-width);
}
.search-results h1 {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}
.search-results-subheading {
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.search-results-list {
  margin-bottom: 1.5rem;
}
.search-result {
  border-bottom: 1px solid var(--primary-border-color);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
.search-result > a {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.error-page {
  margin: 0 auto;
  max-width: 35rem;
}
.error-page h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.header {
  background-color: var(--background-header);
  border-bottom: none;
  position: relative;
}
.header-title {
  font-size: 1.25rem;
  margin: 0 2rem 0 0;
}
[dir="rtl"] .header-title {
  margin: 0 0 0 2rem;
}
.header-title a {
  color: var(--text-color);
  font-weight: bold;
}
.header-logo {
  align-items: center;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--primary-border-color);
  display: flex;
  gap: 1rem;
  padding: 1rem 1.5rem;
  position: relative;
  z-index: 2;
}
.header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
}
.header-nav-list {
  align-items: center;
  display: flex;
  gap: 2rem;
}
.header-nav-list a {
  font-size: 0.875rem;
  color: var(--text-color);
}
.header-colormode {
  align-items: center;
  display: flex;
  margin-left: auto;
}
[dir="rtl"] .header-colormode {
  margin-left: unset;
  margin-right: auto;
}
/* mobile nav */
.mobile-nav-button {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  padding: 0;
  position: relative;
  height: 1.5rem;
  width: 1.5rem;
}
/* increase clickable area */
.mobile-nav-button:before {
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: 44px;
  height: 44px;
}
.mobile-nav-button::after {
  content: "";
  position: absolute;
  left: 4px;
  display: block;
  width: 1rem;
  top: -4px;
  height: 0;
  box-shadow: 0 10px 0 1px var(--text-color), 0 16px 0 1px var(--text-color),
    0 22px 0 1px var(--text-color);
}
.show-menu .mobile-nav-button::after {
  top: 1px;
}
/* Mobile styles: 52rem = 832px */
@media screen and (max-width: 52rem) {
  .mobile-nav-button {
    display: flex;
    font-size: 1.2rem;
    margin: 1rem 1.5rem 0 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
  }
  [dir="rtl"] .mobile-nav-button {
    margin: 1rem 0 0 1.5rem;
    left: 0;
    right: unset;
  }
  .show-menu .mobile-nav-button::after {
    color: var(--text-color);
    content: "\2715";
    box-shadow: none;
  }
  .header {
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .header-nav {
    margin-left: auto;
  }
  [dir="rtl"] .header-nav {
    margin-right: auto;
  }
  .header-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    position: static;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }
  .show-menu .header-overlay {
    width: 100vw;
    height: 100vh;
  }
  .show-menu.header-nav {
    position: fixed;
    top: 0;
    right: 0;
  }
  .header-nav-list {
    align-items: unset;
    background-color: var(--background-color);
    display: block;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    max-width: 30rem;
    overflow-x: hidden;
    padding: 5rem 1.5rem 1rem;
    position: fixed;
    right: -70%;
    top: 0;
    transition: right 0.3s ease-in-out;
    width: 70%;
    z-index: 1;
  }
  [dir="rtl"] .header-nav-list {
    left: -70%;
    transition: left 0.3s ease-in-out;
  }
  .header-nav-list[aria-hidden="true"] > li {
    display: none;
  }
  .show-menu .header-nav-list {
    right: 0;
  }
  [dir="rtl"] .show-menu .header-nav-list {
    left: 0;
    right: unset;
  }
  .header-colormode {
    background-color: var(--background-color);
    display: none;
    margin-left: unset;
  }
  .show-menu + .header-colormode {
    z-index: 1;
    display: initial;
    position: fixed;
    top: 3.5rem;
    right: 1.28rem;
  }
  [dir="rtl"] .show-menu + .header-colormode {
    display: initial;
    left: 1.28rem;
    right: unset;
  }
  .show-menu .dropbtn {
    cursor: initial;
    font-weight: bold;
    margin-bottom: 0.5rem;
    pointer-events: none;
  }
  .show-menu .dropbtn::after {
    background: none;
  }
  .show-menu .dropdown-content {
    border: 0;
    box-shadow: none;
    display: inline;
    left: unset;
    right: 0;
    position: relative;
  }
  .dropdown-content a,
  .show-menu .header-nav-topic a {
    background-image: url(/hc/theming_assets/01HZH3TN6E9MKGAPPB9558KZ4A);
    background-position: right center;
    background-repeat: no-repeat;
    display: flex;
    padding: 0.5rem 0;
  }
  .show-menu .dropdown-content a {
    border: none;
    border-bottom: 1px solid var(--primary-border-color);
    margin-left: 0.75rem;
    padding: 0.65rem 1rem 0.65rem 0;
    width: calc(100% - 0.75rem);
  }
  .show-menu .dropdown-content a:last-of-type {
    border: 0;
  }
  .show-menu .header-nav-topic a {
    font-weight: bold;
    width: 100%;
  }
}

.breadcrumbs li a {
  font-size: 0.875rem;
  text-decoration: underline;
}
.breadcrumbs li a:hover {
  text-decoration: none;
}

.footer {
  position: sticky;
  top: 100vh;
  padding: 1rem;
}

.footer h2 {
  margin-bottom: 0;
}

.footer a {
  color: var(--text-color);
  text-decoration: underline;
}

.footer-inner {
  font-size: 0.875rem;
  padding: 1rem 0 0;
}
.cookie-alert {
  display: none;
  margin: 0.5rem 0;
  white-space: normal;
}
.cookie-alert-link {
  display: inline-block;
  padding: 0 4px;
}

/* Topics dropdown */
.dropdown {
  position: relative;
}

.dropbtn a {
  font-family: var(--font-family);
  color: var(--link-color);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: normal;
}

.dropbtn {
  align-items: center;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: normal;
  gap: 0.25rem;
  padding: 0;
  white-space: nowrap;
}

.dropbtn::after {
  background-image: url(/hc/theming_assets/01HZH3TN28CJDWM83RZ4PMSKHK);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-flex;
  filter: invert(0.55);
  height: 1.25rem;
  width: 1.25rem;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  background: var(--background-color);
  border-radius: 0.5rem;
  border: 1px solid var(--neutral-400);
  bottom: auto;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  display: none;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 0.5rem;
  max-height: 60vh;
  min-height: 20rem;
  min-width: 170px;
  overflow-y: auto;
  padding: 10px 0;
  position: absolute;
  top: auto;
  z-index: 1000;
}

[dir="ltr"] .dropdown-content a {
  text-align: left;
}
[dir="rtl"] .dropdown-content {
  left: 0;
  right: unset;
}
[dir="rtl"] .dropdown-content a {
  text-align: right;
}
/* Links inside the dropdown */
.dropdown-content a {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0;
  color: var(--link-neutral-color);
  cursor: pointer;
  display: block;
  line-height: inherit;
  padding: 0.65rem 1.25rem;
  white-space: nowrap;
  width: 100%;
  white-space: break-spaces;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  color: var(--link-neutral-hover-color);
}

/* Show the dropdown menu (triggered with JS) */
.show {
  display: block;
}

/* MW-Notificaiton Banner CSS */
/* https://github.com/moderatorwes/Notification-Banner */
/* Common, default styles for the notification box */
.alertbox:empty {
  display: none;
}
.ns-box {
  background: var(--primary-800);
  border-bottom: 1px solid var(--primary-900);
  color: #fff;
  display: flex;
  left: 0;
  padding: 1rem 1rem 0.5rem;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.ns-box-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  gap: 1rem;
  margin: 0.5rem 0 0 1rem;
  width: 100%;
}

.ns-box-content strong a {
  font-weight: inherit;
}

.ns-box-content > p {
  margin-top: 0;
}

.ns-box-content-button {
  flex-shrink: 0;
}

.ns-box a {
  color: inherit;
  text-decoration: underline;
}

.ns-box a:hover,
.ns-box a:focus {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}

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

.ns-box-icon {
  padding-top: 0.375rem;
}

.ns-box-icon:before {
  display: inline-block;
  content: "";
  background-image: var(--icon-information);
  background-repeat: no-repeat;
  background-size: contain;
  height: 1.875rem;
  width: 1.5rem;
}

:root .ns-button {
  background-color: transparent;
  border: 1px solid #fff;
  text-decoration: none;
}
:root .ns-button:hover {
  color: inherit;
}

/* styles: product (default), critical, experience, response */
.ns-box.critical {
  background: var(--alert-800);
}
.ns-box.experience {
  background: var(--warning-700);
}
.ns-box.experience .ns-box-icon:before {
  background-image: var(--icon-warning);
}
.ns-box.response {
  background: var(--neutral-800);
}
.ns-box.response .ns-box-icon:before {
  background-image: var(--icon-placeholder);
}

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

.article-form {
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0px 2px 4px 0px rgba(45, 45, 45, 0.12), 0px 1px 3px 0px rgba(45, 45, 45, 0.16), 0px 0px 2px 0px rgba(45, 45, 45, 0.2);
}

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

/* Mobile styles: 30rem = 480px */
@media screen and (max-width: 30rem) {
  .header-logo {
    justify-content: center;
  }
  .hero-unit {
    padding-bottom: 2rem;
  }
  .section {
    flex-direction: column;
  }
  .section-image {
    background-position: bottom left;
  }
  /* note: unable to change the search input to a button 
    cannot easily style like the design with icon only for mobile
  */
  .search input[type="submit"] {
    background-image: none;
    flex: 1 1 100%;
    padding: 0.5625rem 1rem;
  }
  .ns-box-content {
    flex-wrap: wrap;
    gap: 0;
  }
}