/* Base styles */
*, input[type=search] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background-color: rgba(255, 255, 255, 1);
}

body {
  color: #152F50;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

img[width], img[height] {
  max-width: none;
}

figure > img {
  display: block;
}

a {
  color: rgba(200, 64, 57, 1);
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

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

table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

td, th {
  border-color: #eeeeee;
  border-style: solid;
  padding: 12px;
}

th {
  border-width: 1px 0;
  color: #bebebe;
  font-size: 11px;
  font-weight: normal;
  white-space: nowrap;
}

td {
  border-width: 0 0 1px 0;
}

h1, h2, h3, h4, h5, h6 {
  color: #152F50;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 20px;
}

input, label {
  display: inline-block;
  vertical-align: middle;
}

label {
  font-size: 12px;
}

input[type="checkbox"] + label {
  margin-left: 5px;
}

input, textarea {
  border: 1px solid #dddddd;
  border-radius: 2px;
  padding: 10px;
}

textarea {
  height: 100px;
  padding: 7px 10px;
  resize: vertical;
}

textarea, input[type=text] {
  width: 100%;
}

input, textarea, select {
  color: #555;
}

input::-ms-clear {
  display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

::-webkit-input-placeholder {
  color: #cccccc;
}

:-ms-input-placeholder {
  color: #cccccc;
}

::-moz-placeholder {
  color: #cccccc;
}

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

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

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

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

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

.form-field p {
  color: #bebebe;
  font-size: 11px;
}

.form-field input[type=number], .form-field input.datepicker {
  width: 150px;
}

.form form + form, .searchbox {
  margin-top: 25px;
}

.searchbox-suggestions {
  background-color: #fff;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  padding: 10px 20px;
}

.searchbox-suggestions li {
  padding: 5px 0;
}

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

.form footer {
  border-top: 1px solid #eeeeee;
  margin-top: 40px;
  padding-top: 30px;
  text-align: right;
}

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

/* Navigation menus */
.nav li, .nav-bordered li, .nav-spaced li {
  display: inline-block;
  font-weight: bold;
}

.nav li a, .nav-bordered li a, .nav-spaced li a {
  font-weight: normal;
}

.nav-bordered li + li {
  border-color: #eeeeee;
  border-style: solid;
  border-width: 0 0 0 1px;
  margin: 0 0 0 30px;
  padding: 0 0 0 30px;
}

[dir="rtl"] .nav-bordered li + li {
  border-width: 0 1px 0 0;
  margin: 0 30px 0 0;
  padding: 0 30px 0 0;
}

.nav-spaced li + li {
  margin: 0 0 0 40px;
}

[dir=rtl] .nav-spaced li + li {
  margin: 0 40px 0 0;
}

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

.search-box:before {
  content: "\1F50D";
  font-family: "entypo";
  font-size: 1.25em;
  line-height: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 2.5em;
  z-index: 1;
}

.search-box input {
  font-weight: lighter;
  padding: .75em 2.7em;
  width: 100%;
  -webkit-appearance: none;
}

.search-box input[type="submit"] {
  display: none;
}

/* Breadcrumbs */
.breadcrumbs li {
  color: #bebebe;
  display: inline-block;
  font-size: 12px;
}
.breadcrumbs li + li:before {
  content: ">";
}
.breadcrumbs li a {
  color: #152F50;
}

/* Labels */
.label, .request-status {
  border-radius: 20px;
  display: inline-block;
  font-size: 10px;
  padding: 3px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Metadata */
.meta, .meta-group {
  color: #cccccc;
  display: inline-block;
  font-size: 11px;
}

.meta-group * + *:before {
  content: "\2022";
  font-size: 8px;
  margin: 0 10px;
}

/* Helper classes */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

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

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

.share a {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  vertical-align: middle;
  width: 30px;
}

.share a:before {
  background: #CCC;
  border-radius: 50%;
  color: #FFF;
  display: inline-block;
  font-family: "entypo";
  text-align: center;
  width: 100%;
}

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

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

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

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

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

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

.pagination * {
  display: inline-block;
}

.pagination li {
  border: 1px solid #eeeeee;
  float: left;
  margin-left: -1px;
}
[dir="rtl"] .pagination li {
  float: right;
}

.pagination a, .pagination span {
  color: inherit;
  font-size: 12px;
  padding: 5px 12px;
}

.pagination-current {
  background-color: #f9f9f9;
  color: #bebebe;
}

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

/* Markdown styles */
.markdown {
  word-wrap: break-word;
  line-height: 1.7;
}
.markdown img {
  max-width: 100%;
}
.markdown hr {
  background-color: #eeeeee;
  border: 0;
  height: 1px;
}
.markdown ul, .markdown ol {
  list-style-position: inside;
  padding: 0 15px;
}
.markdown ul {
  list-style-type: disc;
}
.markdown ol {
  list-style-type: decimal;
}
.markdown pre {
  background: #f9f9f9;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.markdown blockquote {
  border-left: 1px solid #eeeeee;
  color: #bebebe;
  font-style: italic;
  padding: 0 15px;
}

/* ====================================================
   Base styles
   ==================================================== */
*, input[type=search] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background-color: rgba(255, 255, 255, 1);
  height: 100%;
}

/* This is the second of two near-duplicate stock "body" rules in this file
   (equal specificity, this one wins by source order) — kept the values in
   sync with the earlier rule, and added the flex layout that pins the
   footer to the bottom of the viewport on short pages instead of leaving a
   gap, while still letting it flow naturally below long content. */
body {
  color: #152F50;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
}

main {
  display: block;
  flex: 1 0 auto;
}

a {
  color: rgba(200, 64, 57, 1);
  text-decoration: none;
}

a:hover {
  cursor: pointer;
  text-decoration: underline;
}

img {
  vertical-align: middle;
}

p {
  margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 1.75em;
  line-height: 1.75em;
  margin: 0;

}

.section-area h1 {
  text-transform: capitalize;
}

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

/* ====================================================
   Sub Nav
   ==================================================== */
.sub-nav {
  margin-bottom: 15px;
}
.sub-nav form {
  display: none;
}

.page-header {
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 30px;
  min-height: 50px;
  padding-bottom: 15px;
}
.page-header > * {
  display: table-cell;
  vertical-align: middle;
}
.page-header > *:first-child {
  width: 100%;
}
.page-header + p {
  color: #bebebe;
  margin: -15px 0 20px 0;
}
.page-header h1 {
  font-size: 20px;
  font-weight: 400;
}

/* ====================================================
   Content frame
   ==================================================== */
.header-inner, .footer-inner {
  margin: 0 auto;
  padding: 0 20px;
  width: 980px;
}

main {
  margin: 25px auto 0;
  padding: 0 20px;
  width: 980px;
}

/* Home page has full-bleed sections (hero, tiles) that need to break out of
   the standard boxed/padded page frame above. */
main:has(> .home-hero) {
  margin-top: 0;
  padding: 0;
  width: 100%;
}

/* ====================================================
   Header
   ==================================================== */
.header {
  background: rgba(255, 255, 255, 1);
  border-bottom: 1px solid #eef0f3;
  height: 68px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.color-bar {
  display: flex;
  height: 16px;
  position: sticky;
  top: 68px;
  z-index: 99;
}

/* The footer's copy of the bar is not sticky and sits in normal flow. */
.color-bar--static {
  position: static;
  top: auto;
  z-index: auto;
}

.color-bar-segment {
  flex: 1 1 20%;
}

.color-bar-segment--navy {
  background: #152F50;
}

.color-bar-segment--red {
  background: #c84039;
}

.color-bar-segment--orange {
  background: #f38700;
}

.color-bar-segment--light-green {
  background: #a7b546;
}

.color-bar-segment--dark-green {
  background: #507525;
}

.header .header-inner {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  width: 100%;
}

.logo {
  float: left;
}

.logo a {
  display: inline-block;
  line-height: 68px;
}

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

.logo-text {
  color: #152F50;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  margin-left: 12px;
  vertical-align: middle;
}

.header-actions {
  align-items: center;
  display: flex;
  gap: 12px;
}

.header-btn {
  border-radius: 999px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  transition: background 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.header-btn--ghost {
  background: #f2f4f7;
  color: #152F50;
}

.header-btn--ghost:hover {
  background: #e6e9ee;
  text-decoration: none;
}

.header-btn--solid {
  background: rgba(200, 64, 57, 1);
  color: rgba(255, 255, 255, 1);
}

.header-btn--solid:hover {
  opacity: 0.88;
  text-decoration: none;
}

.header-search {
  align-items: center;
  display: flex;
  gap: 8px;
}

button.header-search-toggle {
  align-items: center;
  background: #f2f4f7;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  color: #152F50;
  cursor: pointer;
  display: flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 34px;
}

button.header-search-toggle:hover {
  background: #e6e9ee;
  box-shadow: none;
}

.header-search-box {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.25s ease, opacity 0.2s ease;
}

.header-search.is-open .header-search-box {
  max-width: 260px;
  opacity: 1;
}

.header-search-box .search {
  display: block;
  float: none;
  line-height: normal;
}

.header-search-box .search:before {
  display: none;
}

.header-search-box .search input[type=search],
.header-search-box .search input[type=text] {
  background: #f2f4f7;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  padding: 8px 16px;
  width: 220px;
}

.language-selector {
  display: inline-block;
}

.user-avatar {
  left: -5px;
  max-height: 20px;
  position: relative;
  top: -1px;
}

button, [role=button], [type=button], [type=submit] {
  background: transparent;
  border: 1px solid #D1D1D1;
  border: 1px solid rgba(0, 0, 0, 0.17);
  border-radius: 2px;
  box-shadow: inset 0 -2px #F6F6F6;
  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.03);
  color: #252525;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: normal;
  height: 33px;
  line-height: 31px;
  padding: 0 10px;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
}

input[type=submit][disabled] {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  /* IE 8 */
  opacity: 0.4;
}

a[role="button"]:hover {
  text-decoration: none;
}

/*
* Dropdown carets
*/
button, [role=button], [type=button], [type=submit],
#user .dropdown-toggle {
  background: #ffffff;
  background: -webkit-linear-gradient(top, white 0%, #f4f4f4 50%, #ededed 100%);
  background: -moz-linear-gradient(top, white 0%, #f4f4f4 50%, #ededed 100%);
  background: -ms-linear-gradient(top, white 0%, #f4f4f4 50%, #ededed 100%);
  background: -o-linear-gradient(top, white 0%, #f4f4f4 50%, #ededed 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(50%, #f4f4f4), color-stop(100%, #ededed));
  background: linear-gradient(to bottom, white 0%, #f4f4f4 50%, #ededed 100%);
  border-radius: 3px;
}

#user .dropdown-toggle:hover,
.comment-form-controls input[type=submit]:hover,
button:hover,
[role=button]:hover,
[type=button]:hover,
[type=submit]:hover {
  border-color: #bbb;
  box-shadow: inset 0 -1px #ccc;
  text-decoration: none;
}

#user .dropdown-toggle:active,
.comment-form-controls input[type=submit]:active,
button:active,
[role=button]:active,
[type=button]:active,
[type=submit]:active {
  background: #eee;
  background: -webkit-linear-gradient(top, whitesmoke 0%, #d5d5d5 100%);
  background: -moz-linear-gradient(top, whitesmoke 0%, #d5d5d5 100%);
  background: -ms-linear-gradient(top, whitesmoke 0%, #d5d5d5 100%);
  background: -o-linear-gradient(top, whitesmoke 0%, #d5d5d5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, whitesmoke), color-stop(100%, #d5d5d5));
  background: linear-gradient(to bottom, whitesmoke 0%, #d5d5d5 100%);
  border-color: #DDDDDD;
  box-shadow: inset 0 -2px #DDDDDD;
}

.dropdown-toggle {
  display: inline-block;
}

.dropdown-toggle:hover {
  text-decoration: none;
}

.dropdown-toggle:after {
  color: #888;
  content: "\25BE";
  font-family: "entypo";
  font-size: 14px;
  margin-left: 5px;
  padding-right: 2px;
}

.section-subscribe .dropdown-toggle,
.article-subscribe,
.article-unsubscribe {
  background: #fafafa;
  color: #1a74b0;
  border: 0px;
  box-shadow: none;
}

.article-subscribe:hover,
.article-unsubscribe:hover {
  box-shadow: none;
}

.topic-follow [role=button], .post-follow [role=button] {
  padding: 0 10px !important;
}

/* ====================================================
   Home
   ==================================================== */
.hero-unit {
  padding: 25px 60px 70px 60px;
}

.help-center-name {
  font-size: 35px;
}

/* ====================================================
   Search
   ==================================================== */
.search {
  display: block;
  float: right;
  line-height: 96px;
  position: relative;
}

.search:before {
  content: "\1F50D";
  font-family: "entypo";
  font-size: 25px;
  right: 18px;
  line-height: 30px;
  position: absolute;
  top: 40%;
}

.search input[type=search] {
  border-radius: 20px;
  font-size: 18px;
  padding: 6px 45px 6px 20px;
  width: 450px;
}

.search input[type=text] {
  border-radius: 20px;
  font-size: 18px;
  padding: 6px 45px 6px 20px;
  width: 450px;
}

.search input[type=submit] {
  display: none;
}

/* ====================================================
   Navigation pages: Home, Category and Section
   ==================================================== */
.knowledge-base h1 {
  letter-spacing: 1px;
  margin-bottom: 10px;
  margin-top: 36px;
  color: #666;
  font-family: Merriweather;
  font-size: 20px;
  font-style: normal;
}

.knowledge-base:after {
  content: ".";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

.community h4 {
  float: right;
  margin: 0;
}

.trending-questions + h4 {
  margin-top: 65px;
}

.community,
.subtle-wrap,
.article-sidebar section {
  background: #fafafa;
  overflow: hidden;
  padding: 20px 30px 30px;
  margin-top: 25px;
}

.subtle-wrap {
  margin-top: 15px;
}

.community h2 {
  border-bottom: 1px solid #ECECEC;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 16px;
  margin-bottom: 20px;
  margin-top: 0;
  padding-bottom: 12px;
  text-transform: uppercase;
}

.community h2 a {
  font-size: 12px;
  margin-left: 5px;
}

.community h4 a {
  font-size: 11px;
  font-weight: normal;
  margin-left: 5px;
}

.category-hub {
  padding-top: 8px;
}

.category-hub-heading {
  color: #152F50;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 12px;
}

.section-tree {
  margin-top: 12px;
}

.section-tree .section {
  border-bottom: 1px solid #e6e9ee;
  display: block;
  padding: 28px 0;
}

.section-tree .section:last-child {
  border-bottom: none;
}

.section-tree h3 {
  align-items: center;
  display: flex;
  font-size: 24px;
  gap: 10px;
  line-height: 1.3;
  margin: 0 0 14px;
}

.section-tree h3:before {
  background: rgba(200, 64, 57, 1);
  border-radius: 50%;
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: 12px;
  width: 12px;
}

.section-tree .section:nth-child(4n+2) h3:before {
  background: #f38700;
}

.section-tree .section:nth-child(4n+3) h3:before {
  background: #a7b546;
}

.section-tree .section:nth-child(4n+4) h3:before {
  background: #507525;
}

.section-tree ul, ul.article-list {
  column-count: 2;
  column-gap: 48px;
  font-size: 14px;
  list-style: disc;
  list-style-position: outside;
  padding-left: 20px;
}

.knowledge-base h4:before, .community h4:before {
  color: rgba(80, 117, 37, 1);
  font-family: "entypo";
  font-size: 20px;
  margin-right: 10px;
  vertical-align: middle;
}

.article-list li {
  break-inside: avoid;
  line-height: 1.5;
  margin-bottom: 10px;
  padding-right: 20px;
}

.community li {
  line-height: 28px;
  margin-bottom: 0;
  padding-right: 30px;
}

.category-list li {
  width: 296px;
  height: 203px;
  background: #507525;
  display: block;
  margin-bottom: 25px;
  margin-right: 25px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  float: left;
  font-weight: normal;
  font-style: normal;
}

.category-list li:nth-child(3n) {
  margin-right: 0;
}

.category-list li a {
  border-bottom: 3px solid rgba(255, 255, 255, 1);
  margin-top: 65px;
  padding: 11px;
}

.category-list li a:hover {
  text-decoration: none;
}

.section h3 a {
  color: #152F50;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 700;
}

.section h3 a:hover {
  color: rgba(200, 64, 57, 1);
}

.article-promoted span {
  cursor: default;
  margin-right: 5px;
  position: relative;
}

.article-promoted span:before,
.article-promoted span:after {
  display: none;
  position: absolute;
}

.article-promoted span:hover:before,
.article-promoted span:hover:after {
  display: block;
}

.article-promoted span:before {
  background: #222;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 4px;
  color: #FFF;
  content: attr(data-title);
  left: -10px;
  margin-top: 5px;
  padding: 3px 10px;
  top: 100%;
  white-space: nowrap;
  z-index: 1;
}

.article-promoted span:after {
  border-bottom: 5px solid #222;
  border-bottom: 5px solid rgba(0, 0, 0, 0.85);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: -5px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -5px;
  width: 0;
}

.see-all-articles {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

.see-all-articles:after {
  content: " \2192";
}

.category-description {
  color: #555;
  font-size: 17px;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 8px;
  max-width: 700px;
}

.section-description {
  color: #666;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 14px;
}

.section-subscribe, .section-unsubscribe {
  float: right;
  margin-top: 5px;
}

.category-list a, .section-list a {
  color: inherit;
  display: inline-block;
  font-size: 18px;
  margin-bottom: 10px;
}

/* ====================================================
   Article
   ==================================================== */
.article-header h1 {
  text-transform: capitalize;
}

.article-author {
  font-weight: bold;
}

.article-metadata {
  float: left;
  padding-left: 55px;
  position: relative;
}

.article-avatar {
  left: 0;
  position: absolute;
  top: 0;
}

.article-avatar img {
  max-height: 38px;
  max-width: 38px;
}

.article-updated {
  color: #8E8E8E;
  font-size: 12px;
  margin-top: 5px;
}

.article-subscribe, .article-unsubscribe {
  float: right;
}

.article-sidebar {
  margin-top: -4px;
}

.article-sidebar h3 {
  border-bottom: 1px solid #ECECEC;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 16px;
  padding-bottom: 15px;
  margin-top: 0;
  text-transform: uppercase;
}

.article-sidebar ul {
  margin-bottom: 60px;
}

.article-body,
.section-area .article-list {
  margin-top: 6px;
}

.article-body {
  font-size: 14px;
  line-height: 30px;
  word-wrap: break-word;
}

.article-body img {
  border: 1px solid #ECECEC;
  border: 1px solid rgba(0, 0, 0, 0.07);
  height: auto;
  max-width: 100%;
  padding: 3px;
}

.article-body pre {
  background: #FBFBFB;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid #ECECEC;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

.article-body blockquote {
  border-left: 1px solid #ECECEC;
  border-left: 1px solid rgba(0, 0, 0, 0.07);
  color: #8E8E8E;
  font-style: italic;
  margin: 20px 0;
  padding-left: 20px;
}

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

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

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

.article-body ol {
  list-style-type: decimal;
}

.article-body li {
  margin-left: 20px;
}

.article-body table {
  table-layout: fixed;
}

.article-footer {
  margin: 50px 0 25px;
}

.article-footer .share {
  float: right;
}

.article-vote {
  float: left;
  position: relative;
}

.article-vote-count {
  position: absolute;
  left: 100%;
  margin-left: 106px;
  top: 4px;
  width: 300px;
}

.article-vote small {
  color: #8E8E8E;
  display: block;
}

.article-vote a:hover {
  text-decoration: none;
}

.article-vote-controls {
  position: absolute;
  right: -85px;
  top: 1px;
}

.article-vote-up, .article-vote-down {
  background: #d5d5d5;
  color: inherit;
  font-family: "entypo";
  border: none;
  border-radius: 50%;
  box-shadow: none;
  line-height: 30px;
  height: 30px;
  width: 30px;
  padding: 0 10px;
}

.article-vote-up:before {
  color: #fafafa;
  content: "\1f44d";
}

.article-vote-down:before {
  color: #fafafa;
  content: "\1f44e";
}

.article-voted {
  box-shadow: inset 1px 1px 5px #666;
  opacity: 1;
}

.article-vote-up.article-voted {
  box-shadow: inset 1px 1px 5px #526F00;
  background-color: #6B9100 !important;
}

.article-vote-down.article-voted {
  box-shadow: inset 1px 1px 5px #99260E;
  background-color: #b7391e !important;
}

.article-more-questions {
  margin-bottom: 30px;
}

.article-comments {
  margin-top: 50px;
}

.article-comments .subtle-wrap {
  padding: 30px 30px 5px;
}

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

/* ====================================================
Forms
==================================================== */
label {
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
}

input[type=checkbox] + label {
  display: inline-block;
  margin-left: 5px;
}

input, textarea {
  border: 1px solid #DBDBDB;
  border: 1px solid rgba(0, 0, 0, 0.13);
  outline: none;
  padding: 10px;
  vertical-align: middle;
}

textarea {
  height: 100px;
  padding: 7px 10px;
  resize: vertical;
}

textarea, input[type=text] {
  width: 100%;
}

input, textarea, select {
  color: #252525;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* ====================================================
   Comments - Used in the Article page and Request page
   ==================================================== */
.comment, .comment-form {
  position: relative;
  padding-bottom: 40px;
  overflow: hidden;
}

.comment-avatar img {
  border-radius: 3px;
  max-width: 70px;
  max-height: 70px;
}

/*
 * Column size
 */
.main-column {
  float: left;
  width: 618px;
}

.side-column {
  float: right;
  width: 298px;
}

.visibility-internal-icon:before {
  content: "\1F512";
  display: inline-block;
  font-family: "entypo";
  text-align: center;
  width: 13px;
}

.article-promoted span, .visibility-internal {
  cursor: default;
  position: relative;
}
.article-promoted span:before, .article-promoted span:after, .visibility-internal:before, .visibility-internal:after {
  display: none;
  font-size: 13px;
  font-weight: normal;
  position: absolute;
}
.article-promoted span:before, .visibility-internal:before {
  background: #222;
  border-radius: 3px;
  color: #FFF;
  content: attr(data-title);
  font-family: Roboto;
  left: -10px;
  margin-top: 5px;
  padding: 3px 10px;
  text-transform: none;
  top: 100%;
  white-space: nowrap;
  z-index: 1;
}
.article-promoted span:after, .visibility-internal:after {
  border-bottom: 5px solid #222;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: -5px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -5px;
  width: 0;
}
.article-promoted span:hover:before, .article-promoted span:hover:after, .visibility-internal:hover:before, .visibility-internal:hover:after {
  display: block;
}

/* Comments - Article, Request and Post pages */
.comment-list {
  margin-bottom: 25px;
}
.comment-list > * {
  border-bottom: 1px solid #eeeeee;
  padding: 25px 0;
}
.comment-list > *:first-child {
  border-top: 1px solid #eeeeee;
}

.comment-sorter {
  float: right;
}
.comment-sorter a {
  color: #999;
  text-decoration: none;
  padding-left: 20px;
}

.comment-sorter [aria-selected=true] {
  font-weight: bold;
  color: #333;
}

.comment, .comment-form {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.comment > *, .comment-form > * {
  display: table-cell;
  vertical-align: top;
}

.comment-vote, .comment-bookmark {
  text-align: center;
  width: 50px;
}

.comment-bookmark:before {
  color: #77a500;
  content: "\1F516";
  font-family: "entypo";
  font-size: 23px;
  line-height: 1.1;
}

.comment-avatar {
  position: relative;
  width: 85px;
}
.comment-avatar img {
  border-radius: 3px;
  width: 65px;
  height: 65px;
}

.comment-avatar-agent:after {
  background-color: transparent;
  background-image: url("/hc/theming_assets/01KYA8MA8K7TWV3NKGQ8ES6HM3");
  background-image: url("/hc/theming_assets/01KZBXJWRYY7A7RD91DTE782RE");
  background-repeat: no-repeat;
  background-size: 15px;
  content: " ";
  height: 15px;
  left: 55px;
  position: absolute;
  top: 55px;
  width: 15px;
}
[dir=rtl] .comment-avatar-agent:after {
  left: auto;
  right: 55px;
}

.comment-header {
  margin-bottom: 15px;
}

.comment-published, .comment-pending, .comment-official {
  border: 1px solid transparent;
  float: right;
  font-size: 11px;
  padding: 1px 5px;
}
[dir=rtl] .comment-published, [dir=rtl] .comment-pending, [dir=rtl] .comment-official {
  float: left;
}

.comment-published {
  color: #bebebe;
}
.comment-published:before {
  content: " ";
  display: inline-block;
  width: 5px;
}

.comment-pending, .comment-official {
  border-color: currentcolor;
  border-radius: 2px;
}

.comment-pending {
  color: #eec100;
}

.comment-official {
  color: #77a500;
}

.comment-form textarea {
  border-radius: 2px 2px 0 0;
  border-width: 1px;
}

.comment-attachments {
  border: 1px solid #dddddd;
  margin-top: -1px;
  padding: 10px;
}

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

.comment-form-controls input[type=submit] {
  margin-left: 15px;
}
[dir=rtl] .comment-form-controls input[type=submit] {
  margin-left: 0;
  margin-right: 15px;
}

.comment-screencasts, .comment-mark-as-solved {
  display: inline-block;
  margin-right: 20px;
  vertical-align: middle;
}
[dir=rtl] .comment-screencasts, [dir=rtl] .comment-mark-as-solved {
  margin-left: 20px;
}

.comment-actions {
  float: right;
  color: #999999;
}

.comment-actions .dropdown-toggle:before {
  content: "\2699";
  font-size: 11px;
  font-family: "entypo";
}

.attachment-list, .screencast-list {
  font-size: 11px;
  margin-top: 25px;
}
.attachment-list span, .screencast-list span {
  color: #999999;
}
.attachment-list li, .screencast-list li {
  margin-bottom: 10px;
}
.attachment-list li:before, .screencast-list li:before {
  background: #f9f9f9;
  border-radius: 3px;
  color: #bbb;
  font-family: "entypo";
  margin-right: 5px;
  padding: 5px;
}

.attachment-list li:before {
  content: "\1F4CE";
}

.screencast-list li:before {
  content: "\1F4BB";
}

.my-activities-header {
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 25px;
  padding: 25px 0;
}
.my-activities-header .breadcrumbs li {
  color: black;
  font-size: 20px;
  font-weight: normal;
}
.my-activities-header .breadcrumbs li:first-child, .my-activities-header .breadcrumbs li:before {
  display: none;
}

.my-activities-nav {
  margin-bottom: 100px;
}

.my-activities-sub-nav {
  margin-bottom: 15px;
}

.request-table-toolbar {
  background: #f9f9f9;
  display: table;
  padding: 8px;
  width: 100%;
}

.request-table-filters {
  display: table-cell;
  text-align: right;
}
[dir="rtl"] .request-table-filters {
  text-align: left;
}
.request-table-filters label:before {
  content: " ";
  width: 25px;
  display: inline-block;
}

.requests-search {
  border-radius: 20px;
  outline: none;
  padding: 6px 15px;
}

.request-id {
  color: #bebebe;
}

.request-details {
  background: #f9f9f9;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  font-size: 12px;
  margin: 0 0 30px;
  padding: 15px 20px;
}

.request-details dt ~ dt {
  font-weight: bold;
  margin-top: 15px;
}

.request-details dd {
  margin: 2px 0 0;
  word-wrap: break-word;
}

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

.request-details dd li {
  list-style-type: disc;
  list-style-position: inside;
  margin: 0 0 3px 0;
}

.request-details .nested-field-tag:before {
  content: " > ";
}
.request-details .nested-field-tag:first-child:before {
  content: "";
}

.request-status {
  color: #FFF;
  border-radius: 3px;
}

.request-open {
  background: #59BBE0;
}

.request-answered {
  background: #F5CA00;
}

.request-solved {
  background: #828282;
}

/* Community heading */
.community-heading {
  font-size: 18px;
  margin: 0;
  width: 100%;
}

/* Community nav */
.community-nav {
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 55px;
  padding: 25px 0;
}

.community-nav li {
  display: inline-block;
  font-weight: bold;
  padding-right: 30px;
}

.community-nav li a {
  font-weight: normal;
}

.community-nav li + li {
  border-left: 1px #eeeeee;
  padding-left: 30px;
}

.community-nav li:last-child {
  border: 0;
  float: right;
  margin: 0;
  padding: 0;
  position: relative;
  top: -5px;
}
[dir=rtl] .community-nav li:last-child {
  float: left;
}

.community-nav li:last-child a {
  color: rgba(200, 64, 57, 1);
}

.community-nav li:last-child a:before {
  content: "\270E";
  font-family: "entypo";
  font-size: 14px;
  margin-right: 10px;
  vertical-align: middle;
}
[dir=rtl] .community-nav li:last-child a:before {
  margin-right: 0;
  margin-left: 10px;
}

/* Community sub-nav */
.community-sub-nav {
  border-bottom: 1px solid #eeeeee;
  padding: 15px 0;
  position: relative;
  width: 800px;
}

.community-sub-nav li {
  display: inline-block;
  font-weight: bold;
  padding-right: 15px;
}

.community-sub-nav li a {
  font-weight: normal;
}

.community-sub-nav li + li {
  padding-left: 15px;
}

.community-sub-nav .topic-add {
  position: absolute;
  right: 0;
  top: 10px;
}

/* Topics/questions/answers */
.topic {
  display: inline-block;
  width: 49.5%;
  padding: 20px 30px 20px 0;
  vertical-align: top;
}

.topic-header, .question-header {
  border-bottom: 1px solid #eeeeee;
  display: table;
  padding-bottom: 10px;
}

.topic-header > *, .question-header > * {
  display: table-cell;
  vertical-align: middle;
}

.topic-header .topic-meta, .question-header .question-meta {
  padding: 0 15px;
  white-space: nowrap;
}

.topic-heading, .question-heading, .answer-list-heading {
  font-weight: bold;
  font-size: 13px;
  width: 100%;
}

.topic-heading {
  font-size: 18px;
}

.topic-questions {
  margin-top: 45px;
}

.topic-description {
  word-break: break-word;
}

.question, .answer {
  border-bottom: 1px solid #eeeeee;
  padding: 20px 0;
  position: relative;
}

.question-form .nesty-input {
  max-width: none;
}

.question-avatar, .answer-avatar {
  display: table-cell;
  margin-right: 10px;
  min-width: 50px;
  position: relative;
  vertical-align: top;
}

.question-avatar-agent:after, .answer-avatar-agent:after {
  background-color: transparent;
  background-image: url("/hc/theming_assets/01KYA8MA8K7TWV3NKGQ8ES6HM3");
  background-image: url("/hc/theming_assets/01KZBXJWRYY7A7RD91DTE782RE");
  background-repeat: no-repeat;
  background-size: 14px;
  position: absolute;
  width: 15px;
  height: 15px;
  left: 30px;
  top: 30px;
  content: " ";
}

.question-avatar img, .answer-avatar img {
  border-radius: 3px;
  height: 38px;
  width: 38px;
}

.question-body, .answer-body, .answer-official-body {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}

.question-body .answer-official-body {
  vertical-align: top;
  width: 100%;
}

.question-body p, .answer-body p, .answer-official-body p {
  margin: 0 0 5px;
}

.question-body .question-meta, .answer-body .answer-meta, .answer-official-body .answer-meta {
  float: left;
}

.question .answer {
  border: none;
  padding-bottom: 0;
}

.question-topic-list {
  margin: -20px 0 30px;
}

.question-topic-list li {
  display: inline-block;
  margin: 10px 10px 0 0;
}

.question-topic-list a {
  background: #f6f6f6;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  color: #cccccc;
  display: inline-block;
  font-size: 11px;
  padding: 7px 15px;
}

.question-title, .topic-title {
  margin: -3px 0 5px;
  font-size: 15px;
}

.question-title a, .topic-title a {
  font-weight: lighter;
}

.question-meta, .answer-meta, .topic-meta {
  color: #cccccc;
  font-size: 11px;
}

.topic-meta span + span:before, .question-meta span + span:before, .answer-meta span + span:before {
  content: "\2022";
  font-size: 10px;
  margin: 0 10px;
}

.answer-form {
  margin: 30px 0 0 95px;
}

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

.answer-form-controls input[type=submit] {
  margin-left: 15px;
}

.answer-form-controls .pull-left {
  float: left;
}

.answer-official-heading {
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  margin: 0 0 20px;
  border-bottom: 0px;
}

.answer-list-heading {
  border-bottom: 1px solid #eeeeee;
  margin-top: 30px;
  padding-bottom: 20px;
}

.pending-moderation-answer-badge {
  clear: both;
  border-style: solid;
  border-width: 1px;
  border-color: #c7aa2b;
  color: #c7aa2b;
  padding: 3px 5px;
  float: left;
  margin-top: 10px;
  font-size: 12px;
}

.question-share, .answer-share {
  position: relative;
}

.related-questions-header {
  border-bottom: 1px solid #eeeeee;
}

.related-questions-heading {
  margin-top: 3px;
}

.related-questions li {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Vote */
.vote {
  display: table-cell;
  margin-left: 15px;
  margin-right: 10px;
  min-width: 95px;
  vertical-align: top;
}

.vote-sum, .vote-controls {
  display: inline-block;
  vertical-align: middle;
}

.vote-sum {
  font-size: 15px;
  font-weight: bold;
  min-width: 60px;
  padding-left: 10px;
  text-align: center;
}

.vote-controls {
  border-radius: 5px;
}

.vote-controls a {
  background: #FFF;
  border-color: #f6f6f6;
  box-shadow: none;
  color: #bebebe;
  display: block;
  font-family: "entypo";
  font-size: 13px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
}

.vote-up {
  border-radius: 5px 5px 0 0;
}

.vote-down {
  border-radius: 0 0 5px 5px;
  border-top: 0;
}

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

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

.vote-controls:hover {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.vote-controls:hover a {
  background: #FFF;
  border-color: #A6A6A6;
  color: #BBB;
}

.vote-controls a:hover, .vote-controls [aria-selected=true] {
  background: #f6f6f6;
  color: #333;
}

.vote-controls a:active {
  background: #CCC;
  color: #111;
}

/* Accept */
.answer-accept {
  color: #BBB;
  font-size: 15px;
  max-width: 15px;
  overflow: hidden;
  padding-top: 7px;
  position: absolute;
  white-space: nowrap;
}

.answer-accept:hover {
  text-decoration: none;
}

.answer-accept:before {
  content: "\2713";
  font-family: "entypo";
  margin-right: 5px;
}

.answer-accepted .answer-accept, .answer-accepted .vote-sum {
  color: green;
}

/* Admin controls */
.topic-controls, .question-controls, .answer-controls {
  float: right;
  font-size: 11px;
}

.topic-edit:before, .question-delete:before, .question-mark-as-spam:before, .answer-delete:before, .answer-mark-as-spam:before {
  color: #cccccc;
  content: "\2022";
  font-size: 10px;
  margin-left: -16px;
  margin: 0 8px;
  pointer-events: none;
  position: relative;
  display: inline-block;
}

/* Share questions and answers */
.share-label {
  cursor: pointer;
}

.share-label + .share {
  background: #FFF;
  border: 1px solid #dddddd;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  left: 50%;
  line-height: 70px;
  margin: 10px 0 0 -75px;
  position: absolute;
  text-align: center;
  top: 100%;
  white-space: nowrap;
  width: 175px;
  z-index: 1;
}

.share-label + .share:before, .share-label + .share:after {
  content: "";
  display: inline-block;
  left: 50%;
  position: absolute;
}

.share-label + .share:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #cccccc;
  border-left: 7px solid transparent;
  margin-left: -6px;
}

.share-label + .share:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #FFF;
  border-left: 6px solid transparent;
  margin-left: -5px;
}

.share-label[aria-selected="true"] {
  color: #111;
}

.share-label[aria-selected="true"] + .share {
  display: block;
}

.share-label[aria-selected="false"] + .share {
  display: none;
}

body.community-enabled .search-results-column {
  display: inline-block;
  vertical-align: top;
  width: 450px;
}
body.community-enabled .search-results-column + .search-results-column {
  margin-left: 35px;
}
[dir=rtl] body.community-enabled .search-results-column + .search-results-column {
  margin-left: 0;
  margin-right: 35px;
}

.search-results-subheading {
  padding-bottom: 10px;
  margin-bottom: 0;
}

.search-results-subheading-link {
  font-size: 13px;
  font-weight: normal;
  margin-left: 5px;
}

.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > * {
  border-bottom: 1px solid #eeeeee;
  padding: 20px 0;
}
.search-results-list > *:first-child {
  border-top: 1px solid #eeeeee;
}

.search-result-link {
  font-size: 16px;
}

.search-result-description, .search-result-meta {
  padding-top: 16px;
}

.search-result-meta-name, .search-result-meta-time, .search-result-meta-count {
  font-size: 12px;
  color: #bebebe;
}

.search-result-meta-time:before, .search-result-meta-count:before {
  display: inline-block;
  padding-right: 5px;
  content: '\2022';
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.search-result-votes {
  background: #A8D119;
  border-radius: 2px;
  color: #FFF;
  display: inline-block;
  line-height: 1;
  margin-left: 5px;
  padding: 4px 5px;
  position: relative;
  top: -2px;
}
.search-result-votes:before {
  content: "\1F44D";
  font-family: "entypo";
  margin-right: 3px;
}

.chat {
  background: #f6f6f6;
  border: 1px solid #E0E0E0;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  bottom: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-size: 13px;
  line-height: 35px;
  padding: 0 15px;
  position: fixed;
  right: 85px;
  -webkit-transition: bottom .5s ease-in, color .5s ease-in;
  -moz-transition: bottom .5s ease-in, color .5s ease-in;
  -ms-transition: bottom .5s ease-in, color .5s ease-in;
  -o-transition: bottom .5s ease-in, color .5s ease-in;
  transition: bottom .5s ease-in, color .5s ease-in;
}

.chat:before {
  content: "\E720";
  font-family: "entypo";
  font-size: 16px;
  margin-right: 10px;
  vertical-align: middle;
}

.chat:hover {
  text-decoration: none;
}

.chat-available {
  bottom: 0;
}

.chat-unavailable {
  color: gray;
  cursor: default !important;
  bottom: -50px;
}

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

.error-page h1 {
  font-size: 52px;
  margin-bottom: 0;
}

.error-page h2 {
  font-size: 16px;
  margin-bottom: 5px;
}

.error-page > a {
  display: block;
  margin-top: 25px;
}

.recent-activity {
  background: #f9f9f9;
  border-radius: 5px;
  padding: 25px 20px;
  width: 270px;
}

.recent-activity-header {
  margin-top: 0;
  font-size: 15px;
}

.recent-activity-item ~ .recent-activity-item {
  margin-top: 15px;
}

.recent-activity-item-parent {
  color: #152F50;
  font-size: 12px;
  text-decoration: none;
  display: block;
}
.recent-activity-item-parent:hover {
  text-decoration: underline;
}

.recent-activity-item-link {
  display: block;
}

.recent-activity-item-meta {
  font-size: 12px;
  color: #999999;
}

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

.recent-activity-item-comment {
  display: none;
}
.recent-activity-item-comment:before {
  display: inline-block;
  content: "\2022";
}
.recent-activity-item-comment span:before {
  font-family: "entypo";
  content: "\00a0\00a0\e718";
  display: inline-block;
  vertical-align: middle;
  padding-right: 3px;
}

[data-recent-activity-action="article_comment_added"] .recent-activity-item-comment,
[data-recent-activity-action="post_comment_added"] .recent-activity-item-comment,
[data-recent-activity-action="answer_added"] .recent-activity-item-comment {
  display: inline-block;
}

.recent-activity-controls,
.recent-activity-loader {
  padding-top: 20px;
  font-size: 12px;
}

.recent-activity-loader {
  display: inline-block;
  position: relative;
}
.recent-activity-loader:before {
  display: block;
  position: absolute;
  content: "\0020";
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f9f9f9 50%, rgba(255, 255, 255, 0) 100%);
  animation: recent-activity-loader 0.5s infinite;
  -webkit-animation: recent-activity-loader 0.5s infinite;
}

@keyframes recent-activity-loader {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}
@-webkit-keyframes recent-activity-loader {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

nav.sub-nav.clearfix {
    width: 940px;
    margin-left: auto;
    margin-right: auto;
}

/*Filter styles*/
.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}



/* Hide community section on homepage */
.community {
    display: none;
}

/* Reposition Powered by Zendesk to bottom right, matching the footer bar.
   Doubled-up class selector + !important on every property: this is a
   required Zendesk-injected badge with its own system styling we can't
   inspect directly, so we brute-force specificity to make sure we win. */
.powered-by-zendesk,
.powered-by-zendesk a {
    color: rgba(255, 255, 255, 1) !important;
}

.powered-by-zendesk.powered-by-zendesk {
    background-color: #152F50 !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: right !important;
    position: static !important;
    bottom: auto !important;
    padding: 10px 20px !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* ====================================================
   Home hero + tiles
   ==================================================== */
.home-hero {
  background-color: #152F50;
  overflow: hidden;
  padding: 80px 20px 110px;
  position: relative;
  text-align: center;
}

/* The search field carries box-shadow: 0 10px 30px, so it occupies 40px more
   than its box. The tiles pull up 70px into a 110px bottom padding, which left
   exactly 40px — so the cards landed right on the shadow and read as covering
   the field. More padding here, less pull below, giving 80px of real gap. */
.home-hero {
  padding-bottom: 130px;
}

.home-hero-wave {
  bottom: -1px;
  display: block;
  height: 90px;
  left: 0;
  position: absolute;
  width: 100%;
}

.home-hero-inner {
  margin: 0 auto;
  max-width: 980px;
  position: relative;
}

.home-hero-heading {
  color: rgba(255, 255, 255, 1);
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
}

.home-hero-subheading {
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  margin: 0 auto;
  max-width: 620px;
  opacity: 0.85;
}

.home-hero-search {
  margin: 32px auto 0;
  max-width: 560px;
}

.home-hero-search .search {
  display: block;
  float: none;
  line-height: normal;
  position: relative;
}

.home-hero-search .search:before {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.home-hero-search .search input[type=search],
.home-hero-search .search input[type=text] {
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 16px;
  padding: 16px 54px 16px 24px;
  width: 100%;
}

.home-tiles-section {
  background: rgba(255, 255, 255, 1);
  padding: 0 20px 60px;
}

.home-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin: -70px auto 0;
  max-width: 980px;
  position: relative;
}

.home-tile {
  background: rgba(255, 255, 255, 1);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(21, 47, 80, 0.12);
  color: #152F50;
  display: block;
  flex: 1 1 260px;
  max-width: 300px;
  padding: 36px 26px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-tile:hover {
  box-shadow: 0 20px 40px rgba(21, 47, 80, 0.18);
  text-decoration: none;
  transform: translateY(-6px);
}

.home-tile-icon-wrap {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 88px;
  justify-content: center;
  margin: 0 auto 22px;
  width: 88px;
}

.home-tile--kb .home-tile-icon-wrap {
  background: rgba(21, 47, 80, 0.08);
}

.home-tile--news .home-tile-icon-wrap {
  background: rgba(200, 64, 57, 0.08);
}

.home-tile--students .home-tile-icon-wrap {
  background: rgba(80, 117, 37, 0.10);
}

.home-tile-icon {
  height: 52px;
  width: 52px;
}

.home-tile-title {
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
}

.home-tile-text {
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* ====================================================
   Home: Promoted articles
   ==================================================== */
.home-promoted {
  padding: 50px 20px;
}

.home-promoted-inner {
  margin: 0 auto;
  max-width: 980px;
}

.home-section-heading {
  color: #152F50;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px;
  text-align: center;
}

.home-promoted-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.home-promoted-item {
  background: #fafafa;
  border-radius: 6px;
  flex: 1 1 280px;
  max-width: 320px;
  padding: 20px;
}

.home-promoted-title {
  color: #152F50;
  display: block;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.home-promoted-title:hover {
  color: rgba(200, 64, 57, 1);
}

.home-promoted-excerpt {
  color: #666;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* ====================================================
   Gateway pages (Release Notes)
   ==================================================== */
.gateway-page {
  padding: 10px 0 40px;
}

.gateway-heading {
  font-size: 28px;
  margin-bottom: 8px;
}

.gateway-subheading {
  color: #555;
  font-size: 16px;
  margin-bottom: 36px;
  max-width: 700px;
}

/* Release notes: the category page only forwards to the What's New article
   (category_page.hbs); this is the one line a reader sees while it does. */
.release-notes-forward {
  color: #555;
  font-size: 16px;
}

/* ====================================================
   Footer
   ==================================================== */
.footer {
  background-color: #152F50;
  margin-top: 40px;
  padding: 18px 20px;
}

.footer-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 980px;
}

.footer-logo img {
  max-height: 28px;
}

.footer-copyright {
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  margin: 0;
  opacity: 0.7;
  width: 100%;
  text-align: center;
}

@media (max-width: 1020px) {
  .footer-inner {
    width: 100%;
  }
}

/* ======================================================================
   DualEnroll Help Center — modernization layer
   ----------------------------------------------------------------------
   Appended after the stock Copenhagen rules, so it wins on source order
   rather than by specificity wars. Read in this order:

     1  Tokens            one place to change colour and frame
     2  Page frame        header, main and footer share one measure
     3  Typography        base scale; components still set their own
    3b  Type floor        nothing below 14px; a baseline, so it sits early
     4  Links             off the brand red, onto a navy tint
     5  Breadcrumbs       every template
     6  Article page      scoped to .article-layout
    6b  Page hero         article band + the "Dot" brand element
     7  Home page         consistency pass; already redesigned
     8  Category page
     9  Section page
    10  Search results
    11  Header + footer   including the mobile breakage
    12  Responsive        the stock theme has essentially none

   Anything hardcoded as rgba(21, 47, 80, x) is #152F50 with alpha, which
   a custom property cannot express while #152F50 stays an admin setting.
   ====================================================================== */


/* ======================================================================
   1. Tokens
   ====================================================================== */

:root {
  /* One content measure for the whole help center. 1200px with 40px
     gutters leaves a 760px reading column beside a 288px rail — wide
     enough to stop looking pinched, narrow enough to stay readable. */
  --de-frame: 1200px;
  --de-gutter: 40px;

  /* Reading measure. 16px over 620px puts Roboto at roughly 75 characters a
     line, inside the 45-75 that keeps the eye from losing its place on the
     return sweep. Drives both the article grid column and the caps on the
     header and content block, so the two cannot drift apart. */
  --de-measure: 620px;

  /* Sticky header (68px) plus the brand colour bar (16px), and 24px of
     breathing room. Anything that has to clear the chrome reads this: the
     article rail's sticky offset and the scroll-margin on headings. script.js
     carries the same number for the contents list's active state — keep them
     together if the bar's height changes. */
  --de-sticky-offset: 108px;

  /* Rail width and the gap beside it, as tokens so the width of the whole
     two-column block is derived rather than restated. */
  --de-rail: 288px;
  --de-rail-gap: 48px;
  --de-article-block: calc(var(--de-measure) + var(--de-rail-gap) + var(--de-rail));

  /* KNOWN, DELIBERATE DEVIATION FROM THE BRAND GUIDELINES.
     The guide states the brand Blue is "to be used on Navy backgrounds
     only", so by the letter of it no blue belongs on a white page. Owner
     decision, taken with that in mind: links are the brand Blue on white,
     because navy links were too easily missed inside navy body copy — an
     underline alone was not enough to mark them mid-sentence. Do not
     "correct" this back to navy without checking first.

     The value is the guide's own Blue, unaltered, rather than a tint
     invented to sit near it. Hover darkens to the brand Navy, which the
     guide does sanction on light backgrounds, so the deviation is confined
     to a single colour rather than spreading to a second.

       --de-link        #23428f (brand Blue)   9.4:1 on white (AAA)
       --de-link-hover  #152F50 (#152f50)    13.5:1 on white

     Red is no longer a link colour at all; it now means action (the header
     CTA) and error (the callout) only. */
  --de-link: #23428f;
  --de-link-hover: #152F50;

  --de-ink-soft: #48586c;

  /* Secondary text. #6b7a90 measured 4.37:1 on white — under the 4.5:1 AA
     minimum for normal text, and it carries the breadcrumb trail, the
     contents list, search result meta, section descriptions and every empty
     state, so it was the single biggest accessibility gap in the theme.
     #54637a is the same hue at 6.1:1, still clearly secondary against body
     copy at 13.5:1. */
  --de-muted: #54637a;
  --de-rule: rgba(21, 47, 80, 0.10);
  --de-surface: #f5f7fa;
  --de-surface-hover: #eef2f7;
}


/* ======================================================================
   2. Page frame
   ====================================================================== */

/* Was a fixed 980px box with no breakpoints. */
main {
  width: 100%;
  max-width: var(--de-frame);
  margin: 32px auto 0;
  padding: 0 var(--de-gutter);
}

/* Home and category pages lead with a full-bleed hero, so they release
   the frame. max-width has to go too, or the cap above would box the hero
   back in; the inner containers put the content back on the measure. */
main:has(> .home-hero),
main:has(> .page-hero) {
  max-width: none;
  margin-top: 0;
  padding: 0;
}

/* The header spans the screen: wordmark hard left, CTA hard right, held off
   the edge by the page gutter. It deliberately does not track the content
   frame — with the article's columns centred on a narrower block there is no
   single edge for it to align to, so edge-to-edge reads as intent rather
   than as a near-miss. */
.header .header-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--de-gutter);
}

/* The footer was pinned at 980px while the content beside it sat elsewhere;
   it tracks the frame. Its contents are centred, so this governs little more
   than where the copyright line can wrap. */
.footer-inner {
  width: 100%;
  max-width: var(--de-frame);
  margin: 0 auto;
  padding: 0 var(--de-gutter);
}

/* A late stock rule pins every breadcrumb bar to a hardcoded 940px and
   centres it, which sits off-axis inside any other frame. */
nav.sub-nav.clearfix {
  width: 100%;
  margin: 0 0 16px;
}


/* ======================================================================
   3. Typography
   ====================================================================== */

/* 14px base was the root of "everything looks small". Components that
   set their own size are unaffected; this lifts the ones that never did. */
body {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* h1 shipped as font-size 1.75em with line-height 1.75em — a leading of
   nearly two full lines, which reads as a mistake on any heading that
   wraps. A real scale instead. */
/* Brand typography: Headline is Roboto Black, Subheading is Bold. The
   stock theme sets 700 for every heading level. */
h1 {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 24px;
  line-height: 1.3;
}

h3 {
  font-size: 20px;
  line-height: 1.35;
}


/* --- Type floor -------------------------------------------------------
   Nothing renders below 14px. These are stock rules that still appear on the
   reader path and shipped smaller; overridden here rather than edited in
   place, so the stock block stays the untouched baseline.

   Placed here, before any component, on purpose. It lived at the end of the
   layer and flattened deliberate larger sizes: [type=button] is an attribute
   selector at specificity (0,1,0), which ties with a class like
   .header-nav-toggle and wins on source order, so a 15px control silently
   rendered at 14px. A floor belongs early — components raise from it.

   Not covered, deliberately: the community, question, comment and request
   templates carry their own sub-14px rules (down to 8px on a meta separator).
   Those pages are outside the reader path this theme work scoped, and are
   otherwise untouched — worth a pass of their own if they matter. */
.header-btn {
  font-size: 14px;
}

.header-search-box .search input[type=search],
.header-search-box .search input[type=text] {
  font-size: 14px;
}

.pagination a,
.pagination span {
  font-size: 14px;
}

button,
[role=button],
[type=button],
[type=submit] {
  font-size: 14px;
}

label {
  font-size: 14px;
}

/* Tooltip text on the promoted star and the internal badge. */
.article-promoted span:before,
.article-promoted span:after,
.visibility-internal:before,
.visibility-internal:after {
  font-size: 14px;
}


/* ======================================================================
   4. Links
   ====================================================================== */

a {
  color: var(--de-link);
}

a:hover {
  color: var(--de-link-hover);
}

/* The header CTA keeps the brand red: it is the one place on the page
   where red means "do this", not "this is a link". */
.header-btn--solid {
  background: rgba(200, 64, 57, 1);
  color: rgba(255, 255, 255, 1);
}


/* ======================================================================
   5. Breadcrumbs — all templates
   ====================================================================== */

/* Was 12px in #bebebe (1.5:1 on white — effectively decorative) with a
   bare ASCII ">" butted against the adjacent crumb. */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--de-muted);
}

/* U+203A, a true single angle quote. The ASCII ">" is a maths operator
   and sits at the wrong optical weight and height beside text. */
.breadcrumbs li + li:before {
  content: "\203A";
  margin: 0 10px;
  font-size: 15px;
  line-height: 1;
  /* Was 32% navy, which blends to about 2.1:1. Decorative rather than content,
     but it is still a rendered character, so it goes to the same token as the
     crumbs it separates. */
  color: var(--de-muted);
}

/* The trail is wayfinding, not content: it stays quiet until reached for,
   rather than stacking blue links above every headline. */
.breadcrumbs li a {
  color: var(--de-muted);
  transition: color 0.15s ease;
}

.breadcrumbs li a:hover {
  color: var(--de-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Last crumb is where you actually are — settled darker so the trail
   reads as arriving somewhere. Colour alone carries that: the brand loads
   only 400/700/900, so a 500 here would snap to 400 and do nothing. */
.breadcrumbs li:last-child a {
  color: var(--de-ink-soft);
}


/* ======================================================================
   6. Article page
   ====================================================================== */

.article-layout {
  display: grid;
  /* The column tracks the measure rather than filling the frame: at 760px
     it held 140px of slack the reader read as gap, on top of the gap itself.
     justify-content centres the pair, so the frame's leftover width splits
     evenly either side instead of all falling to the right of the rail. */
  grid-template-columns: minmax(0, var(--de-measure)) var(--de-rail);
  column-gap: var(--de-rail-gap);
  justify-content: center;
  align-items: start;
}

.article-layout > .main-column {
  float: none;
  width: auto;
  grid-column: 1;
}

.article-layout > .side-column {
  float: none;
  width: auto;
  grid-column: 2;
}

/* --- Header ---------------------------------------------------------- */

/* --- Reading measure --------------------------------------------------
   Measured: 16px across the full 760px column runs ~88 characters per line,
   well past the 45-75 that keeps the eye from losing its place on the return
   sweep. 620px brings Roboto to ~75 — the same measure Slack's help center
   uses, where 16px over 620px lands at 57 characters in their wider face.

   The cap belongs on both blocks that hold article content: with it on the
   prose alone, the headline above and the vote footer below overhang the text.
   It is also what keeps the measure once the layout stacks, where the single
   column is 1fr. */
.article-layout .article-header,
.article-layout > .main-column > .subtle-wrap {
  max-width: var(--de-measure);
}

.article-layout .article-header {
  margin-bottom: 28px;
}

/* text-transform: none drops the stock capitalize, which mangles sentence-case
   titles and proper nouns ("DualEnroll" -> "Dualenroll"). */
.article-layout .article-header h1 {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0;
}

/* --- Body ------------------------------------------------------------ */

/* The #fafafa .subtle-wrap card around the body was the main reason the
   page read as dated. Comments keep a card, restyled further down. */
.article-layout .subtle-wrap {
  background: transparent;
  padding: 0;
  margin-top: 0;
  overflow: visible;
}

/* 14px/30px becomes 16px/1.75: the site's base size, and a leading
   expressed as a ratio so it scales with the type rather than being pinned
   at a fixed pixel value. */
.article-layout .article-body {
  font-size: 16px;
  line-height: 1.75;
  margin-top: 0;
}

.article-layout .article-body > *:first-child {
  margin-top: 0;
}

.article-layout .article-body p {
  margin: 0 0 1.3em;
}

/* Fragment navigation has to clear the sticky header. Without this, jumping
   from the contents list (or any in-article anchor) parks the heading behind
   the header and its colour bar — 76px of chrome — so the reader lands on
   the paragraph below the title they picked. 100px matches the offset
   script.js uses to decide which section is current, so the highlight and
   the landing position agree. */
.article-layout .article-body h2,
.article-layout .article-body h3,
.article-layout .article-body [id] {
  scroll-margin-top: var(--de-sticky-offset);
}

/* Generous space above section headings is what gives the page air. The
   hairline underneath breaks a long article into visible sections — with
   180 h2s across the KB and every article carrying four or more, the
   structure is worth drawing. */
.article-layout .article-body h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2.4em 0 0.7em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--de-rule);
}

.article-layout .article-body h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  margin: 2em 0 0.5em;
}

.article-layout .article-body h4,
.article-layout .article-body h5,
.article-layout .article-body h6 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 1.8em 0 0.4em;
}

.article-layout .article-body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(35, 66, 143, 0.4);
  text-underline-offset: 2px;
}

.article-layout .article-body a:hover {
  text-decoration-color: currentColor;
}

/* --- Numbered steps ---------------------------------------------------
   Every one of the 29 ordered lists in the KB sits in a "How do I..."
   article, so ordered always means procedural here and can safely take a
   step treatment: a counter badge per step, on a tinted card. Nested
   ordered lists are excluded — those are sub-points, not steps. */
/* White panel with a hairline, matching the comments card. Deliberately not
   tinted: the callouts are tinted, and a tinted step card next to a tinted
   note made the two read as the same kind of object. White-plus-border means
   container; tint-plus-accent-bar means aside. */
.article-layout .article-body > ol,
.article-layout .article-body ol.steps {
  counter-reset: de-step;
  list-style: none;
  background: #fff;
  border: 1px solid var(--de-rule);
  border-radius: 10px;
  margin: 1.7em 0;
  padding: 22px 26px 22px 24px;
}

.article-layout .article-body > ol > li,
.article-layout .article-body ol.steps > li {
  counter-increment: de-step;
  position: relative;
  list-style: none;
  margin: 0 0 14px;
  padding-left: 40px;
}

.article-layout .article-body > ol > li:last-child,
.article-layout .article-body ol.steps > li:last-child {
  margin-bottom: 0;
}

.article-layout .article-body > ol > li:before,
.article-layout .article-body ol.steps > li:before {
  content: counter(de-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #152F50;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

/* Sub-lists inside a step stay ordinary lists on the card. */
.article-layout .article-body > ol ul,
.article-layout .article-body > ol ol {
  background: none;
  border: 0;
  border-radius: 0;
  padding-left: 1.4em;
  margin: 0.6em 0 0;
}

.article-layout .article-body > ol ol {
  counter-reset: none;
  list-style: lower-alpha;
}

.article-layout .article-body > ol ol > li {
  counter-increment: none;
  padding-left: 0.25em;
  list-style: lower-alpha;
}

.article-layout .article-body > ol ol > li:before {
  content: none;
}

/* list-style-position: inside made wrapped lines run back under the
   bullet. Outside restores a proper hanging indent. */
.article-layout .article-body ul,
.article-layout .article-body ol {
  list-style-position: outside;
  margin: 1.2em 0;
  padding-left: 1.5em;
}

.article-layout .article-body li {
  margin: 0 0 0.6em;
  padding-left: 0.25em;
}

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

.article-layout .article-body li:last-child {
  margin-bottom: 0;
}

/* The stock 3px padded hairline frame reads as 2010s. */
.article-layout .article-body img {
  border: 1px solid var(--de-rule);
  border-radius: 8px;
  padding: 0;
  margin: 1.6em 0;
  box-shadow: 0 1px 3px rgba(21, 47, 80, 0.06);
}

/* table-layout: fixed forced equal columns regardless of content. */
.article-layout .article-body table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 1.7em 0;
  font-size: 15px;
  line-height: 1.6;
}

.article-layout .article-body th,
.article-layout .article-body td {
  border: 1px solid rgba(21, 47, 80, 0.12);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.article-layout .article-body th {
  background: var(--de-surface);
  font-weight: 700;
}

.article-layout .article-body code,
.article-layout .article-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.article-layout .article-body code {
  background: #f2f5f9;
  border-radius: 4px;
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}

.article-layout .article-body pre {
  background: #f7f9fc;
  border: 1px solid var(--de-rule);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 1.7em 0;
  font-size: 14px;
  line-height: 1.6;
}

.article-layout .article-body pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.article-layout .article-body blockquote {
  border-left: 3px solid rgba(21, 47, 80, 0.15);
  color: var(--de-ink-soft);
  font-style: normal;
  margin: 1.7em 0;
  padding: 0.2em 0 0.2em 22px;
}

.article-layout .article-body hr {
  border: 0;
  border-top: 1px solid var(--de-rule);
  margin: 2.4em 0;
}

/* --- Callouts ---------------------------------------------------------
   Article bodies carry 20 of these (11 warning, 7 info, 2 error) as
   <div class="callout callout-*">, and the sync converter writes the
   appearance in as inline styles — including #1a73c2 / #e7f0fb, a blue that
   appears nowhere in the brand palette. Inline styles beat stylesheets, so
   overriding them needs !important; the real fix is for the converter to
   stop emitting them and leave the styling here. Colours below are the
   brand's own: navy for information, orange for caution, red for error. */
/* Soft tint plus a hairline in the callout's own colour, with the type icon
   in a left gutter. !important throughout because the converter's inline
   styles otherwise win: it sets border-left, background, padding, margin and
   border-radius on every one of these.

   The icon is a background image on ::before, positioned absolutely rather
   than laid out with flex: 11 of the 20 callouts hold more than one
   paragraph (one holds three), and flex would set those side by side.

   Icons are inline data URIs so the theme needs no extra assets, with the
   brand colour baked into each — navy, orange and red are fixed per state
   here, not admin-tweakable. Swap the url() for /hc/theming_assets/01KZVW78AQ2P22KN8TGZCX22P5
   and friends once the real Streamline icons land. */
.article-layout .article-body .callout {
  position: relative;
  background: rgba(21, 47, 80, 0.055) !important;
  border: 1px solid rgba(21, 47, 80, 0.28) !important;
  border-radius: 10px !important;
  margin: 1.7em 0 !important;
  padding: 16px 20px 16px 54px !important;
}

.article-layout .article-body .callout:before {
  content: "";
  position: absolute;
  left: 20px;
  top: 19px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  background-image: url("/hc/theming_assets/01KZVW78AQ2P22KN8TGZCX22P5");
}

.article-layout .article-body .callout > *:first-child {
  margin-top: 0;
}

.article-layout .article-body .callout > *:last-child {
  margin-bottom: 0;
}

/* --- Release-note badges ------------------------------------------------
   script.js rewrites each entry's bold "Type · Availability" line into two
   pills (releaseNoteBadges — the vocabulary gate lives there). Tint plus a
   hairline in the badge's own colour, the callout treatment at pill scale.
   Type carries the colour — green for a new feature, the link blue for an
   improvement, orange for a bug fix — and availability stays neutral, so a
   page of entries reads by type at a glance. Text colours hold AA on their
   tints: #42611f 7.2:1, #23428f 9.4:1, #8a4d00 5.6:1, --de-muted 6.1:1,
   all measured against white (the tints are lighter than 5% so the ratio
   moves only in the third decimal). */
.rn-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.rn-badge {
  border-radius: 999px;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 12px;
}

.rn-badge--feature {
  background: rgba(80, 117, 37, 0.10);
  border: 1px solid rgba(80, 117, 37, 0.35);
  color: #42611f;
}

.rn-badge--improvement {
  background: rgba(35, 66, 143, 0.08);
  border: 1px solid rgba(35, 66, 143, 0.30);
  color: #23428f;
}

.rn-badge--bugfix {
  background: rgba(243, 135, 0, 0.12);
  border: 1px solid rgba(243, 135, 0, 0.45);
  color: #8a4d00;
}

.rn-badge--availability {
  background: var(--de-surface);
  border: 1px solid var(--de-rule);
  color: var(--de-muted);
}

/* The two availabilities still in motion carry a colour where the settled
   ones stay neutral: rolling out in the brand light green (text darkened to
   #626b1b, 5.8:1), coming soon in the navy (13.5:1). Both must sit after
   .rn-badge--availability — same specificity, the modifier wins by order. */
.rn-badge--rolling-out {
  background: rgba(167, 181, 70, 0.16);
  border-color: rgba(167, 181, 70, 0.60);
  color: #626b1b;
}

.rn-badge--coming-soon {
  background: rgba(21, 47, 80, 0.06);
  border-color: rgba(21, 47, 80, 0.30);
  color: #152F50;
}

/* The status legend at the head of What's New: each availability pill with
   its meaning. A titleless card in the "Who this is for" vocabulary (white,
   hairline, 10px radius) — it is metadata about the entries, not one of
   them, and the pills are its labels so the rows carry no bullets. The
   markup (div.rn-legend around a ul) lives in the article body. */
.article-layout .article-body .rn-legend {
  background: #fff;
  border: 1px solid var(--de-rule);
  border-radius: 10px;
  margin: 0 0 1.7em;
  padding: 16px 20px;
}

.article-layout .article-body .rn-legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-layout .article-body .rn-legend li {
  margin: 0 0 12px;
}

.article-layout .article-body .rn-legend li:last-child {
  margin-bottom: 0;
}

/* --- "Who this is for" card ---------------------------------------------
   The KB is moving to an audience block at the top of an article, authored as
   a callout-info whose first paragraph is a bold label. Styled as a card
   rather than a note, following Slack's "Who can use this feature?" block —
   measured: transparent, 1px solid #ddd, 6px radius, 16px/18px padding, bold
   heading, then rows. It is metadata about the article, not an aside within
   it, so it takes no tint and no information icon.

   Targeting is by markup shape: a callout-info whose first child is a
   paragraph containing nothing but <strong>. That is unique in the KB today —
   the other seven info callouts open with prose, and every "Warning" label is
   on a callout-warning. It would, though, catch a future info callout that
   happens to open with a bold lead-in. Better would be a class of its own
   from the converter, e.g. callout-audience; worth doing when that side is
   next touched. */
.article-layout .article-body .callout-info:has(> p:first-child > strong:only-child) {
  background: #fff !important;
  border: 1px solid var(--de-rule) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
}

/* No information icon: this is not a note. */
.article-layout .article-body .callout-info:has(> p:first-child > strong:only-child):before {
  content: none;
}

/* Sits at the head of an article, so it should not push down from the title. */
.article-layout .article-body > .callout-info:first-child:has(> p:first-child > strong:only-child) {
  margin-top: 0 !important;
}

.article-layout .article-body .callout-info:has(> p:first-child > strong:only-child) > p:first-child {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.article-layout .article-body .callout-info:has(> p:first-child > strong:only-child) > p:first-child strong {
  color: #152F50;
  font-weight: 700;
}

/* Rows. Each carries an icon in a fixed gutter so the text aligns whatever
   the icon's shape, as Slack's do. */
.article-layout .article-body .callout-info:has(> p:first-child > strong:only-child) > p + p {
  position: relative;
  margin: 10px 0 0;
  padding-left: 27px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--de-ink-soft);
}

.article-layout .article-body .callout-info:has(> p:first-child > strong:only-child) > p + p:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* First row is the audience, later rows are what it depends on — the order the
   KB is authoring them in. A third row would take the key as well, which is
   the safer of the two to repeat. */
.article-layout .article-body .callout-info:has(> p:first-child > strong:only-child) > p:nth-of-type(2):before {
  background-image: url("/hc/theming_assets/01KZVW78FQF5Q5TMTQTEGFE4TZ");
}

.article-layout .article-body .callout-info:has(> p:first-child > strong:only-child) > p:nth-of-type(n+3):before {
  background-image: url("/hc/theming_assets/01KZVW77CDHNCZJEE82WJCKPMX");
}

.article-layout .article-body .callout-warning {
  background: rgba(243, 135, 0, 0.09) !important;
  border-color: rgba(243, 135, 0, 0.42) !important;
}

.article-layout .article-body .callout-warning:before {
  background-image: url("/hc/theming_assets/01KZVW78AAB32TBF3XE87Y4BDY");
}

.article-layout .article-body .callout-error {
  background: rgba(200, 64, 57, 0.07) !important;
  border-color: rgba(200, 64, 57, 0.38) !important;
}

.article-layout .article-body .callout-error:before {
  background-image: url("/hc/theming_assets/01KZVW78D4B18R6FSNPB6QWJ2S");
}


/* --- Was this helpful ------------------------------------------------ */

.article-layout .article-footer {
  margin: 56px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--de-rule);
}

.article-layout .article-vote {
  float: none;
  position: static;
  text-align: center;
}

.article-layout .article-vote-question {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* The stock rules pin these absolutely with hardcoded offsets
   (left: 100% + 106px, right: -85px) tuned to the old fixed-width column;
   in a wider layout they land out in the sidebar. */
.article-layout .article-vote-controls {
  position: static;
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* Worded buttons in place of the stock thumb glyphs, which were "entypo"
   characters set in near-white on light grey.

   The wording lives in CSS because {{vote 'up'}} renders an empty anchor and
   the theme cannot pass it link text; the glyph was always supplied this way.
   The Help Center's own strings are not overridable from translations/ either
   — that file carries manifest labels only. The consequence is real: these
   two labels will not follow the reader's locale the way the question above
   them does. Change the wording by editing the two content: values. */
.article-layout .article-vote-up,
.article-layout .article-vote-down {
  width: auto;
  height: auto;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(21, 47, 80, 0.22);
  background: transparent;
  box-shadow: none;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--de-link);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.article-layout .article-vote-up:before,
.article-layout .article-vote-down:before {
  content: none;
}

.article-layout .article-vote-up:after {
  content: "Yes, this helped";
}

.article-layout .article-vote-down:after {
  content: "No, not really";
}

.article-layout .article-vote-up:hover,
.article-layout .article-vote-down:hover {
  background: var(--de-surface);
  border-color: rgba(21, 47, 80, 0.36);
  text-decoration: none;
}

/* The stock selected state fills the button with #6B9100 green or #b7391e
   red — neither in the brand palette — and does it with !important, so
   matching that here is the only way to override. */
.article-layout .article-vote-up.article-voted,
.article-layout .article-vote-down.article-voted {
  background-color: rgba(21, 47, 80, 0.07) !important;
  border-color: rgba(21, 47, 80, 0.42);
  box-shadow: none;
  color: #152F50;
}

/* --- In-article table of contents -------------------------------------
   Built by script.js from the body's h2s. Every article in the KB has at
   least four, and most run to seven or nine, so this is more use to a
   reader mid-task than the recently-viewed list it now sits above. */
.article-toc {
  margin: 0;
}

/* Brand typography sets every case to Sentence, so no uppercase-label
   device; a Bold 13px label in muted navy does the same job, and the tracking
   goes with it since letter-spacing is an uppercase affordance. The short
   navy tick above is a small echo of the header's colour bar. */
.article-toc h3 {
  position: relative;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--de-muted);
  border-bottom: 0;
  padding: 15px 0 0;
  margin: 0 0 16px;
}

.article-toc h3:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: #152F50;
}

.article-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--de-rule);
}

.article-toc-list li {
  margin: 0;
}

.article-toc-list a {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 15px;
  line-height: 1.4;
  color: var(--de-muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.article-toc-list a:hover {
  color: var(--de-link);
  text-decoration: none;
  border-left-color: rgba(21, 47, 80, 0.3);
}

/* Slack marks the current section with a filled blue pill; blue is barred
   from white backgrounds here, so the marker is a navy edge plus weight. */
.article-toc-list a.is-active {
  color: #152F50;
  font-weight: 700;
  border-left-color: #152F50;
}


/* --- Sidebar rail ----------------------------------------------------
   Holds only the contents list now. It shipped as two grey #fafafa boxes
   with underlined uppercase headings — the same dated card treatment as the
   article body — and carried Recently viewed and Related articles, both of
   which have since been removed from the template. */
.article-layout .article-sidebar {
  margin-top: 0;
  /* Long articles scroll a long way; the rail follows instead of stranding
     the reader with an empty column. Offset clears the sticky header (68px)
     and its colour bar (8px), plus breathing room. */
  position: sticky;
  top: var(--de-sticky-offset);
}


/* ======================================================================
   6b. Page hero (article) + the "Dot" brand element
   ====================================================================== */

/* Boxed navy band, no wave — the wave is the home page's signature and the
   category page borrows it; a squared edge keeps the article distinct and
   hands off straight into the content. Carries the breadcrumb trail and the
   article title, so the title is the first thing read rather than sitting
   below a band of category furniture (Slack puts the category name here and
   the title underneath; Zendesk's article template exposes no category
   object anyway, and the trail already names it). */
/* Height matched to Slack's article band, measured on their page: 55px
   padding top and bottom around a 44px/52px label and an 18px/26px line of
   subtext, giving roughly 196px. The grid the brand element is built on is
   declared here, so every shape is a whole multiple of one value. */
.page-hero {
  --de-dot-unit: 64px;
  background-color: #152F50;
  overflow: hidden;
  padding: 55px 0;
  position: relative;
}

/* The band is shared, but the two pages it sits on hold their content at
   different widths, and the hero has to line up with whatever is beneath it.
   The category page fills the frame, so that is the default. */
.page-hero-inner {
  margin: 0 auto;
  max-width: var(--de-frame);
  padding: 0 var(--de-gutter);
  position: relative;
  z-index: 1;
}

/* The article page centres a 956px block inside the frame, so its band has to
   narrow to match. The cap includes the gutters: .page-body caps at the frame
   and pads inside it before centring the grid, so capping the hero at 956 and
   padding inside would leave its content a gutter to the right of the columns. */
main:has(.article-layout) .page-hero-inner {
  max-width: calc(var(--de-article-block) + var(--de-gutter) * 2);
}

/* Every path step is rendered; only the category is shown. On an article page
   the trail runs help center, category, section, so the category is the second
   step. Doing it positionally in CSS keeps it server-rendered — no JS, so the
   band is never briefly blank — at the cost of assuming that trail shape. */
.page-hero-step {
  display: none;
}

/* One type treatment, two uses: the category page puts its own name here as
   an h1, being that page's title; the article page puts a link up to the
   category. Weight matches .home-hero-heading so all three bands read as one
   component. */
.page-hero-title {
  color: rgba(255, 255, 255, 1);
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-transform: none;
  max-width: var(--de-measure);
  margin: 0;
}

.page-hero-step:nth-child(2) {
  display: inline-block;
  color: rgba(255, 255, 255, 1);
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-transform: none;
  max-width: var(--de-measure);
}

.page-hero-step:nth-child(2):hover {
  color: rgba(255, 255, 255, 1);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Matches .home-hero-subheading, and Slack's 18px/26px. This is one line of
   theme copy, not the category's own description: the article template cannot
   reach a category object at all, and the categories carry no description in
   Guide to reach even if it could. */
.page-hero-subtext {
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  line-height: 1.5;
  margin: 10px 0 0;
  max-width: var(--de-measure);
  opacity: 0.85;
}

/* --- The "Dot" brand element ------------------------------------------
   Brand guidelines p13: dots on a grid, halves pushed to the edges, and
   pills made by filling the space between two half-circles — horizontal,
   vertical or diagonal — overlapping one another. p15: on a navy ground,
   any shape that would be navy becomes the alternative primary Blue, which
   is why the blue dot below is #23428f and not #152F50.

   Solid fills, no transparency: the guidelines show these overlapping
   opaquely. Sized so the group occupies roughly a quarter of the band,
   inside the 20-30% ceiling on secondary colour. Decorative, and hidden
   from assistive tech in the template. */
/* Six and a half grid squares wide. Every shape below is sized and placed in
   whole units of --de-dot-unit, which is what the guidelines' first
   instruction — "Create a Grid" — actually asks for. The earlier pass placed
   them on arbitrary pixels and only looked gridded. */
.page-hero-shapes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--de-dot-unit) * 6.5);
  pointer-events: none;
}

.page-hero-shapes .de-shape {
  position: absolute;
  display: block;
}

/* Composition follows the worked example on p13: a Dot, a horizontal pill
   overlapping it, and a larger Dot overlapping that in turn, with the navy
   shape behind them all. Paint order is DOM order, so the pill covers the red
   Dot and the enlarged light-green Dot covers the pill.

   A pill is a rectangle a whole number of units long with fully rounded ends,
   which is the same figure as the guidelines' "two Half-Circles with the
   space between them filled in". Horizontal, as in both their examples. */

/* Navy in the guidelines' example; on a navy ground p15 replaces navy with
   the alternative primary Blue. Three units long, running off the right. */
.de-shape--pill-blue {
  width: calc(var(--de-dot-unit) * 3);
  height: var(--de-dot-unit);
  border-radius: 999px;
  background: #23428f;
  top: calc(var(--de-dot-unit) * 2);
  right: 0;
}

/* "Draw a Circle (Dot) in one square of the grid." */
.de-shape--dot-red {
  width: var(--de-dot-unit);
  height: var(--de-dot-unit);
  border-radius: 50%;
  background: rgba(200, 64, 57, 1);
  top: var(--de-dot-unit);
  right: calc(var(--de-dot-unit) * 4);
}

/* Two units long, overlapping the red Dot at its left end. */
.de-shape--pill-dark-green {
  width: calc(var(--de-dot-unit) * 2);
  height: var(--de-dot-unit);
  border-radius: 999px;
  background: #507525;
  top: var(--de-dot-unit);
  right: calc(var(--de-dot-unit) * 2);
}

/* "The Dots can be expanded and enlarged to create movement across the
   canvas" — two units across, overlapping the pill. */
.de-shape--dot-light-green {
  width: calc(var(--de-dot-unit) * 2);
  height: calc(var(--de-dot-unit) * 2);
  border-radius: 50%;
  background: #a7b546;
  top: 0;
  right: calc(var(--de-dot-unit) * 0.5);
}

/* "The Circle can be divided in half and moved to the edges or corners." */
.de-shape--half-orange {
  width: var(--de-dot-unit);
  height: calc(var(--de-dot-unit) / 2);
  border-radius: 0 0 var(--de-dot-unit) var(--de-dot-unit);
  background: #f38700;
  top: 0;
  right: calc(var(--de-dot-unit) * 5);
}

/* --- Left-hand group ---------------------------------------------------
   On a wide screen the frame leaves a broad empty margin left of the title
   while the shapes all sit right, which tips the band. A second, quieter
   group balances it: two shapes against the right's five, and the cooler end
   of the palette, so the warm mass stays the focal point rather than the two
   sides competing.

   It only appears once the frame's left margin is genuinely wide enough to
   hold it. Below that the group would run under the title, and a decorative
   shape behind a headline is worse than an unbalanced band. Threshold: the
   group is 2.5 units, and content starts at (viewport - frame) / 2 + gutter,
   so it clears with room to spare from about 1500px. */
.page-hero-shapes--left {
  right: auto;
  left: 0;
  width: calc(var(--de-dot-unit) * 2.5);
  display: none;
}

@media (min-width: 1500px) {
  .page-hero-shapes--left {
    display: block;
  }
}

/* A Dot halved against the left edge — the same instruction as the orange
   half above, applied to the opposite corner. */
.de-shape--half-light-green {
  width: calc(var(--de-dot-unit) / 2);
  height: var(--de-dot-unit);
  border-radius: 0 var(--de-dot-unit) var(--de-dot-unit) 0;
  background: #a7b546;
  top: 0;
  left: 0;
}

/* A Dot in one square, set a unit in from the edge. Blue rather than a
   secondary colour, echoing the pill on the right and keeping the left side
   quiet; on a navy ground this is the p15 substitute for navy. */
.de-shape--dot-blue-left {
  width: var(--de-dot-unit);
  height: var(--de-dot-unit);
  border-radius: 50%;
  background: #23428f;
  top: calc(var(--de-dot-unit) * 2);
  left: var(--de-dot-unit);
}

/* --- Content below the hero -------------------------------------------- */

.page-body {
  margin: 0 auto;
  max-width: var(--de-frame);
  padding: 26px var(--de-gutter) 0;
}

/* The trail sits below the band on white, as Slack has it. On the article page
   it is outside the columns grid, so it is centred on the same block or it
   would start a good 80px to their left. The article page is now the only
   .page-body carrying a trail — the category template dropped its one-link
   trail — so the generic .page-body > nav rule that used to sit here went
   with it. */
.page-body:has(.article-layout) > nav.sub-nav.clearfix {
  max-width: var(--de-article-block);
  margin: 0 auto 14px;
}


/* ======================================================================
   7. Home page
   ====================================================================== */

/* The home page had already been redesigned (hero, wave, tiles, promoted)
   and is left structurally alone. What follows is a consistency pass only:
   it predates the shared frame and link palette, so it was measuring 980px
   against the rest of the site's 1200px, sitting on 20px gutters instead
   of 40px, and still hovering to the brand red. */

.home-hero-inner,
.home-tiles,
.home-promoted-inner {
  max-width: var(--de-frame);
}

/* Search icon, matched to the header's.
   The stock glyph is `content: "\1F50D"` in `font-family: "entypo"` — a font
   this theme never loads — so it resolved to the system emoji: a full-colour
   magnifier with its own drop shadow, sitting a few hundred pixels below a
   header that draws the same idea as a 2px navy outline. home_page.hbs now
   inlines the header toggle's own SVG and this hides the glyph. Inlined
   because currentColor does not cross into an external SVG (see the footer
   icons, same reason). */
.home-hero-search .search:before {
  display: none;
}

.home-hero-search {
  position: relative;
}

/* 20px against the header's 16px: the hero field is 51px tall to the header
   chip's 34px, so the icon keeps roughly the same optical weight in a bigger
   field. The input already reserves 54px of right padding, so nothing runs
   underneath it. */
.home-hero-search-icon {
  color: #152F50;
  height: 20px;
  pointer-events: none;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}

/* The stock rule pulls the row up 70px so the cards float over the wave. That
   put them on top of the search field, which sits 40px above the wave once its
   own 0 10px 30px shadow is counted. It is also unpredictable: the tiles are
   260px tall inside a 190px flex container and overflow it upward, so the
   container's own box says nothing about where the cards actually paint.
   No negative margin; the section spaces them instead. */
.home-tiles {
  margin-top: 0;
}

.home-tiles-section {
  padding-top: 34px;
}

/* Same gutters as every other template, so the tiles line up with the
   header logo and with the content on the pages they link to. */
.home-hero,
.home-tiles-section,
.home-promoted {
  padding-left: var(--de-gutter);
  padding-right: var(--de-gutter);
}

/* Tiles were capped at 300px, which left the row visibly narrower than
   the frame it sits in once the frame grew. */
.home-tile {
  max-width: 340px;
}

.home-tile-text {
  font-size: 15px;
  color: var(--de-ink-soft);
}

.home-section-heading {
  font-size: 26px;
  margin-bottom: 28px;
}

/* Promoted articles were the same #fafafa card the article body used, and
   each item was capped at 320px inside a flex row, so a short list ragged
   out to the left instead of filling the width. An even grid, with the
   card treatment matched to the article page's comments card. */
.home-promoted-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.home-promoted-item {
  background: #fff;
  border: 1px solid var(--de-rule);
  border-radius: 12px;
  max-width: none;
  padding: 22px 24px;
}

.home-promoted-title {
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.home-promoted-title:hover {
  color: var(--de-link);
}

.home-promoted-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--de-muted);
}


/* ======================================================================
   8. Category page
   ====================================================================== */

/* The category page already had a real design — brand-cycling colour
   dots, two-column article lists, "see all" arrows — structurally close
   to how Slack's help center handles the same job. What it lacked was the
   thing that makes those pages read as designed rather than as a bare
   list: a hero band introducing the category. The home page already has
   exactly that pattern, wave and all, so this reuses it rather than
   inventing a second treatment. Breadcrumbs move inside the band, which
   is also what lets main go full-bleed without stranding them. */

/* The category page shares .page-hero with the article page — same boxed band,
   same 44px label, same subtext line, same brand-element grid — so the band
   does not change shape as a reader moves from a category into one of its
   articles. It had its own treatment carrying the home page's wave; the wave
   is now unique to home. .page-body is shared too, so .category-body has gone
   with it. */


.section-tree .section {
  border-bottom: 1px solid var(--de-rule);
  padding: 38px 0;
}

/* Sections with no articles are hidden outright. A category page listing
   "This section is empty" three times advertises the gaps, and since the
   section name stopped being a link that empty state was the only thing left
   pointing at an empty page. Fill a section in Guide and it reappears.
   (A section with a description but no articles disappears too — it has no
   reader-facing content either way.) */
.section-tree .section:has(.section-empty) {
  display: none;
}

/* Everything below recounts over *visible* sections. :nth-child keeps counting
   hidden ones, so with three empty sections in this category the dot cycle
   went red, orange, red, orange, green — dark green never appeared and the
   repeat read as a mistake — and the "no rule on the last one" landed on a
   hidden section, leaving a stray rule above the footer.
   `of S` is Selectors 4, same era as the :has() this file already relies on.
   Where it is unsupported these rules drop and the baseline's plain nth-child
   cycle stands, which is exactly what readers saw before. */
.section-tree .section:nth-child(1 of .section:not(:has(.section-empty))) {
  padding-top: 18px;  /* the hero already gives the first one its air */
}

.section-tree .section:nth-last-child(1 of .section:not(:has(.section-empty))) {
  border-bottom: none;
}

.section-tree .section:nth-child(4n+1 of .section:not(:has(.section-empty))) h3:before {
  background: rgba(200, 64, 57, 1);
}

.section-tree .section:nth-child(4n+2 of .section:not(:has(.section-empty))) h3:before {
  background: #f38700;
}

.section-tree .section:nth-child(4n+3 of .section:not(:has(.section-empty))) h3:before {
  background: #a7b546;
}

.section-tree .section:nth-child(4n+4 of .section:not(:has(.section-empty))) h3:before {
  background: #507525;
}

/* Section names are Subheadings in the brand hierarchy, so Bold rather
   than the Black reserved for page headlines. */
.section-tree h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 14px;
}

/* Section names are plain text, not links — the list under each one now holds
   every article in the section, so there is nowhere else to send a reader. No
   colour rule needed: the h3 already computes to the same navy the link had
   (#152F50, Roboto 24/700), so unlinking is visually identical. The stock
   `.section h3 a` pair is left alone above; nothing matches it now. */

.section-description {
  font-size: 16px;
  line-height: 1.6;
  color: var(--de-muted);
  margin: -6px 0 16px;
  max-width: 68ch;
}

/* Shipped at 14px — the smallest text on the page, for its primary
   content. 16px matches the body scale and the section page, which lists
   these same titles. */
.section-tree ul,
ul.article-list {
  font-size: 16px;
  column-gap: 56px;
}

.article-list li {
  margin-bottom: 12px;
  line-height: 1.55;
  padding-right: 24px;
}

/* The bullet is punctuation, not content: muting the marker lets the blue
   title carry the row. (Slack does the same — grey marker, blue link.) */
.article-list li::marker {
  color: rgba(21, 47, 80, 0.35);
}

.see-all-articles {
  font-size: 15px;
  margin-top: 12px;
}

/* Empty sections are hidden on the category page (see the .section-tree block
   above). These rules still dress the empty state where it does show: the
   section page a reader reaches from a breadcrumb or from search. */
.section-empty {
  display: inline-block;
  font-size: 15px;
  font-style: normal;
  color: var(--de-muted);
}

.section-empty a {
  color: var(--de-muted);
}

.section-tree .section:has(.section-empty) h3 {
  margin-bottom: 8px;
}

/* --- Release Notes variant ---------------------------------------------
   category_page.hbs branches on the category name; Release Notes only
   forwards to the What's New article now, so all it needs is the shared
   top padding under the hero. */

.gateway-page {
  padding: 30px 0 40px;
}


/* The promoted star shipped with height:0, width:0 and left:50%, which
   collapsed it and shoved it over the adjacent text. */
.article-promoted span {
  position: static;
  height: auto;
  width: auto;
  left: auto;
  margin: 0 6px 0 0;
  color: #f38700;
}


/* ======================================================================
   9. Section page
   ====================================================================== */

/* The barest template in the theme: an always-emitted empty description
   paragraph, and an article list borrowing the category page's two-column
   bullets. The template now wraps a real header; the list becomes a proper
   index. (It also had {{subscribe}} nested inside the h1, so "Follow"
   inherited h1's size and colour and rendered as a second headline — moot
   now that the control has gone from this template entirely.) */

/* No rule under the header — the list draws its own top border, so the two
   do not read as two hairlines with a dead gap between them. */
.section-area .section-header {
  padding-bottom: 0;
  margin-bottom: 30px;
}

/* text-transform: none also drops the stock .section-area h1 capitalize,
   which fights Sentence case. */
.section-area .section-header h1 {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0;
}

.section-area .section-header .section-description {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--de-ink-soft);
}

/* On a section page the article list *is* the content, so it becomes a
   single column of full-width rows — scannable, and each row a large
   click target — rather than two columns of small bullets. */
.section-area .article-list {
  column-count: 1;
  padding-left: 0;
  list-style: none;
  margin: 0;
  font-size: 16px;
}

.section-area .section-tree {
  margin-top: 0;
}

.section-area .article-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--de-rule);
}

.section-area .article-list li:first-child {
  border-top: 1px solid var(--de-rule);
}

.section-area .article-list li a {
  display: block;
  padding: 18px 44px 18px 4px;
  position: relative;
  color: #152F50;
  line-height: 1.45;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.section-area .article-list li a:after {
  content: "\203A";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: rgba(21, 47, 80, 0.28);
  transition: color 0.15s ease, transform 0.15s ease;
}

.section-area .article-list li a:hover {
  background: var(--de-surface-hover);
  color: var(--de-link);
  text-decoration: none;
}

.section-area .article-list li a:hover:after {
  color: var(--de-link);
  transform: translateY(-50%) translateX(3px);
}

.section-area .section-empty {
  display: block;
  padding: 28px 0;
}


/* ======================================================================
   10. Search results
   ====================================================================== */

.search-results-heading {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 4px;
}

.search-results-subheading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--de-muted);
  padding: 0;
  margin: 28px 0 4px;
}

.search-results-list {
  margin: 0 0 32px;
}

/* Rows, not hairline-separated paragraphs: one border between items and
   generous padding, so a result reads as a single object. */
.search-results-list > * {
  border-bottom: 1px solid var(--de-rule);
  padding: 24px 0;
}

.search-results-list > *:first-child {
  border-top: 1px solid var(--de-rule);
}

.search-result-link {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

/* Source line above the snippet, quiet and small — it orients you
   without competing with the title. */
.search-result-meta {
  padding-top: 6px;
  font-size: 14px;
  color: var(--de-muted);
}

.search-result-description {
  padding-top: 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--de-ink-soft);
  max-width: 78ch;
}

.search-result-meta-name,
.search-result-meta-time,
.search-result-meta-count {
  font-size: 14px;
  color: var(--de-muted);
}

/* Was a #A8D119 chip — an off-palette lime that appeared nowhere else. */
.search-result-votes {
  background: var(--de-surface);
  border-radius: 999px;
  color: var(--de-muted);
  font-size: 14px;
  padding: 3px 9px;
  top: -1px;
}

/* When community is on, the two columns were fixed at 450px each. */
body.community-enabled .search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
}

body.community-enabled .search-results-column {
  display: block;
  width: auto;
}

body.community-enabled .search-results-column + .search-results-column {
  margin-left: 0;
}

body.community-enabled .search-results-heading {
  grid-column: 1 / -1;
}


/* ======================================================================
   11. Header and footer
   ====================================================================== */

.logo-text {
  font-size: 18px;
}

/* The logo mark and "Help Center" sat in an inline-block anchor with
   line-height: 68px. Once the flex item was squeezed the two wrapped onto
   separate 68px lines inside a 68px header, which is what produced the
   overlap on phones. Flex + nowrap keeps them on one baseline at any
   width. */
.logo a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
}

/* The anchor inside is inline-flex, so it sat on .logo's text baseline and
   carried the lockup 4px above the header's centre — which is why the wordmark
   text and the dropdown label did not line up. Making .logo a flex container
   takes the anchor out of inline flow, so the lockup centres like every other
   item in the row. */
.logo {
  display: flex;
  align-items: center;
  float: none;
  min-width: 0;
}

/* --- Footer -----------------------------------------------------------
   Rebuilt to mirror dualenroll.com's footer: brand mark left, then Platform,
   Company and Contact columns, an orange rule, and a legal row. The website's
   left-hand block — the "Ready to Grow Your Dual Enrollment Program?" line and
   its Get a Demo button — is deliberately left out; a help center is not the
   place to sell.

   Measured from the live site: column headings 15px, links and copyright 13px,
   all white on the brand navy, logo 32px. Headings there are weight 600, which
   is neither a weight the brand defines nor one document_head.hbs loads, so
   they are 700 here. */
/* No padding on the footer itself: the colour bar is its first child, and
   padding here pushed the bar 54px down inside the navy instead of leaving it
   flush against the top edge. The spacing moves to the columns row. */
.footer {
  background-color: #152F50;
  margin-top: 56px;
  padding: 0;
}

/* Overrides the stock centred flex row. */
.footer .footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
  justify-content: normal;
  text-align: left;
}

.footer > .footer-inner {
  padding-top: 54px;
}

.footer-logo img {
  max-height: 32px;
}

.footer-col-heading {
  color: rgba(255, 255, 255, 1);
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 18px;
}

.footer-col-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col-list li {
  margin: 0 0 12px;
  line-height: 1.5;
}

.footer-col-list li:last-child {
  margin-bottom: 0;
}

.footer-col-list a {
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  opacity: 0.82;
  transition: opacity 0.15s ease;
}

.footer-col-list a:hover {
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Contact rows carry an icon in a fixed gutter so the labels align whatever
   the icon's shape. */
.footer-col--contact .footer-col-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The Streamline icons use a 499.92 viewBox, so stroke-width is in those
   units — 1.7 would be invisible. 26 renders at roughly 0.9px at 17px, which
   matches the weight of the 14px text beside it. */
.footer-icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
}

/* --- Legal row -------------------------------------------------------- */

/* The rule is the website's, in brand orange. */
.footer-legal {
  margin-top: 48px;
  padding: 20px 0 26px;
}

.footer .footer-legal .footer-inner {
  display: block;
  grid-template-columns: none;
  padding-top: 0;
}

/* The rule lives on an inner row, not on .footer-inner: a border there wraps
   the gutter padding too, so it overhung the columns by 40px each side. On the
   row it spans exactly the text width, and it stays that way at every
   breakpoint without restating the gutter. */
.footer-legal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  border-top: 1px solid #f38700;
  padding-top: 22px;
}

.footer-copyright {
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  margin: 0;
  opacity: 0.82;
  width: auto;
  text-align: left;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  opacity: 0.82;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal-links a:hover {
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}


/* --- Header navigation dropdown ---------------------------------------
   Sits beside the wordmark rather than in the right-hand group: it is
   navigation, and the right side is reserved for search and the CTA. Same
   open/close behaviour as the search toggle — click, click-outside, Escape —
   handled in script.js. */
/* .header-inner is a space-between flex row, so a third child would be pushed
   to the centre. margin-right: auto takes the slack on its right instead, which
   keeps the control beside the wordmark and the actions hard right. */
.header-nav {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 31px;
  margin-right: auto;
}

/* Vertical separator between the wordmark and the control, as Slack's header
   has it. Theirs is a 1px by 28px div at rgba(94, 93, 96, 0.45); this is the
   same geometry in the brand navy at a comparable weight, as a pseudo-element
   rather than an extra node. Spacing mirrors theirs too: 20px from the logo,
   11px from the button box. */
.header-nav:before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: rgba(21, 47, 80, 0.22);
}

/* Slack's trigger, measured: 40px tall, padding 0 15px, 16px weight 700,
   transparent, border-radius 4px, no border. Plain text rather than the pill
   this started as — the pill competed with the Submit a Ticket button, which
   is the only thing in the header that should read as a filled control. */
.header-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0;
  /* The stock button rule sets inset 0 -2px rgba(0,0,0,.03); zeroing border
     and background left that behind as a faint line under the label. */
  box-shadow: none;
  color: #152F50;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.header-nav-toggle:hover,
.header-nav.is-open .header-nav-toggle {
  background: #f2f4f7;
}

.header-nav-chevron {
  transition: transform 0.18s ease;
}

.header-nav.is-open .header-nav-chevron {
  transform: rotate(180deg);
}

/* Above the sticky colour bar, which carries z-index 99. */
.header-nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 120;
  min-width: 248px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgba(255, 255, 255, 1);
  border: 1px solid var(--de-rule);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(21, 47, 80, 0.16);
}

.header-nav-menu[hidden] {
  display: none;
}

.header-nav-menu li {
  margin: 0;
}

.header-nav-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #152F50;
  font-size: 15px;
  line-height: 1.4;
}

.header-nav-menu a:hover {
  background: var(--de-surface);
  color: var(--de-link);
  text-decoration: none;
}


/* ======================================================================
   12. Responsive
   ====================================================================== */

/* --- Narrow desktop: the hero shapes would meet the label -------------
   The group is 400px hard right; the label is one short line, so there is far
   more room than when the article title sat in the band. Below the tablet
   breakpoint the band gets short and the shapes crowd it, so they go there. */
@media (max-width: 1120px) {
  .page-hero-shapes {
    display: none;
  }
}

/* --- Tablet: article rail drops below the body ------------------------ */
@media (max-width: 1120px) {
  main {
    padding: 0 32px;
  }

  .header .header-inner,
  .footer-inner {
    padding: 0 32px;
  }

  .page-hero-inner {
    padding-left: 32px;
    padding-right: 32px;
  }

  .page-body {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Brand mark takes a row of its own; the three link columns share the next. */
  .footer .footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .article-layout > .main-column,
  .article-layout > .side-column {
    grid-column: 1;
  }

  .article-layout > .side-column {
    /* Stacked under the article, there is nothing left to stick to. */
    position: static;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--de-rule);
  }

  /* The rail stacks below the article here, and a table of contents that
     appears only after the reader has scrolled past everything it lists is
     worse than none. Putting it above the body on narrow screens needs a
     second container in the template — worth doing, but not this. */
  .article-toc {
    display: none;
  }
}

/* --- Small tablet: single-column lists -------------------------------- */
@media (max-width: 880px) {
  .section-tree ul,
  ul.article-list {
    column-count: 1;
  }

  body.community-enabled .search-results {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
}

/* --- Phone ------------------------------------------------------------ */
@media (max-width: 680px) {
  main {
    margin-top: 24px;
    padding: 0 20px;
  }

  .header .header-inner,
  .footer-inner {
    padding: 0 20px;
  }

  /* "Help Center" is the first thing to go: the wordmark already says
     where you are, and dropping it buys the room the buttons need. */
  .logo-text {
    display: none;
  }

  .header-actions {
    gap: 8px;
  }

  .header-btn {
    padding: 7px 13px;
    font-size: 14px;
  }

  /* The row cannot hold the wordmark, a labelled dropdown, search and the CTA
     at 390px. The label goes and the chevron carries the control; the logo
     drops a little to buy the rest of the room. */
  /* No separator at this width: with the label gone the control is a chevron,
     and a rule beside it reads as clutter rather than structure. */
  .header-nav {
    margin-left: 4px;
  }

  .header-nav:before {
    display: none;
  }

  .header-nav-label {
    display: none;
  }

  .header-nav-toggle {
    height: 36px;
    padding: 0 8px;
  }

  .logo img {
    max-height: 22px;
  }

  /* Anchored to the nav, the panel ran flush to the viewport edge — the
     control sits well right of the logo once the label is gone. Fixed and
     inset by the gutter instead, so it reads as a panel rather than a
     clipped menu. It stays a DOM child of .header-nav, so the
     click-outside handler still treats clicks inside it as inside. */
  .header-nav-menu {
    position: fixed;
    top: 72px;
    left: 20px;
    right: 20px;
    min-width: 0;
  }

  /* The search field expands to a fixed 260px, which cannot coexist with
     the wordmark and the CTA inside a 390px header. On phones the open
     state takes over the row instead: the field fills whatever space is
     available, and the toggle beside it is the way back out. */
  .header-inner:has(.header-search.is-open) .logo,
  .header-inner:has(.header-search.is-open) .header-btn {
    display: none;
  }

  .header-actions:has(.header-search.is-open),
  .header-search.is-open {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-search.is-open .header-search-box {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .header-search.is-open .header-search-box .search input[type=search],
  .header-search.is-open .header-search-box .search input[type=text] {
    width: 100%;
  }

  h1 {
    font-size: 26px;
  }

  .section-area .section-header h1 {
    font-size: 28px;
  }

  .page-hero {
    padding: 30px 0;
  }

  .page-hero-step:nth-child(2) {
    font-size: 27px;
  }

  .page-hero-subtext {
    font-size: 16px;
    margin-top: 8px;
  }

  .page-body {
    padding-top: 22px;
  }

  .article-layout .article-header h1 {
    font-size: 27px;
  }

  .page-hero-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .page-hero-title {
    font-size: 27px;
  }

  .page-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer {
    padding-top: 40px;
  }

  .footer .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .footer-legal-row {
    justify-content: flex-start;
  }

  .footer-legal-links {
    gap: 14px 18px;
  }

  .section-tree h3 {
    font-size: 21px;
  }

  .article-layout .article-body h2 {
    font-size: 22px;
  }

  .article-layout .article-body h3 {
    font-size: 18px;
  }

  .section-area .section-header .section-description {
    font-size: 16px;
  }

  .search-results-heading {
    font-size: 24px;
  }

  .search-result-link {
    font-size: 17px;
  }

}