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

*,
*:before,
*:after {
  box-sizing: inherit;
}

*,
*:before,
*:after {
  letter-spacing: -0.03em;
}

@media only screen and (min-width: 980px) {
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #e5e5e5;
  }

  ::-webkit-scrollbar-thumb {
    background: #c2c2c2;
  }
}

body {
  position: relative;
  background-color: rgba(250, 250, 250, 1);
  color: #000000;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

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

h4 {
  font-size: 16px;
}

a {
  color: rgba(14, 119, 204, 1);
  text-decoration: none;
}

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

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

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

input:focus {
  border: 1px solid rgba(14, 119, 204, 1);
}

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

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

select:focus {
  border: 1px solid rgba(14, 119, 204, 1);
}

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

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

textarea:focus {
  border: 1px solid rgba(14, 119, 204, 1);
}

.container {
  max-width: calc(1110px + 20px * 2);
  margin: 0 auto;
  padding: 0 20px;
}

@media only screen and (max-width: 979px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

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

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

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

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

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

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

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

.button::after, [role="button"]::after {
  color: rgba(14, 119, 204, 1);
}

.button:hover, .button:active, .button:focus, .button[aria-selected="true"], [role="button"]:hover, [role="button"]:active, [role="button"]:focus, [role="button"][aria-selected="true"] {
  background-color: rgba(14, 119, 204, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

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

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

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

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

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

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

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

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #000000;
  border: 1px solid #ddd;
  background-color: #f2f2f2;
}

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

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

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

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

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

@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}

.table td {
  display: block;
}

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

@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}

@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

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

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

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

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

.form-field input:focus {
  border: 1px solid rgba(14, 119, 204, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}

.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}

.form .suggestion-list li {
  padding: 10px 0;
}

.form .suggestion-list li a:visited {
  color: #073f6d;
}

/***** Header *****/
.header {
  position: relative;
  align-items: center;
  display: flex;
  height: 120px;
  padding-top: 54px;
  padding-bottom: 18px;
  justify-content: space-between;
}

@media only screen and (max-width: 979px) {
  .header {
    height: 94px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.header .logo {
  padding-bottom: 7px;
}

@media only screen and (max-width: 979px) {
  .header .logo {
    padding-bottom: 0;
  }
}

.header .logo img {
  display: block;
  max-height: 37px;
}

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}

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

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

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

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

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

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

.nav-wrapper a:hover, .nav-wrapper a:focus, .nav-wrapper a:active {
  background-color: transparent;
  color: rgba(14, 119, 204, 1);
  text-decoration: underline;
}

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

.nav-wrapper .icon-menu {
  display: inline-block;
  margin-right: 10px;
  color: rgba(14, 119, 204, 1);
}

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

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

/***** User info in header *****/
.user-info {
  display: inline-block;
}

.user-info .dropdown-toggle::after {
  display: none;
}

@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}

.user-info > [role="button"] {
  border: 0;
  color: rgba(14, 119, 204, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > [role="button"]:hover {
  color: rgba(14, 119, 204, 1);
  background-color: transparent;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.breadcrumbs li a:visited {
  color: rgba(14, 119, 204, 1);
}

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

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

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

.search input[type="search"]:focus {
  border: 1px solid rgba(14, 119, 204, 1);
  color: #555;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.blocks-item {
  border: 1px solid rgba(14, 119, 204, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(14, 119, 204, 1);
  display: flex;
  flex: 1 0 340px;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}

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

.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(14, 119, 204, 1);
}

.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

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

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

.blocks-item-internal a {
  color: #000000;
}

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

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

.blocks-item-title {
  margin-bottom: 0;
}

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

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

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

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

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

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

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

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

@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-start;
    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 {
  /* border-bottom: 1px solid #ddd;*/
  color: #000000;
  display: block;
  padding: 15px 0;
  text-decoration: underline;
}

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

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

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

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

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

/***** Recent Activity - FIXED LAYOUT WITH CENTERED "SEE MORE" *****/

.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}

.recent-activity-list {
  padding: 0;
}

/* Each activity item row */
.recent-activity-item {
  display: flex !important;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  overflow: visible !important;
  padding: 15px 0 !important;
}

/* Section name column */
.recent-activity-item h3 {
  flex-shrink: 0;
  width: 90px;
  margin: 0;
  padding-right: 12px;
  border-right: 1px solid #e5e7eb;
}

.recent-activity-item h3 a {
  font-size: 11px !important;
  color: #6b7280 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: inline-block;
}

/* Article title column */
.recent-activity-item-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding-left: 12px !important;
}

/* Meta column - timestamp + comments */
.recent-activity-item-meta {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  color: #9ca3af !important;
  font-size: 12px !important;
}

/* Timestamp - inline block */
.recent-activity-item-time {
  display: inline-block;
  margin-right: 4px;
}

/* Comment link - INLINE BLOCK */
.recent-activity-item-comment {
  display: inline-block !important;
  margin-left: 4px;
}

/* Comment icon via ::before pseudo-element */
.recent-activity-item-comment::before {
  display: inline-block;
}

.recent-activity-item-comment span::before {
  color: #0d6efd !important;
  content: "\1F4AC" !important;
  display: inline-block !important;
  font-size: 15px !important;
  padding-right: 3px !important;
  vertical-align: middle !important;
}

[dir="rtl"] .recent-activity-item-comment span::before {
  padding-left: 3px !important;
  padding-right: 0 !important;
}
/* ============================================ */
/* SEE MORE CONTAINER - CENTERED */
/* ============================================ */
.recent-activity-controls {
  text-align: center;
  padding: 15px 0;
}

/* The "See more" link itself */
[data-recent-activity-seemore] {
  display: inline-block;
  color: #0d6efd !important;
  font-size: 14px !important;
  cursor: pointer;
  text-decoration: none;
}

[data-recent-activity-seemore]:hover {
  text-decoration: underline; 
}
/* ============================================ */
/* SEE MORE LINK - CENTERED (KEY FIX!) */
/* ============================================ */
[data-recent-activity-seemore] {
  text-align: center;
  padding: 15px;
  color: #0d6efd !important;
  font-size: 14px !important;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto; 
}

/* Mobile responsive */
@media (max-width: 768px) {
  .recent-activity-item h3 {
    width: auto;
    min-width: 0;
    border-right: none;
    padding-right: 0;
    margin-bottom: 4px;
  }
  
  .recent-activity-item {
    flex-direction: column !important;
  }
  
  .recent-activity-item-meta {
    text-align: left;
    margin-top: 8px;
  }
}

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

.category-content {
  flex: 1;
}

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

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

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

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

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

.section-tree .icon-lock::before {
  vertical-align: baseline;
}

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

.section-tree-title a {
  color: #000000;
}

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

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

.article-list-item a {
  color: #000000;
}

.icon-star::before {
  color: rgba(14, 119, 204, 1);
  font-size: 18px;
}

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

.section-content {
  flex: 1;
}

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

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

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}

@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}

