@media (max-width: 767px) {
        .mobile-filter-toggle-wrap[aria-modal-open="true"],
        .mobile-filter-toggle-wrap.hide-when-modal {
            display: none !important;
        }
    }
    /* ========================================================================== 
         MOBILE FILTER MODAL & HIDE VOTES/COMMENTS (2026-04-25)
         ========================================================================== */

    @media (max-width: 767px) {
        .search-results-sidebar {
            display: none !important;
        }
        .search-result-footer-stats {
            display: none !important;
        }
        .mobile-filter-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.32);
            z-index: 1002;
            align-items: flex-end;
            justify-content: center;
            flex-direction: column;
            overflow-y: auto;
        }
        .mobile-filter-modal[open],
        .mobile-filter-modal[aria-modal="true"]:not([hidden]) {
            display: flex;
        }
        .mobile-filter-modal-header {
            background: #fff;
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 18px 0 18px;
            border-bottom: 1px solid #eee;
            font-size: 18px;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 2;
        }
        .mobile-filter-modal-close {
            background: none;
            border: none;
            font-size: 2rem;
            color: #333;
            cursor: pointer;
            margin-right: 8px;
        }
        .mobile-filter-modal-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: #222;
        }
        .mobile-filter-modal-content {
            background: #fff;
            width: 100vw;
            padding: 18px;
            max-height: 80vh;
            overflow-y: auto;
            border-radius: 0 0 12px 12px;
        }
    }
    .mobile-filter-toggle-wrap {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 12px;
        z-index: 1003;
        position: relative;
    }
    .search-results-sidebar.mobile-open ~ .mobile-filter-toggle-wrap,
    .mobile-filter-overlay.active ~ .mobile-filter-toggle-wrap {
        display: none !important;
    }
/* ========================================================================== 
     MOBILE FILTER & STATS TOGGLE (2026-04-25)
     ========================================================================== */

@media (max-width: 700px) {
    .search-results-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 80vw;
        max-width: 340px;
        height: 100vh;
        background: #fff;
        z-index: 1002;
        box-shadow: 2px 0 16px rgba(0,0,0,0.15);
        overflow-y: auto;
        transition: transform 0.3s cubic-bezier(.4,0,.2,1);
        transform: translateX(-100%);
    }
    .search-results-sidebar.mobile-open {
        display: block;
        transform: translateX(0);
    }
    .mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(227, 28, 121, 1);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 8px 16px;
        font-size: 16px;
        margin-bottom: 16px;
        cursor: pointer;
        z-index: 1003;
        position: relative;
    }
    .mobile-filter-toggle .icon-filter {
        font-size: 20px;
    }
    /* Overlay for filter */
    .mobile-filter-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.3);
        z-index: 1001;
    }
    .mobile-filter-overlay.active {
        display: block;
    }

    /* Hide stats by default, show toggle button */
    .search-result-footer-stats {
        display: none;
    }
    .search-result-main-right .mobile-stats-toggle {
        display: inline-flex;
        align-items: center;
        background: var(--brand-color);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 6px 10px;
        font-size: 16px;
        margin-left: 0;
        cursor: pointer;
    }
    .search-result-main-right .icon-stats {
        font-size: 18px;
    }
    .search-result-footer-stats.mobile-toggle-panel.active {
        display: flex;
        flex-direction: row;
        gap: 12px;
        margin-top: 8px;
        background: #f7f7f7;
        border-radius: 4px;
        padding: 8px 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
}

@media (min-width: 701px) {
    .mobile-filter-toggle,
    .search-result-main-right .mobile-stats-toggle {
        display: none !important;
    }
    .search-results-sidebar {
        display: block !important;
        position: static;
        width: auto;
        max-width: none;
        height: auto;
        box-shadow: none;
        transform: none;
    }
    .search-result-footer-stats {
        display: flex !important;
    }
}
/* ==========================================================================
     SEARCH RESULTS LIST ITEM INLINE STATS (2026-04-25)
     ========================================================================== */

.search-result-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.search-result-main-left {
    flex: 1 1 0%;
    min-width: 0;
}

.search-result-main-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-width: 120px;
    margin-left: 16px;
}

@media (max-width: 700px) {
    .search-result-main-row {
        flex-direction: column;
        gap: 0;
    }
    .search-result-main-right {
        margin-left: 0;
        margin-top: 10px;
        min-width: 0;
        justify-content: flex-start;
    }
}
/*!
 * Theme: PRISM | Base: Vertio v4.1.3
 * Custom Version: 1.1.0 | Updated: 2025-07-22
 * Maintainer: Exxat
 */
/* ==========================================================================
   VARIABLES & THEME SETTINGS
   ========================================================================== */

*,
:after,
:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}

:after,
:before {
    --tw-content: ""
}

:host,
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth
}

body {
    line-height: inherit
}

hr {
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    padding: 0
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0
}

fieldset,
menu,
ol,
ul {
    margin: 0;
    padding: 0
}

menu
/* ol,
ul  */
{
    list-style: none
}

dialog {
    padding: 0
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

.container {
    width: 100%
}

@media (min-width:640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width:1536px) {
    .container {
        max-width: 1536px
    }
}

.visible {
    visibility: visible
}

.collapse {
    visibility: collapse
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.-bottom-px {
    bottom: -1px
}

.left-1\/2 {
    left: 50%
}

.mb-10 {
    margin-bottom: 2.5rem
}

.mb-20 {
    margin-bottom: 5rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-40 {
    margin-bottom: 10rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.ml-10 {
    margin-left: 2.5rem
}

.ml-2 {
    margin-left: .5rem
}

.ml-5 {
    margin-left: 1.25rem
}

.mr-4 {
    margin-right: 1rem
}

.mr-5 {
    margin-right: 1.25rem
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-8 {
    margin-top: 2rem
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.table {
    display: table
}

.grid {
    display: grid
}

.contents {
    display: contents
}

.hidden {
    display: none
}

.size-2 {
    width: .5rem;
    height: .5rem
}

.h-6 {
    height: 1.5rem
}

.min-h-\[36px\] {
    min-height: 36px
}

.w-6 {
    width: 1.5rem
}

.flex-shrink,
.shrink {
    flex-shrink: 1
}

.grow {
    flex-grow: 1
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%
}

.-translate-x-1\/2,
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.cursor-pointer {
    cursor: pointer
}

.resize {
    resize: both
}

.flex-row {
    flex-direction: row
}

.flex-col {
    flex-direction: column
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.space-x-2>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem*var(--tw-space-x-reverse));
    margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse)))
}

.whitespace-nowrap {
    white-space: nowrap
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-md {
    border-radius: .375rem
}

.border {
    border-width: 1px
}

.bg-\[\var(--brand-color)\] {
    --tw-bg-opacity: 1;
    background-color: var(--brand-color)
}

.p-2 {
    padding: .5rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.py-\[10px\] {
    padding-top: 10px;
    padding-bottom: 10px
}

.py-\[5px\] {
    padding-top: 5px;
    padding-bottom: 5px
}

.pb-5 {
    padding-bottom: 1.25rem
}

.pt-0 {
    padding-top: 0
}

.pt-10 {
    padding-top: 2.5rem
}

.pt-8 {
    padding-top: 2rem
}

.text-center {
    text-align: center
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.font-semibold {
    font-weight: 600
}

.italic {
    font-style: italic
}

.ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.underline {
    text-decoration-line: underline
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)
}

.shadow,
.shadow-lg {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline {
    outline-style: solid
}

.blur {
    --tw-blur: blur(8px)
}

.blur,
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.duration-300 {
    transition-duration: .3s
}

.ease-in {
    transition-timing-function: cubic-bezier(.4, 0, 1, 1)
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

hr.separator {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(90deg, #ccc, #333, #ccc)
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent;
    text-decoration: none;
    text-underline-position: under;
    text-decoration-color: rgba(227, 28, 121, 1)
}

a,
a:hover {
    transition: all .3s ease
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    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: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none;
    box-shadow: 0 2px 6px 0 rgba(46, 46, 46, .27);
    display: inline;
    max-width: 100%
}

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
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .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
}

[hidden],
template {
    display: none
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

* {
    box-sizing: border-box
}

body {
    background-color: #fff;
    color: #333333;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased
}

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

/* !important required — overrides Zendesk rich-text inline styles injected in article bodies */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    margin-top: 0 !important
}

h1 {
    font-size: 32px !important
}

h2 {
    font-size: 22px !important
}

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

h4 {
    font-size: 16px !important
}

a {
    color: rgba(20, 20, 20, 1)
}

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

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

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

input:not([type=checkbox]) {
    outline: none
}

input:not([type=checkbox]):focus {
    border: 1px solid rgba(227, 28, 121, 1)
}

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

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat #fff;
    background-position: right 10px center;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding: 8px 30px 8px 10px;
    outline: none;
    color: #555;
    width: 100%
}

select:focus {
    border: 1px solid rgba(227, 28, 121, 1)
}

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

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

textarea:focus {
    border: 1px solid rgba(227, 28, 121, 1)
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.hc_header {
    background: rgba(255, 255, 255, 1);
    z-index: 9;
    position: relative;
    transition: all .3s ease
}

.fixed-divider {
    height: 71px
}

.fixed--header,
.hc_header.menu-is-open {
    position: fixed;
    top: 0;
    width: 100%
}

.fixed--header.top-42 {
    top: 42px
}

.scroll--fixed {
    top: 0 !important;
    transition: all .3s ease
}

.hc_header.menu-is-open {
    z-index: 999
}

.border-top {
    border-top: 1px solid rgba(33, 39, 83, 1)
}

.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: 45px;
    box-shadow: none
}

@media (max-width:500px) {
    .logo img {
        max-height: 25px;
        margin-top: 5px;
        box-shadow: none
    }
}

.logo span {
    margin: 0 10px;
    color: rgba(33, 39, 83, 1);
    vertical-align: top;
    position: relative;
    top: 5px
}

.logo a,
.user-nav {
    display: inline-block
}

.user-nav {
    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, .15), 0 4px 10px 0 rgba(0, 0, 0, .1);
    border: 1px solid #DDDDDD;
    right: 0;
    left: 0;
    top: 71px;
    z-index: 1
}

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

.nav-wrapper a {
    border: 0;
    width: auto
}

.nav-wrapper .language-selector .dropdown-toggle,
.nav-wrapper a {
    color: rgba(33, 39, 83, 1);
    padding: 0 10px
}

.nav-icon img {
    height: 27px;
    margin-right: 15px;
    transition: transform .4s, opacity .2s;
    transform: scale(1);
    box-shadow: none;
    vertical-align: middle
}

.nav-icon img:hover {
    transition: transform .4s, opacity .4s;
    transform: scale(1.2)
}

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

    .nav-wrapper .cd-primary-nav-trigger {
        padding-right: 0;
        margin-right: -12px
    }
}

[dir=rtl] .nav-wrapper .cd-primary-nav-trigger {
    padding-right: 5px;
    margin-right: 0;
    position: relative;
    top: 2px
}

.nav-wrapper a:active,
.nav-wrapper a:focus,
.nav-wrapper a:hover {
    background-color: transparent;
    color: rgba(33, 39, 83, 1)
}

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

.nav-wrapper .menu-button {
    background: none;
    border: 2px;
    color: rgba(20, 20, 20, 1);
    display: none;
    margin-right: 10px;
    padding: 0;
    width: auto
}

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

.nav-wrapper .menu-button .icon-menu {
    vertical-align: middle;
    width: 13px;
    height: 13px
}

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

.nav-wrapper .menu-button:active,
.nav-wrapper .menu-button:focus,
.nav-wrapper .menu-button:hover {
    background-color: transparent;
    color: rgba(20, 20, 20, 1)
}

.skip-navigation {
    align-items: center;
    background-color: #000;
    color: #fff;
    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: auto;
    right: -999px
}

.skip-navigation:active,
.skip-navigation:focus {
    left: auto;
    overflow: auto;
    text-align: center;
    text-decoration: none;
    top: auto;
    z-index: 999
}

[dir=rtl] .skip-navigation:active,
[dir=rtl] .skip-navigation:focus {
    left: auto;
    right: auto
}

.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: rgba(33, 39, 83, 1);
    min-width: 0;
    padding: 0;
    white-space: nowrap;
    margin-bottom: 15px
}

.user-info>button:focus,
.user-info>button:hover {
    color: rgba(33, 39, 83, 1);
    background-color: transparent
}

.user-info>button:after {
    color: rgba(20, 20, 20, 1);
    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 {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle
}

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

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

.avatar .icon-agent {
    color: rgba(227, 28, 121, 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
}

/* ==========================================================================
   HERO / SEARCH BANNER
   ========================================================================== */

.search {
    position: relative
}

.search-container .search input[type=search] {
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    box-shadow: none;
    box-sizing: border-box;
    height: 40px;
    padding: 5px 5px 5px 35px
}

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

.search input[type=search]:focus {
    border: 1px solid rgba(227, 28, 121, 1)
}

.search input[type=search] {
    border: 1px solid #fff;
    border-radius: 8px;
    box-shadow: 0 6px 19px rgb(39 49 58/9%);
    color: rgba(227, 28, 121, 1);
    font-weight: 500;
    height: 50px;
    padding-left: 40px;
    padding-right: 20px;
    width: 100%
}

.requests-table-toolbar .search input[type=search] {
    border: 1px solid #DDDDDD
}

.hero .search-full:before {
    content: "\ea17";
    font-family: LineIcons;
    left: 0;
    position: absolute;
    height: 100%;
    align-items: center;
    display: flex;
    color: rgba(227, 28, 121, 1);
    font-size: 14px;
    margin-left: 15px;
    margin-top: 1px
}

.search input[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    min-width: 100px;
    max-width: 100px;
    border-radius: 0 8px 8px 0;
    background: rgba(227, 28, 121, 1);
    color: #FFFFFF;
    padding: 0
}

[dir=rtl] .search input[type=submit] {
    border-radius: 8px 0 0 8px;
    right: auto;
    left: 0
}

.search-icon {
    position: relative;
    top: 50%;
    transform: translateY(26px);
    position: absolute;
    left: 12px;
    z-index: 1;
    width: 16px;
    height: 16px;
    color: rgba(227, 28, 121, 1)
}

.breadcrumbs__block .search-icon,
.requests-table-toolbar .search-icon {
    transform: translateY(-8px)
}

[dir=rtl] .hero .search-full:before,
[dir=rtl] .search-icon {
    right: 15px;
    left: auto
}

[dir=rtl] .new-request-title:after,
[dir=rtl] .quick-articles section h2:after,
[dir=rtl] .search_heading:after {
    visibility: hidden
}

.search-container {
    position: relative
}

.breadcrumbs__block {
    background: rgba(247, 237, 247, 1);
    padding: 15px 0;
    margin-bottom: 30px
}

button.clear-button {
    display: none
}

@media (max-width:768px) {
    .hero .search-full:before {
        visibility: hidden
    }

    .search-full input[type=search] {
        padding-left: 15px
    }

    .alert--bar {
        font-size: 10px
    }
}

.welcome_text {
    color: rgba(227, 28, 121, 1);
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2
}

.hero {
    background-color: rgba(255, 255, 255, 1);
    height: 400px;
    padding: 0 20px;
    text-align: center;
    width: 100%
}

.hero_show {
    background-image: url(/hc/theming_assets/01J0KKDQ0JN04HDX1MFDY5XPRE);
    background-position: 50%;
    background-size: cover
}

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

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

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

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

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

.page-header h1 {
    color: #333333;
    flex-grow: 1;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 3em
}

.my-activities-header>h1 {
    font-weight: 600
}

.page-header-description {
    font-style: italic;
    margin: 0 0 30px;
    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 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 30px;
    min-height: 40px;
    padding-bottom: 15px
}

.breadcrumbs__block .sub-nav {
    margin-bottom: 0;
    padding-bottom: 0
}

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

    .sub-nav input[type=search] {
        min-width: 300px
    }
}

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

/* ==========================================================================
   ALERT BAR
   ========================================================================== */

.alert--bar {
    background: rgba(91, 80, 240, 1);
    padding: 10px 0;
    color: #FFFFFF;
    text-align: center;
    position: relative;
    z-index: 99
}

.height-42 {
    max-height: 42px;
    overflow: hidden
}

.alert--bar a {
    color: #FFFFFF;
    border-bottom: 1px solid
}

/* ==========================================================================
   HOME PAGE
   ========================================================================== */

.blocks-list,
.quick-articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    width: 100%
}

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

.blocks-item,
.quick-articles section {
    border: 2px solid #DDDDDD;
    border-radius: 25px;
    text-align: center
}

.blocks-item,
.blocks-item-community,
.quick-articles section {
    background: #fff;
    text-decoration: none;
    box-sizing: border-box;
    color: rgba(227, 28, 121, 1);
    display: flex;
    flex: 1 0 350px;
    margin: 0 0 30px;
    max-width: 100%
}

.blocks-item-community,
.quick-articles section {
    border-bottom: 2px solid #DDDDDD;
    text-align: left;
    flex-direction: column;
    justify-content: flex-end
}

.quick-articles section {
    display: block;
    margin: 40px 5px 10px;
    text-align: left;
    padding: 30px 30px 20px
}

[dir=rtl] .quick-articles section {
    text-align: right
}

.quick-articles h2 {
    font-size: 1.3em;
    font-weight: 600;
    color: #333333;
    margin-bottom: 10px
}

@media (min-width:768px) {

    .blocks-item,
    .blocks-item-community {
        margin: 25px 20px 1px
    }
}

.blocks-item:active,
.blocks-item:focus,
.blocks-item:hover {
    background-color: #fff
}

.blocks-item:active *,
.blocks-item:focus *,
.blocks-item:hover * {
    color: #333;
    text-decoration: none
}

.blocks-item-community:active,
.blocks-item-community:focus,
.blocks-item-community:hover {
    background-color: #fff
}

.blocks-item-community:active span,
.blocks-item-community:focus,
.blocks-item-community:hover span {
    color: #333;
    text-decoration: underline
}

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

.blocks-item-internal .icon-lock {
    height: 15px;
    width: 15px;
    bottom: 5px;
    position: relative
}

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

.blocks-item-internal-community .icon-lock {
    height: 15px;
    width: 15px;
    bottom: 5px;
    position: relative
}

.blocks-item-internal-community a {
    color: #333333
}

.topics .blocks-item-link {
    padding: 40px 30px 20px
}

.topics .blocks-item-title {
    font-size: 1.7em;
    font-weight: 700;
    text-align: center
}

.blocks-item:hover .blocks-item-title {    
    color: #ff248a !important;    
    transition: color .9s ease-in-out;

}

.blocks-item-link:focus {
    outline: 0;
    box-shadow: none;
    text-decoration: none
}

.blocks-item-link {
    background: #fff;
    color: #333333;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    border-radius: inherit;
    position: relative
}

.topics .blocks-item-link-community {
    padding: 40px 30px 20px
}

.topics .blocks-item-title-community {
    font-size: 1.8em;
    font-weight: 700;
    text-align: center
}

span.blocks-item-title-community.element-fade.animate__animated.animate__fadeInUp {
    text-decoration-color: rgba(227, 28, 121, 1)
}

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

.blocks-item-link-community:focus {
    outline: 0;
    box-shadow: none;
    text-decoration: none
}

.blocks-item-title {
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: 900;
    font-size: 1.1em;
    color: rgba(227, 28, 121, 1)
}


/* .blocks-item-title:hover, 
.blocks-item-title:focus {
    text-decoration: underline;
    color: rgba(227, 28, 121, 1);
    transition: all .3s ease

} */

.blocks-item-title-community {
    margin-top: 5px;
    margin-bottom: 0;
    font-weight: 500;
    color: #333
}

.blocks-item-description {
    font-size: .9em;
    margin: 0
}

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

.blocks-item-description-community {
    font-size: .9em;
    margin: 0
}

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

.section {
    margin-bottom: 40px
}

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

.home-section h2 {
    color: #333333;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 600
}

.categories {
    position: relative;
    top: -150px;
    margin-bottom: -150px
}

.blocks-item span.category-icon,
.topics-item .topic-icon {    
    height: 50px;
    width: 50px;
    display: block;
    margin: 0 auto 15px;
    line-height: 60px;
    text-align: center;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    transform: scale(1.4);
    transition: transform .3s ease-in-out, opacity .3s ease-in-out
}

.blocks-item span.category-icon img,
.topics-item .topic-icon img {
    max-width: 60px
}

.blocks-item:hover span.category-icon,
.topics-item:hover .topic-icon {
    transition: transform .3s ease-in-out, opacity .3s ease-in-out;
    transform: scale(1.6)
}

.blocks-item span.category-icon i,
.topics-item .topic-icon i {
    color: rgba(227, 28, 121, 1);
    font-size: 2.5em;
    line-height: 60px
}

.blocks-item span.category-icon i:first-child,
.blocks-item span.category-icon i:nth-child(2),
.blocks-item span.category-icon i:nth-child(3),
.blocks-item span.category-icon i:nth-child(4),
.blocks-item span.category-icon i:nth-child(5),
.blocks-item span.category-icon i:nth-child(6),
.blocks-item span.category-icon i:nth-child(7),
.blocks-item span.category-icon i:nth-child(8),
.blocks-item span.category-icon i:nth-child(9),
.topics-item .topic-icon i:first-child {
    display: none
}

.blocks-item span.category-icon i:last-child,
.topics-item .topic-icon i:last-child {
    display: block
}

.blocks-item-community span.category-icon,
.topics-item .topic-icon {
    /* display: block; */
    margin: 0 auto;
    /* border-radius: 100%; */
    line-height: 60px;
    text-align: center;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    transition: transform .4s, opacity .4s
}

.blocks-item-community span.category-icon img,
.topics-item .topic-icon img {
    max-width: 60px
}

.blocks-item-community:hover span.category-icon,
.topics-item:hover .topic-icon {
    transition: transform .4s, opacity .4s;
    transform: scale(2)
}

.blocks-item-community span.category-icon i,
.topics-item .topic-icon i {
    color: rgba(227, 28, 121, 1);
    font-size: 2.5em;
    line-height: 60px
}

.blocks-item-community span.category-icon i:first-child,
.blocks-item-community span.category-icon i:last-child,
.blocks-item-community span.category-icon i:nth-child(2),
.blocks-item-community span.category-icon i:nth-child(3),
.blocks-item-community span.category-icon i:nth-child(4),
.blocks-item-community span.category-icon i:nth-child(5),
.blocks-item-community span.category-icon i:nth-child(6),
.blocks-item-community span.category-icon i:nth-child(7),
.blocks-item-community span.category-icon i:nth-child(8),
.blocks-item-community span.category-icon i:nth-child(9),
.topics-item .topic-icon i:last-child {
    display: block
}

.article-list li:before,
.article-relatives li:before,
.quick-articles ul>li>a:before,
.section-lists li:before {
    content: "\f0f6";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    margin-top: 1px;
    padding-left: 5px
}

[dir=rtl] .article-list li:before,
[dir=rtl] .article-relatives li:before,
[dir=rtl] .quick-articles ul>li>a:before,
[dir=rtl] .section-lists li:before {
    left: auto;
    right: 0
}

.section-lists li:before {
    content: "\e185"
}

.article-relatives li a {
    color: rgba(20, 20, 20, 1)
}

.article-relatives h2 {
    margin-bottom: 15px
}

.section-container .section-empty {
    /* margin-top: 15px; */
    display: none
}

.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: 0;
        width: 100%
    }

    [dir=rtl] .promoted-articles-item {
        padding: 0 0 0 30px
    }
}

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

.promoted-articles-item a,
.quick-articles li a {
    display: block;
    border-bottom: 1px solid #DDDDDD;
    padding: 15px 0;
    color: rgba(20, 20, 20, 1);
    text-decoration: underline;
    text-decoration-color: rgba(227, 28, 121, 1);
}

.promoted-articles-item a:hover,
.quick-articles li a:hover {
    color: rgba(227, 28, 121, 1);
    text-decoration: underline;
    text-decoration-color: rgba(20, 20, 20, 1);
}

.article-list li,
.article-relatives li,
.quick-articles li a,
.section-lists li {
    padding-left: 30px
}

[dir=rtl] .article-list li,
[dir=rtl] .article-relatives li,
[dir=rtl] .quick-articles li a,
[dir=rtl] .section-lists li {
    padding-left: 0;
    padding-right: 25px
}

.quick-articles ul li:last-child a {
    border-bottom: 0
}

