@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
 	overflow-x: clip;
}

body {
  margin: 0;
  overflow: hidden;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;

}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

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

body {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(51, 51, 51, 1);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
  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(3, 33, 125, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(1, 42, 165, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

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

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

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  .blocks-list {
    gap: 8px !important;
  }
}

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

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

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

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

.mm-container {
  max-width: 1160px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

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

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

.button-secondary {
  color: #666;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #666;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(51, 51, 51, 1);
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

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

.split-button button {
  background-color: rgba(3, 33, 125, 1);
  border: 0;
  color: rgba(255, 255, 255, 1);
  height: 32px;
  line-height: 16px;
  outline-color: rgba(3, 33, 125, 1);
}

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

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #666;
  font-size: 13px;
  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 {
  max-width: 650px;
  padding: 0 !important;
  margin:auto;
  display: block !important;
	justify-content: left !important;
  gap: 64px;
}
}

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

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

.form-field input {
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid rgba(3, 33, 125, 1);
}

.form-field input[type=text] {
  border: 1px solid #87929D;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(3, 33, 125, 1);
}

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

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #87929D;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid rgba(3, 33, 125, 1);
  text-decoration: none;
}

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

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

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

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

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

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

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

.form footer a {
  color: #666;
  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: rgba(1, 42, 165, 1);
}

@media (max-width: 768px) {
  .form {
    padding: 0 !important;;
  }
}

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

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

.logo span {
  margin: 0 10px;
  color: rgba(3, 33, 125, 1);
}

.logo a {
  display: inline-block;
}

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

.sign-in a {
  display: none !important;
}

a.sign-in {
    display: none;
}
.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 100px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}

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

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

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 90px;
  z-index: 100;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}

.nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories {
  padding: 0 16px;
}