.article-container {
  display: flex;
  flex-direction: column;
}

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

.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}

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

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

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

.article [role="button"] {
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}

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

.article-info {
  max-width: 100%;
}

.article-meta {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body td, .article-body th {
padding: 5px;
}
.article-body ul, .article-body ol {
  padding-left: 20px;
  list-style-position: outside; /* was: inside */
  margin: 5px 0 5px 5px;
}

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

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

.article-body a:visited {
  color: #073f6d;
}

.article-body code {
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.article-body pre {
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

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

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

.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}

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

.article-comment-count {
  color: #333;
  font-weight: 300;
}

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

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

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

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

.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

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

.article-relatives > * {
  flex: 1 1 auto;
  margin-right: 0;
}

.article-relatives > *:last-child {
  margin: 0;
}

@media (min-width: 768px) {
  .article-relatives > * {
    margin-right: 20px;
  }
}

.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}

.article-vote {
  background: transparent;
  border: 1px solid rgba(14, 119, 204, 1);
  color: rgba(14, 119, 204, 1);
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}

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

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

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

.article-vote:focus, .article-vote:active {
  background-color: transparent;
  color: rgba(14, 119, 204, 1);
}

.article-vote:hover {
  background-color: rgba(14, 119, 204, 1);
}

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

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

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

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

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

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

.article-return-to-top a {
  color: #000000;
  display: block;
  padding: 20px 0;
}

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

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

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

.article-unsubscribe {
  background-color: rgba(14, 119, 204, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

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

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

.sidenav-item {
  border-radius: 4px;
  color: #000000;
  display: block;
  font-weight: 300;
  margin-bottom: 10px;
  padding: 10px;
}

.sidenav-item.current-article, .sidenav-item:hover {
  background-color: rgba(14, 119, 204, 1);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

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

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

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}

.attachments .attachment-item:last-child {
  margin-bottom: 0;
}

.attachments .attachment-item::before {
  color: #000000;
  content: "\1F4CE";
  font-size: 15px;
  left: 0;
  position: absolute;
  top: 5px;
}

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

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

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

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

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

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

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

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

.share a:hover::before {
  color: rgba(14, 119, 204, 1);
}

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

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

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

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

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

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

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

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

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

.comment-callout a {
  color: rgba(14, 119, 204, 1);
}

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

.comment-sorter a {
  color: #333;
  font-weight: 300;
  font-size: 13px;
  text-decoration: none;
}

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

.comment-wrapper {
  display: flex;
  justify-content: space-between;
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.comment-container {
  width: 100%;
}

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

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

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

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

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

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

.comment-ccs {
  display: none;
}

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

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

.comment-attachments a {
  color: rgba(14, 119, 204, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

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

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

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

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

.comment-body a:visited {
  color: #073f6d;
}

.comment-body code {
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.comment-body pre {
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

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

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

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

.vote a {
  outline: none;
}

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

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

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

.vote-up:hover::before,
.vote-down:hover::before {
  color: rgba(14, 119, 204, 1);
}

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

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

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

.vote-voted::before {
  color: rgba(14, 119, 204, 1);
}

.vote-voted:hover::before {
  color: #073f6d;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari*/
}

.actions .dropdown-toggle {
  font-size: 0;
  margin: 15px 0;
}

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

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

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

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

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

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

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

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

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

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}

.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}

@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}

.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

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

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}

.community-follow .dropdown {
  width: 100%;
}

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

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

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

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

.community-follow [role="button"][aria-selected="true"] {
  background-color: rgba(14, 119, 204, 1);
  color: rgba(255, 255, 255, 1);
}

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

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

.community-follow [role="button"]::after {
  border-left: 1px solid rgba(14, 119, 204, 1);
  content: attr(data-follower-count);
  color: rgba(14, 119, 204, 1);
  display: inline-block;
  font-family: 'Inter', sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}

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

[dir="rtl"] .community-follow [role="button"]::after {
  border-left: 0;
  border-right: 1px solid rgba(14, 119, 204, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}

.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}

.striped-list-info {
  flex: 2;
}

.striped-list-title {
  color: rgba(14, 119, 204, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}

.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}

.striped-list-title:visited {
  color: #073f6d;
}

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

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

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

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

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

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

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

@media (min-width: 768px) {
  .striped-list-number {
    color: #000000;
    display: block;
    font-weight: 400;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #1eb848;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}

.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(14, 119, 204, 1);
}

.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}

[dir="rtl"] .status-label-official {
  left: 30px;
  right: auto;
}

.status-label-pending, .status-label-not-planned {
  background-color: #eee;
  color: #333;
}

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

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

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

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

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

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

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

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}

@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}

.post-container {
  display: flex;
  flex-direction: column;
}

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

.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}

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

.post-header .status-label {
  vertical-align: super;
}

.post-title {
  margin-bottom: 20px;
  width: 100%;
}

@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}