.article-list li,
.quick-articles section li,
.section-lists li {
    position: relative;
    margin-bottom: 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 #DDDDDD
    }
}

.new-request-title:after,
.quick-articles section h2:after,
.search_heading:after {
    content: "\f005";
    font-family: FontAwesome;
    margin-left: -18px;
    opacity: .1;
    font-size: 2em;
    position: absolute;
    margin-top: -4px
}

.new-request-title {
    font-weight: 600
}

.new-request-title:after {
    content: "\f0e0";
    font-size: 45px;
    margin-left: -10px
}

.quick-articles section.recent-articles h2:after {
    content: "\f06e"
}

.hide--icon section h2:after,
.hide--icon:after {
    display: none
}

.community,
.community-image {
    text-align: center
}

.community-image {
    display: flex;
    align-items: center;
    min-height: 200px;
    background-image: url(/hc/theming_assets/01J0KKDQDHMZ9HTNJX0JYHET9T);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    position: relative;
    margin-bottom: -30px
}

.community-image:before {
    position: absolute;
    content: "";
    background: #000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .5
}

.community-image .btn {
    background: hsla(0, 0%, 100%, .78);
    border: 2px solid hsla(0, 0%, 100%, .72);
    color: #333333;
    padding: 10px 45px;
    border-radius: 8px;
    font-size: 1.3em;
    font-weight: 600;
    position: relative;
    margin: 0 5px
}

.activity,
.community {
    border-top: 0;
    padding: 30px 0
}

.pt-80 {
    padding-top: 80px
}

.pt-0 {
    padding-top: 0
}

.mb-30 {
    margin-bottom: 30px
}

.recent-activity-item>h3 {
    margin-bottom: 5px
}

.recent-activity-header {
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.5em;
    font-weight: 600
}

.recent-activity-list {
    padding: 0
}

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

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

.recent-activity-item-link,
.recent-activity-item-parent {
    margin: 6px 0;
    color: #333333;
    display: inline-block;
    width: 100%
}

@media (min-width:768px) {

    .recent-activity-item-link,
    .recent-activity-item-parent {
        width: 70%;
        margin: 0
    }
}

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

.recent-activity-item-meta {
    margin: 15px 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-comment,
.recent-activity-item-time {
    color: #666;
    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-comment-icon svg {
    vertical-align: middle;
    color: rgba(227, 28, 121, 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 / SECTION PAGE
   ========================================================================== */

.category-container {
    display: flex;
    justify-content: flex-end
}

.category-content {
    flex: 1
}

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

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

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

.section-tree .section {
    flex: initial
}

@media (min-width:768px) {
    .section-tree .section {
        flex: 0 0 45%
    }
}

.section-tree-title {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 600;
    padding: 6px 15px
}

.section-tree-title a {
    color: #000;
    padding-left: -15px;
    text-decoration: none;
    text-underline-position: none
}

.section-tree-title-webinar {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    background: #002a3a;
    min-height: 85px;
    text-align: center;
    border-radius: 12px;
    align-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3; 
    padding: 15px 20px;
}

.section-tree-title-webinar a {
    color: #000
}


/*
.section-webinar:first-child .js-article-list li,
.section-webinar:first-child .section-tree-title-webinar {
    background: #d9f4f3;
    border-color: #d9f4f3
}

.section-webinar:first-child .js-article-list li:hover {
    background-color: #fff;
    cursor: pointer
}

.section-webinar:nth-child(2) .js-article-list li,
.section-webinar:nth-child(2) .section-tree-title-webinar {
    background: #e2ebc7;
    border-color: #e2ebc7
}

.section-webinar:nth-child(2) .js-article-list li:hover {
    background-color: #fff;
    cursor: pointer
}

.section-webinar:nth-child(3) .js-article-list li,
.section-webinar:nth-child(3) .section-tree-title-webinar {
    background: #ffe1e5;
    border-color: #ffe1e5
}

.section-webinar:nth-child(3) .js-article-list li:hover {
    background-color: #fff;
    cursor: pointer
}

.section-webinar:nth-child(4) .js-article-list li,
.section-webinar:nth-child(4) .section-tree-title-webinar {
    background: #dbeaf9;
    border-color: #dbeaf9
}

.section-webinar:nth-child(4) .js-article-list li:hover {
    background-color: #fff;
    cursor: pointer
}

.section-webinar:nth-child(5) .js-article-list li,
.section-webinar:nth-child(5) .section-tree-title-webinar {
    background: #d9f4f3;
    border-color: #d9f4f3
}

.section-webinar:nth-child(5) .js-article-list li:hover {
    background-color: #fff;
    cursor: pointer
}

.section-webinar:nth-child(6) .js-article-list li,
.section-webinar:nth-child(6) .section-tree-title-webinar {
    background: #e2ebc7;
    border-color: #e2ebc7
}

.section-webinar:nth-child(6) .js-article-list li:hover {
    background-color: #fff;
    cursor: pointer
}

.section-webinar:nth-child(7) .js-article-list li,
.section-webinar:nth-child(7) .section-tree-title-webinar {
    background: #ffe1e5;
    border-color: #ffe1e5
}

.section-webinar:nth-child(7) .js-article-list li:hover {
    background-color: #fff;
    cursor: pointer
}

.section-webinar:nth-child(8) .js-article-list li,
.section-webinar:nth-child(8) .section-tree-title-webinar {
    background: #dbeaf9;
    border-color: #dbeaf9
}

.section-webinar:nth-child(8) .js-article-list li:hover {
    background-color: #fff;
    cursor: pointer
}
*/


.section-webinar .js-article-list li {
    min-height: 6em;
    line-height: 1.5em
}

.recent-activity-controls>a,
.section-tree .see-all-articles {
    display: inline-block;
    padding: 6px 15px;
    background: #71aae1;
    border-radius: 8px;
    color: #333333;
    font-weight: 600;
    font-size: 1.1em;
    margin-top: 10px
}

.article-list-item,
.section-lists-item {
    border: 1px solid #DDDDDD;
    margin: 5px;
    background: rgba(255, 240, 247, 1);
    border-radius: 5px;
    font-size: 16px;
    padding: 10px 10px 8px
}

.article-list-item a,
.section-lists-item a {
    color: #333333;
    padding-left: 4px;
}

.article-list-item svg {
    vertical-align: middle;
    color: rgba(227, 28, 121, 1);
    width: 16px;
    height: 16px;
    display: inline-block;    
}

.icon-star {
    color: rgba(227, 28, 121, 1);
    font-size: 18px;
    display: inline
}

.section-container,
.section-container2 {
    display: flex;
    justify-content: flex-end
}

.section-content {
    flex: 1
}

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

    .section-content2 {
        flex: 1;
        flex: 0 0 100%
    }
}

.section-list {
    margin: 40px 0
}

.article-list--collapsed .article-list-item:nth-child(1n+4),
.section-list--collapsed .section-list-item:nth-child(1n+6) {
    display: none
}

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

.section-list-item:first-child {
    border-top: 1px solid #DDDDDD
}

.section-list-item a {
    align-items: center;
    color: #333333;
    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
}

.see-all-articles-trigger {
    cursor: pointer;
    display: block;
    padding: 15px;
    text-align: center
}

.article-hidden,
.see-all-articles-trigger[aria-hidden=true] {
    display: none
}

/* ==========================================================================
   ARTICLE PAGE
   ========================================================================== */

.article {
    flex: 1 0 auto
}

@media (min-width:1024px) {
    .article {
        padding: 0 20px
    }

    .full__article {
        flex: 1 0 100%;
        max-width: 100%;
        padding: 0
    }
}

[dir=rtl] .article {
    padding: 0 40px 0 0
}

/* BEGIN: feature-article-core-layout */
.article-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0
}

@media (min-width:1024px) {
    .article-container {
        display: grid;
        grid-template-columns: 20% 60% 20%;
        grid-template-areas: "toc article right-nav";
        gap: 30px;
        align-items: start
    }

    .article-toc-left-sidebar {
        grid-area: toc;
        position: sticky;
        top: 100px;
        align-self: flex-start;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden
    }

    .article {
        grid-area: article;
        min-width: 0
    }

    .article-right-sidebar {
        grid-area: right-nav;
        position: sticky;
        top: 100px;
        align-self: flex-start;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden
    }

    .article.full__article {
        grid-column: 1 / -1;
        max-width: 100%
    }
}
/* END: feature-article-core-layout */

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

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

.article-avatar {
    margin-right: 10px
}

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

.flex-row {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    align-items: center
}

.flex-row-start {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0
}

.flex-col {
    display: flex
}

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

.article-title .icon-lock {
    position: relative;
    left: -5px;
    vertical-align: baseline
}

.article-title {
    display: inline;
    vertical-align: middle;
    font-weight: 600;
    font-size: 40px
}

.article [role=button] {
    flex-shrink: 0;
    width: 100%
}

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

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

.article-meta {
    display: inline-block;
    vertical-align: middle
}

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

.article-body iframe {
    max-width: 100% !important;
    border: 1px solid #ddd;
    padding: 6px;
    border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(46, 46, 46, .27)
}

.article-body td {
    padding: 10px
}

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

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

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

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

.article-body ol>li,
.article-body p,
.article-body ul>li {
    margin-bottom: 15px
}

.article-body a:visited {
    color: #000
}

.article-body a {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: rgba(227, 28, 121, 1)
}

.article-body a:hover {
    color: rgba(227, 28, 121, 1);
    text-decoration-color: rgba(20, 20, 20, 1)
}

.community-body-comment {
    margin: 30px 5px
}

.community-body-comment span:visited {
    color: #000
}

.community-body-comment span {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: rgba(227, 28, 121, 1)
}

.community-body-comment span:hover {
    color: rgba(227, 28, 121, 1);
    text-decoration-color: rgba(20, 20, 20, 1)
}

.article-body code {
    padding: 0 5px;
    margin: 0 2px
}

.article-body code,
.article-body pre {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 3px
}

.article-body pre {
    padding: 10px 15px;
    overflow: auto;
    white-space: pre
}

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

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

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

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

.article-comment-count {
    color: #666
}

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

.article-comment-count-icon {
    vertical-align: middle;
    color: rgba(227, 28, 121, 1);
    width: 18px;
    height: 18px
}

.article-sidebar {
    margin-bottom: 20px;
    padding: 15px
}

.sidebar {
    flex: 1 0 25%;
    margin-bottom: 20px;
    padding: 0
}

@media (min-width:1024px) {
    .article-sidebar {
        border: 0;
        height: auto;
        background-color: rgba(247, 237, 247, 1)
    }

    .article-sidebar,
    .search-results-sidebar,
    body .request-sidebar {
        position: sticky;
        top: 30px;
        align-self: flex-start
    }
}

.article-relatives {
    border-top: 1px solid #DDDDDD;
    display: flex;
    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 #DDDDDD;
    padding: 30px 0;
    text-align: center
}

.article-votes-question {
    font-weight: 700;
    font-size: 1.4em
}

.article-vote {
    margin: 10px 5px;
    min-width: 90px;
    width: auto
}

.article-vote-down,
.article-vote-up {
    border: 2px solid rgba(227, 28, 121, 1);
    transition: background-color .3s ease-in-out
}

.article-vote-up:active,
.article-vote-up:focus,
.article-vote-up:hover {
    background: #fff;
    border-color: #4cae4c;
    color: #4cae4c
}

.article-vote-down:active,
.article-vote-down:focus,
.article-vote-down:hover {
    background: #fff;
    border-color: #d83d31;
    color: #d83d31
}

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

.article-more-questions a {
    border-bottom: 1px solid rgba(227, 28, 121, 1)
}

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

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

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

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

.article-return-to-top-icon {
    transform: rotate(.5turn);
    position: relative;
    top: 5px
}

.sidenav-title {
    font-size: 18px;
    position: relative;
    font-weight: 600;
    margin-bottom: 10px;
    margin-left: 10px;
    display: block;
    font-family: 'Inter', sans-serif
}

.sidenav-item {
    background: rgba(247, 237, 247, 1);
    border-radius: 3px;
    color: #333333;
    text-decoration: none;
    display: block;
    margin-bottom: 3px;
    padding: 10px;
    font-size: .9em;
    border-bottom: 1px
}

.sidenav-item.current-article,
.sidenav-item:hover {
    background-color: rgba(227, 28, 121, 1);
    color: #FFFFFF;
    text-decoration: none
}

.recent-articles,
.related-articles {
    margin: 0;
    padding: 0
}

.recent-articles h3,
.related-articles h3 {
    display: none
}

.recent-articles ul,
.related-articles ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.recent-articles li,
.related-articles li {
    margin-bottom: 8px;
    position: relative;
    display: flex;
    align-items: center
}

.article-right-sidebar .recent-articles a,
.related-articles a {
    background-color: transparent;
    transition: all .3s ease;
    text-decoration: none;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 0.9em;
    width: 100%
}

.article-right-sidebar .recent-articles a svg,
.related-articles a svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0;
    vertical-align: middle
}

.article-right-sidebar .recent-articles a:hover,
.related-articles a:hover {
    background-color: var(--brand-color-10);
    color: rgba(227, 28, 121, 1)
}

/* BEGIN: feature-toc */
/* Table of Contents Styles */
.article-right-sidebar {
    background: transparent;
    padding: 0
}

.left-sidebar-section {
    background: #ffffff;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 24px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)
}

.left-sidebar-section:last-child {
    margin-bottom: 0
}

.left-sidebar-section .collapsible-sidebar-toggle {
    margin-bottom: 0;
    padding: 20px 20px 16px 20px
}

.left-sidebar-section .sidenav-title {
    margin-left: 0;
    margin-bottom: 0;
    padding: 20px 20px 16px 20px;
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #e0e0e0
}

.left-sidebar-section .collapsible-sidebar-body {
    margin-top: 0;
    padding: 16px 20px 20px 20px
}

.left-sidebar-section .collapsible-sidebar-body ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.left-sidebar-section .collapsible-sidebar-body li {
    margin-bottom: 2px
}

.left-sidebar-section .article-relatives {
    margin-top: 0;
    padding-top: 0
}

.article-toc-left-sidebar {
    background: #ffffff;
    border-radius: 8px;
    padding: 0;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)
}

/* Custom scrollbar for sidebars */
.article-right-sidebar::-webkit-scrollbar,
.article-toc-left-sidebar::-webkit-scrollbar {
    width: 6px
}

.article-right-sidebar::-webkit-scrollbar-track,
.article-toc-left-sidebar::-webkit-scrollbar-track {
    background: transparent
}

.article-right-sidebar::-webkit-scrollbar-thumb,
.article-toc-left-sidebar::-webkit-scrollbar-thumb {
    background: var(--brand-color-30);
    border-radius: 3px
}

.article-right-sidebar::-webkit-scrollbar-thumb:hover,
.article-toc-left-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--brand-color-50)
}

#toc-container {
    width: 100%
}

.toc-nav {
    width: 100%
}

.toc-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0;
    padding: 20px 20px 16px 20px;
    display: block;
    font-family: 'Inter', sans-serif;
    color: #333;
    border-bottom: 1px solid #e0e0e0
}

.toc-list {
    list-style: none;
    padding: 16px 20px 20px 20px;
    margin: 0
}

.toc-item-wrapper {
    margin: 0;
    padding: 0
}

.toc-item {
    display: block;
    padding: 8px 12px;
    margin-bottom: 3px;
    color: #333333;
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.9em;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    position: relative
}

.toc-item:hover {
    background-color: var(--brand-color-10);
    color: rgba(227, 28, 121, 1)
}

.toc-item.active {
    background-color: var(--brand-color-15);
    color: rgba(227, 28, 121, 1);
    border-left-color: rgba(227, 28, 121, 1);
    font-weight: 700
}

.toc-item.toc-level-1 {
    padding-left: 12px;
    font-size: 0.9em;
    font-weight: 700
}

.toc-item.toc-level-2 {
    padding-left: 1.5rem;
    font-size: 0.85em
}

.toc-item.toc-level-3 {
    padding-left: 2.5rem;
    font-size: 0.8em
}

/* Mobile TOC Styles */
@media (max-width: 1023px) {
    .article-right-sidebar,
    .article-toc-left-sidebar {
        display: none
    }
    #scroll-to-top-btn,
    .toc-fab {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background-color: rgba(227, 28, 121, 1);
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease
    }

    .toc-fab:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4)
    }

    .toc-fab svg {
        width: 24px;
        height: 24px;
        fill: currentColor
    }

    .toc-backdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease
    }

    .toc-backdrop.active {
        opacity: 1;
        visibility: visible
    }

    .toc-modal {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 101;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3)
    }

    .toc-modal.active {
        transform: translateY(0)
    }

    .toc-modal-header {
        padding: 20px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background: white;
        z-index: 1
    }

    .toc-modal-title {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        font-family: 'Inter', sans-serif
    }

    .toc-modal-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        padding: 4px;
        color: #333333;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px
    }

    .toc-modal-close:hover {
        background-color: rgba(0, 0, 0, 0.1)
    }

    .toc-modal-body {
        padding: 20px
    }

    body.toc-modal-open {
        overflow: hidden
    }
}
/* END: feature-toc */

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

.attachments .attachment-item {
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px
}

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

.attachment-item a {
    color: #000;
    font-weight: 700
}

.attachments .attachment-item .attachment-icon {
    color: #333333;
    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 {
    border-color: #DDDDDD;
    background-color: #fff;
    border-radius: 3px
}

.upload-dropzone span {
    color: #666
}

.share {
    padding: 0;
    white-space: nowrap
}

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

.share li {
    height: 35px;
    width: 35px
}

.share a {
    color: #666
}

.share a:hover {
    text-decoration: none;
    color: rgba(227, 28, 121, 1)
}

.share a svg {
    height: 25px;
    width: 25px;
    display: block
}

.copy-article-button {
    border: 0;
    background: #fff;
    padding: 6px;
    color: #333333;
    transform: scale(1.2);
    transition: transform .5s ease-in-out
}

.copy-article-button:hover {
    color: rgba(227, 28, 121, 1);
    cursor: pointer;
    transform: scale(1.5)
}

.comment {
    border-bottom: 1px solid #DDDDDD;
    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 #DDDDDD;
    border-top: 1px solid #DDDDDD;
    padding: 20px 0
}

.comment-overview p {
    margin-top: 20px
}

.comment-callout {
    color: #666;
    display: inline-block;
    text-align: right;
    font-size: 24px;
    margin-left: 40px;
    margin-top: 15px;
    margin-bottom: 15px
}

.comment-callout a {
    color: #000
}

.comment-callout-status {
    color: #000;
    display: inline-block;
    text-align: right;
    font-size: 35px;
    margin: 3px 10px
}

.community-share {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 20px 10px 25px 0
}

.comment-callout-status a {
    color: rgba(20, 20, 20, 1)
}

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

.comment-sorter .dropdown-toggle {
    color: #666;
    font-weight: 300
}

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

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

.comment-wrapper.comment-official {
    border: 1px solid rgba(227, 28, 121, 1);
    padding: 40px 20px 20px
}

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

.comment-config {
    display: flex
}

.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-start;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px
}

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

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

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

.comment-meta {
    flex: 1 0 auto
}

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

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

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

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

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

.comment-container {
    width: 100%
}

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

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

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

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

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

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

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

.comment-ccs {
    display: none
}

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

.comment-attachments a {
    color: rgba(20, 20, 20, 1)
}

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

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

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

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

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

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

.comment-body a:visited {
    color: #000
}

.comment-body a {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: rgba(227, 28, 121, 1)
}

.comment-body a:hover {
    color: rgba(227, 28, 121, 1);
    text-decoration-color: rgba(20, 20, 20, 1)
}

.comment-body code {
    padding: 0 5px;
    margin: 0 2px
}

.comment-body code,
.comment-body pre {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 3px
}

.comment-body pre {
    padding: 10px 15px;
    overflow: auto;
    white-space: pre
}

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

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

.vote {
    display: flex;
    flex-direction: row;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 10px
}

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

.vote-sum {
    color: #000;
    display: block;
    margin: 3px 10px;
    font-size: 1.4em
}

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

.vote-up:hover {
    color: #4cae4c
}

.vote-down:hover {
    color: red
}

.vote-down,
.vote-up {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    min-height: 35px;
    min-width: 35px;
    display: flex;
    align-items: center;
    justify-content: center
}

.up-voted {
    color: #4cae4c
}

.down-voted {
    color: red
}

.up-voted:hover {
    color: #0e200e
}

.down-voted:hover {
    color: darken(red, 40%)
}

.actions {
    text-align: center;
    flex-shrink: 0
}

.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($community_background_image);
    margin-bottom: 10px
}

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

.community-footer-title {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 600
}

.community-featured-posts .title {
    font-size: 18px;
    font-weight: 600
}

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

.community-header {
    margin-bottom: 30px;
    margin-top: 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
    }
}

.pt-40 {
    padding-top: 40px
}

.mt-30 {
    margin-top: 30px
}

.topics {
    max-width: none;
    width: 100%
}

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

.topic-header {
    border-bottom: 1px solid #DDDDDD;
    font-size: 15px
}

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

.topic-header .dropdown {
    display: block;
    border-top: 1px solid #DDDDDD;
    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
}

.community-follow-post {
    width: 100%;
    padding: 0 25px;
    font-size: 16px;
    border: none;
    border-radius: 10px
}

.community-follow {
    margin-bottom: 10px;
    width: 100%;
    padding: 0 25px
}

@media (min-width:768px) {

    .community-follow,
    .community-follow-post {
        margin-bottom: 0;
        width: auto
    }
}

.community-follow-post button {
    padding: 1px 25px;
    font-size: 16px;
    position: relative;
    width: 100%
}

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

@media (min-width:768px) {

    .community-follow button,
    .community-follow-post button {
        width: auto;
        padding: 0 25px
    }
}

.community-follow button:hover {
    background-color: #fff
}

.community-follow button:focus:after,
.community-follow button:hover:after {
    border-color: rgba(227, 28, 121, 1);
    color: rgba(227, 28, 121, 1)
}

.community-follow button[data-selected=true] {
    background-color: rgba(227, 28, 121, 1);
    color: #FFFFFF
}

.community-follow button[data-selected=true]:after {
    border-left: 1px solid #FFFFFF;
    color: #FFFFFF
}

.community-follow button[data-selected=true]:hover,
.community-follow button[data-selected=true]:hover:after {
    background-color: #fff;
    border-color: rgba(227, 28, 121, 1);
    color: rgba(227, 28, 121, 1)
}

.community-follow button:after {
    border-left: 1px solid #fff;
    content: attr(data-follower-count);
    color: #fff;
    display: inline-block;
    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(227, 28, 121, 1);
    margin: 0 10px 0 0;
    padding: 0 10px 0 0
}

.community-follow-post button:hover {
    background-color: #fff;
    color: rgba(227, 28, 121, 1)
}

.community-follow-post button:focus:after,
.community-follow-post button:hover:after {
    border-color: #FFFFFF;
    color: #FFFFFF
}

.community-follow-post button[data-selected=true] {
    background-color: rgba(227, 28, 121, 1);
    color: #FFFFFF
}

.community-follow-post button[data-selected=true]:after {
    border-left: 1px solid #FFFFFF;
    color: #FFFFFF
}

.community-follow-post button[data-selected=true]:hover {
    background-color: #881149;
    border-color: #881149
}

.community-follow-post button:after {
    border-left: 1px solid #fff;
    content: attr(data-follower-count);
    color: #fff;
    display: inline-block;
    margin-left: 15px;
    padding-left: 10px;
    position: absolute;
    right: 10px
}

@media (min-width:768px) {
    .community-follow-post button:after {
        position: static
    }
}

[dir=rtl] .community-follow-post button:after {
    border-left: 0;
    border-right: 1px solid rgba(227, 28, 121, 1);
    margin: 0 10px 0 0;
    padding: 0 10px 0 0
}

.striped-list {
    padding: 0
}

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

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

.striped-list-info {
    flex: 2
}

.striped-list-title {
    color: rgba(20, 20, 20, 1);
    font-size: 1.4em;
    text-decoration: underline;
    margin-bottom: 0;
    margin-right: 5px;
    font-weight: 600
}

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

.striped-list-title:visited {
    color: darken(rgba(20, 20, 20, 1), 0)
}

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

.striped-list-count {
    color: #666;
    font-size: 15px;
    justify-content: flex-start;
    text-transform: capitalize;
    line-height: 1.5
}

