/*
  Template Name: Mabonte
  Version: 3.1.8
  Author: Allies Interactive
  Website: http://www.diziana.com/
  Corporate Website : http://www.diziana.com
  Contact: support@diziana.com
  Follow: https://www.twitter.com/dizianaEngage
  Like: https://www.facebook.com/diziana.engage
  Purchase: Diziana.com
  License: You must have a valid license purchased only from
  diziana.com in order to legally use the theme for your project.
  Copyright: © 2019 Allies Interactive Services Pvt. Ltd. All Rights Reserved
*/
/*
Google fonts added to the theme
Roboto: https://fonts.google.com/specimen/Roboto
Barlow: https://fonts.google.com/specimen/Barlow#standard-styles

CSS variables affected/updated: 
font-family: Futura, 'Century Gothic', AppleGothic, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

Futura, 'Century Gothic', AppleGothic, sans-serif -> font-family: 'Barlow', sans-serif;
-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif    -> font-family: 'Barlow', sans-serif

Futura, 'Century Gothic', AppleGothic, sans-serif -> font-family: 'Roboto', sans-serif;
-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif    -> font-family: 'Roboto', sans-serif;

*/

@charset "UTF-8";
/***** Base *****/

/* :root {
  --card-corner-radius: 20px;
  scroll-behavior: smooth;
  --card-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  --step-card-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
  --button-shadow: rgb(6 24 44 / 14%) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --input-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  --simple-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  --accent-color: #3f78ba;
  --accent-color-light: #e2f1fa;
} */

:root {
    color-scheme: light dark;

    --bg-main: oklch(97.9% 0.005 266);
    --surface-1: oklch(100% 0 0);
    --surface-2: oklch(95.8% 0.008 266);
    --surface-3: oklch(92.4% 0.012 266);
    --surface-4: oklch(89.8% 0.015 266);

    /* --- Light Theme Tinted Shadows --- */
    --shadow-color: 27, 40, 79;
    --shadow-sm: 0 2px 4px rgba(var(--shadow-color), 0.26);
    --shadow-md:
        0 4px 12px -2px rgba(var(--shadow-color), 0.32),
        0 2px 4px -2px rgba(var(--shadow-color), 0.28);
    --shadow-lg:
        0 12px 24px -4px rgba(var(--shadow-color), 0.38),
        0 8px 16px -4px rgba(var(--shadow-color), 0.32);
    --shadow-sm-accent: 0 2px 4px rgba(var(--shadow-color), 0.56);
    --shadow-md-accent:
        0 4px 12px -2px rgba(var(--shadow-color), 0.62),
        0 2px 4px -2px rgba(var(--shadow-color), 0.58);
    --shadow-lg-accent:
        0 12px 24px -4px rgba(var(--shadow-color), 0.68),
        0 8px 16px -4px rgba(var(--shadow-color), 0.62);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Border Colors - Light (Subtle Navy Tint) */
    --border-subtle: oklch(88% 0.015 266);
    --border-medium: oklch(80% 0.03 266);
    --border-strong: oklch(26.2% 0.057 266);

    /* Shape Scale */
    --radius-xs: 4px; /* Tiny elements/tags */
    --radius-sm: 8px; /* Tooltips/Menus */
    --radius-md: 12px; /* Inputs/Small Cards */
    --radius-lg: 24px; /* Main Cards/Dialogs */
    --radius-xl: 28px; /* Bottom Sheets/Large Modals */
    --radius-pill: 100px; /* Buttons/Search Bars */

    /* --- Fluid Foundations --- */
    /* Radius: Scales from 16px (mobile) to 28px (desktop) */
    --radius-outer: clamp(16px, 2.5vw, 28px);

    /* Padding: Scales from 16px to 32px */
    --padding-outer: clamp(16px, 3vw, 32px);

    /* --- Derived Inner Radius --- */
    /* This formula ensures the inner corner follows the outer curve perfectly */
    --radius-inner: calc(var(--radius-outer) - var(--padding-outer));

    /* --- Component Specific --- */
    --radius-interactive: 12px; /* Fixed for buttons/inputs to keep brand feel */

    /* Span designs for better emphasis */
    --actionstep-bg: #cae6f7;
    --actionstep-color: #3f78ba;
    --fadedhighlight-bg: #fdff97;
    --fadedhighlight-color: darkslategray;
    --code-bg: var(--surface-1);
    --code-color: var(--textsharp);
    --button_default-bg: var(--surface-2);
    --button_default-color: var(--textmuted);
    --appbuttonYesV202504-bg: #52b5f9;
    --appbuttonYesV202504-color: whitesmoke;
    --appbuttonNoV202504-bg: red;
    --appbuttonNoV202504-color: whitesmoke;
    --UIbuttonV202504-bg: #114785;
    --UIbuttonV202504-color: whitesmoke;
  
    --card-bg: oklch(0.98 0 240);
    --card-bg-light: oklch(1 0 240);
    --notif-bg: oklch(0 0 0 / 0.05);
    --notif-bg-light: oklch(0.94 0 240);
    --textsharp: oklch(0.15 0 240);
    --textnormal: oklch(0.4 0 240);
    --textmuted: oklch(0.5 0 240);
    --textblockquote: oklch(0.4 0 240);
    --textlink: oklch(0.56 0.17 253);
    --highlight: oklch(1 0 240);
    --border: oklch(0.6 0 240);
    --border-muted: oklch(0.7 0 240);
    --primary: oklch(0.4 0.1 240);
    --secondary: oklch(0.4 0.1 60);
    --danger: oklch(0.7 0.07 30);
    --warning: oklch(0.78 0.07 110);
    --success: oklch(0.7 0.07 160);
    --info: oklch(0.71 0.07 237);
    --border-card: solid 1px var(--surface-1);
    --details-divider: oklch(0 0 0 / 0.1);
    --elevated-shadow: var(--accent-color) 0px 10px 5px -5px;
  	--headerfooter-bg: #1b284f;
  	--headerfooter-color: #f0f0f0;
  	--appicon-select: #3f78ba;
  	--appicon-normal: #64acd8;

    transition: all 0.3s ease;

    --card-corner-radius: clamp(1rem, calc(2vw + 0.5rem), 1.5rem);
    scroll-behavior: smooth;
    --card-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    --step-card-shadow:
        rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
        rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px,
        rgba(42, 51, 70, 0.04) 0px 2px 2px -1px,
        rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
        rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px,
        rgba(42, 51, 70, 0.03) 0px 10px 10px -5px,
        rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    --button-shadow:
        rgb(6 24 44 / 14%) 0px 0px 0px 2px,
        rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
        rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    --input-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    --simple-shadow: rgba(0, 0, 0, 0.15) 0px 7.5px 2.5px -5px;
    --accent-color: #1b284f;
    --accent-color-light: #e2f1fa;
  	--accent-color-semilight: #acd9ed69;
    --padding-responsive: clamp(1rem, calc(2vw + 0.5rem), 1.5rem);
  
    --neon-border: #3f78ba;
    --neon-glow: #4d8fd6;
  
  	cursor: url("/hc/theming_assets/01KC5YPK6MFCGDDJEZWG60692X"), auto;
  	--mouse-pointer: url("/hc/theming_assets/01KCCY52XYMB52W18PYMQH2TAG"), pointer;
  
  input[type="checkbox"] {
    color-scheme: light;
  }
}

/* ✅ Toggle: Force Dark Mode */
html:has(#dark-toggle:checked) {
    color-scheme: dark;
  	--accent-color: oklch(42% 0.12 262);
  	--textlink: oklch(80% 0.19 253);

    --bg-main: oklch(12.8% 0.015 266);
    --surface-1: oklch(18.2% 0.015 266);
    --surface-2: oklch(22.9% 0.015 266);
    --surface-3: oklch(26.8% 0.015 266);
    --surface-4: oklch(31.2% 0.015 266);
  
    /* --- Dark Theme Shadows --- */
    --shadow-color: 0, 0, 0;
    --shadow-sm: 0 2px 4px rgba(var(--shadow-color), 0.4);
    --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.5);
    --shadow-lg: 0 12px 24px rgba(var(--shadow-color), 0.6);
  
    /* Border Colors - Dark (Deep Navy Tint) */
    --border-subtle: oklch(25% 0.02 266);
    --border-medium: oklch(35% 0.03 266);
    --border-strong: oklch(65% 0.08 266);
  
    /* Shape Scale */
    --radius-xs: 4px; /* Tiny elements/tags */
    --radius-sm: 8px; /* Tooltips/Menus */
    --radius-md: 12px; /* Inputs/Small Cards */
    --radius-lg: 24px; /* Main Cards/Dialogs */
    --radius-xl: 28px; /* Bottom Sheets/Large Modals */
    --radius-pill: 100px; /* Buttons/Search Bars */

    /* --- Fluid Foundations --- */
    /* Radius: Scales from 16px (mobile) to 28px (desktop) */
    --radius-outer: clamp(16px, 2.5vw, 28px);

    /* Padding: Scales from 16px to 32px */
    --padding-outer: clamp(16px, 3vw, 32px);

    /* --- Derived Inner Radius --- */
    /* This formula ensures the inner corner follows the outer curve perfectly */
    --radius-inner: calc(var(--radius-outer) - var(--padding-outer));

    /* --- Component Specific --- */
    --radius-interactive: 12px; /* Fixed for buttons/inputs to keep brand feel */  
  
    /* Span designs for better emphasis */
    --actionstep-bg: oklch(38% 0.08 260);
    --actionstep-color: oklch(85% 0.12 255);
    --fadedhighlight-bg: oklch(42% 0.12 100);
    --fadedhighlight-color: oklch(92% 0.02 260);
    --code-bg: oklch(24% 0.015 266);
    --code-color: var(--textsharp);
    --button_default-bg: oklch(28% 0.015 266);
    --button_default-color: var(--textnormal);
    --appbuttonYesV202504-bg: oklch(58% 0.18 230);
    --appbuttonYesV202504-color: var(--textsharp);
    --appbuttonNoV202504-bg: oklch(56% 0.16 20);
    --appbuttonNoV202504-color: var(--textsharp);
    --UIbuttonV202504-bg: oklch(52% 0.14 260);
    --UIbuttonV202504-color: var(--textsharp);
  
    --card-bg: oklch(0.2 0.02 240);
    --card-bg-light: oklch(0.3 0.02 240);
    --notif-bg: oklch(0 0 0 / 0.55);
    --notif-bg-light: oklch(0.16 0.02 240);
    --textsharp: oklch(0.95 0.01 240);
    --textnormal: oklch(0.85 0.01 240);
    --textmuted: oklch(0.75 0.01 240);
    --textblockquote: oklch(0.95 0.01 240);
    --textlink: oklch(0.71 0.15 237);
    --highlight: oklch(0.5 0.01 240);
    --border: oklch(0.4 0.01 240);
    --border-muted: oklch(0.3 0.01 240);
    --primary: oklch(0.76 0.1 240);
    --secondary: oklch(0.76 0.1 60);
    --danger: oklch(0.5 0.1 30);
    --warning: oklch(0.7 0.14 110);
    --success: oklch(0.5 0.06 160);
    --info: oklch(0.5652 0.08 253.56);
    --border-card: solid 1px var(--border-muted);
    --details-divider: oklch(1 0 0 / 0.2);
    --elevated-shadow: rgba(0, 0, 0, 0.15) 0px 5px 5px;
  	--headerfooter-bg: #0d2240;
  	--appicon-select: #64acd8;
  	--appicon-normal: #3f78ba;  	
}

a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
[onclick],
[role="button"] {
    cursor: var(--mouse-pointer);
}

* {
  scrollbar-color: var(--accent-color) transparent;
  scrollbar-width: thin;
}

/* WebKit: fully custom thin scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 4px;
  /* Optional: add slight transparency for subtlety */
  opacity: 0.6;
}

::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Optional: hide scrollbar when not scrolling (enhances minimalism) */
::-webkit-scrollbar-thumb:vertical {
  min-height: 40px;
}

::-webkit-scrollbar-thumb:horizontal {
  min-width: 40px;
}

.article-body {
/*   padding: var(--padding-responsive);
  background-color: var(--bg-main); */
/*   line-height: 1.5;  
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  color: var(--textnormal); */
}

/* .article-body :is(h1, h2, h3, h4, p, ul, ol, blockquote, div.notification) {
  margin-block: 1rem;
}

.article-body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--textsharp);
  text-wrap: pretty;
}

.article-body h2 {
  position: relative;
  font-family: 'Raleway';
  font-size: clamp(1.7rem, calc(3vw + 0.01rem), 2rem);
}

.article-body h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(131, 58, 180, 1) 0%, 
    rgba(253, 29, 29, 0.66) 30%, 
    rgba(252, 176, 69, 0) 100%);
}

.article-body h3 {
  font-size: clamp(1.3rem, calc(3vw + 0.01rem), 1.5rem);
  font-weight: 500;
}

.article-body h4 {
  font-size: clamp(1rem, calc(3vw + 0.01rem), 1.2rem);
}

.article-body :is(p, ol, ul) {
  font-size: clamp(0.9rem, calc(2vw + 0.01rem), 1rem);
}

.article-body :is(ol, ul) {
  margin-left: var(--padding-responsive);
}

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

.article-body :is(ol ol) {
  list-style-type: lower-alpha;
}

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

.article-body :is(ul ul) {
  list-style-type: circle;
}

.article-body a {
  color: var(--textlink);
  text-decoration: none;
  border-bottom: solid 2px var(--textlink);
}

.article-body a:has(img) {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
} */

/************** Language Selector **************/
  .lang-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    font-family: system-ui, sans-serif;
  }

  .lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-4);
    color: var(--textnormal);
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: var(--mouse-pointer);
    min-width: 60px;
    justify-content: center;
    transition: 0.3s all ease;
  }

  .lang-toggle:hover {
    box-shadow: var(--shadow-sm-accent);
    color: var(--textsharp);
  }

  .lang-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow: hidden;
    min-width: 160px;
    display: none;
    flex-direction: column;
    z-index: 1001;
  }

  .lang-dropdown.show {
    display: flex;
  }

  .lang-option {
    padding: 10px 16px;
    color: #333;
    cursor: var(--mouse-pointer);
    font-size: 15px;
    white-space: nowrap;
  }

  .lang-option:hover {
    background: #f0f4ff;
  }

/************** Call To Action Hyperlink + Icon **************/
.article-body a[data-calltoaction-icon],
.article-body button[data-calltoaction-icon] {
  display: inline-block;
  text-decoration: none;
  cursor: var(--mouse-pointer);
  padding: 12.5px 30px 12.5px 50px;
  border: 0;
  border-radius: 100px;
  background: var(--accent-color);
  color: #ffffff;
  font-weight: bold;
  transition: all 0.5s;
  position: relative;
  box-shadow: var(--simple-shadow);
}

.article-body a[data-calltoaction-icon]::before,
.article-body button[data-calltoaction-icon]::before {
  content: attr(data-calltoaction-icon);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.article-body a[data-calltoaction-icon]:hover,
.article-body button[data-calltoaction-icon]:hover {
  background-color: #3f78ba;
  box-shadow: var(--elevated-shadow);
  transform: scale(1.1);
}

.article-body a[data-calltoaction-icon]:active,
.article-body button[data-calltoaction-icon]:active {
  box-shadow: none;
  transform: scale(0.98);
}

/************** No Class Details + Summary **************/
.article-body details:not([class]) {
    margin-bottom: 0.5rem;
}
.article-body details:not([class]) > summary {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: center;
}

.article-body details:not([class]) > summary {
    &:hover,
    &:focus-visible {
        cursor: var(--mouse-pointer);
        background: rgba(0, 0, 0, 0.05);
        border-radius: var(--radius-sm);
    }
}

.article-body details:not([class])[open] > summary {
    font-weight: bold;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-sm);
}

.article-body details:not([class])[open] {
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm);
}

.article-body details:not([class])[open] > *:not(summary) {
    padding-inline: var(--padding-responsive);
}

.article-body details:not([class]) > summary::before {
    content: "\f0da";
    padding-inline: 0.5rem;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    transition: all 0.3s ease;
}

.article-body details:not([class])[open] > summary::before {
    transform: rotate(90deg);
}

.article-body details:not([class]) [id$="-step"] .stepContainer {
  	border: none !important;
    border-radius: none !important;
    box-shadow: none !important;
    background: none !important;
}

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

.header-bg {
  background: var(--card-bg);
  box-shadow: var(--simple-shadow);
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* body {
  background-color: #FFFFFF;
  color: rgba(91, 103, 118, 1);
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  margin-top: 0;
  text-wrap: pretty;
}

h1 {
  font-size: 56px;
  line-height: 56px;
}

h2 {
  font-size: 32px;
  line-height: 44px;
}

h3 {
  font-size: 22px;
  line-height: 30px;
}

h4 {
  font-size: 18px;
} */

a {
/*   color: #3976B7; */
  color: var(--textlink);
  text-decoration: none; /*underline*/
}

a:active,
a:focus,
a:hover {
  text-decoration: underline;
}

iframe,
img {
  max-width: 100%;
}

input,
textarea {
  color: var(--textnormal);
  background: var(--surface-1);
  font-size: 14px;
  accent-color: var(--accent-color);
  caret-color: var(--accent-color);
}

input {
  font-weight: 300;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  -webkit-transition: border .12s ease-in-out;
  transition: border .12s ease-in-out;
}

input:focus {
  border: 1px solid rgba(140, 219, 255, 1);
}

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(/hc/theming_assets/01HZKZEWFS2Q8ZDTMG1Z3Z7VJ0) no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}

select:focus {
  border: 1px solid rgba(140, 219, 255, 1);
}

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

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

textarea:focus {
  border: 1px solid rgba(140, 219, 255, 1);
}

.container,
main > p {
  max-width: 1160px;
  margin: 0 auto 2rem;
}

.container {
  padding: 0 5%;
}

.sub-nav-wrapper .container {
  margin: 0 auto;
}

main > p {
  margin: 20px auto;
}
@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

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

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

.error-page {
  text-align: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

.error-page a {
  padding: 10px;
  background-color: rgba(140, 219, 255, 1);
  color: rgba(35, 34, 34, 1);
}

.error-page a:hover {
  text-decoration: none;
}

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

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

/***** Buttons *****/

.button,
[role="button"] {
  border: 1px solid rgba(140, 219, 255, 1);
  border-radius: 4px;
  color: rgba(140, 219, 255, 1);
  cursor: var(--mouse-pointer);
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  -webkit-transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: auto;
  -webkit-touch-callout: none;
}

.button::after,
[role="button"]::after {
  color: inherit;
}

.button:active,
.button:focus,
.button:hover,
.button[aria-selected="true"],
[role="button"]:active,
[role="button"]:focus,
[role="button"]:hover,
[role="button"][aria-selected="true"] {
  background-color: rgba(140, 219, 255, 1);
  color: rgba(35, 34, 34, 1);
  text-decoration: none;
}

.button[aria-selected="true"]:active,
.button[aria-selected="true"]:focus,
.button[aria-selected="true"]:hover,
[role="button"][aria-selected="true"]:active,
[role="button"][aria-selected="true"]:focus,
[role="button"][aria-selected="true"]:hover {
  background-color: #26bbff;
  border-color: #26bbff;
}

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

.button-large,
input[type="submit"] {
/*   display: inline-block;
  position: absolute;
  top: 6px; */
  background-color: var(--accent-color);
  border: 0;
  border-radius: var(--radius-sm);
  color: white;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.72;
  min-width: 100px;
  padding: 0 1.9286em;
  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: #26bbff;
}

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

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

.button-secondary:active,
.button-secondary:focus,
.button-secondary:hover {
  color: rgba(91, 103, 118, 1);
  border: 1px solid #ddd;
  background-color: #f7f7f7;
}

/***** Tables *****/

figure.wysiwyg-table {
  display: block;
}

.table {
  width: 100%;
  table-layout: fixed;
  
  /* Box Shadow */
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

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

.table th,
.table th a {
  color: #8f9aa8;
  font-size: 13px;
  text-align: left;
}

[dir="rtl"] .table th,
[dir="rtl"] .table th a {
  text-align: right;
}

.table tr {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}

.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td,
  .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td,
  .table th {
    padding: 10px 20px;
    height: 60px;
  }
}



/***** Forms *****/

.form {
  max-width: 650px;
}

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

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

.form-field input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}

.form-field input:focus {
  border: 1px solid rgba(140, 219, 255, 1);
}

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

.form-field input[type="text"]:focus {
  border: 1px solid rgba(140, 219, 255, 1);
}

.form-field input[type="checkbox"] {
  width: auto;
  display: inline-block;
}

.form-field input[type="checkbox"]+p {
  display: inline-block;
}

.form-field .nesty-input {
  border-radius: 4px;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}

.form-field .nesty-input:focus {
  border: 1px solid rgba(140, 219, 255, 1);
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

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

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

.form-field p {
  color: #8f9aa8;
  font-size: 13px;
  margin: 5px 0;
}

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

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

.form footer a {
  color: #8f9aa8;
  cursor: var(--mouse-pointer);
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}

.form .suggestion-list .searchbox {
  border: solid 1px #ededed;
  border-radius: 4px;
}

.form .suggestion-list label {
  border-bottom: 1px solid #ededed;
  display: block;
  padding: 8px 10px;
  font-weight: 600;
}

.form .suggestion-list ul {
  padding: 5px 0;
}

.form .suggestion-list li {
  padding: 5px 10px;
}

.form .suggestion-list li a:visited {
  color: #214469;
}

/***** Header *****/

.header-wrapper {
/*  background-color: rgba(0, 37, 84, 1); */
  background: var(--headerfooter-bg);  
  position: relative; /* creates the boundary */
}

.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 70px; /*default: 90px*/ 
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}

.logo img {
  vertical-align: middle;
/*   max-height: 70px; */
  min-width: 5rem;
}

.user-nav {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
}
@media (min-width: 920px) {
  .user-nav {
    position: relative;
  }
}

@media (max-width: 920px) {
  .user-nav {
    display: none;
  }
}

.user-nav[aria-expanded="true"] {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 70px;
  z-index: 6;
  position: absolute;
}

.user-nav[aria-expanded="true"] > a {
/*   color: #3976B7; */
  color: var(--textlink);
  display: block;
  margin: 10px 5%;
}

