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

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

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;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  outline: 0;
}

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: #F8FDFF;
  color: #000;
  font-family: "Figtree", serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Figtree", serif;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

h1,
.h1 {
  font-size: 32px;
}

h2,
.h2 {
  font-size: 28px;
}

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

h4,
.h4 {
  font-size: 16px;
}

a {
  color: #1F73B7;
  text-decoration: none;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}
a.external-link::after {
  content: "";
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='currentColor'%3E%3Cpath d='M212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h222.3q12.77 0 21.39 8.62 8.61 8.61 8.61 21.38T456-768.62q-8.62 8.62-21.39 8.62h-222.3q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v535.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h535.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-222.3q0-12.77 8.62-21.39 8.61-8.61 21.38-8.61t21.38 8.61q8.62 8.62 8.62 21.39v222.3Q820-182 799-161q-21 21-51.31 21H212.31ZM760-717.85 409.85-367.69q-8.31 8.3-20.89 8.5-12.57.19-21.27-8.5-8.69-8.7-8.69-21.08 0-12.38 8.69-21.08L717.85-760H590q-12.77 0-21.38-8.62Q560-777.23 560-790t8.62-21.38Q577.23-820 590-820h193.84q15.47 0 25.81 10.35Q820-799.31 820-783.84V-590q0 12.77-8.62 21.38Q802.77-560 790-560t-21.38-8.62Q760-577.23 760-590v-127.85Z'/%3E%3C/svg%3E");
  mask-size: 100%;
  width: 18px;
  height: 18px;
  background-color: #fff;
  opacity: 1;
  margin-left: 0.25rem;
}

hr {
  margin: 1rem 0;
  border: unset;
  height: 1px;
  background-color: #ddd;
}
@media (min-width: 768px) {
  hr {
    margin: 2rem 0;
  }
}

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

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}

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

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

.error-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}
.error-page .error {
  padding-top: 20%;
  text-align: center;
}

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

.section-content {
  width: 100%;
}

nabucasa-zigbee-flasher {
  --mdc-theme-primary: #17494D;
  --mdc-theme-on-primary: #fff;
}

/***** 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 #17494D;
  border-radius: 4px;
  color: #17494D;
  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: #17494D;
}
.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: #17494D;
  color: #FFFFFF;
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #000;
  border-color: #000;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

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

.button-secondary {
  color: #7C7F80;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #7C7F80;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #000;
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

.btn {
  align-items: center;
  border-radius: 2rem;
  display: inline-flex;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  text-align: center;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  padding: 12px 18px;
}
.btn-large {
  height: 54px;
  padding: 16px 36px;
}
.btn:hover {
  text-decoration: none;
}
.btn.btn-primary {
  background-color: #00AEF8;
  color: #FFFFFF;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active {
  background-color: #008BC6;
}
.btn.btn-dark {
  background-color: #174B62;
  color: #FFFFFF;
}
.btn.btn-dark:hover, .btn.btn-dark:focus, .btn.btn-dark:active {
  background-color: #0D303F;
}
.btn.btn-light {
  background-color: #CCEFFE;
  color: #174B62;
}
.btn.btn-light:hover, .btn.btn-light:focus, .btn.btn-light:active {
  background-color: #AED9EC;
  color: #00344A;
}
.btn.btn-white {
  background-color: #fff;
  color: #174B62;
}
.btn.btn-white:hover, .btn.btn-white:focus, .btn.btn-white:active {
  background-color: #f3f3f3;
  color: #00344A;
}
.btn.btn-text {
  border-radius: 0;
  padding: 0;
  background-color: transparent;
}
.btn.btn-text:hover {
  text-decoration: underline;
}
.btn.btn-text.btn-text-light, .btn.btn-text.btn-text-light:hover, .btn.btn-text.btn-text-light:focus, .btn.btn-text.btn-text-light:active {
  color: #ffffff;
}
.btn.btn-text.btn-text-dark, .btn.btn-text.btn-text-dark:hover, .btn.btn-text.btn-text-dark:focus, .btn.btn-text.btn-text-dark:active {
  color: #174B62;
}

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

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

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

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #7C7F80;
  font-size: 14px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.form footer a {
  color: #7C7F80;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 14px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}

/***** Header *****/
.header {
  background-color: #174B62;
  position: relative;
  align-items: center;
  display: flex;
  height: 74px;
  justify-content: center;
}
.header a {
  color: #fff;
}
.header-inner {
  align-items: center;
  display: flex;
  width: 100%;
}

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

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

.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: 74px;
  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: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}

.nav-wrapper-desktop {
  align-items: center;
  display: flex;
  gap: 1rem;
  flex-grow: 1;
}
@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-flex;
    justify-content: flex-end;
  }
}
.nav-wrapper-desktop a {
  display: none;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-flex;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}

@media (min-width: 1024px) {
  .header .nav-wrapper-mobile {
    display: none;
  }
}

.nav-wrapper-mobile {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}
.nav-wrapper-mobile .menu-button-mobile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  width: auto;
  color: #fff;
  padding: 0;
  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 {
  color: #174B62;
  background: #F8FDFF;
}
.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: 74px;
  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;
  color: #fff;
  width: 100%;
  height: 100%;
  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: #000;
}
.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: 40px;
  width: 40px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

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

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

