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

/* Hide the Academy tab and its results panel */
#academy { display: none !important; }
#algolia-academy-results-container { display: none !important; }

.article-meta .meta-group {
  display: inline-block;
}
body {
  
  background-color: rgba(251, 247, 239, 1);
  color: rgba(28, 28, 30, 1);
  /*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;*/
  font-family: roobertpro_body;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.banner-logo {
    margin-left: 1rem;
  	display: flex;
    align-items: center;
}
.content-wrapper {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  	text-align: center;
}
.register-content {
    font-family: 'Roobert Pro', sans-serif;
    font-weight: 400;
    font-style: inherit;
    font-size: 18px;
    display: inline-block;
  	vertical-align: middle;
  	max-width: 65%;
}
.register-cursor {
    display: none;
    border-radius: 0.5rem;
    padding: 5px 10px;
    line-height: 150%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
  	margin-left: 1rem;
}
.register-button {
    display: inline-block;
    background-color: #FDE050;
    border-radius: 0.5rem;
    padding: 5px 10px;
    font-family: 'Roobert Pro', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #1C1C1E;
    font-style: italic;
  	margin-left: 1rem;
}
.register-button a:hover {
  text-decoration: none;
}
.register-button a {
  color: #1C1C1E;
}

@media (min-width: 1600px){
  .register-cursor {
    display:inline-block;
  }
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 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(56, 89, 255, 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(28, 28, 30, 1);
}

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(/hc/theming_assets/01J0E4W33SRGK49ARS6QRVEBNN) 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(28, 28, 30, 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(28, 28, 30, 1);
}

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

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.circle{
  list-style: disc;
  margin: 0 40px 0;
}
.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

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

.dropdown-toggle {
  background: none;
  border: 0;
  padding: 0;
  text-align: initial;
}

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

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

/***** Buttons *****/
.button, [role="button"] {
  border: 1px solid rgba(28, 28, 30, 1);
  border-radius: 4px;
  color: rgba(28, 28, 30, 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(28, 28, 30, 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(28, 28, 30, 1);
  color: rgba(251, 247, 239, 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: #000;
  border-color: #000;
}

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

.button-large, input[type="submit"] {
  background-color: rgba(28, 28, 30, 1);
  border: 0;
  border-radius: 4px;
  color: rgba(251, 247, 239, 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: #000;
}

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

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

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(28, 28, 30, 1);
  border: 1px solid #ddd;
  background-color: #f8f1e3;
}

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

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

.table th,
.table th a {
  color: #4d4d53;
  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-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(28, 28, 30, 1);
}

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

.form-field input[type="text"]:focus {
  border: 1px solid rgba(28, 28, 30, 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(28, 28, 30, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(28, 28, 30, 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 .optional {
  color: #4d4d53;
  margin-left: 4px;
}

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

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

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

.form footer a {
  color: lighten(rgba(28, 28, 30, 1) rgba(5, 0, 56, 1), 20%);
  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: #0023d1;
}

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

.header__menu {
  display: flex;
  flex-shrink : 0;
}

.footer-language-selector {
    margin-top: 0.3rem;
    margin-right : 0.5rem;
}
.logo {
  margin-top : 0.3rem;
}




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

.logo a {
  display: inline-block;
  text-decoration: none;
  font-size: 0;
}

.logo img {
  display: inline-block;
  vertical-align: middle;
  max-height: 40px;
}

.logo-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: rgba(28, 28, 30, 1);
  position: relative;
  top: 2px;
  padding-left: 14px;
}

.logo-text:before {
  content: "";
  background: rgba(28, 28, 30, 1);
  width: 1px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.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(56, 89, 255, 1);
  display: none;
  font-size: 14px;
  line-height: 2.34;
  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(56, 89, 255, 1);
  text-decoration: underline;
}

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

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

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

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

.nav-wrapper .icon-menu:hover, .nav-wrapper .icon-menu:focus, .nav-wrapper .icon-menu:active {
  background-color: transparent;
  color: rgba(56, 89, 255, 1);
}

/***** 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(56, 89, 255, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}

.user-info > [role="button"]:hover, .user-info > [role="button"]:focus {
  color: rgba(56, 89, 255, 1);
  background-color: transparent;
}

.user-info > [role="button"]::after {
  color: rgba(56, 89, 255, 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(28, 28, 30, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  color: rgba(251, 247, 239, 1);
  content: "\1F464";
  font-size: 14px;
  height: 14px;
  line-height: 14px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 14px;
}

/***** Footer *****/
.footer {
 border-top: 1px solid #ddd;
 margin-top: 60px;
 padding: 30px;
}
  
.footer a {
  color: #050038;
}

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

@media (max-width: 414px) {
  .footer {
    margin-top: 30px;
 padding: 15px 0;
  }
  
  .footer-inner {
    display: block;
    text-align: center;
  }
  
  .footer-inner a {
    display: block;
    margin: 4px 0;
  }
}

.footer-language-selector {
  color: #4d4d53;
  display: inline-block;
  font-weight: 300;
}

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

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

.breadcrumbs li {
  color: #4d4d53;
  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(56, 89, 255, 1);
}

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

.search input[type="search"] {
 /* border: 1px solid #050038;*/
  border-radius: 40px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 400;
  color: rgba(5, 0, 56, 1);
  height: 60px;
  padding-left: 50px;
  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(28, 28, 30, 1);
  color: #050038;
}

.search::before {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #050038;
  content: "\1F50D";
  font-size: 22px;
  position: absolute;
  left: 20px;
}

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

/*.search-full input[type="search"] {
  border: 1px solid rgba(28, 28, 30, 1);
}*/

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

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

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

.hero-inner-header {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  margin: 0 0 20px;
}

.hero-inner-header--black {
  color: #050038;
}

.hero-inner-header--mb-30 {
  margin-bottom: 30px !important;
}

.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 {
  box-sizing: border-box;
  color: rgba(28, 28, 30, 1);
  display: flex;
  flex: 1 0 340px;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
  transition: all 0.5s ease-out;
}
  
/* Homepage category icon mapping. */
.blocks-item:nth-of-type(1) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W1E8N0ZPXASDBNFSZ96H');
}

.blocks-item:nth-of-type(2) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W13J1YDZS3KCPQ07B7GF');
}

.blocks-item:nth-of-type(3) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W06FDTP12TZXPZRF44X6');
}

.blocks-item:nth-of-type(4) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4VZDF8AVXT9DCF5AN7191');
}

.blocks-item:nth-of-type(5) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W0XQ3R5JM332G3TNX798');
}

.blocks-item:nth-of-type(6) .blocks-item-image {
  /* background-image: url('/hc/theming_assets/01J0E4W11TZ3VY5S0YQCSZTS1R');*/
  background-image: url('/hc/theming_assets/01J0E4W2G00H61M6SJTVDK6RA7');
}

.blocks-item:nth-of-type(7) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W1QPD1QS6VKAWN4B6PH6');
}

.additional-categories {
  margin-top: 30px;
}

.additional-categories .blocks-item:nth-of-type(1) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4VZGKBW12GDTTBTATQX7R');
}

.additional-categories .blocks-item:nth-of-type(2) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W0W50E50EP52NDWH87BH');
}

.additional-categories .blocks-item:nth-of-type(3) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W26Y0YCY8PS5A6Q4G16Q');
}

.additional-categories .blocks-item:nth-of-type(4) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W0Y443FNHBD9SZSP82CH');
}

.additional-categories .blocks-item:nth-of-type(5) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W2G00H61M6SJTVDK6RA7');
}

.additional-categories .blocks-item:nth-of-type(6) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W0EGGSVEHVH6QV759R0Q');
}

.additional-categories .blocks-item:nth-of-type(7) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W1K52WXQJ9JWSRKVP3TY');
}

.additional-categories .blocks-item:nth-of-type(8) .blocks-item-image {
  background-image: url('/hc/theming_assets/01J0E4W1QPD1QS6VKAWN4B6PH6');
}



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

.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  /*background-color: #f3f4f8;*/
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
    transform: scale(1.25);
  	opacity: 0.8;
    cursor: zoom-in;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  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: rgba(28, 28, 30, 1);
}

.blocks-item-image {
  background-size: contain;
  width: 180px;
  height: 130px;
  margin: 0 auto 15px;
}

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

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