@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;
    font-size: 1.6em;
    font-weight: 600
}

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

.community-vote {
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #DDDDDD
}

.community-vote,
.community-vote>* {
    display: flex;
    align-items: center
}

.status-label {
    background-color: #038153;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-right: 2px;
    padding: 3px 15px;
    vertical-align: middle;
    white-space: nowrap;
    display: inline-block
}

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

.status-label-featured,
.status-label-official,
.status-label-pinned {
    background-color: rgba(227, 28, 121, 1);
    vertical-align: middle
}

.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-closed,
.status-label-not-planned {
    background-color: #e9ebed;
    color: #666
}

.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-closed,
.status-label-hold,
.status-label-new,
.status-label-open,
.status-label-pending,
.status-label-solved {
    text-transform: lowercase
}

.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;
    font-weight: 600;
    font-size: 40px
}

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

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

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

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

.post-info-container {
    display: flex;
    margin-top: 20px;
    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;
    font-size: 16px;
    font-weight: 600
}

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

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

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

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

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

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

.post-body a:visited {
    color: #000
}

.post-body code {
    padding: 0 5px;
    margin: 0 2px
}

.post-body code,
.post-body pre {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 3px
}

.post-body pre {
    padding: 10px 15px;
    overflow: auto;
    white-space: pre
}

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

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

.post-comment-count {
    color: #000;
    display: block;
    margin: 3px 20px;
    font-size: 1.4em
}

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

.post-comment-count .icon-comments {
    color: #000;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 15px;
    font-size: 1.5em
}

.post-sidebar {
    border-top: 1px solid #DDDDDD;
    flex: 0.1;
    padding: 30px;
    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
    }
}

.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 #DDDDDD;
    border-top: 1px solid #DDDDDD
}

@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%;
    z-index: 1
}

@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,
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
    display: inline-block
}

.collapsible-nav-toggle:focus {
    outline: none
}

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

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

.collapsible-nav-list li {
    color: #333333;
    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: #333333;
    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;
        text-decoration: none
    }
}

.collapsible-nav-list li:not(.current),
.collapsible-nav-list li:not([aria-selected=true]) {
    display: none
}

@media (min-width:768px) {

    .collapsible-nav-list li:not(.current),
    .collapsible-nav-list li:not([aria-selected=true]) {
        display: block
    }

    .collapsible-nav-list li[aria-selected=true] {
        padding: 15px 0 11px
    }
}

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

@media (min-width:768px) {

    .collapsible-nav-list li.current,
    .collapsible-nav-list li[aria-selected=true] {
        border-bottom: 4px solid rgba(227, 28, 121, 1);
        order: 1
    }
}

.collapsible-nav-list li.current a,
.collapsible-nav-list li[aria-selected=true] a {
    color: #333333
}

.collapsible-nav[aria-expanded=true] li:not(.current),
.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]) {
    display: block
}

.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,
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
    display: inline-block
}

.collapsible-sidebar-toggle:focus {
    outline: none;
    border: 1px solid rgba(227, 28, 121, 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-nav {
    background-color: rgba(247, 237, 247, 1);
    margin-bottom: 20px
}

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

.my-activities-table .striped-list-title {
    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 td:first-child,
.my-activities-table th:first-child {
    padding-left: 0
}

@media (min-width:1024px) {

    .my-activities-table td:first-child,
    .my-activities-table th:first-child {
        width: 500px
    }
}

.my-activities-table td:last-child,
.my-activities-table th: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-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;
        width: auto
    }

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

@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 td:last-child {
    color: #666;
    font-size: 13px
}

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

.no-activities {
    color: #666
}

.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: 30px
}

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

.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-ccs,
.request-main .comment-form-controls {
    display: block
}

.request-main .comment-show-container {
    border-radius: 2px;
    border: 1px solid #DDDDDD;
    color: #666;
    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(227, 28, 121, 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(227, 28, 121, 1)
}

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

.request-title {
    width: 100%;
    font-weight: 600
}

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

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

@media (min-width:1024px) {
    .request-sidebar {
        background-color: rgba(247, 237, 247, 1);
        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 #DDDDDD;
    font-size: 0;
    margin: 0;
    padding-bottom: 20px
}

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

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

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

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

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

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

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

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

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

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

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

.pagination-first,
.pagination-last,
.pagination-next,
.pagination-prev {
    display: inline-block
}

.pagination-first-link,
.pagination-last-link {
    padding: 0 10px
}

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

.meta-group {
    display: block
}

.meta-group * {
    display: inline
}

.meta-data {
    color: #666;
    font-size: 13px;
    font-family: 'Inter', sans-serif
}

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

.profile-header {
    padding: 30px 0
}

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

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

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

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

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

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

.profile-avatar .icon-agent {
    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;
    font-weight: 600;
    line-height: 22px
}

.profile-header .basic-info .name a {
    color: #333
}

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

.edit-profile-button a {
    background-color: rgba(227, 28, 121, 1);
    border: 0;
    color: #FFFFFF;
    line-height: normal;
    padding: 8px 20px;
    outline-color: rgba(227, 28, 121, 1)
}

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

.profile-stats {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    justify-content: space-evenly
}

.profile-stats-1 {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    flex-basis: 100%
}

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

.profile-stats .stat-label {
    color: #666;
    flex: 0 0 100px;
    margin-right: 10px
}

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

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

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

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

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

    .profile-stats-activity .stat-label {
        flex: 0 1 auto
    }
}

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

@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
    }

    .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: 1px solid rgba(227, 28, 121, 1);
    border-radius: 4px;
    color: rgba(227, 28, 121, 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: rgba(247, 237, 247, 1);
    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: #666;
    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: 1px solid #eee;
    font-size: 13px
}

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

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

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

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

@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }

  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

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

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

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

.profile-contribution-title>a {
    color: #333333
}

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

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

@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 #DDDDDD
}

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

    .profile-activity:not(:last-child) {
        border-left: 1px solid #DDDDDD
    }

    [dir=rtl] .profile-activity:not(:last-child) {
        border-left: 0;
        border-right: 1px solid #DDDDDD
    }
}

.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: 45px;
    height: 45px;
    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: rgba(247, 237, 247, 1)
}

@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: #fff;
    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 {
    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 #DDDDDD;
    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.current {
    background-color: transparent;
    color: #333;
    text-decoration: none
}

.search-results-sidebar .sidenav-item:hover {
    background-color: transparent;
    color: #333;
    text-decoration: none
}

.search-results-sidebar .sidenav-subitem {
    unicode-bidi: embed
}

.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 .see-all-filters {
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    padding: 10px;
    color: #333;
    font-weight: 600
}

.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: " \2304";
    font-weight: 700;
    position: relative;
    top: -4px
}

.search-results-subheading {
    font-size: 18px;
    font-weight: 600
}

.search-results-list {
    margin-bottom: 25px
}

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

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

.search-results-list>li h2 {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 1.2em
}

.search-results-list>li h2 a {
    color: #333
}

.search-results .meta-group {
    display: block;
    align-items: center;
    clear: both;
    color: #666
}

@media (min-width:1024px) {
    .search-results .meta-group {
        display: flex
    }
}

.search-results .meta-group>li {
    display: block
}

@media (min-width:1024px) {
    .search-results .meta-group>li {
        display: inline
    }

    .search-results .meta-group li:first-child {
        flex: 1
    }
}

.search-results .meta-group .meta-data {
    color: inherit
}

[dir=ltr] .search-results .meta-group .meta-data:not(:last-child) {
    margin-right: 20px
}

[dir=rtl] .search-results .meta-group .meta-data:not(:last-child) {
    margin-left: 20px
}

.search-results .meta-group .meta-data:after {
    content: none
}

.search-results-description {
    margin-top: 10px;
    word-break: break-word
}

.search-result-title {
    font-size: 16px;
    display: inline-block
}

[dir=ltr] .search-result-icons {
    float: right
}

[dir=rtl] .search-result-icons {
    float: left
}

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

.search-result-meta-count-icon,
.search-result-votes-icon {
    color: rgba(227, 28, 121, 1);
    vertical-align: middle;
    width: 13px;
    height: 13px
}

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

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

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

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

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

.search-result-breadcrumbs {
    margin: 0
}

@media (min-width:1024px) {
    .search-result-breadcrumbs {
        display: table-row
    }

    .search-result-breadcrumbs li {
        display: table-cell
    }
}

.search-result-breadcrumbs li,
.search-result-breadcrumbs li a,
.search-result-breadcrumbs li a:visited {
    color: inherit
}

.search-results-description em {
    background: #fff3ca;
    font-style: normal;
    font-weight: 700
}

html[lang|=zh] .search-results-description em {
    font-style: normal;
    background: #ff0
}

.notification {
    border: 1px solid;
    display: table;
    font-family: sans-serif;
    font-size: 12px;
    padding: 13px 15px;
    transition: height .2s;
    width: 100%;
    color: #555
}

.notification a {
    color: #158ec2
}

.notification-inner {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 980px
}

.notification-dismiss,
.notification-icon,
.notification-text {
    display: table-cell;
    vertical-align: middle
}

.notification-text {
    padding: 0 15px;
    width: 100%
}

.notification+.notification {
    margin-bottom: -1px;
    position: relative;
    top: -1px
}

.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;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cg fill='none' stroke='%23555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555'/%3E%3C/svg%3E")
}

.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;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cg fill='none' stroke='%23555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m3.5 6 2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E")
}

.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;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='m5.06 1.27-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 0 0-.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
}

.notification-dismiss,
a.notification-dismiss {
    color: #555;
    cursor: pointer;
    opacity: .6;
    transition: opacity .1s ease;
    text-decoration: none !important
}

.notification-dismiss:hover {
    opacity: 1
}

.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;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='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: inherit
}

.topic-filters {
    display: flex;
    justify-content: space-between
}

.dropdown-toggle-post {
    padding: 5px 12px;
    min-width: 225px;
    margin: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    border: 2px solid rgba(227, 28, 121, 1)
}

.dropdown-toggle,
.dropdown-toggle-post {
    cursor: pointer;
    background: none;
    text-align: initial
}

.dropdown-toggle {
    border: 0;
    display: inline-block;
    padding: 0;
    vertical-align: middle
}

.dropdown-toggle-post:hover {
    background-color: var(--bg-color);
    transition: background-color .3s ease-in-out
}

.dropdown-toggle-post:focus {
    border: 2px double var(--brand-color);
    transition: border .3s ease-in-out
}

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

.dropdown-toggle-post>* {
    display: inline-block;
    vertical-align: middle;
    padding: 10px
}

.dropdown-toggle>* {
    display: inline-block
}

.dropdown-toggle>span {
    font-weight: 600
}

.dropdown-menu {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    display: none;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    left: 0;
    margin-top: 10px;
    min-width: 170px;
    padding: 10px 0;
    position: absolute;
    text-align: left;
    z-index: 1000
}

.dropdown-menu[aria-expanded=true],
.dropdown-toggle[aria-expanded=true]+.dropdown-menu {
    display: block
}

.dropdown-menu [role=separator] {
    border-bottom: 1px solid #d8d8d8;
    color: #969696;
    display: block;
    font-weight: 400;
    font-size: 11px;
    padding: 5px 0;
    margin: 5px 20px 10px
}

.dropdown-menu [role=menuitem] {
    color: #333;
    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] {
    padding: 7px 20px 7px 40px
}

.dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitem]:hover {
    background: #f3f3f3;
    text-decoration: none;
    color: #333
}

.dropdown-menu [role=menuitem][aria-selected=true] {
    cursor: default
}

.dropdown-menu [role=menuitem][aria-selected=true]:after {
    content: "";
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' aria-hidden='true'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 7 3 3 7-7'/%3E%3C/svg%3E");
    display: inline-block;
    height: 12px;
    margin-left: 10px;
    width: 12px
}

[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]:after {
    margin-left: 0;
    margin-right: 10px;
    float: left
}

.dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitem][hidden] {
    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
}

.cd-primary-nav-trigger .cd-menu-text {
    color: rgba(33, 39, 83, 1);
    display: none
}

span.cd-menu-icon {
    position: relative;
    top: -3px;
    margin-left: 23px
}

span.ml-5 {
    margin-left: 5px
}

.cd-primary-nav-trigger .cd-menu-icon {
    display: inline-block;
    right: auto;
    transform: translateX(-50%) translateY(-50%);
    width: 18px;
    height: 2px;
    background-color: rgba(33, 39, 83, 1);
    transition: background-color .3s
}

.cd-primary-nav-trigger .cd-menu-icon:after,
.cd-primary-nav-trigger .cd-menu-icon:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(33, 39, 83, 1);
    right: 0;
    transition: transform .3s, top .3s, background-color 0s
}

.cd-primary-nav-trigger .cd-menu-icon:before {
    top: -5px
}

.cd-primary-nav-trigger .cd-menu-icon:after {
    top: 5px
}

.cd-primary-nav-trigger .cd-menu-icon.is-clicked {
    background-color: hsla(0, 0%, 100%, 0)
}

.cd-primary-nav-trigger .cd-menu-icon.is-clicked:after,
.cd-primary-nav-trigger .cd-menu-icon.is-clicked:before {
    background-color: rgba(33, 39, 83, 1)
}

.cd-primary-nav-trigger .cd-menu-icon.is-clicked:before {
    top: 0;
    transform: rotate(135deg)
}

.cd-primary-nav-trigger .cd-menu-icon.is-clicked:after {
    top: 0;
    transform: rotate(225deg)
}

@media only screen and (min-width:768px) {
    .cd-primary-nav-trigger {
        width: 100px;
        background-color: transparent
    }

    .cd-primary-nav-trigger .cd-menu-text {
        display: inline-block
    }

    .cd-primary-nav-trigger .cd-menu-icon {
        left: auto;
        right: 1em;
        transform: translateX(0) translateY(-50%)
    }
}

.cd-primary-nav {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .83);
    z-index: 2;
    text-align: center;
    padding: 50px 0;
    backface-visibility: hidden;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-100%);
    transition-property: transform;
    transition-duration: .4s
}

.cd-primary-nav li {
    font-size: 22px;
    font-size: 1.375rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: .2em 0
}

.cd-primary-nav a {
    display: block;
    padding: .2em 1em;
    transition: background .2s;
    color: #FFFFFF
}

.cd-primary-nav a:active,
.cd-primary-nav a:focus {
    color: #fff
}

.cd-primary-nav a:hover {
    color: #fff;
    background: rgba(227, 28, 121, 1);
    text-decoration: none
}

.cd-primary-nav.is-visible {
    transform: translateY(0)
}

.visible_xs {
    display: block
}

@media only screen and (min-width:768px) {
    .cd-primary-nav {
        padding: 80px 0
    }

    .visible_xs {
        display: none
    }
}

@media only screen and (min-width:1170px) {
    .cd-primary-nav li {
        font-size: 30px;
        font-size: 1.875rem
    }

    .cd-primary-nav .cd-label {
        font-size: 16px;
        font-size: 1rem
    }
}

@media (max-width:768px) {
    .xs_hide {
        display: none
    }

    .categories {
        position: relative;
        top: 25px;
        margin-bottom: 0
    }

    .hero {
        height: 300px
    }

    .hero-inner {
        transform: translateY(-50%)
    }

    .blocks-item-community,
    .categories .blocks-item {
        margin: 0 0 50px
    }
}

@media (max-width:600px) {
    .community-image .btn {
        display: block;
        margin-bottom: 5px
    }
}

@media (max-width:464px) {
    .hero-inner .search-icon {
        top: 65%
    }

    .nav-wrapper .language-selector {
        display: none
    }
}

.community-badge-title {
    background-color: #04444d;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
    vertical-align: top;
    white-space: nowrap;
    display: inline-flex;
    line-height: 18px;
    vertical-align: middle
}

.profile-info .community-badge-title {
    padding: 2px 8px;
    line-height: 20px;
    margin-left: 5px
}

.community-badge-container-achievements {
    display: flex
}

.community-badge-container-achievements>.community-badge-titles {
    margin-left: calc(28px - .5em)
}

[dir=rtl] .community-badge-container-achievements>.community-badge-titles {
    margin-right: calc(28px - .5em)
}

.community-name-and-title-badges {
    display: flex;
    flex-wrap: wrap
}

.community-badge {
    margin: 4px
}

.community-badge-achievements {
    display: block;
    height: 12px;
    white-space: nowrap;
    width: 12px
}

.profile-info .community-badge-achievements {
    height: 40px;
    width: 40px;
    padding-top: 10px
}

.community-title-badges {
    flex-basis: 100%;
    margin-top: 15px
}

.community-badge-achievements-rest {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    vertical-align: top
}

.community-badge-achievements img {
    width: 100%;
    height: 100%
}

.community-badge-titles img {
    width: 20px;
    height: 20px
}

.profile-info .community-badge-achievements-rest {
    line-height: 40px;
    font-size: 20px
}

.split-button {
    display: flex
}

.split-button button {
    background: rgba(227, 28, 121, 1);
    border: 0;
    color: #fff;
    height: 32px;
    line-height: 16px;
    outline-color: rgba(227, 28, 121, 1)
}

.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):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
}

[dir=ltr] .split-button button:not(:only-child):first-child,
[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
}

.profile-badges-items {
    margin-top: 25px
}

.profile-badges-item {
    border-top: 1px solid #DDDDDD;
    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
}

.profile-section .profile-badges-item-image img {
    background: #efefef;
    border-radius: 40px;
    width: 40px;
    height: 40px
}

[dir=rtl] .profile-badges-item-image {
    margin-left: 12px;
    margin-right: 0
}

.profile-badges-item-metadata-title,
.profile-badges-item-title {
    font-size: 15px;
    margin-bottom: 10px
}

.profile-badges-item-title {
    font-weight: 600
}

.profile-badges-item-description,
.profile-badges-item-metadata-description {
    color: #666;
    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
}

.community-badge[aria-label="Community team"] {
    background: #eaa40a
}

.community-badge[aria-label="Community manager"],
.community-badge[aria-label="Community moderator"] {
    background: #11aa7b
}

.community-badge[aria-label="Good karma"],
.community-badge[aria-label="Idea generator"] {
    background: #4a8cf1
}

.community-badge[aria-label="Great answers"] {
    background: #fc585b
}

.b-600 {
    font-weight: 600
}

.mb-40 {
    margin-bottom: 40px
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1
}

.alert {
    border-width: 2px
}

.__with_fa {
    border: 2px solid #f5a623;
    background: rgba(245, 166, 35, .66);
    position: relative;
    font-size: 1.2em;
    line-height: 1.4;
    padding: 30px 15px 15px
}

.__with_fa .fa {
    position: absolute;
    top: 0;
    background: #fff;
    margin-top: -25px;
    border-radius: 100%;
    border: 2px solid #f5a623;
    left: 15px;
    height: 45px;
    width: 45px;
    display: block;
    text-align: center;
    line-height: 45px
}

.__with_fa .fa:before {
    margin-left: 5px
}

.__with_fa {
    margin-top: 40px
}

.alert-download {
    border: 2px solid #9adeec;
    background: #bce8f1
}

.alert-quote {
    border: 2px solid rgba(103, 77, 68, .26);
    background: rgba(121, 85, 72, .26)
}

.alert-pdf {
    border: 2px solid #e5415e;
    background: #e5415e;
    color: #fff
}

.alert-download .fa {
    border: 2px solid #9adeec
}

.alert-quote .fa {
    border: 2px solid #baaea8
}

.alert-pdf .fa {
    border: 2px solid #e5415e;
    color: #e5415e
}

.accordion {
    margin-bottom: 30px
}

.colored_accordion .accordion_title {
    background: #ddd;
    border-color: #ddd
}

.colored_accordion ._active {
    background: #ffb110;
    border-color: #ffb110;
    color: #fff
}

.default_accordion ._active {
    background: rgba(227, 28, 121, 1);
    border-color: rgba(227, 28, 121, 1);
    color: #fff
}

.accordion_content {
    display: none;
    padding: 10px
}

body .table {
    background: #fff
}

.table>thead>tr>th {
    color: #333;
    font-weight: 500;
    padding: 14px;
    border-bottom: 2px solid #DDDDDD
}

.table>tbody>tr>td {
    border-top: 1px solid #DDDDDD;
    padding: 14px;
    font-size: .9em
}

.table.header-color>thead>tr>th {
    border-color: #444;
    background: #444;
    color: #fff;
    padding: 10px
}

.dark-table {
    background: #444;
    color: #fff
}

.dark-table>thead>tr>th {
    border-bottom: 2px solid #fff
}

.dark-table>tbody>tr>td {
    background: #333;
    border-color: #fff
}

.dark-table>thead>tr>th {
    color: #fff
}

/* ==========================================================================
   SHORTCODES & ARTICLE ENHANCEMENTS
   ========================================================================== */

.colored-list ol,
.colored-list ul {
    margin: 15px 0 0
}

.colored-list {
    list-style-type: none;
    padding: 0;
    counter-reset: li-counter
}

.colored-list>li {
    position: relative;
    margin-bottom: 15px !important;
    padding-left: 35px;
    min-height: 0
}

.colored-list>li:before {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #fff;
    content: counter(li-counter);
    counter-increment: li-counter;
    background-color: rgba(227, 28, 121, 1);
    border-radius: 100%;
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center
}

.list-black>li:before {
    background-color: #a59898
}

.check-list-bullet li {
    list-style-type: none;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px !important
}

.check-list-bullet li:before {
    content: "\f058";
    position: absolute;
    top: 0;
    left: 0;
    font-family: FontAwesome;
    font-size: 25px;
    color: rgba(227, 28, 121, 1);
    margin-top: -6px
}

.article-body pre {
    margin-top: 15px
}

@media (max-width:550px) {
    .user-info span {
        display: none
    }

    .article-subscribe {
        width: 100%
    }

    .profile-header .basic-info .name {
        line-height: inherit
    }

    body .recent-activity-item-meta,
    body .recent-activity-item>h3 {
        margin: 0
    }
}

@media (max-width:768px) {
    .article-relatives .recent-articles {
        margin-bottom: 10px
    }

    .article-sidebar {
        margin-bottom: 0
    }

    .cd-primary-nav-trigger {
        padding-right: 0 !important
    }

    .split-button {
        width: 100%
    }

    .profile-stats-activity {
        padding-top: 10px
    }

    .profile-stats-counters {
        padding-bottom: 10px
    }
}

.ck.ck-button:focus-visible,
.ck.ck-content.ck-editor__editable.ck-editor__editable_inline.ck-focused,
.ck.ck-content.ck-editor__editable.ck-focused,
.ck.ck-toolbar:focus-visible {
    box-shadow: none !important;
    outline-offset: 0 !important
}

body .note--message,
body .quote--message,
body .support--message,
body .warning--message {
    padding: 30px 15px 15px;
    font-size: 16px !important;
    position: relative;
    margin-top: 40px;
    margin-bottom: 20px;
    border-radius: 2px
}

body .note--message:before,
body .quote--message:before,
body .support--message:before,
body .warning--message:before {
    font-family: LineIcons;
    position: absolute;
    top: 0;
    background: #fff;
    margin-top: -25px;
    border-radius: 100%;
    left: 15px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 23px
}

[dir=rtl] body .note--message:before,
[dir=rtl] body .quote--message:before,
[dir=rtl] body .support--message:before,
[dir=rtl] body .warning--message:before {
    left: inherit;
    right: 15px
}

body .note--message:before {
    content: "\eb5b"
}

body .warning--message:before {
    content: "\eaab"
}

body .quote--message:before {
    content: "\eb70"
}

body .support--message:before {
    content: "\ea2f"
}

body .note--message {
    background: #bce8f1;
    border: 2px solid #68cbdf
}

body .support--message {
    background: #f4a4c9;
    border: 2px solid #b61661
}

body .note--message:before {
    border: 2px solid #68cbdf
}

body .support--message:before {
    border: 2px solid #b61661
}

body .warning--message {
    background: #e5415e;
    border: 2px solid #e5415e;
    color: #fff
}

body .warning--message:before {
    border: 2px solid #e5415e;
    color: #000
}

body .quote--message {
    background: #d5ccc9
}

body .quote--message,
body .quote--message:before {
    border: 2px solid #a89690
}

body .check--list {
    margin-left: 30px
}

body .check--list li,
body .number--list li {
    position: relative;
    list-style-type: none
}

body .number--list li {
    padding-left: 35px
}

