/* ============================================================*/
/***** 2020 Article Search *****/
/* Used in Articles */
/* ============================================================*/
.article-search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 40px;
  width: 300px;
}

.article-search-box .search-icon {
  position: absolute;
  width: 16px;
  height: 17px;
  z-index: 8;
  right: 6%;
}

.article-search
{
  width: 100%;
  height: 100%;
}

.article-search input {
  height: 40px;
  font-size: 14px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  border-right: none;
  outline: none;
  padding: 0px 20px;
  letter-spacing: 1px;
  width: 100%;
  border: white;
}

.article-search input::placeholder {
  color: rgba(87, 87, 86, 0.8);
}

.article-search input:focus::placeholder {
  color: transparent;
}

.article-search-box input[name="commit"] {
  visibility: hidden;
 }


/* ============================================================*/
/***** 2020 Article Sidebar *****/
/* Used in Articles */
/* ============================================================*/

.article-main {
  padding-left: 0;
  /* margin-left: 20px !important;
  margin-right: 20px !important; */
}

.article-sidebar {
  background: #FAF5EF;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  flex: 0 0 300px;
  padding: 20px 20px 20px 10px;
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .article-sidebar {
    display: none;
  }
}
@media (max-width: 767px) {
  .article-search-box {
    display: none;
  }
}

.sidebar {
  padding-inline-start: 0px;
  display: flex;
  flex-direction: column;
}
.sidebar ul {
  padding-inline-start: 10px;
}

.sidebar-item > ul > li {
  padding-inline-start: 10px;
}

.sidebar-category {
  padding: 0 0 30px 0;
}

.sidebar-category.currentCategory > div > .sidebar-icon-expander,
.sidebar-item.currentCategory > div > .sidebar-icon-expander,
.sidebar-item.currentSection > div > .sidebar-icon-expander {
  filter: invert(40%) sepia(90%) saturate(2000%) hue-rotate(330deg) brightness(100%);
}

[data-id="userguide"] + li {
  order: -1;
}

.sidebar-category-title {
  display: block;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  color: #FF5F27;
  margin: 0 0 15px 5px;
}

.sidebar-section-title {
  display: inline;
  color: #240602;
  cursor: pointer;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
  /* text-transform: uppercase; */
}

.sidebar-subsection-title {
  display: inline;
  color: #240602;
  cursor: pointer;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
}

.sidebar-item {
  padding: 1px 0;
  position: relative;
}

.sidebar-item-article {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sidebar-item-article.current .sidebar-item-link {
  color: #FF5F27;
  font-weight: 600;
}

.sidebar-item > div {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sidebar-item .sidebar-icon-expander {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 7px;
  transition: transform 0.2s ease;
}

.sidebar-item.open > div > .sidebar-icon-expander {
  transform: rotate(90deg);
}

.sidebar-item.open,
.sidebar-item.subsection.open {
  padding-bottom: 10px;
}

#sidebar-icon-article {
  flex-shrink: 0;
  margin-top: 7px;
}

.sidebar-item-link {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  display: inline;
  color: #240602;
}

.sidebar-item-link:hover {
  text-decoration-color: #FF5F27;
  color: #FF5F27
}

.sidebar-item-link:active {
  color: #240602;
}

.sidebar-item-link:visited {
  color: #240602;
}

.sidebar-item-article.current .sidebar-item-link:visited {
  color: #FF5F27;
}

/* ============================================================*/
/***** 2026 Article Text Formatting *****/
/* Used in Articles */
/* ============================================================*/

.article-content {
  color: #240602;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  word-wrap: break-word;
}

.article-body figure {
  display: block;
  text-align: left; 
  margin: 24px 0;
}

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

.article-body p.wysiwyg-text-align-center:has(img),
.article-body p.wysiwyg-text-align-center:has(figure) {
  text-align: left;
}

.article-body h1 {
  font-size: 38px;
  font-style: normal;
  font-weight: 500;
  margin: 30px 0 20px;
  color: #FF5F27;
}

.article-body h2 {
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  margin: 30px 0 10px;
  /* font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  margin: 20px 0 10px; */
}

.article-body h3 {
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  margin: 15px 0 10px;
}

.article-body h4 {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  margin-bottom: 60px;
  line-height: 1.5;
}

.article-body .warning-note {
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  padding: 20px 20px;
  margin: 20px 0px;
  border-radius: 14px;
  display: block;
  background-color: #FFE0CE;
}

.article-body .tips-note {
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  padding: 20px 20px;
  margin: 20px 0px;
  border-radius: 14px;
  display: block;
  background: #FEF8E6;
}

.article-body .video-note {
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  padding: 20px 20px;
  margin: 20px 0px;
  border-radius: 14px;
  display: block;
  background-color: #C8E9D5;
}
.article-body .warning-note .title,
.article-body .tips-note .title,
.article-body .video-note .title {
  font-weight: 600;
  margin-bottom: 10px;
}


/* ============================================================*/
/***** Article *****/
/* ============================================================*/

.article {
  /*
* The article grid is defined this way to optimize readability:
* Sidebar | Content | Free space
* 12%     | 75%     | 12%
*/
  flex: 1 0 auto;
  /* background-color: #fafafa; */
  max-width: 100%;
  /* margin-top: 30px; */
}

@media (min-width: 1024px) {
  .article {
    flex: 1 0 calc(100% - 220px);
    padding: 0 40px;
  }
}

@media (min-width: 1920px) {
  .article {
    flex: 1 0 calc(100% - 220px);
    padding: 0 40px;
  }
}

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

@media (max-width: 1024px) {
  .article-container {
    display: block;
  }
}
.article-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
  border-bottom: 1px solid #ddd;
}