.user-nav[aria-expanded="true"] > .user-info {
  margin-left: auto;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.nav-wrapper a {
  border: 0;
/*   color: #FFFFFF; */
  color: var(--headerfooter-color);
  display: none;
  font-size: 14px;
  padding: 0 12px 0 0;
  width: auto;
  font-weight: 500;
  vertical-align: middle;
  text-align: center;
}
@media (min-width: 920px) {
  .nav-wrapper a {
    display: inline-block;
  }
}

[dir="rtl"] .nav-wrapper a {
  padding: 0 0 0 20px;
}

.nav-wrapper a:active,
.nav-wrapper a:focus,
.nav-wrapper a:hover {
  background-color: transparent;
  text-decoration: none;
}

.nav-wrapper .icon-menu {
  display: inline-block;
  color: #FFFFFF;
}
@media (min-width: 920px) {
  .nav-wrapper .icon-menu {
    display: none;
  }
}

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

/***** User info in header *****/

.user-info {
  display: inline-block;
  min-width: 25px;
}

.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 920px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}

.user-info > [role="button"] {
  border: 0;
  color: #FFFFFF;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
  font-weight: 500;
}

.user-info > [role="button"]:hover {
  color: #FFFFFF;
  background-color: transparent;
}

.user-info > [role="button"]::after {
  color: inherit;
}

[dir="rtl"] .user-info > [role="button"]::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 920px) {
  #user #user-name {
    display: inline-block;
  }
}

/***** User avatar *****/

.user-avatar {
/*   height: 25px; */
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

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

.avatar img {
  min-height: 40px;
  min-width: 40px;
}

.avatar .icon-agent::before {
  background-color: rgba(140, 219, 255, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  color: rgba(35, 34, 34, 1);
  content: "\1F464";
  font-size: 14px;
  height: 14px;
  line-height: 14px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 14px;
}

/***** Footer *****/

.footer {
/*   color: rgba(0, 20, 46, 1); */
  color: var(--headerfooter-color);
}
/* @media (min-width:768px) {
  .footer {
    margin-top: 1rem;
  }
} */

.footer a {
  color: rgba(0, 20, 46, 1);
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}

.footer-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 180px;
  flex: 1 0 180px;
  margin-bottom: 30px;
}

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

[dir="rtl"] .dropdown.language-selector {
  margin-right: 15px;
}

.footer-top {
  background-color: rgba(241, 242, 242, 1);
  padding: 30px 0 0;
}

.footer-bottom {
/*   background-color: #eceded; */
  background-color: var(--headerfooter-bg);
  color: var(--headerfooter-color);
  padding: var(--padding-responsive);
  height: 110px;
}

.footer-bottom a {
  color: #fefefe;
}

.footer-bottom > .footer-inner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}
@media (min-width: 920px) {
  .footer-bottom > .footer-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    text-align: justify;
  }
}

.footer-content {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.footer-inner ul.share {
  margin-right: 15px;
}

.footer-inner ul.share,
.footer-inner ul.share > li {
  height: 25px;
}

.footer-inner ul.share > li > a {
  color: var(--headerfooter-color);
  opacity: 1;
  font-size: .9em;
  text-align: center;
}

.copyright {
  margin-top: 0;
}
@media (min-width: 920px) {
  .copyright {
    margin-top: 15px;
  }
}

/***** Breadcrumbs *****/

.breadcrumbs {
  margin: 0;
  padding: 0;
  color: var(--textmuted);
  font-size: 0.9rem;
  width: 100%;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}

.breadcrumbs li {
  display: inline;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumbs li+li::before {
  content: ">";
  margin: 0 5px;
}

.breadcrumbs li a,
.breadcrumbs li a:visited {
  font-weight: 500;
}

.breadcrumbs li a {
  padding: 5px 0;
  border-radius: var(--radius-xs);
  color: var(--textmuted);
}

.breadcrumbs li a:hover {
  color: var(--textlink);
  background: var(--surface-2);
  text-decoration: none;
}

/***** Search field *****/

.full-width {
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .full-width {
    width: 70%;
  }
}

.search {
  position: relative;
  width: 100%;
}

.search input[type="search"] {
  border: 1px solid #ddd;
  border-radius: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #999;
  height: 40px;
  padding-left: 40px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%; /* Default width: 100% */
}

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

.search input[type="search"]:focus {
/*   border: 1px solid rgba(140, 219, 255, 1); */
  border: 2px solid var(--border-strong);
}

.search::before {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #fff;
  color: rgba(140, 219, 255, 1);
  content: "\1F50D";
  font-size: 18px;
  position: absolute;
  left: 15px;
}

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

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

/***** Hero component *****/

.herohome {
/*   background-color: rgba(236, 246, 255, 1);
  background-size: cover; */
  height: 300px; /* Default height: 350px */
  position: relative;
  align-content: center;
  text-align: center; /* Default text-align: center;*/
  width: 100%;
  background-color: var(--accent-color-light);
  box-shadow: var(--simple-shadow);
}

.hero {
  background-color: rgba(236, 246, 255, 1);
  background-size: cover;
  box-shadow: var(--simple-shadow);
  z-index: 5;
  height: 100px; /* Default height: 350px */
  position: sticky;
  top: 0;
  align-content: center;
  text-align: center; /* Default text-align: center;*/
  width: 100%;
}

.hero-image {
  background-image: url(/hc/theming_assets/01HZKZGR77GMVRKFC24E0FZG8B);
}

.detail-strip {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0;
  background: #0000006b;
  text-align: center;
  color: #fff;
  font-size: 1.1em;
}

.detail-strip p {
  margin: 10px 0;
}

.detail-strip .submit-a-request {
  margin-left: 8px;
}

.hero-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  
  display: flex;
  justify-content: center;
  text-align: center;
  /* justify-content: space-between; */ 
  background-color: var(--accent-color-semilight);
  color: #00142E;
  margin: 30px 0 30px 0; /* Default margin: 0; */
  border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
}

/* Added Header title container */
.header-title-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  max-width: 100%;
  margin: 2% 0 0;
}

/* Removed header icon from mobile view*/
.page-header .header-title-container img {
  /*display: none;*/
  max-height: 50px;
  margin: 0 0 0 0;
}

/* Added header icon Desktop view*/
@media (min-width: 768px) {
  .page-header .header-title-container img {
    max-height: 100px;
    margin: 0 10px 0 0;
  }
}

.page-header .header-title-container h1 {
	-webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  margin: 0;
  padding: 0;
  min-width: 100%;
  font-size: 34px;
  font-weight: 600;
/*   text-align: left; */
  text-align: center;
}

.page-header .header-title-container p {
	-webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  margin: 0;
  padding: 0;
  min-width: 100%;
  font-size: 20px;
  font-weight: 300;
  text-align: center;
}


.page-header .section-subscribe {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.page-header h1 {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  margin: 0;
/*   padding: 3% 10% 0; */
  min-width: 100%;
  font-size: 34px;
  font-weight: 600;
}

.page-header-description {
  margin: 0 0 20px; /* Default margin: 10px 0 20px */
  word-break: break-word;
  font-size: 16px;
  font-weight: 300;
  padding: 0 10%;
  min-width: 100%;
}

@media (min-width: 580px) {
  .page-header {
    -ms-flex-direction: row;
  }  
 .page-header h1 {
  	font-size: 46px;
  	font-weight: 600;
/*     padding: 2% 10% 0; */
  	min-width: 100%;
	}
  .page-header-description {
    font-size: 20px;
    font-weight: 300;
    padding: 0 10% 1%;
  	min-width: 100%;
	}
}

@media (min-width: 768px) {
  .page-header {
    -webkit-box-align: top;
    -ms-flex-align: top;
    align-items: top;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    margin: 20px 0 50px 0; /* Default margin: 0; */
    border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
  }
}

@media (min-width: 1024px) {
  .page-header-description {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}

.page-header .icon-lock::before {
  content: "\1F512";
  font-size: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 1rem 0;
  gap: 1rem;
}
@media (min-width: 768px) {
  .sub-nav {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .sub-nav input[type="search"] {
    min-width: 300px;
  }
}

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

/***** Blocks *****/

/* Used in Homepage#categories and Community#topics */

.blocks-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.blocks-item {
    /* Set a max width so 3 fit on desktop */
    flex: 1 1 calc(33.333% - 24px); /* 24px = gap size */
    min-width: 280px; /* Ensures readable size on mobile */
    max-width: 350px; /* Prevents overly wide cards */
    box-sizing: border-box;
    padding: 0;
}

.blocks-item-title {
    font-family: "Raleway";
    font-size: clamp(1rem, calc(3vw + 0.01rem), 1.2rem);
    font-weight: bold;
}

.blocks-item-description {
    font-size: clamp(0.9rem, calc(2vw + 0.01rem), 1rem);
}

.blocks-item-link {
    display: block;
    height: 100%;
    padding: 16px; /* or your preferred spacing */
    text-decoration: none;
    color: inherit;
    border-radius: var(--card-corner-radius);
}

/* .cardv3 {
    border: var(--border-card);
    border-top: 1px solid var(--highlight);
    border-radius: var(--card-corner-radius);
    box-shadow: var(--simple-shadow);
    background: linear-gradient(0deg, var(--card-bg) 97%, var(--card-bg-light));
    position: relative;
    transition: all 0.3s ease;
  	overflow: hidden;
}

.cardv3:hover {
    background: linear-gradient(0deg, var(--card-bg), var(--card-bg-light));
    box-shadow: var(--elevated-shadow);
    transform: translate(0px, -10px);
} */

.cardv3 {
    border: var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: linear-gradient(0deg, var(--card-bg) 97%, var(--card-bg-light));
    position: relative;
    transition: all 0.3s ease;
}

.cardv3:hover {
    background: linear-gradient(0deg, var(--card-bg), var(--card-bg-light));
    box-shadow: var(--shadow-lg-accent);
    transform: translate(0px, -10px);
}

.article-list-item.cardv3 {
  	box-shadow: var(--shadow-sm);
}

.article-list-item.cardv3:hover {  
    transform: none;
  	box-shadow: var(--shadow-md);
}

/***** Home page icon block *****/

.block-hover-icon,
.block-icon {
  max-height: 150px; /* Default max-height 88px */
}

@media (min-width:400px) {
  .block-hover-icon,
  .block-icon {
    max-height: 200px; /* Default max-height 105px */
    padding: 15px 0;
  }
}

.categories .blocks-item {
  border: 1px solid #D2E2E6; /* Default border: none */
  border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius); /* Default border-radius 0px */
  img {
    filter:none;
    transition: filter 0.3s ease-in-out;
  }
}

.blocks-item:active,
.blocks-item:focus,
.blocks-item:hover {
  background-color: var(--accent-color-semilight); /* Default background-color: #A2C1ED */
  /*border: none; /* Add border border: none */
}

.block-hover-icon,
.blocks-item:active .block-icon,
.blocks-item:focus .block-icon,
.blocks-item:hover .block-icon {
  display: none;
}

.blocks-item:active .block-hover-icon,
.blocks-item:focus .block-hover-icon,
.blocks-item:hover .block-hover-icon {
  display: inline-block;
  margin: 0 auto;
}

/*Added margin to the hover state of the description block */ 
.blocks-item:hover .blocks-item-description {
   margin: 10px 20px 10px 20px;
}


.blocks-item:active *,
.blocks-item:focus *,
.blocks-item:hover * {
  color: #00142E; /* Default color: rgba(35, 34, 34, 1); */
  text-decoration: none;
}

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

.blocks-item-internal .icon-lock::before {
  content: "\1F512";
  font-size: 15px;
  bottom: 5px;
  position: relative;
}

.blocks-item-internal a {
  color: rgba(91, 103, 118, 1);
}

.blocks-item-link {
  color: rgba(35, 34, 34, 1);
  padding: 15px 9px;
  word-break: break-word;
}
@media (min-width:425px) {
  .blocks-item-link {
    color: rgba(35, 34, 34, 1);
    padding: 30px 9px;
    word-break: break-word;
  }
}

.categories .blocks-item-link {
  color: rgba(140, 219, 255, 1);
}

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

.blocks-item-title {
  margin-bottom: 0;
  margin-top: 0;
  line-height: 30px; /* Default line-height: 20px */
  font-size: 26px; /* Default font-size: 15px */
  color: #00142E; /* Default color: rgba(35, 34, 34, 1); */
  text-decoration: none; /* none*/
  text-decoration-color: white;
}
@media (min-width:425px) {
  .blocks-item-title {
    margin-bottom: 0;
    margin-top: 0;
    line-height: 30px; /* Default line-height: 30px */
    font-size: 26px; /* Default font-size: 18px */
    text-decoration: none; /* none*/
    text-decoration-color: white;
  }
}

.blocks-item-description {
  margin: 0;
  color: #00142E; /* Default color: rgba(35, 34, 34, 1); */
  text-decoration: none; /* addes style */
  text-decoration-color: white;
}

.blocks-item-description:not(:empty) {
  margin: 10px 20px 10px 20px; /* Default value margin-top: 0 */
}

@media (min-width:425px) {
  .blocks-item-description:not(:empty) {
    margin: 10px 20px 10px 20px; /*  Default margin-top: 10px */
    text-decoration: none; /* addes style */
    text-decoration-color: white;
  }
}

.custom .svg-inline--fa,
.custom > i {
  font-size: 4.5em;
  margin-bottom: 10px;
}

/***** Homepage *****/

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


/***** Added Swann Help Center pre title *****/

.pre-title-text {
  margin: 0 auto 20px;
}
.pre-title-text {
  color: #00142E;
  font-weight: 300;
  font-size: 1.3em;
  line-height: initial; 
  margin-bottom: 5px;
  cursor: var(--mouse-pointer);
}
@media (min-width: 480px) {
  .pre-title-text-text {
    display: block;
    max-width: 45%;
  }
}
@media (min-width: 580px) {
  .pre-title-text {
    font-size: 1.4em;
  }
}

/***** Welcome Message *****/

.welcome-message-text {
  margin: 0 auto 20px;
}

@media (min-width: 480px) {
  .welcome-message-text {
    display: block;
    max-width: 85%;
  }
}

.welcome-message {
  color: rgba(0, 20, 46, 1);
  font-weight: 600;
  font-size: 2.2em; /* Default font-size: 2.8em */
  line-height: initial; 
  margin-bottom: 10px;
}

@media (min-width: 580px) {
  .welcome-message {
    font-size: 3.4em; /* Default font-size: 2.7em */
  }
}

/***** Added Find Device link *****/

/* .find-device-text {
  margin: 0 auto 20px;
} */
.find-device-text a {
  color: var(--textlink);
}
.find-device-text {
  color: #3CBAF0;
  font-weight: 600;
  font-size: 1em;
  line-height: initial;
}
@media (min-width: 480px) {
  .find-device-text {
    display: block;
    max-width: 100%;
  }
}
@media (min-width: 580px) {
  .find-device-text {
    font-size: 1.2em;
  }
}

h2.find-device-text {
    margin-bottom: 0;
}


.search-full input[type="search"] {
  border-radius: var(--radius-md);
  border: 2px solid var(--border-medium);
  padding-left: 20px;
  padding-right: 20px;
  height: 45px;
  /*font-size: 1.25em;*/
  background: var(--surface-1); /* Default background-color: #0000009e */
  /*color: #C1C1C1; Default color: #fff */
  color: var(--textsharp);
  margin-bottom: 12px;
  width: 99%; /* Default width: 100% */
}

.search-full input[type="submit"] {
  font-weight: 500;
  font-size: 0px; /* Added font-size: 0px to remove SEARCH text*/ 
  text-transform: uppercase; 
  background-color: transparent; /* Default background-color: #26bbff; */
  margin-left: -40px; /* Added negative margin */
  background: transparent url(/hc/theming_assets/01HZKZFAM8T9N0GCTA31VV6AWA) 99% 50% no-repeat;
  background-position: top; 
  background-repeat: no-repeat;
}

.search.search-full::before {
  background-color: transparent;
  color: #C1C1C1; /* Default color: #fff */
  left: auto;
  right: 20px;
  font-size: 25px;
  display: none;
}

/***** Added Search Field Media Queries *****/

.search-full .button-large, input[type="submit"] {
    min-width: 29px;
    min-height: 40px;
}

@media (min-width: 480px) {
  .search-full input[type="search"] {
/*     width: 90%; /* Default width: 100% */ */
    }
}

@media (min-width: 580px) {
  .search-full input[type="search"] {
/*     width: 90%; /* Default width: 100% */ */
    }
}


.categories {
  padding-top: 25px;
}

.activities {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-top: 30px;
}

.activities .activity,
.activities .articles {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  text-align: center;
}

.activities .articles {
  margin-bottom: 30px;
}
@media (min-width:920px) {
  .activities .articles {
    margin-bottom: 60px;
  }
}

.activities .activity {
  border-top: 0;
  padding-top: 0;
  margin-top: 60;
}

.activities .activity h2,
.activities .articles h2 {
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  font-size: 28px; /* Default font-size: 22px */
  font-weight: 600; /* Default font-weight: 400 */
  color: var(--textsharp);
  display: inline-block;
  padding: 5% 10%;
  text-transform: capitalize;
  border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius); /* Added */
  margin-bottom: 30px; /* Added */
  min-width: 100%; /* Added */
}

@media (min-width: 480px) {
  .activities .activity h2,
  .activities .articles h2 {
    font-size: 42px; /* Added*/
    padding: 3% 10%;
    margin-bottom: 40px; /* Added */
    min-width: 100%; /* Added */
  }
}
@media (min-width: 580px) {
  .activities .activity h2,
  .activities .articles h2 {
    font-size: 42px; /* Added*/
    padding: 3% 10%;
    margin-bottom: 40px; /* Added */
    min-width: 100%; /* Added */
  }
}

@media (min-width: 920px) {
  .activities .activity {
    margin-top: 0;
  }
}

.activities .recent-activity-header {
  background-color: var(--accent-color-semilight); /* Default background-color: #5fcbd9 */
  background: var(--card-bg);
  box-shadow: var(--simple-shadow);
}


/***** Promoted articles *****/

li.article-list-item.article-promoted {
/*   background-color: antiquewhite; */
  background: antiquewhite;
  transition: 0.3s ease;
}

li.article-list-item.article-promoted:hover {
  background-color: ivory;
}

.promoted-articles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  list-style-type: none;
  padding-left: 18px;
}