body .check--list li:before {
    content: "\ead2";
    font-family: LineIcons;
    position: absolute;
    top: 0;
    left: -30px;
    font-size: 22px;
    color: rgba(227, 28, 121, 1);
    margin-top: -4px
}

[dir=rtl] body .check--list li:before {
    left: inherit;
    right: -30px
}

body .number--list {
    list-style-type: none;
    padding: 0;
    counter-reset: li-counter
}

body .number--list>li:before {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #fff;
    content: counter(li-counter);
    counter-increment: li-counter;
    background-color: rgba(227, 28, 121, 1);
    border-radius: 100%;
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    margin-top: -1px
}

[dir=rtl] body .number--list>li:before {
    left: inherit;
    right: -35px
}

body .accordion_title {
    background: #fff;
    border: 2px solid #ddd;
    color: #333333;
    cursor: pointer;
    padding: 15px 45px 15px 15px;
    margin-bottom: 5px;
    position: relative;
    border-radius: 2px
}

[dir=rtl] body .accordion_title {
    padding: 15px 15px 15px 45px
}

body .accordion_content {
    display: none;
    padding: 20px 10px 40px 30px
}

body .accordion_title:after {
    content: "\2b";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    right: 15px;
    font-size: 16px;
    margin-top: -12px;
    transition: all .2s ease-in
}

[dir=rtl] body .accordion_title:after {
    right: inherit;
    left: 15px;
    transform: rotate(180deg)
}

body .article-body .accordion_title._active:after,
body .article-body .accordion_title.open:after {
    transform: rotate(45deg)
}

body .accordion_title.open {
    background: rgba(227, 28, 121, 1);
    border: 2px solid rgba(227, 28, 121, 1);
    color: #fff
}

.tabs {
    width: 100%;
    background-color: rgba(227, 28, 121, 1);
    border-radius: 5px
}

ul#tabs-nav {
    list-style: none;
    margin: 0;
    padding: 5px;
    overflow: auto
}

ul#tabs-nav>li {
    float: left;
    font-weight: 600;
    margin-right: 2px;
    margin-bottom: 0;
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer
}

[dir=rtl] ul#tabs-nav>li {
    float: right
}

ul#tabs-nav>li.active,
ul#tabs-nav>li:hover {
    background-color: #881149
}

#tabs-nav>li>a {
    text-decoration: none;
    color: #fff
}

#tabs-content {
    background: #fff
}

.tab-content {
    padding: 10px;
    border: 2px solid rgba(227, 28, 121, 1);
    background-color: #fff
}

.article-list-item,
.section-lists-item {
    transition: background-color .4s ease-in-out
}

.article-list-item:hover,
.section-lists-item:hover {
    background-color: #fff;
    cursor: pointer;
    border-color: rgba(227, 28, 121, 1)
}

.article-list-item:hover a,
.section-lists-item:hover a {
    text-decoration: none
}

.see-all-articles:hover {
    background-color: #fff;
    font-weight: 750;
    text-decoration: underline;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
    border: 1px solid #71aae1;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5)
}

.section-tree-title {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px
}

.article-list,
.section-lists {
    margin-top: 0
}

.section-content .article-list,
.section-content .section-lists {
    display: flex;
    flex-direction: column;
    min-width: 500px;
    max-width: -moz-max-content;
    max-width: max-content
}

.section-tree-title a:hover {
    text-decoration: underline
}

.see-all-articles {
    position: relative;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
    transition: padding-left .3s ease, color .3s ease, background-color .3s ease;
    color: #fff;
    text-decoration: none;
    text-align: center
}

.see-all-articles:before {
    content: "\203A";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    transition: left .3s ease, opacity .3s ease;
    color: inherit;
    font-size: 1.2em;
    font-weight: 700
}

.see-all-articles:hover:before {
    left: 5px;
    opacity: 1
}

.section-content .webinar-collection-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0;
    margin: 0 -10px;
    list-style: none
}

.webinar-collection-list .article-list-item {
    width: calc(50% - 20px);
    margin: 10px;
    box-sizing: border-box;
    padding-left: 35px
}

.webinar-collection-list .article-list-item a {
    display: block
}

@media (max-width:768px) {
    .webinar-collection-list .article-list-item {
        width: calc(100% - 20px);
        margin: 10px
    }

    .webinar-collection-list {
        margin: 0 -10px
    }
}

.webinar-collection-list .article-list-item:before {
    content: "\f03d";
    color: #000;
    margin-right: 8px;
    vertical-align: middle
}

.webinar-category-content .article-list-item:before {
    content: "\f51c";
    font-family: FontAwesome;
    color: #000;
    vertical-align: middle
}

.webinar-thumbnail-link {
    display: block;
    width: 100%;
    height: 180px;
    background-color: #f8f8f8;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative
}

.webinar-thumbnail-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    text-align: center
}

.webinar-brand-logo {
    max-width: 80%;
    max-height: 60px;
    height: auto;
    margin-bottom: 10px
}

.webinar-brand-name {
    font-size: 1.2em;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px
}

.webinar-thumbnail-title {
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.webinar-thumbnail-link:hover {
    background-color: #eee
}

.webinar-thumbnail-link:hover .webinar-thumbnail-title {
    text-decoration: underline
}

.webinar-button {
    display: inline-block;
    margin-top: auto;
    padding: 10px 20px;
    background-color: rgba(227, 28, 121, 1);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    transition: background-color .3s ease;
    border: none;
    cursor: pointer;
    font-size: 1em
}

.webinar-button:hover {
    background-color: #eb60a1;
    color: #fff;
    text-decoration: none
}

.webinar-card {
    padding: 5px
}

.webinar-card .webinar-card-content:before {
    content: none;
    width: 400px
}

.webinar-thumbnail-title {
    font-size: 1em
}

@media (min-width:600px) {
    .webinar-thumbnail-title {
        font-size: 1.1em
    }
}

@media (min-width:992px) {
    .webinar-thumbnail-title {
        font-size: 1.3em
    }
}

.webinar-card-content {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    height: 100%;
    background-color: #fff;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 450px;
    transition: box-shadow .3s ease, transform .3s ease
}

.webinar-card-content:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
    transform: translateY(-5px)
}

.webinar-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.other-webinar,
.other-webinars-links {
    display: flex
}

.other-webinars-links li {
    min-width: 300px;
    padding: 15px;
    font-size: 1.5em;
    font-weight: 600
}

.webinars-header-links {
    display: flex;
    margin-bottom: -10px;
    justify-content: center
}

.webinars-header-links li {
    margin-left: 15px
}

.webinars-header-links a {
    color: #000;
    text-decoration: none
}

.webinars-header-links {
    text-align: right;
    margin-bottom: -15px;
    width: 100%;
    box-sizing: border-box
}

.webinars-header-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block
}

.webinars-header-links li {
    display: inline-block;
    margin-left: 10px
}

.webinars-header-links li:first-child {
    margin-left: 0
}

.webinar-button-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid #ccc;
    background-color: #f9d2e4;
    color: #333;
    text-decoration: none;
    border-radius: 7px;
    transition: all .3s ease;
    font-size: 20px
}

.webinar-button-link i {
    margin-right: 8px
}

.webinar-button-link:hover {
    background-color: #f18ebc;
    border-color: #bbb;
    color: #fff;
    transform: translateX(3px)
}

.webinar-button-link:active {
    background-color: #d9d9d9;
    border-color: #aaa;
    transform: translateX(1px)
}

.header-title-and-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
    width: 75%;
    text-align: justify
}

.header-title-and-menu h1 {
    margin: 0
}

/* ==========================================================================
   WEBINAR
   ========================================================================== */

.webinars-collapsible-menu {
    position: relative;
    display: inline-block
}

.collapsible-menu-toggle {
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    border: 1px solid var(--brand-color-10);
    background-color: var(--bg-color);
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: 600;
    transition: all .5s ease-in-out
}

.collapsible-menu-toggle:hover,
.collapsible-menu-toggle[aria-expanded=true] {
    border-bottom: 2px solid var(--brand-color)
}

.collapsible-menu-toggle-icon {
    margin-left: 8px;
    transition: transform .5s ease-in-out;
    color: rgba(227, 28, 121, 1)
}

.collapsible-menu-toggle[aria-expanded=true] .collapsible-menu-toggle-icon {
    transform: rotate(180deg)
}

.webinars-menu-list {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: rgba(247, 237, 247, 1);
    border: 1px solid #ccc;
    list-style: none;
    padding: 10px 0;
    margin: 5px 0 0;
    min-width: 100%;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    font-size: 1.4em;
    max-height: 500px;
    overflow: hidden;
    transition: max-height .7s ease-in-out, opacity .7s ease;
    opacity: 1
}

.webinars-menu-list.is-hidden {
    max-height: 0;
    opacity: 0;
    pointer-events: none
}

.webinars-menu-list li {
    padding: 0;
    margin: 0
}

.webinar-menu-link {
    display: block;
    padding: 5px 27px;
    color: rgba(20, 20, 20, 1);
    text-decoration: none;
    font-size: 1em;
    margin-bottom: 2px;
    transition: all .5s ease-in-out
}

.webinar-menu-link:hover {
    background-color: #fff
}

.webinar-filters {
    margin-bottom: 30px;
    text-align: left
}

.webinar-filter-btn {
    background-color: #fff;
    color: rgba(227, 28, 121, 1);
    border: 1px solid rgba(227, 28, 121, 1);
    padding: 10px 20px;
    margin: 0 5px;
    min-width: 140px;
    cursor: pointer;
    border-radius: 25px;
    font-size: 1.2em;
    font-weight: 600;
    transition: background-color .7s ease, color .7s ease, box-shadow .7s ease, border .7s ease;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.webinar-filter-btn.active,
.webinar-filter-btn:hover {
    background-color: rgba(227, 28, 121, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    color: #fff
}

.webinar-section-item {
    display: flex;
    transition: opacity .5s ease, max-height .5s ease, visibility .5s ease, margin .5s ease, padding .5s ease;
    opacity: 1;
    max-height: 1280px;
    visibility: visible;
    overflow: visible;
    flex: 0 0 calc(25% - 15px);
    box-sizing: border-box;
    margin: 0;
    max-width: calc(25% - 15px);
    flex-direction: column
}

@media (min-width:768px) {
    .section-tree .webinar-section-item {
        flex: 0 0 24%
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .webinar-section-item {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px)
    }
}

@media (max-width:767px) {
    .webinar-section-item {
        flex: 0 0 100%;
        max-width: 100%
    }
}

.webinar-section-item.hidden-by-filter {
    opacity: 0;
    max-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    visibility: hidden
}

.section-tree.webinar-category-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    margin: 0;
    padding: 0
}

.new-article-banner {
    font-size: .75em;
    vertical-align: middle;
    background-color: rgba(227, 28, 121, 1);
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 700;
    display: inline-block
}

.section-content__wrapper {
    display: flex;
    justify-content: flex-start
}

.popup {
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.popup.show {
    opacity: 1;
    visibility: visible
}

.article-list-item {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.hover\:border-\[\var(--brand-color)\]:hover {
    --tw-border-opacity: 1;
    border-color: var(--brand-color)
}

.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.hover\:text-\[\var(--brand-color)\]:hover {
    --tw-text-opacity: 1;
    color: var(--brand-color)
}

/*
 * Custom styles for webinar categories using a dynamic CSS variable
 * This block replaces the previous two color-specific blocks.
 */

.webinar-category-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
}

/*[data-webinar-category] {
    background-color: #f4f4f4; /* Set a light background for the container 
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    flex: 1 1 calc(50% - 10px);
}*/

[data-webinar-category] h3.section-tree-title-webinar {
    margin-bottom: 10px;
}

[data-webinar-category] h3.section-tree-title-webinar {
    background-color: var(--webinar-bg-color, #94a3b8); /* Apply color to the title link */
    color: #ffffff; /* Make the text white for contrast */
    font-weight: 700;
    padding: 10px 15px; /* Add padding to make it a block */
    border-radius: 8px; /* Add rounded corners */
    display: block; /* Make the link a block to fill the space */
    transition: all 0.3s ease;
}

[data-webinar-category] .article-list {
    padding: 0;
    margin: 0;
}

[data-webinar-category] .article-list-item {
    background-color: var(--webinar-bg-color, #94a3b8); /* Apply color to the list item */
    border-radius: 8px;
    margin-bottom: 10px; /* Space between list items */
    /* padding: 10px 15px; /* Add padding */
   /* color: #ffffff; /* Make the text white for contrast */
}

[data-webinar-category] .article-list-item a {
    color: #ffffff; /* Make the article link text white */
}

[data-webinar-category] .article-list-item svg path {
    fill: #ffffff;
}

[data-webinar-category] .see-all-articles a {
    color: var(--webinar-bg-color, #94a3b8); /* Set "See all" link color to the category color */
    font-weight: bold;
    margin-top: 10px;
    display: block;
}

/* BEGIN: feature-highlight-block */
.highlight-block {
  border-left: 4px solid var(--brand-color);
  background-color: var(--brand-color-10);
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 4px;
  width: 100%;
  text-align: left;
}
/* END: feature-highlight-block */

/* BEGIN: feature-brand-button */
.btn-brand {
  display: inline-flex;
  align-items: center;
  background-color: var(--brand-color);
  color: #ffffff;
  font-weight: 600;
  border: 1px solid var(--brand-color);
  border-radius: 8px;
  padding: 5px 24px;
  min-height: 36px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.btn-brand:hover {
  background-color: #ffffff;
  color: var(--brand-color);
  border-color: var(--brand-color);
}

.btn-brand-outline {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  color: var(--brand-color);
  font-weight: 600;
  border: 1px solid var(--brand-color);
  border-radius: 8px;
  padding: 5px 24px;
  min-height: 36px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-brand-outline:hover {
  background-color: var(--brand-color);
  color: #ffffff;
}

.btn-brand-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-color);
  color: #ffffff;
  font-weight: 600;
  border: 1px solid var(--brand-color);
  border-radius: 50%;
  padding: 8px;
  min-height: 42px;
  min-width: 42px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.btn-brand-round:hover {
  background-color: #ffffff;
  color: var(--brand-color);
  border-color: var(--brand-color);
}

.btn-brand-popup {
  display: inline-block;
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 8px 16px;
}
/* END: feature-brand-button */

/* BEGIN: feature-quick-links */
/* ==========================================
   Quick Links Sidebar Styles
   ========================================== */


/* ========================================================================== 
     TOGGLE BUTTONS (Quick Links & Bookmarks)
     ========================================================================== */

.toggle-btn {
    width: 50px;
    height: 46px;
    border-radius: 12px 0 0 12px;
    background-color: var(--brand-color);
    color: #ffffff;
    border: none;
    box-shadow: -4px 0 12px var(--brand-color-30);
    cursor: pointer;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    padding: 0;
}

/* Unique positioning for each toggle */
.quick-links-toggle {
    position: fixed;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
}

.bookmarks-toggle {
    position: fixed;
    right: -8px;
    top: calc(50% - 60px);
    transform: translateY(-50%);
}

.quick-links-toggle:hover {
  background-color: var(--brand-color-dark);
  transform: translateY(-50%) translateX(-5px);
  box-shadow: -2px 0 8px var(--brand-color-40);
}

.quick-links-toggle:active {
  transform: translateY(-50%) translateX(-8px);
}

.quick-links-toggle:focus {
  outline: 2px solid var(--brand-color-50);
  outline-offset: 2px;
}

/* Dynamic positioning based on header state - disabled for centered button */
.quick-links-toggle.header-fixed {
  /* Centered position maintained */
}

.quick-links-toggle.header-fixed.with-alert {
  /* Centered position maintained */
}

/* Sidebar Overlay */
.quick-links-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.quick-links-sidebar.active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* Backdrop */
.quick-links-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quick-links-sidebar.active .quick-links-backdrop {
  opacity: 1;
}

/* Sidebar Panel */
.quick-links-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.quick-links-sidebar.active .quick-links-panel {
  transform: translateX(0);
}

/* Panel Header */
.quick-links-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #DDDDDD;
  background-color: #ffffff;
}

.quick-links-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333333;
}

.quick-links-header h3 i {
  color: var(--brand-color);
  margin-right: 8px;
}

.quick-links-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #666666;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.quick-links-close:hover {
  color: var(--brand-color);
}

/* Links List */
.quick-links-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

/* Individual Link Item */
.quick-link-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 24px;
  text-decoration: none;
  color: #333333;
  transition: background-color 0.2s ease;
  border-left: 3px solid transparent;
}

.quick-link-item:hover {
  background-color: #f9f9f9;
  border-left-color: var(--brand-color);
}

.quick-link-item:focus {
  outline: 2px solid var(--brand-color-50);
  outline-offset: -2px;
}

/* Special styling for Exxat Certification link */
.quick-link-item.quick-link-special {
  background-color: var(--brand-color-10);
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
}

.quick-link-item.quick-link-special:hover {
  background-color: var(--brand-color-15);
}

/* Link Icon */
.quick-link-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-color-10);
  border-radius: 8px;
  margin-right: 16px;
  font-size: 18px;
  color: var(--brand-color);
}

.quick-link-item:hover .quick-link-icon {
  background-color: var(--brand-color-15);
}

/* Link Content */
.quick-link-content {
  flex: 1;
  min-width: 0;
}

.quick-link-title {
  font-size: 15px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 4px;
  line-height: 1.4;
}

.quick-link-description {
  font-size: 13px;
  color: #666666;
  line-height: 1.4;
}

/* Popularity Badge */
.popularity-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
  background-color: var(--brand-color);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .quick-links-panel {
        width: 300px;
    }
    .quick-links-header {
        padding: 16px 20px;
    }
    .quick-links-header h3 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .toggle-btn {
        width: 50px;
        height: 45px;
    }
    .toggle-btn svg {
        width: 18px;
        height: 18px;
    }
}
  .quick-link-item {
    padding: 14px 20px;
  }

  .quick-link-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .quick-link-title {
    font-size: 14px;
  }

  .quick-link-description {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .quick-links-panel {
    width: 100%;
    max-width: 320px;
  }
}

/* END: feature-quick-links */

/* BEGIN: feature-bookmarks */
/* ========================================
   Article Bookmarks Modal Styles
   ======================================== */

/* Bookmarks Toggle Button (Above Quick Links) */
/* (All shared styles moved to .toggle-btn) */

.bookmarks-toggle:hover {
  background-color: var(--brand-color-dark);
  transform: translateY(-50%) translateX(-5px);
  box-shadow: -2px 0 8px var(--brand-color-40);
}

.bookmarks-toggle:active {
  transform: translateY(-50%) translateX(-8px);
}

.bookmarks-toggle:focus {
  outline: 2px solid var(--brand-color-50);
  outline-offset: 2px;
}

/* Modal Backdrop */
.bookmarks-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bookmarks-modal-backdrop.active {
  opacity: 1;
}

/* Modal Container */
.bookmarks-modal {
  position: fixed;
  top: 0;
  right: 0;
  width: 450px;
  height: 100vh;
  max-height: 100vh;
  background-color: #ffffff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  z-index: 1002;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bookmarks-modal.active {
  transform: translateX(0);
}

/* Modal Header */
.bookmarks-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #DDDDDD;
  background-color: #f8f8f8;
  flex-shrink: 0;
}

.bookmarks-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bookmarks-title-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.bookmarks-close-icon {
  width: 20px;
  height: 20px;
}

.bookmarks-close-btn {
  background: none;
  border: none;
  color: #666666;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  border-radius: 4px;
}

.bookmarks-close-btn:hover {
  color: var(--brand-color);
  background-color: var(--brand-color-10);
}

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

.bookmarks-help-btn {
  background: none;
  border: none;
  color: #666666;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  border-radius: 4px;
  text-decoration: none;
}

.bookmarks-help-btn:hover {
  color: var(--brand-color);
  background-color: var(--brand-color-10);
}

.bookmarks-help-icon {
  width: 20px;
  height: 20px;
}

/* Filters Toggle Button */
.bookmarks-filters-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 24px;
  background-color: #f9f9f9;
  border: none;
  border-bottom: 1px solid #EEEEEE;
  color: #333333;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  gap: 8px;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.bookmarks-filters-toggle:hover {
  background-color: #f0f0f0;
}

.bookmarks-filters-toggle svg:first-child {
  width: 16px;
  height: 16px;
}

.bookmarks-filters-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.bookmarks-filters-toggle.active .bookmarks-filters-chevron {
  transform: rotate(180deg);
}

@media (max-width: 768px), (max-height: 768px) {
  .bookmarks-filters-toggle {
    display: flex;
  }
  
  .bookmarks-controls {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, border 0.3s ease;
    padding: 0;
    border-bottom: none;
    position: static;
  }
  
  .bookmarks-controls.expanded {
    max-height: 500px;
    padding: 16px 24px;
    border-bottom: 1px solid #EEEEEE;
    position: sticky;
  }
  
  .bookmarks-count-indicator {
    display: none;
  }
  
  .bookmarks-list-container {
    max-height: calc(100vh - 125px) !important;
  }
  
}

/* Controls Section - Sticky */
.bookmarks-controls {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  backdrop-filter: blur(8px);
  padding: 8px 24px;
  border-bottom: 1px solid #EEEEEE;
  flex-shrink: 0;
}

/* Search Container */
.bookmarks-search-container {
  position: relative;
  margin-bottom: 12px;
  margin-top: 5px;
}
.bookmarks-search-input {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid #DDDDDD;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.bookmarks-search-input:focus {
  outline: none;
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px var(--brand-color-10);
}

.bookmarks-clear-search {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.bookmarks-clear-search:hover {
  color: #666666;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Sort Select */
.bookmarks-sort-select {
  width: 100%;
  padding: 10px 30px 10px 12px;
  border: 1px solid #DDDDDD;
  border-radius: 6px;
  font-size: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right 10px center #ffffff;
  background-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
  margin-bottom: 12px;
}

.bookmarks-sort-select:focus {
  outline: none;
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px var(--brand-color-10);
}

/* Type Filter Buttons */
.bookmarks-type-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.bookmark-type-btn {
  flex: 1;
  padding: 6px 12px;
  background-color: #ffffff;
  color: #666666;
  border: 1px solid #DDDDDD;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bookmark-type-btn:hover {
  border-color: var(--brand-color);
  color: var(--brand-color);
}

.bookmark-type-btn.active {
  background-color: var(--brand-color);
  color: #ffffff;
  border-color: var(--brand-color);
}

/* Action Buttons */
.bookmarks-action-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 5px;
}

.bookmarks-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  background-color: var(--brand-color);
  color: #ffffff;
  border: 1px solid var(--brand-color);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bookmarks-action-btn svg {
  width: 14px;
  height: 14px;
}

.bookmarks-action-btn:hover {
  background-color: #ffffff;
  color: var(--brand-color);
}

.bookmarks-action-btn:active {
  transform: scale(0.98);
}

/* Count Indicator */
.bookmarks-count-indicator {
  padding: 8px 24px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #EEEEEE;
  font-size: 13px;
  color: #666666;
  font-weight: 500;
  flex-shrink: 0;
}

/* List Container */
.bookmarks-list-container {
  flex: 1;
  overflow-y: scroll !important;
  overflow-x: hidden;
  position: relative;
  min-height: 0;
  max-height: calc(100vh - 250px);
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

.bookmarks-list-container::-webkit-scrollbar {
  width: 8px;
}

.bookmarks-list-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.bookmarks-list-container::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 4px;
}

.bookmarks-list-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

.bookmarks-list-container::-webkit-scrollbar {
  width: 8px;
}

.bookmarks-list-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.bookmarks-list-container::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 4px;
}

.bookmarks-list-container::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* Bookmarks List */
.bookmarks-list {
  padding: 8px 0;
  min-height: 100%;
}

/* Bookmark Item */
.bookmark-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 24px;
  border-bottom: 1px solid #F5F5F5;
  transition: background-color 0.2s ease;
  gap: 12px;
  background-color: #ffffff;
}

.bookmark-item:nth-child(even) {
  background-color: #fafafa;
}

.bookmark-item:hover {
  background-color: #f0f0f0;
}

.bookmark-item-content {
  flex: 1;
  min-width: 0;
}

.bookmark-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.bookmark-type-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #666666;
}

.bookmark-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  color: #333333;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.bookmark-item-title:hover {
  color: var(--brand-color);
}

