@font-face {
    font-family: "Genotype";
    src: url('https://23andme.https.internapcdn.net/store/static/fonts/genotype_v2.eot');
    src: url('https://23andme.https.internapcdn.net/store/static/fonts/genotype_v2.eot?#iefix') format('embedded-opentype'),
         url('https://23andme.https.internapcdn.net/store/static/fonts/genotype_v2.woff') format('woff'),
         url('https://23andme.https.internapcdn.net/store/static/fonts/genotype_v2.ttf') format('truetype'),
         url('https://23andme.https.internapcdn.net/store/static/fonts/genotype_v2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@charset "UTF-8";

/*
@media (min-width: 768px) {
#ada-chat-frame{
  max-height: 530px !important; 
  max-width: 330px !important;
  margin: 110px 10px 10px 10px !important;
}
}
*/
/* ====================================================
		Misc In-article 
====================================================*/
.chat-button {
  padding: 20px;
  text-align: center;
  background-color: #d50f67 !important;
  font-weight: 500;
  color: white !important;
}
.contact-option-purple {
  color: #8839BF !important;
}

.account-details {
  font-size: 12px;
  color: #2F3941 !important;
}


.table-image {
  max-width: none !important; 
}

.homepage-title {
  text-align: center;
  font-weight: 600;
  padding-top: 20px;
}


.covid-banner {
  padding-bottom: 30px;
  background-color: #D50F67;
  box-shadow: 0 0 30px rgba(0,0,0,.1);
  border-radius: 3px;
  padding: 15px;
  margin-top: 30px;
}

.covid-link {
  color: white;
}


.covid-banner-title {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

.covid-message {
  color: #fff;
  text-align: center;
  padding: 15px;
  margin-right: 15%;
  margin-left: 15%;
}

.white-background {
  background-color: #fff;
}

.tip-box {
  border: 1px solid #d6dadb;
  border-radius: 5px;
  border-left: 9px solid #d50f67;
  padding: 15px;
  background-color: #fff;
}

.disclaimer-box {
  border: 1px solid #000000;
  background-color: #fff;
  padding: 15px;
  width: 100%;
}

.faq-container {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  	padding: 20px 0 20px 0;
}

.information-box {
  background-color: #fff;
  box-shadow: 0 0 30px rgba(0,0,0,.1);
  border-radius: 3px;
  padding: 15px;
}

.drawer-answer {
  padding-right: 15%;
}

.drawer-question {
  position: relative;
  width: 100%;
  cursor: pointer;
  font-size: 16px;
  -webkit-transition: color .5s;
  transition: color .5s;
  font-weight: 400;
  font: 18px;
  padding-right: 15%;
}


.drawer-question:after {
    position: absolute;
    top: 50%;
    left: 90%;
    width: 16px;
    height: 16px;
    content: "";
    margin-top: -8px;
    background: rgba(0,0,0,0) url("https://www.23andme.com/static/img/icons/common/expand.7b0b23b5d838.svg") no-repeat;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s,-webkit-transform .5s
}


.drawer-open.drawer-question:after {
  	transform:translateY(13px);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.faq-section-banner-top {
  background-image:url('https://www.23andme.com/static/img/howitworks/chromosome-banner_2x.0c4c07b4bbe3.png');
  background-size: cover;
  background-repeat: no-repeat;
  width:inherit;
  height:50px;
}

.faq-section-banner-bottom {
  background-image:url('https://www.23andme.com/static/img/howitworks/chromosome-banner_2x.0c4c07b4bbe3.png');
  background-size: cover;
  background-repeat: no-repeat;
  width:inherit;
  height:50px;
  transform: rotateX(180deg);
}

.population-specific {
  vertical-align: top; 
}

.check {
  color: #74A529;
}

.white-background {
  background-color: #fff;
  padding: 15px;
}

.cta-button {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition-property: color, border-color;
  transition-duration: 0.333s;
  color: rgb(255, 255, 255);
  padding: 1rem 2rem;
  border-radius: 2.5em;
  background-image: linear-gradient(to right, #d60e66, #a10e7d);
  background-clip: text;
}

.cta-button:hover{
  text-decoration: none;
  background-image: linear-gradient(to right, #8c0e45, #a10e7d);
  
}

.cta {
  padding: 5px;
}

.sample {
  background-color: #fff;
}

#recaptcha_privacy a {
  color: $color_5;
}
.dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  text-align: initial;
}

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

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


.sample-left {
  width: 35%;
}

@media screen and (min-width: 1024px) { 
.sample-left {
  width: 25%;
}
}

.my-activities {
  height: 400px;
}

/* ====================================================
		Ticket Deflection 
====================================================*/

.prompt-selfservice {
	display: none;
}


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

body {
  margin: 0;
}

main {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
  font-weight:600;
}

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

h4 {
  font-size: 16px;
  font-weight: 600;
}


h5 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #d50f67;
  line-height: 1em;
  font-weight: 800;
}

a {
  color: rgba(24, 115, 205, 1);
  text-decoration: none;
  background-color: transparent;
}

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

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

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



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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

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

body {
  background-color: rgba(251, 252, 253, 1);
  color: rgba(51, 52, 53, 1);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Helvetica, Arial, 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(24, 115, 205, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(24, 115, 205, 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(237, 239, 240, 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 #848F99;
  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(237, 239, 240, 1);
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #848F99;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid rgba(237, 239, 240, 1);
}

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

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

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

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

/***** 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(237, 239, 240, 1);
  border-radius: 4px;
  color: rgba(237, 239, 240, 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;
}
@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(237, 239, 240, 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: rgba(237, 239, 240, 1);
  color: rgba(107, 107, 107, 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: #b5bec2;
  border-color: #b5bec2;
}
.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(237, 239, 240, 1);
  border: 0;
  border-radius: 4px;
  color: rgba(107, 107, 107, 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(107, 107, 107, 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: #b5bec2;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #656769;
  border: 1px solid #848F99;
  background-color: transparent;
}
.button-secondary:visited {
  color: #656769;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(51, 52, 53, 1);
  border: 1px solid #848F99;
  background-color: #f1f4f8;
}

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

.split-button button {
  background-color: rgba(237, 239, 240, 1);
  border: 0;
  color: rgba(107, 107, 107, 1);
  height: 32px;
  line-height: 16px;
  outline-color: rgba(237, 239, 240, 1);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid rgba(107, 107, 107, 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(107, 107, 107, 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;
}

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

.table th,
.table th a {
  color: #656769;
  font-size: 13px;
  font-weight: 300;
  text-align: left;
}

[dir="rtl"] .table th, [dir="rtl"]
.table th a {
  text-align: right;
}

.table td {
  border-color: #cbcbcb;
  border-style: solid;
}

.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}

td {
 	padding: 15px; 
}

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

.full-sized-table {
  width: 100%;
  font-size: 9px;
  
}

@media (min-width: 768px) {
.full-sized-table {
  width: 100%;
  font-size: 15px;
	}
}  

.full-sized-table tr {
  border-bottom: 1px solid #6b6b6b;
}



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

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

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

.form-field input {
  border: 1px solid #848F99;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid rgba(237, 239, 240, 1);
}

.form-field input[type=text] {
  border: 1px solid #848F99;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(237, 239, 240, 1);
}

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

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #848F99;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid rgba(237, 239, 240, 1);
  text-decoration: none;
}

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

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(237, 239, 240, 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: #656769;
  margin-left: 4px;
}

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

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

.form footer a {
  color: #656769;
  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(24, 115, 205, 1);
}

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

.logo img {
  vertical-align: middle;
  width: 140px;
	height: 96px;
  transform: translatey(25px);
  margin-bottom: 20px;
}

.logo span {
  margin: 0 10px;
  color: rgba(237, 239, 240, 1);
}

.logo a {
  display: inline-block;
}

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

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

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

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(24, 115, 205, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(24, 115, 205, 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;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(51, 52, 53, 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, 52, 53, 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;
}
.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  transform: translateY(2px);
}

@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}


@media (min-width: 768px) {
  .login {
  	transform: translateY(2px);
	}
}

.user-nav[aria-expanded="true"] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}

.user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 20px;
}

.nav-wrapper a {
  border: 0;
  color: rgba(51, 52, 53, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}

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

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

.nav-wrapper a:hover, .nav-wrapper a:focus, .nav-wrapper a:active {
  background-color: transparent;
  color: rgba(24, 115, 205, 1);
  text-decoration: underline;
}

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

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

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

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

.nav-wrapper .icon-menu:hover, .nav-wrapper .icon-menu:focus, .nav-wrapper .icon-menu:active {
  background-color: transparent;
  color: rgba(24, 115, 205, 1);
}

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

.ask-ai {
  align-items: center;
  background-color: rgba(24, 115, 205, 1);
  border: 1px solid rgba(24, 115, 205, 1);
  border-radius: 4px;
  color: rgba(107, 107, 107, 1);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.4286;
  padding: 6px 14px;
}
.ask-ai:visited {
  color: rgba(107, 107, 107, 1);
}
.ask-ai .ask-ai-icon {
  flex-shrink: 0;
}

.nav-wrapper-desktop .ask-ai {
  margin-inline-end: 16px;
  padding: 6px 14px;
}
.nav-wrapper-desktop .ask-ai, .nav-wrapper-desktop .ask-ai:visited {
  color: rgba(107, 107, 107, 1);
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active {
  background-color: #0F3554;
  border-color: #0F3554;
  color: rgba(107, 107, 107, 1);
  text-decoration: none;
}

.nav-wrapper-mobile .ask-ai {
  margin: 4px 24px;
  padding: 6px 14px;
  width: auto;
  height: auto;
}
.nav-wrapper-mobile .ask-ai, .nav-wrapper-mobile .ask-ai:visited {
  color: rgba(107, 107, 107, 1);
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: #0F3554;
  border-color: #0F3554;
  color: rgba(107, 107, 107, 1);
  text-decoration: 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(24, 115, 205, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(24, 115, 205, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(24, 115, 205, 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;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(237, 239, 240, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: rgba(107, 107, 107, 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: #656769;
}
.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%;
  }
}
.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #656769;
}



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

.search input[type="search"] {
  border: 1px solid #ddd;
  border-radius: 30px;
  box-sizing: border-box;
  color: #999;
  height: 40px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
}

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


/*.search input[type="search"]:focus {
  border: 1px solid rgba(237, 239, 240, 1);
  color: #555;
}*/

.search input[type="search"]:focus {
  border: 0px solid #979696;
  box-shadow: 1px 1px 3px 2px #969797;
  box-sizing: border-box;
  color: #999;
}  

.search::before {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  color: #777;
  content: "\1F50D";
  font-size: 18px;
  position: absolute;
  left: 15px;
}

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

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


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

.search {
  border-color: #848F99;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: rgba(237, 239, 240, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  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(237, 239, 240, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(237, 239, 240, 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(237, 239, 240, 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(237, 239, 240, 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(237, 239, 240, 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(237, 239, 240, 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 *****/
.welcome-hero {
 background: linear-gradient(281deg, #8839BF, #D90D94);
}

.welcome-hero .section h2 {
  color: #fff;
}

.hero {
  background-position: top;
  background-size: cover;
  width: 100vw;
  height: 200px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
  max-width: 
}

@media screen and (max-width: 1024px) and (min-width: 737px) {  
  .hero {
  background-position: top;
  background-size: cover;
  height: 200px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}  
}

@media screen and (min-width: 737px) {  
  .hero {
  background-position: top;
  background-size: cover;
  height: 200px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}  
}

@media screen and (min-width: 1441px) {  
  .hero {   
  background-position: top;
  background-size: cover;
  height: 200px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}  
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

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

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

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

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

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

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

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

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

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

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

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

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



/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(237, 239, 240, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(237, 239, 240, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(237, 239, 240, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(107, 107, 107, 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, 52, 53, 1);
}
.blocks-item-link {
  color: rgba(237, 239, 240, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(237, 239, 240, 1);
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

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

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

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

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

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

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: rgba(51, 52, 53, 1);
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 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(24, 115, 205, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(24, 115, 205, 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(237, 239, 240, 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;
}

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

.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: 768px) {
  .section-tree .section {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: rgba(51, 52, 53, 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, 52, 53, 1);
}

.icon-star {
  color: rgba(237, 239, 240, 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, 52, 53, 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;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.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(24, 115, 205, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(24, 115, 205, 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: #eaeff5;
}
.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: #f1f4f8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f1f4f8;
  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: #656769;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #656769;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(237, 239, 240, 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;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(24, 115, 205, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(24, 115, 205, 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 #848F99;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(51, 52, 53, 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, 52, 53, 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: #656769;
}

/***** 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: #656769;
}
.share a:hover {
  text-decoration: none;
  color: rgba(237, 239, 240, 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: #656769;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(24, 115, 205, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(24, 115, 205, 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: #656769;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(237, 239, 240, 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(237, 239, 240, 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: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(24, 115, 205, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(24, 115, 205, 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: #eaeff5;
}
.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: #f1f4f8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f1f4f8;
  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: #656769;
  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: #656769;
  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(237, 239, 240, 1);
}

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

.vote-voted {
  color: rgba(237, 239, 240, 1);
}

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

/***** 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/01K3PF0JBSRDJE5ZFYKQ5Z19WJ);
  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: rgba(237, 239, 240, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: rgba(107, 107, 107, 1);
  color: rgba(107, 107, 107, 1);
}
.community-follow button[data-selected=true] {
  background-color: rgba(237, 239, 240, 1);
  color: rgba(107, 107, 107, 1);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid rgba(107, 107, 107, 1);
  color: rgba(107, 107, 107, 1);
}
.community-follow button[data-selected=true]:hover {
  background-color: #b5bec2;
  border-color: #b5bec2;
}
.community-follow button::after {
  border-left: 1px solid rgba(237, 239, 240, 1);
  content: attr(data-follower-count);
  color: rgba(237, 239, 240, 1);
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(237, 239, 240, 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(24, 115, 205, 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(24, 115, 205, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #656769;
  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, 52, 53, 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(237, 239, 240, 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: #656769;
}
.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: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: rgba(24, 115, 205, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(24, 115, 205, 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: #eaeff5;
}
.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: #f1f4f8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f1f4f8;
  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: #656769;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #656769;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(237, 239, 240, 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(237, 239, 240, 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, 52, 53, 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, 52, 53, 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(237, 239, 240, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(51, 52, 53, 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(237, 239, 240, 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: #eaeff5;
  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: #656769;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #656769;
}

/***** 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;
  max-width: 100%;
  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: #656769;
  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(237, 239, 240, 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(237, 239, 240, 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: #f1f4f8;
    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%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #656769;
  width: 40%;
  overflow-wrap: break-word;
}
.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: #656769;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

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

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

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

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

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

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

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

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

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

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

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

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

.profile-stats .stat-label {
  color: #656769;
  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(237, 239, 240, 1);
  border-radius: 4px;
  color: rgba(237, 239, 240, 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: #eaeff5;
  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: #656769;
  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: #656769;
  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: #f1f4f8;
}
@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(251, 252, 253, 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 {
  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, 52, 53, 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: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6):not(.see-all-filters-item) {
  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(24, 115, 205, 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(24, 115, 205, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(24, 115, 205, 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: #656769;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(237, 239, 240, 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: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/***** 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-hero {
  background-image: url(/hc/theming_assets/01KEH5PZZQP2AF9XWARQF626WQ);
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: rgba(24, 115, 205, 1);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: rgba(24, 115, 205, 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: #eaeff5;
}
.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: #f1f4f8;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f1f4f8;
  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: #656769;
  font-style: italic;
  padding: 0 15px;
}
.service-catalog-main-content {
  display: flex;
  gap: 32px;
}
.service-catalog-list {
  width: 100%;
}
.service-catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 20px;
}

.is-service-catalog-preview #navbar-container,
.is-service-catalog-preview .navbar-container,
.is-service-catalog-preview .assembly-bar,
.is-service-catalog-preview [data-garden-id="chrome.subnav"] {
  display: none !important;
}


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

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

.blocks-item {
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  flex: 1 0 340px;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  background-color:#fff;
  box-shadow: 0 0 30px rgba(0,0,0,.1);
  border-radius: 3px;
  text-transform:capitalize;
  color: #444444;
}


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

.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(251, 252, 253, 1);
}

.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  text-decoration: none;
  color: #202021;
}

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

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

.blocks-item-internal a {
  color: rgba(51, 52, 53, 1);
}


.blocks-item-link {
  /*padding: 20px 30px;*/
  color: #6b6b6b;
}

.blocks-item-link:hover , .blocks-item-link:focus *, .blocks-item:active * {
  color: #6b6b6b;
}

/*
.blocks-list li:nth-child(1) a {
  background-image: url("$assets-before_you_buy-svg");
  	-webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
  background-size: 40px 40px;
}

.blocks-list li:nth-child(2) a {
  background-image: url("$assets-blue-png");
  	-webkit-background-size: 45px 45px;
    -moz-background-size: 45px 45px;
  background-size: 45px 45px;
}

 .blocks-list li:nth-child(3) a {
    background-image: url("$assets-account-svg");
    -webkit-background-size: 42px 42px;
    -moz-background-size: 42px 42px;
    background-size: 42px 42px;
  }
  
  .blocks-list li:nth-child(4) a {
    background-image: url("$assets-reports-svg");
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;
  }
  
  .blocks-list li:nth-child(5) a {
    background-image: url("$assets-ancestry_icon-png");
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;
  }
  
  .blocks-list li:nth-child(6) a {
    background-image: url("$assets-additional_features-svg");
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;
}  

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 200 / 100), only screen and (min-device-pixel-ratio: 2){
  .blocks-list li:nth-child(1) a {
  background-image: url("$assets-before_you_buy-svg");
  	-webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
  background-size: 40px 40px;
  }
  
  .blocks-list li:nth-child(2) a {
    background-image: url("$assets-blue-png");
    -webkit-background-size: 45px 45px;
    -moz-background-size: 45px 45px;
    background-size: 45px 45px;
  }
  
  .blocks-list li:nth-child(3) a {
    background-image: url("$assets-account-svg");
    -webkit-background-size: 42px 42px;
    -moz-background-size: 42px 42px;
    background-size: 42px 42px;
  }
  
  .blocks-list li:nth-child(4) a {
    background-image: url("$assets-reports-svg");
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;
  }
  
  .blocks-list li:nth-child(5) a {
    background-image: url("$assets-ancestry_icon-png");
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;
  }
  
  .blocks-list li:nth-child(6) a {
    background-image: url("$assets-additional_features-svg");
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;
  }
}
*/

.blocks-list li a {
  background-repeat: no-repeat;
  background-position: center left;
  /*transform: translatex(20px);*/
}


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

.blocks-item-title {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 16px;
}

.blocks-item-description {
  font-weight: 300;
  margin: 0;
}

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

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

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

.section h2 {
  margin-bottom: 10px;
  text-align: center;
  color: #6b6b6b;
}

.knowledge-base {
  margin-bottom: 0;
}

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

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

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

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

.breadcrumbs li a {
  color: #656769;
}

.breadcrumbs li a:visited {
  color: #656769;
}


/***** Footer *****/

.footer a {
  color: #656769;
  line-height: 1.2;
  font-size: 14px;
  overflow: hidden;
  margin-top: 9px;
}

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


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

.footer-mobile-link {
  color: rgba(24, 115, 205, 1) !important;
}

.footer-subsection {
  margin-top: 25px;
}


/*
 * PUBSITE FOOTER
 */
.footer .footer-icon {
display: inline-block;
text-decoration: none;
vertical-align: middle;
margin: 4px 5px 3px 0; 
}

[class*="ttam-icon-"] {
  display: inline-block;
  line-height: 22px;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: 0;
  padding-left: 27px;
  color: #656769;
}

.ttam-icon-close-x:before {
content: "\e634";
}

.ttam-icon-drawer {
  padding-left: 3px;
}

.ttam-icon-facebook {
	background-image: url(https://www.23andme.com/static/img/icons/social/facebook.11ecd18c75eb.svg);
  background-size: 9px 17px;
  background-position: 4px;
}
.ttam-icon-twitter {
  background-image: url(https://www.23andme.com/static/img/icons/social/twitter.82cafca60fa8.svg);
  background-size: 18px 15px;
}

.ttam-icon-instagram {
  background-image: url(https://www.23andme.com/static/img/icons/social/instagram_footer.379cb6266c9e.svg);
  background-size: 17px 17px;
}

.ttam-icon-youtube {
  background-image: url(https://www.23andme.com/static/img/icons/social/youtube.a77234af1b2b.svg);
  background-size: 18px 22px;
}

.ttam-icon-linkedin {
  background-image: url(https://www.23andme.com/static/img/icons/social/linkedin.ea21da7a3407.svg);
  background-size: 17px 17px;
}


[class*="ttam-icon-"]:before {
font-family: "Genotype";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
}

.footer {
  background: #edeff0;
  line-height: 1;
  color: #333;
  font-size: 14px;
	margin-left: auto;
  margin-right: auto;
  
}
.footer-top-mobile {
  padding: 36px 0; 
}

  .footer-top {
   padding: 36px 20px 0; 
    width: 100%
  }


.footer-inner .row {
  margin: 0 auto;
}

.footer-logo img {
	height: auto; 
}

.footer .footer-logo {
  display: block;
  margin-top: 20px; 
}
.margin-top-large {
margin-top: 37px;
}
.margin-bottom-medium {
margin-bottom: 17px;
}
.col-20 {
width: 20%;
}
.col-15 {
width: 15%;
}
.col-25 {
width: 25%;
}
.col-23 {
width: 23%;
}
.col-17 {
width: 17%;
}
.six, .row .six {
width: 50%;
}
.text-right {
text-align: right;
}
.column, .columns {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 17%;
}

@media screen and (max-width: 1024px) and (min-width: 737px) {
  .column, .columns {
  float: left;
  display: block;
	margin-right: 2.3576515979%;
  width: auto;
  }
  
  .hide-for-small {
    display: none;
  }
}

.footer .category-title {
font-weight: 500;
font-style: normal;
}

.public-footer {
  border-top: none;
  line-height: 20px;
	color: #444;
}
.public-footer .footer-middle-row-container {
  border-top: 1px solid #e4e4e4;
  padding: 10px 0 20px 0;
  border: none;
}

.public-footer .footer-select {
  position: absolute;
  z-index: 1;
  padding: 0 0 7px;
  width: 100%;
  list-style-type: none;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid #525252;
}
.public-footer .footer-select li:first-child .ttam-icon {
  display: block;
}
.public-footer .footer-select a {
  white-space: nowrap;
  padding-left: 10px;
  text-decoration: none;
  margin: 0;
  display: block;
}
.public-footer .footer-select a:hover {
  background: #8ac45f;
  color: #fff;
}
.public-footer .footer-select a:hover .ttam-icon {
  color: #444;
}
.public-footer .footer-select a img {
  margin-right: 5px;
}

.footer-link {
    display: block;
    color: #333435;
    cursor: pointer;
}
.category-title {
    margin: 0 0 6px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.3;
}

.footer .footer-bottom-row-container {

background: #edeff0;
padding: 25px 0;
position: relative;
}

.footer-copy {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 30px 25px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: table;
  padding: 25px 0;
  margin: 0 auto;
}

.footer-copy-align {
  display: table-cell;
  font-size: 14px;
  vertical-align: middle;
  padding-right: 25px;
  color: #6B6B74;

}

/* New pubsite footer */

@media screen and (max-width: 736px) {
    .u-hide-for-mobile {
        display:none
    }
}

@media screen and (min-width: 737px) and (max-width:1024px) {
    .u-hide-for-tablet {
        display:none
    }
}

@media screen and (min-width: 737px) {
    .u-hide-for-desktop {
        display:none
    }
}

.u-desktop-only {
    display: none
}

@media screen and (min-width: 1025px) {
    .u-desktop-only {
        display:block
    }
}

.u-tablet-only {
    display: none
}

@media screen and (min-width: 737px) and (max-width:1024px) {
    .u-tablet-only {
        display:block
    }
}

@media screen and (max-width: 736px) {
    .u-tablet-only {
        display:none
    }
}

.u-mobile-only {
    display: none
}

@media screen and (max-width: 736px) {
    .u-mobile-only {
        display:block
    }
}

.u-hide {
    display: none
}

.chrome-footer-pod {
    margin-top: 25px
}

.chrome-footer-pod:first-child {
    margin-top: 0
}

.chrome-footer-image {
    display: block
}

.chrome-footer-links {
    margin: 0;
    list-style: none
}

.chrome-footer-links>li {
    line-height: 1.2;
    font-size: 14px;
    overflow: hidden;
    margin-top: 9px
}

.chrome-footer-links>li:first-child {
    margin-top: 0
}

.chrome-footer-callout {
    color: #d20f66;
    font-weight: 500;
    font-size: 14px
}

@media screen and (min-width: 737px) {
    .chrome-footer-callout {
        font-size:12px
    }
}

.chrome-social-text {
    display: inline-block;
    line-height: 22px;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-position: 0;
    padding-left: 27px
}

.chrome-social-text:hover {
    text-decoration: underline
}

.chrome-social-text.mod-facebook {
    background-image: url("../img/icons/social/facebook.11ecd18c75eb.svg");
    background-size: 9px 17px;
    background-position: 4px
}

.chrome-social-text.mod-instagram {
    background-image: url("../img/icons/social/instagram_footer.379cb6266c9e.svg");
    background-size: 17px 17px
}

.chrome-social-text.mod-linkedin {
    background-image: url("../img/icons/social/linkedin.ea21da7a3407.svg");
    background-size: 17px 17px
}

.chrome-social-text.mod-twitter {
    background-image: url("../img/icons/social/twitter.82cafca60fa8.svg");
    background-size: 18px 15px
}

.chrome-social-text.mod-youtube {
    background-image: url("../img/icons/social/youtube.a77234af1b2b.svg");
    background-size: 18px 22px
}

.chrome-location-link {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 0;
    border: none;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    background: transparent
}

.chrome-location-link:hover {
    text-decoration: underline
}

.chrome-location-link-icon {
    display: block;
    fill: #333435;
    margin-top: -2px;
    margin-left: 6px
}

@media screen and (min-width: 737px) and (max-width:1024px) {
    .chrome-location-link-icon {
        display:none
    }
}

.chrome-location-link .flag-icon {
    width: 16px;
    height: 16px;
    margin: -8px 0 -6px 6px
}

.chrome-security {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 30px 25px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (min-width: 737px) {
    .chrome-security {
        display:table;
        padding: 25px 0;
        margin: 0 auto
    }
}

.chrome-security-copy {
    font-size: 12px;
    color: #6b6b6b
}

@media screen and (min-width: 737px) {
    .chrome-security-copy {
        display:table-cell;
        font-size: 14px;
        vertical-align: middle;
        padding-right: 25px
    }
}


.chrome-footer-links>li>a,.chrome-footer-links>li>a:focus,.chrome-footer-links>li>a:hover,.chrome-location-link,.chrome-location-link:focus,.chrome-location-link:hover {
    color: #333435
}

.chrome-footer-links>li>a:hover,.chrome-location-link:hover {
    opacity: .8
}

@media print {
    .chrome-footer-logo,footer {
        display: none
    }
}

.chrome-footer {
    background-color: #edeff0
}

@media screen and (min-width: 737px) {
    .chrome-footer {
        padding:36px 20px 0
    }
}

.chrome-footer-nav {
    background: #f7f9fa;
}

.chrome-footer-nav>ul {
    margin: 0;
    list-style: none;
    border-bottom: 1px solid #d4d6d6
}

.chrome-footer-nav>ul>li {
    border-top: 1px solid #d4d6d6
}

.chrome-footer-toggle {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 22px 30px 20px !important;
    color: #6b6b6b;
    text-transform: uppercase;
    line-height: 1.2;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.chrome-footer-toggle:active,.chrome-footer-toggle:hover {
    color: #6b6b6b
}

.chrome-footer-toggle>svg {
    position: relative;
    top: -1px;
    fill: #6b6b6b;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease,-webkit-transform .3s ease
}

.drawer-open[aria-expanded="true"]>svg  {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)  
}

.chrome-footer-apps {
    padding: 16px 30px 20px
}

.chrome-footer-apps-title {
    line-height: 1;
    color: #6b6b6b
}

.chrome-footer-apps-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 13px
}

.chrome-footer-apps-container-cta {
    margin-left: 8px
}

.chrome-footer-apps-container-cta:first-child {
    margin-left: 0
}

.chrome-footer-apps-container-cta>img {
    display: block
}

.chrome-summary {
    padding: 0 30px 15px
}

.chrome-summary-heading {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700
}

.chrome-summary>p {
    margin-bottom: 12px
}

.chrome-summary>ul {
    margin: 0;
    list-style: none
}

.chrome-summary>ul>li {
    margin-bottom: 12px
}

.info-link-mobile a{
   color: rgba(24, 115, 205, 1);
}

.chrome-footer-container {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto
}

.chrome-footer-container:after {
    clear: both;
    content: "";
    display: table
}

@media screen and (min-width: 737px) {
    .chrome-footer-container-column {
        float:left;
        display: block;
        margin-right: 2.3576515979%;
        width: 14.7019570017%
    }

    .chrome-footer-container-column:last-child {
        margin-right: 0
    }
}

.chrome-subheading {
    margin: 0 0 6px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.3
}

.chrome-social-list {
    padding: 0 30px 15px;
    margin: 0;
    list-style: none;
    overflow: hidden
}

.chrome-social-list>li {
    float: left;
    margin-left: 18px
}

.chrome-social-list>li img {
    display: block
}

.chrome-social-list>li:first-child {
    margin-left: 0
}

.chrome-location-list {
    margin: 0;
    list-style: none
}

.chrome-location-list>li {
    font-size: 14px;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 27px
}

.chrome-location-list>li:first-child {
    margin-top: 0
}

.chrome-footer-pod {
    margin-top: 25px
}

.chrome-footer-pod:first-child {
    margin-top: 0
}

.chrome-footer-image {
    display: block
}

.chrome-footer-links {
    margin: 0;
    list-style: none
}

.chrome-footer-links>li {
    line-height: 1.2;
    font-size: 14px;
    overflow: hidden;
    margin-top: 9px
}

.chrome-footer-links>li:first-child {
    margin-top: 0
}

.chrome-footer-callout {
    color: #d20f66;
    font-weight: 500;
    font-size: 14px
}

@media screen and (min-width: 737px) {
    .chrome-footer-callout {
        font-size:12px
    }
}

.chrome-social-text {
    display: inline-block;
    line-height: 22px;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-position: 0;
    padding-left: 27px
}

.chrome-social-text:hover {
    text-decoration: underline
}

.chrome-social-text.mod-facebook {
    background-image: url("../img/icons/social/facebook.11ecd18c75eb.svg");
    background-size: 9px 17px;
    background-position: 4px
}

.chrome-social-text.mod-instagram {
    background-image: url("../img/icons/social/instagram_footer.379cb6266c9e.svg");
    background-size: 17px 17px
}

.chrome-social-text.mod-linkedin {
    background-image: url("../img/icons/social/linkedin.ea21da7a3407.svg");
    background-size: 17px 17px
}

.chrome-social-text.mod-twitter {
    background-image: url("../img/icons/social/twitter.82cafca60fa8.svg");
    background-size: 18px 15px
}

.chrome-social-text.mod-youtube {
    background-image: url("../img/icons/social/youtube.a77234af1b2b.svg");
    background-size: 18px 22px
}

.chrome-location-link {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 0;
    border: none;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    background: transparent
}

.chrome-location-link:hover {
    text-decoration: underline
}

.chrome-location-link-icon {
    display: block;
    fill: #333435;
    margin-top: -2px;
    margin-left: 6px
}

@media screen and (min-width: 737px) and (max-width:1024px) {
    .chrome-location-link-icon {
        display:none
    }
}

.chrome-location-link .flag-icon {
    width: 16px;
    height: 16px;
    margin: -8px 0 -6px 6px
}

.chrome-security {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 30px 25px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (min-width: 737px) {
    .chrome-security {
        display:table;
        padding: 25px 0;
        margin: 0 auto
    }
}

.chrome-security-copy {
    font-size: 12px;
    color: #6b6b6b
}

@media screen and (min-width: 737px) {
    .chrome-security-copy {
        display:table-cell;
        font-size: 14px;
        vertical-align: middle;
        padding-right: 25px
    }
}


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

.search input[type="search"] {
  border: 1px solid #ddd;
  border-radius: 30px;
  box-sizing: border-box;
  color: #999;
  height: 40px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
}

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


/*.search input[type="search"]:focus {
  border: 1px solid rgba(237, 239, 240, 1);
  color: #555;
}*/

.search input[type="search"]:focus {
  border: 0px solid #979696;
  box-shadow: 1px 1px 3px 2px #969797;
  box-sizing: border-box;
  color: #999;
}  

.search::before {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  color: #777;
  content: "\1F50D";
  font-size: 18px;
  position: absolute;
  left: 15px;
}

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

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

/* ============================================================================
   23andMe Help Center — custom layer for Copenhagen v3
   ----------------------------------------------------------------------------
   HOW TO USE
     1. Make the two in-place edits listed in css-migration-audit.md
        (the $color_5 variable and the empty `max-width:` in .hero).
     2. Paste this entire file at the VERY END of your new style.css.

   Everything here is written to win on the cascade, so you do not need to
   hunt down and delete the legacy blocks already scattered through the file.

   Sections
     00  Compile + parser cleanup
     01  Typography
     02  Base / layout
     03  Header + global nav
     04  Search
     05  Buttons, CTAs, votes
     06  Homepage + category blocks
     07  Contact page
     08  Article page
     09  In-article components
     10  Banners + notices
     11  Utilities + hidden elements
     12  Footer corrections
   ============================================================================ */


/* ============================================================================
   00  COMPILE + PARSER CLEANUP
   Neutralizes v2 icon-font pseudo-elements. Copenhagen v3 renders these icons
   as inline <svg>, so the legacy `content:` glyphs render as a second, stray
   emoji next to the real icon.
   ============================================================================ */

.search::before,
.page-header .icon-lock::before,
.article-title .icon-lock::before,
.blocks-item-internal .icon-lock::before,
.promoted-articles-item .icon-lock::before,
.article-list-item .icon-lock::before,
.recent-activity-item-comment span::before,
.article-comment-count .icon-comments::before,
.post-comment-count .icon-comments::before,
.attachments .attachment-item::before,
.share a::before,
.vote-up::before,
.vote-down::before,
.actions .dropdown-toggle::before {
  content: none;
}


/* ============================================================================
   01  TYPOGRAPHY
   The v3 base re-declares h1–h6 after the custom block near the top of the
   file, which resets h2 to 22px and drops the 600 weights. Restore them.
   ============================================================================ */

h2 {
  font-size: 28px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
  font-weight: 600;
}

h5 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #d50f67;
  line-height: 1em;
  font-weight: 800;
}

b,
strong {
  font-weight: 800;
}

.meta-data {
  font-weight: 300;
}


/* ============================================================================
   02  BASE / LAYOUT
   ============================================================================ */

body {
  font-weight: 400;
}

.container {
  padding-bottom: 5%;
}

/* The empty `max-width:` declaration in the legacy .hero rule is invalid and
   is dropped by the parser; this restores a valid box either way. */
.hero {
  width: 100%;
  max-width: none;
  height: 200px;
  padding: 0 20px;
  background-position: top;
  background-size: cover;
  text-align: center;
}

.welcome-hero {
  background: linear-gradient(281deg, #8839BF, #D90D94);
}

.welcome-hero .section h2 {
  color: #fff;
}

.support-welcome {
  margin-bottom: 0;
  padding-bottom: 1.25%;
  transform: translateY(50px);
}

.end-section {
  padding-bottom: 30px;
}


/* ============================================================================
   03  HEADER + GLOBAL NAV
   ============================================================================ */

.header {
  margin-top: 20px;
  margin-bottom: 60px;
}

/* v3 colors header links with rgba(24, 115, 205, 1); v2 used rgba(51, 52, 53, 1). */
.nav-wrapper-desktop a,
.nav-wrapper-desktop a:visited {
  color: rgba(51, 52, 53, 1);
}

.nav-wrapper-desktop a:hover,
.nav-wrapper-desktop a:focus,
.nav-wrapper-desktop a:active {
  color: rgba(24, 115, 205, 1);
}

.user-info > button,
.user-info > button:visited {
  color: rgba(51, 52, 53, 1);
}

.user-info > button:hover,
.user-info > button:focus {
  color: rgba(51, 52, 53, 1);
  background-color: transparent;
}

/* v2 hid all avatars. v3 shows them by default. */
.user-avatar {
  display: none;
}

.comment-avatar,
.article-avatar {
  display: none;
}

/* v2 hid the social share row. */
.share {
  display: none;
}


/* ============================================================================
   04  SEARCH
   v3 replaced the single input with a flex container (.search) holding the
   input plus a .clear-button, with the magnifier as an inline SVG. The legacy
   rules re-add a border and grey focus shadow *inside* that container, giving
   a double ring. This restores the v3 component and keeps the accessible
   text color from the old theme.
   ============================================================================ */

.search {
  display: flex;
  position: relative;
  border: 1px solid #848F99;
  border-radius: 30px;
}

.search input[type="search"] {
  border: none;
  box-shadow: none;
  height: 40px;
  color: #6B6B6B;
}

.search input[type="search"]:focus {
  border: none;
  box-shadow: none;
  color: #2F3941;
}

.search input[type="search"]::placeholder {
  color: #6B6B6B;
  opacity: 1;
}

.search:focus-within {
  border-color: rgba(237, 239, 240, 1);
  box-shadow: 0 0 0 2px rgba(213, 15, 103, 0.25);
}

.search-full,
.search-full input[type="search"],
.search-full .clear-button {
  border-color: #fff;
}

.search-more-questions {
  margin: 10px 0 20px;
  text-align: center;
  padding-top: 2%;
}

/* Vote badge on search results. v3 supplies an inline SVG icon inside it. */
.search-result-votes {
  /* Original 23andMe green was #7ac144 — white text on it is 2.2:1 and fails
     WCAG AA. #4F7A21 is the nearest equivalent that passes at 5.1:1.
     Swap the two lines below if you want exact visual parity over compliance. */
  background: #4F7A21;
  /* background: #7ac144; */
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  line-height: 1em;
  margin-left: 5px;
  padding: 3px 5px;
  position: relative;
  top: -3px;
  font-size: 11px;
  font-weight: 600;
}

.search-result-votes-icon {
  color: #fff;
}


/* ============================================================================
   05  BUTTONS, CTAs, VOTES
   ============================================================================ */

/* `background-clip: text` clips the gradient to the glyphs, which erases the
   pill and leaves white text on nothing. Reverting to border-box. */
.cta-button {
  background-clip: border-box;
}

/* v2 used green submit buttons; v3 defaults them to rgba(237, 239, 240, 1). */
.button-large,
.hbs-form input[type="submit"],
input[type="submit"] {
  /* WCAG: white on #7ac144 is 2.2:1 and fails AA. #4F7A21 passes at 5.1:1,
     and the brand pink rgba(237, 239, 240, 1) passes at 5.1:1. */
  background-color: #7ac144;
  border: 0;
  color: #fff;
}

.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,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
  background-color: #4a7728;
}

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

/* Article helpfulness votes. v3 renders real button text, so the old
   ::before / ::after glyph-and-title trick is deliberately not restored. */
.article-vote {
  background-color: transparent;
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}

.article-vote-up {
  color: #2f850d;
  border-color: #2f850d;
}

.article-vote-up:hover,
.article-vote-up:active,
.article-vote-up:focus {
  background-color: #2f850d;
  border-color: #2f850d;
  color: #fff;
  font-weight: 600;
}

.article-vote-down {
  color: #d50f67;
  border-color: #d50f67;
}

.article-vote-down:hover,
.article-vote-down:active,
.article-vote-down:focus {
  background-color: #d50f67;
  border-color: #d50f67;
  color: #fff;
  font-weight: 600;
}

/* Subscribe control. v3 markup is .article-subscribe > button[data-selected]. */
.article-subscribe button {
  color: rgba(69, 70, 71, 1);
  border-color: rgba(237, 239, 240, 1);
}

.article-subscribe button[data-selected="true"] {
  background-color: #d1d6d9;
  border-color: #d1d6d9;
  color: rgba(107, 107, 107, 1);
}

.article-subscribe button[data-selected="true"]:hover {
  background-color: #b5bec2;
  border-color: #b5bec2;
}

.chat_link:hover {
  cursor: pointer;
  text-decoration: underline;
}


/* ============================================================================
   06  HOMEPAGE + CATEGORY BLOCKS
   The legacy white-card .blocks-item wins on the cascade, but it drops the v3
   flex properties from .blocks-item-link, so the link stops filling the card
   and loses its focus ring. Both are restored here.
   ============================================================================ */

.blocks-item {
  display: flex;
  flex: 1 0 340px;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
  color: #444444;
  text-align: center;
  text-transform: capitalize;
}

.blocks-item:hover,
.blocks-item:focus,
.blocks-item:active {
  background-color: rgba(251, 252, 253, 1);
}

.blocks-item:hover *,
.blocks-item:focus *,
.blocks-item:active * {
  color: #202021;
  text-decoration: none;
}

.blocks-item-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  border-radius: inherit;
  color: #6b6b6b;
  /* v2 shifted the whole link with `transform: translateX(20px)`, which moves
     the paint but not the box — the click target ran off the right edge of the
     card. Left padding does the same job without the overflow. */
  /*padding: 20px 30px 20px 70px;*/
}

.blocks-item-link:visited {
  color: #6b6b6b;
}

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

.blocks-item-link:focus-visible {
  outline: 2px solid rgba(237, 239, 240, 1);
  outline-offset: 2px;
}

.blocks-list li a {
  transform: none;
  background-repeat: no-repeat;
  background-position: center left 20px;
}

.blocks-item-title {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 16px;
}

.blocks-item-description {
  font-weight: 300;
  margin: 0;
}

.blocks-item-internal .icon-lock {
  position: relative;
  bottom: 5px;
  height: 15px;
  width: 15px;
}

.section h2,
.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
  color: #6b6b6b;
}

.knowledge-base {
  margin-bottom: 0;
}

.homepage-title {
  text-align: center;
  font-weight: 600;
  padding-top: 20px;
}


/* ============================================================================
   07  CONTACT PAGE
   None of this survived the migration — it is restored in full.
   ============================================================================ */

.contact-options-item a {
  width: 100%;
  overflow: hidden;
  text-align: center;
  float: left;
  font-weight: normal;
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
  border-radius: 3px;
  text-transform: capitalize;
  display: inline-block;
  font-size: 18px;
  padding: 20px;
}

.block-item-pink a {
  background-color: #d50f67 !important;
  color: #fff !important;
  font-weight: 500;
}

.block-item-contact-pink {
  background-color: #d50f67 !important;
  color: #fff !important;
  font-weight: 500;
  padding: 30px;
  text-align: center;
}

.block-item-contact-pink a {
  color: #fff !important;
}

.contact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  /* v2 used a fixed `height: 250px`, which clipped the cards once they stacked
     on mobile. min-height keeps the desktop proportions and lets it grow. */
  min-height: 250px;
  padding-left: 0 !important;
  margin: 0 !important;
}

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

.contact-item {
  border-radius: 3px;
  box-sizing: border-box;
  color: #0d0e0e;
  display: flex;
  flex: 1 0 340px;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
  text-transform: capitalize;
}

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

.contact-item:hover,
.contact-item:focus,
.contact-item:active {
  background-color: rgba(251, 252, 253, 1);
}

.contact-item:hover *,
.contact-item:focus *,
.contact-item:active * {
  text-decoration: none;
  color: rgba(51, 52, 53, 1);
}

.contact-item-link {
  color: #0d0e0e;
  padding: 20px 30px;
}

.contact-item-link:hover,
.contact-item-link:focus,
.contact-item-link:active {
  text-decoration: none;
  color: rgba(51, 52, 53, 1);
}

/* transform dropped for the same reason as the category blocks above. */
.contact-list a,
.contact-list div {
  transform: none;
  color: rgba(51, 52, 53, 1);
  background-repeat: no-repeat;
  background-position: center left 28%;
}

.contact-list div:nth-child(1) {
  background-image: url("https://you.23andme.com/static/img/ancestry/legacy-tree-ad.53f43d6d4a88.svg");
  background-size: 54px 108px;
}

.contact-list-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  min-height: 150px;
  padding-left: 0 !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  .contact-list-options {
    margin: 0 -15px !important;
  }
}

.contact-list-options a {
  transform: none;
  color: rgba(51, 52, 53, 1);
  background-repeat: no-repeat;
  background-position: center left;
}

.contact-options-title {
  padding-bottom: 30px;
}

.contact-option-purple {
  color: #8839BF !important;
}

.center-text {
  text-align: center;
}

.hoo-details {
  margin-left: 0;
  font-size: 9px;
  display: none;
}

.hoo-title a {
  color: #656769 !important;
}

.underline {
  text-decoration: underline;
  color: #656769 !important;
}

@media (min-width: 1160px) {
  /* NOTE: the icon order flips here versus the base rule above — see the audit. */
  .contact-list div:nth-child(1) {
    background-image: url("https://www.23andme.com/static/img/icons/phone-icon.84915eec00aa.svg");
    background-size: 21.6px 36.9px;
    background-position: 20%;
  }

  .contact-list div:nth-child(2) {
    background-image: url("https://you.23andme.com/static/img/ancestry/legacy-tree-ad.53f43d6d4a88.svg");
    background-size: 60px 120px;
  }

  .contact-list div {
    background-repeat: no-repeat;
    background-position: center left 35%;
  }

  .hoo-details {
    font-size: 15px;
    margin-left: 15px;
  }

  .hoo {
    margin-left: 15px;
    padding-top: 5%;
  }
}


/* ============================================================================
   08  ARTICLE PAGE
   ============================================================================ */

@media (min-width: 1024px) {
  /* v2 set the article to 90% next to a 17% sidebar, which overflowed. v3 also
     caps .article-sidebar at max-width:17%, so this lets the article take
     whatever the sidebar leaves instead of fighting it. */
  .article {
    flex: 1 1 auto;
    max-width: calc(100% - 17%);
    min-width: 0;
    padding: 0 40px;
  }
}

@media (min-width: 768px) {
  .article-header {
    border-bottom: 1px solid #ddd;
  }
}

.article-title {
  text-transform: capitalize;
}

.article-title .icon-lock {
  display: none;
}

/* v2 centered every article image. v3 introduced image-style-align-* classes
   for author-controlled float/alignment, so this now skips those. */
.article-body img:not([class*="image-style"]) {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.article-body .imgWrap {
  background: #fff;
  padding: 25px;
}

#img01 {
  background: #fbfcfd;
  padding: 23px;
}

#img02 {
  background: #fbfcfd;
  padding: 0px;
}

.section-tree-title {
  /* !important is load-bearing: the legacy `.section h2 { text-align: center }`
     rule above also matches this heading. */
  text-align: left !important;
  font-weight: 400;
}

.article-list-item {
  font-size: 16px;
  padding: 5px 0;
  margin-left: 10px;
  text-transform: capitalize;
}

/* v2 had `.article-list-item a { color: rgba(107, 107, 107, 1) }`, which renders
   white-on-white. Deliberately keeping the v3 value. */
.article-list-item a {
  color: rgba(51, 52, 53, 1);
}

.section-list--collapsed .section-list-item:nth-child(1n + 6) {
  display: none;
}

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

.sidenav-item {
  border-radius: 1px;
  color: rgba(51, 52, 53, 1);
  display: block;
  font-weight: 300;
  padding: 10px;
  text-transform: capitalize;
}

.sidenav-item.current-article,
.sidenav-item.current {
  color: rgba(51, 52, 53, 1);
  text-decoration: none;
  font-weight: 700;
}

.sidenav-item:hover {
  background-color: rgba(237, 239, 240, 1);
  /* v2 left the text dark on the pink fill (~1.9:1). */
  color: rgba(107, 107, 107, 1);
  text-decoration: none;
  font-weight: 700;
}

.icon-external-link::after {
  display: inline-block;
  height: 5px;
  width: 5px;
  margin-right: 2px;
  margin-left: 1px;
  content: "";
  vertical-align: super;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image: url('data:image/svg+xml,<svg%20width="5"%20height="5"%20xmlns="http://www.w3.org/2000/svg"%20fill="%231871c9"><path%20fill-rule="evenodd"%20d="M0%200L100%200%20100%20100z"/></svg>');
}

.my-activities {
  height: 400px;
}


/* ============================================================================
   09  IN-ARTICLE COMPONENTS
   ============================================================================ */

.full-sized-table {
  width: 100%;
  font-size: 9px;
}

@media (min-width: 768px) {
  .full-sized-table {
    width: 100%;
    font-size: 15px;
  }
}

.full-sized-table tr {
  border-bottom: 1px solid #6b6b6b;
}

.table-image {
  max-width: none !important;
}

td {
  padding: 15px;
}

.population-specific {
  vertical-align: top;
}

.check {
  color: #3ba510;
  font-size: 17px;
}

.ballot-x {
  color: #cbcbcb;
}

.green {
  color: #6aa84f !important;
}

.pink {
  color: #d50f67 !important;
}

/* --- Drawers / FAQ accordions --- */

.drawer-toggle {
  position: relative;
  display: flex;
  width: 100%;
  padding: 22px 30px 20px !important;
  color: #6b6b6b;
  text-transform: uppercase;
  line-height: 1.2;
  align-items: center;
  justify-content: space-between;
}

.drawer-toggle:active,
.drawer-toggle:hover {
  color: #6b6b6b;
}

.drawer-questions {
  padding-left: 0px !important;
}

.drawer-questions li {
  list-style-type: none;
}

/* --- Troubleshooter --- */

#troubleshooter-questions {
  list-style-type: none;
  margin: 0 0 30px;
}

#troubleshooter-questions li {
  cursor: pointer;
  position: relative;
  margin: 15px 0 15px 25px;
}

#troubleshooter-questions li:before {
  content: '';
  position: absolute;
  left: -25px;
  width: 16px;
  height: 16px;
  border: 1px solid #cbcbcb;
  background: #fff;
  border-radius: 100%;
}

#troubleshooter-questions .active {
  font-weight: bold;
}

#troubleshooter-questions .active:after {
  content: '';
  position: absolute;
  left: -22px;
  top: 3px;
  width: 12px;
  height: 12px;
  background: #d50f67;
  border-radius: 100%;
}


/* ============================================================================
   10  BANNERS + NOTICES
   ============================================================================ */

#down-banner {
  background-color: #fcf3cc;
  border: solid 1px #f2c100;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 10px;
  border-radius: 2px;
  text-align: center;
  font-size: 18px;
}

.site-down {
  padding: 5px;
}

#yellow-banner {
  background-color: #fcf3cc;
  border: solid 2px #f2c100;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 17px;
  padding-bottom: 17px;
  border-radius: 4px;
}

.covid {
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
  color: white;
}

/* --- UK cookie notice --- */

.important-notice {
  position: relative;
  top: 100%;
  width: 100%;
  /* WCAG: white on #008ec7 is 3.7:1 and fails AA for 14px body text.
     #00719e passes at 4.6:1 if you want to tighten it. */
  background: #008ec7;
  z-index: 1;
  padding: 17px 0;
  color: #fff;
  line-height: 1.2;
  font-size: 14px;
}

.important-notice .row {
  /* v2 used a fixed `width: 980px`, which overflowed narrow viewports. */
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

.important-notice a,
.important-notice a:hover {
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}

a.close-cookies-notice,
a.close-cookies-notice:hover {
  text-decoration: none;
  display: block;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 27px;
  background: #3db7e4;
  font-size: 11px;
  border-radius: 24px;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -12px;
}

.cookies-notice-bar {
  padding: 25px 0;
  display: none;
}

.cookies-notice-bar .columns {
  margin-left: 8.33333%;
  width: 91.66667%;
  padding: 0 50px 0 15px;
  float: none;
}


/* ============================================================================
   11  UTILITIES + HIDDEN ELEMENTS
   ============================================================================ */

.prompt-selfservice {
  display: none;
}

.u-unstyled-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}

.u-unstyled-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* Legacy pubsite skip link. v3 now ships its own .skip-navigation, so keeping
   both gives two skip targets — see the audit before deploying. */
.main-content-link {
  color: #0d0e0e !important;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: none;
  border-right: solid 1px #d4d6d6;
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.333s ease-in-out, opacity 0.5s ease-in-out;
  z-index: 1;
  background-color: #000000;
}

@media screen and (max-width: 736px) {
  .main-content-link {
    height: 64px;
  }
}

@media screen and (min-width: 737px) {
  .main-content-link {
    height: 80px;
    background-color: rgb(255 255 255 / 97%);
    display: flex;
    align-items: flex-end;
    padding: 14px 24px 20px;
  }
}

@media screen and (min-width: 1025px) {
  .main-content-link {
    background-color: rgb(247 249 250 / 97%);
    align-items: center;
    padding: 22px 40px;
  }
}

.main-content-link:focus {
  opacity: 1;
  outline: none;
  text-decoration: underline;
  transform: translateX(0);
}


/* ============================================================================
   12  FOOTER CORRECTIONS
   v3's .footer adds a top border, a 60px top margin and 30px padding that the
   legacy pubsite .footer block never resets. v3 also makes .footer-inner a
   flex container, which breaks the float-based .row / .columns grid inside it.
   ============================================================================ */

.footer {
  border-top: 0;
  margin-top: 0;
  padding: 0;
  background: #edeff0;
  line-height: 1;
  color: #333;
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
}

.footer-inner {
  display: block;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

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

.footer-mobile-link {
  color: rgba(24, 115, 205, 1) !important;
}

.footer-subsection {
  margin-top: 25px;
}

/* ---------------------------------------------------------------------------
   Footer additions
--------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   NOTE: these footer-grid rules were originally scoped to #inside_footer.
   footer.hbs now ships five region blocks, so a single ID could not apply to
   whichever block is visible without duplicating it five times (invalid HTML).
   They are class-scoped instead. Specificity still beats the legacy float
   rules on .row / .column, which is what the grid overrides.
   -------------------------------------------------------------------------- */
.public-footer .footer-middle-row-container .row {
  display: grid;
  /* Narrow logo column, then ONE IMPLICIT COLUMN PER LINK GROUP.
     The region blocks differ: en-us has 5 groups (it alone has "Partner With
     Us"), the other four have 4. A hardcoded repeat(5, ...) left those regions
     with an empty sixth column, so the link columns are created implicitly by
     grid-auto-columns and adapt to whatever the visible block contains. */
  grid-auto-flow: column;
  grid-template-columns: minmax(100px, 0.7fr);
  grid-auto-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.public-footer .footer-middle-row-container .row .column {
  float: none;
  width: auto;
  margin-right: 0;
  min-width: 0; /* lets long labels wrap instead of widening the column */
}

/* Below ~1180px six columns get cramped, so reflow to three.
   No lower bound needed — .u-hide-for-mobile hides this block under 737px. */
@media screen and (max-width: 1180px) {
  .public-footer .footer-middle-row-container .row {
    grid-auto-flow: row;           /* cancel the single-row column flow above */
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 32px;
  }

  /* logo spans the full width above the link columns */
  .public-footer .footer-middle-row-container .row .column:first-child {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 900px) {
  .public-footer .footer-middle-row-container .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Bottom bar: social links + copyright

   .footer-copy already exists (display: table; padding: 25px 0; margin: 0 auto)
   and is left alone — this only lays out the new wrapper around it.
   .footer-link and .footer a already handle link display and spacing, so
   nothing here re-declares them.
--------------------------------------------------------------------------- */

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Social icons. The SVGs come from the 23andme.org footer: monochrome #6B6B6B,
   40x32 with the padding baked into the viewBox (twitter-x is 20x32). They are
   rendered at their intrinsic size, as .org does, so the gap below is on top of
   that built-in padding. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .footer-social-link {
  display: block;
  margin-top: 0; /* .footer a sets margin-top: 9px, which misaligns the row */
  line-height: 0; /* kills the inline-image descender gap */
}

.footer .footer-social-link img {
  display: block;
  height: 32px;
  width: auto;
}

.footer .footer-social-link:hover {
  opacity: 0.8;
}

@media screen and (max-width: 736px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 30px;
  }
}


/* ==========================================================================
   Ada chat availability
   --------------------------------------------------------------------------
   document_head.hbs puts .ada-disabled on <html> for every locale where Ada is
   not loaded (en-gb / en-150 / en-001). The two contact tiles are mutually
   exclusive: chat where Ada exists, request form where it does not.
   .blocks-item is display:flex, so the shown state must restore flex.
   ========================================================================== */

.contact-form-button {
  display: none;
}
.ada-disabled .chat-button {
  display: none;
}
.ada-disabled .contact-form-button {
  display: flex;
}

/* ==========================================================================
   Per-region footer blocks
   --------------------------------------------------------------------------
   Five blocks ship in the markup; showRegionFooter() in script.js reveals the
   one matching help_center.locale. en-us is visible by default so the footer
   still renders if JS never runs, and is switched off explicitly when another
   region wins. Flat CSS only -- Guide's preprocessor does not support Sass
   "&__suffix" nesting.
   ========================================================================== */

.footer-region-block {
  display: none;
}
.footer-region-block[data-region="en-us"] {
  display: block;
}
.footer-region-block.is-active {
  display: block;
}
.footer-region-block.is-inactive {
  display: none;
}

/* ==========================================================================
   Footer region selector -- mirrors the locale modal on 23andme.org
   --------------------------------------------------------------------------
   Written as FLAT CSS on purpose. Guide's stylesheet preprocessor supports
   theme variables and lighten(), but not Sass 3.3 "&__suffix" concatenation --
   an earlier nested version silently dropped the modal padding. Every selector
   below is spelled out in full; do not reintroduce nesting.
   ========================================================================== */

.footer-region {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ---------- trigger ---------- */
.footer-region-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: #656769;
}
.footer-region-toggle:hover .footer-region-change {
  color: rgba(24, 115, 205, 1);
}
.footer-region-toggle:focus-visible {
  outline: 2px solid rgba(24, 115, 205, 1);
  outline-offset: 2px;
  border-radius: 2px;
}
.footer-region-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.footer-region-change {
  text-decoration: underline;
}

/* ---------- flags ---------- */
.footer-region-flag {
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.footer-region-flag--sm {
  width: 20px;
  height: 20px;
}

/* ---------- modal shell ---------- */
.footer-region-modal {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: 100;
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 0;
  border-radius: 8px;
  background: rgba(251, 252, 253, 1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  text-align: left;
}
.footer-region-modal.is-hidden {
  display: none;
}

/* The padding that the nested version failed to apply. */
.footer-region-modal__inner {
  position: relative;
  padding: 32px 32px 28px;
}

.footer-region-modal h2 {
  margin: 0 0 16px;
  padding-right: 40px;              /* clear the close button */
  font-size: 20px;
  line-height: 1.3;
}

.footer-region-intro {
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 1.6;
  color: #727476;
}

.footer-region-close {
  position: absolute;
  top: 18px;
  right: 20px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #7e8183;
}
.footer-region-close:hover {
  color: rgba(51, 52, 53, 1);
}
.footer-region-close:focus-visible {
  outline: 2px solid rgba(24, 115, 205, 1);
  outline-offset: 2px;
}

/* ---------- region list ---------- */
.footer-region-nav {
  margin: 0;
}
.footer-region-list {
  display: flex;                    /* enables the `order` set in script.js */
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-region-item {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.footer-region-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 6px;
  color: rgba(51, 52, 53, 1);
  text-decoration: none;
  font-size: 15px;
}
.footer-region-link:hover,
.footer-region-link:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  text-decoration: none;
}
.footer-region-link:focus-visible {
  outline: 2px solid rgba(24, 115, 205, 1);
  outline-offset: -2px;
}
.footer-region-link.is-current {
  font-weight: 700;
}

/* ---------- country sub-list (Europe only) ---------- */
.footer-region-sublist {
  margin: 2px 0 16px 0;
  padding: 4px 0 0 60px;            /* aligns under the label, past the flag */
  list-style: none;
}
.footer-region-subitem {
  margin: 0;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #7e8183;
}

/* ---------- GDPR interstitial ---------- */
.footer-region-warning {
  width: 380px;
}
.footer-region-warning p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
}
.footer-region-warning p:last-child {
  margin-bottom: 0;
}
/* Primary action on a consequential choice, so it needs real prominence.
   NOTE: do not use rgba(237, 239, 240, 1) here -- in this theme it is rgba(237,239,240)
   (#EDEFF0, near-white), which gave white text a 1.15:1 contrast ratio.
   rgba(24, 115, 205, 1) is the theme's actual accent and yields 4.80:1 (WCAG AA),
   darkening to #0F3554 at 12.67:1 on hover. */
.footer-region-continue {
  padding: 11px 26px;
  border: 0;
  border-radius: 4px;
  background: rgba(24, 115, 205, 1);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.footer-region-continue:hover {
  background: #0F3554;
  color: #fff;
}
.footer-region-continue:focus-visible {
  outline: 2px solid rgba(51, 52, 53, 1);
  outline-offset: 2px;
}
.footer-region-back {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: rgba(24, 115, 205, 1);
  text-decoration: underline;
}
.footer-region-back:focus-visible {
  outline: 2px solid rgba(24, 115, 205, 1);
  outline-offset: 2px;
}

/* ---------- narrow viewports ---------- */
@media (max-width: 620px) {
  .footer-region-modal {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 40px);
  }
  .footer-region-modal__inner {
    padding: 26px 22px 22px;
  }
  .footer-region-warning {
    width: calc(100vw - 40px);
  }
}

/* ============================================================================
   23andMe Support — request form (route B) styles
   Append to the theme's style.css. Flat CSS only: Guide's stylesheet
   preprocessor does not support Sass 3.3 `&__suffix` BEM concatenation.
   ============================================================================ */

/* Applied by request-form.js to the one remaining internal ticket field
   (29400581515031 "Auto-generated ID", the Vouched job id) and, during
   Vouched, to the attachments field.

   That field MUST stay visible_in_portal = true. Turning it off stops Zendesk
   rendering it at all, which would silently break the Vouched job ID with no
   error. It is meant to render and be hidden here. */
.ttam-field-hidden {
  display: none !important;
}

/* Attachment guidance ----------------------------------------------------
   Appended inside the attachments field wrapper by request-form.js, so it is
   hidden along with the field while Vouched is mounted. */

.ttam-attachment-hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #68737d; /* 4.62:1 on #fff — AA for normal text */
}

/* Vouched --------------------------------------------------------------- */

.ttam-vouched-intro {
  margin: 20px 0 12px;
  padding: 16px;
  border: 1px solid #d8dcde;
  border-radius: 4px;
  background: #f8f9f9;
}

.ttam-vouched-intro h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.ttam-vouched-intro h3 {
  margin: 16px 0 0;
  font-size: 15px;
}

.ttam-vouched-intro p {
  margin: 0;
  line-height: 1.5;
}

.ttam-vouched-intro ol,
.ttam-vouched-intro ul {
  margin: 0 0 0 20px;
  padding: 0;
  line-height: 1.5;
}

.ttam-vouched-intro li {
  margin: 0 0 8px;
}

.ttam-vouched-intro ul {
  margin-top: 8px;
}

#vouched-element {
  margin: 0 0 24px;
  min-height: 420px;
}

/* "Need Support Now?" block ----------------------------------------------
   The CTA also carries the theme's existing .chat-button class, which supplies
   the pink background and white text (#d50f67 / #fff — 5.13:1, AA) with
   !important, and which script.js already binds to window.adaEmbed.toggle().
   Do not set background or color here; those declarations would lose to
   .chat-button anyway. Layout-only overrides below win on source order. */

.ttam-support-now {
  margin: 0 0 32px;
  padding: 20px 24px;
  border: 1px solid #d8dcde;
  border-radius: 4px;
  background: #fbfcfd;
}

.ttam-support-now h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.ttam-support-now p {
  margin: 0 0 12px;
  line-height: 1.5;
}

/* A real <button> rather than flagship's onclick <div>: native keyboard and
   screen-reader semantics, and jQuery's existing .chat-button click binding
   still fires. Reset the UA button chrome that .chat-button does not cover. */
.ttam-support-now-cta {
  display: inline-block;
  border: 0;
  font: inherit;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.ttam-support-now-cta:hover,
.ttam-support-now-cta:focus {
  text-decoration: underline;
}

/* Ada is gated off outside en-us / en-ca (html.ada-disabled is set in
   document_head). Hide the whole block there rather than offering a chat that
   cannot open — .ada-disabled .chat-button alone would leave the heading and
   paragraph stranded. */
.ada-disabled .ttam-support-now {
  display: none;
}

/* ==========================================================================
   Ketch region-gated footer links
   --------------------------------------------------------------------------
   The Washington Consumer Health Data links ship with [hidden] and are revealed
   by setupKetchRegionLinks() for US-WA visitors. .footer-link is display:block
   and .chrome-summary li is display:list-item, both of which are author rules
   and so beat the UA stylesheet's [hidden] { display: none }. Restate it here
   with enough weight to actually hide them.
   ========================================================================== */

[data-ketch-region][hidden] {
  display: none !important;
}

/* Vouched loading state — core.js is 5.2MB and uncompressed, so there is a real
   wait even with the preload warm-up. Say so rather than showing a blank box. */
.ttam-vouched-loading {
  margin: 0;
  padding: 24px 0;
  color: #68737d;
  font-style: italic;
}

/* ==========================================================================
   "Have more questions?" on article pages
   --------------------------------------------------------------------------
   Chat where Ada is loaded (en-us / en-ca), request form everywhere else.
   Mutually exclusive, mirroring .chat-button / .contact-form-button on the
   home page. These are <p> elements, so the shown state restores block, not
   flex.
   ========================================================================== */

.ttam-more-questions--form {
  display: none;
}
.ada-disabled .ttam-more-questions--chat {
  display: none;
}
.ada-disabled .ttam-more-questions--form {
  display: block;
}