@media (min-width: 920px) {
  .promoted-articles {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.promoted-articles-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
  text-align: left;
  border-top: 1px solid var(--border-subtle);
  
  &:first-cihld {
    border-top: none;
  }
}

@media (min-width: 768px) {
  .promoted-articles-item {
    margin: 0 20px;
  }
}

.promoted-articles-item a {
  color: rgba(91, 103, 118, 1); /* Default color: #5B6776 */
  font-size: 16px; /* Added  font-size: 18px */   
}

@media (min-width: 480px) {
.promoted-articles-item a {
  font-size: 18px; /* Added  font-size: 18px */   
	}
}

@media (min-width: 580px) {
.promoted-articles-item a {
  font-size: 18px; /* Added  font-size: 18px */   
	}
}

.activities .promoted-articles-item a {
  display: block;
  padding: 1rem;
  text-decoration: none;
}

.promoted-articles-item a:hover {
  background-color: var(--surface-2);
}

/***** Community section in homepage *****/

.community {
  text-align: center;
}

.community-image {
  min-height: 300px;
  background-image: url($community_image);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
  margin-bottom: 20px;
}

/***** Recent activity *****/

.recent-activity-header {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.recent-activity-list {
  list-style-type: disc;
  padding: 0;
  text-align: left;
  padding: 0 0 0 20px;
}

[dir="rtl"] .recent-activity-list {
  text-align: right;
  padding: 0 20px 0 0;
}

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

.recent-activity-item-parent,
.recent-activity-item-time {
  display: none;
}

.recent-activity-item-link,
.recent-activity-item-parent {
  margin: 6px 0;
  color: rgba(91, 103, 118, 1);
  width: 100%;
}

@media (min-width: 480px) {
  .recent-activity-item-link {
    font-size: 18px; /* Default font-size: 14px */
  }
}

@media (min-width: 580px) {
  .recent-activity-item-link {
    font-size: 18px; /* Default font-size: 14px */
  }
}

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

.recent-activity-item-link {
  font-size: 16px; /* Default font-size: 14px */
}

.recent-activity-item-meta {
  display: inline-block;
  margin: 0;
  float: none;
}

.recent-activity-item-comment {
  color: #8f9aa8;
  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-item-comment span::before {
  color: rgba(140, 219, 255, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 15px;
  padding-right: 3px;
  vertical-align: middle;
}

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

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

.recent-activity-controls a {
  text-decoration: underline;
}

[dir="rtl"] .recent-activity-controls {
  text-align: right;
}

/***** Category pages *****/

.category-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.category-content {
  margin-top: 20px;
}

.category-content,
.sidebar {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.diziana-category-sidebar-menu a.active,
.diziana-category-sidebar-menu a:hover {
  background-color: rgba(140, 219, 255, 1);
  color: rgba(35, 34, 34, 1);
  text-decoration: none;
}

.diziana-category-sidebar-menu a {
  word-break: break-word;
  display: block;
  border: solid 1px #3976B7; /* Default border: solid 1px rgba(140, 219, 255, 1) */
  margin-top: -1px;
  padding: 12px 20px;
  text-transform: capitalize;
}

.diziana-category-sidebar-menu a p {
  margin: 0;
}

p.list-item .list-item-icon {
  right: 40px;
  position: absolute;
}

.list-item .list-item-icon .hover-icon {
  display: none;
}

span.list-item-icon {
  display: none;
}
/* .article-content-area .collapsible-sidebar,
.section-container .collapsible-sidebar,
.category-container .collapsible-sidebar {
  max-height: 45px;
  padding: 0;
} */

.collapsible-sidebar-title.menu-title::after {
  right: 20px;
}

.collapsible-sidebar-title.menu-title {
  border: solid 1px rgba(140, 219, 255, 1);
  padding: 10px 20px;
  margin-bottom: -1px;
}
@media (min-width: 1024px) {
  .menu-title {
    display: none;
  }

  .category-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .diziana-category-sidebar-menu > li:first-child > a {
    margin-top: 1px;
  }

  .category-content {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 75%;
    flex: 1 0 75%;
    margin-top: 0;
  }

  .collapsible-sidebar.sidebar {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    padding-right: 30px;
    max-height: none;
    padding-top: 5px;
  }

  [dir="rtl"] .collapsible-sidebar.sidebar {
    padding-right: 0;
    padding-left: 30px;
  }
}

.section-tree {
  display: flex;
  flex: 0 0 30%;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  text-align: center;
}

.section-tree::after {
  /* content: ""; */
  flex: auto;
}

.section-tree .section {
/*   padding: 2rem; */
  flex: 1 1 350px;
  align-content: center;
}

/* Added hover state */
.section-tree .section:active,
.section-tree .section:focus,
.section-tree .section:hover {
  background-color: var(--accent-color-semilight); /* Default background-color: #A2C1ED */
  /*border: solid 2px #F8FCFF;  /* Add border border: none */
  transition: 0.3s ease;
/*   img {
    	filter: drop-shadow(0 10px 8px #64acd8);
  } */
}

/* Added image size and margins for Section and Category pages tiles */
.section-tree-title img {
  height: 200px;
  object-fit: contain;
  filter: none;
  transition: filter 0.3s ease-in-out;
}

.section-tree-title h2 {
  color: var(--textsharp); /* Default color: rgba(91, 103, 118, 1); */ 
  font-size: 26px;
  line-height: 30px;
  margin-bottom: unset;
  margin-top: 1rem;
}

.section-tree-title a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
   color: var(--textsharp); /* Default color: rgba(91, 103, 118, 1); */
   text-decoration: none;
}

.section-list-item-name {
  color: #00142E; /* Default color: rgba(91, 103, 118, 1); */ 
  text-align: center;
  font-size: 26px;
  line-height: 30px;
  padding: 3% 0 3%;
}

.section-list-item-name a {
   color: #00142E; /* Default color: rgba(91, 103, 118, 1); */ 
}

.section-tree .icon-lock::before {
  vertical-align: baseline;
}

.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list {

  list-style-type: none;
/*   padding: 0; */
  padding-block: 1rem;
  text-align: left;
  column-gap: 0.5rem;
  row-gap: 0;

  /*
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  gap: 20px; 
  justify-content: space-between;
  */
}

@media (min-width:768px) {
  .article-list {
    column-count: 2;
  }
}

/*Added Media Queries */
/*
@media (min-width:768px) {
  .article-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; 
  }
}

/* Remove flex item  */
/*
.article-list::after {
  content: "";
  flex: auto;
}
*/

[dir="rtl"] .article-list {
  text-align: right;
  padding: 0 20px 0 0;
}

.article-list-item {

  -webkit-box-flex: 1;
  -ms-flex: 1 0 420px;
  flex: 1 0 420px;
  max-width: 100%;
  /*padding: 5px 30px 5px 0;*/
  margin-bottom: 0.5rem;
  border-radius: 10px;
  align-content: center;
  text-align: center;

  /*
  -webkit-box-flex: initial;
  -ms-flex: initial;
  flex: initial;
  margin-bottom: 20px;
  border-radius: 20px;
  border: solid 2px #D2E2E6;  
*/
}

/* Added hover state */
/*
.article-list .article-list-item:active,
.article-list .article-list-item:focus,
.article-list .article-list-item:hover {
  background-color: #F8FCFF;
  border: solid 2px #F8FCFF; 
}
*/

[dir="rtl"] .article-list-item {
  padding: 5px 0 5px 30px;
}

@media (min-width:768px) {
  .article-list-item:first-child {
/*     margin-top: 0px; */
  }
}

.icon-star {
  vertical-align: bottom;
}

.icon-star::before {
  color: rgba(140, 219, 255, 1);
}

.article-list-item a {
   	color: #00142E; /* Default color: rgba(91, 103, 118, 1); */
  	margin: 0px;
   	text-decoration: none;
  	padding: 10px;
/*   	font-weight: 500; */
}

.article-list-item a:hover {
    img {
/*     filter: drop-shadow(0 10px 8px #64acd8); */
      filter: drop-shadow(0 10px 8px rgba(var(--shadow-color), 0.32));
    transform: scale(1.1);
  }
}

.article-list-item h2 {
  color: #00142E; /* Default color: rgba(91, 103, 118, 1); */ 
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 10%;
}

.article-list-item img {
/*   max-width: 60%;
  height: auto;
  margin: 5%; */
  max-height: 250px;
  filter: none;
  transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.article-list-link {
  /*position: absolute;*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  text-decoration: none; /* Optional: Remove underline from link */
  color: inherit; /* Optional: Inherit color from parent */
}


/***** Section pages *****/

.section-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 10px;
}

.section .article-list-item {
  max-width: 100%;
}

.section-content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .section-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .section-content {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 75%;
    flex: 1 0 75%;
    margin-top: 0;
  }
}

.section-subscribe .dropdown-toggle::after {
  display: none;
}

/***** Subsection Code *****/

ul.section-list {
  display: flex;
  flex: 0 0 30%;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;/*space-between;*/
  text-align: center;
  
}

/*ul.section-list::after {
  content: "";
  flex: auto;
}*/

[dir="rtl"] ul.section-list {
  padding-right: 18px;
  padding-left: 0;
}

.section-list .section-list-item {
  flex: 1 1 350px;
  align-content: center;
  img {
    filter:none;
    transition: filter 0.3s ease-in-out;
  }
}

/* Added hover state */
.section-list .section-list-item:active,
.section-list .section-list-item:focus,
.section-list .section-list-item:hover {
  background-color: var(--accent-color-semilight); /* Default background-color: #A2C1ED */
/*  border: solid 2px #F8FCFF;  /* Add border border: none */
/*   img {
    	filter: drop-shadow(0 10px 8px #64acd8);
  } */
}

[dir="rtl"] .section-list .section-list-item {
  padding: 5px 0 5px 30px;
}

[dir="rtl"] .section-list-item i {
  margin-left: 5px;
  margin-right: 0;
}

/* Added link style */
.section-list-item a {
   color: var(--textsharp); /* Default color: rgba(91, 103, 118, 1); */
  text-decoration: none;
}

li.section-list-item h3 {
  margin-bottom: unset;
  text-shadow: rgba(226,241,250,0.9) 0px 0px 5px;
}

/* Added title style */
.section-list-item h2 {
  color: #00142E; /* Default color: rgba(91, 103, 118, 1); */ 
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 10%;
}

/* Added image style */
.section-list-item img {
  /* max-width: 70%;*/
  max-height: 45%;
  margin: 5%;
}

@media (min-width:768px) {
  .section-list-item img {
    height: 70;
    margin: 5%;
  }
}
/* @media (min-width:768px) {
  .section-list .section-list-item {
    padding: 10px 40px 0 0;
  }
  [dir="rtl"] .section-list .section-list-item {
    padding: 10px 0 0 40px;
  }
} */

.section-list-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem;
  color: var(--textsharp);
  /* display: inline-block; */
/*   max-width: 90%;
  vertical-align: top; */
}

.section-list-item i {
  margin-right: 5px;
  margin-left: 0;
  font-size: 16px;
}


/* Subsection End */

.collapsible-sidebar .section-articles.collapsible-sidebar {
  border-top: 2px solid rgba(140, 219, 255, 1);
  padding-top: 0;
  margin-top: 0;
}

.article-inner-content-area {
  display: flex;
  flex: 1 0 80%;
  max-width: 100%;
  justify-content: space-between;
}

.comment-icon {
  margin-left: 10px;
}

.section-articles .sidenav-title {
  margin-bottom: 0;
  border: 1px solid rgba(140, 219, 255, 1);
  padding: 10px 18px;
}

.section-articles ul {
  border: 1px solid rgba(140, 219, 255, 1);
  border-top: 0;
}

@media (min-width: 1024px) {
  .section-articles {
    border-bottom: none;
    border-top: none;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    padding: 0;
  }

  [dir="rtl"] .section-articles {
    margin-left: 0;
    margin-right: 35px;
  }

  .section-articles ul {
    border: none;
  }

  .section-articles .sidenav-title {
    border: none;
    padding: 0 0 10px;
  }
}

/*****Artile in Section ******/

.article-content-block {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: coumn;
  flex-direction: column;
  margin-top: 10px;
}

@media (min-width:1024px) {
  .article-content-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex: 1 0 75%;
    min-width: 75%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    margin-top: 0;
  }
}

/***** Article *****/

.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 75%;
    flex: 1 0 37%;
    min-width: 475px;
    margin-top: 0;
  }
}

.article-content-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 800px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .article-content-area {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.article-header {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 2em;
}

.article-header > h1 {
  color: var(--textsharp);
}

@media (min-width: 768px) {
  .article-header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
/*    margin-top: 0;
    margin-bottom: 0; */
  }
    .article-header h1 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
/*    margin-top: 0;
    margin-bottom: 0; */
  }
}

.follow_nowrap {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.article-content-margin {
  margin: 0 0 40px;
}

.article-author {
  margin-bottom: 20px;
}

.article-title {
  font-size: 25px;
}
@media (min-width: 768px) {
  .article-title {
    font-size: 32px;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    /* Take entire row */
  }
}

.article-title .icon-lock::before {
  content: "\1F512";
  font-size: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

/* Added article page title style */
/* .article-page-title {
  font-size: 25px;
  line-height: 32px;
} */

@media (min-width: 768px) {
.article-page-title {
/*     font-size: 40px;
  	line-height: 40px; */
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    /* Take entire row */
  }
}

.article-page-title .icon-lock::before {
  content: "\1F512";
  font-size: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.article [role="button"] {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
}
@media (min-width: 768px) {
  .article [role="button"] {
    width: auto;
    margin-left: 10px;
  }
}

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

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

/* .article-body ol,
.article-body ul {
  padding-left: clamp(10px, calc(2vw + 1px), 20px);
  list-style-position: outside;
  margin: 20px 5px 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;
}

a.link {
  background-image: linear-gradient(#ffffff00 50%, #5794cd 50%);
  background-size: auto 185%;
  transition: background .3s ease-in-out;
  text-decoration: none;
}

a.link:hover {
  background-position-y: 100%;
  color: white;
  font-weight: 500;
} */

.article-body h2 {
  margin-top: 2rem !important;
}

.article-body a[target='_blank']:not(:has(img)):after {
  display: inline-flex;
  margin: 0px 4px 0px 4px;
  font-family: 'Font Awesome 6 Free', sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
  font-variant: normal;
  line-height: 1;
  content: '\f35d';
  -webkit-font-smoothing: antialiased;
  align-self: baseline;
  text-rendering: auto;
}


/*.article-body a:visited {
  color: #214469;
}*/

.article-body td {
  border: solid 1px transparent;
  padding: 6px 12px;
}

.table-responsive {
  max-width: 100%;
  overflow: auto;
}

.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
/* Original blockquote

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

/* Custom blockquote */
/* Blue blockquote */
.article-body blockquote {
  transition: 0.3s box-shadow ease;
  display: block;
  background: #d2ecfa;
  padding: 15px 20px 15px 50px;
  margin: 15px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  border-left: 15px solid #3976B7; /* #a9c8e6; Faded blue */
  border-right: 2px solid #3976B7;
  /*-moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;*/
  /*box-shadow: 2px 2px 15px #ccc;*/
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.article-body blockquote:hover {
  	transition: 0.3s box-shadow ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.23), 0 8px 8px rgba(0, 0, 0, 0.19);
}

.article-body blockquote::before {
  content: "\201C"; /* Unicode for Left Double Quote */
  font-size: 60px;
  font-weight: bold;
  color: #3976B740; /* Blue blockquote icon color */
  position: absolute;
  left: 10px;
  top: -5px; /* Adjust top to align with text */
}

.article-body blockquote::after {
  content: "";
}

.article-body * {
  text-wrap: pretty;
}

.article-body blockquote p {
  margin: 0; /* Reset paragraph margin */
  text-wrap: pretty;
}

.article-body blockquote a {
  text-decoration: none;
  cursor: var(--mouse-pointer);
  padding-inline: 3px;
  color: #c76c0c;
}

.article-body blockquote em {
  font-style: italic;
}

/* Yellow blockquote (DYK) */
.article-body blockquote.dyk {
  background: #fff8e1; /* Light yellow background */
  border-left-color: #e6c800; /* Yellow border */ /* #f3d078; Faded yellow */
  border-right-color: #e6c800; /* Yellow border */
}

.article-body blockquote.dyk .fadedhighlight {
  background-color: #e2f1fa;
}

.article-body blockquote.dyk::before {
  content: "\1F4A1"; /* Unicode for lightbulb icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 32px;
  color: #e6c80040; /* Yellow color */
  top: 10px; /* Adjust top to align with text */
}

/* Red blockquote (Beware) */
.article-body blockquote.beware {
  background: #f8d7da; /* Light red background */
  border-left-color: #dc3545; /* Red border */ /* #f2928c; Faded red */
  border-right-color: #dc3545; /* Red border */
}

.article-body blockquote.beware::before {
  content: "\26A0"; /* Unicode for exclamation-triangle icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 32px;
  color: #dc354540; /* Red color */
  top: 10px; /* Adjust top to align with text */
}
/* Custom blockquote ^ */

/* Custom buttons to present troubleshooting steps ^ */
#tsgsteps .step {
  	text-wrap: pretty;
    display: none;
    position: relative; /* To position buttons at the bottom-left */
    padding: 20px;
  	padding-bottom: 60px; /* Add padding to accommodate buttons */
    border: 1px solid #ccc;
		border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
    margin-bottom: 10px;
  	transition: 0.3s box-shadow ease;
  	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#tsgsteps .step p:first-child {
  margin-top: 0;
}

.article-body .button {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5px 40px;
    background-color: #3976B7;
    color: white;
    cursor: var(--mouse-pointer);
  	border: 1px solid #ccc;
		border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
  	transition: 0.3s box-shadow ease; /* Added box-shadow transition */
  	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.article-body .button.next {
    left: auto;
    right: 10px;
}

.article-body .button.back,
.article-body .button.prev {
    background-color: transparent;
  	color: #3976B7;
  	text-decoration: underline;
}

.article-body .button.back::before,
.article-body .button.prev::before {
    content: '<< ';
}

.article-body .button.back:hover,
.article-body .button.prev:hover {
    background-color: #abb6bb;
  	color: white;
}

.article-body .button.next::after {
    content: ' >>';
}

.article-body .button:hover {
    background-color: #0056b3;
  	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.23), 0 8px 8px rgba(0, 0, 0, 0.19);
}

#startButton {
    padding: 10px 20px;
    background-color: #59ad6c;
  	border-radius: 4px;
    color: white;
    border: none;
    cursor: var(--mouse-pointer);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#startButton:hover {
    background-color: #218838;
}

/* Custom buttons to present troubleshooting steps ^ */

/* Style to help the article look good on both computer and phone */
.step-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
/*     border-bottom: 1px solid #ddd; */
}

.text-container {
    flex: 1;
    margin-bottom: 20px;
}

.text-container p:first-child {
  	margin-top: 0px;
}

.image-container {
    flex: 1;
    text-align: center;
  	padding: 5px;
}

.image-container img {
    max-width: 100%;
    height: auto;
}

@media(min-width: 1024px) {
    .step-container {
        flex-direction: row;
    }
    .text-container, .image-container {
        margin-bottom: 0;
    }
    .text-container {
        margin-right: 20px;
    }
}
/* Style to help the article look good on both computer and phone ^ */

.article-body .headerTopic {
  background-color: #e2f1fa;
  padding: 10px;
  border-radius: 10px;
  /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);*/
}

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

.article-body #errormessage {
  margin-left: 10px;
  color: red;
}

.article-body .image-wrap {
    float: left; /* or float: right; */
    margin: 10px;
  	padding-right: 10px;
}

/* Footnote */
/* Style for the glowing asterisk */
.article-body .glowing-asterisk {
    position: relative;
    cursor: var(--mouse-pointer);
    color: inherit; /* Use the default font color */
    animation: glow 1s infinite alternate;
}

/* Keyframes for the glowing effect */
@keyframes glow {
    0% {
        text-shadow: 0 0 1px #8cccfa, 0 0 1.5px #8cccfa, 0 0 2px #8cccfa, 0 0 2.5px #8cccfa, 0 0 3px #8cccfa;
    }
    100% {
        text-shadow: 0 0 3px #8cccfa, 0 0 3.5px #8cccfa, 0 0 4px #8cccfa, 0 0 4.5px #8cccfa, 0 0 5px #8cccfa;
    }
}

/* Tooltip styles */
.article-body .glowing-asterisk::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: 0; /* Initially set to 0, will be adjusted by JavaScript */
    background-color: #333;
    color: #fff;
    padding: 8px 12px; /* Increased padding for better readability */
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    font-size: 12px;
    z-index: 1;
    text-shadow: none; /* Ensure the tooltip text does not glow */
    white-space: normal; /* Allow the text to wrap */
    min-width: 300px; /* Set minimum width for the tooltip */
    max-width: 600px; /* Set maximum width for the tooltip */
    overflow: hidden;
}

/* Tooltip arrow */
.article-body .glowing-asterisk::after::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
}

/* Show the tooltip on hover */
.article-body .glowing-asterisk:hover::after,
.article-body .glowing-asterisk.active::after {
    opacity: 1;
}

/* Footnote ^ */

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

.article-footer {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-block: 20px;
}

.article-comment-count {
  color: #8f9aa8;
  font-weight: 300;
}

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

.article-comment-count .icon-comments {
  color: rgba(140, 219, 255, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.article-sidebar .collapsible-sidebar {
  padding: 10px 0 0;
}

.article-sidebar {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
  display: none;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    height: auto;
    padding: 0;
  	display: block;
  }
}

.article-relatives {
  border-top: 1px solid var(--border-subtle);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.article-relatives > * {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  margin-right: 0;
}

.article-relatives > *:last-child {
  margin: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    margin-right: 20px;
    margin-left: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 47%;
    flex: 1 0 47%;
  }

  [dir="rtl"] .article-relatives > * {
    margin-right: 0;
    margin-left: 20px;
  }
}

.article-relatives .recent-articles a,
.article-relatives .related-articles a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

.article-votes {
  border-top: 1px solid var(--border-subtle);
  color: var(--textmuted);
  padding: 10px 0;
  text-align: center;
}

.article-vote {
  background: transparent;
  border: 1px solid rgba(140, 219, 255, 1);
  color: rgba(140, 219, 255, 1);
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}

.article-vote::before {
  font-size: 8px;
  margin-right: 10px;
}

[dir="rtl"] .article-vote::before {
  margin-right: 0;
  margin-left: 10px;
}

.article-vote::after {
  content: attr(title);
  /* Yes/No label*/
}

.article-vote:active,
.article-vote:focus {
  background-color: transparent;
  color: rgba(140, 219, 255, 1);
}

.article-vote:hover {
  background-color: rgba(140, 219, 255, 1);
}

.article-vote:hover::after,
.article-vote:hover::before,
.article-vote[aria-selected="true"]::after,
.article-vote[aria-selected="true"]::before {
  color: rgba(35, 34, 34, 1);
}

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

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

.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
  color: var(--textmuted);
}

/* Modal styles - Used in Feedback form */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Adjust width as needed */
    max-width: 100%;
    max-height: 90%; /* Ensure modal doesn't exceed 90% of viewport height */
    overflow-y: auto; /* Enable vertical scroll if content is too tall */
    position: relative;
    animation: slideIn 0.3s ease-out;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Optional for better appearance */
    border-radius: 10px; /* Optional for rounded corners */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: var(--mouse-pointer);
}