.bookmark-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.bookmark-item-category {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
  background-color: var(--brand-color);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-item-date {
  font-size: 12px;
  color: #999999;
}

.bookmark-item-url {
  font-size: 12px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-item-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.bookmark-item-remove:hover {
  color: #dc2626;
  background-color: rgba(220, 38, 38, 0.1);
}

.bookmark-remove-icon {
  width: 18px;
  height: 18px;
}

/* Empty State */
.bookmarks-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  color: #999999;
}

.bookmarks-empty-icon {
  width: 48px;
  height: 48px;
  opacity: 0.3;
  margin-bottom: 16px;
}

.bookmarks-empty-state svg {
  opacity: 0.3;
  margin-bottom: 16px;
}

.bookmarks-empty-text {
  font-size: 16px;
  font-weight: 600;
  color: #666666;
  margin: 0 0 8px 0;
}

.bookmarks-empty-subtext {
  font-size: 14px;
  color: #999999;
  margin: 0;
}

.bookmarks-empty-cta {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #eeeeee;
  width: 100%;
  max-width: 300px;
}

.bookmarks-empty-suggestion {
  font-size: 13px;
  color: #666666;
  margin: 0 0 12px 0;
  font-weight: 500;
}

.bookmarks-empty-link {
  display: inline-block;
  color: var(--brand-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border: 2px solid var(--brand-color);
  border-radius: 6px;
  transition: all 0.2s ease;
  margin-bottom: 16px;
}

.bookmarks-empty-link:hover {
  background-color: var(--brand-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--brand-color-20);
}

.bookmarks-empty-instruction {
  font-size: 13px;
  color: #888888;
  margin: 16px 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.bookmark-inline-icon {
  width: 16px;
  height: 16px;
  color: var(--brand-color);
  flex-shrink: 0;
}

.bookmarks-empty-help-link {
  display: inline-block;
  color: #0066cc;
  text-decoration: none;
  font-size: 13px;
  margin-top: 8px;
  transition: color 0.2s ease;
}

.bookmarks-empty-help-link:hover {
  color: #004499;
  text-decoration: underline;
}

/* Responsive Design */

/* (SVG sizing for both toggles now handled by .toggle-btn svg above) */
  

  .bookmarks-modal-header,
  .bookmarks-controls,
  .bookmarks-count-indicator {
    padding-left: 20px;
    padding-right: 20px;
  }

  .bookmark-item {
    padding-left: 20px;
    padding-right: 20px;
  }
  
    /* All .bookmarks-toggle sizing now handled by .toggle-btn and .toggle-btn svg above */
    .bookmarks-modal {
        width: 100%;
        max-width: 450px;
    }

    .bookmarks-modal-title {
        font-size: 18px;
    }

    .bookmarks-action-buttons {
        flex-direction: column;
    }

    .bookmark-item-title {
        font-size: 14px;
    }

    .bookmark-item-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

/* END: feature-bookmarks */

/* ==========================================================================
   SEARCH RESULTS
   ========================================================================== */

/* ---- Override old "selected filter" background highlight ---- */
.search-results-sidebar .sidenav-item.current {
  background-color: transparent;
  color: inherit;
}

/* ---- Override float-right on vote/comment icons ---- */
[dir=ltr] .search-result-icons {
  float: none;
}

/* ---- Result count label (above Filter by) ---- */
.search-results-count-label {
  font-size: 14px;
  color: #555;
  margin: 0 0 16px 0;
  line-height: 1.4;
  min-height: 1.4em;
}

/* ---- Filter header: "Filter by" title + Reset link ---- */
.search-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8e8e8;
}

.search-filters-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.search-filters-reset {
  font-size: 14px;
  color: #777;
  text-decoration: underline;
}

.search-filters-reset:hover {
  color: rgba(227, 28, 121, 1);
}

/* ---- Filter sections (always visible, separated by lines) ---- */
.filters-in-section {
  padding: 14px 0;
  border-bottom: 1px solid #e8e8e8;
}

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

/* ---- Section titles (Types, Categories, Topics) ---- */
.sidenav-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin: 0 0 10px 0;
  padding: 0;
}

/* ---- Filter list reset ---- */
.search-results-sidebar .multibrand-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Sidebar filter items: flex row with checkbox + label ---- */
.search-results-sidebar .sidenav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  background-color: transparent;
  color: #333;
  font-size: 14px;
  text-decoration: none;
}

/* ---- Hover: ONLY the checkbox fills — text and count stay unchanged ---- */
.search-results-sidebar .sidenav-item:hover {
  background-color: transparent !important;
  color: inherit !important;
  text-decoration: none;
}

.search-results-sidebar .sidenav-item:hover .filter-checkbox {
  background-color: rgba(227, 28, 121, 1);
  border-color: rgba(227, 28, 121, 1);
}

.search-results-sidebar .sidenav-item:hover .filter-checkbox::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.search-results-sidebar .sidenav-item:hover .filter-name,
.search-results-sidebar .sidenav-item:hover .doc-count {
  color: inherit !important;
}

/* ---- Visual-only checkbox ---- */
.filter-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #aaa;
  border-radius: 3px;
  background-color: #fff;
  transition: border-color 0.15s, background-color 0.15s;
}

.sidenav-item.current .filter-checkbox {
  background-color: rgba(227, 28, 121, 1);
  border-color: rgba(227, 28, 121, 1);
}

.sidenav-item.current .filter-checkbox::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* ---- Doc count badge ---- */
.search-results-sidebar .doc-count {
  margin-left: auto;
  font-size: 12px;
  color: #888;
}

/* ---- Sort bar ---- */
.search-sort-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 16px;
}

.search-sort-dropdown {
  position: relative;
  display: inline-block;
}

.search-sort-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 170px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 400;
  color: #444;
  background: #fff;
  border: 1.5px solid #c8c8c8;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.4;
}

.search-sort-toggle:hover {
  border-color: #999;
  color: #222;
}

.search-sort-toggle[aria-expanded="true"] {
  border-color: rgba(227, 28, 121, 1);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}

.search-sort-toggle[aria-expanded="true"] .search-sort-chevron {
  transform: rotate(180deg);
}

.search-sort-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
  color: #777;
}

.search-sort-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  min-width: 100%;
  background: #fff;
  border: 1.5px solid #c8c8c8;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  padding: 6px 0;
  list-style: none;
  margin: 0;
  overflow: hidden;
}

.search-sort-menu.open {
  display: block;
}

.search-sort-option {
  padding: 9px 16px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.1s;
  white-space: nowrap;
}

.search-sort-option:hover {
  background-color: #f5f5f5;
  color: rgba(227, 28, 121, 1);
}

.search-sort-option[aria-selected="true"] {
  font-weight: 600;
  color: rgba(227, 28, 121, 1);
  background-color: #fafafa;
}

/* ---- Result card: category pills ---- */
.search-result-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.category-pill {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #555;
  background-color: #f2f2f2;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.category-pill:hover {
  background-color: #e8f0fe;
  color: rgba(227, 28, 121, 1);
  border-color: rgba(227, 28, 121, 1);
}

/* ---- Result title: full-width block ---- */
.search-result-title {
  display: block;
  margin-bottom: 6px;
}

/* ---- Result card footer: meta + stats ---- */
.search-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: #777;
  gap: 8px;
}

.search-result-footer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.search-result-separator {
  color: #bbb;
}

.search-result-footer-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.search-result-votes,
.search-result-meta-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #555;
}

.search-result-stat-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  color: currentColor;
}

/* ---- Quick Answer / Generative Answers ---- */
.generative-answers {
  background: #f0f7ff;
  border: 1px solid #c5dafc;
  border-left: 4px solid rgba(227, 28, 121, 1);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.generative-answers .generative-answers-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(227, 28, 121, 1);
  margin-bottom: 10px;
}

.generative-answers .generative-answers-body {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* ---- Zendesk-style stat blocks (votes / comments) ---- */
.search-result-stat-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  text-align: center;
  color: #666;
}

.search-result-stat-number {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.1;
}

.search-result-stat-label {
  font-size: 14px;
  color: #888;
  line-height: 1.3;
  margin-top: 1px;
}

/* ---- Search results page header (breadcrumbs block + centered search) ---- */
.search-results-header {
  background-color: rgba(255, 255, 255, 1);
  padding: 18px 0 28px;
  margin-bottom: 30px;
}

.search-results-breadcrumb-nav {
  margin-bottom: 14px;
}

.search-results-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results-home-link {
  font-size: 13px;
  color: #666;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.search-results-home-link:hover {
  color: rgba(227, 28, 121, 1);
}

.search-results-search-wrap {
  max-width: 700px;
  margin: 25px auto 0 auto;
  
}

.search-results-search-inner {
  position: relative;
}

.search-results-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: #aaa;
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.search-results-header .search input[type=search] {
  width: 100%;
  height: 52px;
  padding-left: 46px;
  padding-right: 20px;
  font-size: 15px;
  border: 1px solid #ddd;
  border-radius: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background-color: #fff;
  color: #333;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-results-header .search input[type=search]:focus {
  border-color: rgba(227, 28, 121, 1);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* END: search-results-redesign */

/* ==========================================================================
   REQUEST PAGE
   ========================================================================== */

/* 1. Title: larger, full-width, prominent */
.request-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    width: 100%;
    /* border-bottom: 1px solid #DDDDDD; */
    padding-bottom: 24px;
    margin-bottom: 0
}

@media (min-width:1024px) {
    .request-title {
        max-width: 100%;
        padding-bottom: 28px
    }
}

/* 2. Layout: better column proportions */
@media (min-width:1024px) {
    .request-main {
        flex: 0 0 62%
    }

    .request-sidebar {
        width: 34%;
        background-color: rgba(247, 237, 247, 1);
        border: 1px solid #DDDDDD;
        border-radius: 6px;
        padding: 24px;
        box-sizing: border-box
    }
}

/* 3. Show "Request details" heading on desktop */
@media (min-width:1024px) {
    .request-sidebar h2 {
        display: block;
        font-size: 16px;
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid #DDDDDD
    }
}

/* 4. Request details: stacked (block) layout */
.request-details {
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 8px;
    font-size: unset
}

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

.request-details dt,
.request-details dd {
    display: block;
    width: 100%;
    font-size: 13px;
    margin: 0
}

.request-details dt {
    font-weight: 700;
    color: #333333;
    margin-top: 14px;
    margin-bottom: 2px
}

.request-details dd {
    padding: 0;
    color: #333333
}

.request-details dd:after {
    content: none
}

/* 5. Status badges */
.status-label {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 3px;
    text-transform: capitalize;
    letter-spacing: .2px
}

.status-label-solved {
    background-color: #2f3941;
    color: #fff
}

.status-label-new {
    background-color: #ffb648;
    color: #703b15
}

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

.status-label-pending {
    background-color: #1f73b7;
    color: #fff
}

.status-label-closed {
    background-color: #68737d;
    color: #fff
}

/* 6. Comment thread: cleaner spacing */
.comment {
    padding: 28px 0
}

.comment-author {
    margin-bottom: 14px
}

.comment-meta a {
    font-weight: 600;
    color: #333333
}

.comment-body {
    line-height: 1.7
}

/* 7. Breadcrumbs spacing */
.request-breadcrumbs {
    margin-bottom: 16px
}

/* 8. Follow-up callout */
.request-follow-up {
    padding-top: 24px;
    border-top: 1px solid #DDDDDD;
    margin-top: 8px
}

/* 9. Comment form */
.comment-show-container {
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px
}

.comment-form {
    padding-top: 32px
}

/* ==========================================================================
   FORMS & BUTTONS
   ========================================================================== */

.article-subscribe button,
.button,
.community-follow button,
.community-follow-post button .requests-table-toolbar .organization-subscribe button,
.edit-profile-button a,
.hc__btn,
.pagination-first-link,
.pagination-last-link,
.pagination-next-link,
.pagination-prev-link,
.section-subscribe button,
.split-button button,
.subscriptions-subscribe button {
    background-color: rgba(227, 28, 121, 1);
    border: 1px solid rgba(227, 28, 121, 1);
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 2.34;
    margin: 0;
    padding: 0 20px;
    text-align: center;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: 100%;
    -webkit-touch-callout: none
}

.hc__btn {
    width: auto
}

@media (min-width:768px) {

    .article-subscribe button,
    .button,
    .community-follow button,
    .community-follow-post button,
    .edit-profile-button a,
    .pagination-first-link,
    .pagination-last-link,
    .pagination-next-link,
    .pagination-prev-link,
    .requests-table-toolbar .organization-subscribe button,
    .section-subscribe button,
    .split-button button,
    .subscriptions-subscribe button {
        width: auto
    }
}

.article-subscribe button.button-primary,
.article-subscribe button:active,
.article-subscribe button:focus,
.article-subscribe button:hover,
.article-subscribe button[data-selected=true],
.button-primary.pagination-first-link,
.button-primary.pagination-last-link,
.button-primary.pagination-next-link,
.button-primary.pagination-prev-link,
.button.button-primary,
.button:active,
.button:focus,
.button:hover,
.community-follow button.button-primary,
.community-follow button:active,
.community-follow button:focus,
.community-follow button:hover,
.community-follow-post button.button-primary,
.community-follow-post button:active,
.community-follow-post button:focus,
.community-follow-post button:hover,
.edit-profile-button a.button-primary,
.edit-profile-button a:active,
.edit-profile-button a:focus,
.edit-profile-button a:hover,
.pagination-first-link:active,
.pagination-first-link:focus,
.pagination-first-link:hover,
.pagination-last-link:active,
.pagination-last-link:focus,
.pagination-last-link:hover,
.pagination-next-link:active,
.pagination-next-link:focus,
.pagination-next-link:hover,
.pagination-prev-link:active,
.pagination-prev-link:focus,
.pagination-prev-link:hover,
.requests-table-toolbar .organization-subscribe button.button-primary,
.requests-table-toolbar .organization-subscribe button:active,
.requests-table-toolbar .organization-subscribe button:focus,
.requests-table-toolbar .organization-subscribe button:hover,
.requests-table-toolbar .organization-subscribe button[data-selected=true],
.section-subscribe button.button-primary,
.section-subscribe button:active,
.section-subscribe button:focus,
.section-subscribe button:hover,
.section-subscribe button[data-selected=true],
.subscriptions-subscribe button.button-primary,
.subscriptions-subscribe button:active,
.subscriptions-subscribe button:focus,
.subscriptions-subscribe button:hover,
.subscriptions-subscribe button[data-selected=true] {
    background-color: #fff;
    color: rgba(227, 28, 121, 1);
    text-decoration: none
}

.article-subscribe button.button-primary:active,
.article-subscribe button.button-primary:focus,
.article-subscribe button.button-primary:hover,
.article-subscribe button[data-selected=true]:active,
.article-subscribe button[data-selected=true]:focus,
.article-subscribe button[data-selected=true]:hover,
.button-primary.pagination-first-link:active,
.button-primary.pagination-first-link:focus,
.button-primary.pagination-first-link:hover,
.button-primary.pagination-last-link:active,
.button-primary.pagination-last-link:focus,
.button-primary.pagination-last-link:hover,
.button-primary.pagination-next-link:active,
.button-primary.pagination-next-link:focus,
.button-primary.pagination-next-link:hover,
.button-primary.pagination-prev-link:active,
.button-primary.pagination-prev-link:focus,
.button-primary.pagination-prev-link:hover,
.button.button-primary:active,
.button.button-primary:focus,
.button.button-primary:hover,
.community-follow button.button-primary:active,
.community-follow button.button-primary:focus,
.community-follow button.button-primary:hover,
.community-follow-post button.button-primary:active,
.community-follow-post button.button-primary:focus,
.community-follow-post button.button-primary:hover,
.edit-profile-button a.button-primary:active,
.edit-profile-button a.button-primary:focus,
.edit-profile-button a.button-primary:hover,
.requests-table-toolbar .organization-subscribe button.button-primary:active,
.requests-table-toolbar .organization-subscribe button.button-primary:focus,
.requests-table-toolbar .organization-subscribe button.button-primary:hover,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:active,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:focus,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:hover,
.section-subscribe button.button-primary:active,
.section-subscribe button.button-primary:focus,
.section-subscribe button.button-primary:hover,
.section-subscribe button[data-selected=true]:active,
.section-subscribe button[data-selected=true]:focus,
.section-subscribe button[data-selected=true]:hover,
.subscriptions-subscribe button.button-primary:active,
.subscriptions-subscribe button.button-primary:focus,
.subscriptions-subscribe button.button-primary:hover,
.subscriptions-subscribe button[data-selected=true]:active,
.subscriptions-subscribe button[data-selected=true]:focus,
.subscriptions-subscribe button[data-selected=true]:hover {
    background-color: #fff;
    color: rgba(227, 28, 121, 1)
}

.article-subscribe button[data-disabled],
.button[data-disabled],
.community-follow button[data-disabled],
.community-follow-post button[data-disabled],
.edit-profile-button a[data-disabled],
.pagination-first-link[data-disabled],
.pagination-last-link[data-disabled],
.pagination-next-link[data-disabled],
.pagination-prev-link[data-disabled],
.requests-table-toolbar .organization-subscribe button[data-disabled],
.section-subscribe button[data-disabled],
.subscriptions-subscribe button[data-disabled] {
    cursor: default
}

.button-large,
input[type=submit] {
    cursor: pointer;
    background-color: rgba(227, 28, 121, 1);
    border: 0;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 2.72;
    min-width: 190px;
    padding: 0 1.9286em;
    width: 100%
}

@media (min-width:768px) {

    .button-large,
    input[type=submit] {
        width: auto
    }
}

.button-large:active,
.button-large:focus,
.button-large:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=submit]:hover {
    background-color: #fff;
    color: rgba(227, 28, 121, 1);
    border: 1px solid rgba(227, 28, 121, 1)
}

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

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

.button-secondary:active,
.button-secondary:focus,
.button-secondary:hover {
    color: #333333;
    border: 1px solid #DDDDDD;
    background-color: #f7f7f7
}

#tinymce,
.mce-content-body {
    font-family: 'Inter', sans-serif !important
}

:root {
    --models-1: #fff
}

.description {
    position: relative;
    display: block;
    z-index: 3;
    color: #fff
}

.btn {
    background: var(--ocean);
    position: relative;
    cursor: pointer;
    padding: 12px 25px;
    font-size: 16px;
    border: none;
    border-radius: 10px
}

.models-1 .description {
    font-weight: 700
}

.models-1 {
    background: var(--models-1);
    padding-top: 20px;
    text-align: center
}

.models-1 .btn {
    background: rgba(227, 28, 121, 1)
}

.models-1 .btn:after {
    content: "";
    background: var(--models-1);
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    top: 0;
    transition: .3s ease-in-out
}

.models-1 .btn:hover:after {
    height: 93%
}

.models-1 .btn:hover .description {
    animation: lmao .4s ease-in;
    animation-fill-mode: forwards
}

@keyframes lmao {
    0% {
        opacity: 0
    }

    to {
        opacity: 1;
        color: rgba(227, 28, 121, 1)
    }
}

.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: #666;
    font-size: 13px;
    text-align: left
}

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

.table tr {
    border-bottom: 1px solid #DDDDDD;
    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
    }
}

.containervideo {
    width: 100%;
    margin: 10px
}

.subcontainervideo {
    width: 30%;
    float: left;
    margin: 10px
}

.buttonvideo1 {
    background-color: #fff;
    color: #000
}

.buttonvideo1:hover {
    background-color: #04aa6d
}

.buttonvideo {
    border: none;
    color: #fff;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: .4s;
    cursor: pointer
}

.buttonvideo1 {
    background-color: var(--brand-color);
    color: #fff;
    border: 2px solid #04aa6d
}

.buttonvideo1:hover {
    background-color: #063033;
    color: #fff
}

.form {
    max-width: 900px;
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    margin-bottom: 45px;
    width: 100%
}

.form-field~.form-field {
    margin-top: 15px
}

.form-field label {
    display: block;
    font-size: 15px;
    margin-bottom: 10px;
    margin-top: 45px;
    font-weight: 600
}

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

#hc-wysiwyg,
.form-field .nesty-input {
    border: none;
    border-radius: 12px;
    background: rgba(247, 237, 247, 1);
    box-shadow: inset 0 0 0 1px rgba(227, 28, 121, 1)
}

#hc-wysiwyg [role=toolbar] {
    box-shadow: inset 0 0 0 1px rgba(227, 28, 121, 1);
    height: 45px;
    padding: 5px 10px;
    vertical-align: middle
}

#hc-wysiwyg [class^=wysiwyg-icon-] {
    vertical-align: -webkit-baseline-middle;
    font-size: 19px;
    height: 30px;
    line-height: 24px;
    margin: 0 8px;
    padding: 0 8px;
    min-width: 30px
}

#hc-wysiwyg [class^=wysiwyg-icon-]:hover,
#hc-wysiwyg [class^=wysiwyg-icon-][aria-selected=true] {
    border-color: #b860b8
}

.form-field input[type=text] {
    border: none;
    border-radius: 12px;
    background: rgba(247, 237, 247, 1);
    box-shadow: inset 0 0 0 1px rgba(227, 28, 121, 1)
}

.form-field input[type=text]:hover {
    background: #e7cae7;
    box-shadow: inset 0 0 0 1px rgba(227, 28, 121, 1)
}

.form-field input:focus,
.form-field input[type=text]:focus {
    background: #e7cae7;
    border: 5px double #f9d2e4
}

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

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

.form-field .hc-multiselect-toggle:focus,
.form-field .nesty-input:focus {
    border: 1px solid rgba(227, 28, 121, 1);
    text-decoration: none
}

.form-field .hc-multiselect-toggle:focus {
    outline: none
}

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

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

.form-field .optional {
    color: #666;
    margin-left: 4px
}

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

.form footer {
    margin-top: 0;
    padding-top: 30px;
    text-align: right
}

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

.form-page {
    display: flex;
    justify-content: flex-start;
    align-items: baseline
}

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

.form .suggestion-list .searchbox {
    background: #fff;
    border: 1px solid #f9d2e4;
    padding: 20px;
    border-radius: 3px
}

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

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

.form .suggestion-list li a:visited {
    color: #000
}
/* 
.form-page .suggestion-list {
    font-size: 15px;
    margin-top: 15px;
    margin-left: 30px;
    border-top: 1px solid #f9d2e4
}

.form-page .suggestion-list .searchbox {
    /* background: #fce8f2; */
    /* border: 1px solid #f9d2e4; */
    /* padding: 20px;
    border-radius: 3px 
} */

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

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

.form-page .suggestion-list li a {
    color: #000;
    text-decoration: underline
}

.form-page .suggestion-list li a:hover {
    color: #000;
    text-decoration: none
}

.form-page .suggestion-list li a:visited {
    color: #000
}

.form .upload-item {
    background: #fff;
    border: 1px solid #DDDDDD
}

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

.form button[type=submit] {
    min-width: 150px;
    float: right
}

.form div[role=button] {
    background-color: #fff
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
    background: #363633;
    margin-top: 30px;
    padding: 30px 0;
    color: #FFFFFF
}

.footer .social {
    margin-bottom: 20px
}

.footer .social li {
    display: inline-block;
    margin: 2px
}

.footer .social li a {
    border: 2px solid #FFFFFF;
    height: 35px;
    display: block;
    width: 35px;
    line-height: 32px;
    border-radius: 100%
}

.footer .social li i {
    font-size: .9em
}

.footer .social li a:focus,
.footer .social li a:hover {
    background: rgba(227, 28, 121, 1);
    border-color: rgba(227, 28, 121, 1)
}

.footer a {
    border-bottom: 1px dashed;
    color: #FFFFFF
}

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

.text-center {
    text-align: center
}

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

    .nav-wrapper .cd-primary-nav-trigger {
        padding-right: 0;
        margin-right: -10px
    }
}

.footer-language-selector {
    color: #666;
    display: inline-block
}

.breadcrumbs {
    margin: 0 0 15px;
    padding: 0
}

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

.breadcrumbs li {
    color: #666;
    text-decoration: none;
    display: inline;
    font-size: 13px;
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis
}

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

.breadcrumbs li a:visited {
    color: #333333;
    text-decoration: none
}

/* ==========================================================================
   UTILITIES & HELPERS
   ========================================================================== */

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

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

.full--width,
.hc_header .full--width {
    max-width: 100%
}

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

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

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

.error-page h1 {
    font-size: 5em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
    margin-top: 40px
}

.error-page h2,
h1.form-header {
    font-weight: 600;
    font-size: 3.5em
}

.error-page h3 {
    font-size: 10em;
    color: rgba(227, 28, 121, 1);
    margin: 0
}

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