.post-title h1 {
  display: inline;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}

.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.post-avatar {
  margin-bottom: 30px;
}

.post-content {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  word-break: break-word;
}

.post-info-container {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}

.post-info {
  flex: 1;
}

@media (min-width: 1024px) {
  .post-info {
    padding-right: 20px;
  }
}

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

.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}

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

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

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

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

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

.post-body a:visited {
  color: #073f6d;
}

.post-body code {
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.post-body pre {
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

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

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

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

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

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

.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}

@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir="rtl"] .post-sidebar {
    padding: 0 50px 0 0;
  }
}

.post-sidebar h5 {
  font-weight: 600;
}

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

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

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

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

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

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

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

.collapsible-nav-list li {
  color: #000000;
  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: #000000;
  display: block;
}

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

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

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

.collapsible-nav-list li[aria-selected="true"] a {
  color: #000000;
}

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

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

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

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

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

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}

@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.my-activities-table .striped-list-title {
  /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}

@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.my-activities-table thead {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}

.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}

.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}

.my-activities-table td:not(:first-child) {
  display: none;
}

@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}

.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}

.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}

.requests-table-toolbar .request-table-filter {
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}

.requests-table-toolbar .request-filter {
  display: block;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}

.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}

@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}

.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}

@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}

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

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

.requests-table-toolbar .organization-unsubscribe {
  background-color: rgba(14, 119, 204, 1);
  color: rgba(255, 255, 255, 1);
}

.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}

.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}

.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}

.requests-table-toolbar + .requests {
  margin-top: 40px;
}

.requests .requests-table-meta {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}

.requests .requests-table thead {
  display: none;
}

@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}

.requests .requests-table-info {
  display: block;
}