.blocks-item-title {
  font-weight: 700;
  margin-bottom: 0;
  transition: color 250ms ease;
}

.blocks-item-description {
  font-weight: 300;
  margin: 0;
  transition: color 250ms ease;
}

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

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

@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%;
    /* Three columns on desktop */
  }
  [dir="rtl"] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}

.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}

.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
  color: rgba(28, 28, 30, 1);
}

.promoted-articles-item .icon-lock::before {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}

.recent-activity-item-parent {
  font-size: 16px;
}

.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  color: rgba(28, 28, 30, 1);
  display: inline-block;
  width: 100%;
}

@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}

.recent-activity-item-link {
  font-size: 14px;
  font-weight: 300;
}

.recent-activity-item-meta {
  margin: 15px 0 0 0;
  float: none;
}

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

.recent-activity-item-time, .recent-activity-item-comment {
  color: #4d4d53;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
}

.recent-activity-item-comment {
  padding-left: 5px;
}

[dir="rtl"] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}

.recent-activity-item-comment::before {
  display: inline-block;
}

.recent-activity-item-comment span::before {
  color: rgba(28, 28, 30, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 15px;
  padding-right: 3px;
  vertical-align: middle;
}

[dir="rtl"] .recent-activity-item-comment span::before {
  padding-left: 3px;
}

.recent-activity-controls {
  padding-top: 15px;
}

/***** 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;
  margin-top: 1.5rem
}

@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-title {
  margin-bottom: 0;
}

.section-tree-title a {
  color: rgba(28, 28, 30, 1);
}

.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: rgba(28, 28, 30, 1);
}

.article-list-item .icon-lock::before {
  vertical-align: baseline;
}

.icon-star::before {
  color: rgba(28, 28, 30, 1);
  font-size: 18px;
}

.article-list {
margin-left: 0px;
}

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

.section-list-item a {
color: rgba(28, 28, 30, 1);
font-size: 16px;
}

.section-list {
list-style-type: none;
padding-left: 0px;
text-align: left;
}

/***** 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-avatar {
  margin-right: 10px;
}

.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;
  vertical-align: middle;
}

.article-body img {
  height: auto;
  max-width: 100%;
  display: inherit;
  transition:all 0.3s ease-out;
}
.article-body img:hover {
  transform: scale(1.04); 
  opacity: 0.8;
  cursor:zoom-in;
}

/* article click image */
#Fullimageview{
 	position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(28,28,28,0.8);
  display:none;
  z-index:100;
  overflow:auto;
}
#FullImage{
    /*height: 100%;
    left: 0;
    padding: 40px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 99994;*/
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%,-8%) scale(0.8);
    width: 100%;
    object-fit: cover;
}
@media (max-width:768px){
  #FullImage{
     top:10px !important;
  }
}
@media (max-width:768px){
  #FullImage{
    width:100%;
    height:auto !important;
  }
}
@media (min-width:768px)and (max-width:1024px){
  #FullImage{
    width:100%;
  }
}

/* End article click image */


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

[dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

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

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

.article-body a:visited {
  color: #0023d1;
}

.article-body code, .comment-body code, .post-body code {
  padding: 0 5px !important;
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 0 1px;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
}

.article-body pre {
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  overflow: auto;
  white-space: pre;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
  margin: 0.8em 0;
}

.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 1em;
}

.article-body blockquote {
  background: rgba(217, 217, 217, 0.7);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 15px 20px;
  margin: 25px 0;
  border: none;
  border-radius: 12px;
}

.article-body blockquote p {
  margin: 0;
}

.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: #4d4d53;
  font-weight: 300;
}

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