@media (min-width: 1024px){
  .modal-content {
    width: 60%;
  }
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.loading-container.fade-out {
  opacity: 0;
}

.loading-spinner {
  width: 100px;
  height: 100px;
  background-size: cover;
  animation: spinnerAnimation 1s steps(1) infinite;
}

@keyframes spinnerAnimation {
  0%, 19.99% {
    background-image: url(/hc/theming_assets/01JCFHJ33HTD5NRB1NVXTKDG03);
  }
  20%, 39.99% {
    background-image: url(/hc/theming_assets/01JCFHJ0RCHJ3GV32RXHAGP45X);
  }
  40%, 59.99% {
    background-image: url(/hc/theming_assets/01JCFHHY8Z6J1KFHPD6C5VZ2CV);
  }
  60%, 79.99% {
    background-image: url(/hc/theming_assets/01JCFHHW2JF4HKTWZWRVTMSNF4);
  }
  80%, 100% {
    background-image: url(/hc/theming_assets/01JCFHHRZRDJQ74E1T1F6TRDW7);
  }
}


/* Use in Feedback form ^ */


.article-return-to-top {
  border-top: 1px solid #ddd;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}

.article-return-to-top a {
  color: rgba(91, 103, 118, 1);
  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-arrow-up::before {
  font-size: 16px;
  margin-left: 5px;
}

[dir="rtl"] .article-return-to-top .icon-arrow-up::before {
  margin-right: 10px;
}

.article-unsubscribe {
  background-color: rgba(140, 219, 255, 1);
  color: rgba(35, 34, 34, 1);
  text-decoration: none;
}

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

.sidenav-title {
  color: var(--textsharp);
  font-size: 15px;
  position: relative;
  padding-left: 10px;
}

.sidenav-item,
.related-articles li,
.recent-articles li {
/*   color: rgba(91, 103, 118, 1); */
  color: var(--textmuted);
  display: block;
}
@media (min-width: 1024px) {
  .sidenav-title {
    padding-left: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  }
}

a.sidenav-item {
  padding: 10px;
}

.sidenav-item.current-article,
.sidenav-item:hover,
.related-articles li:hover,
.recent-articles li:hover {
  background-color: var(--surface-2); /* Default background-color: rgba(140, 219, 255, 1) */
/*   color: rgba(35, 34, 34, 1); */
  color: var(--textsharp);
  text-decoration: none;
}

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

/***** Attachments *****/

/* Styles attachments inside posts, articles and comments */

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

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

.attachments .attachment-item::before {
  color: rgba(91, 103, 118, 1);
  content: "\1F4CE";
  font-size: 15px;
  left: 0;
  position: absolute;
  top: 5px;
}

[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}

[dir="rtl"] .attachments .attachment-item::before {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #8f9aa8;
}

/***** Social share links *****/

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

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

.share a {
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  width: 25px;
  	opacity: 0.5;
    font-family: "Font Awesome 6 Brands" !important;
}

.share a::before {
  color: var(--textmuted);
  display: block;
  font-size: 1.5rem;
  text-align: center;
  width: 100%;
    font-family: "Font Awesome 6 Brands" !important;
}

.share a:hover,
.share a:hover::before {
  color: var(--textnormal);
  text-decoration: none;
}

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

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

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

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

/***** Comments *****/

/* Styles comments inside articles, posts and requests */

.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.comment-heading {
  margin-bottom: 5px;
  margin-top: 0;
}

.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}

.comment-overview p {
  margin-top: 0;
}

.comment-callout {
  color: #8f9aa8;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}

.comment-callout a {
  color: rgba(140, 219, 255, 1);
}

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

.comment-sorter a {
  color: #8f9aa8;
  font-size: 13px;
  text-decoration: none;
}

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

.comment-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.comment-wrapper.comment-official {
  border: 1px solid rgba(140, 219, 255, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}

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

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

.comment-author {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
  align-items: center;
}
@media (min-width: 768px) {
  .comment-author {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

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

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

.comment-meta {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.comment-labels {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    -ms-flex-preferred-size: auto;
    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: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}

.comment-container {
  width: 100%;
}

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

[dir="rtl"] .comment-form-controls {
  text-align: left;
}

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

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

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

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

.comment-ccs {
  display: none;
}

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

.comment-attachments {
  margin-top: 10px;
}

.comment-attachments a {
  color: rgba(140, 219, 255, 1);
}

.comment-body {
/*   -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  font-family: 'Barlow', sans-serif;
  line-height: 1.6; */
  line-height: 1.5;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  color: var(--textnormal);
}

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

.post-body a,
.comment-body a {
  color: var(--textlink);
  text-decoration: none;
  background: linear-gradient(transparent 90%, var(--textlink) 90%);
}

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

.comment-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

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

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

/***** Vote *****/

/* Used in article comments, post comments and post */

.vote {
  display: inline-block;
  text-align: center;
  width: 35px;
}

.vote a {
  outline: none;
}

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

.vote-sum {
  color: #8f9aa8;
  display: block;
  margin: 3px 0;
}

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

.vote-down:hover::before,
.vote-up:hover::before {
  color: rgba(140, 219, 255, 1);
}

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

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

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

.vote-voted::before {
  color: rgba(140, 219, 255, 1);
}

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

/***** Actions *****/

/* Styles admin and en user actions(edit, delete, change status) in comments and posts */

.actions {
  text-align: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari*/
}

.actions .dropdown-toggle {
  font-size: 0;
  margin: 15px 0;
}

.actions .dropdown-toggle:active::before,
.actions .dropdown-toggle:focus::before,
.actions .dropdown-toggle:hover::before {
  background-color: #f7f7f7;
}

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

/***** Community *****/

.community-hero {
  background-image: url(/hc/theming_assets/01HZKZGRDTE2W8HFX9M361H3G3);
}

/*
.community-hero-bg-image {
  background-image: url(/hc/theming_assets/01HZKZGRDTE2W8HFX9M361H3G3);
} */

.community-hero-bg-color {
  background-color: rgba(236, 246, 255, 1);
}

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

.community-relatives {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-top: 30px;
  padding-bottom: 50px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-bottom: solid 1px #ddd;
}

.community-featured-posts {
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .community-relatives {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .community-featured-posts {
    margin-bottom: 0;
    padding: 0 30px 0 0;
  }

  [dir="rtl"] .community-featured-posts {
    padding: 0 0 0 30px;
  }
}

.community-activity,
.community-featured-posts {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
}

.community-header h4 {
  margin-bottom: 0;
}

.community-header {
  margin-bottom: 0;
  padding-bottom: 15px;
}

.page-header.community-header {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1rem;
  margin: 0 0 1rem 0;
}

.page-header.community-header .dropdown {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
@media (min-width:420px) {
  .page-header.community-header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .page-header.community-header .dropdown {
    margin-bottom: 0;
  }
}

/* Community topics grid */

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

.topics .blocks-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 350px;
  flex: 1 0 350px;
}
@media (min-width: 768px) {
  .topics .blocks-list {
    margin: 0 -15px;
  }

  .topics .blocks-item {
    margin: 0 15px 30px;
  }
}

.topics .blocks-item-link {
  color: rgba(140, 219, 255, 1);
  padding: 20px 30px;
}

.topics-item .meta-group {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */

.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}

.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

.page-header h1.ctopic-head {
/*   display: flex; */
  align-items: center;
  margin-bottom: 0;
}

.page-header.cpage-head {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  padding: 1rem;
}

/* Topic, post and user follow button */

.community-follow {
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}

.community-follow .dropdown {
  width: 100%;
}

.community-follow [role="button"] {
  line-height: 30px;
  padding: 0 40px 0 15px;
  position: relative;
  width: auto;
}
@media (min-width: 768px) {
  .community-follow [role="button"] {
    padding: 0 10px 0 15px;
  }
}

.community-follow [role="button"]:hover {
  background-color: rgba(140, 219, 255, 1);
}

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

.community-follow [role="button"][aria-selected="true"] {
  background-color: rgba(140, 219, 255, 1);
  color: rgba(35, 34, 34, 1);
}

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

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

.community-follow [role="button"]::after {
  border-left: 1px solid rgba(140, 219, 255, 1);
  content: attr(data-follower-count);
  color: rgba(140, 219, 255, 1);
  display: inline-block;
  font-family: 'Barlow', sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}

[dir="rtl"] .community-follow [role="button"]::after {
  border-right: 0;
  margin: 0;
  padding: 0 0 0 10px;
}
@media (min-width: 768px) {
  .community-follow [role="button"]::after {
    position: static;
  }

  [dir="rtl"] .community-follow [role="button"]::after {
    border-left: 0;
    border-right: 1px solid rgba(35, 34, 34, 1);
    margin: 0 10px 0 0;
    padding: 0 10px 0 0;
  }

  [dir="rtl"] .community-follow [role="button"]:hover::after {
    border-right: 1px solid rgba(35, 34, 34, 1);
  }
}

/***** Striped list *****/

/* Used in community posts list and requests list */

.striped-list {
  padding: 0;
}

.striped-list-item {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.striped-list-info {
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
}

.striped-list-title {
  color: #3976B7;
  margin-bottom: 10px;
  margin-right: 5px;
}

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

.striped-list-title:visited {
  color: #214469;
}

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

.striped-list-count {
  color: #8f9aa8;
  font-size: 13px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}

.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}

.striped-list-count-item:last-child::after {
  display: none;
}

.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(91, 103, 118, 1);
    display: block;
  }
}

/***** Status labels *****/

/* Styles labels used in posts, articles and requests */

.status-label {
  background-color: #1eb848;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}

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

.status-label-featured,
.status-label-official,
.status-label-pinned {
  background-color: rgba(140, 219, 255, 1);
}

.status-label-official {
  border-radius: 0 0 0 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}

[dir="rtl"] .status-label-official {
  left: 0;
  right: auto;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }

  [dir="rtl"] .status-label-official {
    left: 30px;
  }
}

.status-label-not-planned,
.status-label-pending {
  background-color: #eee;
  color: #8f9aa8;
}

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

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

.status-label-closed {
  background-color: #ddd;
}

.status-label-solved {
  background-color: #999;
}

.status-label-new {
  background-color: #ffd12a;
}

.status-label-hold {
  background-color: #000;
}

.status-label-answered,
.status-label-closed,
.status-label-hold,
.status-label-new,
.status-label-open,
.status-label-solved {
  text-transform: lowercase;
}

/***** Post *****/

/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/

.post {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 100%;
  margin-bottom: 10px;
}

.post-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.post-header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .post-header {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.post-header .status-label {
  vertical-align: super;
}

.post-title {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
    padding-left: 0;
  }

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

.post-title h1 {
/*   display: inline;
  vertical-align: middle; */
  font-family: 'Rambla', sans-serif;
  font-size: clamp(2rem, calc(3vw + 0.5rem), 3rem);
  line-height: 1.1;
  color: var(--textsharp);
  margin-bottom: 0.25rem;
}

.post-author {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.post-avatar {
  margin-bottom: 12px;
}
@media (min-width:768px) {
  .post-avatar {
    margin-bottom: 10px;
  }
}

.post-content {
/*   font-family: 'Barlow', sans-serif;
  line-height: 1.6;
  word-break: break-word; */
  line-height: 1.5;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  color: var(--textnormal);
}

.post-info-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 40px;
}

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

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

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

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

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

.post-body 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: #214469;
}

.post-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}

.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}

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

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

.post-comment-count {
  color: #8f9aa8;
  font-weight: 300;
}

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

.post-comment-count .icon-comments {
  color: rgba(140, 219, 255, 1);
  content: "\1F4AC";
  display: inline-block;
  font-size: 18px;
  padding: 5px;
}

.post-sidebar {
  border-top: 1px solid #ddd;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}

.post-sidebar h5 {
  font-weight: 600;
}
@media (min-width: 1024px) {
  .post-sidebar h5 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
}

.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/* Navigation element that collapses on mobile */

.collapsible-nav {
  border-top: 1px solid #ededed;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-height: 45px;
  overflow: hidden;
  font-size: 14px;
}
@media (min-width: 768px) {
  .collapsible-nav {
    border: 0;
    border-bottom: solid 1px #ededed;
    height: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    max-height: none;
  }
}

.collapsible-nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
}
@media (min-width: 768px) {
  .collapsible-nav.r-List ul.collapsible-nav-list {
    padding: 0;
  }

  .collapsible-nav-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 0 5%;
  }
}
@media (min-width:1160px) {
  .collapsible-nav-list {
    padding: 0;
  }
}

.collapsible-nav-list li {
  color: rgba(91, 103, 118, 1);
  line-height: 45px;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.collapsible-nav-list li a {
  color: rgba(91, 103, 118, 1);
  display: block;
  border: solid 1px #ededed;
  margin-top: -1px;
  padding: 0 15px;
}
@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;
    border: none;
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ededed;
  }

  .collapsible-nav-list li:hover a {
    padding: 15px 0 11px;
    text-decoration: none;
  }
}

.collapsible-nav-list li[aria-selected="true"] {
  background-color: rgba(140, 219, 255, 1);
  color: rgba(35, 34, 34, 1);
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  padding: 0 15px;
  position: relative;
  font-weight: 500;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"] {
    background-color: transparent;
    border-bottom: 4px solid rgba(140, 219, 255, 1);
    color: rgba(91, 103, 118, 1);
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    padding: 15px 0 11px;
  }
}

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

.collapsible-nav-list li[aria-selected="true"]::after {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "\25BE";
  position: absolute;
  right: 15px;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"]::after {
    display: none;
  }
}

[dir="rtl"] .collapsible-nav-list li[aria-selected="true"]::after {
  left: 15px;
  right: auto;
}

.collapsible-nav[aria-expanded="true"] {
  max-height: none;
}

.collapsible-nav[aria-expanded="true"] li[aria-selected="true"]::after {
  content: "\2715";
}

/* Sidebar navigation that collapses on mobile */

.collapsible-sidebar {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
/*   overflow: hidden; */
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
    margin-left: 30px;
  }
}

.collapsible-sidebar[aria-expanded="true"] {
/*   max-height: none; */
  .collapsible-sidebar-title.sidenav-title {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
  content: "\2715";
}
@media (min-width: 1024px) {
  .collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-title::after {
    display: none;
  }
}

.collapsible-sidebar-title {
  margin-top: 0;
}

.collapsible-sidebar-title::after {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "\25BE";
  position: absolute;
  right: 10px;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-title::after {
    display: none;
  }
}

[dir="rtl"] .collapsible-sidebar-title::after {
  left: 10px;
  right: auto;
}

/***** My activities *****/

.my-activities-nav {
  border: 0;
  margin-bottom: 20px;
  margin-top: 20px;
}

.my-activities-header > h1 {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-header > h1 {
    display: block;
  }

  .my-activities-nav {
    margin-top: 0;
  }
}

.my-activities-sub-nav {
  background-color: transparent;
  margin-bottom: 30px;
}

.my-activities-nav.collapsible-nav.r-list {
  padding: 0 5%;
}
@media (min-width: 768px) {
  .my-activities-sub-nav li:hover {
    border-bottom: 4px solid #ededed;
  }

  .my-activities-nav.collapsible-nav.r-list {
    padding: 0;
  }
}

.my-activities-sub-nav li[aria-selected="true"] {
  border-color: rgba(140, 219, 255, 1);
}

.my-activities-table .striped-list-title {
  /* My activities tables */
  display: block;
  margin-bottom: 0;
  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 table */

.requests-search {
  width: 100%;
}

.requests-table-toolbar {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.requests-table-toolbar .search {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
}

.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}

.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }

  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}

.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}

.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}

.requests-table-toolbar .organization-subscribe,
.requests-table-toolbar .organization-unsubscribe {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe,
  .requests-table-toolbar .organization-unsubscribe {
    margin-left: 10px;
  }

  [dir="rtl"] .requests-table-toolbar .organization-subscribe,
  [dir="rtl"] .requests-table-toolbar .organization-unsubscribe {
    margin: 0 10px 0 0;
  }
}

.requests-table-toolbar .organization-unsubscribe {
  background-color: rgba(140, 219, 255, 1);
  color: rgba(35, 34, 34, 1);
}

.requests-table-toolbar+.requests-search-info {
  margin-top: 15px;
}

.requests-table-toolbar+.requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}

.requests-table-toolbar+.requests-search-info+.requests {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .requests-table-toolbar+.requests {
    margin-top: 40px;
  }
}

.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}

.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}

.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}

.requests .requests-table .requests-link {
  position: relative;
}

.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */

.subscriptions-unsubscribe a {
  background: rgba(140, 219, 255, 1);
  border-radius: 4px;
  color: rgba(35, 34, 34, 1);
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
@media (min-width: 768px) {
  .subscriptions-unsubscribe a {
    width: auto;
  }
}

.subscriptions-unsubscribe a:hover {
  background-color: #26bbff;
  text-decoration: none;
}

.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}

.subscriptions-table td:first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.subscriptions-table .user-avatar {
  margin-right: 10px;
}

.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #8f9aa8;
  font-size: 13px;
  font-weight: 300;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #8f9aa8;
}

/***** Request *****/

.request-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

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

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

.request-main {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  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 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66%;
    flex: 0 0 66%;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    min-width: 0;
  }
}

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

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

.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  cursor: var(--mouse-pointer);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 15px;
  width: 100%;
}

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

.request-main .comment-show-container-content {
  -ms-flex-item-align: center;
  align-self: center;
  color: #8f9aa8;
  margin-left: 10px;
}

.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(140, 219, 255, 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(140, 219, 255, 1);
}

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

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

.request-sidebar {
  border: 1px solid #ededed;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  padding: 10px 0 10px 10px;
  margin-bottom: 5px;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}

.request-sidebar h5 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
  margin-bottom: 11px;
}

.request-details {
  border-bottom: 1px solid #ededed;
  border-top: solid 1px #ededed;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
@media (min-width: 1024px) {
  .request-details {
    border-top: none;
  }

  .request-sidebar h5 {
    display: none;
  }
}

.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: #8f9aa8;
  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 *****/

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

.pagination * {
  display: inline-block;
}

.pagination li {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  align-content: center;
/*   height: 30px;
  float: left;
  margin-left: 5px;
  width: 30px; */
}

[dir="rtl"] .pagination li {
  float: right;
}

.pagination li:hover:not(.pagination-current) {
  background: var(--surface-3);
}

.pagination li:hover:not(.pagination-current) a,
.pagination li:hover:not(.pagination-current) span {
/*   color: rgba(91, 103, 118, 1); */
  color: var(--textnormal);
  text-decoration: none;
}

.pagination a,
.pagination span {
  font-size: 13px;
  color: #8f9aa8;
  padding: 5px 12px;
}

.pagination-current {
/*   background-color: rgba(140, 219, 255, 1); */
  background: var(--surface-4);
  box-shadow: var(--shadow-sm-accent);
}

.pagination-current a,
.pagination-current span {
  color: rgba(35, 34, 34, 1);
}

.pagination-first {
  border-radius: 3px 0 0 3px;
}

[dir="rtl"] .pagination-first {
  border-radius: 0 3px 3px 0;
}

.pagination-last {
  border-radius: 0 3px 3px 0;
}

[dir="rtl"] .pagination-last {
  border-radius: 3px 0 0 3px;
}

/***** Metadata *****/

.meta-group {
  display: block;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #8f9aa8;
  font-size: 13px;
}

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

/***** Icons *****/

.actions .dropdown-toggle::before,
.article-vote::before,
.attachments .attachment-item::before,
.collapsible-nav-list li[aria-selected="true"]::after,
.collapsible-sidebar-title::after,
.icon,
.recent-activity-item-comment span::before,
.search-result-meta-count::before,
.search-result-votes::before,
.search::before,
.share a::before,
.vote-down::before,
.vote-up::before,
[class*=" icon-"]::before,
[class^="icon-"]::before {
  font-family: "copenhagen-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  line-height: 1em;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

.icon-lock::before {
  content: "\1F512";
}

.icon-star::before {
  content: "\2605";
}

.icon-linkedin::before {
  content: "\e900";
}

.icon-twitter::before {
/*   content: "\e61b"; */
  content: "\e901";
}

.icon-googleplus-::before {
  content: "\e902";
}

.icon-facebook::before {
  content: "\e903";
}

.icon-agent::before {
  content: "\1F464";
}

.icon-close::before {
  content: "\2715";
}

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

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

.icon-attachments::before {
  content: "\1F4CE";
}

.icon-comments::before {
  content: "\1F4AC";
}

.icon-search::before {
  content: "\1F50D";
}

.icon-vote::before {
  content: "\1F44D";
}

.icon-handle::before {
  content: "\25BE";
}

.icon-check::before {
  content: "\2713";
}

.icon-gear::before {
  content: "\2699";
}

.icon-menu::before {
  content: "\2630";
}

.icon-article::before {
  content: "\1F4C4";
}

.icon-post::before {
  content: "\1F4D4";
}

.icon-notification-alert::before {
  content: "\26A0";
}

.icon-notification-error::before {
  content: "\00D7";
}

.icon-notification-info::before {
  content: "\2139";
}

.icon-notification-success::before {
  content: "\2714";
}

/* User Profiles */

.profile-header {
  padding: 30px 0;
}

.profile-header .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  min-width: 0;
}

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

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

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

.profile-avatar .icon-agent::before {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  min-width: 0;
}

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

.profile-header .options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  margin-top: 12px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }

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

  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }

  [dir="rtl"] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.profile-header .options [data-action="edit-profile"] {
  background-color: rgba(140, 219, 255, 1);
  border: 0;
  color: rgba(35, 34, 34, 1);
  line-height: normal;
  padding: 8px 20px;
  margin: 0 10px;
}
@media (min-width:768px) {
  .profile-header .options [data-action="edit-profile"] {
    margin: 0;
  }
}

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

.profile-stats {
  font-size: 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #8f9aa8;
  font-weight: 600;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100px;
  flex: 0 0 100px;
  margin-right: 10px;
}

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

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .profile-stats-activity .stat {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }

  [dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
  .profile-stats-counters {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    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 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 270px;
    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 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  border: solid 1px rgba(140, 219, 255, 1);
  border-radius: 4px;
  color: rgba(140, 219, 255, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}

.profile-private-badge::after {
  content: "\1f512";
  margin-left: 5px;
  font-family: "copenhagen-icons";
  vertical-align: middle;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
}

.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .profile-section .profile-activity-list {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.profile-section-title {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: 10px 0;
  color: #8f9aa8;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-nav {
  background-color: #f2f2f2;
  border: 0;
  margin: 0 5% 37px;
}
@media (min-width: 768px) {
  .profile-section-description {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
    padding-bottom: 0;
  }

  .profile-nav {
    background-color: #f2f2f2;
    border: 0;
    margin: 0 0 37px;
  }
}

.profile-section-sorter {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}

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

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

[dir="rtl"] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    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;
  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: 15px;
  vertical-align: middle;
}

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

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }

  [dir="rtl"] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

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

.profile-contribution-list > .profile-contribution::before {
  left: 0;
  position: absolute;
  font-size: 16px;
  color: #ccc;
  font-family: "copenhagen-icons";
  line-height: 25px;
}

[dir="rtl"] .profile-contribution-list > .profile-contribution::before {
  right: 0;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}

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

  [dir="rtl"] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}

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

  [dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.profile-section .private-activity::before {
  content: "\1f512";
  font-family: "copenhagen-icons";
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  vertical-align: middle;
  margin-right: 10px;
}

[dir="rtl"] .profile-section .private-activity::before {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}
@media (min-width: 768px) {
  .profile-activity-list {
    padding-left: 7px;
  }
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }

  [dir="rtl"] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }

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

.profile-activity-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 35px;
}