@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}

.requests .requests-table .requests-link {
  position: relative;
}

.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
.subscriptions-unsubscribe a {
  background: rgba(14, 119, 204, 1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 1);
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}

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

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

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

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

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

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

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

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

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

.no-activities {
  color: #333;
}

/***** 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;
  cursor: pointer;
  display: flex;
  padding: 8px 15px;
  width: 100%;
}

.request-main .comment-show-container.hidden {
  display: none;
}

.request-main .comment-show-container-content {
  align-self: center;
  color: #333;
  margin-left: 10px;
}

.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid rgba(14, 119, 204, 1);
}

.request-main .form-field.comment-ccs > input[type="text"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(14, 119, 204, 1);
}

.request-main input#mark_as_solved {
  display: none;
}

.request-title {
  width: 100%;
}

@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}

.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}

@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f2f2f2;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}

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

@media (min-width: 1024px) {
  .request-sidebar h5 {
    display: none;
  }
}

.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}

.request-details:last-child {
  border: 0;
}

.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}

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

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

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

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

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

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

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

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

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

.pagination * {
  display: inline-block;
}

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

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

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

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

.pagination li:hover:not(.pagination-current) span, .pagination li:hover:not(.pagination-current) a {
  color: #000000;
  text-decoration: none;
}

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

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

.pagination-current {
  background-color: rgba(14, 119, 204, 1);
}

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

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

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

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

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

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

.meta-group * {
  display: inline;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.profile-header .options [data-action="edit-profile"] {
  background-color: rgba(14, 119, 204, 1);
  border: 0;
  color: rgba(255, 255, 255, 1);
  line-height: normal;
  padding: 8px 20px;
}

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

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

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

.profile-stats .stat-label {
  color: #333;
  font-weight: 300;
  flex: 0 0 100px;
  margin-right: 10px;
}

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

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}

@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}

@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}

@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(14, 119, 204, 1);
  border-radius: 4px;
  color: rgba(14, 119, 204, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}

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

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

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

.profile-section {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}

[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}

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

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}

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

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  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: #f2f2f2;
}

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

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

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

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

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

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

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

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: 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-list {
  margin-bottom: 25px;
}

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

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

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

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

.search-result-votes::before, .search-result-meta-count::before {
  color: rgba(14, 119, 204, 1);
}

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

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

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

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

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

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

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

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

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

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

.main-footer {
  margin-top: 60px;
  padding: 65px 0 90px;
  background: #f7f7f7;
}

@media only screen and (max-width: 979px) {
  .main-footer {
    padding: 36px 0;
  }
}

.main-footer a {
  color: #000;
  transition: color 186ms;
}
.main-footer a:hover,
.main-footer a.active {
  color: #2cbd29;
}

@media only screen and (max-width: 767px) {
  .main-footer .logo:not(.limited) {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .main-footer .logo.limited {
    display: none;
  }
}

.main-footer .navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #d2d2d2;
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .main-footer .navigation {
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 767px) {
  .main-footer .navigation {
    display: block;
  }
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .column.break {
    width: 100%;
    margin-top: 38px;
  }
}

@media only screen and (max-width: 767px) {
  .column {
    margin-bottom: 38px;
  }
  .column:last-child {
    margin-bottom: 0;
  }
}

.main-footer .title {
  margin-bottom: 13px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.23em;
}

@media only screen and (max-width: 767px) {
  .main-footer .title {
    font-size: 15px;
  }
}

.main-footer .menu li {
  margin-bottom: 2px;
}

.main-footer .menu a {
  display: block;
  padding: 5px 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.33em;
  text-decoration: none;
}
.main-footer .menu a:hover,
.main-footer .menu a.active {
  color: #2cbd29;
}

@media only screen and (max-width: 767px) {
  .main-footer .menu a {
    font-size: 14px;
    padding: 6px 0;
  }
}

.main-footer .menu.important {
  margin-top: -5px;
}

.main-footer .menu.important li {
  margin-bottom: 9px;
}

.main-footer .menu.important a {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.23em;
}

@media only screen and (max-width: 767px) {
  .main-footer .menu.important a {
    font-size: 15px;
  }
}

.main-footer .socials {
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 0;
}
@media only screen and (max-width: 979px) {
  .main-footer .socials {
    justify-content: flex-start;
  }
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .main-footer .socials {
    margin-bottom: 38px;
  }
}
@media only screen and (max-width: 767px) {
  .main-footer .socials {
    margin-bottom: 54px;
  }
}

.main-footer .socials li {
  margin-left: 12px;
}
.main-footer .socials li:first-child {
  margin-left: 0;
}

.main-footer .socials a {
  display: block;
  width: 24px;
  height: 24px;
}

.main-footer .socials svg {
  width: 100%;
  height: 100%;
  fill: #757575;
  transition: fill 186ms;
}

.main-footer .socials svg {
  fill: #333333;
}

@media only screen and (max-width: 767px) {
  .main-footer .socials a {
    width: 30px;
    height: 30px;
  }
}

.main-footer .socials a:hover svg {
  fill: #2cbd29;
}

.main-footer .copyright {
  font-size: 10px;
  line-height: 1.6em;
  color: #959595;
}

.main-footer .policy-links {
  margin-bottom: 13px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.33em;
}

.main-footer .policy-links a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.main-footer .policy-links a:hover {
  text-decoration: underline;
}

/***** Preview bar container (hide to see the site as a regular user will do) *****/