/***** User info in header *****/
.user-info {
  display: inline-flex;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  border: 0;
  color: #fff;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button::after {
  color: #fff;
  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: 44px;
  width: 44px;
  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: #17494D;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #FFFFFF;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid #ddd;
  margin-top: 2rem;
  padding: 30px 0;
}
@media (min-width: 768px) {
  .footer {
    margin-top: 4rem;
  }
}
.footer a {
  color: #7C7F80;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.footer-language-selector button {
  color: #7C7F80;
  display: inline-block;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  padding: 1rem 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #7C7F80;
  font-size: 14px;
  max-width: 450px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumbs li + li::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' viewBox='0 0 4 7' fill='none'%3E%3Cpath d='M0.383721 6.79995C0.281395 6.79995 0.19186 6.76478 0.115116 6.69443C0.0383721 6.62408 0 6.53135 0 6.41623V0.583672C0 0.468556 0.0383721 0.375823 0.115116 0.305474C0.19186 0.235126 0.281395 0.199951 0.383721 0.199951C0.409302 0.199951 0.498837 0.238323 0.652326 0.315067L3.4343 3.09704C3.49826 3.161 3.54302 3.22495 3.5686 3.2889C3.59419 3.35286 3.60698 3.42321 3.60698 3.49995C3.60698 3.5767 3.59419 3.64704 3.5686 3.711C3.54302 3.77495 3.49826 3.8389 3.4343 3.90286L0.652326 6.68484C0.613954 6.72321 0.572384 6.75199 0.527616 6.77117C0.482849 6.79036 0.434884 6.79995 0.383721 6.79995Z' fill='%237C7F80'/%3E%3C/svg%3E");
  width: 4px;
  height: 7px;
}
.breadcrumbs li:last-child {
  color: #000;
  pointer-events: none;
  font-weight: 600;
}
.breadcrumbs li a {
  color: #7C7F80;
}

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

.search-wrapper {
  display: flex;
  max-width: 734px;
  margin: 0 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .search-wrapper {
    flex-wrap: nowrap;
  }
}

.search-wrapper form {
  flex-grow: 1;
  margin-bottom: 1rem;
}

.search-wrapper input {
  height: 54px;
}

.search-wrapper form + button {
  cursor: pointer;
  order: 1;
  margin-left: 1rem;
}

.search {
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.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;
  width: 100%;
  font-size: 18px;
}
.search input[type=search]::placeholder {
  color: #B1E2F8;
}
.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 .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.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: #17494D;
}
[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: #17494D;
}

[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: #17494D;
}
[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: #17494D;
}

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

.search-wrapper.small {
  align-items: center;
  flex-wrap: nowrap;
  margin: unset;
}
.search-wrapper.small form {
  margin-bottom: 0;
}
.search-wrapper.small .search input[type=search] {
  height: 42px;
  padding: 1rem;
  font-size: 1rem;
  border: 1px solid #d6d6d6;
}
.search-wrapper.small .search input[type=search]::placeholder {
  color: #7C7F80;
}
.search-wrapper.small form + button {
  height: 42px;
  font-size: 1rem;
  margin-left: 0.5rem;
  padding: 0 1rem;
}

.sub-nav {
  flex-grow: 1;
}

.error-page .search-wrapper .search input[type=search] {
  border: 1px solid #d6d6d6;
}
.error-page .search-wrapper .search input[type=search]::placeholder {
  color: #7C7F80;
}