[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }

  [dir="rtl"] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  -ms-flex-item-align: start;
  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;
  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;
  border: solid 1px rgba(140, 219, 255, 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::before {
  position: absolute;
  left: 0;
  width: 28px;
  border-radius: 50%;
  content: "";
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: 50% 50%;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: rgba(140, 219, 255, 1);
  font-family: "copenhagen-icons";
}

[dir="rtl"] .profile-activity::before {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity::before {
    left: -14px;
  }

  [dir="rtl"] .profile-activity::before {
    right: -14px;
  }
}

.profile-activity-list > li[class$="-article"]::before,
.profile-articles > .profile-contribution::before {
  content: "\1f4c4";
}

.profile-activity-list > li[class$="-post"]::before,
.profile-posts > .profile-contribution::before {
  content: "\1f4d4";
}

.profile-activity-list > li[class$="-comment"]::before,
.profile-comments > .profile-contribution::before {
  content: "\1f4ac";
  line-height: 35px;
}

/***** Search results *****/

.search-results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 50px;
}
@media (min-width: 1024px) {
  .search-results {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.search-results-column {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
  }
}

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

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

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

.search-result-description {
  margin-top: 15px;
}

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

.search-result-meta-count::before,
.search-result-votes::before {
  color: rgba(140, 219, 255, 1);
}

[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-votes::before {
  content: "\1F44D";
}

.search-result-meta-count::before {
  content: "\1F4AC";
}

.search-result .meta-group {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

.breadcrumbs.profile-contribution-breadcrumbs li,
.breadcrumbs.search-result-breadcrumbs li {
  color: rgba(91, 103, 118, 1);
  font-size: 13px;
  font-weight: 400;
}

.breadcrumbs.profile-contribution-breadcrumbs li a,
.breadcrumbs.search-result-breadcrumbs li a {
  color: #3976B7;
  font-weight: 400;
}

.search-result-breadcrumbs li:last-child::after {
  content: "·";
  display: inline-block;
  margin: 0 5px;
}

/* a.youtube {
  background-color: #D00D0D;
}

a.linkedin {
  background-color: #1D76B3;
}

a.facebook {
  background-color: #3364A3;
}

a.twitter {
  background-color: #000000;
}

a.contact-us {
  background-color: #0565A5;
  <!--  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); -->
  
} */

.hide {
  display: none;
}

/***alerts****/

/* types of alerts with their respective class names:

.note - for note
.tip - for tip
.warning - for warning
.important - for important
.caution - for caution
.danger - for danger
.notice - for notice

*/

.caution,
.danger,
.important,
.note,
.notice,
.tip,
.warning {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  position: relative;
  display: block;
  padding: 20px 18px 20px 60px;
  margin: 20px 0 !important;
  line-height: 1.4em;
  margin-right: 0 !important;
  color: rgba(91, 103, 118, 1);
}

[dir="rtl"] .caution,
[dir="rtl"] .danger,
[dir="rtl"] .important,
[dir="rtl"] .note,
[dir="rtl"] .notice,
[dir="rtl"] .tip,
[dir="rtl"] .warning {
  padding: 20px 65px 20px 18px;
}

.caution::before,
.danger::before,
.important::before,
.note::before,
.notice::before,
.tip::before,
.warning::before {
  font-family: Font Awesome\ 5 Free;
  font-weight: 900;
  margin-right: 15px;
  font-size: 20px;
  position: absolute;
  left: 20px;
  top: 22px;
  vertical-align: middle;
}

[dir="rtl"] .caution::before,
[dir="rtl"] .danger::before,
[dir="rtl"] .important::before,
[dir="rtl"] .note::before,
[dir="rtl"] .notice::before,
[dir="rtl"] .tip::before,
[dir="rtl"] .warning::before {
  margin-right: 0;
  margin-left: 15px;
  left: 0;
  right: 20px;
}

.note {
  background: rgba(0, 128, 0, 0.16);
}

.note::before {
  content: '\f303';
  color: rgb(0, 128, 0);
}

.warning {
  background: rgba(255, 165, 0, 0.16);
}

.warning::before {
  content: '\f071';
  color: rgb(255, 165, 0);
}

.important {
  background: rgba(0, 128, 0, 0.16);
}

.important::before {
  content: '\f06a';
  color: rgb(0, 128, 0);
}

.caution {
  background: rgba(238, 235, 59, 0.16);
}

.caution::before {
  content: '\f071';
  color: rgb(255, 232, 26);
}

.tip {
  background: rgba(78, 190, 228, 0.16);
}

.tip::before {
  content: '\f0d0';
  color: rgb(78, 190, 228);
}

.danger {
  background: rgba(255, 0, 0, 0.16);
}

.danger::before {
  content: '\f071';
  color: rgb(255, 0, 0);
}

.notice {
  background: rgba(78, 190, 228, 0.16);
}

.notice::before {
  content: '\f05a';
  color: rgb(78, 190, 228);
}

.caution > *,
.danger > *,
.important > *,
.note > *,
.notice > *,
.tip > *,
.warning > * {
  margin-left: 0;
  -webkit-margin-before: 0;
  padding-left: 0;
  padding-bottom: 0;
  padding-right: 40px;
}

[dir="rtl"] .caution > *,
[dir="rtl"] .danger > *,
[dir="rtl"] .important > *,
[dir="rtl"] .note > *,
[dir="rtl"] .notice > *,
[dir="rtl"] .tip > *,
[dir="rtl"] .warning > * {
  padding-left: 40px;
  padding-right: 0;
}

/***alerts****/

/* ---knowledge base tree---  */

.tree-container {
  margin: 30px 0 20px;
}

.tree-border {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 10px 0;
}

.tree-container .tree-item-link {
  padding: 13px 13px 13px 0;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

[dir="rtl"] .tree-container .tree-item-link {
  padding: 15px 0 15px 15px;
}

.tree-container .tree-item-link.accordion-category-title {
  padding-left: 15px;
  border-bottom: 1px solid #ddd;
}

[dir="rtl"] .tree-container .tree-item-link.accordion-category-title {
  padding-right: 15px;
  padding-left: 0;
}

.tree-item-link:active {
  text-decoration: none;
}

.section-tree-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1.25rem;
  margin: 0 -15px;
}
@media (min-width: 768px) {
  .section-tree-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.section-tree-list .section {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  padding: 0 15px;
}

.tree-items {
  margin-bottom: 10px;
}

.tree-item-title {
  margin-right: 10px;
}

.section-tree-item-title {
  font-size: 16px;
}

.tree-container .section {
  margin-bottom: 20px;
}

[dir="rtl"] .tree-item-title {
  margin-left: 10px;
  margin-right: 0;
}

.section-tree-item-title,
.tree-item-title {
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
}

.section-tree-item-title {
  border-bottom: 1px solid #eee;
  padding: 0 0 12px;
  margin-bottom: 21px;
}

.section-tree-item-title,
.section-tree-item-title,
.section-tree-item-title a,
.tree-item-link,
.tree-item-title,
.tree-item-title a {
  color: rgba(91, 103, 118, 1);
  word-break: break-word;
}

.tree-container .see-all-articles {
  display: block;
  padding: 15px 0;
}

[dir="rtl"] .tree-container .article-list,
[dir="rtl"] .tree-container .see-all-articles {
  padding-left: 0;
  padding-right: 15px;
}

.tree-container .accordion-see-all-link.see-all-articles,
.tree-container .article-list.accordion-article-list,
[dir="rtl"] .tree-container .accordion-see-all-link.see-all-articles,
[dir="rtl"] .tree-container .article-list.accordion-article-list {
  padding-left: 0;
  padding-right: 0;
}

.tree-container .article-list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  border: 0;
  margin-bottom: 8px;
}

.tree-container {
  color: #3976B7;
}

.tree-container ul.article-list li.article-promoted span {
/*   margin-right: 5px; */
}

[dir="rtl"] .tree-container ul.article-list li.article-promoted span {
/*   margin-right: 0;
  margin-left: 5px; */
  background-color: #64acd8;
}

.full-knowledge-base ul,
.tree-container ul,
[dir="rtl"] .full-knowledge-base ul,
[dir="rtl"] .tree-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section.knowledge-base {
  margin-bottom: 34px;
}

.section-tree-list i.category-empty {
  padding: 15px;
}

.section-tree-list i.section-empty {
  top: 8px;
  position: relative;
  font-size: 14px;
  font-weight: 300;
  padding-left: 15px;
}

[dir="rtl"] .section-tree-list i.section-empty {
  padding-left: 0;
  padding-right: 15px;
}

.section-tree-list i.section-empty.accordion-section-empty,
[dir="rtl"] .section-tree-list i.section-empty.accordion-section-empty {
  padding-left: 0;
  padding-right: 0;
}

.tree-container .icons-wrapper {
  position: absolute;
  right: 15px;
  vertical-align: middle;
  top: 30%;
}

[dir="rtl"] .tree-container .icons-wrapper {
  left: 0;
  right: auto;
}

.tree-container .icons-wrapper i {
  font-size: 15px;
  vertical-align: middle;
}

.tree-items a.active .fa-angle-down {
  display: none;
}

.tree-items a.active .fa-angle-up {
  display: block;
  line-height: 25px;
}

.hide {
  display: none;
}

.tree-item-link:hover {
  text-decoration: none;
}

.tree-container .icons-wrapper .fa-angle-up {
  display: none;
}

.section h2.tree-item-title {
  margin-bottom: 0;
  text-align: left;
}

/* ---knowledge base tree---  */

/*Follow button  or Unfollow button*/

.article-subscribe,
.article-unsubscribe {
  height: 24px;
  background: #3CBAF0; /* Default background: rgba(140, 219, 255, 1) */
  color: rgba(35, 34, 34, 1); /* Default color: rgba(35, 34, 34, 1) */
  line-height: 23px;
  vertical-align: middle;
  margin: 0 0 5px 10px;
}

.article .article-unsubscribe {
  background: #1eb848;
  border: none;
  line-height: 25px;
}

/***** Search results *****/
.search-results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.search-results-column {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    -webkit-box-flex: 0;
    -ms-flex: 1 0 75%;
    flex: 1 0 75%;
  }
}

.search-results-sidebar {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    height: auto;
    margin-right: 35px;
  }

  [dir="rtl"] .search-results-sidebar {
    margin-right: 0;
    margin-left: 35px;
  }
}

.search-results-sidebar .sidenav-item:hover,
.search-results-sidebar .sidenav-item[aria-selected="true"] {
/*   background-color: rgba(140, 219, 255, 1);
  color: rgba(35, 34, 34, 1); */
  background-color: var(--surface-2);
  color: var(--textsharp);
  text-decoration: none;
}

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

.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 20px;
  padding: 0;
}

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

@media (min-width: 1024px) {
  .multibrand-filter-list {
    border: 1px solid var(--accent-color) !important;
  }
}

.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: var(--mouse-pointer);
  display: block;
  padding: 10px;
  color: #3976B7;
}

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

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

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

.search-results-list > li {
  padding: 20px 0;
}

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

.search-results-list > li h2 {
  margin-bottom: 0;
}

.search-results-list > li h2 a {
/*   color: var(--accent-color); */
}

.search-results .meta-group {
  display: block;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  clear: both;
  color: #666;
}
@media (min-width: 1024px) {
  .search-results .meta-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

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

.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: clamp(1rem, calc(3vw + 0.01rem), 1.2rem);
  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: #8f9aa8;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  padding: 4px 5px;
  position: relative;
}

.search-result-meta-count::before,
.search-result-votes::before {
  color: rgba(140, 219, 255, 1);
}

[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-votes::before {
  content: "\1F44D";
}

.search-result-meta-count::before {
  content: "\1F4AC";
}

.search-result .meta-group {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}
@media (min-width: 1024px) {
  .search-result-breadcrumbs {
    display: table-row;
  }
}
@media (min-width: 1024px) {
  .search-result-breadcrumbs li {
    display: table-cell;
  }
}

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

/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|="zh"] .search-results-description em {
  font-style: normal;
  background: yellow;
}

.search-results-sidebar .collapsible-sidebar-toggle {
  position: absolute;
  top: calc(45px / 2);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.search-results-sidebar .collapsible-sidebar-title {
		padding: 12px 15px;
    background-color: var(--accent-color);
    color: white;
    margin: 0;
    border-radius: var(--radius-md);
}

.search-results-sidebar .collapsible-sidebar {
  position: relative;
}

.multibrand-filter-list.multibrand-filter-list--collapsed {
  border: 1px solid var(--accent-color);
  border-top:0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--surface-1);
  position: relative;
  z-index: 2;
  overflow: auto;
}

@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar-toggle {
    display: none;
  }

  .search-results-sidebar .collapsible-sidebar {
    border-top: 0;
    border-bottom: 0;
  }

  .search-results-sidebar .collapsible-sidebar {
    border: 0;
    padding: 0;
  }

  .multibrand-filter-list.multibrand-filter-list--collapsed {
    border: 0;
    background: transparent;
  }
}

.search-results .meta-group .user-name {
  padding-right: 10px;
}

 /**** Floating Bottom Bar block *****/

.bottom-bar {
  font-size: clamp(0.9rem, calc(3vw + 0.01rem), 1rem);
  margin-top: var(--padding-responsive);
  position: sticky;
  bottom: 0; /* Position of the bar changed to top of the page, before was bottom: 0 */
  left: 0;
  width: 100%;
  background: #f26623;
  color: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.bottom-bar__content {
  width: 100%;
  /*margin: 0 auto;
  display: flex;
  justify-content: space-between;*/
}

.bottom-bar__content > * {
  display: flex;
  align-items: center;
}

.bottom-bar__text {
  margin: 0 4.5rem;
  text-align: center;
}

.bottom-bar__text > a {
  color: #fff;
  width: 100%;
  cursor: var(--mouse-pointer);
  padding: 15px;
  text-decoration: none;
}

/********************************************************** CSS function for JS Tabs **********************************************************/

/********************************************************** https://www.w3schools.com/howto/howto_js_tabs.asp **********************************************************/

.tab {
  	position: sticky;
  	top: 0;
  	z-index: 3;
    display: flex;
  	background: white;
    flex-wrap: wrap;
/*     overflow: hidden; */
    justify-content: space-between;
  	padding: 5px 0 10px 0;
  	gap: 0.5rem;
}

.tab button {
    background-color: #ddd;
    outline: none;
    padding: 10px; /* Adjusted padding */
    cursor: var(--mouse-pointer);
    transition: background-color 0.3s, 0.3s box-shadow ease;
    flex-grow: 1;
  	border: none;
		border-radius: 5vw;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.tab button:hover,
.tab button:focus {
  background-color: #8cccfa;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.23), 0 8px 8px rgba(0, 0, 0, 0.19);
	border-radius: 5vw;
}

.tab button.active {
  background-color: #f3f3f3;
}

.tabcontent {
  	border: 1px solid #ccc;
		border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
    transition: 0.3s box-shadow ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  	margin: 2px;
    overflow: hidden;
    display: none;
    padding: 20px;
    animation: fadeEffect 0.3s;
}

.tabcontent ul {
  list-style: none;
}

.tabcontent ul li {
    position: relative;
    padding-left: 5px;
}

.tabcontent ul li:not(ul li ul li, ul li ol li)::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  width: 15px;
  height: 30px;
	background-image: url('/hc/theming_assets/01J6TDSK54D4H6HNJ5XNT5CKMM');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.tabcontent.active {
    display: block;
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@media (max-width: 768px) {
    .tabs button {
        flex-basis: 100%;
    }
}

  
  
/*************************************************** https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tab_header ***********************************************/  
.tabheaderlink {
  background-color: #f1f1f1;
  float: left;
  border: none;
  outline: none;
  cursor: var(--mouse-pointer);
  padding: 14px 16px;
  font-size: 17px;
}

.tabheaderlink:hover {
  background-color: #ddd;
}

/* Style the tab header content */
.tabheadercontent {
  display: none;
  padding: 50px;
  text-align: center;
  background-color:#8cccfa;
}
  
/********************************************************** CSS function for JS Tabs **********************************************************/
  
  
/********************************************************** CSS function for Accordion Menu **********************************************************/

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: var(--mouse-pointer);
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}
  
/********************************************************** Accordion Menu v2 **********************************************************/
.accordionv2 input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.accordionv2 {
  overflow: hidden;
  margin-bottom: 5px;
}

.accordionv2:last-child {
  margin-bottom: 0;
}

.accordionv2-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f3f3f3;
  cursor: var(--mouse-pointer);
  position: relative;
}

.accordionv2-label:hover {
  background: #e0e0e0;
}

.accordionv2-label::after {
  content: "\276F";
  position: absolute;
  right: 16px;
  transition: transform 0.3s;
}

.accordionv2-content {
  height: 0;
  padding: 0 20px;
  background: #e0e0e0;
  transition: height 0.3s, padding 0.3s;
  overflow: hidden;
}

.accordionv2-content ul:first-child {
  margin-top: 0;
}

.accordionv2 input:checked + .accordionv2-label {
  background: #e0e0e0;
}

.accordionv2 input:checked + .accordionv2-label::after {
  transform: rotate(90deg);
}

.accordionv2 input:checked ~ .accordionv2-content {
  height: auto;
}

/********************************************************** CSS function for Image Zoom KB **********************************************************/
  
/********************************************************** CSS function iFrame **********************************************************/
.content_iframemobileapp {
    border: 0px none;
    height: 812px;
    width: 375px;
  }

/********************************************************** Error message color = RED **********************************************************/

/********************************************************** Expandable list **********************************************************/
ul.sublist {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding-left: 20px; /* Indent sublist items */
}

ul.mainList > li {
    cursor: var(--mouse-pointer);
    padding: 10px;
    border-radius: 10px;
    list-style-type: none;
    border: 1px solid #e0e0e0;
    margin-bottom: 5px;
  	background-color: #f3f3f3;
}

ul.mainList > li.active {
    background-color: #e0e0e0;
}

ul.mainList > li:hover {
    background-color: #e0e0e0;
}

ul.sublist li a {
    display: block;
    padding: 5px 0;
}

ul.sublist li:hover {
    background-color: #8cccfa;
    border-radius: 10px;
}

/********************************************************** Expandable for Model number list **********************************************************/
.containerForModelNumber {
    width: 100%;
    text-align: center; /* Center align content */
  	margin-bottom: 10px;
}

.expandable {
    cursor: var(--mouse-pointer);
    display: inline-block;
    padding: 10px 50px;
    background: var(--surface-1);
    box-sizing: border-box;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.5rem, calc(3vw + 0.05rem), 1rem);
    position: relative;
    white-space: normal;
    width: 100%;
  
  &:hover {
    background: var(--surface-2);
  }
}

.expandable::before,
.expandable::after {
    content: '>>>';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px; /* Initial font size */
    color: #666; /* Adjust color as needed */
    transition: all 0.5s ease; /* Transition for all properties */
}

.expandable::before {
    left: 15px; /* Adjust position dynamically */
    animation: animateArrows1 1s infinite;
}

.expandable::after {
    content: '<<<'; /* Corrected arrow direction */
    right: 15px; /* Adjust position dynamically */
    animation: animateArrows2 1s infinite;
}

@keyframes animateArrows1 {
    0%, 100% {
        transform: translateY(-50%);
    }
    50% {
        transform: translateY(-50%) translateX(5px); /* Move closer to the text */
    }
}

@keyframes animateArrows2 {
    0%, 100% {
        transform: translateY(-50%);
    }
    50% {
        transform: translateY(-50%) translateX(-5px); /* Move closer to the text */
    }
}

.content {
    display: none;
    padding: 10px;
    border-top: none;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
  	background: #d2ecfa;
}

.content.show {
    display: block;
    max-height: 500px; /* Large enough to fit content */
    padding-top: 10px;
    padding-bottom: 10px;
}

.search-box {
    background: azure;
    font-weight: normal;
    width: 60%;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #ccc;
    transition: 0.3s box-shadow ease; /* Added box-shadow transition */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.search-box:focus {
    transition: 0.3s box-shadow ease; /* Added box-shadow transition */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.23), 0 8px 8px rgba(0, 0, 0, 0.19);
}

.search-box::placeholder {
    text-align: center;
}

#modelnumber {
    display: block;
    text-align: center; /* Align text to the left */
  	max-height: 250px; /* Fixed height for scrolling area */
    overflow-y: auto; /* Enable vertical scrollbar */
    padding: 10px;
    box-sizing: border-box;
}

.highlight {
    background-color: yellow;
}

/********************************************************** Consistent curved corners **********************************************************/
.card {
  border-radius: var(--card-corner-radius);
  overflow: hidden;
  box-shadow: var(--simple-shadow);
  background: linear-gradient(0deg, var(--card-bg) 97%, var(--card-bg-light));
}

.card:focus,
.card:hover {
  background: linear-gradient(0deg, var(--card-bg), var(--card-bg-light));
  box-shadow: var(--elevated-shadow);
}

.card-btn {
  border: 1px solid #ccc;
  border-radius: var(--card-corner-radius)
  transition: 0.3s box-shadow ease; /* Added box-shadow transition */
  box-shadow: var(--card-shadow);
  overflow: hidden;
  /* Other styles */
}

/***************************************************** Article title in Section BGColor *******************************************************/
.nvw-background {
/*   background-color: #e0e0e0; */
  background: #7dbfe8;
}

.nvr-background {
/*   background-color: #c5c5c5; */
  background: #acd9ed;
}

.dvr-background {
/*   background-color: #f8f8f8; */
  background: #e2f1fa;
}

.mr4k-background {
  background: linear-gradient(45deg,#3f78ba,#e2f1fa,#64acd8);
  background-size: 180% 180%;
  animation: mr4k-gradient-animation 18s ease infinite;
}

@keyframes mr4k-gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/**************************************************** Fixed column and row for table *************************************************/
/* default styling. Nothing to do with freexing first row and column */
.fixed-column-row table {border-collapse: collapse;}
.fixed-column-row td, th {border:  1px solid;
      padding: 10px;
      min-width: 150px;
      box-sizing: border-box;
      text-align: left;
}
.table-container {
  position: relative;
  max-height: 400px;
  overflow: scroll;
}

.fixed-column-row thead th:not(first-child) {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background: yellow; /*hsl(20, 50%, 70%);*/
}

.fixed-column-row thead th:first-child {
  left: 0;
  z-index: 2;
}

.fixed-column-row tfoot {
  position: -webkit-sticky;
  bottom: 0;
  z-index: 1;
}

.fixed-column-row tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: hsl(20, 50%, 70%);
}

.fixed-column-row tfoot td:first-child {
  z-index: 2;
}

.fixed-column-row tbody {
  overflow: scroll;
  height: 200px;
}

/* MAKE LEFT COLUMN FIXED */
.fixed-column-row tr > :first-child {
  position: -webkit-sticky;
  position: sticky; 
  background-color: #61bbe4; /*hsl(180, 50%, 70%);*/
  font-weight: 700;
  left: 0; 
}

.fixed-column-row th:first-child {
  background-color: #0b2451;
  color: white;
}

/**************************************************** Basic table design *************************************************/
.basictable table {
    width: 100%;
    border-collapse: collapse;
}
.basictable th, .basictable td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.basictable th {
    background-color: #3f78ba; /* Blue background color for header */
    color: white; /* White text color for header */
}

.basictable tr:nth-child(even) {
    background-color: var(--surface-2);
}

.basictable tr:nth-child(odd) {
    background-color: var(--surface-3);
}

/**************************************************** Dropbox Files table design *************************************************/
.dropboxtable table {
  	all: unset;
    width: 100%;
    border-collapse: collapse;
}
.dropboxtable th, .dropboxtable td {
/*     border: 1px solid #ddd; */
  	border: unset;
    padding: 8px;
    text-align: center;
}

.dropboxtable th:first-child,
.dropboxtable td:first-child {
  width: 500px;
}

.dropboxtable td:first-child {
  text-align: left;
  text: pretty;
}

.dropboxtable th {
    background-color: #3f78ba;
    color: white;
}
.dropboxtable tr:nth-child(even) td:first-child {
    background-color: #f2f2f2;
}