/*#preview-bar-container {*/
/*  display: none;*/
/*}*/


.knowledge-base .article-list >li{
  display:none
}


.knowledge-base .article-list > li:nth-child(-n+10),
.knowledge-base .article-list > li.show_all_items{
  display:block;
}

/***** Featured Articles Section *****/

/* Container padding */
.articles {
    padding: 30px 0;
}

/* Center-align the "Featured articles" heading */
.articles h3 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

/* Use CSS Grid for even 2-column layout */
.article-list.promoted-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;              /* REDUCED from 15px - row spacing */
    column-gap: 40px;      /* Keep wider spacing between columns */
    padding: 0;
    list-style: none;
}

/* Each article item styling */
.promoted-articles-item {
    margin: 0;
    padding: 0;            /* REDUCED from 8px 0 - remove extra padding */
}

/* Left-aligned text for article links */
.promoted-articles-item a {
    display: block;
    text-align: left;
    color: #333;
    font-size: 15px;
    line-height: 1.4;
    padding: 4px 0;        /* REDUCED from 8px - tighter link spacing */
    border-bottom: 1px solid #eee;
}

.promoted-articles-item a:hover {
    color: #0d6efd;
}

/* Remove bottom border from last item in each column */
.promoted-articles-item:last-child a,
.promoted-articles-item:nth-last-child(2) a {
    border-bottom: none;
}

/* Mobile responsive - single column */
@media (max-width: 768px) {
    .article-list.promoted-articles {
        grid-template-columns: 1fr;
    }
    
    .promoted-articles-item:last-child a {
        border-bottom: none;
    }
}

/* Tablet and Desktop - two columns */
@media (min-width: 769px) {
    .article-list.promoted-articles {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Remove borders from last items in each column */
    .promoted-articles-item:last-child a,
    .promoted-articles-item:nth-last-child(2) a {
        border-bottom: none;
    }
}
/* Passware Support Quick Links */
.passware-support-links {
    display: flex;
    gap: 12px; /* Reduced from 15px */
    justify-content: center;
    margin-top: 20px;
    width: 100%; /* Ensure full available width */
    max-width: 800px; /* Limit maximum width for readability */
}

.passware-support-links a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px; /* Reduced from 10px 20px - less internal spacing */
    border: 1px solid #0E77CC;
    border-radius: 4px;
    color: #0E77CC;
    text-decoration: none;
    background-color: white;
    font-size: 13px; /* Reduced from 14px - smaller = fits better */
    line-height: 1.3; /* Tighter line height */
    transition: all 0.2s ease;
    flex-shrink: 1; /* Allow links to shrink if needed */
    white-space: normal; /* Allow text wrapping within each link */
}

.passware-support-links a:hover {
    background-color: #eff6ff;
    border-color: #2cbd29;
    color: #2cbd29;
    transform: translateY(-2px);
}

.arrow-icon {
    margin-left: 6px; /* Reduced from 8px */
    font-size: 12px; /* Smaller arrow */
    flex-shrink: 0; /* Arrow shouldn't shrink */
}