.article-avatar {
  display: none;
}

.article-author {
  padding-bottom: 16px;
}


.article-title {
  font-weight: 400;
  text-align: center;
  font-family: 'Serrif Condensed', serif;
  font-size: 48px;
  font-style: normal;
  line-height: 105%;
  margin-top: 30px;
  margin-bottom: 30px;
  color: #240602;
  max-width: 740px;
}

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

.article-title .icon-lock:before {
  content: "\1F512";
  font-size: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role="button"] {
  flex-shrink: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .article [role="button"] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: block;
  text-align: center;
  font-size: 14px;
  color: #777;
}


.article-body img {
  height: auto;
  max-width: 100%;
  margin: 20px auto;
  /* -moz-box-shadow: 5px 5px 5px -2px #C9C9C9; 
  -webkit-box-shadow: 5px 5px 5px -2px #C9C9C9;  */
  /* box-shadow: 5px 5px 5px -2px #C9C9C9; 
  border: 1px solid #C9C9C9; */
}

a img {
  -moz-box-shadow: none !important; 
  -webkit-box-shadow: none !important; 
  box-shadow: none !important; 
  border: none !important;
}


.article-body .video-js {
  margin: 20px auto;
}

@media (min-width: 700px) {
  .article-body .video-js {
    width: 640px !important;
    height: 360px !important;
    padding-top: 0 !important;
  }
}

.article-body > ul,
.article-body ol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin-bottom: 10px;
}

.article-body > ul {
  padding-inline-start: 12px;
}

.article-body ol {
  padding-inline-start: 0px;
}

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

.article-body ul > li > ul {
  list-style-position: outside;
  padding-inline-start: 20px;
  margin-top: 5px;
}

.article-body ol > li {
  margin-bottom: 5px;
  padding-left: 20px;
  position: relative;
  width: 100%;
}
.article-body ol {
  counter-reset: item;
}
.article-body ol li::before {
  content: counter(item) ". ";
  counter-increment: item;
  color: #FF5F27;
  font-weight: 400;
  margin-right: 5px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.article-body ul > li {
  margin-bottom: 5px;
  padding-left: 5px;
  position: relative;
  width: 100%;
}

/* First Level */
.article-body ul > li:before {
  content: "•";
  color: #1a1a1a;
  font-size: 1em;
  position: absolute;
  left: -12px;
  top: 0;
}

/* Second Level */
.article-body ul > li > ul > li:before {
  content: "◦";
  color: #1a1a1a;
  font-size: 1em;
  position: absolute;
  left: -12px;
  top: 0;
}
.article-body > p:last-child {
  margin-bottom: 0;
}

.article-body a {
  color: #240602 !important;
  text-decoration: underline !important;
  text-decoration-color: #240602 !important;
  transition: text-decoration-color 0.15s;
}

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

.article-body a:hover {
  color: #FF5F27 !important;
  text-decoration-color: #FF5F27 !important;
}

.article-body b, strong {
  font-weight: 600 !important;
}


.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  padding-top: 20px;
}
.article-nav-box {
  max-width: 30%;
  min-height: 45px;
}

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