.pagination-first-text,
.pagination-last-text,
.recent-activity-accessibility-label,
.visibility-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap
}



/* BEGIN: FAQ Accordion Styling Enhancements */

/* 1. Connect the open title seamlessly to the answer box */
body .accordion_title.open {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 2. Wrap the visible answer in a light brand-colored border */
body .accordion_content {
    /* Uses the light brand color variable already present in your theme */
    border: 2px solid var(--brand-color-30, #e0e0e0); 
    border-top: none; /* Removes the top border so it blends with the title */
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-bottom: 5px; /* Shifts the gap to the bottom of the open answer */
}
/* END: FAQ Accordion Styling Enhancements */

/* ==========================================================================
   FAQ PAGE SPECIFIC POLISH (UPDATED)
   ========================================================================== */

/* 1. Fix the massive blank space on the left (CSS Grid adjustment) */
@media (min-width: 1024px) {
    .is-faq-page .article-container.faq-no-toc {
        /* Removes the 20% TOC column and expands the main article area */
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
        grid-template-areas: "article right-nav";
    }
}

/* Tighten up the gap between the toolbar and the first accordion */
body.is-faq-page .article-content {
    margin-top: 10px;
}

/* 4. Modernize the Accordion look */
body.is-faq-page .accordion_block {
    margin-bottom: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.is-faq-page .accordion_block:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    border-color: #d0d0d0;
}

/* Clean up the title bar */
body.is-faq-page .accordion_title {
    border: none;
    margin-bottom: 0;
    padding: 18px 45px 18px 20px;
    font-size: 16px;
    font-weight: 600;
    background: #ffffff;
    transition: background 0.2s ease, color 0.2s ease;
}

body.is-faq-page .accordion_title:hover {
    background: #fcfcfc;
    color: var(--brand-color);
}

/* Active/Open state for the title */
body.is-faq-page .accordion_title.open {
    background: #ffffff;
    color: var(--brand-color);
    border-bottom: 1px solid #eee; 
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 5. The Answer Container */
body.is-faq-page .accordion_content {
    border: none;
    background: #fafafa;
    padding: 20px;
    margin-bottom: 0;
    font-size: 15px;
}

/* Hide the comments section on FAQ pages */
body.is-faq-page .article-comments {
    display: none;
}


/* ==========================================================================
   PRINT / DOWNLOAD FIX FOR ACCORDIONS
   ========================================================================== */
@media print {
    /* Force all answers to be visible on paper/PDF */
    body .accordion_content {
        display: block !important;
        border: none !important;
        padding-left: 0 !important;
    }
    
    /* Hide the +/- toggle icon since paper isn't interactive */
    body .accordion_title:after {
        display: none !important;
    }
    
    /* Remove borders for cleaner printing */
    body .accordion_block {
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
    }
}


/* ==========================================================================
   SIDEBAR ACTIVE & HOVER STATE POLISH (LIGHTER)
   ========================================================================== */
.article-right-sidebar .recent-articles a:hover,
.related-articles a:hover,
.left-sidebar-section .sidenav-item:hover,
.left-sidebar-section .sidenav-item.current-article {
    background-color: var(--brand-color-10) !important; 
    color: var(--brand-color) !important;
    border-radius: 4px;
}

/* Keep SVG icons brand colored on hover */
.article-right-sidebar .recent-articles a:hover svg,
.related-articles a:hover svg {
    color: var(--brand-color) !important;
    fill: var(--brand-color) !important;
}


/* ==========================================================================
   GLOBAL ARTICLE ACTION BAR (TOOLBAR) POLISH
   ========================================================================== */

/* 1. Hide the heavy separator lines around the header/buttons on ALL articles */
.article > hr.separator:nth-of-type(1),
.article > hr.separator:nth-of-type(2) {
    display: none;
}

/* 2. Remove padding/margin from the header to tighten the gap */
.article-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 3. The Outer Toolbar Container (Follow on left, others on right) */
.article > .flex-row:nth-of-type(1) {
    background: #fcfcfc;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    margin: 10px 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between !important; /* Keeps the split layout */
    flex-wrap: wrap;
    gap: 12px;
}

/* 4. The Inner Container (Groups Download, Copy, Bookmark tightly on the right) */
.article > .flex-row:nth-of-type(1) .flex-row {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end !important; /* Clumps them together */
    gap: 12px;
}

/* 5. Remove awkward margins from buttons inside the toolbar */
.article > .flex-row:nth-of-type(1) .btn-brand, 
.article > .flex-row:nth-of-type(1) .btn-brand-round,
.article > .flex-row:nth-of-type(1) input[type="button"] {
    margin: 0 !important;
}

/* ==========================================================================
   BOTTOM SECTION POLISH (VOTES & COMMENTS)
   ========================================================================== */

/* 1. Hide all remaining heavy gradient separator lines in the article */
.article hr.separator {
    display: none;
}

/* 2. Style the Voting block to match the top Action Bar */
.article-votes {
    background: #fcfcfc;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 24px 15px;
    margin: 40px 0 20px 0;
}

/* 3. Clean up the default Zendesk borders around the comments */
.comment-overview {
    border-top: none;
}
/* ==========================================================================
   VOTING BUTTONS POLISH (GREEN & RED)
   ========================================================================== */
.article-votes .article-vote {
    background-color: transparent !important;
    border-radius: 20px; 
    min-width: 90px;
    font-weight: 600;
    transition: all 0.2s ease !important;
}
/* "Yes" & "No" (Downvote) Button */
.article-votes .article-vote-down,
.article-votes .article-vote-up {
    color: var(--brand-color) !important;
    border: 2px solid var(--brand-color) !important;
}


.article-votes .article-vote-up:hover, 
.article-votes .article-vote-up[aria-selected="true"] {
    background-color: #4cae4c !important;
    color: #ffffff !important;
    border-color: #4cae4c !important;
}

.article-votes .article-vote-down:hover, 
.article-votes .article-vote-down[aria-selected="true"] {
    background-color: #d83d31 !important;
    color: #ffffff !important;
    border-color: #d83d31 !important;
}


/* ==========================================================================
   MOBILE FAB POSITIONING (TOC & SCROLL TO TOP)
   ========================================================================== */
@media (max-width: 1023px) {
    /* Reset baseline fixed positioning */
    #scroll-to-top-btn, 
    .toc-fab {
        position: fixed !important;
        bottom: 20px !important;
        z-index: 500 !important;
    }
    
    /* Force TOC Button to the Left */
    .toc-fab {
        left: 20px !important;
        right: auto !important;
    }
    
    /* Force Scroll to Top Button to the Right */
    #scroll-to-top-btn {
        right: 20px !important;
        left: auto !important;
    }
}


/* ==========================================================================
   GLOBAL ARTICLE LAYOUT: NO TOC FALLBACK
   ========================================================================== */
@media (min-width: 1024px) {
    .article-container.no-toc-layout {
        /* Removes the 20% left column, shifting the article left and keeping the right sidebar */
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
        grid-template-areas: "article right-nav";
    }
}

/* ==========================================================================
   404 ERROR PAGE POLISH
   ========================================================================== */
.error-page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 65vh;
    padding: 40px 20px;
    background-color: #fafafa; /* Soft background to make the card pop */
}

.error-page-content {
    background: #ffffff;
    padding: 60px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    max-width: 600px;
    width: 100%;
}

.error-code {
    font-size: 6rem !important;
    font-weight: 800 !important;
    color: var(--brand-color);
    margin: 0 0 10px 0 !important;
    line-height: 1;
}

.error-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #333;
    margin-bottom: 15px !important;
}

.error-message {
    font-size: 16px;
    color: #666;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* Error Page Search Bar Styling */
.error-search-container {
    position: relative;
    max-width: 450px;
    margin: 0 auto 35px auto;
}

.error-search-container .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    z-index: 1;
}

.error-search-container input[type="search"] {
    width: 100%;
    height: 52px;
    padding-left: 48px;
    padding-right: 20px;
    border: 2px solid #eaeaea;
    border-radius: 26px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #fdfdfd;
}

.error-search-container input[type="search"]:focus {
    border-color: var(--brand-color);
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 4px var(--brand-color-10);
}

.error-actions {
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   FOOTER POLISH
   ========================================================================== */

/* 1. Distinct Footer Area */
.footer {
    background-color: #fafafa;
    border-top: 1px solid #eaeaea;
    padding: 40px 0 20px;
    margin-top: 60px; /* Consistently pushes it down from the main content */
}

/* 2. Modern Circular Social Icons */
.footer .social {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap; /* Keeps them neat on small mobile screens */
}

.footer .social li {
    display: inline-block;
}

.footer .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #666666;
    border: 1px solid #e0e0e0;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Brand colored hover effect with a slight lift */
.footer .social a:hover {
    background-color: var(--brand-color);
    color: #ffffff;
    border-color: var(--brand-color);
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 3. Soft Legal / Copyright Text */
.footer-legal {
    font-size: 14px;
    color: #888888;
    border-top: 1px dashed #eaeaea; /* Subtle divider between icons and text */
    padding-top: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.footer-legal p {
    margin: 0;
}

.footer-legal a {
    color: #666666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--brand-color);
}


/* ==========================================================================
   FINAL DESKTOP UI POLISH (SEARCH, COMMENTS, SIDEBAR)
   ========================================================================== */

/* 1. Pin floating side buttons to the absolute edge to prevent overlap */
@media (min-width: 1024px) {
    .quick-links-toggle, 
    .bookmarks-toggle {
        /* right: 0 !important; */
        border-radius: 8px 0 0 8px !important;
        width: 42px !important;
        box-shadow: -2px 0 6px rgba(0,0,0,0.08) !important;
        transition: width 0.2s ease;
    }
    
    /* Slightly expand on hover for better UX */
    .quick-links-toggle:hover, 
    .bookmarks-toggle:hover {
        width: 48px !important;
    }
}

/* 2. Modernize the breadcrumb search bar with a pill shape */
.breadcrumbs__block .search input[type="search"] {
    border-radius: 30px !important; 
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
    padding-left: 35px; /* Adjust padding for the rounded corner */
    transition: all 0.3s ease;
}

.breadcrumbs__block .search input[type="search"]:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px var(--brand-color-10);
    outline: none;
}

/* 3. Polish the comments header and 'closed' message */
.comment-overview .comment-callout-status {
    font-size: 22px !important;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    text-align: left;
}

.article-comments .comment-callout {
    font-size: 15px;
    color: #666;
    background: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    margin: 20px 0 0 0 !important;
    width: 100%;
    display: block; /* Forces it to fill the container nicely */
}

/* ==========================================================================
   DESKTOP HEADER & NAVIGATION POLISH
   ========================================================================== */

/* 1. Define the header bottom edge with a soft shadow */
.hc_header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eaeaea;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

/* 2. Create a clean vertical divider after the main logo */
.logo > a:first-child {
    position: relative;
    padding-right: 20px;
    margin-right: 20px;
}

.logo > a:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    width: 1px;
    background-color: #e0e0e0;
}

/* 3. Soften the secondary portal logos and add a smooth hover state */
.logo .nav-icon {
    opacity: 0.65;
    transition: all 0.3s ease;
}

.logo .nav-icon:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* 4. Modernize the user profile button into a clickable pill */
.user-info > button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid transparent;
    background-color: transparent;
    transition: all 0.2s ease;
}

/* Add a light gray background when hovering or when the menu is open */
.user-info > button:hover, 
.user-info > button[aria-expanded="true"] {
    background-color: #f9f9f9;
    border-color: #eaeaea;
}

/* Remove default Zendesk margins that break the new flex gap */
.user-info .user-avatar {
    margin: 0 !important;
}

/* 5. Clean up the dropdown menu container and hover items */
.dropdown-menu {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 8px 0;
    margin-top: 5px;
}

.dropdown-menu [role="menuitem"] {
    padding: 10px 20px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu [role="menuitem"]:hover {
    background-color: var(--brand-color-10);
    color: var(--brand-color);
}


/* ==========================================================================
   INTERACTIVE CATEGORY CARDS
   ========================================================================== */
.blocks-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.blocks-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
}




/* ==========================================================================
   HOMEPAGE: FIX OVERLAPPING ICONS & SPACING
   ========================================================================== */

/* 1. Remove the "eye" icon that is overlapping the text */
.quick-articles section h2::after, 
.new-request-title::after, 
.search_heading::after {
    display: none !important;
}

/* 2. Tighten the FAQ/Promoted list spacing */
.quick-articles .recent-articles {
    padding: 20px !important; /* Reduced padding from 24px */
}

.quick-articles .recent-articles h2 {
    margin-bottom: 12px !important; /* Tighter gap below the title */
}

.quick-articles .recent-articles li {
    padding: 6px 0 !important; /* Tighter list items */
}


/* ==========================================================================
   BREADCRUMB SPACING FIX
   ========================================================================== */
.breadcrumbs__block {
    padding: 8px 0 !important; /* Reduced from 15px */
    margin-bottom: 15px !important; /* Reduced from 30px */
}

/* Optional: If the search bar inside the breadcrumb looks too large now */
.breadcrumbs__block .sub-nav {
    min-height: 35px !important; /* Tighter height */
}


/* ==========================================================================
   EXXAT PRISM COMMUNITY TOPICS LOGIC (UNIFIED)
   ========================================================================== */

/* 1. Parent Grid Rules (Replaces Flexbox to prevent single-item stretching) */
body .topics-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 
    gap: 24px !important; 
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 2. Topic Card Containers */
body .blocks-item-community {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important; 
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(.25, .8, .25, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

body .blocks-item-community:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06) !important;
    border-color: #d8d8d8 !important;
}

/* 3. Card Links & Structural Sizing */
body .blocks-item-link-community,
body .blocks-item-link-community:hover,
body .blocks-item-link-community:focus {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
    text-decoration: none !important;
    /* Enforces uniform grid heights regardless of single/multi-line headings */
    min-height: 160px !important; 
}

/* 4. Title Typographic Baselines */
body .blocks-item-title-community {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #222222 !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    transition: color 0.2s ease !important;
}

body .blocks-item-community:hover .blocks-item-title-community {
    color: var(--brand-color) !important;
    text-decoration: none !important;
}

/* 5. Excerpts / Descriptions */
body .blocks-item-description-community {
    font-size: 14px !important;
    color: #666666 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
    flex-grow: 1 !important; /* Dynamically pushes metadata down */
}

/* 6. Metadata Layout Integration */
body .blocks-item-community .meta-group {
    display: flex !important;
    gap: 12px !important;
    margin-top: auto !important;
    padding: 12px 0 0 0 !important;
    border-top: 1px solid #f5f5f5 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    list-style: none !important;
    width: 100% !important;
}

body .blocks-item-community .meta-data {
    font-size: 12px !important;
    color: #888888 !important;
    font-weight: 500 !important;
    text-align: left !important;
}

body .blocks-item-community .meta-data:not(:last-child):after {
    content: "•" !important;
    margin-left: 12px !important;
    color: #cccccc !important;
    display: inline-block !important;
}

/* 7. Header Boundaries Layout */
.community-header {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

/* 8. Responsiveness Profiles */
@media (max-width: 1023px) and (min-width: 768px) {
    body .topics-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    body .topics-list {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
    
    body .blocks-item-link-community {
        padding: 18px !important;
        min-height: auto !important; /* Allow natural scaling on mobile screens */
    }
}


/* ==========================================================================
   SEARCH RESULTS PAGE UI POLISH
   ========================================================================== */

/* 1. Unify the Search Input and Submit Button */
.search-results-search-wrap .search {
    display: flex;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #eaeaea;
    background: #ffffff;
}

.search-results-search-wrap input[type="search"] {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex-grow: 1;
    height: 52px;
}

/* Force the submit button to attach seamlessly to the input */
.search-results-search-wrap input[type="submit"] {
    border-radius: 0 !important;
    border: none !important;
    background-color: var(--brand-color) !important;
    color: #ffffff !important;
    padding: 0 32px !important;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    height: 52px;
    position: static !important; /* Overrides legacy absolute positioning */
}

.search-results-search-wrap input[type="submit"]:hover {
    filter: brightness(0.9);
}

/* 2. Elevate the Generative AI "Quick Answer" Box */
.generative-answers {
    background: linear-gradient(135deg, #ffffff 0%, var(--brand-color-10, #fdf4f8) 100%) !important;
    border: 1px solid #eaeaea !important;
    border-left: 4px solid var(--brand-color) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    padding: 24px !important;
}

/* 3. Refine Result Spacing and Add Hover Interactions */
.search-result-list-item {
    padding: 28px 0 !important;
    transition: transform 0.2s ease;
}

/* Subtle nudge to the right when a user hovers over a result */
.search-result-list-item:hover {
    transform: translateX(6px);
}

.search-result-title {
    font-size: 20px !important;
    margin: 10px 0 12px 0 !important;
}

/* 4. Modernize the Votes/Comments Stats into Pills */
.search-result-footer-stats {
    gap: 12px !important;
}

.search-result-stat-block {
    flex-direction: row !important; /* Forces side-by-side instead of stacked */
    align-items: center !important;
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 6px 12px !important;
    border-radius: 20px;
    gap: 6px;
}

.search-result-stat-number {
    font-size: 13px !important;
    color: var(--brand-color) !important;
}

.search-result-stat-label {
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0 !important;
}


/* ==========================================================================
   SEARCH BAR PILL ALIGNMENT & SPACING FIX
   ========================================================================== */

/* 1. Force the Zendesk form wrapper to act as the single pill container */
.search-results-search-wrap form.search {
    display: flex !important;
    flex-direction: row !important;
    border-radius: 30px !important;
    border: 1px solid #ddd !important;
    background: #ffffff !important;
    padding: 0 !important;
    overflow: hidden !important; /* Prevents children from breaking the rounded corners */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}

/* 2. Strip all borders from the input and round only the left side */
.search-results-search-wrap input[type="search"] {
    border: none !important;
    box-shadow: none !important;
    border-radius: 30px 0 0 30px !important;
    margin: 0 !important;
    height: 52px !important;
    flex-grow: 1 !important;
    padding-left: 45px !important; /* Ensures text doesn't overlap the icon */
}

/* 3. Strip all borders from the button and round only the right side */
.search-results-search-wrap input[type="submit"] {
    border: none !important;
    border-radius: 0 30px 30px 0 !important;
    margin: 0 !important;
    height: 52px !important;
    position: static !important; /* Overrides Zendesk's absolute positioning */
}

/* 4. Fix the Search Icon alignment inside the new flex layout */
.search-results-search-inner .search-results-search-icon {
    z-index: 10 !important;
    left: 18px !important;
}

/* 5. Add breathing room between the category tags and the article title */
.search-result-categories {
    margin-bottom: 14px !important;
}

/* ==========================================================================
   SEARCH RESULTS: "NO RESULTS" EMPTY STATE BRANDING
   ========================================================================== */

/* 1. Recolor the default grey SVG strokes to the primary brand color */
.no-results svg path[stroke="#CCC"] {
    stroke: var(--brand-color) !important;
}

/* 2. Recolor the light grey SVG fills to a soft brand tint */
.no-results svg path[fill="#F2F2F2"] {
    fill: var(--brand-color-10, #fcf0f5) !important;
}

/* 3. Wrap the empty state in a soft, centered container */
.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px dashed #eaeaea;
    margin-top: 20px;
}

/* 4. Polish the typography */
.no-results .headline {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-top: 24px;
    margin-bottom: 8px;
}

.no-results .action-prompt {
    font-size: 15px;
    color: #666;
    margin-bottom: 20px;
}

/* 5. Transform the standard fallback link into a solid brand button */
.no-results .action-prompt a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--brand-color);
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.no-results .action-prompt a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}


/* ==========================================================================
   GLOBAL FIX: COLLAPSE HIDDEN BOM/ZWNBSP CHARACTERS
   ========================================================================== */

/* 1. Force the parent wrapper to a font-size of 0 to crush the invisible text node */
main[role="main"] {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* 2. Restore the standard font size and line height to all actual content blocks */
main[role="main"] > * {
    font-size: 15px; /* Matches your theme's base font size */
    line-height: 1.5;
}


/* ==========================================================================
   COMMUNITY POST LIST PAGE POLISH
   ========================================================================== */

/* 1. Clean up Post Titles */
.striped-list-title {
    text-decoration: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    transition: color 0.2s ease !important;
}

.striped-list-title:hover {
    color: var(--brand-color) !important;
}

/* 2. Modernize the Stat Counters into Horizontal Pills */
.striped-list-count {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

.striped-list-count-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 6px 12px !important;
    border-radius: 20px;
    gap: 6px;
    font-size: 12px !important;
    color: #555 !important;
    text-transform: capitalize;
}

/* Remove the old dot separator between stats */
.striped-list-count-item::after {
    display: none !important; 
}

.striped-list-number {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--brand-color) !important;
}


/* 3. Dropdown Toggles Polish (Filter & Sort) */
.topic-header {
    border-bottom: 1px solid #eaeaea !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

.topic-filters .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    color: #444;
    transition: all 0.2s ease;
}

.topic-filters .dropdown-toggle:hover {
    border-color: #bbbbbb;
    background: #fafafa;
}

.topic-filters .dropdown-toggle[aria-expanded="true"] {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 2px var(--brand-color-10, rgba(227,28,121,0.1));
}

/* 4. Tidy up the list item spacing */
.striped-list-item {
    padding: 24px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.striped-list-info .meta-group {
    margin-top: 8px !important;
}
 


/* ==========================================================================
   COMMUNITY POST PAGE POLISH
   ========================================================================== */

/* 1. Hide the heavy horizontal separator lines */
.post > hr.separator:nth-of-type(1),
.post > hr.separator:nth-of-type(2) {
    display: none !important;
}

/* 2. Modernize the Action Toolbar (Follow, Copy, Bookmark) */
.community-share {
    background: #fcfcfc !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    margin: 10px 0 24px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Clean up the right-side icons alignment */
.community-share .flex.items-center {
    gap: 12px !important;
}

.community-share .btn-brand-round {
    margin: 0 !important; /* Overrides inline HTML margins to use Flex gap */
}

/* Modernize the Voting Block at the bottom of the post */
.community-vote {
    background: #fcfcfc !important;
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    padding: 14px 24px !important; 
    margin: 30px 0 20px 0 !important;
    justify-content: flex-start !important; /* Snaps the voting buttons flush left */
    gap: 16px !important; /* Adds a clean gap between the buttons and the comment count */
}

.community-vote .vote-up,
.community-vote .vote-down {
    background-color: transparent !important;
    color: var(--brand-color) !important;
    border: 2px solid var(--brand-color) !important;
    border-radius: 20px !important;
    min-width: 90px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.community-vote .vote-up:hover,
.community-vote .vote-up[aria-selected="true"] {
    background-color: #4cae4c !important;
    color: #ffffff !important;
    border-color: #4cae4c !important;
}

.community-vote .vote-down:hover,
.community-vote .vote-down[aria-selected="true"] {
    background-color: #d83d31 !important;
    color: #ffffff !important;
    border-color: #d83d31 !important;
}

/* 4. Fix mobile stacking for the Action Toolbar */
@media (max-width: 767px) {
    .community-share {
        flex-direction: column !important;
    }
    
    .community-share .community-follow,
    .community-share .community-follow button {
        width: 100% !important;
        justify-content: center;
    }
    
    .community-share .flex.items-center {
        width: 100%;
        justify-content: center;
    }
}




/* ==========================================================================
   COMMUNITY POST: MODERN GRID LAYOUT & CARD
   ========================================================================== */

/* 1. Desktop Layout: Sidebar Left (300px), Main Content Right */
@media (min-width: 1024px) {
    .post-container.modern-layout {
        display: grid !important;
        grid-template-columns: 300px minmax(0, 1fr) !important;
        gap: 40px !important;
        align-items: start !important;
        flex-direction: row !important; /* Resets legacy flexbox */
    }

    .post-container.modern-layout .post-sidebar {
        width: 100% !important; /* Overrides legacy 30% flex rule */
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        position: sticky; /* Keeps the card visible as user scrolls */
        top: 30px;
        order: 1; /* Forces sidebar to column 1 */
    }

    .post-container.modern-layout .post.main-content {
        max-width: 100% !important;
        width: 100% !important;
        order: 2; /* Forces content to column 2 */
    }
}

/* 2. Sidebar Card Styling */
.sidebar-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.sidebar-card .card-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.sidebar-card .card-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

/* 3. Dropdown Menu Polish (The 3-dots post actions menu) */
.actions .dropdown-toggle {
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    cursor: pointer;
    color: #666;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.actions .dropdown-toggle:hover {
    background: #f5f5f5 !important;
    color: var(--brand-color);
}

.actions .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    border: 1px solid #eaeaea !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    min-width: 180px !important;
    padding: 8px 0 !important;
}

.actions .dropdown-menu [role="menuitem"] {
    padding: 10px 20px !important;
    font-size: 14px !important;
    color: #444 !important;
    width: 100%;
    text-align: left;
    transition: background 0.2s ease, color 0.2s ease;
}

.actions .dropdown-menu [role="menuitem"]:hover {
    background: var(--brand-color-10, #fcf0f5) !important;
    color: var(--brand-color) !important;
}

/* 4. Aggressive HR removal globally for Community Post */
.post > hr.separator {
    display: none !important;
}


/* ==========================================================================
   COMMUNITY POST: FINAL POLISH (VOTES & COMMENTS)
   ========================================================================== */

/* 1. Tighten the vertical padding on the voting box */
.community-vote {
    padding: 14px 24px !important; 
    margin: 30px 0 20px 0 !important;
}

/* 2. Remove the lingering border under the comments header */
.comment-overview {
    border-bottom: none !important;
    border-top: none !important;
    padding-bottom: 0 !important;
}

/* 3. Modernize the comment input box */
.comment-container textarea,
.comment-container .tox-tinymce,
.comment-container .ck-editor {
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.comment-container textarea:focus,
.comment-container .tox-tinymce.tox-tinymce--focused {
    border-color: var(--brand-color) !important;
    box-shadow: 0 0 0 3px var(--brand-color-10, rgba(227,28,121,0.1)) !important;
    outline: none !important;
}

/* 4. Improve the alignment of the 3-dots action menu */
.post-actions-wrapper {
    display: flex;
    align-items: flex-start;
    margin-top: -5px; 
}

/* ==========================================================================
   COMMUNITY TOPIC PAGE: DROPDOWN ALIGNMENT
   ========================================================================== */

/* Spread the filter and sorter to opposite sides of the screen */
.topic-header .topic-filters {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    align-items: center;
}


/* ==========================================================================
   USER PROFILE PAGE: DASHBOARD CARD POLISH
   ========================================================================== */

/* 1. Profile Header Card Layout */
.profile-header {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    padding: 32px !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
}

.profile-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Desktop Grid Alignment */
@media (min-width: 768px) {
    .profile-info {
        flex-direction: row !important;
        align-items: flex-start !important; 
    }
    
    .profile-info > .avatar {
        flex-shrink: 0 !important;
        margin-right: 24px !important;
    }
    
    .profile-info > .basic-info {
        flex-grow: 1 !important;
    }
    
    /* Stacks the buttons cleanly on the right */
    .profile-info > .options {
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-end !important;
    }
}

/* 2. Avatar Polish */
.profile-info .user-avatar {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    border: 4px solid #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.profile-info .name {
    margin-top: 0 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}

/* 3. Stat Grid Modernization (Converts lists to horizontal cards) */
.profile-stats, 
.profile-stats-1 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
}

.profile-stats .stat, 
.profile-stats-1 .stat {
    background: #f9f9f9 !important;
    border: 1px solid #f0f0f0 !important;
    padding: 14px 16px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 140px !important;
    flex-grow: 1 !important;
    transition: transform 0.2s ease !important;
}

.profile-stats .stat:hover, 
.profile-stats-1 .stat:hover {
    transform: translateY(-2px) !important;
    background: #ffffff !important;
    border-color: #e2e2e2 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
}

.stat-label {
    font-size: 11px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

.stat-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--brand-color) !important;
}

/* 4. Fix Action Buttons (Edit Profile / Follow) */
.profile-info .options .user-profile-actions a,
.profile-info .options .user-profile-actions button,
.profile-info .options .community-follow button {
    border-radius: 30px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    transition: all 0.2s ease !important;
}

/* 5. Navigation Tabs Polish (Activity / Badges) */
.collapsible-nav-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    border-bottom: 2px solid #eaeaea !important;
    padding-bottom: 0 !important;
    margin-bottom: 30px !important;
    list-style: none !important;
}

.collapsible-nav-list li {
    margin: 0 !important;
}

.collapsible-nav-list li a {
    display: inline-block !important;
    padding: 12px 20px !important;
    color: #666 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important; /* Overlaps the container border cleanly */
    transition: color 0.2s ease, border-color 0.2s ease !important;
}

.collapsible-nav-list li.current a,
.collapsible-nav-list li a:hover {
    color: var(--brand-color) !important;
    border-bottom: 3px solid var(--brand-color) !important;
}
/* ==========================================================================
   USER PROFILE: EDIT PROFILE & AWARD BADGE BUTTONS FIX
   ========================================================================== */

/* 1. Remove the restrictive 32px height from Zendesk's hidden wrappers */
.profile-info .options .split-button,
.profile-info .options .edit-profile-button {
    height: auto !important;
    overflow: visible !important;
    display: inline-flex !important;
}

/* 2. Force the Edit Profile button to align perfectly with Award Badge */
.profile-info .options .split-button a,
.profile-info .options .split-button button,
.profile-info .options .edit-profile-button a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: normal !important;
    padding: 0 24px !important;
    background-color: var(--brand-color) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* 3. Add the premium lift-and-shadow hover state */
.profile-info .options .edit-profile-button a:hover,
.profile-info .options .award-badge-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(227, 28, 121, 0.2) !important;
    background-color: var(--brand-color) !important;
    color: #ffffff !important;
}

/* 4. Keep the Award Badge button identical */
.profile-info .options .award-badge-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 30px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background-color: var(--brand-color) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

/* ==========================================================================
   USER PROFILE: ACTIVITY & CONTRIBUTION LIST POLISH
   ========================================================================== */

/* 1. Turn the "Sort by" text into a proper modern dropdown button */
.profile-section-sorter .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #444 !important;
    transition: all 0.2s ease !important;
}