/* Mobile responsive - stack vertically on small screens */
@media (max-width: 768px) {
    .passware-support-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .passware-support-links a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/* Mobile responsive */
@media (max-width: 767px) {
    .passware-support-links {
        flex-direction: column;
        align-items: center;
    }
    
    .passware-support-links a {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}
/* ===== FAQ accordion (matches passware.com) ===== */
.accordion { margin: 24px 0; }        /* same width as the rest of the article */
.accordion__item { border-bottom: 1px solid #E6E7E9; }

.accordion__item-title {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;               /* theme's Inter font */
  font-size: 16px;
  font-weight: 600;
  padding: 16px 40px 16px 0;          /* right padding leaves room for the chevron */
  line-height: 1.4;
  position: relative;
  transition: color .186s;
  white-space: normal !important;   /* wrap long questions; overrides the theme's nowrap on role="button" */
}

/* never allow a background fill in any state (kills the blue box) */
.accordion__item-title,
.accordion__item-title:hover,
.accordion__item-title:focus,
.accordion__item-title:active,
.accordion__item-title--active {
  background: transparent !important;
  box-shadow: none !important;
}
.accordion__item-title:focus { outline: none; }

/* color: black at rest - including focus/active right after a click, so it can never go white - */
.accordion__item-title,
.accordion__item-title:focus,
.accordion__item-title:active { color: #000 !important; }
/* blue only on hover and while open (listed last so it wins) */
.accordion__item-title:hover,
.accordion__item-title--active { color: #0164D9 !important; }

/* right chevron, drawn from two borders on a rotated square */
.accordion__item-title::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;   /* follows the text color automatically */
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);      /* points down when closed */
  transition: transform .186s;
}
.accordion__item-title--active::after {
  transform: translateY(-30%) rotate(-135deg);    /* points up when open */
}

/* answer panel: slides open */
.accordion__item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
}
.accordion__item-content > *:first-child { margin-top: 0; }
.accordion__item-content > *:last-child  { margin-bottom: 24px; }
/* ===== Inline file paths / code ===== */
.article-body code,
.article-body .path {
  background-color: hsl(85, 40%, 91%);   /* light-green highlight */
  color: #1B7A1B;                        /* darker, more readable green */
  font-weight: normal !important;        /* not bold - calmer when a paragraph has many */
  font-style: normal !important;         /* not italic - identifiers read better upright */
  font-family: inherit;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
/* ===== Callout boxes (DD Guide colors) ===== */
.article-body .callout {
  position: relative;
  padding: 12px 16px 12px 46px;
  margin: 16px 0 16px;
  border-radius: 8px;
  border-left: 4px solid;
  color: #1c1c1e;
  line-height: 1.5;
}
.article-body .callout::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.article-body .callout__label { display: block; font-weight: bold; margin-bottom: 2px; }

/* Note - green */
.article-body .callout--note { background: #F3FFF1; border-left-color: #2CBD29; }
.article-body .callout--note .callout__label { color: #1F7A1D; }
.article-body .callout--note::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232CBD29%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%2011v5%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%277.5%27%20r%3D%270.9%27%20fill%3D%27%232CBD29%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }

/* Passware Tip - blue */
.article-body .callout--tip { background: #F2F4FF; border-left-color: #0E77CC; }
.article-body .callout--tip .callout__label { color: #004984; }
.article-body .callout--tip::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%230E77CC%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M9%2018h6M10%2021h4M12%203a6%206%200%200%201%204%2010.5c-.7.7-1%201.2-1%202.5H9c0-1.3-.3-1.8-1-2.5A6%206%200%200%201%2012%203Z%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }

/* Warning - red */
.article-body .callout--warning { background: #FFEBEB; border-left-color: #CE0909; }
.article-body .callout--warning .callout__label { color: #CE0909; }
.article-body .callout--warning::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23CE0909%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%203%202%2020h20L12%203Z%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M12%2010v4%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2717%27%20r%3D%270.9%27%20fill%3D%27%23CE0909%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }

/* Example - dark-blue border, black label */
.article-body .callout--example { background: #F6F6F6; border-left-color: #004984; }
.article-body .callout--example .callout__label { color: #000; }
.article-body .callout--example::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23004984%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M5%204h11l3%203v13H5V4Z%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M8%2010h8M8%2014h6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }

/* Zendesk wraps the first text in list items with <p>, causing the list
   marker to appear on its own line. Keep the first paragraph inline. */
.article-body ol > li > p:first-child,
.article-body ul > li > p:first-child {
    display: inline;
    margin: 0;
}
/* ===== Auto table of contents ===== */
.article-body .article-toc {
  border: 1px solid #E6E7E9;
  border-radius: 8px;
  background: #F6F6F6;
  padding: 16px 20px;
  margin: 0 0 24px;
}
.article-body .article-toc__title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 8px;
  color: #004984;
}
.article-body .article-toc ul { list-style: none; margin: 0; padding: 0; }
.article-body .article-toc__item { margin: 4px 0; line-height: 1.4; }
.article-body .article-toc__item a { color: #0E77CC; text-decoration: none; }
.article-body .article-toc__item a:hover { text-decoration: underline; }
.article-body .article-toc__item--h3 { padding-left: 16px; }
.article-body .article-toc__item--h4 { padding-left: 32px; font-size: 0.95em; }

.article-body .auto-toc:empty { display: none; }   /* hide the bare marker if the script hasn't run */

/* Optional: smooth-scroll to a section when a TOC link is clicked */
html { scroll-behavior: smooth; }
/* ===== Floating "back to top" button ===== */
.back-to-top {
  position: fixed;
  left: 24px;                       /* bottom-left, clear of the Help widget on the right */
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #0E77CC;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, background .2s;
  z-index: 999;
}
.back-to-top--visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover  { background: #0343BF; }
.back-to-top:focus  { outline: 2px solid #0343BF; outline-offset: 2px; }

/* up-chevron drawn from two borders */
.back-to-top__icon {
  width: 11px;
  height: 11px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg) translate(2px, 2px);
}
/* ===== Hero overflow fix (narrow screens) ===== */
@media (max-width: 768px) {
  .hero {
    height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero-inner {
    top: auto;
    transform: none;
  }
}
/* ============================================================================
   Passware brand styling for Zendesk's NATIVE article-editor components
   (callouts, accordions, tabs - rolled out July-Aug 2026)

   Where this goes: bottom of the theme's  style.css  (edit a theme COPY, preview,
   then publish). IMPORTANT: the Knowledge EDITOR does not load the theme's
   style.css, so these components always look like Zendesk's grey defaults inside
   the editor. The Passware styling only appears on the PUBLISHED article and in
   "Preview draft article in Help Center" - test there, not in the editor.

   Verified live on 2026-10-22 against a themed preview. Key facts learned:
   - Zendesk declares the --zd-wysiwyg-* variables ON the component element, so
     overriding them on .article-body does NOT win. They must be set ON the
     component element (with !important), as below.
   - A published callout is:  <zd-callout class="wysiwyg-callout wysiwyg-callout-info">
       <span class="wysiwyg-callout-icon"></span><p>...text...</p></zd-callout>
     i.e. the text is a plain block after the icon, NOT a .wysiwyg-callout-content
     wrapper (that class only exists in the editor). The label rule targets the
     first block after the icon.

   Type mapping (Zendesk editor name -> Passware look):
     Info (default) -> Note (green) | Tip -> Tip (blue)
     Warning -> Warning (red)       | Error -> Example (dark-blue / grey)
   The editor dropdown names (Info/Warning/Error/Tip) are fixed Zendesk UI and
   cannot be renamed; only the published appearance is ours.
   ============================================================================ */


/* ============================================================================
   1. CALLOUTS   (.wysiwyg-callout.wysiwyg-callout-{info|warning|error|tip})
   ============================================================================ */

/* Container-level variables - set ON the component so they beat Zendesk's own
   element-level declarations. Icons reuse snippet 9's line-art SVGs; Zendesk
   applies --...-icon as a CSS mask and tints it with --...-icon-color, so the
   SVG's own stroke color is irrelevant. */
.article-body .wysiwyg-callout {
  --zd-wysiwyg-callout-border-radius: 8px !important;
  --zd-wysiwyg-callout-icon-size: 20px !important;
  border-left: 4px solid transparent;   /* accent colour set per type below */
}

/* Info -> Passware NOTE (green) */
.article-body .wysiwyg-callout-info {
  --zd-wysiwyg-callout-info-bg: #F3FFF1 !important;
  --zd-wysiwyg-callout-info-icon-color: #2CBD29 !important;
  --zd-wysiwyg-callout-info-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%2011v5%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%277.5%27%20r%3D%270.9%27%20fill%3D%27%23000%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E") !important;
  border-left-color: #2CBD29;
}

/* Tip -> Passware TIP (blue, lightbulb) */
.article-body .wysiwyg-callout-tip {
  --zd-wysiwyg-callout-tip-bg: #F2F4FF !important;
  --zd-wysiwyg-callout-tip-icon-color: #0E77CC !important;
  --zd-wysiwyg-callout-tip-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M9%2018h6M10%2021h4M12%203a6%206%200%200%201%204%2010.5c-.7.7-1%201.2-1%202.5H9c0-1.3-.3-1.8-1-2.5A6%206%200%200%201%2012%203Z%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") !important;
  border-left-color: #0E77CC;
}

/* Warning -> Passware WARNING (red, triangle) */
.article-body .wysiwyg-callout-warning {
  --zd-wysiwyg-callout-warning-bg: #FFEBEB !important;
  --zd-wysiwyg-callout-warning-icon-color: #CE0909 !important;
  --zd-wysiwyg-callout-warning-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%203%202%2020h20L12%203Z%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M12%2010v4%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2717%27%20r%3D%270.9%27%20fill%3D%27%23000%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E") !important;
  border-left-color: #CE0909;
}

/* Error -> Passware EXAMPLE (dark-blue, document) */
.article-body .wysiwyg-callout-error {
  --zd-wysiwyg-callout-error-bg: #F6F6F6 !important;
  --zd-wysiwyg-callout-error-icon-color: #004984 !important;
  --zd-wysiwyg-callout-error-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M5%204h11l3%203v13H5V4Z%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M8%2010h8M8%2014h6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") !important;
  border-left-color: #004984;
}

/* Bold Passware type label. Published callout = <zd-callout><span.icon><p>...>,
   so the label goes on the first block right after the icon. (# BEST-EFFORT:
   element targeting - if Zendesk changes the markup, re-check this selector.) */
.article-body .wysiwyg-callout > .wysiwyg-callout-icon + *::before {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.3;
}
.article-body .wysiwyg-callout-info    > .wysiwyg-callout-icon + *::before { content: "Note";         color: #1F7A1D; }
.article-body .wysiwyg-callout-tip     > .wysiwyg-callout-icon + *::before { content: "Passware Tip"; color: #004984; }
.article-body .wysiwyg-callout-warning > .wysiwyg-callout-icon + *::before { content: "Warning";      color: #CE0909; }
.article-body .wysiwyg-callout-error   > .wysiwyg-callout-icon + *::before { content: "Example";      color: #000; }


/* ============================================================================
   2. ACCORDION   (.wysiwyg-disclosure  -  native <details>/<summary>)
   Variables set ON the component (same reason as callouts). The <summary> rules
   are native HTML and reliable.
   ============================================================================ */
.article-body .wysiwyg-disclosure {
  --zd-wysiwyg-disclosure-border-color: #E6E7E9 !important;
  --zd-wysiwyg-disclosure-header-bg: transparent !important;
  --zd-wysiwyg-disclosure-header-bg-hover: transparent !important;
  --zd-wysiwyg-disclosure-transition-duration: 186ms !important;
}
/* Native accordion = <zd-accordion class="wysiwyg-disclosure"><details><summary>...,
   so the clickable header is a DESCENDANT summary (inside <details>), not a direct
   child, and the open state lives on <details>, not on .wysiwyg-disclosure.
   (Verified live 2026-10-22; the earlier "> summary" / "[open]" version never matched,
   so hover had no colour.) Tabs' summaries are hidden, so these rules don't affect them. */
.article-body .wysiwyg-disclosure summary {
  font-family: inherit;
  font-size: 16px;          /* match the manual accordion (snippet 1); Zendesk default is 15px */
  line-height: 1.4;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: color .186s;
}
.article-body .wysiwyg-disclosure summary:hover,
.article-body .wysiwyg-disclosure details[open] > summary {
  color: #0164D9;
}


/* ============================================================================
   3. TABS   (.wysiwyg-tabs-active  -  disclosures enhanced into a tab bar by JS)
   Passware "page tab" style: the ACTIVE tab is GREEN (#2CBD29), matching the tab
   bars on passware.com (e.g. /kit-forensic/performance/). Accent scoped to the
   tabs element itself (same reason as the callouts). The baseline reuses
   --zd-wysiwyg-disclosure-border-color from §2. With JS off, tabs fall back to
   the styled accordion above. (Note: the accordion active colour stays blue
   #0164D9 to match the passware.com FAQ accordion - only the page tabs are green.)
   blog.passware.com style: the chosen tab keeps its normal DARK text and is marked
   only by a GREEN underline. Zendesk draws the active underline with currentColor and
   colours the selected tab's text from --zd-wysiwyg-tabs-color, so we force the text
   back to dark and set the underline green explicitly on the active tab.
   ============================================================================ */
.article-body .wysiwyg-tabs-active,
.article-body [class*="wysiwyg-tabs"] {
  --zd-wysiwyg-tabs-color: #2CBD29 !important;   /* green underline + focus-ring accent */
}
/* Chosen tab: dark text, green underline (not green text). # BEST-EFFORT element targeting. */
.article-body .wysiwyg-tabs-tab[aria-selected="true"] {
  color: #000 !important;
  border-bottom-color: #2CBD29 !important;
}