@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
/***** Base *****/
* {
box-sizing: border-box;
}
body {
background-color: #FFFFFF;
color: rgba(0, 0, 0, 1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
body > main {
min-height: 65vh;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
margin-top: 0;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
font-weight: 600;
}
h4 {
font-size: 16px;
}
a {
color: #1F73B7;
text-decoration: none;
}
a:visited {
color: #9358B0;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
color: #000;
font-size: 14px;
}
.hbs-form input, .search input {
max-width: 100%;
box-sizing: border-box;
transition: border 0.12s ease-in-out;
/* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus
{
border: 1px solid rgba(0, 0, 0, 1);
}
.hbs-form input[disabled], .search input[disabled] {
background-color: #ddd;
}
.hbs-form select, .search select {
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvgxmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC'd='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
background-position: right 10px center;
border: 1px solid #848F99;
border-radius: 4px;
padding: 8px 30px 8px 10px;
outline: none;
color: #555;
width: 100%;
}
.hbs-form select:focus, .search select:focus {
border: 1px solid rgba(0, 0, 0, 1);
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
display: none;
}
.hbs-form textarea, .search textarea {
border: 1px solid #848F99;
border-radius: 2px;
resize: vertical;
width: 100%;
outline: none;
padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
border: 1px solid rgba(0, 0, 0, 1);
}
.container {
max-width: 1160px;
margin: 0 auto;
padding: 0 5%;
}
@media (min-width: 1160px) {
.container {
padding: 0;
width: 90%;
}
}
.container-divider {
border-top: 1px solid #ddd;
margin-bottom: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.error-page {
max-width: 1160px;
margin: 0 auto;
padding: 0 5%;
}
@media (min-width: 1160px) {
.error-page {
padding: 0;
width: 90%;
}
}
.visibility-hidden {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-
link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button,
.community-follow button, .article-subscribe button, .section-subscribe button, .split-button button
{
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
border-radius: 4px;
color: rgba(0, 0, 0, 1);
cursor: pointer;
display: inline-block;
font-size: 12px;
line-height: 2.34;
margin: 0;
padding: 0 20px;
text-align: center;
transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-
in-out;
user-select: none;
white-space: nowrap;
width: 100%;
-webkit-touch-callout: none;
}
@media (min-width: 768px) {
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-
link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button,
.community-follow button, .article-subscribe button, .section-subscribe button, .split-button button
{
width: auto;
}
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-
link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-
table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-
subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
color: rgba(0, 0, 0, 1);
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-
link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-
toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe
button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active,
.pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active,
.pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar
.organization-subscribe button:active, .community-follow button:active, .article-subscribe
button:active, .section-subscribe button:active, .split-button button:active, .button:focus,
.pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-
last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-
subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-
subscribe button:focus, .split-button button:focus, .button.button-primary, .button-
primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-
first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary,
.subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe
button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true],
.community-follow button.button-primary, .article-subscribe button.button-primary, .article-
subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe
button[data-selected=true], .split-button button.button-primary {
background-color: rgba(0, 0, 0, 1);
color: #FFFFFF;
text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-
primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-
primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover,
.subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-
subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-
selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe
button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe
button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button
button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-
primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-
primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus,
.subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-
subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-
selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe
button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe
button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button
button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-
link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-
link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-
primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar
.organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-
subscribe button[data-selected=true]:active, .community-follow button.button-primary:active,
.article-subscribe button.button-primary:active, .article-subscribe button[data-
selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe
button[data-selected=true]:active, .split-button button.button-primary:active {
background-color: #000;
border-color: #000;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link,
[data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-
subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-
disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled],
.section-subscribe button[data-disabled], .split-button button[data-disabled] {
cursor: default;
}
.button-large, .hbs-form input[type=submit] {
cursor: pointer;
background-color: rgba(0, 0, 0, 1);
border: 0;
border-radius: 4px;
color: #FFFFFF;
font-size: 14px;
line-height: 2.72;
min-width: 190px;
padding: 0 1.9286em;
width: 100%;
}
@media (min-width: 768px) {
.button-large, .hbs-form input[type=submit] {
width: auto;
}
}
.button-large:visited, .hbs-form input[type=submit]:visited {
color: #FFFFFF;
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover,
.hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
background-color: #000;
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
background-color: #ddd;
}
.button-secondary {
color: #333;
border: 1px solid #848F99;
background-color: transparent;
}
.button-secondary:visited {
color: #333;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
color: rgba(0, 0, 0, 1);
border: 1px solid #848F99;
background-color: #f7f7f7;
}
/***** Split button *****/
.split-button {
display: flex;
}
.split-button button {
background-color: rgba(0, 0, 0, 1);
border: 0;
color: #FFFFFF;
height: 32px;
line-height: 16px;
outline-color: rgba(0, 0, 0, 1);
}
[dir=rtl] .split-button button:not(:only-child):first-child {
border-left: 1px solid #FFFFFF;
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
border-right: 1px solid #FFFFFF;
border-top-right-radius: unset;
border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
display: flex;
justify-content: center;
align-items: center;
width: 26px;
min-width: 26px;
max-width: 26px;
padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
border-top-right-radius: unset;
border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
border-top-left-radius: unset;
border-bottom-left-radius: unset;
}
/***** Tables *****/
.table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
@media (min-width: 768px) {
.table {
table-layout: auto;
}
}
.table th,
.table th a {
color: #333;
font-size: 13px;
text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
text-align: right;
}
.table tr {
border-bottom: 1px solid #ddd;
display: block;
padding: 20px 0;
}
@media (min-width: 768px) {
.table tr {
display: table-row;
}
}
.table td {
display: block;
}
@media (min-width: 768px) {
.table td {
display: table-cell;
}
}
@media (min-width: 1024px) {
.table td, .table th {
padding: 20px 30px;
}
}
@media (min-width: 768px) {
.table td, .table th {
padding: 10px 20px;
height: 60px;
}
}
/***** Forms *****/
.form {
max-width: 650px;
}
.form-field ~ .form-field {
margin-top: 25px;
}
.form-field label {
display: block;
font-size: 13px;
margin-bottom: 5px;
}
.form-field input {
border: 1px solid #848F99;
border-radius: 4px;
padding: 10px;
width: 100%;
}
.form-field input:focus {
border: 1px solid rgba(0, 0, 0, 1);
}
.form-field input[type=text] {
border: 1px solid #848F99;
border-radius: 4px;
}
.form-field input[type=text]:focus {
border: 1px solid rgba(0, 0, 0, 1);
}
.form-field input[type=checkbox] {
width: auto;
}
.form-field .nesty-input {
border-radius: 4px;
border: 1px solid #848F99;
height: 40px;
line-height: 40px;
outline: none;
vertical-align: middle;
}
.form-field .nesty-input:focus {
border: 1px solid rgba(0, 0, 0, 1);
text-decoration: none;
}
.form-field .hc-multiselect-toggle {
border: 1px solid #848F99;
}
.form-field .hc-multiselect-toggle:focus {
outline: none;
border: 1px solid rgba(0, 0, 0, 1);
text-decoration: none;
}
.form-field textarea {
vertical-align: middle;
}
.form-field input[type=checkbox] + label {
margin: 0 0 0 10px;
}
.form-field .optional {
color: #333;
margin-left: 4px;
}
.form-field p {
color: #333;
font-size: 12px;
margin: 5px 0;
}
.form footer {
margin-top: 40px;
padding-top: 30px;
}
.form footer a {
color: #333;
cursor: pointer;
margin-right: 15px;
}
.form .suggestion-list {
font-size: 13px;
margin-top: 30px;
}
.form .suggestion-list label {
border-bottom: 1px solid #ddd;
display: block;
padding-bottom: 5px;
}
.form .suggestion-list li {
padding: 10px 0;
}
.form .suggestion-list li a:visited {
color: #9358B0;
}
/***** Header *****/
.header {
max-width: 1160px;
margin: 0 auto;
padding: 0 5%;
position: relative;
align-items: center;
display: flex;
height: 71px;
justify-content: space-between;
}
@media (min-width: 1160px) {
.header {
padding: 0;
width: 90%;
}
}
.logo img {
max-height: 37px;
vertical-align: middle;
}
.logo span {
margin: 0 10px;
color: rgba(0, 0, 0, 1);
}
.logo a {
display: inline-block;
}
.logo a:hover, .logo a:focus, .logo a:active {
text-decoration: none;
}
.user-nav {
display: inline-block;
position: absolute;
white-space: nowrap;
}
@media (min-width: 768px) {
.user-nav {
position: relative;
}
}
.user-nav[aria-expanded=true] {
background-color: #fff;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #ddd;
right: 0;
left: 0;
top: 71px;
z-index: 1;
}
.user-nav[aria-expanded=true] > a {
display: block;
margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
display: block;
margin: 20px;
}
.user-nav-list {
display: block;
list-style: none;
}
.user-nav-list > li {
display: inline-block;
}
@media (max-width: 768px) {
.nav-wrapper-desktop {
display: none;
}
}
@media (min-width: 768px) {
.nav-wrapper-desktop {
display: none;
}
}
@media (min-width: 1024px) {
.nav-wrapper-desktop {
display: inline-block;
}
}
.nav-wrapper-desktop a {
border: 0;
color: #1F73B7;
display: none;
font-size: 14px;
padding: 0 20px 0 0;
width: auto;
}
@media (min-width: 768px) {
.nav-wrapper-desktop a {
display: inline-block;
}
}
[dir=rtl] .nav-wrapper-desktop a {
padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
background-color: transparent;
color: #1F73B7;
text-decoration: underline;
}
@media (min-width: 1024px) {
.nav-wrapper-mobile {
display: none;
}
}
.nav-wrapper-mobile .menu-button-mobile {
background: none;
border: 0;
width: auto;
min-width: 71px;
cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
padding: 7px;
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
position: absolute;
background-color: #fff;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
right: 0;
left: 0;
top: 71px;
z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
border-bottom: 0.1px solid #ddd;
padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
background: none;
border: none;
padding: 8px 24px;
width: 100%;
height: 100%;
color: rgba(0, 0, 0, 1);
cursor: pointer;
text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-
items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
background-color: #f3f3f3;
text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
display: block;
padding: 8px 24px;
width: 100%;
height: 100%;
color: rgba(0, 0, 0, 1);
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items
a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
display: flex;
line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
font-size: 12px;
color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
margin-right: 0;
margin-left: 8px;
}
.skip-navigation {
align-items: center;
background-color: black;
color: white;
display: flex;
font-size: 14px;
justify-content: center;
left: -999px;
margin: 20px;
padding: 20px;
overflow: hidden;
position: absolute;
top: auto;
z-index: -999;
}
[dir=rtl] .skip-navigation {
left: initial;
right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
left: auto;
overflow: auto;
text-align: center;
text-decoration: none;
top: auto;
z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
left: initial;
right: auto;
}
#zd-modal-container ~ .skip-navigation {
display: none;
}
.ask-ai {
align-items: center;
background-color: #1F73B7;
border: 1px solid #1F73B7;
border-radius: 4px;
color: #FFFFFF;
display: inline-flex;
font-size: 14px;
font-weight: 600;
gap: 6px;
line-height: 1.4286;
padding: 6px 14px;
}
.ask-ai:visited {
color: #FFFFFF;
}
.ask-ai .ask-ai-icon {
flex-shrink: 0;
}
.nav-wrapper-desktop .ask-ai {
margin-inline-end: 16px;
padding: 6px 14px;
}
.nav-wrapper-desktop .ask-ai, .nav-wrapper-desktop .ask-ai:visited {
color: #FFFFFF;
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-
ai:active {
background-color: #0F3554;
border-color: #0F3554;
color: #FFFFFF;
text-decoration: none;
}
.nav-wrapper-mobile .ask-ai {
margin: 4px 24px;
padding: 6px 14px;
width: auto;
height: auto;
}
.nav-wrapper-mobile .ask-ai, .nav-wrapper-mobile .ask-ai:visited {
color: #FFFFFF;
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-
ai:active {
background-color: #0F3554;
border-color: #0F3554;
color: #FFFFFF;
text-decoration: none;
}
/***** User info in header *****/
.user-info {
display: inline-block;
}
.user-info .dropdown-toggle::after {
display: none;
}
@media (min-width: 768px) {
.user-info .dropdown-toggle::after {
display: inline-block;
}
}
.user-info > button {
border: 0;
color: #1F73B7;
min-width: 0;
padding: 0;
white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
color: #1F73B7;
background-color: transparent;
}
.user-info > button::after {
color: #1F73B7;
padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
padding-left: 15px;
padding-right: 0;
}
#user #user-name {
display: none;
font-size: 14px;
}
@media (min-width: 768px) {
#user #user-name {
display: inline-block;
}
}
#user #user-name:hover {
text-decoration: underline;
}
/***** User avatar *****/
.user-avatar {
height: 25px;
width: 25px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}
.avatar {
display: inline-block;
position: relative;
}
.avatar img {
height: 40px;
width: 40px;
}
.avatar .icon-agent {
color: rgba(0, 0, 0, 1);
border: 2px solid #fff;
border-radius: 50%;
bottom: -4px;
background-color: #FFFFFF;
font-size: 17px;
height: 17px;
line-height: 17px;
position: absolute;
right: -2px;
text-align: center;
width: 17px;
}
/***** Footer *****/
.footer {
border-top: 1px solid #ddd;
margin-top: 60px;
padding: 30px 0;
}
.footer a {
color: #333;
}
.footer-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 5%;
display: flex;
justify-content: space-between;
}
@media (min-width: 1160px) {
.footer-inner {
padding: 0;
width: 90%;
}
}
.footer-language-selector button {
color: #333;
display: inline-block;
}
.powered-by-zendesk a,
.powered-by-zendesk a:visited {
color: #333;
}
/***** Breadcrumbs *****/
.breadcrumbs {
margin: 0 0 15px 0;
padding: 0;
display: flex;
}
@media (min-width: 768px) {
.breadcrumbs {
margin: 0;
}
}
.breadcrumbs li {
display: inline-block;
color: #333;
font-size: 13px;
max-width: 450px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumbs li + li::before {
content: ">";
margin: 0 4px;
}
.breadcrumbs li a:visited {
color: #1F73B7;
}
/***** Search field *****/
.search-container {
position: relative;
}
.search {
border-color: #848F99;
border-radius: 30px;
border-style: solid;
border-width: 1px;
display: flex;
position: relative;
transition: border 0.12s ease-in-out;
}
.search:focus-within {
border-color: rgba(0, 0, 0, 1);
}
.search input[type=search],
.search .clear-button {
background-color: #fff;
border-radius: 30px;
border: none;
}
.search-full input[type=search], .search-full .clear-button {
border-color: #fff;
}
.search input[type=search] {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
color: #666;
flex: 1 1 auto;
height: 40px;
width: 100%;
}
.search input[type=search]:focus {
color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-
cancel-button, .search input[type=search]::-webkit-search-results-button, .search
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover,
.search input[type=search]:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
align-items: center;
box-sizing: border-box;
color: #777;
cursor: pointer;
display: none;
flex: none;
justify-content: center;
padding: 0 15px;
}
.search .clear-button:hover {
background-color: rgba(0, 0, 0, 1);
color: #fff;
}
.search .clear-button:focus {
outline: 0;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 1);
}
.search-has-value .clear-button {
display: flex;
}
[dir=ltr] .search input[type=search] {
padding-left: 40px;
padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
border-right-color: rgba(0, 0, 0, 1);
}
[dir=ltr] .search .clear-button {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
border-left-color: rgba(0, 0, 0, 1);
}
[dir=rtl] .search input[type=search] {
padding-left: 20px;
padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
border-left-color: rgba(0, 0, 0, 1);
}
[dir=rtl] .search .clear-button {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
border-right-color: rgba(0, 0, 0, 1);
}
.search-icon {
position: relative;
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 15px;
z-index: 1;
width: 18px;
height: 18px;
color: #777;
pointer-events: none;
}
[dir=rtl] .search-icon {
left: auto;
right: 15px;
}
/***** Hero component *****/
.hero {
background-image: url(/hc/theming_assets/01KS0Y4NSFYK9HYJNMV8H662N5);
background-position: center;
background-size: cover;
height: 300px;
padding: 0 20px;
text-align: center;
width: 100%;
}
.hero-inner {
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 610px;
margin: 0 auto;
}
.page-header {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
margin: 10px 0;
}
@media (min-width: 768px) {
.page-header {
align-items: baseline;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
margin: 0;
}
}
.page-header .section-subscribe {
flex-shrink: 0;
margin-bottom: 10px;
}
@media (min-width: 768px) {
.page-header .section-subscribe {
margin-bottom: 0;
}
}
.page-header h1 {
flex-grow: 1;
margin-bottom: 10px;
}
.page-header-description {
font-style: italic;
margin: 0 0 30px 0;
word-break: break-word;
}
@media (min-width: 1024px) {
.page-header-description {
flex-basis: 100%;
}
}
.page-header .icon-lock {
height: 20px;
width: 20px;
position: relative;
left: -5px;
vertical-align: baseline;
}
.sub-nav {
align-items: baseline;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 15px 30px;
justify-content: space-between;
margin-bottom: 55px;
}
@media (min-width: 768px) {
.sub-nav {
flex-direction: row;
}
}
.sub-nav .breadcrumbs {
margin: 0;
}
.sub-nav .search-container {
max-width: 300px;
width: 100%;
}
@media (min-width: 768px) {
.sub-nav .search-container {
flex: 0 1 300px;
}
}
.sub-nav input[type=search]::after {
font-size: 15px;
}
/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
padding: 0;
}
@media (min-width: 768px) {
.blocks-list {
margin: 0 -15px;
}
}
.blocks-item {
border: 1px solid rgba(0, 0, 0, 1);
border-radius: 4px;
box-sizing: border-box;
color: rgba(0, 0, 0, 1);
display: flex;
flex: 1 0 340px;
margin: 0 0 30px;
max-width: 100%;
text-align: center;
}
@media (min-width: 768px) {
.blocks-item {
margin: 0 15px 30px;
}
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
background-color: rgba(0, 0, 0, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
color: #FFFFFF;
text-decoration: none;
}
.blocks-item-internal {
background-color: transparent;
border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
height: 15px;
width: 15px;
bottom: 5px;
position: relative;
}
.blocks-item-internal a {
color: rgba(0, 0, 0, 1);
}
.blocks-item-link {
color: rgba(0, 0, 0, 1);
padding: 20px 30px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
color: inherit;
text-decoration: none;
}
.blocks-item-link:focus {
outline: 0;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 1);
text-decoration: none;
}
.blocks-item-title {
margin-bottom: 0;
font-size: 16px;
}
.blocks-item-description {
margin: 0;
}
.blocks-item-description:not(:empty) {
margin-top: 10px;
}
/***** Homepage *****/
.section {
margin-bottom: 40px;
}
@media (min-width: 768px) {
.section {
margin-bottom: 60px;
}
}
.home-section h2 {
margin-bottom: 10px;
text-align: center;
}
/***** Promoted articles *****/
.promoted-articles {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
@media (min-width: 1024px) {
.promoted-articles {
flex-direction: row;
}
}
.promoted-articles-item {
flex: 1 0 auto;
}
@media (min-width: 1024px) {
.promoted-articles-item {
align-self: flex-end;
flex: 0 0 auto;
padding-right: 30px;
width: 33%; /* Three columns on desktop */
}
[dir=rtl] .promoted-articles-item {
padding: 0 0 0 30px;
}
}
.promoted-articles-item:nth-child(3n) {
padding-right: 0;
}
.promoted-articles-item a {
display: block;
border-bottom: 1px solid #ddd;
padding: 15px 0;
}
.promoted-articles-item .icon-lock {
vertical-align: baseline;
}
.promoted-articles-item:last-child a {
border: 0;
}
@media (min-width: 1024px) {
.promoted-articles-item:last-child a {
border-bottom: 1px solid #ddd;
}
}
/***** Community section in homepage *****/
.community {
text-align: center;
}
.community-image {
min-height: 300px;
margin-top: 32px;
background-image: url(/hc/theming_assets/01KV97WAKK6GGKB83PX3H8652H);
background-position: center;
background-repeat: no-repeat;
max-width: 100%;
}
.community a {
color: #1F73B7;
text-decoration: underline;
}
.community a:visited {
color: #9358B0;
}
.community a:hover, .community a:active, .community a:focus {
color: #0F3554;
}
.community,
.activity {
border-top: 1px solid #ddd;
padding: 30px 0;
}
/***** Recent activity *****/
.recent-activity-header {
margin-bottom: 10px;
text-align: center;
}
.recent-activity-list {
padding: 0;
}
.recent-activity-item {
border-bottom: 1px solid #ddd;
overflow: auto;
padding: 20px 0;
}
.recent-activity-item h3 {
margin: 0;
}
.recent-activity-item-parent {
font-size: 16px;
font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
margin: 6px 0;
display: inline-block;
width: 100%;
}
@media (min-width: 768px) {
.recent-activity-item-parent, .recent-activity-item-link {
width: 70%;
margin: 0;
}
}
.recent-activity-item-link {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
}
.recent-activity-item-meta {
color: rgba(0, 0, 0, 1);
margin: 15px 0 0 0;
float: none;
}
@media (min-width: 768px) {
.recent-activity-item-meta {
margin: 0;
float: right;
}
[dir=rtl] .recent-activity-item-meta {
float: left;
}
}
.recent-activity-item-time, .recent-activity-item-comment {
display: inline-block;
font-size: 13px;
}
.recent-activity-item-comment {
padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
display: inline-block;
}
.recent-activity-controls {
padding-top: 15px;
}
.recent-activity-controls a {
color: #1F73B7;
text-decoration: underline;
}
.recent-activity-controls a:visited {
color: #9358B0;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls
a:focus {
color: #0F3554;
}
.recent-activity-accessibility-label {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.recent-activity-comment-icon svg {
vertical-align: middle;
color: rgba(0, 0, 0, 1);
width: 16px;
height: 16px;
}
.recent-activity-comment-icon:after {
content: attr(data-comment-count);
margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
margin-left: 0;
margin-right: 3px;
}
/***** Category pages *****/
.category-container {
display: flex;
justify-content: flex-end;
}
.category-content {
flex: 1;
max-width: 100%;
}
@media (min-width: 1024px) {
.category-content {
flex: 0 0 80%;
}
}
.section-tree {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 768px) {
.section-tree {
flex-direction: row;
}
}
.section-tree .section {
flex: initial;
max-width: 100%;
}
@media (min-width: 768px) {
.section-tree .section {
flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
}
}
.section-tree-title {
margin-bottom: 0;
font-size: 18px;
font-weight: 600;
}
.section-tree-title a {
color: rgba(0, 0, 0, 1);
}
.section-tree .see-all-articles {
display: block;
padding: 15px 0;
}
.article-list-item {
font-size: 16px;
padding: 15px 0;
text-overflow: ellipsis;
overflow: hidden;
}
.article-list-item a {
color: rgba(0, 0, 0, 1);
}
.icon-star {
color: rgba(0, 0, 0, 1);
font-size: 18px;
}
/***** Section pages *****/
.section-container {
display: flex;
justify-content: flex-end;
}
.section-content {
flex: 1;
max-width: 100%;
}
@media (min-width: 1024px) {
.section-content {
flex: 0 0 80%;
}
}
.section-list {
margin: 40px 0;
}
.section-list-item {
border-bottom: 1px solid #ddd;
font-size: 16px;
padding: 15px 0;
}
.section-list-item:first-child {
border-top: 1px solid #ddd;
}
.section-list-item a {
align-items: center;
color: rgba(0, 0, 0, 1);
display: flex;
justify-content: space-between;
}
.see-all-sections-trigger {
cursor: pointer;
display: block;
padding: 15px;
text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
display: none;
}
/***** Article *****/
.article {
/*
* The article grid is defined this way to optimize readability:
* Sidebar | Content | Free space
* 17% | 66% | 17%
*/
flex: 1 0 auto;
}
@media (min-width: 1024px) {
.article {
flex: 1 0 66%;
max-width: 66%;
min-width: 640px;
padding: 0 30px;
}
}
.article-container {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.article-container {
flex-direction: row;
}
}
.article-header {
align-items: flex-start;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 40px;
margin-top: 20px;
}
@media (min-width: 768px) {
.article-header {
flex-direction: row;
margin-top: 0;
}
}
.article-avatar {
margin-right: 10px;
}
.article-author {
margin-bottom: 10px;
}
.article-title {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
@media (min-width: 768px) {
.article-title {
flex-basis: 100%; /* Take entire row */
}
}
.article-title .icon-lock {
position: relative;
left: -5px;
vertical-align: baseline;
}
.article [role=button] {
flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-
minimum-content-sizing-of-flex-items-not-honored)*/
width: 100%;
}
@media (min-width: 768px) {
.article [role=button] {
width: auto;
}
}
.article-info {
max-width: 100%;
}
.article-meta {
display: inline-block;
vertical-align: middle;
}
.article-body {
display: flow-root;
}
.article-body a {
color: #1F73B7;
text-decoration: underline;
}
.article-body a:visited {
color: #9358B0;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
color: #0F3554;
}
.article-body img {
height: auto;
max-width: 100%;
}
.article-body p > img.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.article-body figure.image {
display: table;
margin: 0 auto;
}
.article-body figure.image > img {
display: block;
width: 100%;
}
.article-body figure.image.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.article-body figcaption {
padding: 10px 0;
font-size: 12px;
text-align: center;
background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
padding-left: 20px;
list-style-position: outside;
margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
padding-right: 20px;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
margin: 0;
}
.article-body ul {
list-style-type: disc;
}
.article-body :not(pre) > code {
background: #f7f7f7;
border: 1px solid #ddd;
border-radius: 3px;
padding: 0 5px;
margin: 0 2px;
}
.article-body pre {
background: #f7f7f7;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
direction: ltr;
}
.article-body blockquote {
border-left: 1px solid #ddd;
color: #333;
font-style: italic;
padding: 0 15px;
}
.article-body > p:last-child {
margin-bottom: 0;
}
.article-content {
line-height: 1.6;
margin: 40px 0;
word-wrap: break-word;
}
.article-footer {
align-items: center;
display: flex;
justify-content: space-between;
padding-bottom: 20px;
}
.article-comment-count {
color: #333;
}
.article-comment-count:hover {
text-decoration: none;
}
.article-comment-count-icon {
vertical-align: middle;
color: rgba(0, 0, 0, 1);
width: 18px;
height: 18px;
}
.article-sidebar {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
flex: 1 0 auto;
margin-bottom: 20px;
padding: 0;
}
@media (min-width: 1024px) {
.article-sidebar {
border: 0;
flex: 0 0 17%;
height: auto;
max-width: 17%;
}
}
.article-relatives {
border-top: 1px solid #ddd;
display: flex;
flex-direction: column;
padding: 20px 0;
}
@media (min-width: 768px) {
.article-relatives {
flex-direction: row;
}
}
.article-relatives > * {
flex: 1 0 50%;
min-width: 50%;
overflow-wrap: break-word;
margin-right: 0;
}
.article-relatives > *:last-child {
padding: 0;
}
@media (min-width: 768px) {
.article-relatives > * {
padding-right: 20px;
}
}
.article-votes {
border-top: 1px solid #ddd;
padding: 30px 0;
text-align: center;
}
.article-votes-question {
font-size: 15px;
font-weight: normal;
margin-bottom: 0;
}
.article-vote {
margin: 10px 5px;
min-width: 90px;
width: auto;
}
.article-more-questions {
margin: 10px 0 20px;
text-align: center;
}
.article-more-questions a {
color: #1F73B7;
text-decoration: underline;
}
.article-more-questions a:visited {
color: #9358B0;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
color: #0F3554;
}
.article-return-to-top {
border-top: 1px solid #848F99;
}
@media (min-width: 1024px) {
.article-return-to-top {
display: none;
}
}
.article-return-to-top a {
color: rgba(0, 0, 0, 1);
display: block;
padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
text-decoration: none;
}
.article-return-to-top-icon {
transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
margin-bottom: 0;
}
.sidenav-title {
font-size: 15px;
position: relative;
font-weight: 600;
}
.sidenav-item {
display: block;
margin-top: 10px;
margin-bottom: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
.recent-articles li,
.related-articles li {
margin-bottom: 15px;
}
/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
padding-left: 20px;
position: relative;
margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
color: rgba(0, 0, 0, 1);
left: 0;
position: absolute;
top: 5px;
}
[dir=rtl] .attachments .attachment-item {
padding-left: 0;
padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
left: auto;
right: 0;
}
.upload-dropzone span {
color: #333;
}
/***** Social share links *****/
.share {
padding: 0;
white-space: nowrap;
}
.share li, .share a {
display: inline-block;
}
.share li {
height: 25px;
width: 25px;
}
.share a {
color: #333;
}
.share a:hover {
text-decoration: none;
color: rgba(0, 0, 0, 1);
}
.share a svg {
height: 18px;
width: 18px;
display: block;
}
/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
border-bottom: 1px solid #ddd;
padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
margin-bottom: 5px;
margin-top: 0;
font-size: 18px;
font-weight: 600;
}
.comment-overview {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 20px 0;
}
.comment-overview p {
margin-top: 0;
}
.comment-callout {
color: #333;
display: inline-block;
font-size: 13px;
margin-bottom: 0;
}
.comment-callout a {
color: #1F73B7;
text-decoration: underline;
}
.comment-callout a:visited {
color: #9358B0;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
color: #0F3554;
}
.comment-sorter {
display: inline-block;
float: right;
}
.comment-sorter .dropdown-toggle {
color: #333;
font-size: 13px;
}
[dir=rtl] .comment-sorter {
float: left;
}
.comment-wrapper {
display: flex;
position: relative;
}
.comment-wrapper.comment-official {
border: 1px solid rgba(0, 0, 0, 1);
padding: 40px 20px 20px;
}
@media (min-width: 768px) {
.comment-wrapper.comment-official {
padding-top: 20px;
}
}
.comment-info {
min-width: 0;
padding-right: 20px;
width: 100%;
}
[dir=rtl] .comment-info {
padding-right: 0;
padding-left: 20px;
}
.comment-author {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.comment-author {
justify-content: space-between;
}
}
.comment-avatar {
margin-right: 10px;
}
[dir=rtl] .comment-avatar {
margin-left: 10px;
margin-right: 0;
}
.comment-meta {
flex: 1 1 auto;
}
.comment-labels {
flex-basis: 100%;
}
@media (min-width: 768px) {
.comment-labels {
flex-basis: auto;
}
}
.comment .status-label:not(.status-label-official) {
margin-top: 10px;
}
@media (min-width: 768px) {
.comment .status-label:not(.status-label-official) {
margin-top: 0;
}
}
.comment-form {
display: flex;
padding-top: 30px;
word-wrap: break-word;
}
.comment-container {
width: 100%;
}
.comment-form-controls {
display: none;
margin-top: 10px;
text-align: left;
}
@media (min-width: 768px) {
[dir=ltr] .comment-form-controls {
text-align: right;
}
}
.comment-form-controls input[type=submit] {
margin-top: 15px;
}
@media (min-width: 1024px) {
.comment-form-controls input[type=submit] {
margin-left: 15px;
}
[dir=rtl] .comment-form-controls input[type=submit] {
margin-left: 0;
margin-right: 15px;
}
}
.comment-form-controls input[type=checkbox] {
margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
margin-left: 5px;
}
.comment-ccs {
display: none;
}
.comment-ccs + textarea {
margin-top: 10px;
}
.comment-attachments {
margin-top: 10px;
}
.comment-attachments a {
color: rgba(0, 0, 0, 1);
}
.comment-body {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
display: flow-root;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
line-height: 1.6;
overflow-x: auto;
}
.comment-body a {
color: #1F73B7;
text-decoration: underline;
}
.comment-body a:visited {
color: #9358B0;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
color: #0F3554;
}
.comment-body img {
height: auto;
max-width: 100%;
}
.comment-body p > img.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.comment-body figure.image {
display: table;
margin: 0 auto;
}
.comment-body figure.image > img {
display: block;
width: 100%;
}
.comment-body figure.image.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.comment-body figcaption {
padding: 10px 0;
font-size: 12px;
text-align: center;
background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
padding-left: 20px;
list-style-position: outside;
margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
padding-right: 20px;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
margin: 0;
}
.comment-body ul {
list-style-type: disc;
}
.comment-body :not(pre) > code {
background: #f7f7f7;
border: 1px solid #ddd;
border-radius: 3px;
padding: 0 5px;
margin: 0 2px;
}
.comment-body pre {
background: #f7f7f7;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
direction: ltr;
}
.comment-body blockquote {
border-left: 1px solid #ddd;
color: #333;
font-style: italic;
padding: 0 15px;
}
.comment-mark-as-solved {
display: inline-block;
}
/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
display: flex;
flex-direction: column;
text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
text-decoration: none;
}
.vote-sum {
color: #333;
display: block;
margin: 3px 0;
}
[dir=rtl] .vote-sum {
direction: ltr;
unicode-bidi: bidi-override;
}
.vote-up svg {
transform: scale(1, -1);
}
.vote-up:hover,
.vote-down:hover {
color: rgba(0, 0, 0, 1);
}
.vote-up, .vote-down {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
color: #333;
cursor: pointer;
min-height: 35px;
min-width: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.vote-voted {
color: rgba(0, 0, 0, 1);
}
.vote-voted:hover {
color: #000;
}
/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
text-align: center;
flex-shrink: 0; /*Avoid collapsing elements in Safari*/
}
.actions button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
cursor: pointer;
min-height: 35px;
min-width: 35px;
display: flex;
align-items: center;
justify-content: center;
}
/***** Community *****/
.community-hero {
background-image: url(/hc/theming_assets/01KS0Y4P9M6YJ4VCNSZS79TJYH);
margin-bottom: 10px;
}
.community-footer {
padding-top: 50px;
text-align: center;
}
.community-footer-title {
font-size: 16px;
margin-bottom: 20px;
}
.community-featured-posts .title {
font-size: 18px;
font-weight: 600;
}
.community-featured-posts, .community-activity {
padding-top: 40px;
width: 100%;
}
.community-header {
margin-bottom: 30px;
}
.community-header .title {
margin-bottom: 0;
font-size: 16px;
}
.post-to-community {
margin-top: 10px;
}
@media (min-width: 768px) {
.post-to-community {
margin: 0;
}
}
/* Community topics grid */
.topics {
max-width: none;
width: 100%;
}
.topics-item .meta-group {
justify-content: center;
margin-top: 20px;
}
/* Community topic page */
.topic-header {
border-bottom: 1px solid #ddd;
font-size: 13px;
}
@media (min-width: 768px) {
.topic-header {
padding-bottom: 10px;
}
}
.topic-header .dropdown {
display: block;
border-top: 1px solid #ddd;
padding: 10px 0;
}
@media (min-width: 768px) {
.topic-header .dropdown {
border-top: 0;
display: inline-block;
margin-right: 20px;
padding: 0;
}
}
.no-posts-with-filter {
margin-top: 20px;
margin-bottom: 20px;
}
/* Topic, post and user follow button */
.community-follow {
margin-bottom: 10px;
width: 100%;
}
@media (min-width: 768px) {
.community-follow {
margin-bottom: 0;
width: auto;
}
}
.community-follow button {
line-height: 30px;
padding: 0 10px 0 15px;
position: relative;
width: 100%;
}
@media (min-width: 768px) {
.community-follow button {
width: auto;
}
}
.community-follow button:hover {
background-color: rgba(0, 0, 0, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
border-color: #FFFFFF;
color: #FFFFFF;
}
.community-follow button[data-selected=true] {
background-color: rgba(0, 0, 0, 1);
color: #FFFFFF;
}
.community-follow button[data-selected=true]::after {
border-left: 1px solid #FFFFFF;
color: #FFFFFF;
}
.community-follow button[data-selected=true]:hover {
background-color: #000;
border-color: #000;
}
.community-follow button::after {
border-left: 1px solid rgba(0, 0, 0, 1);
content: attr(data-follower-count);
color: rgba(0, 0, 0, 1);
display: inline-block;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
margin-left: 15px;
padding-left: 10px;
position: absolute;
right: 10px;
}
@media (min-width: 768px) {
.community-follow button::after {
position: static;
}
}
[dir=rtl] .community-follow button::after {
border-left: 0;
border-right: 1px solid rgba(0, 0, 0, 1);
margin: 0 10px 0 0;
padding: 0 10px 0 0;
}
/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
padding: 0;
}
.striped-list-item {
align-items: flex-start;
border-bottom: 1px solid #ddd;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px 0;
}
@media (min-width: 768px) {
.striped-list-item {
align-items: center;
flex-direction: row;
}
}
.striped-list-info {
flex: 2;
}
.striped-list-title {
color: #1F73B7;
margin-bottom: 10px;
margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
text-decoration: underline;
}
.striped-list-title:visited {
color: #9358B0;
}
.striped-list .meta-group {
margin: 5px 0;
}
.striped-list-count {
color: #333;
font-size: 13px;
justify-content: flex-start;
text-transform: capitalize;
}
@media (min-width: 768px) {
.striped-list-count {
display: flex;
flex: 1;
justify-content: space-around;
}
}
.striped-list-count-item::after {
content: "·";
display: inline-block;
padding: 0 5px;
}
@media (min-width: 768px) {
.striped-list-count-item::after {
display: none;
}
}
.striped-list-count-item:last-child::after {
display: none;
}
.striped-list-number {
text-align: center;
}
@media (min-width: 768px) {
.striped-list-number {
color: rgba(0, 0, 0, 1);
display: block;
}
}
/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
background-color: #038153;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 600;
margin-right: 2px;
padding: 3px 10px;
vertical-align: middle;
white-space: nowrap;
display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
background-color: rgba(0, 0, 0, 1);
}
.status-label-official {
border-radius: 0;
margin-right: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
}
@media (min-width: 768px) {
.status-label-official {
border-radius: 0 0 4px 4px;
right: 30px;
width: auto;
}
}
[dir=rtl] .status-label-official {
left: 30px;
right: auto;
}
.status-label-not-planned, .status-label-closed {
background-color: #e9ebed;
color: #333;
}
.status-label-pending, .status-label-pending-moderation {
background-color: #1f73b7;
text-align: center;
}
.status-label-open {
background-color: #c72a1c;
}
.status-label-solved {
background-color: #68737d;
}
.status-label-new {
background-color: #ffb648;
color: #703b15;
}
.status-label-hold {
background-color: #000;
}
.status-label-request {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 768px) {
.status-label-request {
max-width: 150px;
}
}
/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70% | 30%
*/
.post {
flex: 1;
margin-bottom: 10px;
}
@media (min-width: 1024px) {
.post {
flex: 1 0 70%;
max-width: 70%;
}
}
.post-container {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.post-container {
flex-direction: row;
}
}
.post-header {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 10px;
}
@media (min-width: 768px) {
.post-header {
align-items: baseline;
flex-direction: row;
}
}
.post-header .status-label {
vertical-align: super;
}
.post-title {
margin-bottom: 20px;
width: 100%;
}
@media (min-width: 768px) {
.post-title {
margin-bottom: 0;
padding-right: 10px;
}
}
.post-title h1 {
display: inline;
vertical-align: middle;
}
@media (min-width: 768px) {
.post-title h1 {
margin-right: 5px;
}
}
.post-author {
align-items: flex-start;
display: flex;
justify-content: space-between;
}
.post-avatar {
margin-bottom: 30px;
}
.post-content {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
line-height: 1.6;
word-break: break-word;
}
.post-info-container {
display: flex;
margin-bottom: 40px;
}
.post-info {
min-width: 0;
padding-right: 20px;
width: 100%;
}
[dir=rtl] .post-info {
padding-right: 0;
padding-left: 20px;
}
.post-meta {
display: inline-block;
flex: 1;
margin-left: 10px;
vertical-align: middle;
}
[dir=rtl] .post-meta {
margin-left: 0;
margin-right: 10px;
}
.post-body {
display: flow-root;
}
.post-body a {
color: #1F73B7;
text-decoration: underline;
}
.post-body a:visited {
color: #9358B0;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
color: #0F3554;
}
.post-body img {
height: auto;
max-width: 100%;
}
.post-body p > img.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.post-body figure.image {
display: table;
margin: 0 auto;
}
.post-body figure.image > img {
display: block;
width: 100%;
}
.post-body figure.image.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.post-body figcaption {
padding: 10px 0;
font-size: 12px;
text-align: center;
background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
padding-left: 20px;
list-style-position: outside;
margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
padding-right: 20px;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
margin: 0;
}
.post-body ul {
list-style-type: disc;
}
.post-body :not(pre) > code {
background: #f7f7f7;
border: 1px solid #ddd;
border-radius: 3px;
padding: 0 5px;
margin: 0 2px;
}
.post-body pre {
background: #f7f7f7;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
direction: ltr;
}
.post-body blockquote {
border-left: 1px solid #ddd;
color: #333;
font-style: italic;
padding: 0 15px;
}
.post-footer {
align-items: center;
display: flex;
justify-content: space-between;
padding-bottom: 20px;
}
.post-comment-count {
color: #333;
}
.post-comment-count:hover {
text-decoration: none;
}
.post-comment-count .icon-comments {
color: rgba(0, 0, 0, 1);
display: inline-block;
width: 18px;
height: 18px;
margin: 5px;
vertical-align: middle;
}
.post-sidebar {
border-top: 1px solid #ddd;
flex: 1;
padding: 30px 0;
text-align: center;
}
@media (min-width: 1024px) {
.post-sidebar {
border: 0;
flex: 1 0 30%;
padding: 0 0 0 50px;
text-align: initial;
}
[dir=rtl] .post-sidebar {
padding: 0 50px 0 0;
}
}
.post-sidebar-title {
font-size: 18px;
font-weight: 600;
}
.post-comments {
margin-bottom: 20px;
}
@media (min-width: 1024px) {
.post-comments {
margin-bottom: 0;
}
}
/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community
comments */
.community-badge-title {
background-color: #04444d;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 0px 8px;
vertical-align: top;
white-space: nowrap;
display: inline-block;
line-height: 18px;
vertical-align: middle;
}
.community-badge-titles {
display: inline;
}
.community-badge-achievement {
display: block;
height: 16px;
white-space: nowrap;
width: 16px;
}
.community-badge-achievement img {
width: 100%;
height: 100%;
}
.community-badge-achievements {
display: flex;
}
.community-badge-achievements-rest {
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
vertical-align: top;
}
.community-badge {
margin: 2px;
}
.profile-info .community-badge-title {
padding: 2px 8px;
line-height: 20px;
}
.profile-info .community-badge-achievement {
height: 40px;
width: 40px;
}
.profile-info .community-badge-achievements-rest {
line-height: 40px;
font-size: 20px;
}
/* Navigation element that collapses on mobile */
.collapsible-nav {
flex-direction: column;
font-size: 14px;
position: relative;
}
@media (min-width: 768px) {
.collapsible-nav {
flex-direction: row;
}
}
.collapsible-nav-border {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
.collapsible-nav-border {
border-top: 0;
}
}
.collapsible-nav-toggle {
top: 22.5px;
transform: translateY(-50%);
position: absolute;
right: 0;
padding: 0;
border: 0;
background: none;
width: 25px;
height: 25px;
border-radius: 50%;
}
@media (min-width: 768px) {
.collapsible-nav-toggle {
display: none;
}
}
[dir=rtl] .collapsible-nav-toggle {
left: 0;
right: auto;
}
.collapsible-nav-toggle-icon {
display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
display: inline-block;
}
.collapsible-nav-toggle:focus {
outline: none;
border: 1px solid rgba(0, 0, 0, 1);
}
.collapsible-nav-list {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.collapsible-nav-list {
flex-direction: row;
}
}
.collapsible-nav-list li {
color: rgba(0, 0, 0, 1);
line-height: 45px;
order: 1;
}
@media (min-width: 768px) {
.collapsible-nav-list li {
line-height: normal;
margin-right: 30px;
}
[dir=rtl] .collapsible-nav-list li {
margin-left: 30px;
margin-right: 0;
}
.collapsible-nav-list li a {
text-decoration: none;
padding: 15px 0;
}
}
.collapsible-nav-list li a {
color: rgba(0, 0, 0, 1);
display: block;
}
@media (min-width: 768px) {
.collapsible-nav-list li:hover {
border-bottom: 4px solid #ddd;
}
.collapsible-nav-list li:hover a:not([aria-current=page]) {
padding: 15px 0 11px 0;
text-decoration: none;
}
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
display: none;
}
@media (min-width: 768px) {
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
display: block;
}
}
@media (min-width: 768px) {
.collapsible-nav-list li[aria-selected=true] {
padding: 15px 0 11px 0;
}
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
order: 0;
position: relative;
}
@media (min-width: 768px) {
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
border-bottom: 4px solid rgba(0, 0, 0, 1);
order: 1;
}
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
color: rgba(0, 0, 0, 1);
}
.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
display: block;
}
/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
flex: 1;
max-height: 45px;
overflow: hidden;
padding: 10px 0;
position: relative;
}
@media (min-width: 1024px) {
.collapsible-sidebar {
max-height: none;
padding: 0;
}
}
.collapsible-sidebar-title {
margin-top: 0;
}
.collapsible-sidebar-toggle {
position: absolute;
top: 22.5px;
transform: translateY(-50%);
right: 0;
padding: 0;
border: 0;
background: none;
width: 25px;
height: 25px;
border-radius: 50%;
}
@media (min-width: 1024px) {
.collapsible-sidebar-toggle {
display: none;
}
}
[dir=rtl] .collapsible-sidebar-toggle {
left: 0;
right: auto;
}
.collapsible-sidebar-toggle-icon {
display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
display: inline-block;
}
.collapsible-sidebar-toggle:focus {
outline: none;
border: 1px solid rgba(0, 0, 0, 1);
}
.collapsible-sidebar-body {
display: none;
}
@media (min-width: 1024px) {
.collapsible-sidebar-body {
display: block;
}
}
.collapsible-sidebar[aria-expanded=true] {
max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
display: block;
}
/***** My activities *****/
.my-activities-nav {
background-color: #f2f2f2;
margin-bottom: 20px;
}
.my-activities-sub-nav {
margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
display: block;
margin-bottom: 10px;
max-width: 350px;
white-space: normal;
}
@media (min-width: 1024px) {
.my-activities-table .striped-list-title {
margin-bottom: 0;
max-width: 500px;
min-width: 350px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.my-activities-table thead {
display: none;
}
@media (min-width: 768px) {
.my-activities-table thead {
display: table-header-group;
}
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
padding-left: 0;
}
@media (min-width: 1024px) {
.my-activities-table th:first-child,
.my-activities-table td:first-child {
width: 500px;
}
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
padding-right: 0;
}
.my-activities-table td:not(:first-child) {
display: none;
}
@media (min-width: 768px) {
.my-activities-table td:not(:first-child) {
display: table-cell;
}
}
/* Requests table */
.requests-search {
width: 100%;
}
.requests-table-toolbar {
align-items: flex-end;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.requests-table-toolbar {
flex-direction: row;
}
}
.requests-table-toolbar .search {
flex: 1;
width: 100%;
}
.requests-table-toolbar .request-table-filter {
width: 100%;
}
@media (min-width: 768px) {
.requests-table-toolbar .request-table-filter {
width: auto;
}
}
.requests-table-toolbar .request-filter {
display: block;
}
@media (min-width: 768px) {
.requests-table-toolbar .request-filter {
margin: 0 0 0 30px;
}
[dir=rtl] .requests-table-toolbar .request-filter {
margin: 0 30px 0 0;
}
}
.requests-table-toolbar .request-filter-label {
font-size: 13px;
margin-top: 30px;
}
@media (min-width: 768px) {
.requests-table-toolbar .request-filter-label {
margin-top: 0;
}
}
.requests-table-toolbar select {
max-height: 40px;
margin-bottom: 30px;
width: 100%;
}
@media (min-width: 768px) {
.requests-table-toolbar select {
margin-bottom: 0;
max-width: 300px;
width: auto;
}
}
@media (min-width: 768px) {
.requests-table-toolbar .organization-subscribe {
margin-left: 10px;
}
[dir=rtl] .requests-table-toolbar .organization-subscribe {
margin: 0 10px 0 0;
}
}
.requests-table-toolbar .organization-subscribe button {
line-height: 40px;
max-height: 40px;
padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
content: "";
margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
margin-top: 20px;
}
.requests-table-toolbar + .requests {
margin-top: 40px;
}
.requests .requests-table-meta {
display: block;
}
@media (min-width: 768px) {
.requests .requests-table-meta {
display: none;
}
}
.requests .requests-table thead {
display: none;
}
@media (min-width: 768px) {
.requests .requests-table thead {
display: table-header-group;
}
}
.requests .requests-table-info {
display: block;
}
@media (min-width: 768px) {
.requests .requests-table-info {
display: table-cell;
vertical-align: middle;
width: auto;
}
}
.requests .requests-table .requests-link {
position: relative;
}
.requests .requests-table .requests-sort-symbol {
position: absolute;
left: calc(100% + 3px);
bottom: 0;
font-size: 10px;
}
/* Following table */
@media (min-width: 768px) {
.subscriptions-subscribe button {
width: auto;
}
}
.subscriptions-table td:last-child {
display: block;
}
@media (min-width: 768px) {
.subscriptions-table td:last-child {
display: table-cell;
}
}
.subscriptions-table td:first-child {
display: flex;
align-items: center;
}
.subscriptions-table .user-avatar {
margin-right: 10px;
}
.subscriptions .striped-list-title {
display: inline-block;
vertical-align: middle;
}
/* Contributions table */
.contributions-table td:last-child {
color: #333;
font-size: 13px;
}
@media (min-width: 768px) {
.contributions-table td:last-child {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
}
.no-activities {
color: #333;
}
/***** Request *****/
.request-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 1024px) {
.request-container {
align-items: flex-start;
flex-direction: row;
}
}
.request-container .comment-container {
min-width: 0;
}
.request-breadcrumbs {
margin-bottom: 40px;
}
@media (min-width: 1024px) {
.request-breadcrumbs {
margin-bottom: 60px;
}
}
.request-main {
flex: 1 0 auto;
order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
display: none;
}
.request-main .comment-fields.shown {
display: block;
}
.request-main .request-submit-comment.shown {
display: inline;
}
@media (min-width: 1024px) {
.request-main {
flex: 0 0 66%;
order: 0;
min-width: 0;
}
}
.request-main .comment-form-controls {
display: block;
}
.request-main .comment-ccs {
display: block;
}
.request-main .comment-show-container {
border-radius: 2px;
border: 1px solid #ddd;
color: #333;
text-align: inherit;
padding: 8px 25px;
width: 100%;
}
.request-main .comment-show-container.hidden {
display: none;
}
.request-main .form-field.comment-ccs > ul {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
border: 1px solid rgba(0, 0, 0, 1);
}
.request-main .form-field.comment-ccs > input[type=text] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
.request-main .comment-ccs + textarea {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
border-top: 1px solid rgba(0, 0, 0, 1);
}
.request-main input#mark_as_solved {
display: none;
}
.request-title {
width: 100%;
}
@media (min-width: 1024px) {
.request-title {
border-bottom: 1px solid #ddd;
margin-bottom: 0;
max-width: 66%;
padding-bottom: 20px;
}
}
.request-sidebar {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
flex: 1 0 auto;
order: 0;
}
@media (min-width: 1024px) {
.request-sidebar {
background-color: #f7f7f7;
border: 0;
font-size: 13px;
flex: 0 0 auto;
padding: 0 20px;
width: 30%;
}
}
.request-sidebar h2 {
font-size: 15px;
font-weight: 600;
position: relative;
}
@media (min-width: 1024px) {
.request-sidebar h2 {
display: none;
}
}
.request-details {
border-bottom: 1px solid #ddd;
font-size: 0;
margin: 0;
padding-bottom: 20px;
}
.request-details:last-child {
border: 0;
}
.request-details dt, .request-details dd {
display: inline-block;
vertical-align: top;
font-size: 13px;
margin: 20px 0 0 0;
}
.request-details dd {
padding: 0 10px;
width: 60%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.request-details dd::after {
content: "\a";
white-space: pre;
}
.request-details dt {
line-break: strict;
color: #333;
width: 40%;
}
.request-details .request-collaborators {
display: inline-block;
}
.request-attachments dt, .request-attachments dd {
width: 100%;
}
.request-attachments dd {
margin: 10px 0 0 0;
}
.request-form textarea {
min-height: 120px;
}
.request-follow-up {
padding-top: 20px;
}
/***** Pagination *****/
.pagination {
margin: 20px 0;
text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
display: inline-block;
}
.pagination-first-link, .pagination-last-link {
padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.pagination-next-link {
padding-right: 10px;
}
.pagination-next-text {
margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
margin-left: 10px;
}
.pagination-prev-link {
padding-left: 10px;
}
.pagination-prev-text {
margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
margin-right: 10px;
}
/***** Metadata *****/
.meta-group {
display: block;
}
.meta-group-opposite {
float: right;
}
[dir=rtl] .meta-group-opposite {
float: left;
}
.meta-group * {
display: inline;
}
.meta-data {
color: #333;
font-size: 13px;
}
.meta-data:not(:last-child)::after {
content: "·";
margin: 0 5px;
}
/* User Profiles */
.profile-header {
padding: 30px 0;
background-color: #f7f7f7;
}
.profile-header .container {
display: flex;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.profile-header .container {
flex-wrap: nowrap;
}
}
.profile-header .profile-info {
flex-basis: 100%;
display: flex;
flex-wrap: wrap;
min-width: 0;
}
.profile-avatar {
position: relative;
line-height: 0;
align-self: center;
margin-right: 10px;
}
[dir=rtl] .profile-avatar {
margin-left: 10px;
margin-right: 0;
}
.profile-avatar .user-avatar {
width: 80px;
height: 80px;
}
.profile-avatar .icon-agent {
bottom: 0;
right: 0;
}
.profile-header .basic-info {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
flex-basis: 0;
min-width: 0;
}
.profile-header .basic-info .name {
margin: 0;
line-height: 25px;
vertical-align: middle;
display: inline;
}
.profile-header .options {
display: flex;
flex-basis: 100%;
margin-top: 12px;
align-items: flex-start;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.profile-header .options {
flex-wrap: nowrap;
flex-basis: auto;
margin-top: 0;
margin-left: 10px;
}
[dir=rtl] .profile-header .options {
margin-left: 0;
margin-right: 10px;
}
.profile-header .options > :not(:last-child) {
margin-bottom: 0;
margin-right: 10px;
}
[dir=rtl] .profile-header .options > :not(:last-child) {
margin-left: 10px;
margin-right: 0;
}
}
.user-profile-actions {
width: 100%;
margin-bottom: 15px;
}
.profile-header .description {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
margin: 15px 0;
flex-basis: 100%;
}
.profile-stats {
font-size: 13px;
display: flex;
flex-direction: column;
flex-basis: 100%;
}
.profile-stats .stat {
display: flex;
margin-bottom: 10px;
}
.profile-stats .stat-label {
color: #333;
flex: 0 0 100px;
margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
margin-left: 10px;
margin-right: 0;
}
.profile-stats-activity {
border-top: solid 1px #ddd;
margin-top: 15px;
}
@media (min-width: 768px) {
.profile-stats-activity {
border-top: 0;
flex-direction: row;
}
}
@media (min-width: 768px) {
.profile-stats-activity .stat {
flex-direction: column;
}
}
.profile-stats-activity .stat:first-child {
margin-top: 10px;
}
@media (min-width: 768px) {
.profile-stats-activity .stat:first-child {
margin-top: 0;
}
}
@media (min-width: 768px) {
.profile-stats-activity .stat:not(:last-child) {
margin-right: 40px;
}
[dir=rtl] .profile-stats-activity .stat:not(:last-child) {
margin-left: 40px;
margin-right: 0;
}
}
@media (min-width: 768px) {
.profile-stats-activity .stat-label {
flex: 0 1 auto;
}
}
.profile-stats-counters {
border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
.profile-stats-counters {
flex: 0 0 200px;
border-bottom: 0;
margin-left: 40px;
}
[dir=rtl] .profile-stats-counters {
margin-left: 0;
margin-right: 40px;
}
}
@media (min-width: 1024px) {
.profile-stats-counters {
flex: 0 0 270px;
margin-left: 60px;
}
[dir=rtl] .profile-stats-counters {
margin-right: 60px;
margin-left: 0;
}
}
@media (min-width: 768px) {
.profile-stats-counters .stat {
flex-direction: column;
}
}
@media (min-width: 1024px) {
.profile-stats-counters .stat {
flex-direction: row;
}
}
@media (min-width: 768px) {
.profile-stats-counters .stat:not(:last-child) {
margin-bottom: 15px;
}
}
@media (min-width: 768px) {
.profile-stats-counters .stat-label {
flex: 0 1 auto;
}
}
@media (min-width: 1024px) {
.profile-stats-counters .stat-label {
flex: 0 0 100px;
}
}
.profile-private-badge {
flex-basis: 100%;
border: solid 1px rgba(0, 0, 0, 1);
border-radius: 4px;
color: rgba(0, 0, 0, 1);
padding: 5px 20px;
font-size: 12px;
text-align: center;
}
.profile-private-badge .profile-private-icon {
margin-left: 5px;
line-height: 15px;
}
@media (min-width: 768px) {
.profile-private-badge {
flex-basis: auto;
}
}
.profile-nav {
background-color: #f2f2f2;
margin-bottom: 37px;
}
.profile-section {
width: 100%;
}
@media (min-width: 1024px) {
.profile-section {
width: calc(100% - 330px);
}
}
.profile-section-header {
display: flex;
flex-wrap: wrap;
}
.profile-section-title {
flex-basis: 100%;
margin-bottom: 0;
}
.profile-section-description {
flex-basis: 100%;
padding: 10px 0;
color: #333;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 768px) {
.profile-section-description {
flex: 1 0 50%;
padding-bottom: 0;
}
}
.profile-section-sorter {
flex-basis: 100%;
border-top: solid 1px #eee;
font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
padding: 10px 0;
width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
position: absolute;
right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
left: 0;
right: initial;
}
@media (min-width: 768px) {
.profile-section-sorter .dropdown-toggle::after {
position: relative;
}
}
@media (min-width: 768px) {
.profile-section-sorter {
flex: 0 1 auto;
padding-top: 0;
border-top: 0;
margin-left: 20px;
}
[dir=rtl] .profile-section-sorter {
margin-left: 0;
margin-right: 20px;
}
}
.profile-badges-items {
margin-top: 25px;
}
.profile-badges-item {
border-top: 1px solid #ddd;
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-start;
padding: 27px 12px;
}
.profile-badges-item > div {
padding-right: 12px;
padding-left: 12px;
}
.profile-badges-item-image {
height: 40px;
width: 40px;
margin-right: 12px;
}
.profile-badges-item-image img {
max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
margin-left: 12px;
margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-title {
font-size: 15px;
margin-bottom: 10px;
}
.profile-badges-item-title {
font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
color: #333;
font-size: 13px;
margin: 0;
}
.profile-badges-item-metadata {
margin-left: auto;
text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
margin-left: 0;
margin-right: auto;
text-align: left;
}
.profile-contribution {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
padding: 20px 0;
position: relative;
}
.profile-contribution-header {
margin-bottom: 5px;
}
.profile-contribution-title {
margin: 0 0 5px 0;
display: inline;
line-height: 21px;
font-size: 15px;
vertical-align: middle;
}
.profile-contribution-body {
margin: 10px 0;
}
.profile-contribution-list > .profile-contribution {
border-top: 1px solid #eee;
}
@media (min-width: 768px) {
.profile-contribution-list > .profile-contribution {
padding-left: 30px;
}
[dir=rtl] .profile-contribution-list > .profile-contribution {
padding-right: 30px;
padding-left: 0;
}
}
.profile-contribution-list > .profile-contribution:last-child {
border-bottom: 1px solid #eee;
}
.profile-contribution-icon {
left: 0;
position: absolute;
color: #ccc;
line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
right: 0;
}
.profile-contribution-icon svg {
vertical-align: middle;
}
.profile-contribution-list .profile-contribution-header {
margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
padding-right: 30px;
padding-left: 0;
}
@media (min-width: 768px) {
.profile-contribution-list .profile-contribution-header {
margin-left: 0;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
padding-right: 0;
}
}
.profile-comments .profile-contribution-breadcrumbs {
margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
padding-right: 30px;
padding-left: 0;
}
@media (min-width: 768px) {
.profile-comments .profile-contribution-breadcrumbs {
margin-left: 0;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
padding-right: 0;
}
}
.profile-section .no-activity,
.profile-section .private-activity {
display: block;
margin-top: 40px;
color: #999;
}
.private-activity-icon {
margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
margin-right: 0;
margin-left: 10px;
}
.profile-activity-list {
margin-top: 25px;
}
.profile-activity {
position: relative;
padding-bottom: 30px;
}
@media (min-width: 768px) {
.profile-activity {
padding-left: 20px;
}
[dir=rtl] .profile-activity {
padding-right: 20px;
padding-left: 0;
}
}
@media (min-width: 768px) {
.profile-activity:not(:last-child) {
border-left: 1px solid #ddd;
}
[dir=rtl] .profile-activity:not(:last-child) {
border-left: 0;
border-right: 1px solid #ddd;
}
}
.profile-activity-header {
display: flex;
align-items: center;
margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
margin-left: 0;
margin-right: 35px;
}
@media (min-width: 768px) {
.profile-activity-header {
margin-left: 0;
}
[dir=rtl] .profile-activity-header {
margin-right: 0;
}
}
.profile-activity-header .user-avatar {
width: 40px;
height: 40px;
margin-right: 10px;
min-width: 40px;
align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
margin-left: 10px;
margin-right: 0;
}
.profile-activity-description {
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
word-wrap: break-word;
margin: 0;
min-width: 0;
width: 100%;
}
.profile-activity-description span:first-child {
font-weight: 600;
display: inline;
}
.profile-activity-contribution {
padding: 20px;
margin-top: 10px;
border-radius: 8px;
background-color: #f7f7f7;
}
@media (min-width: 768px) {
.profile-activity-contribution {
margin-top: 0;
margin-left: 50px;
}
[dir=rtl] .profile-activity-contribution {
margin-left: 0;
margin-right: 50px;
}
}
.profile-activity-icon {
position: absolute;
left: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background-size: 14px 14px;
background-repeat: no-repeat;
background-color: #FFFFFF;
background-position: 50% 50%;
text-align: center;
color: #ccc;
}
[dir=rtl] .profile-activity-icon {
right: 0;
}
@media (min-width: 768px) {
.profile-activity-icon {
left: -14px;
}
[dir=rtl] .profile-activity-icon {
right: -14px;
}
}
.profile-activity-icon svg {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 1em;
height: 1em;
margin: auto;
}
/***** Search results *****/
.search-results {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
@media (min-width: 1024px) {
.search-results {
flex-direction: row;
}
}
.search-results-column {
flex: 1;
}
@media (min-width: 1024px) {
.search-results-column {
flex: 0 0 75%;
}
}
.search-results-sidebar {
border-top: 1px solid #ddd;
flex: 1 0 auto;
margin-bottom: 20px;
padding: 0;
}
@media (min-width: 1024px) {
.search-results-sidebar {
border: 0;
flex: 0 0 20%;
height: auto;
}
}
.search-results-sidebar .sidenav-item {
border-radius: 4px;
padding: 10px 36px;
margin-bottom: 4px;
color: rgba(0, 0, 0, 1);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
background-color: #e9ebed;
text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
background: #E9EBED;
border-radius: 4px;
padding: 4px 12px;
text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 24px;
text-align: center;
letter-spacing: -0.000427656px;
color: #49545C;
flex-grow: 0;
vertical-align: middle;
display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
color: #555555;
vertical-align: middle;
display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
display: none;
}
@media (min-width: 1024px) {
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
display: block;
}
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
color: #666;
}
.search-results-sidebar .see-all-filters {
background: none;
border: none;
cursor: pointer;
display: block;
padding: 10px;
color: #1F73B7;
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
display: none;
}
.search-results-sidebar .see-all-filters:hover {
text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
content: " ⌄";
font-weight: bold;
}
.search-results-subheading {
font-size: 18px;
font-weight: 600;
}
.search-results-list {
margin-bottom: 25px;
}
.search-results-list > li {
padding: 20px 0;
}
.search-results-list > li:first-child {
border-top: 1px solid #ddd;
}
.search-results .no-results {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4rem;
}
.search-results .no-results .headline {
color: #2F3941;
font-weight: 400;
font-size: 18px;
line-height: 24px;
letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
color: #68737D;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
color: #1F73B7;
}
.search-results .no-results .action-prompt a:visited {
color: #1F73B7;
}
.search-result-title-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.search-result-title {
font-size: 16px;
margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
color: #333;
font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
color: rgba(0, 0, 0, 1);
vertical-align: middle;
width: 13px;
height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
margin-right: 20px;
}
.search-result-meta-container {
color: #666;
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.search-result-meta-container {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 1024px) {
.search-result-meta-container nav {
flex: 1;
}
}
@media (min-width: 1024px) {
[dir=ltr] .search-result-meta-container .meta-data {
margin-left: 20px;
}
}
@media (min-width: 1024px) {
[dir=rtl] .search-result-meta-container .meta-data {
margin-right: 20px;
}
}
.search-result-meta-container .meta-data::after {
content: none;
}
.search-result-breadcrumbs {
margin: 0;
}
.search-result-description {
margin-top: 10px;
margin-bottom: 0;
word-break: break-word;
}
/* By default use bold instead of italic to highlight */
.search-results-description em {
font-style: normal;
font-weight: bold;
}
/* Add a yellow background for Chinese */
html[lang|=zh] .search-results-description em {
font-style: normal;
background: yellow;
}
/***** Notifications *****/
.notification {
border: 1px solid;
display: table;
font-family: sans-serif;
font-size: 12px;
padding: 13px 15px;
transition: height 0.2s;
width: 100%;
color: #555;
}
.notification a {
color: #158ec2;
}
.notification-inner {
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
}
.notification-icon, .notification-inline.notification-error::before, .notification-text,
.notification-dismiss {
display: table-cell;
vertical-align: middle;
}
.notification-text {
padding: 0 15px;
width: 100%;
}
.notification + .notification {
margin-bottom: -1px;
position: relative;
top: -1px;
}
/* Error */
.notification-error {
background: #ffeded;
border-color: #f7cbcb;
}
.notification-error .notification-icon::before, .notification-error .notification-
inline.notification-error::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12'height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccirclecx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccirclecx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}
/* Notice */
.notification-notice {
background: #dbf3ff;
border-color: #b5e0f5;
}
.notification-notice .notification-icon::before, .notification-notice .notification-
inline.notification-error::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12'height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpathstroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6'r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* Alert / Lock */
.notification-alert {
color: #ad5e18;
background: #fff8ed;
border-color: #fcdba9;
}
.notification-alert .notification-icon::before, .notification-alert .notification-
inline.notification-error::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12'height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 000-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}
.notification-icon::before, .notification-inline.notification-error::before {
background-size: cover;
content: "";
display: inline-block;
height: 14px;
width: 14px;
vertical-align: middle;
}
/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
color: #555;
cursor: pointer;
opacity: 0.6;
transition: opacity 100ms ease;
text-decoration: none !important;
}
.notification-dismiss:hover {
opacity: 1;
}
/* Inline notifications */
.notification-inline {
border-radius: 4px;
line-height: 14px;
margin-top: 5px;
padding: 5px;
position: relative;
text-align: left;
vertical-align: middle;
}
[dir=rtl] .notification-inline {
text-align: right;
}
.notification-inline[aria-hidden=true] {
display: none;
}
.notification-inline.notification-error::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12'height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccirclecx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccirclecx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
margin: -2px 5px 0 0;
}
[dir=rtl] .notification-inline.notification-error::before {
margin: 0 0 0 5px;
}
.notification-inline.notification-error {
background-color: #fff0f1;
border: 1px solid #e35b66;
color: #cc3340;
}
.notification-inline.notification-large {
padding: 13px 15px;
margin-bottom: 25px;
}
.notification-left-aligned {
text-align: left;
padding-left: 0;
}
html[dir=rtl] .notification-left-aligned {
text-align: right;
padding-left: auto;
padding-right: 0;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-toggle {
cursor: pointer;
background: none;
border: 0;
display: inline-block;
padding: 0;
text-align: initial;
vertical-align: middle;
}
.dropdown-toggle:hover {
text-decoration: none;
}
.dropdown-toggle > * {
display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
display: block;
}
.dropdown-menu {
background: #fff;
border: 1px solid #d8dcde;
border-radius: 3px;
box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
display: none;
font-size: 14px;
font-style: normal;
font-weight: normal;
left: 0;
margin-top: 1px;
min-width: 170px;
padding: 10px 0;
position: absolute;
text-align: left;
z-index: 1000;
}
[dir=rtl] .dropdown-menu {
text-align: right;
}
.dropdown-menu [role=separator] {
border-bottom: 1px solid #e9ebed;
margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
color: #2f3941;
cursor: pointer;
display: block;
padding: 7px 40px 7px 20px;
white-space: nowrap;
background-color: transparent;
border: 0;
-webkit-appearance: none;
text-align: start;
line-height: inherit;
width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
background: rgba(31, 115, 183, 0.08);
text-decoration: none;
color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-
checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-
checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=true]::after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true'xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none'stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
display: inline-block;
height: 12px;
margin-left: 10px;
width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu
[role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
margin-left: 0;
margin-right: 10px;
float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
display: none !important;
}
.dropdown-menu-end {
left: auto;
right: 0;
}
.dropdown-menu-top {
bottom: 100%;
margin-bottom: 1px;
}
[dir=rtl] .dropdown-menu {
left: auto;
right: 0;
text-align: right;
}
[dir=rtl] .dropdown-menu-end {
left: 0;
right: auto;
}
.dropdown-chevron-icon {
vertical-align: middle;
}
.content-tags > p {
color: #68737D;
margin-top: 32px;
margin-bottom: 4px;
}
.content-tags-add-hint {
color: #68737D;
font-size: 14px;
}
.content-tag-list {
display: flex;
flex-wrap: wrap;
word-break: break-word;
}
.content-tag-list li {
border-right: 1px solid #C2C8CC;
margin-bottom: 4px;
}
[dir=ltr] .content-tag-list li {
padding-right: 8px;
margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
padding-left: 8px;
margin-left: 8px;
}
.content-tag-list li:last-child {
border: none;
}
/***** WYSIWYG Editor *****/
#hc-wysiwyg {
border: 1px solid #848F99;
}
/***** Upload Dropzone *****/
.upload-dropzone {
border: 1px solid #848F99;
}
/***** Summary component *****/
zd-summary-block {
background: #f3f6f6;
}
[dir=ltr] zd-summary-block {
border-left-color: #859fa1;
}
[dir=rtl] zd-summary-block {
border-right-color: #859fa1;
}
.service-catalog-hero {
background-image: url(/hc/theming_assets/01KS0Y4Q22W45XQ2MZJBTDSV10);
margin-bottom: 10px;
height: 320px;
}
.service-catalog-description {
display: flow-root;
}
.service-catalog-description a {
color: #1F73B7;
text-decoration: underline;
}
.service-catalog-description a:visited {
color: #9358B0;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-
description a:focus {
color: #0F3554;
}
.service-catalog-description img {
height: auto;
max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.service-catalog-description figure.image {
display: table;
margin: 0 auto;
}
.service-catalog-description figure.image > img {
display: block;
width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
float: left;
margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
float: right;
margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
margin-left: auto;
margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
.service-catalog-description figcaption {
padding: 10px 0;
font-size: 12px;
text-align: center;
background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
padding-left: 20px;
list-style-position: outside;
margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
padding-right: 20px;
padding-left: 0;
margin-left: 0;
margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
margin: 0;
}
.service-catalog-description ul {
list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
background: #f7f7f7;
border: 1px solid #ddd;
border-radius: 3px;
padding: 0 5px;
margin: 0 2px;
}
.service-catalog-description pre {
background: #f7f7f7;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
direction: ltr;
}
.service-catalog-description blockquote {
border-left: 1px solid #ddd;
color: #333;
font-style: italic;
padding: 0 15px;
}
.service-catalog-main-content {
display: flex;
gap: 32px;
}
.service-catalog-list {
width: 100%;
}
.service-catalog-breadcrumbs {
display: flex;
align-items: center;
gap: 20px;
}
.is-service-catalog-preview #navbar-container,
.is-service-catalog-preview .navbar-container,
.is-service-catalog-preview .assembly-bar,
.is-service-catalog-preview [data-garden-id="chrome.subnav"] {
display: none !important;
}


/* ============================================================================
   SECTION HELP CENTER — THEME CUSTOMIZATIONS
   ============================================================================
   Everything below is layered on top of the stock Zendesk Copenhagen theme
   (which is left untouched above this banner).

   HOW THIS IS ORGANIZED
     1. Foundations ....... brand fonts, design tokens, global typography
     2. Homepage .......... scoped with  body:has(.knowledge-base)
     3. Category pages .... scoped with  body:has(.section-tree)
     4. Article pages ..... scoped with  body:has(.article)
     5. Shared components . table of contents, chat launcher
     6. Known open items .. TODOs for the next engineer

   SCOPING PATTERN
     Zendesk does not add a per-page-type class to <body>, so we scope by a
     marker element that only exists on that page type:
       homepage  -> .knowledge-base   category -> .section-tree   article -> .article
     This keeps each page's overrides from leaking onto the others.

   BRAND TOKENS  (see :root below)
     ink #121313 · highlight #3d4cf0 · page cream #F5F3ED · fonts Goga / Azurio
   ============================================================================ */


/* ============================================================================
   1. FOUNDATIONS
   ============================================================================ */

/* Brand fonts — hosted on app.sectionai.com (loaded site-wide). */
@font-face {
  font-family: "Goga";
  src: url("https://app.sectionai.com/fonts/goga/Goga-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goga";
  src: url("https://app.sectionai.com/fonts/goga/Goga-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goga";
  src: url("https://app.sectionai.com/fonts/goga/Goga-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Azurio";
  src: url("https://app.sectionai.com/fonts/azurio/Azurio-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Azurio";
  src: url("https://app.sectionai.com/fonts/azurio/Azurio-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Design tokens */
:root {
  /* Fonts */
  --section-font: "Goga", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sc-font-body: "Goga", Arial, sans-serif;
  --sc-font-heading: "Goga", Arial, sans-serif;
  --sc-font-accent: "Goga", Arial, sans-serif;

  /* Color */
  --sc-ink: #121313;
  --sc-page-cream: #F5F3ED;     /* category / article page background */
  --sc-highlight: #3d4cf0;
  --sc-highlight-soft: #839ff1;
  --sc-blue-start: #4480be;
  --sc-blue-end: #649eda;
  --sc-surface: #ffffff;
  --sc-surface-soft: #f5f6f8;
  --sc-page: #ffffff;
  --sc-page-soft: #f7f7f9;
  --sc-border: #e1e3e8;
  --sc-border-strong: #d5d8df;
  --sc-muted: #646c78;
  --sc-decor: #f0e8ff;
  --sc-card-border: #d9dbdc;    /* category / article cards */

  /* Radius */
  --sc-radius-card: 25px;
  --sc-radius-soft: 25px;
  --sc-radius-pill: 999px;

  /* Shadow */
  --sc-shadow-card: 0 1px 2px rgba(18, 19, 19, 0.05), 0 10px 24px rgba(18, 19, 19, 0.04);
  --sc-shadow-course: 0 1px 2px rgba(18, 19, 19, 0.03), 0 10px 24px rgba(18, 19, 19, 0.05);
  --sc-shadow-course-hover: 0 1px 2px rgba(18, 19, 19, 0.04), 0 12px 28px rgba(18, 19, 19, 0.06);
  --sc-shadow-soft: 0 1px 3px rgba(18, 19, 19, 0.05);

  --sc-transition: 180ms ease;

  /* Page width — content + header share this so everything lines up.
     Gutter = (100% - this) / 2. */
  --sc-page-max: 1200px;
  --sc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.85'/%3E%3C/svg%3E");
}

/* Goga everywhere (all page types) */
body,
.article-body,
.section-body,
.category-body,
p, li, a, button, input, textarea {
  font-family: var(--section-font);
}
h1, h2, h3, h4, h5, h6,
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5, .article-body h6 {
  font-family: var(--section-font) !important;
}


/* ============================================================================
   2. HOMEPAGE   (scope: body:has(.knowledge-base))
   ============================================================================ */

/* --- Global feel ---
   Homepage uses the same cream background as the category/article pages. */
body:has(.knowledge-base) {
  background: var(--sc-page-cream);
  color: var(--sc-ink);
  font-family: var(--sc-font-body);
  -webkit-font-smoothing: antialiased;
}
body:has(.knowledge-base) h1,
body:has(.knowledge-base) h2,
body:has(.knowledge-base) h3,
body:has(.knowledge-base) h4,
body:has(.knowledge-base) h5,
body:has(.knowledge-base) h6,
body:has(.knowledge-base) .blocks-item-title,
body:has(.knowledge-base) .recent-activity-item-parent,
body:has(.knowledge-base) .footer a {
  font-family: var(--sc-font-heading);
  letter-spacing: -0.02em;
}
body:has(.knowledge-base) a {
  color: var(--sc-highlight);
  transition: color var(--sc-transition), transform var(--sc-transition), box-shadow var(--sc-transition), border-color var(--sc-transition), background-color var(--sc-transition);
}
body:has(.knowledge-base) a:hover,
body:has(.knowledge-base) a:focus,
body:has(.knowledge-base) a:active {
  color: var(--sc-ink);
}
body:has(.knowledge-base) a:focus-visible,
body:has(.knowledge-base) button:focus-visible,
body:has(.knowledge-base) input:focus-visible {
  outline: 4px solid rgba(131, 159, 241, 0.35);
  outline-offset: 3px;
}
body:has(.knowledge-base) .container {
  width: min(var(--sc-page-max), calc(100% - 48px));
  padding-left: 0;
  padding-right: 0;
}

/* --- Header --- */
body:has(.knowledge-base) .header {
  width: 100%;
  max-width: none;
  height: 72px;
  box-sizing: border-box;
  padding: 0 max(24px, calc((100% - var(--sc-page-max)) / 2));
  position: sticky;
  top: 0;
  z-index: 40;
  background: #ffffff;
  border-bottom: none;
  box-shadow: none;
}
body:has(.knowledge-base) .logo img {
  max-height: 21.6px;
  width: auto;
  filter: grayscale(1) brightness(0);
}
body:has(.knowledge-base) .logo a,
body:has(.knowledge-base) .footer-logo {
  opacity: 1;
  transition: opacity var(--sc-transition);
}
body:has(.knowledge-base) .logo a:hover,
body:has(.knowledge-base) .logo a:focus,
body:has(.knowledge-base) .logo a:active,
body:has(.knowledge-base) .footer-logo:hover,
body:has(.knowledge-base) .footer-logo:focus,
body:has(.knowledge-base) .footer-logo:active {
  opacity: 0.72;
}
body:has(.knowledge-base) .nav-wrapper-desktop a,
body:has(.knowledge-base) .nav-wrapper-mobile .menu-button-mobile,
body:has(.knowledge-base) .nav-wrapper-mobile .menu-list-mobile-items a,
body:has(.knowledge-base) .nav-wrapper-mobile .menu-list-mobile-items button {
  color: var(--sc-ink);
  font-family: var(--sc-font-body);
  font-weight: 500;
}
body:has(.knowledge-base) .nav-wrapper-desktop .user-nav-list {
  display: flex;
  align-items: center;
  gap: 16px;
}
body:has(.knowledge-base) .user-nav[aria-expanded=true] > .user-nav-list {
  row-gap: 16px;
}
body:has(.knowledge-base) .nav-wrapper-desktop a:hover,
body:has(.knowledge-base) .nav-wrapper-desktop a:focus,
body:has(.knowledge-base) .nav-wrapper-desktop a:active {
  color: var(--sc-ink);
  text-decoration: none;
  opacity: 0.72;
}
body:has(.knowledge-base) .nav-wrapper-desktop .submit-a-request,
body:has(.knowledge-base) .nav-wrapper-mobile .submit-a-request {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 22px;
  border: 1px solid var(--sc-ink);
  border-radius: var(--sc-radius-pill);
  background: var(--sc-ink);
  box-shadow: none;
  color: #ffffff;
  font-weight: 600;
  opacity: 1;
  transition: background-color var(--sc-transition), border-color var(--sc-transition), opacity var(--sc-transition);
}
body:has(.knowledge-base) .nav-wrapper-desktop .submit-a-request:hover,
body:has(.knowledge-base) .nav-wrapper-desktop .submit-a-request:focus,
body:has(.knowledge-base) .nav-wrapper-mobile .submit-a-request:hover,
body:has(.knowledge-base) .nav-wrapper-mobile .submit-a-request:focus {
  border-color: var(--sc-highlight);
  background: var(--sc-highlight);
  color: #ffffff;
  opacity: 1;
}
body:has(.knowledge-base) .user-nav[aria-expanded=true] {
  top: 72px;
  border: 1px solid var(--sc-border);
  border-top: 0;
  background: #ffffff;
  box-shadow: 0 16px 28px rgba(18, 19, 19, 0.08);
}
body:has(.knowledge-base) .user-nav[aria-expanded=true] > .user-nav-list a,
body:has(.knowledge-base) .user-nav[aria-expanded=true] > a {
  color: var(--sc-ink);
}
body:has(.knowledge-base) .nav-wrapper-mobile .menu-button-mobile .icon-menu {
  width: 38px;
  height: 38px;
  padding: 8px;
  color: var(--sc-ink);
  background: #f4f5f8;
}
body:has(.knowledge-base) .nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #eceef3;
}
body:has(.knowledge-base) .nav-wrapper-mobile .menu-list-mobile {
  top: 72px;
  border: 1px solid var(--sc-border);
  border-top: 0;
  background: #ffffff;
  box-shadow: 0 18px 30px rgba(18, 19, 19, 0.08);
}
body:has(.knowledge-base) .nav-wrapper-mobile .menu-list-mobile-items a:active,
body:has(.knowledge-base) .nav-wrapper-mobile .menu-list-mobile-items a:focus,
body:has(.knowledge-base) .nav-wrapper-mobile .menu-list-mobile-items a:hover,
body:has(.knowledge-base) .nav-wrapper-mobile .menu-list-mobile-items button:active,
body:has(.knowledge-base) .nav-wrapper-mobile .menu-list-mobile-items button:focus,
body:has(.knowledge-base) .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background: #f4f5f8;
}

/* --- Hero + search ---
   Heading is left-aligned to the content grid; the search sits centered
   at half width.  (See "Known open items" re: the search icon.) */
body:has(.knowledge-base) .hero {
  background: var(--sc-page-cream);
  background-image: none;
  height: auto;
  min-height: 0;
  padding: 56px max(24px, calc((100% - var(--sc-page-max)) / 2));
  position: relative;
  overflow: visible;
  text-align: left;
}
body:has(.knowledge-base) .hero::before,
body:has(.knowledge-base) .hero::after {
  display: none;
}
body:has(.knowledge-base) .hero-inner {
  position: relative;   /* anchor the search icon to this box, not the whole hero */
  top: auto;
  transform: none;
  margin: 0;
  max-width: none;
  z-index: 1;
}
/* Marketing heading above the search bar. Edit the text in the content: line. */
body:has(.knowledge-base) .hero-inner::before {
  content: "Find answers to all your Section needs.";
  display: block;
  max-width: 560px;
  margin: 0 auto 28px;
  text-align: center;
  font-family: var(--sc-font-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sc-ink);
}
@media (max-width: 767px) {
  body:has(.knowledge-base) .hero-inner::before {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
body:has(.knowledge-base) .search.search-full {
  border: 0;
  border-radius: var(--sc-radius-pill);
  background: transparent;
  box-shadow: none;
}
/* Centered, half-width search */
body:has(.knowledge-base) .hero .search,
body:has(.knowledge-base) .hero .search-full,
body:has(.knowledge-base) .hero .search-container {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
/* Re-anchor the magnifying glass to the centered search. The icon is a sibling
   of the form inside .hero-inner, so it has to be positioned by hand. */
body:has(.knowledge-base) .hero .search-icon {
  left: calc(50% - 160px) !important;
  right: auto !important;
  top: auto !important;        /* stop centering on the hero */
  bottom: 13px !important;     /* center on the 46px search field instead */
  transform: none !important;
}
body:has(.knowledge-base) .search input[type=search],
body:has(.knowledge-base) .search .clear-button,
body:has(.knowledge-base) .search-full input[type=search],
body:has(.knowledge-base) .search-full .clear-button {
  border-radius: var(--sc-radius-pill);
}
body:has(.knowledge-base) .search input[type=search] {
  min-height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  padding-inline-start: 52px;
  padding-inline-end: 20px;
  color: var(--sc-ink);
  background: #ffffff;
  border: none;
  box-shadow: none;
  font-family: var(--sc-font-body);
  font-size: 16px;
}
body:has(.knowledge-base) .search:focus-within {
  border-color: transparent;
}
body:has(.knowledge-base) .search input[type=search]:focus,
body:has(.knowledge-base) .search input[type=search]:active {
  border-color: var(--sc-ink);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24);
  color: var(--sc-ink);
}
body:has(.knowledge-base) .search input[type=search]::placeholder {
  color: #7f7e90;
}
body:has(.knowledge-base) .search-icon {
  top: 50%;
  z-index: 2;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: #7f7e90;
}
body:has(.knowledge-base) .search .clear-button {
  background: #f4f5f8;
  color: var(--sc-ink);
  border-left: 1px solid var(--sc-border);
}
body:has(.knowledge-base) .search .clear-button:hover,
body:has(.knowledge-base) .search .clear-button:focus {
  background: #eceef3;
}
[dir=ltr] body:has(.knowledge-base) .search input[type=search] {
  padding-left: 52px;
  padding-right: 20px;
}
[dir=rtl] body:has(.knowledge-base) .search input[type=search] {
  padding-right: 52px;
  padding-left: 20px;
}
[dir=ltr] body:has(.knowledge-base) .search-icon {
  left: 20px;
  right: auto;
}
[dir=rtl] body:has(.knowledge-base) .search-icon {
  right: 20px;
  left: auto;
}

/* --- Homepage sections --- */
body:has(.knowledge-base) .knowledge-base {
  margin: 0;
  width: auto;
  max-width: none;
  padding: 12px 0 0;
  position: relative;
  z-index: 2;
}
body:has(.knowledge-base) .section {
  margin-bottom: 40px;
}
body:has(.knowledge-base) .home-section.activity {
  padding-top: 0;
  border-top: 0;
  margin-bottom: 56px;
}

/* Hide the stock divider line (e.g. above Community) */
body:has(.knowledge-base) .container-divider {
  display: none;
}

/* --- Category image cards (2-across) ---
   Card backgrounds are uploaded theme assets, referenced with the Zendesk
   CSS asset-variable syntax ($assets-<name>-<ext>). */
body:has(.knowledge-base) .blocks-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  align-items: stretch;
}
body:has(.knowledge-base) .blocks-item {
  position: relative;
  overflow: hidden;
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: var(--sc-radius-card);
  background: #ffffff;
  box-shadow: none;
  text-align: left;
  min-height: 206px;
  transition: opacity var(--sc-transition);
}
body:has(.knowledge-base) .blocks-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  z-index: 0;
}
body:has(.knowledge-base) .blocks-item:nth-child(1)::before {
  background-image: url(/hc/theming_assets/01KV96KW2X8MC4WKMP9JEWJSJM);
}
body:has(.knowledge-base) .blocks-item:nth-child(2)::before {
  background-image: url(/hc/theming_assets/01KV96KT7KVFDAA4HKEMVNEBDN);
}
body:has(.knowledge-base) .blocks-item:nth-child(3)::before {
  background-image: url(/hc/theming_assets/01KV96KR54ZZCDCJS34WYS0N64);
  opacity: 0.65;
  transform: scaleX(-1);
}
body:has(.knowledge-base) .blocks-item:nth-child(4)::before {
  background-image: url(/hc/theming_assets/01KV97WAKK6GGKB83PX3H8652H);
}
body:has(.knowledge-base) .blocks-item:hover,
body:has(.knowledge-base) .blocks-item:active {
  opacity: 0.85;
}
body:has(.knowledge-base) .blocks-item:focus-within {
  opacity: 1;
}
body:has(.knowledge-base) .blocks-item:hover *,
body:has(.knowledge-base) .blocks-item:focus *,
body:has(.knowledge-base) .blocks-item:active * {
  color: inherit;
}
body:has(.knowledge-base) .blocks-item-link {
  position: relative;
  z-index: 1;
  min-height: 206px;
  padding: 20px;
  color: var(--sc-ink);
  align-items: flex-start;
  text-align: left;
  justify-content: flex-end;
}
body:has(.knowledge-base) .blocks-item-link:hover,
body:has(.knowledge-base) .blocks-item-link:focus,
body:has(.knowledge-base) .blocks-item-link:active,
body:has(.knowledge-base) .blocks-item-link:hover .blocks-item-title,
body:has(.knowledge-base) .blocks-item-link:focus .blocks-item-title,
body:has(.knowledge-base) .blocks-item-link:active .blocks-item-title,
body:has(.knowledge-base) .blocks-item-link:hover .blocks-item-description,
body:has(.knowledge-base) .blocks-item-link:focus .blocks-item-description,
body:has(.knowledge-base) .blocks-item-link:active .blocks-item-description {
  color: var(--sc-ink);
  text-decoration: none;
}
body:has(.knowledge-base) .blocks-item-link:focus {
  box-shadow: inset 0 0 0 3px rgba(131, 159, 241, 0.35);
}
body:has(.knowledge-base) .blocks-item-title {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 12px 18px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 10px rgba(18, 19, 19, 0.08);
  color: var(--sc-ink);
  font-family: var(--sc-font-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
body:has(.knowledge-base) .blocks-item:nth-child(1) .blocks-item-title { background: #bd9fea; }
body:has(.knowledge-base) .blocks-item:nth-child(2) .blocks-item-title { background: #6fa9d5; }
body:has(.knowledge-base) .blocks-item:nth-child(3) .blocks-item-title { background: #5f9d5d; }
body:has(.knowledge-base) .blocks-item:nth-child(4) .blocks-item-title { background: #6cb6c2; }
body:has(.knowledge-base) .blocks-item-title::after {
  display: none;
}
body:has(.knowledge-base) .blocks-item-description {
  margin-top: 0;
  width: 100%;
  max-width: none;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  color: #2f3642;
  font-size: 15px;
  line-height: 1.35;
}

/* --- Recent activity (long cards) --- */
body:has(.knowledge-base) .recent-activity-header {
  margin-top: 70px;
  margin-bottom: 40px;
  font-family: var(--sc-font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--sc-ink);
  text-align: center;
}
body:has(.knowledge-base) .recent-activity-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 0;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
body:has(.knowledge-base) .recent-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: center;
  min-height: 0;
  padding: 24px 28px;
  border: none;
  border-radius: var(--sc-radius-soft);
  background: #ffffff;
  box-shadow: var(--sc-shadow-course);
  transition: border-color var(--sc-transition), box-shadow var(--sc-transition);
}
body:has(.knowledge-base) .recent-activity-item:hover {
  border-color: var(--sc-ink);
  box-shadow: var(--sc-shadow-course-hover);
}
body:has(.knowledge-base) .recent-activity-item h3 {
  margin: 0 !important;
  line-height: 1;
}
body:has(.knowledge-base) .recent-activity-item-parent,
body:has(.knowledge-base) .recent-activity-item-link {
  display: block;
  margin: 0 !important;
  width: 100%;
  text-decoration: none;
}
body:has(.knowledge-base) .recent-activity-item-parent {
  color: var(--sc-ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
body:has(.knowledge-base) .recent-activity-item-link {
  margin-top: 12px !important;
  color: var(--sc-muted);
  font-family: var(--sc-font-body);
  font-size: 16px;
  line-height: 1;
}
body:has(.knowledge-base) .recent-activity-item-parent:hover,
body:has(.knowledge-base) .recent-activity-item-parent:focus,
body:has(.knowledge-base) .recent-activity-item-parent:active,
body:has(.knowledge-base) .recent-activity-item-link:hover,
body:has(.knowledge-base) .recent-activity-item-link:focus,
body:has(.knowledge-base) .recent-activity-item-link:active {
  text-decoration: none;
}
body:has(.knowledge-base) .recent-activity-item-meta {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
  gap: 8px;
  margin-top: 0;
  color: #7f7e90;
  font-family: var(--sc-font-body);
  float: none;
  white-space: nowrap;
}
body:has(.knowledge-base) .recent-activity-item-time,
body:has(.knowledge-base) .recent-activity-item-comment {
  padding: 6px 12px;
  border-radius: 10px;
  background: #f3f4f6;
  color: #2f3642;
  font-size: 14px;
}
body:has(.knowledge-base) .recent-activity-item-comment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body:has(.knowledge-base) .recent-activity-item-comment::after {
  content: "";
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  background: #000000;
  /* Flaticon UIcons comment-alt glyph, used as a mask so it stays black. */
  -webkit-mask: url("https://cdn-icons-png.flaticon.com/512/3916/3916599.png") center / contain no-repeat;
  mask: url("https://cdn-icons-png.flaticon.com/512/3916/3916599.png") center / contain no-repeat;
}
body:has(.knowledge-base) .recent-activity-controls {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-top: 18px;
  text-align: center;
}
body:has(.knowledge-base) .recent-activity-controls a,
body:has(.knowledge-base) .recent-activity-controls a:visited {
  color: var(--sc-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body:has(.knowledge-base) .recent-activity-controls a:hover,
body:has(.knowledge-base) .recent-activity-controls a:active,
body:has(.knowledge-base) .recent-activity-controls a:focus {
  color: #839FF1;
}

/* --- Footer --- */
body:has(.knowledge-base) .footer {
  margin-top: 56px;
  border-top: 0;
  background: #121313;
}
body:has(.knowledge-base) .footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: min(var(--sc-page-max), calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  padding: 28px 0;
}
body:has(.knowledge-base) .footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
body:has(.knowledge-base) .footer a {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  font-family: var(--sc-font-body);
  font-size: 15px;
}
body:has(.knowledge-base) .footer img {
  display: block;
  max-height: 18px;
  width: auto;
  filter: brightness(0) invert(1);
}
body:has(.knowledge-base) .footer-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-family: var(--sc-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}
body:has(.knowledge-base) .footer-tagline span {
  display: block;
  white-space: nowrap;
}
body:has(.knowledge-base) .footer-powered-by,
body:has(.knowledge-base) .footer-powered-by:visited {
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.64);
  font-family: var(--sc-font-body);
  font-size: 14px;
  letter-spacing: 0;
  opacity: 1;
  text-decoration: none;
  transition: opacity var(--sc-transition);
  white-space: nowrap;
}
body:has(.knowledge-base) .footer-powered-by:hover,
body:has(.knowledge-base) .footer-powered-by:active {
  opacity: 0.72;
}
/* Language selector text — force pure white (stock renders it dark gray,
   which is invisible on the dark footer). */
body:has(.knowledge-base) .footer-language-selector button,
body:has(.knowledge-base) .footer-language-selector .dropdown-toggle {
  color: #ffffff;
}

/* --- Homepage responsive --- */
@media (max-width: 1023px) {
  body:has(.knowledge-base) .header {
    padding-left: 24px;
    padding-right: 24px;
  }
  body:has(.knowledge-base) .blocks-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  body:has(.knowledge-base) .hero {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  body:has(.knowledge-base) .search input[type=search] {
    min-height: 48px;
  }
  body:has(.knowledge-base) .knowledge-base {
    padding-top: 8px;
  }
  body:has(.knowledge-base) .blocks-item-link {
    min-height: 180px;
    padding: 18px;
  }
  body:has(.knowledge-base) .blocks-list {
    grid-template-columns: 1fr;
  }
  body:has(.knowledge-base) .recent-activity-header {
    font-size: 24px;
  }
  body:has(.knowledge-base) .recent-activity-item {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: 22px 20px;
  }
  body:has(.knowledge-base) .recent-activity-item-meta {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20px;
    white-space: normal;
  }
  body:has(.knowledge-base) .recent-activity-item-parent {
    font-size: 20px;
  }
  body:has(.knowledge-base) .recent-activity-item-link {
    font-size: 16px;
  }
}


/* ============================================================================
   3. CATEGORY PAGES   (scope: body:has(.section-tree))
   ============================================================================ */

/* --- Page chrome: cream background, white seamless header, grid width --- */
body:has(.section-tree) {
  background: var(--sc-page-cream);
}
body:has(.section-tree) .header {
  background: #ffffff;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0 max(24px, calc((100% - var(--sc-page-max)) / 2));
  border: none;          /* no divider line between header and body */
  box-shadow: none;
}
body:has(.section-tree) .container-divider {
  display: none;         /* stock Copenhagen draws a 1px line here */
}
body:has(.section-tree) .container {
  width: min(var(--sc-page-max), calc(100% - 48px));
  max-width: none;
  padding: 0;
}
/* Use the full content width (Copenhagen reserves a left sidebar column) */
body:has(.section-tree) .category-container {
  display: block;
}
body:has(.section-tree) .category-content {
  flex: 1 1 100%;
  max-width: 100%;
}
body:has(.section-tree) h1 {
  color: var(--sc-ink);
}
body:has(.section-tree) .breadcrumbs li + li::before {
  content: "/";          /* slash separator instead of the stock ">" */
}
body:has(.section-tree) .search {
  border: none;
}
body:has(.section-tree) .search:focus-within {
  border-color: transparent;
}

/* --- Section cards (one card per section, articles in 2 columns) --- */
.section-tree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  /* horizontal row, wraps as sections grow */
  gap: 24px;
  align-items: start;
}
.section-tree .section {
  position: relative;
  background-color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.section-tree .section:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.section-tree-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 500;
  color: #121313;
  letter-spacing: 0;
}
.section-tree-title a {
  color: #121313;
  text-decoration: none;
}
.section-tree-title a:hover {
  color: var(--sc-highlight);
}
/* Stretch the title link across the whole card so the card is clickable;
   article links sit above it (z-index) and stay individually clickable. */
.section-tree-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.section-tree .article-list,
.section-tree .see-all-articles {
  position: relative;
  z-index: 2;
}
.section-tree .article-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;   /* single column — articles stack downward */
  gap: 0;
}
.section-tree .article-list li {
  margin: 0;
}
.section-tree .article-list a {
  display: block;
  padding: 4px 0;
  font-size: 16px;
  font-weight: 400;
  color: #121313;
  text-decoration: none;
  transition: color 0.25s ease;
}
.section-tree .article-list a:hover {
  color: var(--sc-highlight);
}
@media (max-width: 720px) {
  .section-tree {
    grid-template-columns: 1fr;
  }
}

/* --- Two-tier FAQ category ---
   When a category has exactly ONE section (e.g. Technical Issues), hide the
   redundant section title and present each article as its own card, so the
   page reads Category -> Article instead of Category -> Section -> Article. */
.section-tree .section:only-child {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.section-tree .section:only-child:hover {
  box-shadow: none;
  transform: none;
}
.section-tree .section:only-child .section-tree-title {
  display: none;
}
.section-tree .section:only-child .article-list {
  display: inline-grid;
  grid-template-columns: max-content;
  gap: 10px;
}
.section-tree .section:only-child .article-list li {
  margin: 0;
  padding: 0;
}
.section-tree .section:only-child .article-list a {
  display: block;
  padding: 10px 18px;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  font-size: 16px;
  font-weight: 400;
  color: var(--sc-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.section-tree .section:only-child .article-list a:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  color: var(--sc-highlight);
}
@media (max-width: 720px) {
  .section-tree .section:only-child .article-list {
    display: grid;
    grid-template-columns: 1fr;
  }
  .section-tree .section:only-child .article-list a {
    white-space: normal;
  }
}


/* ============================================================================
   4. ARTICLE PAGES   (scope: body:has(.article))
   Mirrors the category-page chrome: cream background, white seamless header,
   slash breadcrumb, borderless search.
   ============================================================================ */
body:has(.article) {
  background: var(--sc-page-cream);
}
body:has(.article) .header {
  background: #ffffff;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0 max(24px, calc((100% - var(--sc-page-max)) / 2));
  border: none;
  box-shadow: none;
}
body:has(.article) .container-divider {
  display: none;
}
body:has(.article) h1,
body:has(.article) h2,
body:has(.article) h3,
body:has(.article) h4 {
  color: var(--sc-ink);
}
body:has(.article) .article-body a {
  color: var(--sc-highlight);
}
body:has(.article) .breadcrumbs li + li::before {
  content: "/";
}
body:has(.article) .search {
  border: none;
}
body:has(.article) .search:focus-within {
  border-color: transparent;
}


/* ============================================================================
   4b. SECTION PAGES   (scope: body:has(.section-content))
   The page that lists a section's articles — same chrome as category/article.
   ============================================================================ */
body:has(.section-content) {
  background: var(--sc-page-cream);
}
body:has(.section-content) .header {
  background: #ffffff;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0 max(24px, calc((100% - var(--sc-page-max)) / 2));
  border: none;
  box-shadow: none;
}
body:has(.section-content) .container-divider {
  display: none;
}
body:has(.section-content) h1 {
  color: var(--sc-ink);
}
body:has(.section-content) .breadcrumbs li + li::before {
  content: "/";
}
body:has(.section-content) .search {
  border: none;
}
body:has(.section-content) .search:focus-within {
  border-color: transparent;
}
/* Use the full content width (Copenhagen reserves a left sidebar column) */
body:has(.section-content) .section-container {
  display: block;
}
body:has(.section-content) .section-content {
  flex: 1 1 100%;
  max-width: 100%;
}
/* Article list — each article becomes a thin card. The list shrink-wraps to
   the widest title (inline-grid + max-content column), and every card stretches
   to that same width, so all cards match the longest title regardless of text. */
body:has(.section-content) .article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-grid;
  grid-template-columns: max-content;
  gap: 10px;
}
body:has(.section-content) .article-list-item {
  margin: 0;
  padding: 0;
  overflow: visible;
  font-size: 16px;
}
body:has(.section-content) .article-list-item a {
  display: block;
  padding: 10px 18px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  color: var(--sc-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
body:has(.section-content) .article-list-item a:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  color: var(--sc-highlight);
}


/* ============================================================================
   5. SHARED LAYOUT + COMPONENTS
   ============================================================================ */

/* Breadcrumb / search row on category + article pages — dropped down from the
   header and vertically centered. */
body:has(.section-tree) .sub-nav,
body:has(.article) .sub-nav,
body:has(.section-content) .sub-nav {
  align-items: center;
  padding-top: 32px;
  margin-bottom: 44px;
}

/* Collapsible table of contents (used inside KB articles). */
.kb-toc {
  border: none;
  border-radius: 8px;
  background: #f9f9f9;
  margin: 24px 0;
  padding: 0;
  overflow: hidden;
}
.kb-toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  user-select: none;
  background: #f9f9f9;
  transition: background 0.15s ease;
}
.kb-toc-header:hover {
  background: #f0f0f0;
}
.kb-toc-header .kb-toc-arrow {
  transition: transform 0.2s ease;
  font-size: 14px;
}
.kb-toc.is-open .kb-toc-header .kb-toc-arrow {
  transform: rotate(180deg);
}
.kb-toc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 18px;
}
.kb-toc.is-open .kb-toc-body {
  max-height: 1000px;
  padding: 0 18px 16px 18px;
}
.kb-toc-body ul {
  margin: 0;
  padding-left: 20px;
}
.kb-toc-body ul ul {
  padding-left: 18px;
  margin-top: 4px;
}
.kb-toc-body li {
  margin: 6px 0;
}
.kb-toc-body a {
  text-decoration: none;
  color: #1f1f1f;
}
.kb-toc-body a:hover {
  text-decoration: underline;
}

/* Floating chat launcher (custom button, injected site-wide). */
.section-chat-launcher {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 54% 10px 54% 54%;
  background: #6267DA;
  box-shadow: 0 11px 17px rgba(18, 19, 19, 0.2);
  color: #ffffff;
  cursor: pointer;
  transition: opacity var(--sc-transition), transform var(--sc-transition), box-shadow var(--sc-transition);
}
.section-chat-launcher:hover,
.section-chat-launcher:focus {
  opacity: 0.86;
  transform: translateY(-2px);
  box-shadow: 0 13px 20px rgba(18, 19, 19, 0.24);
}
.section-chat-launcher:active {
  opacity: 0.78;
  transform: translateY(0);
}
.section-chat-launcher-icon {
  width: 21px;
  height: 21px;
  background: #ffffff;
  -webkit-mask: url("https://cdn-icons-png.flaticon.com/512/9821/9821623.png") center / contain no-repeat;
  mask: url("https://cdn-icons-png.flaticon.com/512/9821/9821623.png") center / contain no-repeat;
}
@media (max-width: 767px) {
  .section-chat-launcher {
    right: 18px;
    bottom: 18px;
    width: 45px;
    height: 45px;
  }
  .section-chat-launcher-icon {
    width: 19px;
    height: 19px;
  }
}


/* ============================================================================
   6. KNOWN OPEN ITEMS  (TODO — next engineer)
   ----------------------------------------------------------------------------
   These were attempted but the fixes were no-ops, so they've been removed to
   keep the file clean. They need the live DOM inspected to target the right
   element:

   a) HOMEPAGE HEADER ALIGNMENT
      The logo (top-left) and profile/sign-in (top-right) do not line up with
      the category cards' left/right edges. Forcing padding on `.header`
      (even with !important) had no effect, which means the gutters come from a
      wrapper or different element — not `.header` itself. Inspect the logo's
      ancestor chain to find the element that controls the header's horizontal
      spacing, then match it to the cards' container:
        width: min(var(--sc-page-max), calc(100% - 48px)) centered.

   b) HOMEPAGE SEARCH ICON  [RESOLVED]
      The .search-icon is a sibling of the search form inside .hero-inner, so
      centering the form left it behind. It's now re-anchored with
      left: calc(50% - 160px) to sit inside the centered 360px search.
   ============================================================================ */

/* ============================================================
   Category section icons — relevant glyph per section, with the
   icon square tinted to its category's homepage palette and a
   grainy texture (icon = crisp top layer, grain overlays gradient).
   Targeted by section ID via :has(), so each is section-specific.
   ============================================================ */
.section-tree .section-tree-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-tree .section-tree-title::before {
  content: "";
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px, cover, cover;
  background-blend-mode: normal, overlay, normal;
}
/* Section Coach · Getting Started */
.section-tree .section:has(a[href*="/sections/51232240093467"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #f9b88c, #f2a6cf);
}
/* Section Coach · Practice & Apply */
.section-tree .section:has(a[href*="/sections/51232292477467"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #f9b88c, #f2a6cf);
}
/* Section Coach · Course Certifications */
.section-tree .section:has(a[href*="/sections/51232315730203"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #f9b88c, #f2a6cf);
}
/* Section Coach · FAQ */
.section-tree .section:has(a[href*="/sections/50884095536795"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #f9b88c, #f2a6cf);
}
/* Courses & Events · Workshops */
.section-tree .section:has(a[href*="/sections/50977929471643"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #a7c7ec, #bfe3e8);
}
/* Courses & Events · On-Demand */
.section-tree .section:has(a[href*="/sections/50977930801435"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #a7c7ec, #bfe3e8);
}
/* Courses & Events · Events & Webinars */
.section-tree .section:has(a[href*="/sections/50977939554203"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #a7c7ec, #bfe3e8);
}
/* Courses & Events · FAQ */
.section-tree .section:has(a[href*="/sections/50977976933531"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #a7c7ec, #bfe3e8);
}
/* Account & Billing · Membership Plans */
.section-tree .section:has(a[href*="/sections/51195640377755"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #b3d8a4, #d8e9a6);
}
/* Account & Billing · Manage Your Account */
.section-tree .section:has(a[href*="/sections/51195764165403"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #b3d8a4, #d8e9a6);
}
/* Account & Billing · Payments & Receipts */
.section-tree .section:has(a[href*="/sections/51195788176027"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #b3d8a4, #d8e9a6);
}
/* Account & Billing · Renewals & Cancellations */
.section-tree .section:has(a[href*="/sections/51195802246811"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #b3d8a4, #d8e9a6);
}
/* Account & Billing · FAQ */
.section-tree .section:has(a[href*="/sections/51197830860059"]) .section-tree-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23121313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"), var(--sc-grain), linear-gradient(135deg, #b3d8a4, #d8e9a6);
}
/* ============================================================================
   5. COURSE & EVENT CALENDAR   (scope: #section-event-calendar)
   Append this entire block to the END of the theme's style.css.
   Uses the same brand tokens defined in :root (Section 1. FOUNDATIONS):
   ink / cream / highlight, Goga, 25px radii, course-card shadows.
   ============================================================================ */

#section-event-calendar {
  font-family: var(--sc-font-body, "Goga", Arial, sans-serif);
  color: var(--sc-ink, #121313);
}

/* Intro note — same white surface + soft shadow as course cards */
#section-event-calendar .sec-cal-note {
  background: var(--sc-surface, #ffffff);
  border: none;
  border-radius: var(--sc-radius-soft, 25px);
  box-shadow: var(--sc-shadow-soft, 0 1px 3px rgba(18, 19, 19, 0.05));
  padding: 20px 28px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--sc-ink, #121313);
}

/* Raw data table: visible fallback if JS is unavailable, hidden once cards render */
#section-event-calendar .sec-cal-data { width: 100%; font-size: 14px; }
#section-event-calendar .sec-cal-data--hidden { display: none; }

#section-event-calendar .sec-cal-updated {
  margin: 20px 0 4px;
  font-size: 14px;
  color: var(--sc-muted, #646c78);
}

/* Month headings — Goga, brand heading tracking */
#section-event-calendar .sec-cal-month {
  font-family: var(--sc-font-heading, "Goga", Arial, sans-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 32px 0 14px;
  color: var(--sc-ink, #121313);
}

#section-event-calendar .sec-cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Event cards — identical treatment to course / recent-activity cards:
   white, borderless, 25px radius, course shadow, hover lift */
#section-event-calendar .sec-cal-event {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--sc-surface, #ffffff);
  border: none;
  border-radius: var(--sc-radius-soft, 25px);
  box-shadow: var(--sc-shadow-course, 0 1px 2px rgba(18, 19, 19, 0.03), 0 10px 24px rgba(18, 19, 19, 0.05));
  padding: 24px 28px;
  margin: 0 0 14px;
  transition: box-shadow var(--sc-transition, 180ms ease);
}
#section-event-calendar .sec-cal-event:hover {
  box-shadow: var(--sc-shadow-course-hover, 0 1px 2px rgba(18, 19, 19, 0.04), 0 12px 28px rgba(18, 19, 19, 0.06));
}

/* Date block — soft surface tile, pill-adjacent rounding */
#section-event-calendar .sec-cal-event-date {
  flex: 0 0 60px;
  text-align: center;
  border: 1px solid var(--sc-border, #e1e3e8);
  border-radius: 16px;
  padding: 9px 4px;
  background: var(--sc-surface-soft, #f5f6f8);
}
#section-event-calendar .sec-cal-event-month {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-muted, #646c78);
}
#section-event-calendar .sec-cal-event-day {
  display: block;
  font-family: var(--sc-font-heading, "Goga", Arial, sans-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--sc-ink, #121313);
}

#section-event-calendar .sec-cal-event-body { flex: 1; min-width: 0; }

#section-event-calendar .sec-cal-event-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#section-event-calendar .sec-cal-event-name {
  margin: 0;
  font-family: var(--sc-font-heading, "Goga", Arial, sans-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--sc-ink, #121313);
}

/* Links — brand highlight, hover to ink, brand focus ring (matches theme a rules) */
#section-event-calendar .sec-cal-event-name a {
  color: var(--sc-highlight, #3d4cf0);
  text-decoration: none;
  transition: color var(--sc-transition, 180ms ease);
}
#section-event-calendar .sec-cal-event-name a:hover,
#section-event-calendar .sec-cal-event-name a:focus,
#section-event-calendar .sec-cal-event-name a:active {
  color: var(--sc-ink, #121313);
}
#section-event-calendar a:focus-visible {
  outline: 4px solid rgba(131, 159, 241, 0.35);
  outline-offset: 3px;
  border-radius: 6px;
}
#section-event-calendar .sec-cal-event--cancelled .sec-cal-event-name {
  color: var(--sc-muted, #646c78);
}

/* Status badges — brand pill radius; color + explicit text, never color alone */
#section-event-calendar .sec-cal-badge {
  display: inline-block;
  font-family: var(--sc-font-body, "Goga", Arial, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--sc-radius-pill, 999px);
  padding: 4px 14px;
  border: 1px solid transparent;
  white-space: nowrap;
}
#section-event-calendar .sec-cal-badge--open {
  background: #e7f4ea;
  color: #17632e;
  border-color: #bfe3c8;
}
#section-event-calendar .sec-cal-badge--rescheduled {
  background: #fdf3e0;
  color: #8a5a00;
  border-color: #f0d9a8;
}
#section-event-calendar .sec-cal-badge--cancelled {
  background: #fbe9e9;
  color: #a02020;
  border-color: #f0c4c4;
}

#section-event-calendar .sec-cal-event-meta {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--sc-muted, #646c78);
}

/* Reschedule / cancel panels */
#section-event-calendar .sec-cal-event-change {
  margin: 10px 0 0;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.55;
  border-radius: 14px;
  background: #fdf3e0;
  color: #6b4a00;
}
#section-event-calendar .sec-cal-event-change--cancel {
  background: #fbe9e9;
  color: #7c1d1d;
}
#section-event-calendar .sec-cal-change-label { font-weight: 600; }

#section-event-calendar .sec-cal-event-updated {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--sc-muted, #646c78);
}

#section-event-calendar .sec-cal-empty {
  margin: 24px 0;
  font-size: 16px;
  color: var(--sc-muted, #646c78);
}

/* Mobile */
@media (max-width: 600px) {
  #section-event-calendar .sec-cal-event {
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px;
  }
  #section-event-calendar .sec-cal-event-date {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-basis: auto;
    padding: 5px 12px;
  }
  #section-event-calendar .sec-cal-event-day { font-size: 17px; }
  #section-event-calendar .sec-cal-event-name { font-size: 18px; }
}