/* .dropboxtable .tg  {border-collapse:collapse;border-color:#ccc;border-spacing:0;}
.dropboxtable .tg td{background-color:#fff;border-color:#ccc;border-style:solid;border-width:0px;color:#333;
  font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}
.dropboxtable .tg th{background-color:#f0f0f0;border-color:#ccc;border-style:solid;border-width:0px;color:#333;
  font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.dropboxtable .tg .dropboxtable .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
.dropboxtable .tg .dropboxtable .tg-0pky{border-color:inherit;text-align:left;vertical-align:top} */

/************************************* Product Image ***************************************/
.productImage img {
  	max-height: 300px;
  	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	filter: none;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.productImage img:hover {
    filter: drop-shadow(0 10px 8px #64acd8);
  	transform: scale(1.1);
}

#videoList iframe {
  display: block; margin-left: auto; margin-right: auto;
}

.vidOnLaptop {
  max-width: 800px;
  width: 100%;
  position: relative;
}

.vidOnLaptop img {
  width: 100%;
  border: none;
  border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
  transition: 0.3s box-shadow ease; /* Added box-shadow transition */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.vidOnLaptop iframe {
  position: absolute;
  width: 76%;
  height: 80%;
  top: 6%;
  left: 12%;
}

/******************************************************** Nav Product Manual ************************************************/
/* Styling the navigation container */
.navProduct {
  display: flex;
  overflow-y: hidden;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  background: linear-gradient(290.89deg, #01a8e9 8.06%, #004a98 88.04%);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
  z-index: 10;
  transition: all 0.3s ease-in-out;
}

.navbarHeight-spaceGap {
  height: 2rem;
}

/* Styling the links */
.navProduct a {
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-decoration: none;
    padding: 15px;
    margin: 0; /* Remove margin */
    line-height: 1; /* Normalize line height to remove extra space */
    transition: all 0.3s ease-in-out;
    display: inline-block; 
    white-space: nowrap; /* Ensure whole link stays together */
    flex-grow: 1;
    text-align: center;
}

/* Hover, active, and focus state styling for links */
.navProduct a:hover,
.navProduct a:focus,
.navProduct a:active {
    color: #3f78ba;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

/* Fade animation for the navbar */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.navProduct a {
    animation: fadeIn 0.3s ease-in-out;
}

.navHeader {
  	all: unset;
  	font-family: 'Montserrat', sans-serif;
  	font-size: 35px;
  	font-weight: 500;
  	text-align: center;
  	display: flex;
  	justify-content: center;
  	padding: 0 15px;
}

.nav-tab {
  position: sticky;
  top: 2.6rem;
  margin-bottom: 2rem;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 5px 5px 10px 5px;
  gap: 1rem;
}

 .nav-tab a {
   	all: unset;
    background-color: #ddd;
    outline: none;
    padding: 10px 15px;
   	text-align: center;
    cursor: var(--mouse-pointer);
    transition: background-color 0.3s, 0.3s box-shadow ease;
  	border: none;
		border-radius: 5vw;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.nav-tab a:hover,
.nav-tab a:focus {
  background-color: #8cccfa;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.23), 0 8px 8px rgba(0, 0, 0, 0.19);
	border-radius: 5vw;
}

.nav-tab a.active {
  background-color: #f3f3f3;
}

.navContent {
  padding: 30px 0 0 0;
  margin-top: 1rem;
  border: 1px solid #ccc;
  border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
  transition: 0.3s box-shadow ease; /* Added box-shadow transition */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.navContent h4 {
  	all: unset;
  	font-family: 'Montserrat', sans-serif;
  	font-size: 20px;
  	display: block;
  	text-align: center;
  	padding-bottom: 15px;
}

.navContent ul {
  list-style: none;
}

.navContent ul li {
    position: relative;
    padding-left: 5px;
}

.navContent ul li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  width: 15px;
  height: 30px;
	background-image: url('/hc/theming_assets/01J6TDSK54D4H6HNJ5XNT5CKMM');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.navContent .manualList {
  margin: 0;
}

.navContent .manualList li {
  margin: 30px 0;
  list-style: none;
  text-align: center;
}

.navContent .btn {
  display: inline-block;
  border: 2px dotted #2c3e50;
  border-radius: 10px;
  color: #2c3e50;
  font-size: 0.7rem;
  padding: 10px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.navContent .btn::before {
  content: "";
  border-radius: 10px;
  background-color: #e2f1fa;
  box-shadow: 3px 3px 0 #64acd8, 
              6px 6px 0 #3f78ba;
  position: absolute;
  left: 2px;
  top: 2px;
  height: 102%;
  width: 102%;
  z-index: -1;
  transition: all 0.4s ease;
}

.navContent .btn:hover::before {
  box-shadow: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.navContent .appDownloads {
    display: flex;
    justify-content: center;
  	margin: 20px;
}

.navContent .appDownloads img {
    width: 80px;
  	margin: 0 10px;
    filter: none;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.navContent .appDownloads img:hover {
    filter: drop-shadow(0 10px 8px #64acd8);
  	transform: scale(1.1);
}



/************************************************ Page Re-direction Notice **********************************/
/* Modal styling */
#pageRedirect {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 400px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* Modal overlay */
.pageRedirect-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Close button styling */
.pageRedirect-close-button {
    float: right;
    font-size: 16px;
    cursor: var(--mouse-pointer);
    color: #aaa;
}

.pageRedirect-close-button:hover {
    color: #000;
}

/* Progress bar container */
.pageRedirect-progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
}

/* Progress bar fill */
.pageRedirect-progress-bar {
    height: 10px;
    width: 0%; /* Start empty */
    background-color: #4ba6e3;
    border-radius: 8px;
    transition: width 5s ease; /* Smooth animation over 5 seconds */
}

/********************************************************** Article List appearance **********************************************************/
.articleList input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.articleList {
/*   overflow: hidden;
  margin-bottom: 5px; */
  
  border: none;
  border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
  transition: 0.3s box-shadow ease; /* Added box-shadow transition */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  margin: 0.5rem;
}

.articleList-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f3f3f3;
  cursor: var(--mouse-pointer);
  position: relative;
}

.articleList-label:hover {
  background: #e0e0e0;
}

.articleList-label::after {
  content: "\276F";
  position: absolute;
  right: 16px;
  transition: transform 0.3s;
}

.articleList-content {
  height: 0;
  padding: 0 20px;
  background: #e0e0e0;
  transition: height 0.3s, padding 0.3s;
  overflow: hidden;
}

.articleList-content ul:first-child {
  margin-top: 0;
}

.articleList input:checked + .articleList-label {
  background: #e0e0e0;
}

.articleList input:checked + .articleList-label::after {
  transform: rotate(90deg);
}

.articleList input:checked ~ .articleList-content {
  height: auto;
}

.article-list-spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/********************************************************** Toggle switch design **********************************************************/
  /* Toggle Switch Styling only when inside .toggle-container */
  .toggle-container input[type="checkbox"] {
    --s: 25px; /* Size control for the toggle switch */

    height: calc(var(--s) + var(--s) / 5);
    width: auto;
    aspect-ratio: 2.25;
    border-radius: var(--s);
    display: grid;
    cursor: var(--mouse-pointer);
    background-color: #a8a8a8; /* Grey when unchecked */
    box-sizing: content-box;
    overflow: hidden;
    transition: .3s .1s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .toggle-container input[type="checkbox"]:before {
    content: "";
    padding: calc(var(--s) / 10);
    --_g: radial-gradient(circle closest-side at calc(100% - var(--s) / 2) 50%, #000 96%, #0000);
    background: 
      var(--_g) 0 / var(--_p, var(--s)) 100% no-repeat content-box,
      var(--_g) var(--_p, 0) / var(--s) 100% no-repeat content-box,
      #fff;
    mix-blend-mode: darken;
    filter: blur(calc(var(--s) / 12)) contrast(11);
    transition: .4s, background-position .4s .1s,
      padding cubic-bezier(0, calc(var(--_i, -1) * 200), 1, calc(var(--_i, -1) * 200)) .25s .1s;
  }

  .toggle-container input[type="checkbox"]:checked {
    background-color: #5794cd; /* Pastel blue when checked */
  }

  .toggle-container input[type="checkbox"]:checked:before {
    padding: calc(var(--s) / 10 + .05px) calc(var(--s) / 10);
    --_p: 100%;
    --_i: 1;
  }

  /* Styling for labels and alignment within toggle-container */
  .toggle-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between label and toggle */
    margin-bottom: 10px;
  }

  .toggle-container label {
    font-size: 1rem;
  }

  /* Image styling in .imageForToggle based on toggle states */
  .imageForToggle img {
    width: 100%;
    height: auto;
    transition: filter 0.3s, background-color 0.3s;
  }

  /* Apply grayscale effect when both toggles are off */
  .grayscale img {
    filter: grayscale(100%) brightness(0.7);
  }

  /* Apply pink overlay if IRcutFilter is off and DayNight is on */
  .pink-overlay img {
    filter: grayscale(0) brightness(1) sepia(1) hue-rotate(270deg) saturate(3) contrast(0.9);
  }

  /* Apply dark effect when IRcutFilter is on and DayNight is off */
  .dark img {
    filter: grayscale(1) brightness(0.2);
  }


/********************************************************** Modern Input Text Design **********************************************************/
.input-container {
  position: relative;
  margin-block: 1rem;
/*   border: 1px solid black; */
}

.input-container__input {
  font: inherit;
  color: var(--accent-color);
  background-color: var(--accent-color-light);
  text-align: center;
  width: clamp(300px, 50%, 100%);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: var(--button-shadow);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.input-container__input:focus,
.input-container__input:valid {
  border-color: var(--accent-color);
  box-shadow: var(--card-shadow);
  outline: none;
}

.input-container__label {
  position: absolute;
  top: 50%;
  left: 10px;
  color: var(--accent-color);
  font-size: 16px;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translateY(-50%); /* Center the label initially */
}

/* When input is focused or has content, move the label */
.input-container__input:focus + .input-container__label,
.input-container__input:valid + .input-container__label {
  top: 8px;
  left: 13px;
  font-size: 12px;
  font-weight: bold;
  color: var(--accent-color); /* Optional: change color on focus */
  transform: translateY(-100%); /* Move label to the top */
  background-color: var(--accent-color-light);
  border-radius: var(--card-corner-radius);
  padding-inline: 5px; /* Optional: add padding for clarity */
}

/********************************************************** Div Options **********************************************************/
#divOptions > div {
    display: none;
  	padding: 1rem 2rem;
    border: none;
    border-radius: max(0px, min(var(--card-corner-radius), calc((100vw - 4px - 100%) * 9999))) / var(--card-corner-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

/********************************************************** Float text on image **********************************************************/
@media (min-width: 1024px) {
  .float-text-on-image {
    position: relative;  /* This makes the container a reference for absolute positioning */
    width: 100%;         /* Adjust the width as necessary */
  }

  .float-text-on-image > img,
  .float-text-on-image > a > img,
  .float-text-on-image > figure.imgArticle {
      width: 100%;
      height: auto;
  }

  .floating-text-left,
  .floating-text-right {
      position: absolute;
      top: 50%;
      width: 50%;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      padding: 15px;
      color: rgba(255, 255, 255, 0.8);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
    	z-index: 1;
  }
  
  .floating-text-left {
      left: 10px;
  }

  .floating-text-right {
      right: 10px;
  }
}

/********************************************************** Hide Tags **********************************************************/
#articleTags {
  display: none;
}

/********************************************************** Marquee Text (Homepage) **********************************************************/
.marquee-container {
    width: 100%;
    overflow: hidden;
    background-color: #FDFF97;
    padding: 10px 0;
    position: relative;
    cursor: var(--mouse-pointer); /* Indicates clickable area */
}

/* Scrolling text wrapper */
.marquee-content {
    display: flex;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}

/* Keyframes for smooth scrolling */
@keyframes marquee {
    0% {
        transform: translateX(100%); /* Start from off-screen right */
    }
    100% {
        transform: translateX(-100%); /* End at off-screen left */
    }
}

/* Optional: Styling for the text */
.marquee-text {
    font-weight: bold;
    color: #0078d4;
    padding-right: 100%; /* Ensure the text starts after a space */
}

/********************************************************** Jump to step **********************************************************/

.jumpto {
  cursor: var(--mouse-pointer);
  padding: 0 1em;
  background-color: #e2f1fa;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid #64acd8;
}

/********************************************************** Anchor link + copy **********************************************************/
.chain-icon {
  display: none;
  font-family: 'Font Awesome 6 Free';
  font-size: 0.9em;
  content: '\f0c1';
  font-weight: 900;
  margin-left: 8px;
}

.article-body h2:hover .chain-icon,
.article-body h3:hover .chain-icon,
.article-body h4:hover .chain-icon {
  display: inline;
}


/********************************************************** Anchor link + copy **********************************************************/
.carousel {
  width: 80%;
  max-width: 800px;
  overflow: hidden;
  position: relative;
  margin: 20px auto;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* Updated */
  margin-bottom: 5rem;
}

.slide {
  flex: 1 0 100%; /* Correct width for each slide */
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  box-sizing: border-box;
  max-width: 100%;
}

.slide img {
  display: block;
  justify-self: center;
  margin-inline: auto;
}

.carousel label,
.carousel input[type="radio"] {
  outline: none; /* Remove the browser's default focus outline */
}

.carousel input[type="radio"]:focus + label {
  box-shadow: none; /* Prevent any shadow effects on focus */
}

.carousel:focus {
  outline: none; /* Remove the focus outline when the carousel is focused */
}

.navigation {
  position: absolute;
  padding: 10px;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  overflow: visible; /* Ensure shadows are not cut off */
}

.navigation input {
  display: none;
}

.navigation label {
  width: 40px; /* Thumbnail size */
  height: 40px;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  cursor: var(--mouse-pointer);
  transition: transform 0.3s, border 0.3s, opacity 0.3s, box-shadow 0.3s;
  border: 2px solid transparent; /* Neutral border for unselected */
  opacity: 0.6; /* Dim unselected thumbnails */
}

.navigation label img {
  width: 100%; /* Stretch image to fill the width */
  height: 100%; /* Stretch image to fill the height */
  object-fit: cover; /* Maintain aspect ratio and fill the box */
  display: block; /* Remove inline spacing effects */
}

.navigation label:hover {
  transform: scale(1.1); /* Slight enlargement on hover */
  opacity: 0.8; /* Brighter on hover */
}

.navigation input:checked + label {
  border: 2px solid #fff; /* White border for selected thumbnail */
  transform: scale(1.2); /* Enlarged size for active thumbnail */
  opacity: 1; /* Fully visible */
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); /* Larger shadow to overflow */
  z-index: 1; /* Ensure selected thumbnail is on top */
}

/* Dynamic slide movement */
[data-carousel] .slides {
  transform: translateX(calc(var(--translate-index, 0) * -100%));
}

/********************************************************** Southern-Experts Badges **********************************************************/
.SXbadge {
  background-color: #007bff; /* Example color */
  color: white;
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
  margin-left: 0.2rem; /* Space between name and badge */
  font-size: 0.8rem; /* Adjust size */
}

/********************************************************** Internal Article's title **********************************************************/
.faded-red {
  background-color: rgba(255, 0, 0, 0.2);
  padding: 1rem;
}

/********************************************************** Heading Styles V202504 **********************************************************/

.headingV202504 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, calc(3vw + 0.01rem), 2rem);
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;  
}

/* === HEADING STYLE #1 === */
h2.h2one {
  background-color: unset;
  padding-inline: unset;
  text-transform: capitalize;
}

h2.h2one:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 2px;
  content: "";
  background-color: #c50000;
}

/********************************************************** Tabheader V202504 **********************************************************/
/* General Reset */
.con2025_default {
  border: none;
  border-radius: var(--card-corner-radius);
  transition: 0.3s box-shadow ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  margin-block: 10px;
}

.tabsContainerV202504_default {
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
  border-radius: var(--card-corner-radius);
  background-color: #f9f9f9;
}

/* Ensure all tabs have equal height */
.tabsContainerV202504_default > ul {
  list-style: none;
  padding: 0;
  margin: 0 !important;
  display: flex; /* Use Flexbox */
  align-items: stretch; /* Stretch all tabs to the same height */
}

.tabsV202504_default {
  padding: 0;
  margin: 0;
  display: flex;
}

.tabsV202504_default li {
  flex: 1; /* Each tab takes up equal space */
  text-align: center;
  margin: 0;
  display: flex; /* Make the <li> a flex container */
  align-items: stretch; /* Ensure the <a> inside stretches */
}

.tabsV202504_default a {
  text-decoration: none;
  color: #333 !important;
  font-size: 14px;
  padding: 15px;
  display: flex; /* Use Flexbox for alignment */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #eee !important;
  transition: all 0.3s ease;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  white-space: normal; /* Allow text wrapping */
  min-height: auto; /* Remove fixed min-height */
}

.tabsV202504_default a:hover,
.tabsV202504_default a:focus {
  background: #fff !important; /* Slightly darker background on hover */
  color: #000; /* Darker text color on hover */
}

.tabsV202504_default a.activeV202504_default {
  background: #fff !important; /* White background for active tab */
  color: var(--accent-color) !important; /* Blue text color for active tab */
  font-weight: bold; /* Bold text for active tab */
}

/* Show all tab content by default */
.tabcontentV202504_default {
  display: block; /* All content is visible by default */
  padding: 20px;
  background-color: #fff;
  border-bottom-left-radius: var(--card-corner-radius);
  border-bottom-right-radius: var(--card-corner-radius);
}

/* JavaScript will add this class to hide inactive tabs */
.tabcontentV202504_default.hiddenV202504_default {
  display: none; /* Hide inactive tabs */
}

/* Media Query for Screens 1024px and Above */
@media (min-width: 1024px) {
  /* Adjustments for larger screens */
  .tabsV202504_default a {
    font-size: 16px; /* Increase font size for readability */
    padding: 15px; /* Add more padding for better spacing */
  }
}


/******************* Product article tabs *******************/
.con2025 {
  border: none;
  border-radius: var(--card-corner-radius);
  transition: 0.3s box-shadow ease;
  box-shadow: var(--card-shadow);
  margin-block: 10px;
  background: white;
}

.con2025 a {
  border-bottom: unset !important;
}

.tabsContainerV202504 {
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
  border-radius: var(--card-corner-radius);
  background-color: #f9f9f9;
}

.tabsContainerV202504 > ul {
  list-style-type: none !important;
  padding: 0;
  margin: 0 !important;
  display: flex;
}

.tabsV202504 {
  padding: 0;
  margin: 0;
  display: flex;
}

.tabsV202504 li {
  flex: 1;
  text-align: center;
  margin: 0;
}

.tabsV202504 a {
  text-decoration: none;
  color: #333 !important;
  font-size: 14px;
  padding: 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #eee !important;
  transition: all 0.3s ease;
  text-align: center;
  min-height: 60px;
  width: 100%;
  box-sizing: border-box;
}

/* Hide text labels for inactive tabs by default */
.tabsV202504 a span {
  display: none; /* Hide the text label */
}

/* Show text labels for active tabs */
.tabsV202504 a.activeV202504 span {
  display: block; /* Show the text label */
}

/* Show text labels on hover or focus */
.tabsV202504 a:hover span,
.tabsV202504 a:focus span {
  display: block; /* Show the text label */
}

.tabsV202504 a:hover,
.tabsV202504 a:focus {
  background: #fff !important; /* Slightly darker background on hover */
  color: #000; /* Darker text color on hover */
}

.tabsV202504 a.activeV202504 {
  background: #fff !important; /* White background for active tab */
  color: var(--accent-color) !important; /* Blue text color for active tab */
  font-weight: bold; /* Bold text for active tab */
}

/* Show all tab content by default */
.tabcontentV202504 {
  display: block; /* All content is visible by default */
  padding: 20px;
  background-color: #fff;
  border-bottom-left-radius: var(--card-corner-radius);
  border-bottom-right-radius: var(--card-corner-radius);
}

/* JavaScript will add this class to hide inactive tabs */
.tabcontentV202504.hiddenV202504 {
  display: none; /* Hide inactive tabs */
}

/* Font Awesome Icons - Targeted by ID */
#specificationsTabV202504 a::before {
  content: "\f46d"; /* Specifications icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

#manualsTabV202504 a::before {
  content: "\f02d"; /* Manuals icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

#downloadsTabV202504 a::before {
  content: "\f019"; /* Downloads icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

#videoTutorialsTabV202504 a::before {
  content: "\f167"; /* Video Tutorials icon */
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

#howToGuidesTabV202504 a::before {
  content: "\f5da"; /* How-to Guides icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

#tsgsTabV202504 a::before {
  content: "\f7d9"; /* Troubleshooting Guides icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

#faqsTabV202504 a::before {
  content: "\f059"; /* FAQs icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

#specificationsTabV202504 a::before,
#manualsTabV202504 a::before,
#downloadsTabV202504 a::before,
#videoTutorialsTabV202504 a::before,
#howToGuidesTabV202504 a::before,
#tsgsTabV202504 a::before,
#faqsTabV202504 a::before {
  font-size: clamp(0.5rem, calc(3vw + 0.5rem), 3rem);
}

/* Media Query for Screens 1024px and Above */
@media (min-width: 1024px) {
  /* Show text labels for all tabs */
  .tabsV202504 a span {
    display: block; /* Always show the text label */
  }
}

/********************************************************** Paths and Button V202504 **********************************************************/
.downloadButton {
  display: inline-block;
  text-decoration: none;
  cursor: var(--mouse-pointer);
  padding: 12.5px 30px;
  border: 0;
  border-radius: 100px;
  background: var(--accent-color); 
  color: #ffffff;
  font-weight: Bold;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.downloadButton:hover {
  background-color: #6fc5ff;
  box-shadow: 0 0 20px #6fc5ff50;
  transform: scale(1.1);
}

.downloadButton:active {
  background-color: #3d94cf;
  transition: all 0.25s;
  -webkit-transition: all 0.25s;
  box-shadow: none;
  transform: scale(0.98);
}

/* Target the <ul> with the class 'swannlist' */
ul.swannlist {
  list-style-type: none !important; /* Remove default bullet points */
  position: relative; /* Ensure proper positioning for pseudo-elements */
}

/* Target the <li> elements inside the <ul> with the class 'swannlist' */
ul.swannlist li {
  position: relative; /* Ensure proper positioning for the pseudo-element */
}

/* Use the ::before pseudo-element to create the custom design */
ul.swannlist li:not(ul li ul li, ul li ol li)::before {
  content: "";
  position: absolute;
  left: -1.5em;
  width: 1em;
  height: 1em;
  align-self: center;
  background-image: url('/hc/theming_assets/01J6TDSK54D4H6HNJ5XNT5CKMM');
  background-size: contain;
  background-repeat: no-repeat;
  top: calc((1.6em - 1em) / 2);
}

.tabcontentV202504 > details > ul.swannlist {
    margin-left: 2.5em;
}

ul.newul {
  list-style-type: none !important;
}

ul.newul > li {
  position: relative;
}

ul.newul > li::before {
		content: "";
    position: absolute;
    width: 0.5em;
    height: 0.5em;
  	top: calc((1.6em - 0.7em) / 2);
    left: -1.1em;
    /* align-self: center; */
    text-align: center;
    align-content: center;
    background-color: var(--accent-color);
    border-radius: 50%;
}

ol.newol {
  list-style-type: none !important;
  padding-left: unset;
  counter-reset: fuel-awesome-counter;
}

ol.newol > li {
  counter-increment: fuel-awesome-counter;
  position: relative;
}

ol.newol > li::before {
  content: counter(fuel-awesome-counter);
  color: #fff;
  background: var(--accent-color);
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  top: calc((1.6em - 1.2em) / 2);
  left: -1.5rem;
  text-align: center;
  align-content: center;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 50%;
  margin-right: 0.5em;
  position: absolute;
}

/* Style for the icon links */
.iconV202504 {
  text-decoration: none; /* Remove underline from links */
  color: #64acd8;
  padding-left: 5px;
  font-size: 20px;
}

/* Hover effect for the icons */
.iconV202504:hover {
  color: var(--accent-color); /* Change color on hover */
}

ul.appList {
  content: "";
  position: relative;
  margin: 10px;
  padding: unset;
}

.appIcon {
  color: #64acd8;
  margin: 10px;
  font-size: clamp(0.5rem, calc(3vw + 2.5rem), 3rem);
}

.appIcon > span {  
  padding-left: 10px;
  font-size: clamp(0.5rem, calc(3vw + .5rem), 1.5rem);
  font-family: 'Montserrat', monospace;
}

.appIcon:hover {
  color: var(--accent-color);
}

/********************************************************** Details and Summary V202504 **********************************************************/
/* details {
    border-radius: var(--card-corner-radius);
    overflow: hidden;
}

details[open] {
    background-color: #fafafa;
    box-shadow: var(--card-shadow);
    margin-block: 0.5rem;
}

details[open] > summary {
    font-weight: 700;
    color: white;
    background-color: var(--accent-color);
		padding-block: 0.5rem;
}

details[open] > p,
details[open] > ul,
details[open] > ol,
details[open] > div {
    padding-inline: 1rem;
}

summary {
  position: relative;
  cursor: var(--mouse-pointer);
  list-style: none;
  padding-left: var(--padding-responsive);
}

summary:hover {
  background-color: gainsboro;
}

summary::before {
  content: "\276F";
  position: absolute;
  left: calc(var(--padding-responsive) - 1.2rem);
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
}

details[open] summary::before {
  transform: translateY(-50%) rotate(90deg);
} */

/* To revert back, disable this and enable 45 to 89 */
body {
/*   background-color: #FFFFFF;
  color: rgba(91, 103, 118, 1);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; */
/*     padding: var(--padding-responsive); */
    background-color: var(--bg-main);
    line-height: 1.5;
    font-family:
      	'Source Sans 3',
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    font-size: 16px;
    color: var(--textnormal);
}

body > main {
/*     padding-bottom: 2rem; */
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  margin-top: 0;
  text-wrap: pretty;
}

h1 {
  font-size: 56px;
  line-height: 56px;
}

h2 {
  font-family: 'Raleway';
  font-size: clamp(1.5rem, calc(3vw + 0.01rem), 2rem);
}

h3 {
  font-size: clamp(1.3rem, calc(3vw + 0.01rem), 1.6rem);
}

h4 {
  font-size: clamp(1.2rem, calc(3vw + 0.01rem), 1.5rem);
  font-weight: 400;
}

/* To revert back, disable this and enable 2483 to 2486, 2490 to 2491, 2529 to 2554 */
.article-page-title {
  font-family: 'Rambla', sans-serif;
  font-size: clamp(2rem, calc(3vw + 0.5rem), 3rem);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

/* New additoin */
/* .article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  line-height: 1.1;
}

.article-body h2 {
  position: relative;
  padding: 0;
  margin: 3rem 0 1.5rem;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.article-body h2:before {
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 50%;
  height: 2px;
  content: "";
  background: #c50000;
	background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 0.66) 30%, rgba(252, 176, 69, 0) 100%);
} */

.article-body img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: cover;
}

/* details {
  border: 2px dotted black;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: var(--mouse-pointer);
  position: relative;
}

details[open] summary {
  font-weight: bold;
} */

summary::marker {
  list-style-type: square;
  color: #3f78ba;
  font-size: 1.5rem;
}

/************************************************ Steps Carousel V202504 (place inside Steps) ************************************************/

/* General Styles */
#stepDetailsV202504 {
  position: relative;
  overflow: hidden;
  margin: 1rem;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  background: ghostwhite;
}

.stepV202504 {
  display: none;
  min-height: 100px;
  padding: 1rem;
}

.stepV202504.activeV202504 {
  display: block;
}

#stepIndicatorsV202504 {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.indicatorV202504 {
  padding: 10px;
  margin: 0 5px;
  cursor: var(--mouse-pointer);
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.indicatorV202504.activeV202504 {
  background-color: #3f78ba;
  color: white;
  box-shadow: rgb(204, 219, 232) 3px 3px 3px -1px inset, rgba(255, 255, 255, 0.5) -3px -3px 3px -1px inset;
}


/************************************************ App Screenshots Carousel (or for portrait screenshots) ************************************************/
.appScreenshots {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
  border-radius: 12px;
}

.appScreenshots-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.appScreenshots-slider img {
  min-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  pointer-events: none;
}

.appScreenshots-indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
}

.appScreenshots-indicators {
  padding-left: 0 !important;
  margin: 12px 0 0 0 !important;
  list-style: none !important;
}

.appScreenshots-indicator {
  cursor: var(--mouse-pointer);
  width: 12px;
  height: 12px;
  background-color: #ccc;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.appScreenshots-indicator.active {
  background-color: #007BFF;
}

/* Optional: Hide native radio inputs */
.appScreenshots-indicator input[type="radio"] {
  display: none;
}

/* Swipe Reminder */
.swipe-reminder {
  display: none;
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .swipe-reminder {
    display: block;
  }
}

/************************************************ Show or Hide Toggle ************************************************/
.showORhide-button-container {
  display: flex;
  gap: 1px; /* Small gap between buttons */
  margin-block: 1rem;
  border-radius: var(--card-corner-radius);
  overflow: hidden;
  box-shadow: var(--button-shadow)
}

.showORhide-button {
  flex: 1; /* Each button takes up equal width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  border: none;
  border-radius: 0; /* Remove rounded corners for full-width effect */
  cursor: var(--mouse-pointer);
  text-align: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0; /* Default background color */
  color: #333; /* Default text color */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.showORhide-button:hover {
  background-color: #e0e0e0; /* Slightly darker hover effect */
}

/* Active button design */
.showORhide-button.active {
  background-color: var(--accent-color); /* Use accent color */
  color: white; /* White text */
}

.phone-screenshot {
  border-radius: 30px;
  width: 600px;
  height: auto;
  -webkit-box-shadow:0px 0px 10px 3px rgba(100,172,216,0.9);
  -moz-box-shadow: 0px 0px 10px 3px rgba(100,172,216,0.9);
  box-shadow: 0px 0px 10px 3px rgba(100,172,216,0.9);
}

.phone-screenshot-android {
  position: relative;
  display: inline-block;
  width: 350px;          /* Base width */
  height: 714px;         /* Base height */
  max-width: 100%;       /* Never exceed parent/container width */
  height: auto;          /* Allow height to scale */
  aspect-ratio: 350 / 714; /* Modern browsers: maintains exact proportions */
  margin-bottom: 1rem;
}

/* Fallback for older browsers (like IE/older Safari) */
@supports not (aspect-ratio: 1) {
  .phone-screenshot-android::after {
    content: "";
    display: block;
    padding-bottom: calc(714 / 350 * 100%); /* ~204.68% */
    height: 0;
  }
  .phone-screenshot-android > *:first-child,
  .phone-screenshot-android::before {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
  }
}

.phone-screenshot-android img,
.phone-screenshot-android iframe{
  position: absolute;
  top: 2%;
  left: 5.1%;
  width: 90.2%;
  height: auto;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
  /* No fixed height — scales with container */
}

.phone-screenshot-android::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/hc/theming_assets/01K6ANV9NW8WZT3K2QD5W4X3F9);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
}

.phone-screenshot-ios {
  position: relative;
  display: inline-block;
  width: 350px;          /* Base width */
  height: 714px;         /* Base height */
  max-width: 100%;       /* Never exceed parent/container width */
  height: auto;          /* Allow height to scale */
  aspect-ratio: 350 / 714; /* Modern browsers: maintains exact proportions */
  margin-bottom: 1rem;
}

/* Fallback for older browsers (like IE/older Safari) */
@supports not (aspect-ratio: 1) {
  .phone-screenshot-ios::after {
    content: "";
    display: block;
    padding-bottom: calc(714 / 350 * 100%); /* ~204.68% */
    height: 0;
  }
  .phone-screenshot-ios > *:first-child,
  .phone-screenshot-ios::before {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
  }
}

.phone-screenshot-ios img {
  position: absolute;
  top: 2.2%;
  left: 5%;
  width: 90%;
  height: auto;
  border-radius: 25px;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
  /* No fixed height — scales with container */
}

.phone-screenshot-ios::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/hc/theming_assets/01K7H4SM9T8A4CN03S7CC9CSVQ);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
}

.phone-screenshot-android::after,
.phone-screenshot-ios::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
    filter: blur(5px);
    z-index: 0;
}