.profile-section-sorter .dropdown-toggle:hover {
    border-color: #cccccc !important;
    background: #fafafa !important;
}

.profile-section-sorter .dropdown-toggle[aria-expanded="true"] {
    border-color: var(--brand-color) !important;
    box-shadow: 0 0 0 3px var(--brand-color-10, rgba(227, 28, 121, 0.1)) !important;
}

/* 2. Upgrade the Contribution List Items into Cards */
.profile-contribution-list {
    margin-top: 20px !important;
}

.profile-contribution {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    padding: 24px 24px 24px 54px !important; /* Left padding makes room for the icon */
    margin-bottom: 16px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.01) !important;
    transition: all 0.2s ease !important;
}

.profile-contribution:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
    border-color: #d8d8d8 !important;
    transform: translateY(-2px) !important;
}

/* 3. Re-align the Icon perfectly inside the new card */
.profile-contribution-icon {
    left: 20px !important;
    top: 26px !important;
    background: transparent !important;
    color: var(--brand-color) !important;
}

/* Reset Zendesk's old left-margins since we handled it with card padding */
.profile-contribution-header, 
.profile-contribution-breadcrumbs, 
.profile-contribution-body, 
.profile-contribution .meta-group {
    margin-left: 0 !important;
}

/* 4. Polish the Title and Text */
.profile-contribution-title a {
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.profile-contribution-title a:hover {
    color: var(--brand-color) !important;
}

.profile-contribution-body {
    color: #555555 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
}

/* 5. Soften the Metadata (Swap | for a soft dot • ) */
.profile-contribution .meta-data {
    font-size: 12px !important;
    color: #888888 !important;
}

.profile-contribution .meta-data:not(:last-child):after {
    content: "•" !important;
    color: #cccccc !important;
    margin: 0 8px !important;
}

/* ==========================================================================
   REQUEST PAGE (TICKET DETAILS): MODERN LAYOUT & POLISH
   ========================================================================== */

/* 1. Desktop Grid Layout (Left Chat, Right Sidebar) */
@media (min-width: 1024px) {
    .request-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 320px !important;
        gap: 40px !important;
        align-items: start !important;
        flex-direction: row !important;
    }

    .request-main {
        width: 100% !important;
    }

    .request-sidebar {
        width: 100% !important;
        position: sticky;
        top: 30px;
    }
}

/* 2. Sidebar Dashboard Card Styling */
.request-sidebar {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

.collapsible-sidebar-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #eaeaea !important;
}

/* 3. Sidebar Key-Value Pairs (Ticket Details) */
.request-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important; /* Consistent spacing between pairs */
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
}

.request-details dt {
    font-size: 11px !important;
    color: #888888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.request-details dd {
    font-size: 14px !important;
    color: #222222 !important;
    margin: -10px 0 0 0 !important; /* Pulls the value tight against the label */
    word-break: break-word !important;
}

/* Status Pill Override for the Sidebar */
.request-details .status-label {
    display: inline-block !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* 4. Comment Thread Cards */
.request-main .comment-wrapper {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.01) !important;
}

.request-main .comment-info {
    margin-bottom: 16px !important;
}

/* 5. Reply Box & Buttons */
.request-main .comment-form {
    background: #fcfcfc !important;
    border: 1px dashed #cccccc !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 40px !important;
}

.request-main .comment-container textarea,
.request-main .comment-container .tox-tinymce {
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}

/* Submit and Mark as Solved Buttons */
.comment-form-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    margin-top: 16px !important;
}

.request-submit-comment input[type="submit"] {
    background-color: var(--brand-color) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.request-submit-comment input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(227, 28, 121, 0.2) !important;
}

.mark-as-solved {
    background-color: transparent !important;
    color: var(--brand-color) !important;
    border: 2px solid var(--brand-color) !important;
    border-radius: 30px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.mark-as-solved:hover {
    background-color: var(--brand-color) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(227, 28, 121, 0.2) !important;
}
/* ==========================================================================
   REQUEST PAGE: FINAL BORDER CLEANUP & LINKS
   ========================================================================== */

/* 1. Strip out the legacy horizontal divider lines in the sidebar */
.request-sidebar .request-details,
.request-sidebar .collapsible-sidebar-title {
    border-bottom: none !important;
}

/* Force-hide any stray HR tags Zendesk might inject */
.request-sidebar hr {
    display: none !important;
}

/* 2. Remove the double border below the comment thread */
.request-main .comment-list {
    border-bottom: none !important;
}

.request-follow-up {
    border-top: none !important;
    margin-top: 24px !important;
    padding-top: 0 !important;
    color: #555555 !important;
}

/* 3. Style the "create a follow-up" link using your CSS variables */
.request-follow-up a {
    color: var(--brand-color) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}

.request-follow-up a:hover {
    text-decoration: underline !important;
    opacity: 0.8 !important;
}

/* ==========================================================================
   REQUESTS LIST PAGE: NAVIGATION, TOOLBAR & TABLE DASHBOARD
   ========================================================================== */

/* 1. Top Navigation Tabs (Requests, Contributions, Following) */
.my-activities-nav .collapsible-nav-list,
.my-activities-sub-nav .collapsible-nav-list {
    display: flex !important;
    gap: 16px !important;
    border-bottom: 2px solid #eaeaea !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    list-style: none !important;
}

.my-activities-nav .collapsible-nav-list li,
.my-activities-sub-nav .collapsible-nav-list li {
    margin: 0 !important;
}

.my-activities-nav .collapsible-nav-list li a,
.my-activities-nav .collapsible-nav-list li[aria-selected="true"],
.my-activities-sub-nav .collapsible-nav-list li a {
    display: inline-block !important;
    padding: 12px 20px !important;
    color: #666 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important; /* Overlaps container border cleanly */
    transition: color 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer !important;
}

.my-activities-nav .collapsible-nav-list li a:hover,
.my-activities-sub-nav .collapsible-nav-list li a:hover {
    color: var(--brand-color) !important;
}

/* Active State for Tabs */
.my-activities-nav .collapsible-nav-list li.current a,
.my-activities-nav .collapsible-nav-list li[aria-selected="true"],
.my-activities-sub-nav .collapsible-nav-list li.current a {
    color: var(--brand-color) !important;
    border-bottom-color: var(--brand-color) !important;
}

/* 2. Toolbar (Search Bar & Dropdowns) */
.requests-table-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: center !important;
    margin-bottom: 24px !important;
}

.requests-table-toolbar .search {
    flex-grow: 1 !important;
    position: relative !important;
}

.requests-table-toolbar .search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #888 !important;
    z-index: 1 !important;
}

.requests-search {
    width: 100% !important;
    padding: 10px 16px 10px 40px !important; /* Space for the search icon */
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

.requests-search:focus {
    border-color: var(--brand-color) !important;
    box-shadow: 0 0 0 3px var(--brand-color-10, rgba(227,28,121,0.1)) !important;
    outline: none !important;
}

/* 3. Modernize Legacy Select Dropdowns */
.request-table-filter {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.request-filter-label {
    font-size: 13px !important;
    color: #666 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

select.request-filter {
    padding: 8px 32px 8px 16px !important;
    border-radius: 6px !important;
    border: 1px solid #eaeaea !important;
    background-color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    appearance: none !important; 
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23888' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

select.request-filter:focus,
select.request-filter:hover {
    border-color: var(--brand-color) !important;
    outline: none !important;
}

/* 4. Requests Table (Card Row Design) */
.requests-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important; /* Creates the gap between rows */
    margin-top: -12px !important;
}

.requests-table thead th {
    color: #888 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 20px 8px 20px !important;
    border: none !important;
}

.requests-table tbody tr {
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.requests-table tbody tr:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
    transform: translateY(-2px) !important;
}

/* Individual Cell Borders to simulate a card */
.requests-table tbody td {
    padding: 20px !important;
    vertical-align: middle !important;
    border-top: 1px solid #eaeaea !important;
    border-bottom: 1px solid #eaeaea !important;
    font-size: 14px !important;
    color: #555 !important;
}

.requests-table tbody td:first-child {
    border-left: 1px solid #eaeaea !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.requests-table tbody td:last-child {
    border-right: 1px solid #eaeaea !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Ticket Subject Link */
.requests-table .striped-list-title {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #333 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
}

.requests-table .striped-list-title:hover {
    color: var(--brand-color) !important;
}


/* ==========================================================================
   SUBMIT A REQUEST FORM: MODERN CARD & INPUTS
   ========================================================================== */

/* 1. Wrap the entire form in a centralized dashboard card */
#main-content.form {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    margin-top: 24px !important;
    margin-bottom: 40px !important;
    max-width: 800px !important; /* Keeps the form inputs from stretching too wide on desktop */
}

/* 2. Style the Labels and Helper Text */
#new-request-form label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#new-request-form p {
    font-size: 13px !important;
    color: #666666 !important;
    margin-bottom: 12px !important;
}

/* 3. Modernize the Text Inputs, Textareas, and Dropdowns */
#new-request-form input[type="text"],
#new-request-form input[type="email"],
#new-request-form textarea,
#new-request-form select,
.nesty-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    background-color: #fcfcfc !important;
    font-size: 14px !important;
    color: #333333 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.01) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

/* 4. Dynamic Brand Color Focus Rings */
#new-request-form input:focus,
#new-request-form textarea:focus,
#new-request-form select:focus,
.nesty-input:focus,
.nesty-input.is-active {
    border-color: var(--brand-color) !important;
    background-color: #ffffff !important;
    outline: 1px solid var(--brand-color) !important; /* Uses the dynamic variable instead of hardcoded hex */
}

/* 5. Polish the File Upload Dropzone */
#new-request-form .upload-dropzone {
    border: 2px dashed #cccccc !important;
    border-radius: 8px !important;
    background-color: #fafafa !important;
    padding: 24px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

#new-request-form .upload-dropzone:hover {
    border-color: var(--brand-color) !important;
    background-color: #ffffff !important;
}

/* 6. Upgrade the Submit Button into a Brand Pill */
#new-request-form footer button[type="submit"],
#new-request-form input[type="submit"] {
    background-color: var(--brand-color) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 12px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    display: inline-flex !important;
    justify-content: center !important;
    margin-top: 16px !important;
}

#new-request-form footer button[type="submit"]:hover,
#new-request-form input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    opacity: 0.9 !important; /* Safe hover effect that doesn't rely on hardcoded color */
}

/* ==========================================================================
   SUBMIT A REQUEST: INLINE SUGGESTIONS TO RIGHT SIDEBAR (GRID FIX)
   ========================================================================== */
/* 1. Remove the restrictive max-width so the card uses the whole page */
#main-content.form {
    max-width: 100% !important; 
    margin: 0 auto !important; /* Ensures it stays perfectly centered */
}

@media (min-width: 1024px) {
    /* 2. Convert the Zendesk form into a full-width CSS Grid */
    #new-request-form form {
        display: grid !important;
        /* Lets the form grow naturally, and gives the sidebar a solid 400px */
        grid-template-columns: minmax(0, 1fr) 400px !important;
        column-gap: 60px !important; /* Increases the breathing room between columns */
        align-items: start !important;
    }

    /* 3. Force all normal form fields to stack in the left column */
    #new-request-form form > * {
        grid-column: 1 !important;
    }

    /* 3. Force all normal form fields to stack in the left column */
    #new-request-form form > * {
        grid-column: 1 !important;
    }

    /* 4. Force the suggestions box into the right column */
    #new-request-form form > [data-test-id="suggested-articles"] {
        grid-column: 2 !important;
        grid-row: 1 / 100 !important; /* Spans all rows so it doesn't disrupt the left fields */
        
        /* Sticky positioning so it floats alongside you as you scroll */
        position: sticky !important;
        top: 24px !important;
        
        /* Dashboard Card Styling */
        background: #fcfcfc !important;
        border: 1px solid #eaeaea !important;
        border-radius: 12px !important;
        padding: 24px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
        margin-top: 28px !important; 
        height: fit-content !important; /* Prevents the box from stretching vertically */
    }
}

/* 5. Polish the text and links inside the suggestions box */
#new-request-form [data-test-id="suggested-articles"] h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    color: #333 !important;
}

#new-request-form [data-test-id="suggested-articles"] a {
    color: var(--brand-color) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    transition: opacity 0.2s ease !important;
}

#new-request-form [data-test-id="suggested-articles"] a:hover {
    text-decoration: underline !important;
    opacity: 0.8 !important;
}


/* ==========================================================================
   NEW COMMUNITY POST: TWO-COLUMN FORM & POLISH
   ========================================================================== */

/* 1. Create the Desktop Grid Layout */
@media (min-width: 1024px) {
    .form-page {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 400px !important; /* Matches the Request page width */
        column-gap: 60px !important;
        align-items: start !important;
        margin-bottom: 40px !important;
    }
}

/* 2. Left Column: The Main Form Card */
.form-page > #main-content.form {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    margin: 0 !important; /* Overrides Zendesk default margins */
}

/* 3. Style Labels and Spacing */
.new_community_post .form-field {
    margin-bottom: 24px !important;
}

.new_community_post label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.new_community_post .optional {
    color: #888888 !important;
    font-weight: 400 !important;
    margin-left: 4px !important;
}

/* 4. Modernize Text Inputs, Selects, and WYSIWYG Editor */
.new_community_post input[type="text"],
.new_community_post select,
.new_community_post .tox-tinymce {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    background-color: #fcfcfc !important;
    font-size: 14px !important;
    color: #333333 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.01) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

/* Custom Dropdown Arrow */
.new_community_post select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23888' stroke-linecap='round' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    cursor: pointer !important;
}

/* Dynamic Brand Focus Rings */
.new_community_post input[type="text"]:focus,
.new_community_post select:focus {
    border-color: var(--brand-color) !important;
    background-color: #ffffff !important;
    outline: 1px solid var(--brand-color) !important;
}

/* 5. Upgrade the Submit Button */
.new_community_post footer input[type='submit'] {
    background-color: var(--brand-color) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 12px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    margin-top: 8px !important;
}

.new_community_post footer input[type='submit']:hover {
    transform: translateY(-2px) !important;
    opacity: 0.9 !important;
}

/* 6. Right Column: The Suggestions Box */
.form-page > div:not(#main-content) {
    position: sticky !important;
    top: 24px !important;
    background: #fcfcfc !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    height: fit-content !important;
}

/* Hide the box completely if there are no suggestions */
.form-page > div:not(#main-content):empty,
.suggestion-list:empty {
    display: none !important;
}

/* Suggestion Text & Links */
.suggestion-list h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    color: #333 !important;
}

.suggestion-list a {
    color: var(--brand-color) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    transition: opacity 0.2s ease !important;
}

.suggestion-list a:hover {
    text-decoration: underline !important;
    opacity: 0.8 !important;
}

/* ==========================================================================
   NEW COMMUNITY POST: DROPDOWN & SUBMIT BUTTON OVERRIDES
   ========================================================================== */

/* 1. Complete overhaul of the Topic Dropdown Selector */
.new_community_post select.p-2 {
    width: 100% !important;
    height: 44px !important;
    padding: 10px 40px 10px 16px !important; /* Generous right padding to protect text from hitting the arrow */
    border-radius: 8px !important;
    border: 1px solid #eaeaea !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    cursor: pointer !important;
    line-height: normal !important;
    
    /* Clean custom vector arrow layout */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23666666' stroke-linecap='round' stroke-width='1.5' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

/* Focused Dropdown State using the design's brand color variable */
.new_community_post select.p-2:focus {
    border-color: var(--brand-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--brand-color-10, rgba(227, 28, 121, 0.1)) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23e31c79' stroke-linecap='round' stroke-width='1.5' d='M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5'/%3E%3C/svg%3E") !important; /* Flips arrow to a subtle variant on focus if desired */
}

/* 2. Style the dropdown items (options wrapper fallback for modern browsers) */
.new_community_post select.p-2 option {
    padding: 12px !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* 3. Modern Brand Pill Submit Button */
.new_community_post footer input[type='submit'] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 32px !important;
    background-color: var(--brand-color) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* Interactive lift-and-shadow hover animation */
.new_community_post footer input[type='submit']:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--brand-color-10, rgba(227, 28, 121, 0.25)) !important;
    opacity: 0.95 !important;
}

/* Active pressing state */
.new_community_post footer input[type='submit']:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}


/* ========================================
   ERROR PAGE STYLES - LEO Design
   ======================================== */