.article-comment-count .icon-comments {
  color: rgba(28, 28, 30, 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 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}

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

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

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

.article-vote {
  background: transparent;
  border: 1px solid rgba(28, 28, 30, 1);
  color: rgba(28, 28, 30, 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(28, 28, 30, 1);
}

.article-vote:hover {
  background-color: rgba(28, 28, 30, 1);
}

.article-vote:hover::before, .article-vote:hover::after, .article-vote[aria-selected="true"]::before, .article-vote[aria-selected="true"]::after {
  color: rgba(251, 247, 239, 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: rgba(28, 28, 30, 1);
  display: block;
  padding: 20px 0;
}

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

.article-return-to-top .icon-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(28, 28, 30, 1);
  color: rgba(251, 247, 239, 1);
  text-decoration: none;
}

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

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

.sidenav-item {
  border-radius: 4px;
  color: rgba(28, 28, 30, 1);
  display: block;
  font-weight: 300;
  margin-bottom: 10px;
  padding: 10px;
}

.sidenav-item.current-article, .sidenav-item:hover {
  background-color: rgba(28, 28, 30, 1);
  color: rgba(251, 247, 239, 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: rgba(28, 28, 30, 1);
  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: #4d4d53;
}

/***** 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: #4d4d53;
  display: block;
  font-size: 23px;
  text-align: center;
  width: 100%;
}

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

.share a:hover::before {
  color: rgba(28, 28, 30, 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: #4d4d53;
  display: inline-block;
  font-weight: 300;
  font-size: 13px;
  margin-bottom: 0;
}

.comment-callout a {
  color: rgba(28, 28, 30, 1);
}

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

.comment-sorter .dropdown-toggle {
  color: #4d4d53;
  font-weight: 300;
  font-size: 13px;
}

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

.comment-wrapper {
  display: flex;
  position: relative;
}

.comment-wrapper.comment-official {
  border: 1px solid rgba(28, 28, 30, 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(28, 28, 30, 1);
}

.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}

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

[dir="rtl"] .comment-body ul, [dir="rtl"] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

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

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

.comment-body a:visited {
  color: #0023d1;
}

.comment-body code, .post-body code {
  padding: 0 1px !important;
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 0 1px;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
}

.comment-body pre {
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  overflow: auto;
  white-space: pre;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
  margin: 0.8em 0;
}

.comment-body pre code {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 1em;
}

.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #4d4d53;
  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: #4d4d53;
  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(28, 28, 30, 1);
}

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

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

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

.vote-voted::before {
  color: rgba(28, 28, 30, 1);
}

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

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

.actions .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: #f8f1e3;
}

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

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01J0E4W84NGY83VQ1HM9CA7WF0);
  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(28, 28, 30, 1);
}

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

.community-follow [role="button"][aria-selected="true"] {
  background-color: rgba(28, 28, 30, 1);
  color: rgba(251, 247, 239, 1);
}

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

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

.community-follow [role="button"]::after {
  border-left: 1px solid rgba(28, 28, 30, 1);
  content: attr(data-follower-count);
  color: rgba(28, 28, 30, 1);
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 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(28, 28, 30, 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(56, 89, 255, 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: #0023d1;
}

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

.striped-list-count {
  color: #4d4d53;
  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: rgba(28, 28, 30, 1);
    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(28, 28, 30, 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: #4d4d53;
}

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

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

.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, .status-label-answered {
  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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}

.post-info-container {
  display: flex;
  margin-bottom: 40px;
}

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

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

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

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

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

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

[dir="rtl"] .post-body ul, [dir="rtl"] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}

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

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

.post-body a:visited {
  color: #0023d1;
}

.post-body code, .post-body code {
  padding: 0 1px !important;
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 0 1px;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
}

.post-body pre {
  background: #f8f1e3;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  overflow: auto;
  white-space: pre;
  font-family: monospace;
  font-size: 0.85em;
  line-height: 1.4;
  margin: 0.8em 0;
}

.post-body pre code {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 1em;
}

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

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

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

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

.post-comment-count .icon-comments {
  color: rgba(28, 28, 30, 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: rgba(28, 28, 30, 1);
  line-height: 45px;
  order: 1;
}

@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir="rtl"] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}

.collapsible-nav-list li a {
  color: rgba(28, 28, 30, 1);
  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(28, 28, 30, 1);
    order: 1;
    padding: 15px 0 11px 0;
  }
}

.collapsible-nav-list li[aria-selected="true"] a {
  color: rgba(28, 28, 30, 1);
}

.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: #f6eddb;
  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(28, 28, 30, 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(28, 28, 30, 1);
  color: rgba(251, 247, 239, 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(28, 28, 30, 1);
  border-radius: 4px;
  color: rgba(251, 247, 239, 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: #000;
  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: #4d4d53;
  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: #4d4d53;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}

.request-container .comment-container {
  min-width: 0;
}

.request-breadcrumbs {
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}

.request-main {
  flex: 1 0 auto;
  order: 1;
}

.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}

.request-main .comment-fields.shown {
  display: block;
}

.request-main .request-submit-comment.shown {
  display: inline;
}

@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}

.request-main .comment-form-controls {
  display: block;
}

.request-main .comment-ccs {
  display: block;
}

.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #4d4d53;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}

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

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

.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid rgba(28, 28, 30, 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(28, 28, 30, 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: #f8f1e3;
    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: #4d4d53;
  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: rgba(28, 28, 30, 1);
  text-decoration: none;
}

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

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

.pagination-current {
  background-color: rgba(28, 28, 30, 1);
}

.pagination-current a, .pagination-current span {
  color: rgba(251, 247, 239, 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: none;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #4d4d53;
  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: #f8f1e3;
}

.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;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

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

.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(28, 28, 30, 1);
  border: 0;
  color: rgba(251, 247, 239, 1);
  line-height: normal;
  padding: 8px 20px;
  outline-color: rgba(28, 28, 30, 1);
}

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

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

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

.profile-stats .stat-label {
  color: #4d4d53;
  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(28, 28, 30, 1);
  border-radius: 4px;
  color: rgba(28, 28, 30, 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: #f6eddb;
  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: #4d4d53;
  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;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

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

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

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

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

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

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

.profile-contribution-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;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

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

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f8f1e3;
}

@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(251, 247, 239, 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: row;
  justify-content: space-between;
 /* max-width:1200px;
  width:1200px;
  margin:0 auto;*/
}

.search-results-column {
  flex: 1;
}

@media (min-width: 750px) {
  .search-results-column {
    flex: 0 0 55%;
  }
}
@media (max-width: 750px){
  .search-results {
    flex-direction: column !important;
    /* justify-content: space-between; */
	}
  section.search-results-left {
    margin-left: 0 !important;
	}
}
.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: #4d4d53;
  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(28, 28, 30, 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;
}

.article-vote-down-explanation {
  display: none;
}

/*.article-vote-down-explanation.active {
  display: block;
}*/

 .article-votes-form-yes {
  display: none;
}

.article-votes-form-yes.visible {
  display: block;
}

.article-votes-form-no {
  display: none;
}

.article-votes-form-no.visible {
  display: block;
}

.article-votes-btn {
  cursor: pointer;
  border: 1px solid rgba(5, 0, 56, 1);
  color: rgba(5, 0, 56, 1);
  border-radius: 4px;
  padding: 6px 20px;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  font-size: 12px;
}

.article-votes-btn.active {
  background: rgba(5, 0, 56, 1);;
  color: #fff;
}

.article-votes-btn-yes {
  margin-right: 10px;
  padding: 6px 16px;
}

.article-votes-title {
  margin-bottom: 14px;
}

.article-votes-btns-wrap {
  margin-bottom: 40px;
}

.article-votes-textarea {
  height: 85px;
  resize: none;
  margin-bottom: 14px;
}

.article-votes-textarea.validationError::-webkit-input-placeholder { /* Chrome */
  color: #f2545b;
}

.article-votes-textarea.validationError:-ms-input-placeholder { /* IE 10+ */
  color: #f2545b;
}

.article-votes-textarea.validationError::-moz-placeholder { /* Firefox 19+ */
  color: #f2545b;
  opacity: 1;
}

.article-votes-textarea.validationError:-moz-placeholder { /* Firefox 4 - 18 */
  color: #f2545b;
  opacity: 1;
}

.article-votes-form-yes {
  position: relative;
  padding: 21px 0 0;
}

.article-votes-textarea-label {
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 10px;
}

.article-votes-form-no-textarea-wrap {
  position: relative;
  padding: 21px 0 0;
}

.article-votes-form-no-textarea-label {
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 10px;
}

.article-votes-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.article-votes-labels label {
  margin: 3px 0;
}

.article-votes-labels label input {
  margin-right: 5px;
}

.article-votes-button {
  background-color: rgba(5, 0, 56, 1);
  border: none;
  color: #fff;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.article-votes-button:focus {
  border: none;
}

.article-votes-btns-wrap.disabled .article-votes-btn {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-form-yes.disabled .article-votes-button {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-form-yes.disabled .article-votes-textarea {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-form-no.disabled .article-votes-button {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-form-no.disabled .article-votes-textarea {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.article-votes-feedback-success {
  display: none;
}

.article-votes-feedback-success.active {
  display: block;
}

.article-votes-feedback-fail {
  display: none;
}

.article-votes-feedback-fail.active {
  display: block;
}

.article-votes-form-sorry-text {
  font-weight: 700;
  margin-bottom: 10px;
}

.article-votes-form-no .article-votes-button {
  margin-bottom: 20px;
}

.hc-community-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: normal;
}
.hc-community-link__wrap {
  max-width: 1190px;
  margin: 0 auto 40px;
  padding: 0 50px;
}
@media (min-width: 415px) and (max-width: 1199px) {
  .hc-community-link__wrap {
    padding: 0;
  }
}
@media (max-width: 414px) {
  .hc-community-link__wrap {
    padding: 0;
    margin: 0 auto 60px;
  }
}
.hc-community-link__link {
  cursor: pointer;
  text-decoration: none;
  outline: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  text-align: center;
  background: #F3F4F8;
  color: #050038;
  padding: 32px 20px 40px;
  border-radius: 4px;
}
.hc-community-link__link:hover {
  text-decoration: none;
}
.hc-community-link__link-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 12px;
}
.hc-community-link__link-description {
  font-size: 15px;
  line-height: 22px;
  font-weight: 300;
}

.scroll-to-top {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(255, 191, 191, 0.4);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  position: fixed;
  right: 20px;
  bottom: -48px;
  outline: none;
  border: none;
  padding: 0;
  transition: background 250ms ease, bottom 250ms ease;
}

.scroll-to-top.is-active {
  bottom: 20px;
}

.scroll-to-top:hover {
  background: rgba(255, 191, 191, 0.6);
}

.scroll-to-top__arrow {
  font-size: 18px;
  font-weight: bold;
  color: rgba(28, 28, 30, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.table-of-contents__wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
}
.table-of-contents__title {
  font-size: 15px;
  margin: 0 0 12px;
}
.table-of-contents__list {
  max-height: 435px;
  font-size: 15px;
  margin-left: -4px;
  overflow-y: auto;
}
.table-of-contents__list li a {
  display: block;
  color: #050038;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 250ms ease;
  margin:0 0 15px 0;
}
.table-of-contents__list li a:hover {
  background: rgba(28, 28, 30, 1);
  color:#fff;
}
.table-of-contents__list li > ul {
  margin-left: 10px;
}
.top-notification-banner {
    background: rgba(5, 0, 56, 0.03)
}

@media (min-width: 1800px) {
    .top-notification-banner {
        padding: 15px 60px 20px
    }
}

@media (min-width: 480px) and (max-width: 1799px) {
    .top-notification-banner {
        padding: 1vw 3.33333333vw 1.33333333vw
    }
}

@media (max-width: 479px) {
    .top-notification-banner {
        padding: 3.28767123vw 5.47945205vw 4.38356164vw
    }
}

.top-notification-banner.is-hidden {
    display: none
}

.top-notification-banner--bg-indigo {
    background: #050038
}

.top-notification-banner--bg-pink {
    background: #ffbfbf
}

.top-notification-banner--bg-red {
    background: #FF6575
}

.top-notification-banner--bg-blue {
    background: #3F53D9
}

.top-notification-banner--bg-yellow {
    background: #ffd02f
}

.top-notification-banner__wrap {
    font-family: "Formular", sans-serif;
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
}

@media (min-width: 1800px) {
    .top-notification-banner__wrap {
        max-width: 1680px;
        margin: 0 auto;
        font-size: 14px;
line-height: 20px;
    }
}

@media (min-width: 1200px) and (max-width: 1799px) {
    .top-notification-banner__wrap {
        max-width: 1680px;
        margin: 0 auto;
        font-size: 14px;
line-height: 20px;
    }
}

@media (min-width: 480px) and (max-width: 1199px) {
    .top-notification-banner__wrap {
        font-size: 14px;
line-height: 20px;
    }
}

@media (max-width: 479px) {
    .top-notification-banner__wrap {
        font-size: 14px;
line-height: 20px;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        -webkit-box-pack: left;
        -ms-flex-pack: left;
        justify-content: left;
        padding-right: 8.21917808vw
    }
}

.top-notification-banner__close {
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    cursor: pointer
}

@media (min-width: 1800px) {
    .top-notification-banner__close {
        top: 3.75px;
        right: -6.25px
    }
}

@media (min-width: 1200px) and (max-width: 1799px) {
    .top-notification-banner__close {
        top: 3px;
        right: -5px
    }
}

@media (min-width: 480px) and (max-width: 1199px) {
    .top-notification-banner__close {
        top: .25vw;
        right: -0.41666667vw
    }
}

@media (max-width: 479px) {
    .top-notification-banner__close {
        top: .54794521vw;
        right: -0.54794521vw
    }
}

.top-notification-banner__close svg {
    display: block;
    color: #050038
}

@media (min-width: 1800px) {
    .top-notification-banner__close svg {
        width: 30px;
        height: 30px
    }
}

@media (min-width: 1200px) and (max-width: 1799px) {
    .top-notification-banner__close svg {
        width: 24px;
        height: 24px
    }
}

@media (min-width: 480px) and (max-width: 1199px) {
    .top-notification-banner__close svg {
        width: 2vw;
        height: 2vw
    }
}

@media (max-width: 479px) {
    .top-notification-banner__close svg {
        width: 6.57534247vw;
        height: 6.57534247vw
    }
}

.top-notification-banner__close--white svg {
    color: #fff
}

@media (min-width: 1800px) {
    .top-notification-banner__emoji {
        margin-right: 6.25px
    }
}

@media (min-width: 1200px) and (max-width: 1799px) {
    .top-notification-banner__emoji {
        margin-right: 5px
    }
}

@media (min-width: 480px) and (max-width: 1199px) {
    .top-notification-banner__emoji {
        margin-right: .41666667vw
    }
}

@media (max-width: 479px) {
    .top-notification-banner__emoji {
        margin-right: 2.73972603vw
    }
}

.top-notification-banner__text {
    color: #050038
}

.top-notification-banner__text a {
    color: #4262FF;
    text-decoration: none;
    border-bottom: 1px solid #4262FF;
    -webkit-transition: border 250ms ease;
    transition: border 250ms ease
}

.top-notification-banner__text a:hover, .top-notification-banner__text a:active {
    border-color: transparent
}

.top-notification-banner__text--text-is-white {
    color: #fff
}

.top-notification-banner__text--link-is-white a {
    color: #fff;
    border-color: #fff
}

.top-notification-banner__text--link-is-yellow a {
    color: #ffd02f;
    border-color: #ffd02f
}

.top-notification-banner__text--link-is-indigo a {
    color: #050038;
    border-color: #050038
}

@media (max-width: 479px) {
    .top-notification-banner__text br {
        display: none
    }
}

.article-body blockquote.pink {
  background: rgba(255, 184, 184, 0.7);
}

.article-body blockquote.yellow {
  background: rgba(255, 231, 113, 0.7);
}

.article-body blockquote.grey {
  background: rgba(217, 217, 217, 0.7);
}

.article-body blockquote.blue {
  background: rgba(178, 210, 255, 0.7);
}

@media (max-width: 1023px) {
  iframe {
    max-width: 100%;
    max-height: 200px;
  }
  
  .article-sidebar {
    order: 1;
  }
  
  .table-of-contents {
    order: 2;
  }
  
  .article {
    order: 3;
  }
  
  .scroll-to-top {
    display: none;
  }
}

/* Updated styles for Lotus tabs and accordions */
.article-info .accordion {
  border: none;
}

.article-info .accordion__item + .accordion__item {
  margin-top: 10px;
}

.article-info .accordion__item-title {
  width: 100%;
  background: rgba(242, 242, 242);
  font-size: 15px;
  color: rgba(28, 28, 30, 1);
  line-height: 24px;
  text-align: left;
  border: none !important;
  border-radius: 12px;
  padding-left: 42px;
  transition: background-color 300ms ease;
}

.article-info .accordion__item-title:before,
.article-info .accordion__item-title:after {
  background-color: rgba(28, 28, 30, 1) !important;
}

.article-info .accordion__item-title:hover {
  background: rgba(232, 232, 232);
}

.article-info .accordion__item-title--active {
  background: #FFDD3B !important;
  color: #000 !important;
  border-radius:12px;
}

.article-info .accordion__item-title--active:before, 
.article-info .accordion__item-title--active:after {
  background-color: #000 !important;
}

.article-info .accordion__item-content {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  display:none;
}

.article-info .tab {
}

.article-info .tabs-menu {
  font-size: 0;
}

.article-info .tabs-link {
  font-size: 15px;
  line-height: 24px;
  border: none !important;
  text-decoration: none !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
 /* transition: 300ms ease;*/
  transition-property: background-color, color;
  background-color: #EDE8D7;
  margin-right:5px
}

.article-info .tabs-link:hover {
  background-color: #EDE8D7;
  color: rgba(28, 28, 30, 1) !important;
  transition: 300ms ease;
  transition-property: border-color, color;
}

.article-info .tabs-link.is-active {
  background-color: #FFDD3B !important;
	color: #000 !important;
}

/*Trending topics */
.hero-color{
  padding: 15px;
}
.col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}
.mb-2 {
    margin-bottom: 3rem!important;
}
.list-group{
  	/*display: flex;
    -ms-flex-direction: column;
    flex-direction: column;*/
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0.25rem;
  	column-count: 2;
    margin-right: -47px;
}
.list-group-flush>.list-group-item {
    border-width: 0 0 1px;
}
.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 0 1rem;
}
@media (max-width:560px){
  .list-group{
    column-count: 1 !important;
    margin-right: 0 !important;
  }
}
/*End Tending Topics */


/* css for FAQ */
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.mb-2 {
    margin-bottom: 3rem!important;
}
.flex-fill {
    -ms-flex: 1 1 auto!important;
    flex: 1 1 auto!important;
}
.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  	padding-right: 15px;
    padding-left: 15px;
  	position:relative
}

.panel.panel-default{
  margin-bottom:10px;
}
.text-dark, a.text-dark, .text-dark a {
    color: hsl(0, 0%, 20%);
    fill: hsl(0, 0%, 20%);
}
.position-relative {
    position: relative!important;
}
.d-block {
    display: block!important;
}

.panel-heading {
    border-color: #333;
}
.panel-title {
    margin: 0 !important;
    padding: 3% 5em 3% 3%;
    cursor: pointer;
}
.panel-title:hover{
  background-color:#EDE8D7
}
a.d-block.position-relative.text-dark.collapsible-link.py-2 {
    padding-right: 3em;
    padding-left: 1em;
}

.collapsible-link::before {
    content: '';
    width: 14px;
    height: 2px;
    background: #333;
    position: absolute;
    right:2rem;
    top: calc(50% - 1px);
    display: block;
    transition: all 0.3s;
}
.collapsible-link.open::before {
    transform: rotate(180deg);
    background-color:#000 !important
}
.collapsible-link::after {
    content: '';
    width: 2px;
    height: 14px;
    background: #333;
    position: absolute;
    display: block;
    transition: all 0.3s;
  	right: calc(2rem + 6px);
  	top: calc(50% - 7px);
}
.open{
  background-color:#FFDD33;
  color:#000;
  border-radius: 5px 5px 0 0;
}
.open:hover {
    background: #FFDD33;
}
.collapsible-link.open::after {
    transform: rotate(90deg) translateX(-1px);
    background-color:#000 !important
}
.panel-collapse.collapse.in {
  max-height: 0;
  overflow: hidden;
}

.panel-body {
   /* background-color: #ffffff;*/
    padding: 1em;
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: #ddd;
}
@media (max-width: 768px) {
  .col-md-6.flex-fill {
    max-width: 100%;
	}
}
.faqborder{
  border:1px solid #000;
  border-radius:5px;
}
/* end css for FAQ */
/* Banner */
/*.card-body {
  padding: 1px;
  background-color: #FDF1C6;
  color: #000;
  display:none;
}
#close {
  margin:10px 20px;
  color: #000;
  font-weight: normal;
  float: right;
  font-size: 25px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}*/
/* End Banner */
/*Algolia Search Styling */
.aa-PanelSections {
  column-gap: var(--aa-spacing);
  display: flex;
}

.aa-PanelSection {
  display: flex;
  flex-direction: column;
}

/* .aa-PanelSection--left {
  width: 30%;
} */
.aa-PanelSection--left {
  width: 30%;
}
.aa-PanelSection--right {
  width: 70%;
  color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));
}
/* Algolian search box Panel section */

.aa-PanelLayout {
  margin: 0 auto;
  background : #ffffff;
  border-radius : 5px;
  box-shadow : 0px 1px 5px 3px rgba(0,0,0,0.15);
  position : relative;
  max-width : 550px; 
  transition : all .5s linear;
}

.aa-PanelSection--left p {
  padding:5px;
  margin: 0 auto;
  background : #ffffff;
  border-radius : 5px;
  box-shadow : 0px 1px 5px 3px rgba(0,0,0,0.15);
  position : relative;
  max-width : 180px; 
}

.search input[type="search"]:focus {
  border:none;
}

.aa-Source ul li:hover {
  transition : all .5s linear;
  background:#ececec;
}

.aa-Label svg {
  display:none;
}

form.aa-Form.search.search-full {
    border-radius: 30px;
    max-width: 550px;
    
}

.sub-nav input[type="search"] {
  border : none !important;
}

#algolia-search-box,
#algolia-is-search-box {
  max-width: 550px;
  margin: 0 auto;
  position: relative;
}