/***** Hero component *****/
main > .visibility-hidden:has(ol li a[href$=Green]) + section.hero,
section.section.hero[data-category="Home Assistant Green"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-green.webp");
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  main > .visibility-hidden:has(ol li a[href$=Green]) + section.hero,
  section.section.hero[data-category="Home Assistant Green"] {
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  main > .visibility-hidden:has(ol li a[href$=Green]) + section.hero,
  section.section.hero[data-category="Home Assistant Green"] {
    margin-bottom: 1rem;
  }
}
main > .visibility-hidden:has(ol li a[href$=Green]) + section.hero:after,
section.section.hero[data-category="Home Assistant Green"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
main > .visibility-hidden:has(ol li a[href$=Green]) + section.hero .hero-inner,
section.section.hero[data-category="Home Assistant Green"] .hero-inner {
  color: #fff;
}
main > .visibility-hidden:has(ol li a[href$=Green]) + section.hero [data-title]:before,
section.section.hero[data-category="Home Assistant Green"] [data-title]:before {
  content: "Home Assistant Green";
}
main > .visibility-hidden:has(ol li a[href$=Green]) + section.hero [data-description]:before,
section.section.hero[data-category="Home Assistant Green"] [data-description]:before {
  content: "The affordable Home Assistant Green is the easiest way you can start using Home Assistant. It's plug-and-play and comes with Home Assistant already installed.";
}

main > .visibility-hidden:has(ol li a[href$=Yellow]) + section.hero,
section.section.hero[data-category="Home Assistant Yellow"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-yellow.webp");
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  main > .visibility-hidden:has(ol li a[href$=Yellow]) + section.hero,
  section.section.hero[data-category="Home Assistant Yellow"] {
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  main > .visibility-hidden:has(ol li a[href$=Yellow]) + section.hero,
  section.section.hero[data-category="Home Assistant Yellow"] {
    margin-bottom: 1rem;
  }
}
main > .visibility-hidden:has(ol li a[href$=Yellow]) + section.hero:after,
section.section.hero[data-category="Home Assistant Yellow"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
main > .visibility-hidden:has(ol li a[href$=Yellow]) + section.hero .hero-inner,
section.section.hero[data-category="Home Assistant Yellow"] .hero-inner {
  color: #fff;
}
main > .visibility-hidden:has(ol li a[href$=Yellow]) + section.hero [data-title]:before,
section.section.hero[data-category="Home Assistant Yellow"] [data-title]:before {
  content: "Home Assistant Yellow";
}
main > .visibility-hidden:has(ol li a[href$=Yellow]) + section.hero [data-description]:before,
section.section.hero[data-category="Home Assistant Yellow"] [data-description]:before {
  content: "The foundation of your smart home needs to be local and private. Home Assistant Yellow is that foundation.";
}

main > .visibility-hidden:has(ol li a[href$=Voice-Preview-Edition]) + section.hero,
section.section.hero[data-category="Home Assistant Voice Preview Edition"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-voice-pe.webp");
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  main > .visibility-hidden:has(ol li a[href$=Voice-Preview-Edition]) + section.hero,
  section.section.hero[data-category="Home Assistant Voice Preview Edition"] {
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  main > .visibility-hidden:has(ol li a[href$=Voice-Preview-Edition]) + section.hero,
  section.section.hero[data-category="Home Assistant Voice Preview Edition"] {
    margin-bottom: 1rem;
  }
}
main > .visibility-hidden:has(ol li a[href$=Voice-Preview-Edition]) + section.hero:after,
section.section.hero[data-category="Home Assistant Voice Preview Edition"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
main > .visibility-hidden:has(ol li a[href$=Voice-Preview-Edition]) + section.hero .hero-inner,
section.section.hero[data-category="Home Assistant Voice Preview Edition"] .hero-inner {
  color: #fff;
}
main > .visibility-hidden:has(ol li a[href$=Voice-Preview-Edition]) + section.hero [data-title]:before,
section.section.hero[data-category="Home Assistant Voice Preview Edition"] [data-title]:before {
  content: "Home Assistant Voice Preview Edition";
}
main > .visibility-hidden:has(ol li a[href$=Voice-Preview-Edition]) + section.hero [data-description]:before,
section.section.hero[data-category="Home Assistant Voice Preview Edition"] [data-description]:before {
  content: "Built for Home Assistant - Easy Setup - one USB-C cable and setup wizard, no assembly required.";
}

main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-1]) + section.hero,
section.section.hero[data-category="Home Assistant Connect ZBT-1"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-zbt-1.webp");
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-1]) + section.hero,
  section.section.hero[data-category="Home Assistant Connect ZBT-1"] {
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-1]) + section.hero,
  section.section.hero[data-category="Home Assistant Connect ZBT-1"] {
    margin-bottom: 1rem;
  }
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-1]) + section.hero:after,
section.section.hero[data-category="Home Assistant Connect ZBT-1"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-1]) + section.hero .hero-inner,
section.section.hero[data-category="Home Assistant Connect ZBT-1"] .hero-inner {
  color: #fff;
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-1]) + section.hero [data-title]:before,
section.section.hero[data-category="Home Assistant Connect ZBT-1"] [data-title]:before {
  content: "Home Assistant Connect ZBT-1";
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-1]) + section.hero [data-description]:before,
section.section.hero[data-category="Home Assistant Connect ZBT-1"] [data-description]:before {
  content: "The easiest way to add Zigbee support to your Home Assistant instance.";
}

main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-2]) + section.hero,
section.section.hero[data-category="Home Assistant Connect ZBT-2"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-zbt-2.webp");
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-2]) + section.hero,
  section.section.hero[data-category="Home Assistant Connect ZBT-2"] {
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-2]) + section.hero,
  section.section.hero[data-category="Home Assistant Connect ZBT-2"] {
    margin-bottom: 1rem;
  }
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-2]) + section.hero:after,
section.section.hero[data-category="Home Assistant Connect ZBT-2"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-2]) + section.hero .hero-inner,
section.section.hero[data-category="Home Assistant Connect ZBT-2"] .hero-inner {
  color: #fff;
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-2]) + section.hero [data-title]:before,
section.section.hero[data-category="Home Assistant Connect ZBT-2"] [data-title]:before {
  content: "Home Assistant Connect ZBT-2";
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-2]) + section.hero [data-description]:before,
section.section.hero[data-category="Home Assistant Connect ZBT-2"] [data-description]:before {
  content: "The easiest way to start with Zigbee or Thread is now even better.";
}

main > .visibility-hidden:has(ol li a[href$=Connect-ZWA-2]) + section.hero,
section.section.hero[data-category="Home Assistant Connect ZWA-2"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-zwa-2.webp");
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  main > .visibility-hidden:has(ol li a[href$=Connect-ZWA-2]) + section.hero,
  section.section.hero[data-category="Home Assistant Connect ZWA-2"] {
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  main > .visibility-hidden:has(ol li a[href$=Connect-ZWA-2]) + section.hero,
  section.section.hero[data-category="Home Assistant Connect ZWA-2"] {
    margin-bottom: 1rem;
  }
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZWA-2]) + section.hero:after,
section.section.hero[data-category="Home Assistant Connect ZWA-2"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZWA-2]) + section.hero .hero-inner,
section.section.hero[data-category="Home Assistant Connect ZWA-2"] .hero-inner {
  color: #fff;
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZWA-2]) + section.hero [data-title]:before,
section.section.hero[data-category="Home Assistant Connect ZWA-2"] [data-title]:before {
  content: "Home Assistant Connect ZWA-2";
}
main > .visibility-hidden:has(ol li a[href$=Connect-ZWA-2]) + section.hero [data-description]:before,
section.section.hero[data-category="Home Assistant Connect ZWA-2"] [data-description]:before {
  content: "The ultimate way to connect Z-Wave devices to Home Assistant.";
}