.error-page {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

/* Error Page Hero Section */
.error-page-hero {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    min-height: 500px;
    padding: 60px 5%;
    background: linear-gradient(180deg, #faf9fb 0%, #ffffff 100%);
    overflow: hidden;
}

@media (max-width: 768px) {
    .error-page-hero {
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        padding: 40px 20px;
    }
}

/* LEO Illustration */
.leo-illustration {
    flex-shrink: 0;
    max-width: 300px;
    height: auto;    
    z-index: 0;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

@media (max-width: 768px) {
    .leo-illustration {
        max-width: 200px;
    }
}

/* Error Heading */
.error-heading {
    font-size: 28px;
    font-weight: 700;
    color: var(--brand-color);
    margin-bottom: 15px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

/* Error Description */
.error-description {
    font-size: 16px;
    color: #4b4755;
    margin-bottom: 30px;
    max-width: 600px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Search Wrapper on Error Page */
.error-search-wrapper {
    width: 100%;
    max-width: 600px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.error-search-wrapper .search {
    margin: 0;
}

/* Primary Action Button (for unauthorized) */
.error-action-primary {
    margin-top: 20px;
}

.error-action-primary .hc__btn {
    padding: 12px 40px;
    font-size: 16px;
}

/* Container for Article and Card Sections */
.error-page .container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Helpful Section */
.error-helpful-section {
    margin: 60px 0 40px;
    padding: 40px;
    background: #faf9fb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.error-section-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f1d2b;
    margin-bottom: 25px;
    text-align: center;
}

/* Promoted Articles List */
.error-promoted-articles {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 700px;
    margin: 0 auto;
}

.promoted-article-item {
    margin-bottom: 12px;
}

.promoted-article-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: #1f1d2b;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.promoted-article-link:hover {
    border-color: var(--brand-color);
    background: #fff5f9;
    color: var(--brand-color);
    transform: translateX(5px);
}

.promoted-article-link svg {
    flex-shrink: 0;
    color: var(--brand-color);
}

/* Action Cards Section */
.error-action-cards {
    margin: 60px 0;
}

.error-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.error-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.error-card:hover {
    border-color: var(--brand-color);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(var(--brand-color), 0.15);
}

.error-card-link {
    display: block;
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.error-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #E31C79 0%, #F72D8E 100%);
    border-radius: 50%;
    color: #ffffff;
}

.error-card:hover .error-card-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.error-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f1d2b;
    margin-bottom: 8px;
}

.error-card-description {
    font-size: 14px;
    color: #4b4755;
    margin: 0;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .error-heading {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .error-description {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .error-helpful-section {
        padding: 30px 20px;
        margin: 40px 0 30px;
    }

    .error-section-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .promoted-article-link {
        padding: 14px 16px;
        font-size: 14px;
    }

    .error-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .error-card {
        border-radius: 10px;
    }

    .error-card-link {
        padding: 25px 15px;
    }

    .error-card-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 15px;
    }

    .error-card-title {
        font-size: 16px;
    }

    .error-card-description {
        font-size: 13px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .error-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .error-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Legacy error page styles (keep for fallback) */
h1.form-header {
    font-weight: 600;
    font-size: 3.5em
}
/* LEO End */





















/* ==========================================================================
   RESPONSIVE / MEDIA QUERIES
   ========================================================================== */

/* NOTE: Responsive breakpoints are distributed inline within each section
   above, co-located with the component rules they affect. Add any global
   cross-section responsive overrides here. */

/* ==========================================================================
   MOBILE UI OPTIMIZATIONS (PHONES ONLY)
   ========================================================================== */
@media (max-width: 767px) {

    /* 1. Header Logos: Hide secondary brand links to save space */
    .logo .nav-icon {
        display: none !important;
    }

    .search-container {
        margin-bottom: 10px;
    }

    /* 2. Action Bar: Fix wrapping and force primary buttons full-width */
    .article>.flex-row:nth-of-type(1) {
        flex-direction: column !important;
        padding: 16px;
    }

    /* Force the Follow button wrapper and Download button to be full width */
    .article>.flex-row:nth-of-type(1)>div.btn-brand,
    .article>.flex-row:nth-of-type(1) input[value="Download Article"] {
        width: 100% !important;
        flex: 1 1 100% !important;
        justify-content: center !important;
        margin: 0 0 10px 0 !important;
        /* Adds space below each button */
    }

    /* Ensure Zendesk's injected subscribe element fills its new full-width container */
    .article-subscribe,
    .article-subscribe>* {
        width: 100% !important;
        text-align: center;
    }

    /* Keep the icon buttons (Copy, Bookmark) clustered nicely on the bottom row */
    .article>.flex-row:nth-of-type(1) .flex-row {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 12px;
        margin-top: 5px;
    }

    /* 3. Voting Buttons: Force side-by-side */
    .article-votes-controls {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .article-votes .article-vote {
        width: 50% !important;
        margin: 0 !important;
    }

    /* 4. Floating Side Toggles (Bookmarks/Links): Shrink, fade, and tuck */
    .quick-links-toggle,
    .bookmarks-toggle {
        width: 32px !important;
        height: 38px !important;
        right: -4px !important;
        /* Tucks them slightly off-screen */
        border-radius: 8px 0 0 8px !important;
        opacity: 0.75;
        /* Makes them slightly see-through */
    }

    .quick-links-toggle svg,
    .bookmarks-toggle svg {
        width: 16px !important;
        height: 16px !important;
        margin-left: -4px;
        /* Adjusts icon placement within the tucked button */
    }

    .bookmarks-toggle {
        top: calc(50% - 42px) !important;
    }

    /* 5. Hide redundant text "Return to top" link since we have the floating arrow */
    .article-return-to-top {
        display: none !important;
    }

    /* 6. Give the comments header a little breathing room */
    .comment-overview {
        padding-bottom: 15px;
    }

    /* ==========================================================================
       SECTION & CATEGORY PAGES: FIX LEFT CUT-OFF
       ========================================================================== */

    /* Override the flex-end alignment that pushes content off the left edge */
    .section-container,
    .category-container {
        justify-content: flex-start !important;
        flex-direction: column !important;
        width: 100%;
        padding: 0 10px;
        /* Gives a little breathing room on the edges */
    }

    /* Force the content wrapper to shrink to the mobile screen size */
    .section-content,
    .category-content {
        min-width: 0 !important;
        width: 100%;
    }

    /* Ensure the Follow button spans the full width neatly */
    .section-subscribe,
    .section-subscribe button {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: center;
    }

    /* Fix the page header alignment so text stays flush left */
    .page-header {
        align-items: flex-start !important;
        width: 100%;
    }

}

/* BEGIN: feature-read-aloud */
/* ==========================================================================
   READ ALOUD
   ==========================================================================

   Pairs with the feature-read-aloud block in script.js. The button itself
   reuses .btn-brand-round, so it inherits the brand colour and the touch
   sizing already defined in feature-article-toolbar.

   The button ships with `hidden` set in article_page.hbs and is only revealed
   once script.js confirms the device actually has speech voices.
   ========================================================================== */

/* -- Sentence highlighting ------------------------------------------------
   Painted through the CSS Custom Highlight API over an exact Range, so the
   marker tracks the sentence being spoken without a single wrapper element
   being injected into author content.

   ::highlight() accepts only a short list of properties — background-color,
   color, text-decoration, text-shadow and a few others. Borders, padding and
   border-radius are ignored, which is why this looks different from the
   block fallback below. Do not add properties expecting them to apply.

   A tinted background rather than a colour change, so it never fights the
   text's own contrast. */
::highlight(prism-read) {
    background-color: var(--brand-color-15, rgba(227, 28, 121, .18));
    color: var(--text-default, #333333);
}

/* Fallback for browsers without the Highlight API: colour the whole block.
   Less precise — the marker sits still across several sentences — but it
   still shows the reader roughly where the voice is. */
.prism-read-aloud-active {
    background: var(--brand-color-15, rgba(227, 28, 121, .15));
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--brand-color-15, rgba(227, 28, 121, .15));
    transition: background .15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .prism-read-aloud-active {
        transition: none;
    }
}

/* -- "Read from this section" beside each heading -------------------------
   Revealed on hover, but ALWAYS visible on keyboard focus — a control that
   only appears on hover is unreachable by keyboard. */
.prism-read-section {
    /* inline-FLEX — see the note on .prism-heading-anchor. Measured 2px off
       centre as inline-block, because the icon aligned to the heading's
       baseline rather than to the button box. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 4px;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--brand-color-text, #c81869);
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease-in-out;
}

.prism-read-section svg {
    display: block;
}

.article-body h2:hover .prism-read-section,
.article-body h3:hover .prism-read-section,
.prism-read-section:focus-visible {
    opacity: 1;
}

.prism-read-section:hover {
    background: var(--brand-color-10, rgba(227, 28, 121, .10));
}

/* Touch devices have no hover, so the control would never appear. */
@media (hover: none) {
    .prism-read-section {
        opacity: 1;
        width: 32px;
        height: 32px;
    }
}

/* -- Floating transport bar, shown only while speaking --------------------
   Was a panel anchored beside the Listen button. It overlapped the Follow /
   Download / Copy / Bookmark controls at every width, because the toolbar is
   a tight flex row with nothing to spare beside it. A fixed bar has no such
   constraint and stays reachable however far the reader has scrolled. */
.prism-speech-bar {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: var(--z-speech-bar, 760);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 8px 14px;
    background: var(--surface-default);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--text-strong) 22%, transparent);
}

.prism-speech-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--brand-color-text);
    border: 1px solid var(--brand-color-text);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
}

.prism-speech-btn:hover {
    background: var(--surface-default);
    color: var(--brand-color-text);
}

/* Stop is the secondary of the two, so it reads as an outline control. */
.prism-speech-stop {
    background: var(--surface-default);
    color: var(--brand-color-text);
}

.prism-speech-stop:hover {
    background: var(--brand-color-text);
    color: #ffffff;
}

.prism-speech-pos {
    flex: 0 0 auto;
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
}

/* -- Speed and voice open in a card above the bar AT EVERY WIDTH ------------
   The bar carries only the transport (play, stop, position, settings), so it
   cannot overflow at any width; the card is position:absolute inside the fixed
   bar and does not count towards the bar's measured height, so the corner fabs
   stay cleared by the bar's own ~62px whether the card is open or shut (see
   feature-floating-controls). Speed is a four-way switch, voice a list with
   the recorded narration first; both are radio groups with the input hidden
   and the label drawn as the control. */
.prism-speech-settings {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    width: min(380px, calc(100vw - 32px));
    padding: 16px 16px 18px;
    background: var(--surface-default);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--text-strong) 24%, transparent);
}

.prism-speech-settings.is-open {
    display: flex;
    animation: prism-speech-pop .16s ease-out;
}

/* Individual `translate`, not `transform`: transform is already used to centre the card. */
@keyframes prism-speech-pop {
    from {
        opacity: 0;
        translate: 0 6px;
    }
}

.prism-speech-gear {
    display: inline-flex;
}

.prism-speech-settings__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.prism-speech-settings__title {
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 700;
}

.prism-speech-settings__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -4px -6px -4px 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
}

.prism-speech-settings__close:hover {
    background: var(--surface-muted);
    color: var(--text-strong);
}

.prism-speech-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.prism-speech-group > legend {
    padding: 0 0 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.prism-speech-group__sub {
    padding: 10px 12px 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.prism-speech-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-default);
    font-size: 14px;
    cursor: pointer;
}

.prism-speech-opt input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.prism-speech-opt:has(input:focus-visible) {
    outline: 2px solid var(--brand-color-text);
    outline-offset: 2px;
}

.prism-speech-opt__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
}

/* the narration cannot be used for this article: its rows are dimmed and say a device voice is reading */
.prism-speech-opt.is-unavailable .prism-speech-opt__label,
.prism-speech-opt.is-unavailable .prism-speech-opt__sub {
    color: var(--text-muted)
}

.prism-speech-opt.is-unavailable .prism-speech-opt__sub {
    font-style: italic
}

.prism-speech-opt__sub {
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: 12px;
}

.prism-speech-opt__badge {
    padding: 1px 8px;
    background: var(--brand-color-10);
    border-radius: 999px;
    color: var(--brand-color-text);
    font-size: 11px;
    font-weight: 700;
}

/* speed: a four-way switch */
.prism-speech-seg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--surface-muted);
    border-radius: 12px;
}

.prism-speech-seg .prism-speech-opt {
    justify-content: center;
    padding: 9px 4px;
    border-radius: 9px;
    text-align: center;
}

.prism-speech-seg .prism-speech-opt:hover {
    background: var(--surface-sunken);
}

.prism-speech-seg .prism-speech-opt:has(input:checked) {
    background: var(--brand-color-text);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--text-strong) 25%, transparent);
    color: #ffffff;
    font-weight: 600;
}

/* voice: a list, scrolls on its own when a device lists many */
.prism-speech-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: min(240px, 34vh);
    margin: 0 -6px;
    padding: 0 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.prism-speech-list .prism-speech-opt {
    padding: 10px 12px;
    border-radius: 10px;
}

/* a device voice is one line: name on the left, language on the right */
.prism-speech-list .prism-speech-opt.is-compact {
    padding: 8px 12px;
}

.prism-speech-opt.is-compact .prism-speech-opt__text {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.prism-speech-opt.is-compact .prism-speech-opt__sub {
    flex-basis: auto;
}

.prism-speech-list .prism-speech-opt::before {
    content: "";
    flex: 0 0 18px;
    box-sizing: border-box;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    transition: border-color .15s ease, background-color .15s ease;
}

.prism-speech-list .prism-speech-opt:hover {
    background: var(--surface-muted);
}

.prism-speech-list .prism-speech-opt:has(input:checked) {
    background: var(--brand-color-10);
}

.prism-speech-list .prism-speech-opt:has(input:checked)::before {
    background: var(--brand-color-text);
    border-color: var(--brand-color-text);
    box-shadow: inset 0 0 0 3px var(--surface-default);
}

.prism-speech-list .prism-speech-opt__label {
    color: var(--text-strong);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .prism-speech-settings.is-open {
        animation: none;
    }

    .prism-speech-list .prism-speech-opt::before {
        transition: none;
    }
}

/* Phones: full-bleed bar and 44px targets. The arrangement is the same as
   every other width; only the sizing changes. */
@media (max-width: 599px) {
    .prism-speech-bar {
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
        justify-content: center;
    }

    .prism-speech-btn {
        width: 44px;
        height: 44px;
    }

    .prism-speech-settings {
        /* Anchored to the bar's own edges rather than centred, so it cannot
           sit half off-screen on a narrow phone. */
        left: 0;
        right: 0;
        width: auto;
        transform: none;
    }

    .prism-speech-seg .prism-speech-opt,
    .prism-speech-list .prism-speech-opt {
        min-height: 44px;
    }
}
/* END: feature-read-aloud */

/* BEGIN: feature-read-aloud-clearance */
/* While the read-aloud transport bar is open, the page's floating Scroll-to-top and contents buttons rise above it.
   --prism-speech-bar-h is published by the read-aloud script from the bar's measured height. */
body.prism-speech-bar-open #scroll-to-top-btn {
    bottom: calc(20px + var(--prism-speech-bar-h, 64px) + 16px) !important;
}

body.prism-speech-bar-open .toc-fab {
    bottom: calc(20px + var(--prism-speech-bar-h, 64px) + 16px) !important;
}
/* END: feature-read-aloud-clearance */

/* BEGIN: feature-webinar-core */
/* Subset of the shared webinar styles: only the date tile, status pill, buttons and kicker that the
   home-page next-session strip uses. The hub, card and article rules arrive with the webinar release. */
.wb-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-width: 52px;
    height: 58px;
    background: var(--surface-default);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-strong);
    line-height: 1.1
}

.wb-date__m {
    color: var(--brand-color-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase
}

.wb-date__d {
    font-size: 22px;
    font-weight: 700
}

.wb-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap
}

.wb-pill--soon {
    background: var(--brand-color-10);
    color: var(--brand-color-text)
}

.wb-pill--live {
    background: var(--brand-color);
    color: #FFFFFF
}

.wb-pill--rec {
    background: var(--surface-muted);
    border: 1px solid var(--border-subtle);
    color: var(--text-default)
}

.wb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border: 1px solid var(--brand-color);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease
}

.wb-btn--primary {
    background: var(--brand-color);
    color: #FFFFFF
}

.wb-btn--primary:hover {
    background: var(--brand-color-dark);
    color: #FFFFFF;
    text-decoration: none
}

.wb-btn--ghost {
    background: var(--surface-default);
    border-color: var(--border-subtle);
    color: var(--brand-color-text)
}

.wb-btn--ghost:hover {
    background: var(--brand-color-10);
    text-decoration: none
}

.wb-btn:focus-visible {
    outline: 2px solid var(--brand-color-text);
    outline-offset: 2px
}

.wb-kicker {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

/* Phones and small tablets: bigger tap targets, stacked actions, chips that scroll sideways, no overflow. */

@media (max-width: 767px) {
.wb-btn {
        min-height: 44px
    }
}
/* END: feature-webinar-core */

/* BEGIN: feature-webinar-home-strip */
/* A dark announcement bar, so it reads as its own thing instead of merging into the (often light blue)
   hero; the series colour only shows as an edge accent. */
.wb-strip {
    margin: 0;
    padding: 10px 20px;
    background: var(--text-strong);
    border-left: 6px solid var(--webinar-bg-color, var(--brand-color));
    color: var(--surface-default)
}

.wb-strip .wb-pill--soon {
    background: var(--surface-default)
}

.wb-strip .wb-btn--ghost {
    background: transparent;
    border-color: var(--surface-default);
    color: var(--surface-default)
}

.wb-strip .wb-btn--ghost:hover {
    background: var(--surface-default);
    color: var(--text-strong)
}

.wb-strip a:focus-visible,
.wb-strip button:focus-visible {
    outline: 2px solid var(--surface-default);
    outline-offset: 2px
}

.wb-strip__row {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px
}

.wb-strip__text {
    display: flex;
    flex: 1 1 280px;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.wb-strip__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

.wb-strip__top .wb-kicker {
    margin: 0
}

.wb-strip__title {
    color: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3
}

.wb-strip__meta {
    font-size: 14px
}

.wb-strip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.wb-strip__close {
    align-self: flex-start;
    padding: 4px 8px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: inherit;
    cursor: pointer
}

.wb-strip__close:hover {
    opacity: .7
}


/* Phones: a compact bar (about 150 px at 414 px wide instead of 286): date tile left of the text, kicker and pill on
   one line, a two-line title, one meta line, the two buttons side by side. Same colours, same markup order. */
@media (max-width: 767px) {
    .wb-strip {
        position: relative;
        padding: 10px 40px 10px 14px
    }

    .wb-strip__row {
        align-items: flex-start;
        gap: 8px 12px
    }

    .wb-strip__row .wb-date {
        width: 44px;
        min-width: 44px;
        height: 50px;
        border-radius: 8px
    }

    .wb-strip__row .wb-date__d {
        font-size: 20px
    }

    .wb-strip__text {
        flex: 1 1 0;
        gap: 2px
    }

    .wb-strip__top {
        flex-wrap: nowrap;
        gap: 8px
    }

    .wb-strip__top .wb-pill {
        padding: 0 10px;
        line-height: 1.6
    }

    .wb-strip .wb-strip__title {
        display: -webkit-box;
        min-height: 0;
        overflow: hidden;
        font-size: 16px;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2
    }

    .wb-strip__meta {
        overflow: hidden;
        font-size: 13px;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .wb-strip__actions {
        flex-wrap: nowrap;
        width: 100%
    }

    .wb-strip__actions .wb-btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1.3;
        text-align: center
    }

    .wb-strip__close {
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 40px;
        min-height: 40px
    }
}

/* Very narrow phones: the title and the buttons keep the room, the meta line (also on the article page) is dropped. */
@media (max-width: 359px) {
    .wb-strip__meta {
        display: none
    }
}
/* END: feature-webinar-home-strip */

/* BEGIN: feature-category-access */
/* The sign-in / no-access card shown in place of the article list of a restricted category. */
.access-gate {
    max-width: 640px;
    margin: 32px 0;
    padding: 32px 28px;
    background: var(--surface-default, #ffffff);
    border: 1px solid var(--border-subtle, #cccccc);
    border-left: 6px solid var(--brand-color);
    border-radius: 10px;
}

.access-gate__title {
    margin: 0 0 10px;
    color: var(--text-strong, #1f1f1f);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.access-gate__text {
    margin: 0 0 20px;
    color: var(--text-default, #333333);
    font-size: 16px;
    line-height: 1.6;
}

.access-gate__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.access-gate__link {
    color: var(--brand-color-text, var(--brand-color));
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .access-gate {
        padding: 24px 18px;
    }
}
/* The small lock beside the title of a restricted category tile (signed-out visitors). */
.access-lock {
    display: inline-block;
    margin-left: 6px;
    vertical-align: -1px;
    color: var(--text-muted, #666666);
}
/* END: feature-category-access */

/* BEGIN: feature-reading-aids */
/* ==========================================================================
   READING AIDS — progress bar, reading time, heading anchors, expand-all

   PORTABILITY: --brand-color-text (5.54:1 text-safe pink), --text-muted,
   --border-subtle only. No Sass, no literal brand colour.
   ========================================================================== */

/* -- Reading progress -----------------------------------------------------
   Pinned to the TOP OF THE VIEWPORT, YouTube-style, not docked under the site
   header. The header is `position: relative` (z-index 9), so a header-anchored
   bar would scroll away with it and be visible only at the top of the page —
   exactly when progress is 0 and the bar is useless.

   z-index 900 rather than 400: at 400 any product help center that later gives
   its header or search a sticky position with a z-index of its own could paint
   over the strip. 900 clears every piece of page furniture while still sitting
   below the edge toggles (999) and slide-out panels (1000), neither of which
   occupies the top 4px.

   4px, not 3: at 3px on a 2x display the strip reads as a hairline artefact.

   NOTE FOR PREVIEW: Zendesk's own preview chrome is a `position: fixed` 50px
   bar at the top of the window, so inside the theme preview the progress strip
   is hidden behind it. On the published help center it is the topmost thing on
   the page. Verify this one live, not in preview. */
.prism-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    z-index: 900;
    pointer-events: none;
}

.prism-progress-fill {
    height: 100%;
    width: 0;
    background: var(--brand-color, #e31c79);
    /* A 6px leading glow is what makes the strip read as motion rather than as
       a static rule, which is the whole trick behind YouTube's loader. */
    box-shadow: 0 0 6px 0 var(--brand-color, #e31c79);
    transition: width .08s linear;
}

@media (prefers-reduced-motion: reduce) {
    .prism-progress-fill {
        transition: none;
    }
}

/* -- Reading time ---------------------------------------------------------
   Rides in the existing .meta-group list beside the date, so it inherits
   that list's separators and spacing. */
.prism-reading-time {
    white-space: nowrap;
}

/* -- Copy link on a heading ----------------------------------------------
   Same hover-plus-always-on-focus rule as .prism-read-section: a control
   that only appears on hover cannot be reached by keyboard. */
.prism-heading-anchor {
    /* inline-FLEX, not inline-block.
       As inline-block the icon sits on the heading's text baseline instead of
       in the middle of the circle: measured 2.5px off centre horizontally,
       and visibly low against the 26px round hover background. The toolbar's
       round buttons get this right because .btn-brand-round is already
       inline-flex + centred; these two were the exceptions. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 3px;
    width: 26px;
    height: 26px;
    vertical-align: middle;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--brand-color-text, #c81869);
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease-in-out;
}

.prism-heading-anchor svg {
    display: block;
}

.article-body h2:hover .prism-heading-anchor,
.article-body h3:hover .prism-heading-anchor,
.prism-heading-anchor:focus-visible,
.prism-heading-anchor.is-copied {
    opacity: 1;
}

.prism-heading-anchor:hover {
    background: var(--brand-color-10, rgba(227, 28, 121, .10));
}

.prism-heading-anchor.is-copied {
    background: var(--brand-color-text, #c81869);
    color: #ffffff;
}

/* Touch devices have no hover, so it would otherwise never appear. */
@media (hover: none) {
    .prism-heading-anchor {
        opacity: 1;
        width: 32px;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prism-heading-anchor {
        transition: none;
    }
}

/* -- Expand / collapse all accordions ------------------------------------- */
.prism-accordion-controls {
    margin: 0 0 14px;
}

.prism-accordion-toggle {
    min-height: 40px;
    padding: 8px 18px;
    font-size: 0.9em;
}

/* -- Label chips ----------------------------------------------------------
   CURRENTLY UNUSED. The article header stopped rendering labels on
   26 September 2026 (see the note in article_page.hbs) and the search results
   page cannot render them, because Zendesk's search result object has no
   `labels` property.

   Kept, not deleted, because these are the styles a search-results label pass
   would use, and because `.prism-label-chip` is already the documented class
   name. Roughly 25 lines of dead CSS is a cheaper carrying cost than
   reinventing the chip later. */
.prism-article-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.prism-label-chip {
    display: inline-block;
    padding: 4px 12px;
    background: var(--surface-muted, #f6f6f6);
    border: 1px solid var(--border-subtle, #e0e0e0);
    border-radius: 999px;
    color: var(--text-muted, #666666);
    font-size: 0.8em;
    text-decoration: none;
}

.prism-label-chip:hover {
    background: var(--brand-color-10, rgba(227, 28, 121, .10));
    border-color: var(--brand-color-text, #c81869);
    color: var(--brand-color-text, #c81869);
}

/* -- Recently viewed, in the sidebar -------------------------------------- */
.prism-recently-viewed ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.prism-recently-viewed li + li {
    margin-top: 2px;
}

/* -- Standalone bookmark button (sections, categories, and the two article
      templates that never had one) ---------------------------------------- */
.prism-bookmark-standalone-wrap {
    display: flex;
    justify-content: flex-start;
    margin: 12px 0;
}

.prism-bookmark-standalone {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

/* In a section/category header the button shares a row with the title and the
   Follow button. .page-header baseline-aligns its row, and a button holding
   only an SVG has no text baseline, so it floated above Follow. Centre both
   on the row instead, size the button to Follow's height, and give it a gap. */
.page-header .prism-bookmark-standalone-wrap {
    margin: 0 0 10px;
    flex-shrink: 0;
}

.page-header .prism-bookmark-standalone {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
}

@media (min-width: 768px) {
    .page-header .section-subscribe,
    .page-header .prism-bookmark-standalone-wrap {
        align-self: center;
        margin-bottom: 0;
    }

    .page-header .prism-bookmark-standalone-wrap {
        margin-left: 10px;
    }
}
/* END: feature-reading-aids */