/* Modal container */
.newmodal-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000000000;
  justify-content: center;
  align-items: center;
}

.newmodal {
  position: relative;
  max-width: 800px;
  width: 90%;
  height: 80vh;
  max-height: calc(100vh - 40px);
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.newmodal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: #171717;
  color: white;
  border: white 3px solid;
  border-radius: 50%;
  cursor: var(--mouse-pointer);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Critical: Ensure the iframe container takes full height */
#autoFilloutEmbedContainer,
#filloutEmbedContainer,
#filloutEmbedContainer iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
/*   overflow: auto; */
}

#snow-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}

/* === PRODUCT SEARCH INPUT (isolated copy of your original style) === */

/* Layout: input + clear button side by side */
.ps-containerv3 {
  display: flex;
  align-items: center;
  margin-block: 1rem;
}

/* Wrapper to control dropdown positioning and width */
.ps-wrapperv3 {
  position: relative;
  width: 100%;
}

/* Clear button (×) placed beside input */
.clear-buttonv3 {
  position: absolute;
  top: 50%;
  right: 8px; /* 8px from right edge */
  transform: translateY(-50%);
  color: #acd9ed;
  cursor: var(--mouse-pointer);
  font-size: 0.9em;
  opacity: 0.8;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  z-index: 2;
}

.clear-buttonv3:hover {
  opacity: 1;
}

.clear-buttonv3 .fa-solid {
  pointer-events: none;
  font-size: inherit;
}

.ps-v3-hide {
  display: none !important;
}

/* Dropdown list - matches input width, no bullets, appears below */
.dropdown-listv3 {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--surface-1);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) white;
    margin-top: 0.5em !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: center;
    color: var(--textmuted);
}

/* Dropdown item styling */
.dropdown-itemv3 {
    padding: 10px 12px;
    cursor: var(--mouse-pointer);
    border-top: 1px solid var(--border-subtle);

    &:first-child {
        border-top: none;
    }
}

.dropdown-itemv3:hover,
.dropdown-itemv3.focusedv3 {
    background: var(--surface-2);
    color: var(--textsharp);
}

.no-matchv3 {
  color: #888;
  text-align: center;
  font-style: italic;
  pointer-events: none;
}

.neon-input {
  caret-color: #f0f0f0;
  width: clamp(15rem, calc(30vw + 0.5rem), 20rem);
  padding: 5px 32px 5px 10px; /* ← 32px right padding for the × */
  border: 3px solid var(--neon-border) !important;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
  /* Ensure text doesn't go under clear button */
  box-sizing: border-box;
  
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-top: 1px solid var(--highlight);
}

.neon-input::placeholder {
    color: rgba(255, 255, 255, 0.65);
  	font-size: clamp(0.9rem, calc(2vw + 0.01rem), 1rem);
}

.neon-input:focus {
    border-color: white !important;
    box-shadow:
        0 0 8px #6fb0f0,
        0 0 16px #6fb0f0,
        0 0 28px rgba(111, 176, 240, 0.8),
        0 0 40px rgba(111, 176, 240, 0.5),
        inset 0 0 6px white;
}

/************** Article Tabs **************/
.article-body details.productTabs {
    margin-block: 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--surface-1);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

.article-body details.productTabs:hover {
    box-shadow: var(--shadow-md-accent);
}

.article-body details.productTabs > *:not(summary) {
    padding-inline: var(--padding-outer);
}

.article-body details.productTabs > .productTabs-content {
    overflow-y: auto;
    max-height: calc(80vh - 3rem); /* adjust based on summary height */
    padding: 1rem var(--padding-responsive);
}

.article-body details.productTabs > summary {
    font-size: clamp(1rem, calc(2vw + 0.01rem), 1.1rem);
    padding: 0.5rem clamp(0.5rem, calc(2vw + 0.5rem), 1rem);
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    justify-content: center;
    cursor: var(--mouse-pointer);
    transition: all 0.3s ease;
}

.productTabs-content li > a {
    background: none !important;
}

.article-body details.productTabs > summary::before {
    justify-self: center;
    font-family: "Font Awesome 6 Free";
    font-size: 1.6em;
    font-weight: bold;
    padding-right: clamp(0.5rem, calc(2vw + 0.5rem), 1rem);
}

.article-body details.productTabs#guides > summary::before {
    content: "\f02d";
}

.article-body details.productTabs#specs > summary::before {
    content: "\f46d";
}

.article-body details.productTabs#downloads > summary::before {
    content: "\f019";
}

.article-body details.productTabs#videos > summary::before {
    content: "\f167";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

.article-body details.productTabs#basics > summary::before {
    content: "\f5da";
}

.article-body details.productTabs#fixes > summary::before {
    content: "\f7d9";
}

.article-body details.productTabs#faqs > summary::before {
    content: "\f059";
}

.article-body details.productTabs > summary::after {
    content: "\2b";
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 6 Free";
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.article-body details.productTabs:not([open]) > summary:hover {
    background-color: var(--surface-2);
    cursor: var(--mouse-pointer);
}

.article-body details.productTabs[open] {
    border: none;
    border-top: none;
    box-shadow: var(--shadow-md-accent);
}

.article-body details.productTabs[open] > summary {
    font-weight: bold;
    background: linear-gradient(0deg, var(--accent-color) 92%, #3f78ba);
    color: oklch(0.98 0 0);
}

.article-body details.productTabs[open] > summary:hover {
    background: linear-gradient(0deg, var(--accent-color) 87%, #3f78ba);
    box-shadow: var(--card-shadow);
}

.article-body details.productTabs > summary::-webkit-details-marker,
.article-body details.productTabs > summary::marker {
    display: "none";
}

.article-body details.productTabs[open] > summary::after {
    transform: rotate(45deg);
}

.specstable table {
    width: 100%;
    border-collapse: collapse;
}
.specstable th,
.specstable td {
    border: 1px solid var(--border-subtle);
    padding: 5px;
    text-align: left;
}
.specstable th {
    background: var(--accent-color);
    color: white;
}
.specstable tr:nth-child(even) {
    background: var(--surface-1);
}

.specstable tr:nth-child(odd) {
    background: var(--surface-2);
}

.specstable td:first-child {
    background: #5794cd;
    font-weight: bold;
    color: white;
}

ul.appListv2 {
    list-style: none;
    margin: 10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-evenly;
}

.appIconv2 {
    font-family: "Montserrat", monospace;
    font-size: clamp(0.5rem, calc(3vw + 0.5rem), 1.5rem);
    color: var(--appicon-normal);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    flex: 0 1 auto;
    min-width: min-content;
}

.appIconv2::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    font-size: clamp(0.5rem, calc(3vw + 2.5rem), 3rem);
    color: inherit;
    line-height: 1;
    flex-shrink: 0;
    content: "";
}

.appIconv2[data-faicon="android"]::before {
    content: "\f3ab";
}
.appIconv2[data-faicon="androidapk"]::before {
    content: "\f17b";
}
.appIconv2[data-faicon="ios"]::before {
    content: "\f370";
}
.appIconv2[data-faicon="windows"]::before {
    content: "\f17a";
}
.appIconv2[data-faicon="mac"]::before {
    content: "\f179";
}

.appIconv2:hover {
    color: var(--appicon-select);
}

/******************* Text Input design for entering model number *******************/
/* Layout: input + clear button side by side */
.input-container0915 {
    display: flex;
    align-items: center;
}

/* Wrapper to control dropdown positioning and width */
.input-wrapper0915 {
    position: relative;
    width: clamp(300px, 50%, 100%);
    margin-right: 0.5em;
}

.input-container__input0915 {
    font: inherit;
    color: var(--textnormal);
    background: var(--surface-1);
    text-align: center;
    width: 100%;
    padding: 10px;
    border: 2px solid var(--border-medium);
    border-radius: 10px;
    transition:
        border-color 0.3s,
        box-shadow 0.3s;
    z-index: 1;
    position: relative;
}

.input-container__input0915:focus,
.input-container__input0915:valid {
    border-color: var(--border-strong);
    outline: none;
}

.input-container__label0915 {
    position: absolute;
    top: 50%;
    left: 10px;
    color: var(--textmuted);
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent;
}

.input-container__input0915:focus + .input-container__label0915,
.input-container__input0915:valid + .input-container__label0915 {
    top: 8px;
    left: 13px;
    font-size: 12px;
    font-weight: bold;
    color: var(--textnormal);
    transform: translateY(-100%);
    background: var(--surface-3);
    border-radius: var(--radius-xs);
    padding-inline: 5px;
}

/* Clear button (×) placed beside input */
.clear-button0915 {
    color: #ff0000;
    cursor: var(--mouse-pointer);
    font-size: 1.5em;
    opacity: 0.8;
    transition:
        color 0.2s,
        opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.clear-button0915:hover {
    color: #cd2121;
    opacity: 1;
}

.clear-button0915 .fa-solid {
    pointer-events: none;
    font-size: inherit;
}

/* Dropdown list - matches input width, no bullets, appears below */
.dropdown-list0915 {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--surface-1);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) white;
    margin-top: 0.5em !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: center;
    color: var(--textmuted);
}

/* Dropdown item styling */
.dropdown-item0915 {
    padding: 10px 12px;
    cursor: var(--mouse-pointer);
    border-top: 1px solid var(--border-subtle);

    &:first-child {
        border-top: none;
    }
}

.dropdown-item0915:hover,
.dropdown-item0915.focused0915 {
    background: var(--surface-2);
    color: var(--textsharp);
}

.no-match0915 {
    color: var(--textmuted);
    text-align: center;
    font-style: italic;
    pointer-events: none;
}
/******************* END *******************/
/******************* Button design for Android and iOS *******************/
/* Style for the specific li that contains buttons */
.button-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #333;
}

/* Shared button styles */
.showORhide-button-mini {
    min-width: 100px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Raleway";
    font-size: 1rem;
    background: var(--surface-2);
    color: var(--textmuted);
    box-shadow: var(--shadow-sm);
    border: none;
    border-radius: var(--radius-sm);
    cursor: var(--mouse-pointer);
    transition:
        background 0.3s ease,
        color 0.3s ease;
}

/* Hover effect - darker grey */
.showORhide-button-mini:hover {
    background: var(--surface-3);
    box-shadow: var(--shadow-md);
}

/* Active state - use --accent-color from CSS variables */
.showORhide-button-mini.active,
.showORhide-button-mini:focus.active {
    background: var(--accent-color);
    color: white;
    text-shadow: var(--shadow-sm);
}

.showORhide-button-mini.active[data-model="Android"] {
    background: oklch(0.77 0.14 154.82);
    color: white;
}

.showORhide-button-mini.active[data-model="iOS"] {
    background: oklch(0.58 0.14 257.72);
    color: white;
}
/******************* END *******************/
/******************* Mainly to show 2 columns: steps on left, app screenshot on right *******************/
/* Used for app navigation */
.phoneGuide-container {
    display: flex;
    flex-direction: row;
    margin-block: 0.5em;
    padding: 0;
    gap: 0.5em;
}

.textSteps,
.imageThumbnail {
    max-width: 50%;
    flex: 1;
    margin: 0;
    padding: 0;
}

.textSteps > :first-child,
.imageThumbnail > :first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.imageThumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

@media (max-width: 600px) {
    .phoneGuide-container {
        flex-direction: column;
        margin-block: 0;
        gap: 0.5em;
    }
    .textSteps {
        max-width: 100%;
    }
    .imageThumbnail {
        max-width: 70%;
        margin-inline: auto;
    }
}
/******************* END *******************/
/******************* Span designs for better emphasis *******************/

.actionstep {
    color: var(--actionstep-color);
    background: var(--actionstep-bg);
    border-radius: 5px;
}

.fadedhighlight {
    background: var(--fadedhighlight-bg);
    color: var(--fadedhighlight-color);
}

.article-body code {
    background: var(--code-bg);
    border: 1px solid var(--border-subtle);
    color: var(--code-color);
  	padding-inline: 0.25rem;
}

/** App and UI Menu buttons **/
.button_default,
.appbuttonYesV202504,
.appbuttonNoV202504,
.UIbuttonV202504 {
  	display: inline-block;
    border-radius: var(--radius-xs);
    font-family: "DM Sans", sans-serif;
    font-size: 0.85rem;
    padding: 2.5px 5px;
    margin: 2px 0;
    box-shadow: var(--shadow-sm);
    border: 0;
    position: relative;
    top: -0.1rem;
}

.button_default {
    color: var(--button_default-color);
    background: var(--button_default-bg);
}

.button_default em[class*="fa-"] {
  font-style: normal;
}