main > .visibility-hidden:has(ol li a[href$=Cloud]) + section.hero,
section.section.hero[data-category="Home Assistant Cloud"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-generic.webp");
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  main > .visibility-hidden:has(ol li a[href$=Cloud]) + section.hero,
  section.section.hero[data-category="Home Assistant Cloud"] {
    margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {
  main > .visibility-hidden:has(ol li a[href$=Cloud]) + section.hero,
  section.section.hero[data-category="Home Assistant Cloud"] {
    margin-bottom: 1rem;
  }
}
main > .visibility-hidden:has(ol li a[href$=Cloud]) + section.hero:after,
section.section.hero[data-category="Home Assistant Cloud"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
main > .visibility-hidden:has(ol li a[href$=Cloud]) + section.hero .hero-inner,
section.section.hero[data-category="Home Assistant Cloud"] .hero-inner {
  color: #fff;
}
main > .visibility-hidden:has(ol li a[href$=Cloud]) + section.hero [data-title]:before,
section.section.hero[data-category="Home Assistant Cloud"] [data-title]:before {
  content: "Home Assistant Cloud";
}
section.section.hero {
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  section.section.hero {
    margin-bottom: 2rem;
  }
}
@media (min-width: 1024px) {
  section.section.hero {
    margin-bottom: 2.5rem;
  }
}
section.section.hero[data-category="Home Assistant Green"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-green.webp");
}
section.section.hero[data-category="Home Assistant Green"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
section.section.hero[data-category="Home Assistant Green"] .hero-inner {
  color: #fff;
}
section.section.hero[data-category="Home Assistant Yellow"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-yellow.webp");
}
section.section.hero[data-category="Home Assistant Yellow"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
section.section.hero[data-category="Home Assistant Yellow"] .hero-inner {
  color: #fff;
}
section.section.hero[data-category="Home Assistant Voice Preview Edition"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-voice-pe.webp");
}
section.section.hero[data-category="Home Assistant Voice Preview Edition"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
section.section.hero[data-category="Home Assistant Voice Preview Edition"] .hero-inner {
  color: #fff;
}
section.section.hero[data-category="Home Assistant Connect ZBT-1"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-zbt-1.webp");
}
section.section.hero[data-category="Home Assistant Connect ZBT-1"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
section.section.hero[data-category="Home Assistant Connect ZBT-1"] .hero-inner {
  color: #fff;
}
section.section.hero[data-category="Home Assistant Connect ZBT-2"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-zbt-2.webp");
}
section.section.hero[data-category="Home Assistant Connect ZBT-2"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
section.section.hero[data-category="Home Assistant Connect ZBT-2"] .hero-inner {
  color: #fff;
}
section.section.hero[data-category="Home Assistant Connect ZWA-2"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-zwa-2.webp");
}
section.section.hero[data-category="Home Assistant Connect ZWA-2"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
section.section.hero[data-category="Home Assistant Connect ZWA-2"] .hero-inner {
  color: #fff;
}
section.section.hero[data-category="Home Assistant Cloud"] {
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-generic.webp");
}
section.section.hero[data-category="Home Assistant Cloud"]:after {
  content: "";
  background-color: rgba(23, 75, 98, 0.58);
  position: absolute;
  inset: 0;
}
section.section.hero[data-category="Home Assistant Cloud"] .hero-inner {
  color: #fff;
}

.hero {
  background-color: #c5f4fb;
  background-image: url("https://raw.githubusercontent.com/NabuCasa/support/refs/heads/main/static/img/hero-generic.webp");
  background-position: center;
  background-size: cover;
  padding: 36px 0px;
  text-align: center;
  width: 100%;
  position: relative;
}
@media (min-width: 768px) {
  .hero {
    padding: 120px 0px;
  }
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero-inner h2 {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  margin: 0 0 1rem 0;
}
@media (min-width: 768px) {
  .hero-inner h2 {
    font-size: 74px;
  }
}
.hero-inner p {
  max-width: 800px;
  margin: 0 auto;
  text-wrap: balance;
  font-weight: 300;
  font-size: 18px;
}
@media (min-width: 768px) {
  .hero-inner p {
    font-size: 24px;
  }
}
.hero .search-wrapper {
  margin-top: 32px;
}
@media (min-width: 768px) {
  .hero .search-wrapper {
    margin-top: 80px;
  }
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    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: 0;
}
.page-header-description {
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
    margin: 0 0 32px 0;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

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

.sub-hero {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 0rem 1rem;
  margin-bottom: 1rem;
}
.sub-hero .sub-nav {
  flex-grow: 1;
  margin: 0;
}

/***** 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 #17494D;
  border-radius: 4px;
  box-sizing: border-box;
  color: #17494D;
  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: #17494D;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #FFFFFF;
  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: #000;
}
.blocks-item-link {
  color: #17494D;
  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 #17494D;
  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/01JBVDA8NXHSMJ0ZG2DVNBHYVF);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: #1F73B7;
  text-decoration: underline;
}
.community a:visited {
  color: #9358B0;
}
.community a:hover, .community a:active, .community a:focus {
  color: #0F3554;
}

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

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #000;
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 14px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: #1F73B7;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #9358B0;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #0F3554;
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: #17494D;
  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;
}

/***** Item Cards *****/
main > .visibility-hidden:has(ol li a[href$=Green]) ~ .container .layout .column.sidebar .item-card.product.product-green,
section.section.hero[data-category="Home Assistant Green"] ~ .container .layout .column.sidebar .item-card.product.product-green {
  display: flex;
}

main > .visibility-hidden:has(ol li a[href$=Yellow]) ~ .container .layout .column.sidebar .item-card.product.product-yellow,
section.section.hero[data-category="Home Assistant Yellow"] ~ .container .layout .column.sidebar .item-card.product.product-yellow {
  display: flex;
}

main > .visibility-hidden:has(ol li a[href$=Voice-Preview-Edition]) ~ .container .layout .column.sidebar .item-card.product.product-voice-preview-edition,
section.section.hero[data-category="Home Assistant Voice Preview Edition"] ~ .container .layout .column.sidebar .item-card.product.product-voice-preview-edition {
  display: flex;
}

main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-1]) ~ .container .layout .column.sidebar .item-card.product.product-connect-zbt-1,
section.section.hero[data-category="Home Assistant Connect ZBT-1"] ~ .container .layout .column.sidebar .item-card.product.product-connect-zbt-1 {
  display: flex;
}

main > .visibility-hidden:has(ol li a[href$=Connect-ZBT-2]) ~ .container .layout .column.sidebar .item-card.product.product-connect-zbt-2,
section.section.hero[data-category="Home Assistant Connect ZBT-2"] ~ .container .layout .column.sidebar .item-card.product.product-connect-zbt-2 {
  display: flex;
}

main > .visibility-hidden:has(ol li a[href$=Connect-ZWA-2]) ~ .container .layout .column.sidebar .item-card.product.product-connect-zwa-2,
section.section.hero[data-category="Home Assistant Connect ZWA-2"] ~ .container .layout .column.sidebar .item-card.product.product-connect-zwa-2 {
  display: flex;
}

main > .visibility-hidden:has(ol li a[href$=Cloud]) ~ .container .layout .column.sidebar .item-card.product.product-cloud,
section.section.hero[data-category="Home Assistant Cloud"] ~ .container .layout .column.sidebar .item-card.product.product-cloud {
  display: flex;
}

.item-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .item-cards.horizontal {
    flex-direction: row;
  }
  .item-cards.horizontal .item-card {
    flex-basis: 0;
    flex-grow: 1;
  }
  .item-cards.horizontal .item-card-content {
    height: 100%;
  }
  .item-cards.horizontal .item-card-description {
    flex-grow: 1;
  }
}
.item-cards a.item-card {
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.item-cards a.item-card:hover {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.item-cards a.item-card:focus {
  text-decoration: none;
}
.item-cards .item-card {
  background-color: #fff;
  display: flex;
  border: 1px solid #CCC;
  border-radius: 8px;
  color: #000;
  padding: 1.5rem;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .item-cards .item-card {
    padding: 2rem;
    gap: 1.5rem;
  }
}
.item-cards .item-card:before {
  display: block;
  height: 44px;
  width: 44px;
  flex-shrink: 0;
}
.item-cards .item-card[data-name="Home Assistant Green"]:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Cpath d='M40 0H4C1.79086 0 0 1.79086 0 4V40C0 42.2091 1.79086 44 4 44H40C42.2091 44 44 42.2091 44 40V4C44 1.79086 42.2091 0 40 0Z' fill='%2314CC9E'/%3E%3Cpath d='M30.0231 28.9584C30.0231 29.5441 29.5417 30.0233 28.9533 30.0233H15.0459C14.4575 30.0233 13.9761 29.5441 13.9761 28.9584V23.1012C13.9761 22.5155 14.3184 21.6955 14.7303 21.2855L21.24 14.8054C21.6573 14.3901 22.3366 14.3901 22.7538 14.8054L29.2636 21.2855C29.6808 21.7008 30.0231 22.5181 30.0231 23.1038V28.9584Z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 44px 44px;
  content: "";
}
.item-cards .item-card[data-name="Home Assistant Green"]:hover {
  border-color: #14CC9E;
}
.item-cards .item-card[data-name="Home Assistant Yellow"]:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Cpath d='M40 0H4C1.79086 0 0 1.79086 0 4V40C0 42.2091 1.79086 44 4 44H40C42.2091 44 44 42.2091 44 40V4C44 1.79086 42.2091 0 40 0Z' fill='%23FBB03B'/%3E%3Cpath d='M30.0241 28.9591C30.0241 29.5448 29.5427 30.024 28.9543 30.024H15.0469C14.4585 30.024 13.9771 29.5448 13.9771 28.9591V23.102C13.9771 22.5162 14.3194 21.6962 14.7313 21.2862L21.241 14.8061C21.6582 14.3908 22.3376 14.3908 22.7548 14.8061L29.2645 21.2862C29.6818 21.7016 30.0241 22.5188 30.0241 23.1045V28.9591Z' fill='white'/%3E%3C/svg%3E");
  background-size: 44px 44px;
  content: "";
}
.item-cards .item-card[data-name="Home Assistant Yellow"]:hover {
  border-color: #FBB03B;
}
.item-cards .item-card[data-name="Home Assistant Voice Preview Edition"]:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Cpath d='M40 0H4C1.79086 0 0 1.79086 0 4V40C0 42.2091 1.79086 44 4 44H40C42.2091 44 44 42.2091 44 40V4C44 1.79086 42.2091 0 40 0Z' fill='%23DB582E'/%3E%3Cpath d='M22 29.5059C17.8634 29.5059 14.4941 26.1366 14.4941 22C14.4941 17.8634 17.8634 14.4941 22 14.4941C26.1366 14.4941 29.5059 17.8634 29.5059 22C29.5059 26.1366 26.1366 29.5059 22 29.5059Z' fill='white'/%3E%3C/svg%3E");
  background-size: 44px 44px;
  content: "";
}
.item-cards .item-card[data-name="Home Assistant Voice Preview Edition"]:hover {
  border-color: #DB582E;
}
.item-cards .item-card[data-name="Home Assistant Connect ZBT-1"]:before {
  background-image: url("data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1070_968)'%3E%3Cpath d='M232.727 0H23.2727C10.4145 0 0 10.4145 0 23.2727V232.727C0 245.585 10.4145 256 23.2727 256H232.727C245.585 256 256 245.585 256 232.727V23.2727C256 10.4145 245.585 0 232.727 0Z' fill='%23005FBE'/%3E%3Cpath d='M162.618 79.4181C162.618 73.7745 157.964 69.2363 152.262 69.2363H106.764C101.004 69.2363 96.4072 73.7745 96.4072 79.4181V165.644H108.451V195.782H150.633V165.644H162.676V79.4181H162.618Z' fill='%23F2F4F9'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1070_968'%3E%3Crect width='256' height='256' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: 44px 44px;
  content: "";
}
.item-cards .item-card[data-name="Home Assistant Connect ZBT-1"]:hover {
  border-color: #00AEF8;
}
.item-cards .item-card[data-name="Home Assistant Connect ZBT-2"]:before {
  background-image: url("data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M232.727 0H23.2727C10.4145 0 0 10.4145 0 23.2727V232.727C0 245.585 10.4145 256 23.2727 256H232.727C245.585 256 256 245.585 256 232.727V23.2727C256 10.4145 245.585 0 232.727 0Z' fill='%23005FBE'/%3E%3Cpath d='M135.601 67.2002C136.706 67.2004 137.601 68.0957 137.601 69.2002V161.601H137.626C137.611 161.827 137.603 162.055 137.601 162.285V162.555C137.684 169.111 143.024 174.4 149.599 174.4C149.868 174.4 150.135 174.39 150.4 174.372V174.4H169.6V186.001C169.6 189.314 166.914 192.001 163.6 192.001H92.4C89.0866 192.001 86.4002 189.314 86.4 186.001V174.4H105.6V174.373C105.864 174.39 106.131 174.4 106.4 174.4C113.027 174.4 118.4 169.028 118.4 162.4C118.4 162.132 118.39 161.865 118.373 161.601H118.401V69.2002C118.401 68.0956 119.296 67.2002 120.401 67.2002H135.601Z' fill='%23F2F4F9'/%3E%3C/svg%3E");
  background-size: 44px 44px;
  content: "";
}
.item-cards .item-card[data-name="Home Assistant Connect ZBT-2"]:hover {
  border-color: #005FBE;
}
.item-cards .item-card[data-name="Home Assistant Connect ZWA-2"]:before {
  background-image: url("data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M232.728 3.05176e-05H23.2731C10.4149 3.05176e-05 0.000366211 10.4146 0.000366211 23.2728V232.727C0.000366211 245.585 10.4149 256 23.2731 256H232.728C245.586 256 256 245.585 256 232.727V23.2728C256 10.4146 245.586 3.05176e-05 232.728 3.05176e-05Z' fill='%23005FBE'/%3E%3Cpath d='M135.599 24.0006C136.704 24.0006 137.599 24.896 137.599 26.0006V204.801H137.627C137.609 205.066 137.599 205.332 137.599 205.601C137.6 212.228 142.971 217.601 149.599 217.601C149.867 217.601 150.135 217.591 150.399 217.574V217.601H169.599V229.202C169.598 232.515 166.912 235.202 163.599 235.202H92.3993C89.0857 235.202 86.3994 232.515 86.3993 229.202V217.601H105.599V217.573C105.864 217.59 106.131 217.601 106.4 217.601C113.002 217.601 118.358 212.27 118.399 205.678V205.55C118.398 205.299 118.389 205.049 118.373 204.801H118.399V26.0006C118.399 24.8961 119.295 24.0007 120.399 24.0006H135.599Z' fill='%23F2F4F9'/%3E%3C/svg%3E");
  background-size: 44px 44px;
  content: "";
}
.item-cards .item-card[data-name="Home Assistant Connect ZWA-2"]:hover {
  border-color: #005FBE;
}
.item-cards .item-card[data-name="Home Assistant Cloud"]:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Cpath d='M40 0H4C1.79086 0 0 1.79086 0 4V40C0 42.2091 1.79086 44 4 44H40C42.2091 44 44 42.2091 44 40V4C44 1.79086 42.2091 0 40 0Z' fill='%23174B62'/%3E%3Cpath d='M31.6404 21.9952C31.6404 21.9201 31.6466 21.8461 31.6466 21.7701C31.6454 20.1893 31.1182 18.6516 30.1445 17.3895C29.1708 16.1276 27.8037 15.2098 26.2494 14.775C24.6953 14.3402 23.0386 14.4118 21.5297 14.9793C20.0209 15.5467 18.7418 16.579 17.886 17.9201C17.0104 17.6077 16.0757 17.4867 15.1473 17.5653C14.2188 17.644 13.3193 17.9208 12.5119 18.3758C11.7046 18.831 11.0088 19.4535 10.4738 20.1997C9.93869 20.9459 9.57737 21.7977 9.415 22.6953C9.25263 23.5927 9.29318 24.5141 9.53389 25.3946C9.77459 26.2751 10.2096 27.0934 10.8083 27.7918C11.4071 28.4902 12.1549 29.052 12.9994 29.4375C13.8438 29.8231 14.7644 30.023 15.6961 30.0233H25.9792L26.1412 30.0234H26.4L27.6954 30.0233H31.0521C32.099 30.0293 33.1089 29.6456 33.8771 28.9502C34.6453 28.2548 35.1145 27.2998 35.1892 26.2785C35.2641 25.2574 34.939 24.2465 34.2798 23.4511C33.6209 22.6557 32.6774 22.1352 31.6404 21.9952Z' fill='white'/%3E%3C/svg%3E");
  background-size: 44px 44px;
  content: "";
}
.item-cards .item-card[data-name="Home Assistant Cloud"]:hover {
  border-color: #174B62;
}
.item-cards .item-card.primary {
  background-color: #CCEFFE;
  border-color: #99DFFC;
}
.item-cards .item-card.primary .item-card-description {
  color: #174B62;
}
.item-cards .item-card.small {
  padding: 1.25rem 1.4rem;
}
.item-cards .item-card.small .item-card-content {
  gap: 0.5rem;
}
.item-cards .item-card.small .item-card-title {
  font-size: 20px;
}
.item-cards .item-card.product {
  background-position: center;
  background-size: cover;
  height: 16rem;
  padding: 1rem;
}
.item-cards .item-card.product[data-product-card-hide] {
  display: none;
}
.item-cards .item-card.product:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 0;
}
.item-cards .item-card.product,
.item-cards .item-card.product .item-card-description {
  color: #fff;
}
.item-cards .item-card.product .item-card-title,
.item-cards .item-card.product .item-card-description {
  z-index: 1;
}
.item-cards .item-card.product .item-card-details {
  justify-content: flex-end;
}
.item-cards .item-card.product .item-card-content {
  gap: 0.5rem;
}
.item-cards .item-card.product .item-card-title {
  font-size: 18px;
}
@media (min-width: 768px) {
  .item-cards .item-card.product .item-card-title {
    font-size: 22px;
  }
}
.item-cards .item-card.product .item-card-description {
  font-size: 14px;
}
.item-cards .item-card.product-green {
  background-image: url("https://www.home-assistant.io/images/frontpage/green-frontpage.jpg");
}
.item-cards .item-card.product-yellow {
  background-image: url("https://www.home-assistant.io/images/frontpage/yellow-frontpage.jpg");
}
.item-cards .item-card.product-voice-preview-edition {
  background-image: url("https://www.home-assistant.io/images/frontpage/voice-pe-frontpage.jpg");
}
.item-cards .item-card.product-connect-zbt-1 {
  background-image: url("https://www.home-assistant.io/images/frontpage/feature-zbt1.jpg");
}
.item-cards .item-card.product-connect-zbt-2 {
  background-image: url("https://www.home-assistant.io/images/frontpage/zbt-2-frontpage.webp");
}
.item-cards .item-card.product-connect-zwa-2 {
  background-image: url("https://www.home-assistant.io/images/frontpage/zwa-2-frontpage.webp");
}
.item-cards .item-card.product-cloud {
  background-image: url();
}
.item-cards .item-card.product.product-connect-zwa-2:before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}
.item-cards .item-card.product.product-connect-zwa-2 .item-card-details {
  justify-content: flex-start;
}
.item-cards .item-card-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .item-cards .item-card-details {
    gap: 1.5rem;
  }
}
.item-cards .item-card-content {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .item-cards .item-card-content {
    gap: 1rem;
  }
}
.item-cards .item-card-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .item-cards .item-card-title {
    font-size: 28px;
  }
}
.item-cards .item-card-description {
  color: #7C7F80;
}
.item-cards .item-card-buttons {
  display: flex;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}
.item-cards .item-card-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.item-cards .item-card-pill {
  background-color: #CCEFFE;
  color: #5A7D8C;
  padding: 4px 8px;
  font-weight: 500;
  font-size: 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.item-cards .item-card-pill:hover {
  background-color: #00AEF8;
  color: #fff;
}

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

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: #000;
}
.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: #000;
}

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

/***** Section pages *****/
.section-container {
  display: flex;
}
.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: #000;
  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;
}

/***** Layout *****/
.layout {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }
}
.layout .column {
  flex: 1;
}
@media (min-width: 768px) {
  .layout .column.sidebar {
    flex: 0 0 300px;
  }
}
.layout .column .section {
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .layout .column .section {
    margin-bottom: 2rem;
  }
}