.aa-Autocomplete {
  position: relative;
  display: block;
  width: 100%;
}

#algolia-search-box .aa-Panel,
#algolia-search-box.aa-Autocomplete .aa-Panel,
#algolia-is-search-box .aa-Panel,
#algolia-is-search-box.aa-Autocomplete .aa-Panel {
  left: 0;
  right: auto;
  width: 100%;
}

.algolia-suggestion-item {
  padding: 8px 10px;
}

.algolia-suggestion-title {
  margin: 0 0 4px;
  color: rgba(5, 0, 56, 1);
}

.algolia-suggestion-meta {
  margin: 0 0 4px;
  color: rgba(28, 28, 30, 0.75);
  font-size: 13px;
}

.algolia-suggestion-snippet {
  margin: 0;
  color: rgba(28, 28, 30, 0.75);
  font-size: 14px;
  line-height: 1.4;
}

section.search-results-column {
  margin-right: 7rem;
  margin-top : 2rem;
 }

section.search-results-left {
  margin-left: 2rem;
  margin-top : 2rem;
}

li.ais-RefinementList-item {
    padding: 0.5rem;
}


h3.search-results-subheading {
    margin-left: 1.4rem;
}

li.ais-InfiniteHits-item {
    text-align: justify;
}
button.ais-InfiniteHits-loadMore {
    border: 1px solid black;
    padding: 10px;
    border-radius: 5px;
}
button.ais-InfiniteHits-loadMore:active {
   border: 1px solid rgba(63, 83, 217, 1);
   padding: 10px;
   border-radius: 5px;
  color:rgba(63, 83, 217, 1);
}
span.ais-RefinementList-count {
    background: #e0dada;
    padding: 3px 10px;
    border-radius: 15px;
}
@media (max-width: 425px) {
  section.search-results-left{
    display:none !important;
  }
}
@media (max-width: 750px) {
  section.search-results-column {
   flex: 0 0 100% !important;
   margin-right: 0 !important;
  }
}
@media (max-width: 426px) {
  .logo img{
    max-height: 25px !important;
  }
  .nav-wrapper a{
    font-size: 10px !important;
    padding: 5px 20px 0 0 !important;
  }
  .dropdown-toggle{
    font-size: 10px !important;
  }
}
@media (max-width: 320px) {
  .logo img{
    max-height: 20px !important;
  }
  .logo {
    margin-top: 0rem !important;
	}
}
.aa-DetachedSearchButton{
  border-radius: 30px !important; 
}
#algolia-search-box-container::before{
  display:none;
}