.appbuttonYesV202504 {
    background: var(--appbuttonYesV202504-bg);
    color: var(--appbuttonYesV202504-color);
    border-radius: 12px;
    padding: 2.5px 8px;
}

.appbuttonNoV202504 {
    background: var(--appbuttonNoV202504-bg);
    color: var(--appbuttonNoV202504-color);
    border-radius: 12px;
    padding: 2.5px 8px;
}

.UIbuttonV202504 {
    background: var(--UIbuttonV202504-bg);
    color: var(--UIbuttonV202504-color);
}

.path-indicator {
    border-radius: var(--radius-xs);
    font-family: Roboto, "Open Sans", "Helvetica Neue", sans-serif;
    margin: 1px 3px;
    display: inline-flex;
    align-items: center;
    padding: 0 0 0 5px;
    font-size: 0.92em;
    box-shadow: var(--shadow-sm);
}

.path-indicator strong:last-child {
    background: var(--actionstep-bg);
    color: var(--actionstep-color);
    padding: 2px 5px;
    margin: 0 0 0 5px;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
/******************* END *******************/
/******************* TSG steps V202504 *******************/
/* General styles for the group */
#tsgstepsV202504 {
    margin-block: 20px;
}

/* Styles for each details item */
#tsgstepsV202504 > details {
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    position: relative;
    box-shadow: var(--shadow-md);
    background: linear-gradient(0deg, var(--surface-1) 97%, var(--surface-2));
}

#tsgstepsV202504 > details > :nth-child(2) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#tsgstepsV202504 > details > p:last-child,
#tsgstepsV202504 > details > ul:last-child,
#tsgstepsV202504 > details > ol:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#tsgstepsV202504 > details[open] {
    padding: 1rem;
    box-shadow: var(--shadow-lg);
    border: none;
    border-radius: var(--radius-lg);
}

#tsgstepsV202504 > details[open] [id$="-step"] {
    padding-inline: var(--padding-responsive) !important;
}

#tsgstepsV202504 > details[open] [id$="-step"] .stepContainer {
    border: var(--border-card) !important;
    border-top: 1px solid var(--highlight) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    background: linear-gradient(
        0deg,
        var(--bg-main) 97%,
        var(--surface-1)
    ) !important;
    position: relative;
}

/* Style the step number */
#tsgstepsV202504 .step-number {
    font-weight: bold;
    margin-right: 10px;
}

/* Hover effect for unexpanded items */
#tsgstepsV202504 > details:not([open]) > summary:hover {
    background: var(--surface-2);
    box-shadow: var(--shadow-md);
}

/* Default style for summary */
#tsgstepsV202504 > details > summary {
    border-radius: var(--radius-lg);
    font-family: "Montserrat";
    font-size: clamp(0.9rem, calc(2vw + 0.01rem), 1rem);
    padding-inline: clamp(0.5rem, calc(2vw + 0.5rem), 1rem);
    padding-left: 40px;
    padding-block: 1rem;
    display: flex;
    align-items: center;
    justify-content: left;
    cursor: var(--mouse-pointer);
    transition: all 0.3s ease;
}

/* Bold summary when details is expanded */
#tsgstepsV202504 > details[open] > summary {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-weight: bold;
    background: var(--accent-color);
    color: whitesmoke;
    position: relative;
    top: -1rem;
    left: -1rem;
    width: calc(100% + 2rem);
}

/* Style for the details content */
#tsgstepsV202504 > details p {
    padding: 10px;
    margin: 0;
}

/* Font Awesome arrow styles */
#tsgstepsV202504 > details > summary::before {
    content: "\f35a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    padding-inline: 0.5rem;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.5s;
    font-size: 1.2rem;
}

/* Rotate the arrow when the <details> element is open */
#tsgstepsV202504 > details[open] > summary::before {
    transform: translateY(-50%) rotate(90deg);
}
/******************* END *******************/
/******************* Steps Carousel V202506 *******************/
/* Group-specific container */
[id$="-step"] {
    max-width: 100%;
    margin-bottom: 20px;
}

/* Step container */
[id$="-step"] .stepContainer {
    border: var(--border-card);
    border-top: 1px solid var(--highlight);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    background: linear-gradient(0deg, var(--bg-main) 97%, var(--surface-1));
    position: relative;
}

/* Step details */
[id$="-step"] .stepDetails {
    display: block;
    width: 100%;
    background: none;
}

/* Active step (only applies when JavaScript is enabled) */
[id$="-step"] .stepDetails.active {
    display: block;
}

/* Step indicators */
[id$="-step"] .stepIndicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-block: 20px;
}

[id$="-step"] .stepCounter {
    background: var(--surface-2);
    color: var(--textnormal);
    border: none;
    border-radius: 40%;
    width: 30px;
    height: 30px;
    cursor: var(--mouse-pointer);
    transition:
        background 0.3s ease,
        border-radius 0.3s ease;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

/* Active step indicator */
[id$="-step"] .stepCounter.active {
    background: var(--accent-color);
    color: white;
    box-shadow:
        rgba(0, 0, 0, 0.75) 3px 3px 3px 0px inset,
        rgb(255, 255, 255) -1px -1px 1px inset;
    transform: translateX(1px) translateY(1px);
}

/* Swipe hint */
[id$="-step"] .swipeHint {
    text-align: center;
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--textmuted);
    display: none;
}
/******************* END *******************/
/******************* Card style V2 *******************/
.cardv2 {
    padding: 20px;
    border-radius: var(--card-corner-radius);
    box-shadow: var(--card-shadow);
    background: white;
}
/******************* END *******************/
/******************* Image as child *******************/
.imgArticle {
    place-items: center;
  text-align: center;
  margin: 1em 0 !important;
}

.imgArticle img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
}

.imgArticle p:not(:has(img)),
.imgArticle figcaption {
    font-size: 0.85rem;
    line-height: 1.5;
    font-style: italic;
  	margin-block: 0 !important;
}

.imgArticle img:hover {
    opacity: 0.95;
}

.imgArticle p:has(img) {
    position: relative;
    display: inline-block;
    margin-inline: auto;
}

.imgArticle p:has(img) {
    margin: 0;
}

.imgArticle p:has(img)::after {
    content: "Click to Enlarge";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    color: var(--text-muted);
    background: var(--bg-main);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-xs);
    font-size: 0.9rem;
    font-family: inherit;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.imgArticle p:has(img):hover img {
    opacity: 0.5;
}

.imgArticle p:has(img):hover::after {
    opacity: 1;
}
/******************* END *******************/
/******************* TSGLIST *******************/
/* Styles for each details item */
details.tsglist {
    margin-block: 0.5rem;
    position: relative;
    border-radius: var(--radius-lg);
}

details.tsglist[open] {
    padding: 1rem 1.5rem;
    overflow: hidden;
}

details.tsglist > summary {
    cursor: var(--mouse-pointer);
}

details.tsglist:not([open]) > summary:hover,
details.tsglist:not([open]) {
    box-shadow: var(--shadow-md);
    background: var(--surface-1);
}

details.tsglist:not([open]) > summary:hover {
    background: var(--surface-2);
    box-shadow: var(--shadow-md);
}

details.tsglist > summary {
    list-style: none;
}

details.tsglist:not([open]) > summary {
    padding: 1rem;
    border-radius: var(--radius-lg);
    font-family: "Montserrat";
    font-size: clamp(0.9rem, calc(2vw + 0.01rem), 1rem);
    align-items: center;
}

details.tsglist[open] > summary {
    padding: 1rem 2rem;
    font-weight: bold;
    font-family: "Montserrat";
    background: var(--accent-color);
    color: whitesmoke;
    position: relative;
    width: calc(100% + 3rem);
    left: -1.5rem;
    top: -1rem;
}

.details-group {
    margin-block: 1.5rem;
    counter-reset: tsglist-counter;
}

.details-group details.tsglist {
    counter-increment: tsglist-counter;
}

.details-group details.tsglist > summary::before {
    content: counter(tsglist-counter);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.2rem;
    margin-right: 0.75rem;
}
/******************* END *******************/
/******************* NEW Carousel *******************/
    .carousel-wrapper {
      justify-self: center;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
/*       overflow: hidden; */
    }

    .carouselv2img {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-drag: none;
      display: flex;
      justify-content: center;
    }

    /* Hide all images by default, show only .active */
    .carouselv2img img {
      display: none;
      max-width: 100%;
      height: auto;
      vertical-align: top;
    }
    .carouselv2img img.active {
      display: block;
    }

    /* Navigation Container */
    .carouselv2nav {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; width: 100%; box-sizing: border-box; flex-wrap: wrap;
    }

    /* Icon Buttons */
    .carouselv2nav-btn {
      background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.1s; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
    }
    .carouselv2nav-btn:active { transform: scale(0.9); }
    .carouselv2nav-btn::before {
      font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.8rem; color: var(--textnormal); filter: drop-shadow(var(--shadow-sm)); line-height: 1;
    }
    .carouselv2nav-btn.first::before { content: "\f100"; }
    .carouselv2nav-btn.prev::before  { content: "\f104"; }
    .carouselv2nav-btn.next::before  { content: "\f105"; }
    .carouselv2nav-btn.last::before  { content: "\f101"; }

    /* Selectors Container */
    .carouselv2nav-selectors {
      display: flex; gap: 0.5rem; padding: 0 0.5rem; align-items: center; justify-content: center;
    }

    /* Base Selector */
    .carouselv2nav-selector {
      display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px;
      font-family: "Font Awesome 6 Free", system-ui, sans-serif;
      font-size: 0.85rem; color: var(--textnormal); background: transparent; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; line-height: 1;
    }

    /* Dot Mode (<=5 images) */
    .carouselv2nav-selector::before {
      font-family: "Font Awesome 6 Free"; content: "\f111"; font-weight: 400; font-size: 0.8rem;
    }
    .carouselv2nav-selector.active::before { font-weight: 900; }

    /* Number Mode (>=6 images) */
    .carouselv2nav-selector.num-mode::before { content: none; }
    .carouselv2nav-selector.num-mode.active {
      background: #1b284f; color: #ffffff; font-weight: 900;
    }
/******************* END *******************/
/******************* Stacking Layers *******************/
.framev3,
details.tsglist[open],
.stepContainer.cardv2,
.imgArticle img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: var(--surface-1);
}

details.tsglist[open] .stepContainer.cardv2 {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: var(--surface-2);
}

details.tsglist[open] .stepContainer.cardv2 .imgArticle img {
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.framev3 .imgArticle img,
details.tsglist[open] .imgArticle img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.stepContainer.cardv2 .imgArticle img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
/******************* END *******************/
/******************* NEW Navbar Header *******************/
/* ===== Hide Checkboxes ===== */
.nav-toggle-state2603,
.dropdown-state2603 {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* ===== Header Base - NO overflow-x hidden ===== */
.header2603 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1.5rem;
  background: transparent;
  color: var(--headerfooter-color);
/*   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
  position: relative;
  z-index: 1000;
  flex-wrap: nowrap;
  container-type: inline-size;
  /* Removed overflow-x: hidden - was clipping dropdowns */
}

/* ===== Logo ===== */
/* .logo2603 {
  display: flex;
  align-items: center;
  height: 4.5rem;
  flex-shrink: 0;
  min-width: fit-content;
} */

.logo2603 img {
/*   max-height: 4.5rem;
  width: auto;
  display: block; */
  vertical-align: middle;
  min-width: 5rem;
  padding-bottom: 5px;
}

/* ===== Search Box ===== */
.ps-containerv3 {
  flex-shrink: 1;
  min-width: 200px;
  max-width: 600px;
}

/* ===== Nav Wrapper ===== */
.nav-wrapper2603 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  position: relative;
}

.nav-wrapper2603 a {
  text-decoration: none;
}

/* ===== Desktop Nav ===== */
.user-nav2603 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.nav-item2603,
.nav-dropdown-toggle2603 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--headerfooter-color);
  font-weight: 500;
  font-size: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  line-height: 1.4;
  box-sizing: border-box;
  border-radius: 4px;
}

.nav-item2603:hover,
.nav-dropdown-toggle2603:hover {
  color: var(--headerfooter-color);
  background: rgba(255, 255, 255, 0.15);
}

.dropdown-arrow2603 {
  font-size: 0.9em;
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
  display: inline-block;
  line-height: 1;
}

/* ===== Desktop Dropdowns with Stable Hover ===== */
.nav-dropdown2603 {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Hover bridge - invisible gap filler to maintain hover state */
.dropdown-bridge2603 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px; /* Bridge gap between trigger and menu */
  background: transparent;
  z-index: 1002;
}

.nav-dropdown-menu2603 {
  position: absolute;
  top: calc(100% + 8px); /* Account for bridge */
  right: 0;
  min-width: 220px;
  margin: 0;
  background: #114581;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  list-style: none;
  z-index: 1001;
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

/* Show dropdown on hover (with bridge maintaining state) */
.nav-dropdown2603:hover .nav-dropdown-menu2603 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown2603:hover .dropdown-arrow2603 {
  transform: rotate(180deg);
}

.nav-dropdown-menu2603 li a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--headerfooter-color);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.nav-dropdown-menu2603 li a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--headerfooter-color);
  padding-left: 1.25rem;
}

/* ===== Hamburger - Hidden by Default ===== */
.mobile-toggle2603 {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--headerfooter-color);
  cursor: pointer;
  padding: 0.5rem;
  min-height: 40px;
  min-width: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1003;
}

.icon-menu2603::before {
  content: "\2630";
  display: block;
  line-height: 1;
}

/* ===== Mobile Nav Menu (Hidden by Default) ===== */
.mobile-nav-menu2603 {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: #1b284f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 0.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 999;
  
  /* Prevent overflow */
  max-width: min(320px, calc(100vw - 3rem));
  min-width: 280px;
}

.mobile-nav-item2603 {
  display: block;
  padding: 0.85rem 1.25rem;
  color: var(--headerfooter-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease;
}

.mobile-nav-item2603:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-item2603:last-child {
  border-bottom: none;
}

/* Mobile Dropdown Accordion */
.mobile-nav-dropdown2603 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav-toggle2603 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  color: var(--headerfooter-color);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mobile-nav-toggle2603:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-dropdown-content2603 {
  display: none;
  flex-direction: column;
  background: rgba(27, 40, 79, 0.95);
}

.mobile-dropdown-content2603 a {
  display: block;
  background: #114581;
  padding: 0.75rem 1.25rem 0.75rem 2rem;
  color: var(--headerfooter-color);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s ease, padding-left 0.15s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-dropdown-content2603 a:hover {
  background: rgba(255, 255, 255, 0.1);
  padding-left: 2.25rem;
}

/* ===== CONTAINER QUERY: Mobile Mode ===== */
@container (max-width: 768px) {
  
  /* Hide desktop nav, show hamburger */
  .nav-wrapper2603 .user-nav2603 {
    display: none;
  }
  
  .nav-wrapper2603 .mobile-toggle2603 {
    display: flex;
  }
  
  /* Adjust header layout */
  .header2603 {
    justify-content: flex-start;
    gap: 1rem;
  }
  
  .logo2603 {
    margin-right: 1rem;
  }
  
  .ps-containerv3 {
    flex-grow: 1;
  }
  
  .nav-wrapper2603 {
    margin-left: auto;
  }
  
  /* Show mobile menu when main checkbox is checked */
  #nav-toggle-state2603:checked ~ .nav-wrapper2603 .mobile-nav-menu2603 {
    display: flex;
  }
  
  /* Accordion: Show Common Concerns content when its checkbox is checked */
  #dropdown-common2603:checked ~ .nav-wrapper2603 .mobile-nav-menu2603 .mobile-nav-dropdown2603:nth-child(2) .mobile-dropdown-content2603 {
    display: flex;
  }
  
  #dropdown-common2603:checked ~ .nav-wrapper2603 .mobile-nav-menu2603 .mobile-nav-dropdown2603:nth-child(2) .dropdown-arrow2603 {
    transform: rotate(180deg);
  }
  
  /* Accordion: Show Contact Us content when its checkbox is checked */
  #dropdown-contact2603:checked ~ .nav-wrapper2603 .mobile-nav-menu2603 .mobile-nav-dropdown2603:nth-child(3) .mobile-dropdown-content2603 {
    display: flex;
  }
  
  #dropdown-contact2603:checked ~ .nav-wrapper2603 .mobile-nav-menu2603 .mobile-nav-dropdown2603:nth-child(3) .dropdown-arrow2603 {
    transform: rotate(180deg);
  }
  
  /* Change hamburger icon when menu is open */
  #nav-toggle-state2603:checked ~ .nav-wrapper2603 .mobile-toggle2603::before {
    content: "\2715";
  }
  
  /* Disable desktop hover in mobile mode */
  .nav-dropdown2603:hover .nav-dropdown-menu2603 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ===== Accessibility ===== */
.nav-item2603:focus,
.nav-dropdown-toggle2603:focus,
.mobile-toggle2603:focus,
.mobile-nav-toggle2603:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

.user-info-wrapper2603 {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.nav-dropdown2603 {
  min-height: 40px;
}

/* ===== Fallback for Browsers Without Container Query Support ===== */
@supports not (container-type: inline-size) {
  @media (max-width: 768px) {
    .nav-wrapper2603 .user-nav2603 { display: none; }
    .nav-wrapper2603 .mobile-toggle2603 { display: flex; }
    .header2603 { justify-content: flex-start; }
    .logo2603 { margin-right: 1rem; }
    .ps-containerv3 { flex-grow: 1; }
    .nav-wrapper2603 { margin-left: auto; }
    
    #nav-toggle-state2603:checked ~ .nav-wrapper2603 .mobile-nav-menu2603 {
      display: flex;
    }
    
    #dropdown-common2603:checked ~ .nav-wrapper2603 .mobile-nav-menu2603 .mobile-nav-dropdown2603:nth-child(2) .mobile-dropdown-content2603 {
      display: flex;
    }
    
    #dropdown-contact2603:checked ~ .nav-wrapper2603 .mobile-nav-menu2603 .mobile-nav-dropdown2603:nth-child(3) .mobile-dropdown-content2603 {
      display: flex;
    }
    
    #nav-toggle-state2603:checked ~ .nav-wrapper2603 .mobile-toggle2603::before {
      content: "\2715";
    }
  }
}
/******************* END *******************/

/* Hide controller li and checkbox */
.list-controller,
.list-toggle {
  display: none;
}

/* Hide extra items by default */
.list-extra {
  display: none;
}

/* CASE 1: NO .list-extra items → Hide toggle row (nothing to expand) */
ul:not(:has(.list-extra)) .list-toggle-row {
  display: none;
}

/* CASE 2: ALL items are .list-extra → Show all, hide toggle row */
ul:has(.list-extra):not(:has(li:not(.list-extra):not(.list-controller):not(.list-toggle-row))) .list-extra {
  display: list-item;
}
ul:has(.list-extra):not(:has(li:not(.list-extra):not(.list-controller):not(.list-toggle-row))) .list-toggle-row {
  display: none;
}

/* CASE 3: Mixed items (some .list-extra, some not) → Normal toggle behavior */
/* .list-extra already hidden by default (see above) */

/* When checkbox is checked (mixed case only): show extra items */
ul:has(.list-extra):has(li:not(.list-extra):not(.list-controller):not(.list-toggle-row)):has(.list-toggle:checked) .list-extra {
  display: list-item;
}

/* Toggle button visibility (mixed case only) */
ul:has(.list-extra):has(li:not(.list-extra):not(.list-controller):not(.list-toggle-row)):has(.list-toggle:checked) .toggle-more {
  display: none;
}
ul:has(.list-extra):has(li:not(.list-extra):not(.list-controller):not(.list-toggle-row)):has(.list-toggle:checked) .toggle-less {
  display: inline;
}

/* Remove bullet from toggle row */
.list-toggle-row {
  list-style: none;
}

/* Style toggle buttons */
.toggle-more,
.toggle-less {
  cursor: pointer;
  color: #114581;
  font-weight: 500;
  font-style: italic;
  display: inline;
  padding: 8px 0;
  user-select: none;
}
.toggle-more:hover,
.toggle-less:hover {
  text-decoration: underline;
}

/* Optional divider */
.list-toggle-row {
  margin-top: 8px;
  padding-top: 12px;
}

/**************************************/

.article-body button.defaultbtn {
  text-decoration: none;
  cursor: var(--mouse-pointer);
  padding: 12.5px 30px 12.5px 30px;
  border: 0;
  border-radius: 100px;
  background: var(--accent-color);
  color: #ffffff;
  font-weight: bold;
  transition: all 0.5s;
  position: relative;
  box-shadow: var(--simple-shadow);
}

.article-body button.defaultbtn[data-calltoaction-icon] {
  padding: 12.5px 30px 12.5px 50px;
}

.article-body button.defaultbtn[data-calltoaction-icon]::before {
  content: attr(data-calltoaction-icon);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

.article-body button.defaultbtn:hover {
  background-color: #3f78ba;
  box-shadow: var(--elevated-shadow);
  transform: scale(1.1);
}

.article-body button.defaultbtn:active {
  box-shadow: none;
  transform: scale(0.98);
}

#imagePreview {
  margin: 16px 0;
  text-align: center;
}

#previewImg {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  background: #000;
}

#result {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-top: 16px;
}

.field {
  margin: 8px 0;
}

.field label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
  color: #555;
}

.field span {
  font-family: monospace;
  word-break: break-all;
  background: #f1f1f1;
  padding: 6px;
  border-radius: 4px;
  display: block;
}

.copy-group {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.copy-group button {
  flex: 1;
  min-width: 120px;
  font-size: 14px;
  padding: 8px;
}

.info {
  font-size: 0.9rem;
  color: #777;
  margin-top: 8px;
}

.manual-input {
  margin: 16px 0;
  display: flex;
  gap: 8px;
}

.manual-input input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.manual-input button {
  padding: 8px 12px;
  font-size: 14px;
}

.QRstatus {
  text-align: center;
  padding: 10px;
  margin: 10px 0;
  border-radius: 8px;
}

.QRstatus.loading {
  background: #e3f2fd;
  color: #1976d2;
}

.QRstatus.error {
  background: #ffebee;
  color: #c62828;
}

.QRstatus.success {
  background: #e8f5e9;
  color: #2e7d32;
}

.qr-type {
  display: inline-block;
  background: #114581;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}

/* Apply to any element with an ID that can be an anchor target */
.article-body [id] {
  scroll-margin-top: min(10dvh, 64px);
}

.hidden {
    display: none;
}