.nav-wrapper-mobile .menu-list-mobile-items .nav-section {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(51, 51, 51, 1);
  font-weight: 600;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(51, 51, 51, 1);
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(51, 51, 51, 1);
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

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

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

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: rgba(3, 33, 125, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(3, 33, 125, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(3, 33, 125, 1);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}

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

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(3, 33, 125, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: rgba(255, 255, 255, 1);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: #666;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
	justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: #666;
  display: inline-block;
}

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

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #666;
  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(3, 33, 125, 1);
}

@media (max-width: 768px) {
  .breadcrumbs { 
  flex-wrap: wrap;
  }
  .sub-nav {
    margin-bottom:32px !important;
  }
}

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

.search {
  border-color: #87929D;
  border-radius: 16px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: rgba(3, 33, 125, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #FBF7FB;
  border-radius: 16px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #FBF7FB;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 45px;
  width: 100%;
  font-size: 16px;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: rgba(3, 33, 125, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(3, 33, 125, 1);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(3, 33, 125, 1);
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: rgba(3, 33, 125, 1);
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: rgba(3, 33, 125, 1);
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: rgba(3, 33, 125, 1);
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
  pointer-events: none;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01K9M1DDYEDRDNWHZFHDM8Q5E6);
  background-position: center;
  background-size: cover;
  min-height: 200px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
/*   top: 50%; */
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0;
}
.hero-text {
  color: rgba(3, 33, 125, 1);
}
.hero-text h3{
  margin: 0;
  font-weight: 400;
  font-size: 16px;
}
.hero-text h1 {
  padding-bottom: 16px;
  font-weight: 600;
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

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

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 8px 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0;
  }
}
.blocks-item {
  border: 1px solid rgba(3, 33, 125, 1);
  border-radius: 16px;
  box-sizing: border-box;
  color: rgba(3, 33, 125, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0;
  max-width: 280px;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0;
  }
}
@media (max-width: 768px) {
  .blocks-item {
    max-width: 160px !important;
    max-height: 140px !important;
  }
  .blocks-item-link {
    gap: 4px !important;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #E4E6F5;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(3, 33, 125, 1);
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(51, 51, 51, 1);
}
.blocks-item-link {
  color: rgba(3, 33, 125, 1);
  padding: 32px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
  align-items: center;
  gap: 8px;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(3, 33, 125, 1);
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
  display:none;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}
.blocks-list {
  gap: 24px;
}

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

.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
  color: rgba(3, 33, 125, 1);
}

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

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

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

/***** Recent activity *****/
.recent-activity {
  padding: 0 80px;
  display:none;
}

.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 a {
  color: #03217D;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 14px;
  font-weight: 400;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.recent-activity-item-meta {
  color: rgba(51, 51, 51, 1);
  margin: 15px 0 0 0;
  float: none;
  display: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(1, 42, 165, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #0F3554;
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(3, 33, 125, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

@media (max-width: 768px) {
    .recent-activity {
    padding: 0 1rem;
  }
}

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

#main-content-small-padding {
 padding-top: 24px; 
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 1024px) {
.section-tree .section {
  flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
}
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: rgba(51, 51, 51, 1);
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: rgba(51, 51, 51, 1);
}

.icon-star {
  color: rgba(3, 33, 125, 1);
  font-size: 18px;
}

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

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

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

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
@media (max-width: 768px) {
  .article-container {
    gap: 0px;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
/*   margin-bottom: 40px; */
  margin-bottom: 0px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}

/* Article Author Hidden */
.article-author {
  margin-bottom: 10px;
  display:none; 
}
/* Article Subscribe Hidden */
.article-subscribe{
  display:none; 
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(1, 42, 165, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #0F3554;
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
	margin: 0 0 40px;
  /*   margin: 40px 0; */
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
/*   display: flex; */
  display: none;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #666;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(3, 33, 125, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  gap: 24px;
}
@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;
  display: none;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(1, 42, 165, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #0F3554;
}
.article-return-to-top {
  border-top: 1px solid #ddd;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(51, 51, 51, 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 {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

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

.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 .attachment-icon {
  color: rgba(51, 51, 51, 1);
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

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

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

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

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

.share a {
  color: #666;
}
.share a:hover {
  text-decoration: none;
  color: rgba(3, 33, 125, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #666;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(1, 42, 165, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #0F3554;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #666;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(3, 33, 125, 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 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: rgba(3, 33, 125, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(1, 42, 165, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #0F3554;
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

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

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

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

.vote-up:hover,
.vote-down:hover {
  color: rgba(3, 33, 125, 1);
}

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

.vote-voted {
  color: rgba(3, 33, 125, 1);
}

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

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

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

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

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

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 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 button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: #C994DD;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true] {
  background-color: rgba(3, 33, 125, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true]:hover {
  background-color: #C994DD;
  border-color: #ccc;
}
.community-follow button::after {
  border-left: 1px solid rgba(3, 33, 125, 1);
  content: attr(data-follower-count);
  color: rgba(3, 33, 125, 1);
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(3, 33, 125, 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(3, 33, 125, 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: rgba(1, 42, 165, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #666;
  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 {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(51, 51, 51, 1);
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(3, 33, 125, 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-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #666;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(1, 42, 165, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #0F3554;
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #666;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(3, 33, 125, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

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

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

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

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

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(3, 33, 125, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #F7F0F8;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 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;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

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

.no-activities {
  color: #666;
}

/***** 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: #666;
  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(3, 33, 125, 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(3, 33, 125, 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: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 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 {
  line-break: strict;
  color: #666;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}
.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
  padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
  padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
  margin-right: 10px;
}

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

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

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

.meta-group * {
  display: inline;
}

.meta-data {
  color: #666;
  font-size: 13px;
  display: none;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

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

.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: 16px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

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

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

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}

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

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}

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

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

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
}

.profile-stats .stat-label {
  color: #666;
  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(3, 33, 125, 1);
  border-radius: 4px;
  color: rgba(3, 33, 125, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}

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

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

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

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

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

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

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 1);
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

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

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
    padding: 0 !important;
    display: block !important;
    flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: rgba(51, 51, 51, 1);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 15px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(3, 33, 125, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: rgba(3, 33, 125, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(3, 33, 125, 1);
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #666;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(3, 33, 125, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: rgba(1, 42, 165, 1);
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #0F3554;
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}

.category-icon {
  max-width: 48px;
}

.section-subheading {
	padding: 0px 0px;
}

.mm-link {
  color: #C994DD;
}

.text-centered-container {
	text-align: center;
  color: #03217d;
  max-width: 90%;
  margin: auto;
}

/* main hero banner */
#main-content {
  padding: 40px 80px 0 80px;
  display: flex;
  justify-content: center;
  gap: 64px;
}

@media (max-width: 768px) {
  #main-content {
    padding: 24px 24px 0 24px;
    flex-direction: column-reverse;
    align-items: center;
    gap: 24px;
    display:none;
  }
  .home-hero-image {
    max-width: 100%;
  }
  .hero-text {
    text-align: center;
  }
}

.home-hero-image {
  max-width: 380px;
  border-radius: 16px;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  width: 100%;
  max-width: 400px;
}

.left-menu-category-table-container {
  border: 1px solid #8190BE;
  border-radius: 16px;
  overflow: hidden;
  min-width: 290px;
  font-weight: 500;
}

.left-menu-category-cell img {
  max-width:36px;
}

.left-menu-category-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid #8190BE;
}

.left-menu-category-row:last-child {
  border-bottom: none;
}

.left-menu-category-cell.left-menu-category.last {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .category-container, .section-container {
    gap: 24px;
    display: flex;
    flex-direction:column-reverse;
    padding: 0 8px;
    margin-bottom: 24px;
  }
}

@media (min-width: 768px) {
  .category-content-right {
    width: 900px;
  }
}

.back-to-categories {
  padding: 4px 0;
}

/* Hide Subject/Description for Influencer Form */
#new-request-form:has(input[value="5547082092191"]) .StyledField-sc-12gzfsu-0:has(input[name*="request[subject]"]),
#new-request-form:has(input[value="5547082092191"]) .StyledField-sc-12gzfsu-0:has(textarea[name*="request[description]"]) {
  display: none !important;
}

/* Hide Subject/Description for Price Promise Form */
#new-request-form:has(input[value="5558227282463"]) .StyledField-sc-12gzfsu-0:has(input[name*="request[subject]"]),
#new-request-form:has(input[value="5558227282463"]) .StyledField-sc-12gzfsu-0:has(textarea[name*="request[description]"]) {
  display: none !important;
}

/* ===== Full-width navy header (match main site) ===== */

/* Solid #03217D bar that stretches the full viewport width,
   while the logo + nav stay aligned to the existing 1160px grid */

.header {
  background-color: #03217D;
  padding: 25px 0;
  min-height: 90px;
}
.header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;      /* centre the full-width block */
  background-color: #03217D;
  z-index: -1;             /* sits behind the logo + nav */
}
@media (max-width: 1160px) {
  .header {
    padding: 25px 5%;
    width: 100%;
  }
}
/* White logo wordmark (only shows if show_brand_name is on) */
.logo span {
  color: #FFFFFF;
}

/* Desktop nav links: white, with a little room underneath */
.nav-wrapper-desktop a {
  color: #FFFFFF;
	font-weight: 600;
  font-size: 15px;
}
.nav-wrapper-desktop a:hover,
.nav-wrapper-desktop a:focus,
.nav-wrapper-desktop a:active {
  color: #FFFFFF;                 /* stay white on hover */
  text-decoration: underline;
  text-underline-offset: 6px;     /* drops the underline like the main site's "Quiz" item */
}

/* Mobile hamburger on the navy bar */
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  color: #FFFFFF;
}
/* keep it visible once the menu opens (light circle appears behind it) */
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  color: #03217D;
}

/* ===== Full-width navy footer (match main site) ===== */
.footer {
  border-top: 0;
  margin-top: 60px;
  padding: 48px 0 24px;
  background-color: #03217D;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;          /* clips the zzz svg to the footer */
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: #03217D;
  z-index: 0;
}

/* zzz watermark */
.footer-zzz {
  width: 100%;
  max-width: 2000px;
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  z-index: 0;
  pointer-events: none;
}

/* keep content above the background layers */
.footer-inner,
.footer-bottom {
  position: relative;
  z-index: 1;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}

.footer a,
.footer a:visited {
  color: #FFFFFF;
  font-weight: 500;
}
.footer a:hover,
.footer a:focus {
  color: #FFFFFF;
  text-decoration: underline;
}

.footer-col {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.footer-heading {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 16px;
}
.footer-col .footer-heading ~ .footer-heading {
  margin-top: 24px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.footer-links li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Badges column */
.footer-badges {
  gap: 20px;
}
.footer-trustpilot {
  display: inline-block;
}
.footer-trustpilot svg {
  width: 112px;
  height: auto;
  display: block;
  margin-bottom: 6px;
}
.footer-trust-text {
  font-size: 13px;
}
.footer-award-imgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-award-imgs img {
  height: auto;
}

/* Bottom bar */
.footer-bottom {
  max-width: 1160px;
  margin: 32px auto 0;
  padding: 16px 5% 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-bottom {
    padding: 16px 0 0;
    width: 90%;
  }
}
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-language-selector button {
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 32px;
  }
  .footer-zzz {
    left: 0;
    bottom: 1rem;
  }
}
.footer-whatsapp {
  display: block;
  max-width: 100%;
}
/* Force Poppins on header + footer and everything inside them */
.header,
.header *,
.footer,
.footer * {
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
}

/* ===== Article call-to-action buttons ===== */
.article-body a.mm-btn,
.article-body a.mm-btn:visited {
  display: inline-block;
  background-color: #03217D;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 28px;
  border-radius: 24px;
  text-decoration: none;
  margin: 0 8px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.article-body a.mm-btn:hover,
.article-body a.mm-btn:focus,
.article-body a.mm-btn:active {
  background-color: #C994DD;
  color: #03217D;
  text-decoration: none;
}

/* Purple pill variant (like "More on sustainability") */
.article-body a.mm-btn-alt,
.article-body a.mm-btn-alt:visited {
  background-color: #C994DD;
  color: #03217D;
}
.article-body a.mm-btn-alt:hover,
.article-body a.mm-btn-alt:focus,
.article-body a.mm-btn-alt:active {
  background-color: #03217D;
  color: #FFFFFF;
}

.article-share{
  display:none;
}

.snooze-banner {
  display: block;
  background-image: url(/hc/theming_assets/01KX3V6SRH81MFM9JESQ44GYQC);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  aspect-ratio: 1032 / 360;
  width: 90%;
  max-width: 1160px;     /* was 890px */
  margin: 40px auto;
  overflow: hidden;
}

@media (max-width: 768px) {
  
  
  .footer {
    margin-top: 0px;
  }
}

/* ===== Homepage category carousel ===== */
/* .mm-cats lives inside the full-bleed band, so it must recreate
   the .container geometry EXACTLY — keep these in sync with .container */
.mm-cats {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .mm-cats { 
    padding: 0;
    width: 90%;
  }
}
@media (max-width: 768px) {
  .mm-cats {
    padding: 0 24px;
  }
}

/* NEW — full-width light band behind the carousel (matches the main site) */
.mm-cats-band {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 40px -50vw;        /* full-bleed sideways + vertical spacing */
  padding: 48px 0;
  background: #F4F5F9;       /* the light lavender from the main site */
  overflow: hidden;          /* clips the zzz watermark to the band */
}

/* faint navy zzz watermark (same treatment as your footer) */
.mm-cats-zzz {
  position: absolute;
  bottom: 1.5rem;
  left: 3rem;
  width: 100%;
  max-width: 2000px;
  z-index: 0;
  pointer-events: none;
}

/* drag-to-scroll affordance */
.mm-cats-scroller { cursor: grab; }
.mm-cats-scroller.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;    /* let the drag move freely, no snapping mid-drag */
  user-select: none;
}
.mm-cats-scroller.is-dragging a { pointer-events: none; }
.mm-cats-scroller img { -webkit-user-drag: none; user-select: none; }

.mm-cats-heading {
  text-align: center;
  color: #03217D;
  margin-bottom: 24px;
}

/* The horizontal scroll row */
.mm-cats-scroller {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  padding-bottom: 12px;                /* room for the scrollbar */
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #C994DD transparent;
  width: max-content;      /* shrink to the width of the cards… */
  max-width: 100%;         /* …but never wider than the container (so it still scrolls) */
  margin-left: auto;       /* centre the row when it fits */
  margin-right: auto;
}
/* Slim purple scrollbar (WebKit) */
.mm-cats-scroller::-webkit-scrollbar {
  height: 8px;
}
.mm-cats-scroller::-webkit-scrollbar-thumb {
  background: #C994DD;
  border-radius: 4px;
}
.mm-cats-scroller::-webkit-scrollbar-track {
  background: transparent;
}

/* Each card: fixed width so they never squish, just scroll */
.mm-cat {
  flex: 0 0 173px;
  scroll-snap-align: start;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  aspect-ratio: 200 / 300;
}
.mm-cat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pill button overlay */
.mm-cat-btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: #FFFFFF;
  color: #03217D;
  font-weight: 600;
  font-size: 15px;
  min-width: 87%;
  text-align: center;
  padding: 12px 20px;
  border-radius: 24px;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.mm-cat-btn:hover,
.mm-cat-btn:focus {
  background: #03217D;
  color: #FFFFFF;
  text-decoration: none;
}
.mm-cat:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.blocks-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 8px 0;
/*   width: 90%; */
  margin: auto;
}
.blocks-item {
  flex: none;          /* grid controls sizing now */
  max-width: none;     /* let each card fill its column */
}
.mm-cats-scroller img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;   /* let the mousedown fall through to the scroller/anchor */
}
@media (max-width: 768px) {
  .blocks-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px !important;
  }
  .blocks-item {
    max-width: none !important;   /* beat the theme's !important */
    max-height: none !important;
  }
}

/* ===== Full-width hero banner ===== */
#main-content.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: 48px 5%;
  margin-bottom: 40px;
  /* full-bleed background */
  background-image: url({{asset 'home-hero-image.png'}}) !important;   /* or a wide banner asset */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* stretch the background edge-to-edge */
#main-content.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: inherit;          /* reuse the same image */
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* optional dark overlay so text stays readable */
#main-content.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: linear-gradient(
    90deg, 
    rgba(63 63 63 / 73%) 0%, 
    rgba(44 44 44 / 59%) 55%,
		rgba(79 79 79 / 44%) 100%
  );
  z-index: 1;
}

.hero-left {
  position: relative;
  z-index: 2;
  max-width: 520px;
  /* no background / padding / border-radius needed now */
}
.hero-text h1,
.hero-text h3 {
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* hide the old right-hand lorry image (now it's the background) */
.hero-right {
  display: none;
}
#main-content.hero .search {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  #main-content.hero {
    display: flex;             /* was display:none in your current mobile rule */
    min-height: 280px;
    padding: 32px 24px;
    text-align: center;
  }
}

/* ===== Trustpilot promo bar (above header) ===== */
.promotion-bar-header {
  background-color: #022a1c;
  color: #FFFFFF;
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
  font-size: 14px;
}
.promotion-bar-header__link,
.promotion-bar-header__link:visited,
.promotion-bar-header__link:hover,
.promotion-bar-header__link:focus {
  display: block;
  color: #FFFFFF;
  text-decoration: none;
}
.promotion-bar-header__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
@media (min-width: 1160px) {
  .promotion-bar-header__inner {
    padding: 8px 0;
    width: 90%;
  }
}
.promotion-bar-header__inner img {
  display: block;
}
.promotion-bar-header__innerText .no-margin {
  margin: 0;
}
.promotion-bar-header__innerText strong {
  color: #6FBF97;   /* the green "Excellent" — nudge toward Trustpilot green #00B67A if you want it punchier */
}
@media (max-width: 640px) {
  .promo-bar-hide-mobile {
    display: none;
  }
}

.promotion-bar-header__inner svg {
  display: block;
  flex-shrink: 0;
}

/* ===== Main-site style mobile header ===== */
@media (max-width: 1023px) {
  .header {
    position: relative;
    justify-content: center;
  }
  .header .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;            /* stops the centred logo blocking icon taps */
  }
  .header .logo a { pointer-events: auto; }
  .header .logo img {
    max-height: 38px;
  }

  .nav-wrapper-mobile { width: 100%; }

  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .mobile-bar-group {
    display: flex;
    gap: 22px;
  }

  /* stacked icon + label buttons — force white on ALL of them */
  .mobile-icon-btn,
  .mobile-icon-btn:link,
  .mobile-icon-btn:visited,
  .mobile-icon-btn:hover,
  .mobile-icon-btn:focus,
  .mobile-icon-btn:active {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 0;
    min-width: 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
  }
  .mobile-icon-btn svg {
    width: 24px;
    height: 24px;
    color: #FFFFFF;        /* currentColor fills/strokes now white */
  }
  .mobile-icon-label { color: #FFFFFF; }

  /* neutralise the theme's big circular hamburger tap-target */
  .mobile-bar .menu-button-mobile .icon-menu,
  .mobile-bar .menu-button-mobile[aria-expanded=true] .icon-menu {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #FFFFFF;
  }

  /* ---- Search panel: match main-site pill inside the navy bar ---- */
  .mobile-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #03217D;                 /* same navy as the header, not white */
    padding: 0 5% 16px;
    z-index: 3;
  }
  .mobile-search-panel[hidden] { display: none; }

  /* the Zendesk .search wrapper -> translucent lighter-navy pill */
  .mobile-search-panel .search {
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    border-radius: 12px;
  }
  .mobile-search-panel .search:focus-within {
    border: 0;
    background: rgba(255, 255, 255, 0.24);
  }
  .mobile-search-panel .search input[type=search],
  .mobile-search-panel .search .clear-button {
    background: transparent;
    color: #FFFFFF;
  }
  .mobile-search-panel .search input[type=search]::placeholder {
    color: rgba(255, 255, 255, 0.75);
  }
  /* the theme's search icon sits left; recolour it white */
  .mobile-search-panel .search-icon { color: #FFFFFF; }
}

/* Very small screens: drop the labels so icons don't crowd the logo */
@media (max-width: 440px) {
  .mobile-icon-label { display: none; }
  .mobile-bar-group { gap: 20px; }
  .header .logo img { max-height: 32px; }
}

/* ===== Reusable "Need more help?" CTA section ===== */
/* No width here on purpose: pages that drop the CTA in at template top level (home,
   new_request) inherit the layout's own gutters, and setting a width here would inset it
   twice. The custom pages need the opposite — see .mm-fin/.mm-guide below. */
.mm-cta {
  max-width: 1160px;
  margin: 56px auto;
}

/* Custom pages wrap the CTA in a full-bleed div (.mm-fin, .mm-guide) that has no padding of
   its own, so the CTA was rendering edge to edge while every section above it sat at 90%.

   .container has three states, and the CTA has to match all of them or it lands a few pixels
   off the sections above it:
     <=768px      padding 0 16px   -> a fixed 16px gutter, NOT a percentage
     768–1160px   padding 0 5%     -> equivalent to width 90%
     >=1160px     width 90%, max-width 1160px
   90% covers the top two; the fixed gutter below 768px needs its own rule. */
.mm-fin .mm-cta,
.mm-guide .mm-cta { width: 90%; }

@media (max-width: 768px) {
  .mm-fin .mm-cta,
  .mm-guide .mm-cta {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
  }
}
.mm-cta-heading {
  text-align: center;
  color: #03217D;
  margin-bottom: 24px;
}
.mm-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.mm-cta-card {
  border: 1px solid #03217D;
  border-radius: 16px;
  padding: 32px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mm-cta-card h3 {
  color: #03217D;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
}
.mm-cta-card p {
  color: #333;
  line-height: 1.5;
  margin: 0 0 24px;
}
/* push button / socials to the bottom so cards line up regardless of text length */
.mm-cta-btn,
.mm-cta-socials {
  margin-top: auto;
}
.mm-cta-btn,
.mm-cta-btn:visited {
  display: inline-block;
  border: 1.5px solid #C994DD;
  color: #03217D;
  background: transparent;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 32px;
  border-radius: 24px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mm-cta-btn:hover,
.mm-cta-btn:focus {
  background: #C994DD;
  color: #03217D;
  text-decoration: none;
}
.mm-cta-socials {
  display: flex;
  gap: 20px;
  align-items: center;
}
.mm-cta-socials a {
  color: #03217D;
  display: inline-flex;
  transition: color .15s ease;
}
.mm-cta-socials a:hover,
.mm-cta-socials a:focus {
  color: #C994DD;
  text-decoration: none;
}
.mm-cta-socials svg {
  width: 24px;
  height: 24px;
  display: block;
}

@media (max-width: 768px) {
  .mm-cta-grid { grid-template-columns: 1fr; }
  .mm-cta-card { padding: 24px; }
  .mm-cta-heading { font-size: 24px; }
}

/* ===== USP bar (below header, every page) ===== */
.key-msgs-con .container {
  max-width: 1408px;
	padding: 0;
}
.key-msgs-con {
  background: #F4F5F9;
}
.key-msgs-wrap {
  height: 54px;              /* main site: fixed 54px strip */
  overflow: hidden;
}
.key-msgs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
.key-msg,
.key-msg:visited {
  display: inline-flex;
  align-items: center;
  color: #333;               /* main site: dark grey text, navy icons */
  font-size: 14px;
  font-weight: 400;          /* main site: regular, not medium */
  line-height: 30px;
  white-space: nowrap;
  text-decoration: none;
}
.key-msg:hover,
.key-msg:focus {
  color: #333;
  text-decoration: underline;
}
.key-msg svg {
  flex-shrink: 0;
  margin-right: 10px;        /* main site: 10px icon gap */
}
.key-msg small { font-size: 11px; }
.fill-primary { fill: #03217D; }

/* first/last items hug the container edges (main site ≥992px) */
.key-msg:first-child { justify-content: flex-start; }
.key-msg:last-child  { justify-content: flex-end; }

/* 992–1199px: drop "Old mattress removal" (main site's d-lg-none d-xl-flex) */
@media (max-width: 1300px) and (min-width: 1161px) {
  .key-msg--hide-lg { display: none; }
}

/* ≤1060px: single USP, cycling vertically every 5s (JS drives .is-shown) */
@media (max-width: 1160px) {
  .key-msgs-wrap { height: 46px; }
  .key-msgs {
    position: relative;
    justify-content: center;
  }
  /* resting state: parked below, invisible, NO transition —
     so breakpoint changes and post-cycle resets are instant */
  .key-msg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    opacity: 0;
    pointer-events: none;
  }
  /* the two animated states are the only ones that transition */
  .key-msg.is-shown {
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
    transition: transform .45s ease-in-out, opacity .45s ease-in-out;
  }
  .key-msg.is-leaving {
    transform: translate(-50%, calc(-50% - 20px));   /* exits upward */
    opacity: 0;
    transition: transform .45s ease-in-out, opacity .45s ease-in-out;
  }
  /* kill switch for the very first paint when entering mobile mode */
  .key-msgs.mm-no-anim .key-msg { transition: none !important; }
}

/* ============================================================
   Desktop header: burger menu + inline search + Shop Now / Contact
   ============================================================ */

/* Custom search icon inside both header search pills.
   The wrapper anchors the icon; the input's existing 40px
   left padding gives it room. */
.search-with-icon {
  position: relative;
}
.search-with-icon .hdr-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
/* hide the theme's default grey search icon inside these pills */
.search-with-icon .search-icon {
  display: none;
}

/* Hidden on mobile — the existing mobile bar stays exactly as-is */
.menu-button-desktop,
.desktop-search,
.desktop-actions {
  display: none;
}

@media (min-width: 1024px) {

  .header {
    gap: 40px;
  }

  /* ---- Stacked icon + label buttons (mirrors .mobile-icon-btn) ---- */
  .menu-button-desktop,
  .desktop-actions .desktop-icon-btn,
  .desktop-actions .desktop-icon-btn:link,
  .desktop-actions .desktop-icon-btn:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 0;
    min-width: 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
  }
  .menu-button-desktop svg,
  .desktop-actions .desktop-icon-btn svg {
    width: 24px;
    height: 24px;
    color: #FFFFFF;
  }
  .desktop-icon-label {
    color: #FFFFFF;
    white-space: nowrap;
  }
  .menu-button-desktop:hover .desktop-icon-label,
  .menu-button-desktop:focus .desktop-icon-label,
  .desktop-actions .desktop-icon-btn:hover .desktop-icon-label,
  .desktop-actions .desktop-icon-btn:focus .desktop-icon-label {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ---- Search pill: same styling as the mobile search panel ---- */
  .desktop-search {
    display: block;
    flex: 1 1 auto;
    max-width: 260px;
    margin-left: auto; /* logo stays left; search + icons sit right, like the main site */
  }
  .desktop-search .search {
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    border-radius: 12px;
  }
  .desktop-search .search:focus-within {
    border: 0;
    background: rgba(255, 255, 255, 0.24);
  }
  .desktop-search .search input[type=search],
  .desktop-search .search .clear-button {
    background: transparent;
    color: #FFFFFF;
  }
  .desktop-search .search input[type=search]::placeholder {
    color: rgba(255, 255, 255, 0.75);
  }

  /* ---- Shop Now + Contact icons ---- */
  .desktop-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-shrink: 0;
  }

  /* ---- Keep the burger panel usable on desktop ----
     The theme hides .nav-wrapper-mobile at >=1024px; instead we hide
     only the mobile bar + mobile search panel and keep the menu
     panel available as a dropdown for the desktop burger button. */
  .nav-wrapper-mobile {
    display: contents;
  }
  .nav-wrapper-mobile .mobile-bar,
  .nav-wrapper-mobile .mobile-search-panel {
    display: none;
  }
  /* ---- Burger dropdown: mega-menu panel (matches main site) ---- */
  /* Full viewport width: the header container is only 90% wide (max
     1408px), so we centre a 100vw panel under it and use padding to
     keep the content aligned with the header grid */
  .nav-wrapper-mobile .menu-list-mobile {
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100vw;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    border: 0;
    border-top: 1px solid #E4E6F5;
    border-radius: 0;
    box-shadow: 0 24px 48px rgba(3, 33, 125, 0.18);
    padding: 24px calc((100vw - min(90vw, 1408px)) / 2) 32px;
  }
  /* two columns (links | promo card), action row wraps below full-width */
  .nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 48px;
  }
  .nav-wrapper-mobile .menu-list-mobile-items {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }

  /* "Choose your Snooze" promo card (desktop only) */
  .nav-wrapper-mobile .menu-promo {
    display: block;
    flex: 0 0 380px;
    max-width: 380px;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(3, 33, 125, 0.18);
  }
  .nav-wrapper-mobile .menu-promo:hover,
  .nav-wrapper-mobile .menu-promo:focus {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(3, 33, 125, 0.18);
  }
  .nav-wrapper-mobile .menu-promo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
  }

  /* "Help and Support Guides" — column heading like the main site's mega menu */
  .nav-wrapper-mobile .menu-list-mobile-items .nav-section {
    padding: 20px 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: #03217D;
  }

  /* Category links — single column */
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories {
    display: block;
    padding: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a {
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    border-radius: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:hover,
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:focus {
    background: none;
    color: #03217D;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #C994DD;
    text-decoration-thickness: 2px;
  }

  /* Bottom action-button row: full width, below links + promo */
  .nav-wrapper-mobile .menu-list-mobile .menu-contact {
    flex: 1 1 100%;
    width: 100%;
    border-top: 1px solid #eee;
    margin-top: 24px;
    padding: 0;
  }

  /* Signed-in agent row: single line, light blue strip */
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 28px;
    background: #f1f8ff;
    border-radius: 12px;
    padding: 8px 20px;
    margin: 16px 0 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row a,
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row button {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 500;
    color: #03217D;
    background: none;
    border: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row a:hover,
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row a:focus,
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row button:hover,
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row button:focus {
    background: none;
    text-decoration: underline;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row .my-profile {
    gap: 8px;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row .menu-profile-avatar {
    margin: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row .menu-profile-name {
    font-weight: 600;
  }

  /* hide the hairline dividers — spacing does the work now */
  .nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
    display: none;
  }
}

/* ===== Burger menu quick links / action buttons ===== */

/* --- Mobile: full-screen slide-out drawer from the left --- */
@media (max-width: 1023px) {
  .nav-wrapper-mobile .menu-list-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #FFFFFF;
    border: 0;
    box-shadow: none;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px 40px;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
  }
  /* the theme toggles display none/block on aria-expanded; keep it
     always block so the slide transition can run */
  .nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
    display: block;
  }
  .nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
    display: block;
    transform: translateX(0);
    visibility: visible;
  }

  /* drawer top bar: title + close */
  .nav-wrapper-mobile .menu-drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid #eee;
  }
  .nav-wrapper-mobile .menu-drawer-title {
    font-size: 18px;
    font-weight: 600;
    color: #03217D;
  }
  .nav-wrapper-mobile .menu-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: -10px;
    background: none;
    border: 0;
    color: #03217D;
    cursor: pointer;
  }

  /* section headings — same treatment as desktop */
  .nav-wrapper-mobile .menu-list-mobile-items .nav-section {
    padding: 20px 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #03217D;
  }

  /* category links — same treatment as desktop */
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories {
    padding: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a {
    padding: 12px 0;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    border-radius: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:hover,
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:focus,
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:active {
    background: none;
    color: #03217D;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #C994DD;
    text-decoration-thickness: 2px;
  }

  /* signed-in strip */
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row {
    border-radius: 12px;
    padding: 4px 8px;
    margin-top: 16px;
  }

  /* Quick Links section */
  .nav-wrapper-mobile .menu-contact {
    border-top: 1px solid #eee;
    margin-top: 20px;
  }
  .nav-wrapper-mobile .menu-quick-heading {
    display: block;
    padding: 20px 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #03217D;
  }
  .nav-wrapper-mobile .menu-actions {
    padding: 0;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn:hover,
  .nav-wrapper-mobile .menu-actions .menu-btn:focus,
  .nav-wrapper-mobile .menu-actions .menu-btn:active {
    background: none;
    color: #03217D;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #C994DD;
    text-decoration-thickness: 2px;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #25D366;   /* WhatsApp glyph keeps its brand green */
  }
}

/* --- Desktop: pill buttons matching the main site ---
   - fill:     purple bg, navy text  (like "Send message")
   - outline:  purple border, navy text  (like "Start web chat" / phone)
   - whatsapp: WhatsApp green, white text */
@media (min-width: 1024px) {
  /* heading + snooze link + drawer bar are mobile-only
     (.menu-btn bump needed so this outranks the pill styles below) */
  .nav-wrapper-mobile .menu-quick-heading,
  .nav-wrapper-mobile .menu-drawer-top,
  .nav-wrapper-mobile .menu-actions .menu-btn.menu-link-snooze {
    display: none;
  }
  .nav-wrapper-mobile .menu-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 24px 0 0;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding: 11px 26px;
    border-radius: 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  /* purple fill */
  .nav-wrapper-mobile .menu-actions .menu-btn-fill {
    background: #C994DD;
    border: 1.5px solid #C994DD;
    color: #03217D;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn-fill:hover,
  .nav-wrapper-mobile .menu-actions .menu-btn-fill:focus {
    background: #03217D;
    border-color: #03217D;
    color: #FFFFFF;
    text-decoration: none;
  }
  /* purple outline */
  .nav-wrapper-mobile .menu-actions .menu-btn-outline {
    background: #FFFFFF;
    border: 1.5px solid #C994DD;
    color: #03217D;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn-outline:hover,
  .nav-wrapper-mobile .menu-actions .menu-btn-outline:focus {
    background: #C994DD;
    color: #03217D;
    text-decoration: none;
  }
  /* whatsapp green */
  .nav-wrapper-mobile .menu-actions .menu-btn-whatsapp {
    background: #25D366;
    border: 1.5px solid #25D366;
    color: #FFFFFF;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn-whatsapp:hover,
  .nav-wrapper-mobile .menu-actions .menu-btn-whatsapp:focus {
    background: #1EBE5B;
    border-color: #1EBE5B;
    color: #FFFFFF;
    text-decoration: none;
  }
}

/* Signed-in row: light blue strip on mobile too */
.nav-wrapper-mobile .menu-list-mobile-items .menu-user-row {
  background: #f1f8ff;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-user-row .my-profile {
  display: flex;
  align-items: center;
}

/* Promo card lives desktop-side only; hidden in the mobile menu */
@media (max-width: 1023px) {
  .nav-wrapper-mobile .menu-promo {
    display: none;
  }
}

/* ===== Instant-search suggestions dropdown =====
   Zendesk renders suggestions in <zd-autocomplete role="listbox">
   elements attached to <body> (one per search input on the page).
   Zendesk's own JS sets inline left/top/width to pin the box under
   whichever input triggered it — we override left/right/width with
   !important so it spans the same 1408px-max, centred container as
   the header/mega-menu instead, giving it the same full-width,
   square-corner look. (Only "top" is left to Zendesk's JS, since
   that's the one value that correctly varies per input position.) */

zd-autocomplete[role="listbox"] {
  background: #FFFFFF;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 48px rgba(3, 33, 125, 0.18) !important;
  padding: 24px 5% 32px !important;
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 1408px !important;
  min-width: 0 !important;
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
}
@media (min-width: 1160px) {
  zd-autocomplete[role="listbox"] {
    width: 90% !important;
  }
}
@media (min-width: 1024px) {
  zd-autocomplete[role="listbox"] {
    padding: 16px 24px 16px !important;
    margin-top: 17px !important;
  }
}

/* a page can have several search inputs, each spawning its own
   (possibly empty) listbox — hide any that have no suggestions so
   they never stack behind the active one */
zd-autocomplete[role="listbox"]:not(:has([role="option"])) {
  display: none !important;
}

/* each suggestion row */
zd-autocomplete [role="option"] {
  display: block;
  border: 0 !important;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: #68737D;        /* breadcrumb line inherits this */
  font-size: 12px;
  line-height: 1.5;
}
zd-autocomplete [role="option"] + [role="option"] {
  margin-top: 2px;
}
zd-autocomplete [role="option"]:hover,
zd-autocomplete [role="option"][aria-selected=true] {
  background: #F4F5F9;
}

/* suggestion title: navy, medium weight, purple underline on hover */
zd-autocomplete [role="option"] a {
  color: #03217D;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
zd-autocomplete [role="option"]:hover a,
zd-autocomplete [role="option"][aria-selected=true] a {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #C994DD;
  text-decoration-thickness: 2px;
}

/* matched-text highlighting: bold navy, never highlighter-yellow */
zd-autocomplete mark,
zd-autocomplete [role="option"] em,
zd-autocomplete [role="option"] strong,
zd-autocomplete [role="option"] b {
  background: none;
  color: #03217D;
  font-style: normal;
  font-weight: 700;
}

/* ===== "Search the Mattressman shop" CTA (appended by JS) ===== */
.mm-shop-search-cta {
  border-top: 1px solid #eee;
  margin: 10px 4px 2px;
  padding: 12px 8px 6px;
}
.mm-shop-search-cta .mm-shop-search-label {
  display: block;
  font-size: 13px;
  color: #68737D;
  margin-bottom: 4px;
}
.mm-shop-search-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #03217D;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.mm-shop-search-cta a:hover,
.mm-shop-search-cta a:focus {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #C994DD;
  text-decoration-thickness: 2px;
}

zd-autocomplete-multibrand:hover,
zd-autocomplete-multibrand[aria-selected="true"],
zd-autocomplete-option:hover,
zd-autocomplete-option[aria-selected="true"] {
  box-shadow: none !important;
}


zd-autocomplete [role="option"][aria-selected=true] {
    background: none !important;
}

zd-autocomplete [role="option"]:hover{
    background: #F4F5F9 !important;
}

/* Append this after the existing instant-search styles in style.css. */
.mm-search-empty-state {
  position: absolute;
  z-index: 1001;
  box-sizing: border-box;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1408px;
  margin: 0 auto;
  padding: 24px 5% 32px;
  background: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: 0 24px 48px rgba(3, 33, 125, 0.18);
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
}

.mm-search-empty-state[hidden] {
  display: none !important;
}

.mm-search-empty-message {
  margin: 0 12px;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.mm-search-empty-state .mm-shop-search-cta {
  margin-top: 14px;
}

@media (min-width: 1024px) {
  .mm-search-empty-state {
    padding: 16px 24px;
  }
}

@media (min-width: 1160px) {
  .mm-search-empty-state {
    width: 90%;
  }
}


/* =========================================================================
   FINANCE PAGES — hub + provider pages
   -------------------------------------------------------------------------
   Powers /hc/p/finance and the five provider pages (klarna, clearpay, paypal,
   v12, snap).

   Each provider page sets its brand tokens on the .mm-pv wrapper — see the
   token block at the top of that page's .hbs file. Everything here consumes
   those tokens, so a provider re-skins from ~9 custom properties and the
   structure can't drift between pages.

   TOKEN CONTRACT
     --pv-hero-bg / --pv-hero-ink   full-bleed hero band
     --pv-accent  / --pv-accent-ink text-bearing accents (step numbers, ticks).
                                    --pv-accent MUST be dark enough to carry
                                    --pv-accent-ink at 4.5:1. Never put text on
                                    --pv-tint.
     --pv-tint                      decorative only — rules, underlines, chips
     --pv-surface                   tinted panels in the body
     --pv-rule                      hairlines and borders
     --pv-btn / --pv-btn-ink / --pv-btn-hover

   Defaults below are Mattressman navy, so a page that forgets its tokens still
   renders correctly rather than unstyled.
   ========================================================================= */

.mm-pv,
.mm-fin {
  --pv-hero-bg: #F4F5F9;
  --pv-hero-ink: #03217D;
  --pv-accent: #03217D;
  --pv-accent-ink: #FFFFFF;
  --pv-tint: #C994DD;
  --pv-surface: #F4F5F9;
  --pv-rule: #E4E6F5;
  --pv-btn: #03217D;
  --pv-btn-ink: #FFFFFF;
  --pv-btn-hover: #C994DD;
  --pv-btn-hover-ink: #03217D;
  /* Body typography. Provider pages override these when navy isn't one of their
     colours — Clearpay, for instance, is a black-on-mint brand. */
  --pv-heading: #03217D;
  --pv-muted: #5566A5;
}


/* ---------- full-bleed branded hero ---------- */
.mm-pv-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--pv-hero-bg);
  color: var(--pv-hero-ink);
  padding: 52px 0 56px;
  text-align: center;
}
/* Hero logo. --logo-h is set per provider page for the same reason as the card
   logos: these lockups have very different proportions, and the padded artwork
   (Clearpay's pill, Snap's filled block) needs extra height for the mark itself to
   read. The padded artwork's background matches --pv-hero-bg, so it still reads as
   a flush logo rather than a tile. */
.mm-pv-logo {
  display: block;
  height: var(--logo-h, 34px);
  width: auto;              /* overrides the width attr baked into the SVGs */
  max-width: 78%;
  margin: 0 auto 20px;
}
.mm-pv-hero h1 {
  color: var(--pv-hero-ink);
  font-weight: 700;
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.mm-pv-lede {
  color: var(--pv-hero-ink);
  opacity: .88;
  max-width: 660px;
  margin: 16px auto 0;
  line-height: 1.6;
  font-size: 17px;
}
/* Headline rule — the one flourish, tying the hero to the brand's own colour. */
.mm-pv-hero h1 + .mm-pv-rule {
  width: 64px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--pv-tint);
  margin: 20px auto 0;
}

/* ---------- sections ---------- */
.mm-fin-section { padding-top: 48px; padding-bottom: 8px; }

/* A provider's hosted page mounts into this section and brings its own full-width layout,
   gutters and top spacing. Ours must add none of that, or their page sits inset inside a
   second set of margins with a gap above it.

   Both selectors are deliberately compound. A bare .mm-fin-section--embed ties with the
   responsive .mm-fin-section rule further down the file and loses on order, so the top
   padding came back at <=768px; .container likewise sets a width at >=1160px that a
   single-class selector can't beat. */
.mm-fin .mm-fin-section--embed { padding-top: 0; }
.mm-fin-section--embed.container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.mm-fin-heading {
  text-align: center;
  color: var(--pv-heading);
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.mm-fin-sub {
  text-align: center;
  color: var(--pv-muted);
  margin: 0 auto 28px;
  max-width: 680px;
  line-height: 1.6;
}

/* ---------- hub: provider grid ----------
   300px min gives 3 columns at desktop, so five providers land as 3 + 2 rather
   than 4 + 1 with a lone orphan card. */
.mm-fin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.mm-fin-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E4E6F5;
  border-radius: 14px;
  padding: 24px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.mm-fin-card:hover {
  box-shadow: 0 8px 24px rgba(3, 33, 125, .12);
  transform: translateY(-2px);
}
/* One generous fixed-height slot for every card, with each logo vertically centred
   inside it. That keeps all five cards' copy starting at the same y while letting
   each mark be sized for its own lockup — see --logo-h below. */
.mm-fin-logo-slot {
  display: flex;
  align-items: center;
  height: 58px;
  margin-bottom: 14px;
}
/* --logo-h is set per card because these lockups are not comparable: Klarna and
   PayPal are single-line wordmarks that read fine at 26px, whereas V12 and Snap are
   stacked two-line marks and Clearpay's badge is a pill inside a large padded
   canvas. A single shared height makes the stacked ones illegible. */
.mm-fin-logo {
  height: var(--logo-h, 26px);
  width: auto;
  max-width: var(--logo-max, 170px);
}
.mm-fin-card h3 {
  color: #03217D;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
}
.mm-fin-card > p {
  color: #333;
  line-height: 1.6;
  margin: 0 0 18px;
  font-size: 15px;
}



.mm-pv-btn,
.mm-pv-btn:visited {
  display: inline-block;
  text-align: center;
  background: var(--pv-btn);
  color: var(--pv-btn-ink);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mm-pv-btn:hover,
.mm-pv-btn:focus {
  background: var(--pv-btn-hover);
  color: var(--pv-btn-hover-ink, var(--pv-btn-ink));
  text-decoration: none;
}
.mm-pv-actions { margin-top: 30px; text-align: center; }

/* ---------- steps ---------- */
.mm-pv-steps {
  display: grid;
  /* Every step row on these pages is exactly 3 items, so explicit columns beat auto-fit:
     auto-fit passes through a 2 + 1 orphan at tablet widths. This goes 3 -> 1 directly. */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: mmpv;
}
@media (max-width: 700px) {
  .mm-pv-steps { grid-template-columns: 1fr; }
}
.mm-pv-step {
  background: var(--pv-surface);
  border-radius: 14px;
  padding: 26px 24px;
}
.mm-pv-step::before {
  counter-increment: mmpv;
  content: counter(mmpv);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pv-accent);
  color: var(--pv-accent-ink);
  font-weight: 700;
  font-size: 15px;
  /* Without this the digit sits high: the theme's inherited line-height (22.5px) makes a
     line box taller than the glyph, and centring that box isn't the same as centring the
     digit once the font's ascent and descent are asymmetric. */
  line-height: 1;
  margin-bottom: 14px;
}
.mm-pv-step h3 { color: #03217D; font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.mm-pv-step p { color: #333; font-size: 15px; line-height: 1.6; margin: 0; }



/* ---------- tick list ---------- */
.mm-pv-ticks { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.mm-pv-ticks li {
  position: relative;
  padding: 11px 0 11px 32px;
  border-bottom: 1px solid var(--pv-rule);
  color: #333;
  line-height: 1.6;
}
.mm-pv-ticks li:last-child { border-bottom: 0; }
.mm-pv-ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--pv-accent);
  border-bottom: 2.5px solid var(--pv-accent);
  transform: rotate(-45deg);
}

/* ---------- embed frame (Klarna placement, Snap shadow-DOM page) ---------- */
.mm-pv-embed {
  position: relative;   /* contains Snap's absolutely-positioned loading overlay */
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  padding: 8px;
  background: #fff;
  min-height: 120px;
}


/* ---------- small print ---------- */
.mm-fin-smallprint {
  margin-top: 40px;
  padding: 22px 0 8px;
  border-top: 1px solid #E4E6F5;
  color: #5566A5;
  font-size: 13px;
  line-height: 1.7;
}
.mm-fin-smallprint p { margin: 0 0 10px; }
.mm-fin-smallprint a { color: #03217D; font-weight: 600; }

/* ---------- FAQ accordions ----------
   Native <details>/<summary>: keyboard-operable, findable by the browser's own in-page
   search when open, and needs no JavaScript. */
.mm-pv-faqs {
  max-width: 1000px;   /* matches .mm-pv-figure, so the FAQs line up with the banner above */
  margin: 0 auto;
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  overflow: hidden;
}
.mm-pv-faq { border-bottom: 1px solid var(--pv-rule); }
.mm-pv-faq:last-child { border-bottom: 0; }
.mm-pv-faq > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  color: var(--pv-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  list-style: none;
  transition: background-color .12s ease;
}
.mm-pv-faq > summary::-webkit-details-marker { display: none; }   /* Safari */
.mm-pv-faq > summary:hover { background: var(--pv-surface); }
.mm-pv-faq > summary:focus-visible {
  outline: 3px solid var(--pv-accent);
  outline-offset: -3px;
}
/* Chevron, drawn in CSS so there's no icon dependency. */
.mm-pv-faq > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: auto;
  margin-top: 5px;
  border-right: 2.5px solid var(--pv-accent);
  border-bottom: 2.5px solid var(--pv-accent);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.mm-pv-faq[open] > summary { background: var(--pv-surface); }
.mm-pv-faq[open] > summary::after { transform: rotate(-135deg); margin-top: 9px; }
.mm-pv-faq-body { padding: 0 20px 18px; }
.mm-pv-faq-body p {
  color: #333;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 12px;
}
.mm-pv-faq-body p:last-child { margin-bottom: 0; }
.mm-pv-faq-body a { color: var(--pv-heading); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .mm-pv-faq > summary,
  .mm-pv-faq > summary::after { transition: none; }
}

/* ---------- provider-supplied artwork ----------
   Clearpay's "How It Works" artwork includes its own heading, strapline and small print,
   so it runs at full content width and the page adds no heading of its own above it. */
.mm-pv-figure { margin: 0 auto; max-width: 1000px; }
.mm-pv-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.mm-pv-figure figcaption {
  margin-top: 12px;
  text-align: center;
  color: var(--pv-muted);
  font-size: 13px;
}


/* ---------- two-product comparison table ----------
   Real <table> semantics (screen readers announce the row/column relationship), wrapped in
   a scroller so it degrades to a horizontal swipe on narrow screens rather than crushing
   the columns. Same approach as .mm-size-table-wrap on the size guide. */
.mm-pv-compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}
.mm-pv-compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}
.mm-pv-compare th,
.mm-pv-compare td {
  text-align: left;
  padding: 16px 20px;
  vertical-align: top;
  border-bottom: 1px solid var(--pv-rule);
}
.mm-pv-compare thead th {
  color: var(--pv-heading);
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--pv-accent);
}
.mm-pv-compare thead th:first-child { border-bottom-color: var(--pv-rule); }
.mm-pv-compare tbody th {
  font-weight: 500;
  color: #333;
  width: 34%;
}
.mm-pv-compare tbody td { color: var(--pv-heading); font-weight: 600; }
.mm-pv-compare tbody tr:nth-child(even) { background: var(--pv-surface); }
.mm-pv-compare tbody tr:last-child th,
.mm-pv-compare tbody tr:last-child td { border-bottom: 0; }
.mm-pv-compare-mark {
  display: inline-block;
  height: 20px;
  width: auto;
  vertical-align: -4px;
  margin-right: 8px;
}
.mm-pv-compare-note {
  margin: 14px 0 0;
  color: var(--pv-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- full-bleed brand band with numbered steps ---------- */
.mm-pv-band {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 52px -50vw 0;
  background: var(--band-bg, var(--pv-tint));
  padding: 52px 0 56px;
}
.mm-pv-band h2 {
  color: var(--band-ink, #fff);
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 32px;
}
.mm-pv-numsteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* always 3 items — see .mm-pv-steps note */
  gap: 20px;
}
@media (max-width: 700px) {
  .mm-pv-numsteps { grid-template-columns: 1fr; }
}
.mm-pv-numstep {
  background: var(--step-card-bg, #fff);
  border-radius: 14px;
  padding: 26px 24px;
}
.mm-pv-numstep-n {
  display: block;
  color: var(--step-card-ink, var(--pv-heading));
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.mm-pv-numstep h3 {
  color: var(--step-card-ink, var(--pv-heading));
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}
.mm-pv-numstep p {
  color: var(--step-card-body, #333);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.mm-pv-band + .mm-pv-band { margin-top: 0; }   /* adjacent bands meet flush */

@media (max-width: 768px) {
  .mm-pv-band { padding: 38px 0 42px; margin-top: 36px; }
  .mm-pv-band + .mm-pv-band { margin-top: 0; }
  .mm-pv-band h2 { font-size: 24px; }
}

/* ---------- button hierarchy ----------
   Three levels, so a provider's CTA and a link back to our own pages never read as equals:
     .mm-pv-btn                     solid  — primary action in its section
     .mm-pv-band .mm-pv-btn         inverted — the band is already the emphasis
     .mm-pv-btn--ghost              outline — onward navigation, deliberately quieter */
.mm-pv-band .mm-pv-btn,
.mm-pv-band .mm-pv-btn:visited {
  background: var(--band-btn, var(--band-ink, #fff));
  color: var(--band-btn-ink, var(--band-bg, var(--pv-tint)));
}
.mm-pv-band .mm-pv-btn:hover,
.mm-pv-band .mm-pv-btn:focus {
  background: var(--band-btn-ink, var(--band-bg, var(--pv-tint)));
  color: var(--band-btn, var(--band-ink, #fff));
}
.mm-pv-btn--ghost,
.mm-pv-btn--ghost:visited {
  background: transparent;
  color: var(--pv-btn);
  box-shadow: inset 0 0 0 2px var(--pv-btn);
}
.mm-pv-btn--ghost:hover,
.mm-pv-btn--ghost:focus {
  background: var(--pv-btn);
  color: var(--pv-btn-ink);
}



/* ---------- hub: full brand-colour provider cards ----------
   Each card takes the provider's own colour, so the grid reads as five brands rather than
   five identical tiles.

   Four tokens per card, set inline on .mm-fin-card--brand:
     --card-bg       the provider's colour
     --card-ink      text on it (heading and body)
     --card-btn      button fill  — MUST separate from --card-bg by >= 3:1, or the button
                                    stops reading as an object
     --card-btn-ink  button label — MUST reach 4.5:1 against --card-btn
     --card-btn-hover / --card-btn-hover-ink
                     hover pair — the hover fill ALSO needs >= 3:1 against --card-bg

   That first button rule is easy to miss: a grey button on Klarna pink measured 1.27:1
   against the card, so the label was perfectly legible while the button itself was almost
   invisible. Check both ratios, not just the label. */
.mm-fin-card--brand {
  background: var(--card-bg);
  border: 0;
  border-radius: 20px;
  padding: 28px;
  color: var(--card-ink);
}
.mm-fin-card--brand:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.mm-fin-card--brand h3,
.mm-fin-card--brand > p { color: var(--card-ink); }
.mm-fin-card--brand h3 { font-size: 21px; margin-bottom: 10px; }
.mm-fin-card--brand > p { opacity: .92; margin-bottom: 24px; }
.mm-fin-card--brand .mm-fin-logo-slot { height: 52px; margin-bottom: 20px; }


/* ---------- hub: the whole card is the link ----------
   The <a> wraps the card, so every part of it is clickable — including the padding — with no
   JavaScript and no absolutely-positioned overlay. An overlay (the "stretched link" pattern)
   would give a shorter accessible name but blocks text selection across the card; wrapping
   keeps selection and keyboard behaviour normal. Trade-off: the link's accessible name is the
   card's whole text. Noted in finance.hbs.

   The arrow is decorative and has NO hover state of its own. The card already carries the
   affordance (shadow + lift), and a second moving part inside it competes for attention. */
a.mm-fin-card--brand,
a.mm-fin-card--brand:visited {
  text-decoration: none;
  color: var(--card-ink);
}
a.mm-fin-card--brand:hover,
a.mm-fin-card--brand:focus { text-decoration: none; }
a.mm-fin-card--brand:focus-visible {
  outline: 3px solid var(--card-ink);
  outline-offset: 3px;
}
.mm-fin-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: auto 0 0 auto;   /* auto-top pins it to the bottom, auto-left to the right */
  background: var(--card-btn);
  /* Glyph is the card's own colour, so the arrow reads as a cut-out of the card. Same
     ratio as btn-vs-card, which is 6.76:1 at worst across the five cards. */
  color: var(--card-bg);
}
.mm-fin-arrow svg { display: block; width: 18px; height: 18px; }

/* The hub's cards are <a> elements (the whole card is the link), which is why this is
   scoped by element type rather than needing another class. */
a.mm-fin-card--brand > p { font-size: 14px; }

/* ---------- V12 repayment calculator: plan picker ----------
   Replaces the <select>: one compact row per plan, so the whole product set is visible at
   a glance along with what each plan needs. The chosen plan's full breakdown stays in the
   output panel, which keeps the calculator to one self-contained section.

   Rows that aren't available at the current amount are NOT dimmed with opacity. Opacity
   drags every ratio down together, including the line saying what the plan needs — the one
   thing a customer has to be able to read here. They get a muted surface and grey text
   instead, both still clearing AA. */
.mm-v12-plans { display: grid; gap: 8px; }
.mm-v12-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--pv-rule);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.mm-v12-plan:hover { border-color: var(--pv-accent); }
.mm-v12-plan-term { color: #03217D; font-size: 15px; font-weight: 600; }
.mm-v12-plan-note { color: #5566A5; font-size: 13px; text-align: right; }

/* Chosen. The inset ring thickens the accent border without moving the row. */
.mm-v12-plan[aria-checked="true"] {
  border-color: var(--pv-accent);
  box-shadow: inset 0 0 0 1px var(--pv-accent);
  background: var(--pv-surface);
}

/* Not available at the current amount — the note says what would unlock it. */
.mm-v12-plan--off { background: #F7F8F9; cursor: not-allowed; }
.mm-v12-plan--off:hover { border-color: var(--pv-rule); }
.mm-v12-plan--off .mm-v12-plan-term { color: #4F5B63; }
.mm-v12-plan--off .mm-v12-plan-note { color: #5A6B76; }

@media (max-width: 420px) {
  .mm-v12-plan { flex-direction: column; align-items: flex-start; gap: 2px; }
  .mm-v12-plan-note { text-align: left; }
}

/* ---------- unfilled placeholder marker — deliberately loud ---------- */
.mm-fin-todo {
  background: #FFF3CD;
  color: #7A5B00;
  border: 1px dashed #C9A227;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
  font-size: .93em;
}

/* ---------- V12 calculator ---------- */
.mm-fin-calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  overflow: hidden;
}
.mm-fin-calc-inputs { padding: 28px; }
.mm-fin-calc-out {
  padding: 28px;
  background: var(--pv-surface);
  border-left: 1px solid var(--pv-rule);
}
.mm-fin-field { margin-bottom: 22px; }
.mm-fin-field:last-child { margin-bottom: 0; }
/* The plan picker is a radiogroup, not one control, so it carries a title rather than a
   <label> — same treatment either way. */
.mm-fin-field label,
.mm-fin-field-title {
  display: block;
  color: #03217D;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}
.mm-fin-field-hint {
  display: block;
  color: #5566A5;
  font-weight: 500;
  font-size: 13px;
  margin-top: 5px;
}
.mm-fin-money {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--pv-rule);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.mm-fin-money span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #5566A5;
  font-weight: 700;
  background: var(--pv-surface);
  border-right: 1px solid var(--pv-rule);
}
.mm-fin-money input {
  border: 0;
  padding: 12px 14px;
  font-size: 17px;
  font-weight: 600;
  color: #03217D;
  width: 100%;
  background: transparent;
}
.mm-fin-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--pv-rule);
  margin-top: 14px;
}
.mm-fin-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pv-accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.mm-fin-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pv-accent);
  border: 3px solid #fff;
  cursor: pointer;
}
.mm-fin-out-label { color: #5566A5; font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.mm-fin-out-big {
  color: var(--pv-accent);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 2px;
  letter-spacing: -.02em;
}
.mm-fin-out-big span { font-size: 18px; font-weight: 600; color: #5566A5; }
.mm-fin-out-term { color: #5566A5; font-size: 14px; margin: 0 0 20px; }
.mm-fin-out-rows { list-style: none; margin: 0; padding: 0; }
.mm-fin-out-rows li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--pv-rule);
  font-size: 14px;
}
.mm-fin-out-rows li:last-child { border-bottom: 0; }
.mm-fin-out-rows .k { color: #5566A5; font-weight: 600; }
.mm-fin-out-rows .v { color: #03217D; font-weight: 700; text-align: right; }
.mm-fin-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--pv-rule);
  border-radius: 10px;
  color: #333;
  font-size: 13px;
  line-height: 1.65;
}
.mm-fin-warn {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #FFF3CD;
  border: 1px solid #C9A227;
  border-radius: 10px;
  color: #7A5B00;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.mm-fin-warn[hidden] { display: none; }
.mm-fin-state {
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  padding: 40px 28px;
  text-align: center;
  color: #5566A5;
}
.mm-fin-state h3 { color: #03217D; margin: 0 0 8px; font-size: 19px; }
.mm-fin-state p { margin: 0 auto; max-width: 520px; line-height: 1.65; }
.mm-fin-state a { color: #03217D; font-weight: 600; }

/* ---------- quality floor ---------- */
.mm-fin a:focus-visible,
.mm-pv a:focus-visible,
.mm-pv button:focus-visible,
.mm-fin input:focus-visible,
.mm-fin select:focus-visible {
  outline: 3px solid #6D3F87;
  outline-offset: 2px;
  border-radius: 4px;
}
.mm-fin-money input:focus-visible { outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .mm-fin-card,
  .mm-pv-btn { transition: none; }
  .mm-fin-card:hover { transform: none; }
}

@media (max-width: 860px) {
  .mm-fin-calc { grid-template-columns: 1fr; }
  .mm-fin-calc-out { border-left: 0; border-top: 1px solid var(--pv-rule); }
}
@media (max-width: 768px) {
  .mm-pv-hero { padding: 38px 0 42px; }
  .mm-pv-hero h1 { font-size: 30px; }
  .mm-pv-lede { font-size: 16px; }
  .mm-pv-logo { height: calc(var(--logo-h, 34px) * 0.72); }   /* scale the token, don't override it */
  .mm-fin-heading { font-size: 22px; }
  .mm-fin-section { padding-top: 36px; }
  .mm-fin-out-big { font-size: 36px; }
}