/* search scroll bar color */
.aa-Panel--scrollable::-webkit-scrollbar-thumb {
  background:rgba(63, 83, 217, 1) !important;
}
.aa-Panel--scrollable{
  max-height:350px !important;
  scrollbar-color:rgba(56, 89, 255, 1) #fff !important;
}
/*End search scroll bar color */

/*.hcknowpattren {
  border-bottom: 1px solid rgba(63, 83, 217, 1);
  padding-bottom: 20px;
}*/
.hcknowpattren button{
  background:#EDE8D7;
  border:none;
  font-size:18px;
  font-weight: 600;
   padding:8px;
  border-radius:5px;
  color:#000;
}
.intro{
  background:#FFDD3B !important;
  color:#000 !important;
  padding:8px;
  border-radius:5px;
}
.introone{
  color:#000 !important;
  background:#FFDD3B !important;
  padding:8px;
  border-radius:5px
}
#algolia-academy-search-results .ais-InfiniteHits-item a{
  font-size:22px
}
#algolia-academy-search-results .ais-InfiniteHits-item div{
  font-size:15px
}
/*span.ais-Stats-text i {
    font-size: 15px;
  	background: #7d7d80;
    padding: 3px 10px;
    border-radius: 15px;
}*/
li.ais-InfiniteHits-item div:has(+ div) {
    color: rgba(63, 83, 217, 1) ;
}
.ais-RefinementList-label input{
  margin:0 0.2rem 0 0;
}
.ais-RefinementList-labelText{
  padding:0.3rem;
}
/*End Algolia Search Styling */
.faqborderone{
  border:1px solid #000;
  border-radius:12px;
}
/*New Font Installation 07/11/2023 - Raj*/
@font-face {
font-family: 'roobertpro_body';
src: url(/hc/theming_assets/01J0E4W35F7QS2SXRRF17HJH6H) format('woff'), 
url(/hc/theming_assets/01J0E4W002737519KVZ4S4WSKR) format('woff2');
}
/**/

/*CSS for Product Announcements page*/
.announcement-cont {
  position: relative;
  background-color: #f7f7f9;
  margin: 10px 0;
  padding: 20px 20px;
  border-radius: 10px;
}
.announcement-status {
  position: absolute;
  right: 20px;
  top: 20px;
  border-radius: 5px;
  background: green;
  padding: 4px 10px;
  color: white;
}
.announcement-status.Launched {
  background-color: #72B121;
}
.announcement-status.Coming {
  background-color: #217EB1;
}
.announcement-status.Rolling {
  background-color: #217EB1;
}

.announcement-title {
  display: block;
  margin: 10px 0;
  font-size: 24px;
  font-weight: bold;
  color: rgba(5, 0, 56, 1);
}
  .announcement-title:hover {
    text-decoration: none;
  }
.announcement-created-date {
  color: #9C9C9C;
  font-weight: bold;
}
.category-content.announcements {
  flex:1;
  text-align: center;
}
.announcements-left {
  display: inline-block;
  width: 55%;
  text-align: left;
  margin: 0;
  vertical-align: top;
}
.announcements-right {
  display: inline-block;
  width: 29%;  /* Fix later */
  position: relative;
  margin: 0;
  vertical-align: top;
}
.announcements-subscribe {
  background-color: #F7F7F9;
  margin: 0 0 0 30px;
  padding: 80px 20px;
  border-radius: 4px;
}
.announcements-subscribe-title {
  font-size: 24px;
}
.announcements-subscribe-body {
  
}
.announcements-subscribe-button {
  
}
.announcements-filter {
  display: inline-block;
  margin-right: 15px;
}

.category-container.announcements{
    display:block;
}
.header-container {
  //background-color: #F4B31B;
  background-color: #F5B31B;
}