.article-nav:hover .article-nav-title {
  color: #FF5F27;
}

.article-nav-label {
  /* display: block; */
  font-size: 20px;
}

.article-nav-title {
  display: none;
  font-size: 16px;
  color: #777;
}

@media (min-width: 768px) {
  .article-nav-title {
    display: block;
  }
}

.article-nav-prev {
  align-items: flex-start;
  text-align: left;
  color: #FF5F27;
}
.article-nav-next {
  align-items: flex-end;
  text-align: right;
  color: #FF5F27;
}

.article-nav-prev:hover {
  color: #FF5F27;
}
.article-nav-next:hover  {
  color: #FF5F27;
}

.article-nav-next svg {
  width: 12px;
  height: 12px;
}

.article-nav-prev svg {
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

.article-comment-count {
  color: lighten(#240602, 20%);
  font-weight: 300;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count .icon-comments {
  color: #240602;
  content: "\1F4AC";
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.article-votes-question {
  font-size: 20px;
  color: #FF5F27;;
  font-weight: 600;
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 40px 0;
  text-align: center;
}

.article-vote {
  margin: 10px 15px;
  min-width: 80px;
}
.article-vote:before {
  font-size: 8px;
  margin-right: 10px;
}
.article-vote:after {
  content: attr(title);
  /* Yes/No label*/
}

.article-vote-down {
  background: transparent !important;
  border: 1px solid #FF5F27 !important;
  color: #FF5F27 !important;
}
.article-vote-down:hover {
  background: #FF5F27 !important;
  color: white !important;
}

.article-vote-up {
  border: 1px solid transparent !important;
}
.article-vote-up:active {
  background: linear-gradient(45deg, #c93518 0%, #cc3535 80%, #cc2e4e 100%);
  transform: translateY(1px);
}

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

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

/*
.article-relatives li a {
  color: #333;
}*/
/* ============================================================*/
/***** 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: #240602;
  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: lighten(#240602, 20%);
}
/* ============================================================*/
/***** 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: lighten(#240602, 20%);
  display: block;
  font-size: 23px;
  text-align: center;
  width: 100%;
}
.share a:hover {
  text-decoration: none;
}
.share a:hover:before {
  color: #240602;
}
.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: lighten(#240602, 20%);
  display: inline-block;
  font-weight: 300;
  font-size: 13px;
  margin-bottom: 0;
  margin-top: 15px;
}
.comment-callout a {
  color: #240602;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter a {
  color: lighten(#240602, 20%);
  font-weight: 300;
  font-size: 13px;
  text-decoration: none;
}
[dir="rtl"] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #240602;
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  padding-right: 20px;
  width: 100%;
}
.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 80%;
}
@media (min-width: 768px) {
  .comment-meta {
    flex: 1;
  }
}
.comment .status-label {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label {
    margin-top: 0;
  }
}
.comment-published {
  color: lighten(#240602, 20%);
  display: block;
  font-weight: 300;
  font-size: 13px;
}
.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: #240602;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  line-height: 1.6;
  font-weight: 100;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body a:visited {
  color: darken(#240602, 20%);
}
.comment-body img {
  max-width: 100%;
}
.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: lighten(#240602, 20%);
  display: block;
  margin: 3px 0;
}
[dir="rtl"] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}
.vote-up:hover:before,
.vote-down:hover:before {
  color: #240602;
}
.vote-up:before,
.vote-down:before {
  color: lighten(#240602, 20%);
  font-size: 24px;
}
.vote-up:before {
  content: "\2B06";
}
.vote-down:before {
  content: "\2B07";
}
/* ============================================================*/
/***** 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: #f8f8f8;
}
.actions .dropdown-toggle:before {
  background-color: transparent;
  border-radius: 50%;
  color: lighten(#240602, 20%);
  content: "\2699";
  display: block;
  font-size: 13px;
  margin: auto;
  padding: 5px;
}
/* ============================================================*/