.mt-0 {
  margin-top: 0;
}

/***** Article *****/
.article {
  flex: 1 0 auto;
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-header h1 {
  margin: 0;
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%;
    /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: #1F73B7;
  text-decoration: underline;
}
.article-body a:visited {
  color: #9358B0;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #0F3554;
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #7C7F80;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-body a.gh-edit {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 14px;
  text-decoration: none;
  line-height: 1;
  color: #000;
  text-decoration: underline;
}
.article-body a.gh-edit:before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83l3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100%;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-top: -2px;
}
.article-body .videoWrapper {
  display: flex;
}
.article-body .videoWrapper iframe {
  aspect-ratio: 16/9;
  height: auto;
  width: 100%;
}
.article-content {
  line-height: 1.6;
  margin-bottom: 40px;
  word-wrap: break-word;
}
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  margin-top: 1.5rem;
}
.article-content ol,
.article-content ul {
  margin: 0;
}
.article-content ol p,
.article-content ul p {
  margin: 0;
}
.article-content ol li,
.article-content ul li {
  margin: 0.5rem 0;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #7C7F80;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #17494D;
  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: 16px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: #1F73B7;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #9358B0;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #0F3554;
}
.article-return-to-top {
  border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: #000;
  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: 16px;
  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: #000;
  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: #7C7F80;
}