.announcement-description-wrapper {
  background-color: #F5F6F8;
  padding: 1px 10px;
  margin: 0 0 30px;
  text-align: center;
  color: #767676;
}
.announcement-description-wrapper a {
  color: #0061D5;
}
.sub-nav {
  margin-bottom: 0;
}  
.all-content {
  display: flex;
}
@media (max-width: 991px){
  .all-content {
		flex-direction: column-reverse;
  }
}  
.left-content {
  display: inline-block;
  width: 70%;
  vertical-align: top;
}
@media (max-width: 991px){
  .left-content {
    width: 100%;
  }
}  
.right-content {
  display: inline-block;
  width: 30%;
  vertical-align: top;
  padding-left: 60px;
}
@media (max-width: 1024px){
  .right-content {
    padding-left: 30px;
  }
}   
@media (max-width: 991px){
  .right-content {  
    width: 100%;
    padding: 0;
  }   
}  

}  
#overlay {
    display:none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.7);
    z-index: 999;
}  
#custom-filter{
    padding: 20px 0;
    border-bottom: 1px solid #D3D3D3;
    display: flex;
    margin-bottom: 25px;
}    
.select-dropdown {
    position: relative;
    display: inline-block;
    margin-right: 20px;
}
@media (max-width: 767px){
  .select-dropdown {
    margin-right: 5px;
  }  
}
.select-dropdown.article-style {
  	margin-right: 10px;
    margin-left: auto;
    display: flex;
}
@media (max-width: 599px){
  #custom-filter {
    flex-wrap: wrap;
  }
  .select-dropdown {  
    width: 100%;
    margin: 0 0 10px;
  }
  .select-dropdown.article-style {
    width: auto;
    margin: 0 0 10px auto;
    order: -1;
  }
}    
.select-dropdown:last-child {
  margin: 0;
}
.select-dropdown:after {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  	content: "";
    color: #767676;
    z-index: -1;
}  
.select-dropdown select, .select-dropdown select:focus, .select-dropdown select:active {
    background-color: #FFFFFF;
    border: 0;
    border-radius: 0;
    padding: 2px 30px 2px 10px;
    width: 100%;
    color: #767676;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select-dropdown select#filterBySection {
	  min-width: 200px;
}  
.select-dropdown select#statusFilter {
    min-width: 140px;
}
.select-dropdown select:focus {
    color: #222222;
    font-weight: bold;
}
.select-dropdown select option {
    font-weight: normal;
}
.select-dropdown.article-style button {
    border: 0;
    background: transparent url() no-repeat center;
    background-size: contain;
    font-size: 0;
    height: 30px;
    width: 30px;
    vertical-align: top;
    padding: 15px;
    margin-left: 10px;
}
.select-dropdown.article-style button.list {
    background-image: url("//theme.zdassets.com/theme_assets/88181/12d77160d201a5a3057f17aa2f4cb1b0acbb78cd.svg");
}
.select-dropdown.article-style button.list.active {
    background-image: url("//theme.zdassets.com/theme_assets/88181/7a8471a2bf222bb4d8ef6bd628c68b8e28e3d9da.svg");
}
.select-dropdown.article-style button.card {
    background-image: url("//theme.zdassets.com/theme_assets/88181/d97723f71fed1034c44edf9ecf3f22af5b91c7a4.svg");
}
.select-dropdown.article-style button.card.active {
    background-image: url("//theme.zdassets.com/theme_assets/88181/676f467858bfc9ce100f36711b3f95fb97cac703.svg");
}  
.select-dropdown.article-style:after {
    content: none;
}
.messageCard {
  position: relative;
  margin: 10px 0 24px 0;
  padding: 0;
  border-bottom: 1px solid #D3D3D3;

}
.messageCard .postTimeLabel {
    display: block;
  	margin: 16px 0;
}
.messageCard .postTime {
    margin-right: 4px;
    font-size: 12px;
  	display: inline-block;
}  

.messageCard .label{
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 650;
  border-radius: 5px;
  margin-top: 5px;
  margin-left: 8px;
  padding: 2px 8px;
  background: #D8F9C9;
  color: #1F5F02;
}  
.messageCard .title{
  display: inline; 
  vertical-align: middle;
  margin-top: 0;
	margin: 10px 0;
  font-size: 22px;
  font-weight: bold;
  color: rgba(5, 0, 56, 1);
}
.messageCard .title:hover { 
  text-decoration: none; 
}
.messageCard .body{
    line-height: 24px;
    max-height: 145px;
    margin: 12px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.messageCard .postTime{
    font-weight: 400;
  	font-size: 13px;
    color: #686685;
    margin-top: 20px;
    display: inline;
}
.messageStatsLeft {
  display: inline-block;
}
.messageCard.Comingsoon .label{
    background-color: #F1F3FD;
  	color: #3859FF;
}
.messageCard.Launched .label{
    background-color: #D8F9C9;
	  color: #1F5F02;
}
.messageCard.Rollingout .label{
    background-color: #F1F3FD;
  	color: #3859FF;
}
.custom-article.card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}  
.custom-article.card .messageCard {
    width: calc(50% - 15px);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
  	
}
@media (max-width: 480px){
  .custom-article.card .messageCard {
    width: 100%;
  }
}
.custom-article.card .messageCard .postTimeLabel {
    flex-direction: column-reverse;
    align-items: flex-start;
}
.custom-article.card .messageCard .postTimeLabel .postTime {
    margin: 8px 0 12px;
}
.custom-article.card .messageCard .label {
    margin: 8px 0;
}
.custom-article.card .messageCard .body{
    -webkit-line-clamp: 7;
    max-height: 168px;  
}
.custom-article.card .messageCard .messageStats {
    margin-top: auto;
}
.message-pagination {
    text-align: center;
    color: #767676;
    padding: 20px 0;
}
.message-pagination i.fa {
    color: #0061D4;
    padding: 0 8px;
}
.message-pagination .pagination-prev {
    margin-left: -22px;
}
.message-pagination .pagination-next {
    margin-right: -22px;
}
a#message-page-upper, a#message-page-lower,a.message-upper-limit,a.message-lower-limit {
    pointer-events: none;
    cursor: default;
    color: #767676;
    margin: 0 4px;
}
.custom-article.card ~ .selection-container .message-pagination {
		margin-top: 20px;
}
.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.pagination-next, .pagination-next:hover {
  text-decoration: none;
  color: #767676;
}

.announcement-article-label {
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 650;
  border-radius: 5px;
  margin-left: 2px;
  padding: 2px 8px;
  background: #F0F0F3;
  color: #716E65;  
}
.announcement-article-header {
  margin-bottom: 10px;
}
.announcement-article-title {
  margin-bottom: 0;
}
.announcement-article-content {
  margin-bottom: 20px;
}
.announcement-meta-data {
  color: #686685;
  font-size: 13px;
  font-weight: 300;
}

.announcement-meta-data:not(:last-child)::after {
  content: "\00B7";
  margin: 0 5px;
}
.sub-nav.announcements {
  display: block; 
  padding-bottom: 40px;

}
.announcements-header {
  display: block;
  text-align: center;
  font-size: 30px;
  color: #050038;
  padding-top: 60px;
  padding-bottom: 20px;
  margin-bottom: 0px;
}
.announcements-subheader {
  text-align: center;
  font-size: 17px;
  color: #686685;  
}
.announcements-welcome-text {
  margin: 20px auto;
  max-width: 778px;
  text-align: left;
  font-size: 17px;
  color: #686685;  
}
#custom-filter.announcements-filter {
  padding: 24px 0;
  margin-right: 0;
  border-bottom: 1px solid #D3D3D3;
}
.announcements-search {
  margin: 50px auto;
  max-width: 778px;
}
.announcements-search .search input[type="search"] {
    border-radius: 40px;
    box-sizing: border-box;
  	border: 1px solid #9998B3 !important;
    font-size: 17px;
    font-weight: 400;
    color: #B3B2C6;
    height: 60px;
    padding-left: 50px;
    padding-right: 20px;
    -webkit-appearance: none;
    width: 100%;  
}
.article-content {
  margin: 16px 0;
}
.messageCard-titlebox {
  display: block;
  vertical-align: middle;
}

.announcements-hero {
  background-image: url(/hc/theming_assets/01HZSJDZ79NNMWWJ0N3N14TZ79);
  background-position: bottom;
  background-size: cover;
  width: 100%;
  padding: 0 20px;
  margin-top: 0px;
  text-align: center;
}
  

/*CSS ends for Product Announcements page*/

/*Customize Images CSS*/
.wysiwyg-color-black40{
  color: inherit;
}
.article-body img{
  border: 2px solid #1C1C1E;
  border-radius: 8px;
}
.article-body img.icon {
    border: none;
    border-radius: unset;
    display: unset;
    vertical-align: middle;
}
/*Customize Images CSS End*/


@media (max-width: 1024px) {
.intercom-lightweight-app-launcher {
bottom: 72px !important;
}
 
/*localhost*/
.intercom-dfosxs {
bottom: 80px !important;
}
 
iframe[name='intercom-notifications-frame'] {
bottom: 132px !important;
}
}

/* ==========================================================================
   Product Announcements: metadata badges
   Added for Product Announcements portal cards and announcement article pages.
   ========================================================================== */

.pa-badges,
.announcement-article-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pa-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
}

/* Release status */
.pa-badge--coming-soon {
  color: #2f5bdb;
  border-color: #b7ccff;
}

.pa-badge--launched {
  color: #2d7a34;
  border-color: #b9e2be;
}

.pa-badge--rolling-out {
  color: #5c667a;
  border-color: #d5dae3;
}

/* Release stage */
.pa-badge--beta {
  color: #7a52d1;
  border-color: #d8c6ff;
}

.pa-badge--ga {
  color: #42526e;
  border-color: #cbd2e1;
}

/* Availability */
.pa-badge--enterprise {
  color: #5c667a;
  border-color: #d5dae3;
}

.pa-badge--add-on {
  color: #9a6a00;
  border-color: #f2d39b;
}

/* Hide the old single status label on Product Announcement cards if old markup still appears */
.messageCard .label {
  display: none;
}