/***** 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: #7C7F80;
}
.share a:hover {
  text-decoration: none;
  color: #17494D;
}
.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: #7C7F80;
  display: inline-block;
  font-size: 14px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #1F73B7;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #9358B0;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #0F3554;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #7C7F80;
  font-size: 14px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #17494D;
  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: #17494D;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: "Figtree", serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: #1F73B7;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #9358B0;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #0F3554;
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #7C7F80;
  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: #7C7F80;
  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: #17494D;
}

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

.vote-voted {
  color: #17494D;
}

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

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

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

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

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

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: #17494D;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true] {
  background-color: #17494D;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
  background-color: #000;
  border-color: #000;
}
.community-follow button::after {
  border-left: 1px solid #17494D;
  content: attr(data-follower-count);
  color: #17494D;
  display: inline-block;
  font-family: "Figtree", 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 #17494D;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: #1F73B7;
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: #9358B0;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #7C7F80;
  font-size: 14px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: #000;
    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: #17494D;
}
.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: #7C7F80;
}
.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: "Figtree", serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: #1F73B7;
  text-decoration: underline;
}
.post-body a:visited {
  color: #9358B0;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #0F3554;
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #7C7F80;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #7C7F80;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #17494D;
  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 #17494D;
}

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

.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 #17494D;
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

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

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

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

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

.no-activities {
  color: #7C7F80;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #7C7F80;
  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 #17494D;
}
.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 #17494D;
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 14px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #7C7F80;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

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

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

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

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

.meta-group * {
  display: inline;
}

.meta-data {
  color: #7C7F80;
  font-size: 14px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px 0 8px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.profile-nav {
  background-color: #f2f2f2;
  margin-bottom: 37px;
}

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

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

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

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #7C7F80;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 14px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: #7C7F80;
  font-size: 14px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #17494D;
  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-flex;
}

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

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

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

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

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

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

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

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

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

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

.callout {
  align-items: flex-start;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  line-height: 1.3;
  margin: 1rem 0;
  padding: 1rem;
}
.callout .callout-content {
  flex-basis: 300px;
  flex-grow: 1;
}
.callout .callout-prefix {
  align-items: center;
  display: flex;
  font-weight: 600;
  gap: 0.5rem;
}
.callout .callout-prefix svg {
  height: 18px;
}
.callout.note {
  background: #FFFFFF;
}
.callout.important {
  background: #EEEEEE;
}
.callout.tip {
  background: #C8E6C9;
}

.hazard {
  align-items: flex-start;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.5rem 0.25rem;
  line-height: 1.3;
  margin: 1rem 0;
  padding: 1rem;
}
.hazard .hazard-prefix {
  align-items: center;
  display: flex;
  font-weight: 600;
  gap: 0.5rem;
}
.hazard .hazard-prefix svg {
  height: 18px;
}
.hazard.notice {
  background: #B3E5FC;
}
.hazard.caution {
  background: #FFE0B2;
}

.step-info {
  display: inline-flex;
  gap: 0 0.25rem;
}
.step-info.note {
  background: #FFFFFF;
}
.step-info.important {
  background: #EEEEEE;
}
.step-info.tip {
  background: #C8E6C9;
}
.step-info-prefix {
  align-items: center;
  display: flex;
  font-weight: 600;
  gap: 0.25rem;
  height: 26px;
}
.step-info-prefix svg {
  height: 18px;
}

.step-result {
  display: inline-flex;
  gap: 0 0.25rem;
}
.step-result-prefix {
  align-items: center;
  display: flex;
  font-weight: 600;
  gap: 0.25rem;
  height: 26px;
}
.step-result-prefix svg {
  height: 18px;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.steps .step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.steps .step .step-header {
  display: flex;
  flex-wrap: wrap;
  font-size: 22px;
  gap: 0 0.5rem;
}
.steps .step .step-header .step-number {
  font-weight: 600;
}
.steps .step .step-content-wrapper {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.steps .step .step-content-wrapper > img {
  border-radius: 0.5rem;
  max-width: 400px;
  width: 100%;
}
.steps .step .step-content-wrapper .step-content {
  flex-basis: 300px;
  flex-grow: 1;
}