/* Keep Product Announcement badges compact on mobile */
@media (max-width: 768px) {
  .pa-badges,
  .announcement-article-labels {
    gap: 6px;
    margin-top: 8px;
  }

  .pa-badge {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* ---------------------------------------------------------------------
   Grafted onto the live theme (base: "Current Live (Latest Fix - Search
   Box CDN @1.19.7)", manifest 1.4.16). Only the two blocks below were
   added; nothing existing was edited. Line references in the comments
   point at THIS file. */

/* =====================================================================
   ARTICLE TABLES
   Added in v1.4. This theme had no `.article-body table` rules at all:
   on prod every table carries its own inline styling, so none were needed.
   The Git→Zendesk publisher's sanitizer keeps `style` only for `width`
   (convert.py, `_WIDTH_STYLE_TAGS` / `_width_only_style`), so a published
   body arrives with 0 of prod's inline table styling — measured on
   "Plans and features available": 1451 style attributes in, 6 out, all six
   `<col>` widths. Across `docs/` that is 505 `border-bottom`, 2883
   `text-align`, 3050 `padding`, 288 `background-color` and 3642 `height`
   declarations dropped over 99 articles / 194 tables. Hence unruled text.

   Deliberately ONE style for all 194 tables rather than a port of prod's
   per-article choices. Prod hand-picked 3 header colours (`pink`, `#f4f4f4`,
   `#f2f2f2`), 3 band colours (`#d0d0d0`, `#000066`, `#ffbfbf`) and 2 grid
   colours (`#dddddd`, `#2f3941`), and none of that survives as anything a
   selector can read — there is no hook to branch on, so normalising is the
   only available answer as well as the better one. Values follow the
   dominant idiom (`1px solid #dddddd` grid, `#f2f2f2` header).

   Light only, hardcoded — this theme has no CSS variables and no dark mode.
   ===================================================================== */
/* `:not([style*="border"])` on the three border rules below is what makes this
   block safe to run against a PROD body as well as a published one. Prod's cells
   carry their own inline `border-bottom` and nothing else, so an unqualified
   `border: 1px solid` shorthand would add top/left/right rules prod has never
   had. A published body has no inline style at all, so it takes the full grid.
   The test is per TABLE, not per cell, and that distinction is load-bearing:
   in prod's plan-comparison table exactly 1 of the 6 `<th>` declares a border,
   so a per-cell test grids the other 5 and leaves the sixth bare — a header row
   that is half boxed. One cell carrying a border means the author styled that
   table, so the whole table is left alone.

   The outer-border selector also skips any table with an inline `style`, which
   catches prod's `border-collapse: collapse` by substring — the wanted answer,
   since prod tables have no outer border either. */
.article-body table:not(:has(td[style*="border"], th[style*="border"])):not([style*="border"]) {
  border: 1px solid #dddddd;
}
.article-body table:not(:has(td[style*="border"], th[style*="border"])) th,
.article-body table:not(:has(td[style*="border"], th[style*="border"])) td {
  border: 1px solid #dddddd;
}
.article-body table {
  width: 100%;
  max-width: 100%;
  /* Explicit, not inherited: `.table` (line 317) sets `table-layout: fixed`,
     and under fixed layout a `<col>` percentage is obeyed to the pixel with the
     content overflowing rather than the column growing. Stating `auto` here at
     `.article-body table` specificity means no other rule can put a published
     table into that mode. */
  table-layout: auto;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  line-height: 1.5;
}
/* `overflow-wrap: normal` is load-bearing, not tidying. `.article-content` sets
   `word-wrap: break-word` (line 1659), the property is inherited, and inside a
   table Chrome/WebKit let it shrink a column BELOW its min-content width. With
   `width: 100%` added above, the plan-comparison table's `<colgroup>` — which
   reads `70% / 15% / 4% / 4% / 4% / 3%` — was then taken literally and printed
   "Starter", "Business", "Enterprise" and "Education" one letter per line.
   Restoring `normal` puts the min-content floor back, so no `<col>` percentage
   can narrow a column past its longest word.

   Cost: a cell holding one long unbreakable token (a URL, an ID) can now push
   the table past the reading column instead of breaking mid-token. `max-width`
   above and the mobile scroll rule below contain it; vertical text was worse. */
.article-body table th,
.article-body table td {
  padding: 10px 12px;
  vertical-align: middle;
  text-align: left;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Header row. `<thead>` survives on 51 of the 194 tables; the rest lead with a
   bare `<tr>` of `<th>`, which the second selector picks up. */
.article-body table thead th,
.article-body table tr:first-child th {
  background: #f2f2f2;
  font-weight: 600;
  color: #1C1C1E;
}

/* Section band — a row that is a single spanning cell holding a heading. All 8
   in the published corpus are in "Plans and features available"; the heading is
   what keeps this off the other 36 single-spanning-cell rows, which are layout
   artifacts rather than bands. Prod tinted these
   #ffbfbf, #d0d0d0 or #000066; neutral grey here because #000066 was navy
   behind white text and the white came from a `color:` the sanitizer drops, so
   reproducing prod's dark bands would render black on navy. #F0F0F3 is the
   grey this theme already uses for .announcement-article-label.

   Painted on the `<tr>`, not the `<td>`, and that is the whole point: prod
   declares its band colour inline on the row, a cell background paints OVER a
   row background, so setting this on the cell would repaint prod's pink band
   grey. On the row, prod's inline declaration wins and prod is untouched. */
.article-body table tr:has(> td[colspan]:only-child:has(> h1, > h2, > h3, > h4, > h5, > h6)) {
  background: #F0F0F3;
}
.article-body table td[colspan]:only-child:has(> h1, > h2, > h3, > h4, > h5, > h6) {
  text-align: center;
}

/* Block content authored inside cells. Prod's cells are full of `<p>`, and 38
   tables hold a list; with this theme's normal article margins (`p` 1em,
   `ul` 20px 0 20px 20px) every such row gains 20-40px of dead height. */
.article-body table p,
.article-body table h1,
.article-body table h2,
.article-body table h3,
.article-body table h4,
.article-body table h5,
.article-body table h6,
.article-body table ul,
.article-body table ol {
  margin: 0;
}
.article-body table p + p,
.article-body table p + ul,
.article-body table p + ol,
.article-body table ul + p,
.article-body table ol + p {
  margin-top: 0.5rem;
}
.article-body table ul,
.article-body table ol {
  padding-left: 1.1rem;
}
.article-body table h1,
.article-body table h2,
.article-body table h3,
.article-body table h4,
.article-body table h5,
.article-body table h6 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Alignment. `class` survives the sanitizer, so Zendesk's `wysiwyg-text-align-*`
   is the one piece of prod's alignment still in a published body. Zendesk ships
   no CSS for those classes to a custom theme, so until now they were inert
   markup.

   Scoped to `.article-body` but in practice table-only: counted over `docs/`,
   every surviving instance is inside a table (237 `-center`, 71 `-left`, 0
   `-right`). The export strips `class` off prose, so the centred images and
   centred prose PREFLIP_PLAN.md lists as accepted losses have no class left for
   these rules to reach — they stay lost, and this does not quietly revive them. */
.article-body .wysiwyg-text-align-center { text-align: center; }
.article-body .wysiwyg-text-align-right { text-align: right; }
.article-body .wysiwyg-text-align-left { text-align: left; }

/* Comparison matrices: label column left, data columns centred. Prod said so
   explicitly — 627 of "Plans and features available"'s 682 `text-align`
   declarations are `center` — but per-cell alignment is NOT recoverable from
   the published body: a cell holding a bare `1+` or `✔` has no `<p>` and so no
   `wysiwyg-text-align-*` class to read, which is why such cells sit left while
   their neighbours centre. Reconstructed by position instead, and gated on a
   row of 5+ cells so it reaches the 15 wide matrices (14 articles, 1592 cells)
   and none of the 179 narrower prose tables ("Setting / Description" et al.)
   where centring would be wrong.

   `text-align` inherits, so the `<p>` prod wraps most cell values in needs no
   rule of its own — and must not get one: 71 cells carry an explicit
   `wysiwyg-text-align-left`, and forcing `inherit` on cell children would
   override exactly the alignment that did survive. */
.article-body table:has(tr > *:nth-child(5)) td:not(:first-child),
.article-body table:has(tr > *:nth-child(5)) th:not(:first-child) {
  text-align: center;
}

/* Wide tables on small screens. The theme is mobile-first, so this is the only
   max-width query in the block, and it is scoped to 4+ column tables (47 of
   194) — a 2-column prose table wraps perfectly well.

   `display: block` on the `<table>` is the whole mechanism: the rows get
   re-parented into an anonymous table box that shrink-to-fits its content, so
   when the columns need more than the reading column the block scrolls. No
   `min-width` and no wrapper element are needed, and `<thead>`/`<tbody>` must
   NOT be given their own `display: table` — that makes them independent tables
   and the header stops lining up with the body. */
@media (max-width: 767px) {
  .article-body table:has(tr > *:nth-child(4)) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .article-body table th,
  .article-body table td {
    padding: 8px 10px;
  }
}

/* An unsurvivable `<colgroup>`: any column specified under 10% of the table.

   This is the root cause of the plan-comparison table looking nothing like
   prod, and it is a data problem the theme can only paper over. Prod stated
   column widths TWICE — once on `<col>` and once per cell — and the two
   disagree. Prod renders the per-cell numbers (512 of them, `width: 4813.74%`
   and friends, which browsers normalise to ~16.6% each) and ignores the
   colgroup. The publisher's sanitizer drops the per-cell widths for being
   >= 100% and keeps the colgroup, so a published body carries only the half
   prod overrode, and asks the browser to lay out `70% / 15% / 4% / 4% / 4% / 3%`
   — a layout no reader has ever seen on prod.

   Measured over `docs/`, "has a column under 10%" selects exactly the 2 tables
   where this contradiction exists (plans-and-features 3%, understand-admin-roles
   9%) and none of the other 33 tables whose surviving colgroup is the author's
   only statement and is honoured as-is. A column under a tenth of the table
   cannot hold a header word at any viewport, so there is no case where obeying
   one is right.

   Two prefixes per digit because `[style^="width: 1"]` would also catch 15%
   and 12%. The real fix is converter-side — normalise the per-cell ratios
   instead of discarding them — after which this rule stops matching anything
   and can be deleted.

   `!important` is required, not stylistic: the width being overridden is an
   INLINE `style` attribute on the `<col>`, and an inline declaration beats any
   author rule at any specificity without it. Everything else in this block
   styles what the sanitizer left bare and needs no such escape. */
.article-body table:has(> colgroup > col[style^="width: 0"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 1%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 1."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 2%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 2."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 3%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 3."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 4%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 4."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 5%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 5."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 6%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 6."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 7%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 7."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 8%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 8."]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 9%"]) > colgroup > col,
.article-body table:has(> colgroup > col[style^="width: 9."]) > colgroup > col {
  width: auto !important;
}
/*ARTICLE TABLES end*/
/* =====================================================================
   INLINE ICONS
   Added in v1.7. An icon inside a sentence — the toolbar glyph in
   "Click on the Media, Tools and Integrations ( + ) icon" — was breaking onto
   its own line, in a bordered box, in the sandbox but not on prod.

   Why an image's display is context-dependent at all: `.article-body img`
   (line 1522) sets `display: inherit`, so the image takes its PARENT's
   display. Measured over `docs/`, that resolves to `block` for the 1376 images
   in a `<p>`, `list-item` for the 139 in an `<li>`, `table-cell` for the 47 in
   a `<td>`, and `inline` for the 327 in an `<em>`. So an icon only stays on the
   text baseline if something says so, and normally that is `class="icon"`
   (line 6055, whose `display: unset` computes to `inline`).

   The class is derived at publish time from the width (`convert.py`,
   `ICON_MAX_WIDTH_PX = 36`), which means it is missing from every body
   published before that derivation existed — 93 images in `docs/` are
   icon-width, and a body from before the fix carries the width but not the
   class. This rule keys off the width directly, so the same 36px threshold
   applies whether or not the class made it into the body, and the two agree
   once it has. No `!important` needed: an attribute selector outranks the
   plain `.article-body img` rules it corrects.

   This is a safety net, not the fix. The fix is republishing the affected
   articles so the class is present; see the note in the handover.
   ===================================================================== */
.article-body img[width="1"],
.article-body img[width="2"],
.article-body img[width="3"],
.article-body img[width="4"],
.article-body img[width="5"],
.article-body img[width="6"],
.article-body img[width="7"],
.article-body img[width="8"],
.article-body img[width="9"],
.article-body img[width="10"],
.article-body img[width="11"],
.article-body img[width="12"],
.article-body img[width="13"],
.article-body img[width="14"],
.article-body img[width="15"],
.article-body img[width="16"],
.article-body img[width="17"],
.article-body img[width="18"],
.article-body img[width="19"],
.article-body img[width="20"],
.article-body img[width="21"],
.article-body img[width="22"],
.article-body img[width="23"],
.article-body img[width="24"],
.article-body img[width="25"],
.article-body img[width="26"],
.article-body img[width="27"],
.article-body img[width="28"],
.article-body img[width="29"],
.article-body img[width="30"],
.article-body img[width="31"],
.article-body img[width="32"],
.article-body img[width="33"],
.article-body img[width="34"],
.article-body img[width="35"],
.article-body img[width="36"] {
  display: inline;
  vertical-align: middle;
  border: none;
  border-radius: unset;
}
/*INLINE ICONS end*/

/* =====================================================================
   CALLOUTS — the missing green
   The five authoring directives resolve to four colours in `convert.py`
   (`_ADMONITION_COLOR`): note -> yellow, info -> blue, warning/danger/caution/
   error -> pink, tip -> green. This theme defines `.pink`, `.yellow`, `.blue`
   and `.grey` (lines 4996-5010) but no `.green`, so a `:::tip` falls through to
   the base `.article-body blockquote` grey and reads as a plain quotation
   rather than a callout. That is not a sandbox-only gap: prod bodies carry
   `class="green"` on 3 callouts and this theme has never had a rule for them,
   so they render grey on prod today too.

   Low volume — 2 in `docs/`, 3 on prod — but the cost of the rule is one
   declaration and the cost of leaving it out is a colour the publisher emits
   and the theme silently drops. The value is taken verbatim from the sibling
   theme lineage ("Current Prod copy v1.2", line 5032), not invented, and it
   follows the same `rgba(..., 0.7)` pastel pattern as its four siblings.
   ===================================================================== */
.article-body blockquote.green {
  background: rgba(178, 255, 196, 0.7);
}
/*CALLOUTS end*/

/* =====================================================================
   BUILD CANARY
   A machine-readable answer to "is this build actually the CSS being
   served?" — the question that cost a round trip when a preview looked
   unchanged and there was no way to tell a missing rule from a stale
   stylesheet. Renders nothing.

   In the browser console on any Help Center page:

     getComputedStyle(document.documentElement)
       .getPropertyValue('--hc-theme-build')

   Empty string => this stylesheet is not the one loaded.
   ===================================================================== */
:root {
  --hc-theme-build: "tables-icons-callouts-1";
}