:root {
    --p-surface-0: #fff;
  --p-surface-50: #fafafa;
  --p-surface-100: #f4f4f5;
  --p-surface-200: #e4e4e7;
  --p-surface-300: #d4d4d8;
  --p-surface-400: #a1a1aa;
  --p-surface-500: #71717a;
  --p-surface-600: #52525b;
  --p-surface-700: #3f3f46;
  --p-surface-800: #27272a;
  --p-surface-900: #18181b;
  --p-surface-950: #09090b;
  
    /* branding colors */
  --neutral--brand--naviam-green: #c4ff00;
  --neutral--brand--naviam-green-transparent: rgba(196, 255, 0, 0.5);
  --neutral--neutral-darkest: #111d23;
  --neutral--brand--naviam-white: #f0f4f6;
  --neutral--brand--naviam-blue: #18242c;
  --neutral--brand--light-blue: #79c8f8;
  --neutral--brand--slate-blue: #365a6f;
  --neutral--pure-white: #fff;
  --neutral--black-800: #19191a;
  --drop-shadow--white: #ffffff1f;
  --drop-shadow--black: #00000040;
  --neutral--neutral-light: #98a0a5;
  --neutral--neutral-dark: #1c303a;
  --neutral--brand--fuscia: #c40f9c;
  --neutral--neutral-lightest: #dadfe2;
  --neutral--neutral-darker: #182833;
  --neutral--brand--naviam-green-logo: #bde64d;
  --neutral--neutral-lighter: #c4cace;

  --text-color: var(--neutral--brand--naviam-white);
  
  --unapplied-changes: color-mix(
    in srgb,
    var(--neutral--brand--fuscia),
    transparent 30%
  );

  --applied-changes: color-mix(
    in srgb,
    var(--neutral--brand--slate-blue),
    transparent 30%
  );

  .bg-transparent {
    background-color: transparent;
  }

  .bg--naviam-green {
    background-color: var(--neutral--brand--naviam-green) !important;
  }

  .bg--naviam-blue {
    background-color: var(--neutral--brand--naviam-blue) !important;
  }

  .bg--naviam-slate-blue {
    background-color: var(--neutral--brand--slate-blue) !important;
  }

  .bg--naviam-white {
    background-color: var(--neutral--brand--naviam-white) !important;
  }

  .color--naviam-green {
    color: var(--neutral--brand--naviam-green) !important;
  }

  .color--naviam-blue {
    color: var(--neutral--brand--naviam-blue) !important;
  }

  .color--naviam-slate-blue {
    color: var(--neutral--brand--slate-blue) !important;
  }

  .color--naviam-white {
    color: var(--neutral--brand--naviam-white) !important;
  }

  .color-text {
    color: var(--text-color) !important;
  }

  .color-sub-text {
    color: var(--sub-text-color) !important;
  }

  .color-text-inverse {
    color: var(--text-color-inverse) !important;
  }

  .color-sub-text-invers {
    color: var(--sub-text-color-inverse) !important;
  }

  --light-grey: #f7f7f7;
  --dark-grey: #969696;
  --white: var(--neutral--pure-white);
  --p-surface-0: var(--neutral--brand--naviam-white);
  --navbar-background-color: var(--neutral--neutral-dark);
  --dark-card-color: var(--neutral--neutral-darker);
  --current-card-color: var(--neutral--neutral-dark);
}


html {
  --unapplied-changes: color-mix(
    in srgb,
    var(--neutral--brand--naviam-green),
    transparent 30%
  );

  --background-gradient: linear-gradient(
    to right,
    var(--neutral--neutral-darkest),
    var(--neutral--neutral-dark) 52%,
    var(--neutral--neutral-darkest)
  );
  
	background-image: var(--background-gradient);
  
  --card-background-gradient: linear-gradient(
    to right,
    var(--neutral--neutral-dark),
    var(--neutral--neutral-darker)
  );

  --text-color: var(--neutral--brand--naviam-white);
  --text-color-inverse: var(--neutral--black-800);
  --sub-text-color: var(--neutral--neutral-light);
  --sub-text-color-inverse: var(--neutral--brand--naviam-blue);

  --focus-color: var(--neutral--brand--naviam-green);

  body:not([data-route='Login']) {
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100%;
    background-image: var(--background-gradient);
    color: var(--text-color);
  }

  .naviam-focus {
    transition: all 0s;
    border-color: transparent;
    outline-offset: 2px;
    outline-width: 1px;
    outline-color: color-mix(
      in srgb,
      var(--focus-color) calc(100% * 1),
      transparent
    );
  }
}

/* Reset CSS */
@charset "utf-8";
html {
    margin: 0;
    padding: 0;
}

html,
body.hc_body {
    height: 100%;
    font-size: 16px !important;
    background-color: #ffffff;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body {
  display: flex;
  flex-direction: column;
}

}
img, iframe {
    max-width: 100%;
    display: inline-block;
}
body a,
body a:hover,
body a:focus {
    color: var(--text-color);
    outline: 0;
    text-decoration: none;
    -webkit-transition: 100ms all ease-in-out 0s;
    -o-transition: 100ms all ease-in-out 0s;
    -ms-transition: 100ms all ease-in-out 0s;
    -moz-transition: 100ms all ease-in-out 0s;
    transition: 100ms all ease-in-out 0s;
}
body a.see-all-articles {
  color:#C40F9C;
}
body a.see-all-articles:hover {
  color:#D657BA;
}
body a:hover {
  color: var(--neutral--brand--naviam-green);
}
a:active,
.btn-default:focus,
.btn-default:active {
    outline: 0;
    text-decoration: none;
}
ul,
ol {
    list-style-type: none;
    padding: 0;
}
body pre {
    white-space: normal;
}

/* Reset CSS ends */

/* ========================================================================================================================================================================*/


/* Hamburger button for small screens/mobile - NEEDS WORK*/
.navigation-button {
  display: inline-block;
  height: 20px;
  width: 36px;
}

/* Not sure why we need this or what it does. */
.header-inner a.dropdown-toggle:hover,
.header-inner .btn:hover,
.green-button:hover,
.header-inner .btn:focus {
.green-button:focus,
  filter: brightness(1.05);
  &:not(.with-image) {
    color: var(--text-color-inverse) !important;
  }
  &.with-image {
    background-color: var(--neutral--brand--naviam-green);
    color: var(--text-color-inverse) !important;
  }
}
.header-inner nav.user-nav > a:hover,
.header-inner nav.user-nav > .login:hover {
    background-color: #333;
}



/* I don;t think this is needed */
.submit-request-heading {margin-top: 0;}

/*-------------------------------------
Corporate logo
-------------------------------------*/
/* Contains the logo image */
.header {
	padding-block: 0.5rem;
	.logo {
	    display: inline-block;
			margin-inline: 5px;  	
  }
}
/* logo image */
.logo img {
    max-width: 180px;
    max-height: 47px;
}
/*-------------------------------------*/

/*-------------------------------------
ABOUT, PRODUCTS, SERVICES
-------------------------------------*/

/* About, Products, Services text*/
ul.primary-menu-list-wrap > li > a {
    letter-spacing: 0.5px;
  &:hover {
    color: var(--neutral--brand--naviam-green);
  }
}

/*-------------------------------------
SUBMIT REQUEST, MY TICKETS, USER BUTTONS
-------------------------------------*/
/* 3 buttons */
nav.user-nav {
    display: table-cell;
    vertical-align: middle;

}

/* 3 buttons hover */
body .nav>li>a:focus, body .nav>li>a:hover {
    background-color: transparent;
}
/* Submit a Request, My Tickets, and User buttons */
.header-inner .btn,
.green-button {
  background-color: var(--neutral--brand--naviam-green);
  color: var(--text-color-inverse);
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 24px;
  border-radius: 9999px !important;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
  margin-left: 8px;
    transition: all 0.25s ease-in-out; /* smoother fade for background + opacity */

}

/* neon outline for user dropdown button */
.header-inner .btn.with-image {
  background-color: transparent;
  color: #BBF31B;
  border: 2px solid #BBF31B;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 9999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease-in-out;
}

/* making sure user dropdown arrow is neon */
.header-right {
	display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.header-right .btn.with-image.dropdown-toggle::after,
.header-right .btn.with-image.dropdown-toggle:after {
  color: #BBF31B !important;
}

.header-inner .btn.with-image:hover {
  opacity: 0.9;
  color: #BBF31B; /* keep green text on hover */
}
/*-------------------------------------*/

/*-------------------------------------
SEARCH STUFF
-------------------------------------*/
/* Contains all of the search stuff and that big blue image -> changed to black with naviam logo*/
.search-form {
	position: relative;
  padding-block: 1rem;  
}
/* Search form is larger on home page */
.home-search-form {
  padding-block-start: 2rem;
  padding-block-end: 0;
}
/* Search bar and text above it */
.wrapper-mains {
    left: 0;
    margin: 0 auto;
    right: 0;
    text-align: center;
    width: 100%;
}
/* Text above search bar */

/* pill that says "Support portal" */

.pill-btn:hover,
.pill-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8.5px 17px 7.5px 18px;
  border-radius: 10px;
  background: rgba(215, 237, 251, 0.06);
  color: rgba(215, 237, 251, 0.60);
  font-size: 12px;
  font-weight: 400;
  cursor: default;
  margin-bottom: 10px;
    margin-top: 10px;

}

.search-title {
    font-size: 3em;
    font-family: 'poppins';
  	margin-bottom: 20px;
    color:#F0F4F6;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top:50px;
}

.search-title2 {
  color:#C4FF00;
    margin-bottom: 12px;
  
}

.search-subtitle {
  color: #E4EAED;
  font-size: 0.32em;
  font-weight: 300;
   margin-top: 26px;
  padding-bottom:14px;
  letter-spacing: 0em;
  
}
/* Search form; contains search bar and button; too tall because it previously had the other button too */
form.search {
    display: inline-block;
    margin: 0 auto;
    max-width: 530px;
    text-align: center;
    width: 100%;
}
/* Searchbar input, shown when on home page */
.wrapper-mains > form > input[type="search"].show {
  box-sizing: border-box;
  display: block;
  text-align: center;
  width: 100%;
 background-color: color-mix(in srgb, var(--p-surface-800) calc(20% * var(--tw-bg-opacity)), transparent);
  border: 1.8px solid var(--neutral--brand--naviam-green-transparent);
  border-radius: 9999px;
  color: #ffffff;
  font-size: 1.2em;
  font-weight: 300;
  height: 50px;z
  overflow: hidden;
  padding: 10px 15px 10px 15px;
  color: #ffffff;
  font-size: 1.2em;
  font-weight: 300;
  padding: 10px 15px;
-webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.wrapper-mains > form > input[type="search"].show:hover {
  filter: drop-shadow(0 4px 20px rgba(100, 243, 26, 0.06));
  background-color: color-mix(in srgb, var(--p-surface-900) calc(20% * var(--tw-bg-opacity)), transparent);
  backdrop-filter: blur(0);
    border: 1.8px solid var(--neutral--brand--naviam-green-transparent); 

}

/* Pressed (active/focus) state */
.wrapper-mains > form > input[type="search"].show:active,
.wrapper-mains > form > input[type="search"].show:focus {
  border-color: var(--neutral--brand--naviam-green);
  border-width: 2.8px;
  outline: none;
  filter: drop-shadow(0 4px 20px rgba(186, 243, 26, 0.06));
	background-color: color-mix(in srgb, var(--p-surface-800) calc(30% * var(--tw-bg-opacity)), transparent);
  backdrop-filter: blur(0);
}

/* Search input is not displayed when not on home page */
.wrapper-mains > form > input[type="search"] {
  display:none;
}

.search-form:not(.home-search-form) {
  display:none;
}

/* Search button, shown on home page */
.wrapper-mains > form > input[type="submit"].show  {
    cursor: pointer;
    font-family: "copenhagen-icons";
    position: relative;
    top: 50%;
    transform: translateY(-100%);
  	float:right;
  	background: transparent;
    border-radius: 3px;
    border: 0;
    color: #C4FF00;
    font-size: 20px;
    padding: 11px 15px;
    right: 5px;
}
/* Search button is not displayed when not on home page */
.wrapper-mains > form > input[type="submit"] {
  display:none;
}
/* Search button changes color on hover */
.wrapper-mains > form > input[type="submit"]:hover {
  color: #B5E915;
/*-------------------------------------*/
}

/* Header section ends */

/* ========================================================================================================================================================================*/

/* Home page starts */

/*-------------------------------------
CATEGORY LIST
-------------------------------------*/
/* Padding above and below category icons*/
section.section-padding {
    padding-top: 2rem;
}
/* Flex (not grid) so a short last row centres itself; --cat-cols pins the
   card width so exactly that many still fit per row. */
.home-wrapper .cat-list {
  --cat-cols: 5;
  --cat-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--cat-gap);
  padding: 0;
  margin: 0;
  justify-content: center;  
}

/* Each card takes an exact 1/--cat-cols share of the row.
   The 0.02px trim absorbs sub-pixel rounding so the last card never
   wraps early on fractional container widths. */
.home-wrapper .cat-list li {
  list-style: none;
  display: flex;     /* was inline-block */
  flex: 0 0 calc(
    (100% - (var(--cat-cols) - 1) * var(--cat-gap)) / var(--cat-cols) - 0.02px
  );
  min-width: 0;
  margin: 0;         /* gap handles spacing */
  border-bottom: 0;  /* optional: remove the underline */
     /* center the whole block */
   
}

/* Card stretches to fill its share of the row */
.home-wrapper .cat-list li .card-grid {
  width: 100%;
}

/* Fewer cards per row as the container narrows */
@media all and (max-width: 1199px) {
  .home-wrapper .cat-list {
    --cat-cols: 4;
  }
}
@media all and (max-width: 991px) {
  .home-wrapper .cat-list {
    --cat-cols: 3;
  }
}

/* In the 2-column band the search bar sits closer to the cards than it does
   at any other width, so give the section extra breathing room. Below 480px
   the taller search form already supplies the gap. */
@media all and (min-width: 481px) and (max-width: 767px) {
  .home-wrapper.category-list-section {
    padding-top: 3.5rem;
  }
}

/*-------------------------------------
FEATURED ARTICLES
-------------------------------------*/
/* entire featured articles title bar */
h3.articles-title {
    margin: 1rem 0 0 1rem;
    text-align: left;
}

/* blue featured articles thing */
h3.articles-title > span {
    /*background-color: #ffffff;*/
     color: var(--text-color);
    display: inline-block;
  font-size: 0.89em;
  margin-left: 20px;
  margin-bottom: 8px;
  margin-top: 40px;
  opacity: 60%;
  font-weight: 500;
}
/* featured articles header text */
h3.articles-title > span.promoted-head {
  background-color: transparent;
	margin-left: 20px;
  margin-bottom: 0.5rem;
   margin-top: 10px;
}

/* featured article individual row */
.wrapper-home ul li {
  padding: 0.25rem 0;
  margin-left: 36px;
  a {
    font-size: 1.1em;
    font-weight: 400;  
    &:hover {
	    color: var(--neutral--brand--naviam-green);
	  }
	}
}

h3.articles-title { background: none !important; }

/* not sure */
.trending-questions h2,
.promoted-articles h3,
.recent-articles h3 {
    display: none;
}

#user #user-dropdown,
select {
  left: inherit;
  --tw-border-opacity: 1;
    border-color:  color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-border-opacity)), transparent);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--p-surface-900) calc(100% * var(--tw-bg-opacity)), transparent);
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--p-surface-0) calc(100% * var(--tw-text-opacity)), transparent);
  a {
    color: var(--text-color);
    height: 3rem;
    display: flex;
    align-items: center;
    &:hover {
      background-color: color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-bg-opacity)), transparent);
      xxx.color: var(--neutral--brand--naviam-green);
    }
  }
}

select { 
  margin-inline-start: 1rem;
  padding: 0.5rem;
}
/* user profile picture (I believe) */
img#user-avatar {
    width: 20px;
    margin-right: 2px;
    border-radius: 100%;
}
/* Home page ends */


/* ========================================================================================================================================================================*/

/* uSED ON CATEGORY, SECTION, AND ARTICLE PAGES */


/*-------------------------------------
/* ---- Left Nav: consistent & size-matched ---- */

/* Container card (works with or without wrapper) */
.left-col .hc-category-list {
  list-style: none;
  margin: 0;
  padding: 10px 10px 5px 10px;          /* slightly reduced padding to match original */
  width: 230px;
  background: #F0F4F6;
  border-radius: 12px;
  
  	left: inherit;
  --tw-border-opacity: 1;
    border-color:  color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-border-opacity)), transparent);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--p-surface-900) calc(100% * var(--tw-bg-opacity)), transparent);
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--p-surface-0) calc(100% * var(--tw-text-opacity)), transparent);
}

/* List items spacing (tighten slightly) */
.left-col .hc-category-list > li {
  margin-bottom: 6px;          /* reduced from 10px */
}

/* Base link row */
.left-col .hc-category-list > li > a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 44px;                /* consistent height, slightly smaller */
  padding: 0 14px;
  border-radius: 12px;
  text-decoration: none;
  line-height: 1.35;
  
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  box-sizing: border-box;
}

/* Headings inside links */
.left-col .hc-category-list > li > a h4 {
  margin: 0;
  font: inherit;
}

/* Beat the script's .text-center so wrapped labels stay left aligned */
.left-col .hc-category-list > li > a article,
.left-col .hc-category-list > li > a h4 {
  text-align: left;
}

/* Hover + active states */
.left-col .hc-category-list > li > a:hover {
  
}

.left-col .hc-category-list > li > a.active {
  background: #365A6F;
  color: #fff;
}

/* Remove image/p text nodes */
.left-col .hc-category-list img,
.left-col .hc-category-list p {
  display: none !important;
}

/* Wrapper neutralized if present */
.menu-wrapper {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
}


/*-------------------------------------*/

/*-------------------------------------
BREADCRUMBS
-------------------------------------*/
/* Breadcrumbs list */
ol.breadcrumbs {
    padding: 20px 0;
    margin-bottom: 0;
}
/* Individual breadcrumb, including / */
ol.breadcrumbs li {
    display: inline-flex;
    align-items: center;
}
/* Breadcrumb text */
.breadcrumbs .breadcrumb > li > a,
ol.breadcrumbs li a {
    color: var(--neutral--neutral-lightest);
    font-size: 1em;
    font-weight: 500;
  	margin-inline-end: 0.5rem;
  	text-decoration: none !important;
}
/* Breadcrumb text changes color on hover */
.breadcrumbs .breadcrumb > li > a,
ol.breadcrumbs li a:hover{
  color: var(--neutral--brand--naviam-green);
}
/* / and / symbol before breadcrumb text */
.breadcrumbs .breadcrumb > li + li:before,
ol.breadcrumbs li + li:before {
    color: #C8D0D5;
    content: "/";
    padding: 0;
  	font-weight: 800;
    margin-inline-end: 0.25rem;
}
/*-------------------------------------*/


/* uSED ON CATEGORY, SECTION, AND ARTICLE PAGES*/

/* ========================================================================================================================================================================*/

/* Section page starts */

/* I don't THINK this is used */
.section-wrapper ul {
    color: #7d7d7d;
    list-style-type: inherit;
    padding-left: 15px;
}
.section-wrapper ul > li {
    padding: 2px 0;
}
.section-wrapper ul > li > a {
    color: #7d7d7d;
    font-size: 1.2em;
    font-weight: 400;
}
.section-wrapper ul > li > a:hover {
    color: #3C6C95;
}




/* Section page ends */

/* ========================================================================================================================================================================*/

/* Category page starts */

/* Category title at top of page */
h1.title {
  border-bottom: 1px solid #C4FF004D;
  margin-top: 0px;
  padding-bottom: 1rem;	
}

/* Individual section within category, contains section title and article list */
.article-wrapper .section,
.category-wrapper .section {
    display: inline-block;
    padding: 0;
    vertical-align: top;
    margin: -3px;
    float: none;
}

/* An empty section is dropped rather than shown as a heading over a "no
   articles" notice. Keyed off what the section holds, not what Guide rendered,
   because script.js drops subsections that lead nowhere. Being CSS, it applies
   before that fetch and still applies if the fetch fails. */
.category-wrapper .section-tree > .section:not(:has(> ul.article-list)):not(:has(> ul.subsection-list)) {
  display: none;
}

/* A section page keeps its notice instead of hiding - a blank page would be
   worse. Rendered unconditionally and shown only once nothing else is left,
   since the subsections Guide listed may not survive the tree fetch. */
.section-template .section:has(> ul.article-list) > .section-empty,
.section-template .section:has(> ul.subsection-list) > .section-empty {
  display: none;
}

/* Names are headers, stepping down from the section title. Bullets belong to
   articles only. */
.section-tree .section > h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.section-tree .section > h3 > a {
  font-size: inherit;
  font-weight: inherit;
}

/* Internal-visibility badge. The templates render this span wherever Guide
   marks a section internal; unstyled it came out empty but still took a slot in
   the .subsection-head row. Lock icon matches the profile badges. */
.visibility-internal {
  display: inline-flex;
  align-items: center;
  color: #C8D0D5;
}

.visibility-internal-icon::before {
  content: "\1f512";
  font-family: "copenhagen-icons";
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  vertical-align: middle;
}

/* Subsection styling */
/* Section tree on the category and section pages. A category page renders
   CATEGORY_PAGE_DEPTH levels of subsections inline and reaches deeper ones with
   .see-all-subsections; a section page renders the whole tree.

   Measurements live here so article lists line up with the subsections beside
   them: a row is indented by --subsection-indent, then the toggle and its gap
   push the name across by --article-gutter. An article list indents by both, so
   titles share the subsections' left edge and bullets hang in the toggle's
   column. */
.section-tree {
  --subsection-indent: 0.5rem;
  --toggle-width: 1.25rem;
  --toggle-gap: 0.4rem;
  --article-gutter: calc(var(--toggle-width) + var(--toggle-gap));
  --article-indent: calc(var(--subsection-indent) + var(--article-gutter));
}

.subsection-list {
  margin-left: var(--subsection-indent);
  padding-left: 0;
  line-height: 1.75rem;
}

/* Nested level sits in from its parent */
.subsection-list-level-2 {
  margin-left: 1.25rem;
}

.subsection {
  position: relative;
  padding-left: 0;
}

/* Name row. script.js adds this wrapper only to subsections with something to
   drop down; the rest stay the bare link the template rendered. */
.subsection-head {
  display: flex;
  align-items: flex-start;
  gap: var(--toggle-gap);
}

/* The name - a header, not a bulleted entry */
.subsection > a,
.subsection-head > a {
  display: inline-block;
  font-weight: 600;
  opacity: 1;
}

.subsection-level-1 > a,
.subsection-level-1 > .subsection-head > a {
  font-size: 1.1rem;
}

.subsection-level-2 > a,
.subsection-level-2 > .subsection-head > a {
  font-size: 1rem;
}

/* Dropdown toggle. A control of its own, so the name beside it still links
   through to the subsection page.

   Qualified with the element so it outweighs the site-wide [type="button"] rule
   further down, which otherwise ties on specificity, wins on order, and paints
   the chevron as a filled button. */
button.subsection-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--toggle-width);
  height: 1.75rem; /* the list's line-height, so it sits on the first line */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

button.subsection-toggle:hover,
button.subsection-toggle:focus {
  background: none;
  color: inherit;
  opacity: 1;
}

button.subsection-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.subsection-chevron {
  transition: transform 150ms ease-in-out;
}

/* Open: chevron points down at its panel */
.subsection.is-open > .subsection-head > .subsection-toggle > .subsection-chevron {
  transform: rotate(90deg);
}

/* What the toggle opens */
.subsection-panel {
  margin-left: 1.5rem;
}

.subsection-panel[hidden] {
  display: none;
}

/* The panel carries the indent, so nothing inside it adds its own */
.subsection-panel {
  --subsection-indent: 0px;
}

.subsection-panel > .subsection-list-level-2 {
  margin-left: 0;
}

/* Line spacing for subsections */
.subsection-panel ul {
  margin-top: 0;
  margin-bottom: 0;
}

.section-tree ul.subsection-list:has(+ ul.article-list) {
  margin-bottom: 0;
}

.section-tree ul.subsection-list + ul.article-list {
  margin-top: 0;
}

/* Link to the rest of a section's articles, lined up with the titles above */
.section-tree a.see-all-articles {
  display: inline-block;
  margin: 0.15rem 0 0 var(--article-indent);
  font-size: 0.8em;
  font-weight: 500;
}

/* Link to a subsection's own page, where its deeper subsections are listed */
body a.see-all-subsections {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.8em;
  font-weight: 500;
  opacity: 1;
  color: #C40F9C;
  white-space: nowrap;
}

body a.see-all-subsections::after {
  content: " \203A";
}

body a.see-all-subsections:hover {
  color: #D657BA;
}

/* On the category page it sits on its own line instead of running on from the
   subsection name */
body .category-wrapper a.see-all-subsections {
  display: block;
  margin-left: 0;
  margin-top: 0.15rem;
}

/*-------------------------------------
SEARCH ON CATEGORY
-------------------------------------*/
/* Small search box on left side */
.article-wrapper input[type=search],
.category-wrapper input[type=search] {
  position: relative;
  float:left;
  box-sizing: border-box;
  display: inline-block;
  text-align: left;
  width: 230px;
  border: 1px solid #C8D0D5;
  border-radius: 999px;
  color: #000000;
  font-size: 1em;
  font-weight: 450;
  height: 36px;
  overflow: hidden;
  background-color: #fff;
  padding-left: 15px;
  padding-right:15px;
  margin-bottom:10px;
    padding: 0.5rem;
	left: inherit;
  --tw-border-opacity: 1;
    border-color:  color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-border-opacity)), transparent);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--p-surface-900) calc(100% * var(--tw-bg-opacity)), transparent);
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--p-surface-0) calc(100% * var(--tw-text-opacity)), transparent);
}
/*-------------------------------------*/

/*-------------------------------------
ARTICLES ON CATEGORY PAGE
-------------------------------------*/
/* Article lists within sections. Titles share the subsection names' left edge;
   the marker hangs centred in the toggle's column, so the wider star and the
   bullet land in the same place. Measurements come from .section-tree; the
   fallbacks cover article lists rendered outside the tree. */
ul.article-list { 
  padding-left: var(--article-indent, 20px);
  line-height: 1.75rem;
	.li {
  	padding: 6px 0;
    line-height: 2rem;
  }

  /* Positions the marker against its own row, not whichever ancestor happens
     to be positioned - that differs between the two pages. */
  li {
    position: relative;
  }

  li::before {
  	position: absolute;
    left: calc(-1 * var(--article-gutter, 19px));
    width: var(--toggle-width, 1.25rem);
    text-align: center;
  	font-size: 1rem;
    margin-top: -1px;
  }

 	li:not(.article-promoted)::before {
  	content: "•";
  	color:#f0f4f680;
	}
  
  li.article-promoted::before {
	  content: "★";
    list-style-type: none;
	  color: gold;
  }
  
  span {
	  display: none;
	}
}

/*-------------------------------------*/


/* Not sure */
.section-template h1.title {
    margin-bottom: 20px;
}
/* Category page ends */

/* ========================================================================================================================================================================*/

/*not sure*/
.content-area ul {
    list-style-type: disc;
    padding-left: 20px;
}
/* not sure */
.content-area ol {
    list-style-type: decimal;
    padding-left: 20px;
}


/* ========================================================================================================================================================================*/

/*Search result start*/
/*-------------------------------------
POSSIBLY CAN BE REMOVED
-------------------------------------*/
/* Not sure, but probably not needed since we aren't using community 
.community-search {
    padding-left: 30px;
}
*/
/*-------------------------------------*/


/* search results are displayed in one column, full width of screen */
.search-results-column {
    width: 100%;
}

/* 'x results for "<search term>"' heading text */
.search-results h1 {
    border-bottom: 1px solid #8EC850;
    color: #333333;
    font-size: 2em;
    font-weight: 500;
    padding: 0 0 25px;
}

/*-------------------------------------
ARTICLE TITLES
-------------------------------------*/
/* Article title with link */
.search-result-link {
    color: #444444;
    font-size: 1.4em;
    font-weight: 400;
}
/* Article title with link changes color on hover*/
.search-result-link:hover {
  color: #1C8BC7;
}
/*-------------------------------------*/

/*-------------------------------------
INDIVIDUAL RESULT BLOCK 
-------------------------------------*/
/* Individual result chunk*/
.search-result {
    border-bottom: 1px solid #ececec;
    padding: 35px 0 0;
}
/* One block of result in results list*/
li.search-result {
    padding: 20px 0 !important;
}
/* list item in results list (no bullets) */
.search-results-list li {
    list-style: none;
}
/*-------------------------------------*/


/*-------------------------------------
RESULT CONTENT
-------------------------------------*/
/* author, date, breadcrumbs below article title */
.search-result-meta,
.search-result-meta a {
    color: #444444;
    padding-bottom: 26px;
}
/* breadcrumb text */
.search-result-meta a {
    color: #3C6C95;
    font-weight: 600;
}
/* Icon will show up if an article has votes*/
.search-result-votes {
    
    border-radius: 2px;
    color: #FFF;
    display: inline-block;
    line-height: 1;
    margin-left: 5px;
    padding: 4px 5px;
    position: relative;
    top: -2px;
}
/* icon for votes */
.search-result-votes:before {
    content: "👍";
    margin-right: 3px;
}
/* Search term was previously highlighted in blurbs under search results, I changed it to be bold and blue */
section.search-results-column em {
/*     background: #ffff00; */
  	color: #1C8BC7;
}
/*-------------------------------------*/




/*search result end*/

/* ========================================================================================================================================================================*/

/* Request list page */
/*-------------------------------------
POSSIBLY CAN BE REMOVED
-------------------------------------*/
/* .my-activities-header .breadcrumbs li:first-child,
.my-activities-header .breadcrumbs li::before {
    display: none;
} */
/* .my-activities-header .breadcrumbs li {
    color: #000000;
    font-size: 20px;
    font-weight: normal;
} */
/* .breadcrumbs li + li::before {
    content: ">";
    margin: 0 4px;
} */
/* .my-activities-header {
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 25px;
    padding: 25px 0;
    background: #fff;
} */
/* main .inner-pages {
    margin: 0 auto;
    padding: 0 20px;
    width: 980px;
} */
/* .my-activities-nav {
    margin-bottom: 25px;
} */
/* .nav li a,
.nav-bordered li a,
.nav-spaced li a {
    font-weight: normal;
} */
/* .nav-bordered li + li {
    border-color: #eeeeee;
    border-style: solid;
    border-width: 0 0 0 1px;
    margin: 0 0 0 30px;
    padding: 0 0 0 30px;
} */
/* .main-column > p {
    padding-top: 20px;
} */
/*-------------------------------------*/

/*-------------------------------------
MY REQUESTS, REQUESTS I'M CC'D ON, 
AND ORGANIZATION REQUESTS
-------------------------------------*/
/* Formats My Request, Requests I'm CC'd On, and Organization Requests */
/* .nav-bordered li,
.nav-spaced li {
    display: inline-block;
    font-weight: 500;
    background: transparent;-> previous styling
}

.nav-bordered li,
.nav-spaced li {
    display: inline-block;
    font-weight: 500;
    background: transparent;
} -> previous styling*/ 


.nav-bordered li,
.nav-spaced li {
  display: inline-flex;
  background-color: var(--neutral--brand--slate-blue);
  color: var(--text-color-inverse);
  outline-color: var(--focus-color);
  border-color: transparent;
  margin: .25rem;
  align-items: stretch;
  border-radius: 0.25rem;
  transition: all .2s ease;
}

/* Inner links (if you use <a> inside li) */
.nav-bordered li a,
.nav-spaced li a {
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
  transition: all 0.2s ease;
  padding: 0.5rem;
  color: var(--text-color-inverse) !important;
}

/* Hover state */
.nav-bordered li:not(.active):hover,
.nav-spaced li:not(.active):hover { 
  transform: scale(1.05);
  filter: brightness(1.5);
}

/* Active (selected tab) state */
.nav-bordered li.active,
.nav-spaced li.active,
.nav-bordered li.active a,
.nav-spaced li.active a {
  background: var(--neutral--brand--light-blue);
  padding: 0.3rem;
}




/* Margin underneath */
.my-activities-sub-nav {
    margin-bottom: 15px;
}
/*Space in between each one */
.nav-spaced li + li {
    margin: 0 0 0 8px;
}
/*-------------------------------------*/

/*-------------------------------------
TABLE
-------------------------------------*/
/* Formats table spacing */
table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
    border: 1px solid #DCDDDE;
}
/* Formats table lines, font, etc - do we want to add lines? */
th {
    border-width: 1px 0;
    color: #bebebe;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}
/* Formats horizontal lines */
body td,
body th {
    border-color: #DCDDDE;
    border-style: solid;
    padding: 12px;
}
/* border for table content*/
td {
    border-width: 0 0 1px;
}

/* Gray bar with search and sort */
.request-table-toolbar {
  	margin-block: 2rem;
    display: table;
    padding: 8px;
    width: 100%;
    background-color: var(--current-card-color);
    border-width: 1px !important;
    border-color: color-mix(
      in srgb,
      var(--current-card-color) 90%,
      var(--text-color) 10%
    ) !important;
  	border: 1px solid var(--neutral--neutral-lighter);
  	border-radius: 0.25rem;
  	.request-table-toolbar-form {
  		display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 2rem 1rem;
      align-items: center;
      gap: 1rem;
      
      input[type="search"] {
        padding-inline-start: 1rem;
        flex: 1;
      }
  	}
}
/* Search bar in toolbar */
.requests-search {
    border-radius: 20px;
    outline: medium none;
    padding: 6px 15px;
    border: 1px solid #DCDDDE;
}
/* filter */
.request-table-filters {
    display: flex;
  	gap: 1rem;
    text-align: right;
  	align-items: center;
}

/*-------------------------------------*/

/* Request list page end */

/* ========================================================================================================================================================================*/

/* Request page */

/*-------------------------------------
POSSIBLY CAN BE REMOVED
-------------------------------------*/
/* not sure */

.dropdown-menu {
  padding: 0 !important;
  background-color: #121212 !important;
  border: 1px solid color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-border-opacity)), transparent);
  a {
    text-decoration: none !important;
  }
}
.dropdown-menu-caret::before,
.dropdown-menu-caret::after {
  display: none;
}


.dropdown-menu[aria-expanded=true] {
    left: inherit;
    right: 0;
}

/* not sure */
/* .upload-pool {
    margin: 0;
    overflow: hidden;
    padding: 0;
} */
/*-------------------------------------*/


/*-------------------------------------
COMMENTS
-------------------------------------*/

/* contains all of the comments on this ticket */
.comment-list {
    margin-bottom: 25px;
}
/* table of comments*/
.comment,
.comment-form {
    display: table;
    table-layout: fixed;
    width: 100%;
}
/* line above first comment*/
.comment-list > *:first-child {
  /*     border-top: 1px solid #8EC850; */
}

/* Line after last comment */
.comment-list > * {
    border-bottom: 1px solid #ddd;
    padding: 25px 0;
}

/* contains name, comment, and date */
.comment > *,
.comment-form > * {
    display: table-cell;
    vertical-align: top;
}
/*-------------------------------------*/


/*-------------------------------------
AVATARS
-------------------------------------*/
/* image for commenter's avatar */
.comment-avatar img {
    border-radius: 50%;
    max-height: 65px;
    max-width: 65px;
}
/* Person's profile picture shows up before comment (spacing)*/
.comment-avatar {
    position: relative;
    width: 85px;
}
/*-------------------------------------*/


/*-------------------------------------
COMMENT DATES
-------------------------------------*/
/* Gray "Request #x" at top and Gray date on right */
.request-id,
.comment-published {
    color: #bebebe;
}
/* Space before comment date, not sure why?*/
.comment-published::before {
    content: " ";
    display: inline-block;
    width: 5px;
}
/* not sure what .coment-pedning, .comment-official are */
.comment-published,
.comment-pending,
.comment-official {
    border: 1px solid rgba(0, 0, 0, 0);
    float: right;
    font-size: 11px;
    padding: 1px 5px;
}
/*-------------------------------------*/

/*-------------------------------------
NEW COMMENT INPUT
-------------------------------------*/
/* space for typing new comments*/
.comment-form textarea {
    border-width: 1px;
}

/* comment input */
textarea,
input[type="text"] {
    width: 100%;
}
textarea {
    height: 100px;
    padding: 7px 10px;
    resize: vertical;
    border: 1px solid #3F3F46;
  	border-radius: 6px;
}
/*-------------------------------------*/

/*-------------------------------------
ATTACHMENTS
-------------------------------------*/
/* comment attachments */
.comment-attachments {
    border: 1px solid #dddddd;
    margin-top: -1px;
    padding: 10px;
}
/* space for uploads (dotted lines) */
.upload-dropzone {
    border: 2px dashed rgba(0, 0, 0, 0.05);
    font-size: 12px;
    overflow: hidden;
    position: relative;
    text-align: center;
}
/* space for uploads */
.upload-dropzone input[type="file"] {
    cursor: pointer;
    font-size: 250px;
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}
/* icon before space for uploads POSSIBLY REPLACE WITH EMM ICON*/
.upload-dropzone span::before {
    content: "";
    font-family: "entypo";
    font-size: 30px;
    margin-right: 5px;
    position: relative;
    top: -2px;
    vertical-align: middle;
}
.upload-dropzone span {
    color: #d1d1d1;
    display: inline-block;
}
/*-------------------------------------*/

/*-------------------------------------
DETAILS ON RIGHT SIDE
-------------------------------------*/
/* Info box on right side */
.request-details {
    background: none repeat scroll 0 0 #f9f9f9;
    border: 1px solid #eeeeee;
    border-radius: 3px;
    font-size: 12px;
    margin: 0 0 10px;
    padding: 15px 20px;
}
/* Detail titles (bolded) */
.request-details dt ~ dt {
    font-weight: bold;
    margin-top: 15px;
}
/* Detail text */
.request-details dd {
    margin: 2px 0 0;
    word-wrap: break-word;
}
/* Open icon */
.request-open {
    background: #59BBE0;
}
/* answered icon, not sure, need to test further */
.request-answered {
    background: #F5CA00;
}
/* solved icon */
.request-solved {
    background: #8EC850;
}
/* Status text */
.request-status {
    border-radius: 3px;
    color: #ffffff;
}
/* Bubble around status */
.label,
.request-status {
    border-radius: 20px;
    display: inline-block;
    font-size: 10px;
    padding: 3px 10px;
    text-transform: uppercase;
    white-space: nowrap;
}
/*-------------------------------------*/
/* not sure that this belongs here */
.comment-form input[type="submit"] {
    float: right;
    border-style:none;    
}
/* "Please consider this request solved" checkbox */
.comment-mark-as-solved {display: inline-block;}
.comment-form-controls {margin-top: 20px;}
form footer a {
    border-radius: 2px;
    color: #424242;
    padding: 9px 17px;
    vertical-align: middle;
}

/* buttons*/
button,
[role="button"],
[type="button"],
[type="submit"] {
    background: #3C6C95;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
}
[role="button"]:hover, [role="button"]:focus,
[type="submit"]:hover, [type="submit"]:focus {
    color: #fff;
}
/* Request page */

/* ========================================================================================================================================================================*/

/* New Request page */
/*-------------------------------------
FIELDS
-------------------------------------*/

.form-field-label-wrapper {
  padding-inline-start: 2px;
  &>p {
  	font-size: 90%;
  	filter: brightness(.8);
    font-style: italic;
  }
}

/* label above field*/
.form-field label {
    display: inline-block;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
}
/* "*" after label */
.form-field label:before {
    content: "*";
    float: right;
    color: red;
    padding-left: 5px;
}
/* description field */
.form-field #request_description {
    border-color: #ddd;
    margin-bottom: 10px;
    border-radius: 3px;
}
/*-------------------------------------*/

/*-------------------------------------
FIELD SPACING
-------------------------------------*/
/* fields within form */
.form-field {
    width: 100%;
    display: inline-block;
}
/* not sure, SOMEHOW AFFECTS SPACING */
.form-field + .form-field {
    margin-top: 25px;
}
/*-------------------------------------*/

/*-------------------------------------
SUBMIT BUTTON
-------------------------------------*/
/* space below form, including submit button */
.form footer {
    border-top: 1px solid #eeeeee;
    margin-top: 40px;
    padding-top: 30px;
    text-align: right;
    background: #fff;
}

/* submit button */
.form input {
    height: 35px;
    border-radius: 3px;
    border: 1px solid #ddd;
    padding: 0px 10px;
}
/*-------------------------------------*/


/* New Request page End */

/* ========================================================================================================================================================================*/

/* Search Result */
/*-------------------------------------
POSSIBLY CAN BE REMOVED
-------------------------------------*/
/* not sure but I don't think we use this */
/* .powered-by a,
.powered-by a:hover,
.powered-by a:focus,
.powered-by a:active {
    color: #a5a5a5;
} */
/*-------------------------------------*/


/*-------------------------------------
PAGINATION/PAGE NUMBERS
-------------------------------------*/
/* makes page numbers at bottom stay left */
.search-results-pagination ul {
    padding-left: 0;
}
/* not sure how, but controls how results are ordered ? */
.search-bg,
nav.pagination li {
    display: inline-block;
}
/* aligns page numbering at bottom */
nav.pagination {
    margin: 10px 0px 25px 0px;
}
/* ul li = individual page number block, ol = not sure */
nav.pagination ul li,
nav.pagination ol li {
  	cursor:pointer;
    padding: 4px 10px;
  	border-radius: 1px;
    display: inline-block;
    color: #fff !important;
  background: var(--neutral--brand--slate-blue);
}
/* page number boxes get a shadow on hover */
nav.pagination ul li:hover,
nav.pagination ol li:hover {
	background: var(--neutral--brand--light-blue);
}
/* page number text within page number boxes */
nav.pagination ul li a,
nav.pagination ol li a {
    font-weight: 500;
    color: #fff !important;
}
/* The box with the page number we are on is darker than the rest */
nav.pagination ul li.pagination-current {
  background: var(--neutral--brand--light-blue);
}
/* formats current page number box, not sure how but there must be a better way to do this */
.section-wrapper nav.pagination ul li.pagination-current {
    font-weight: 500;
    font-size: 1.2em;
}
/*-------------------------------------*/

/* sOMEHOW CHANGES THE ORDER OF THE RESULTS?*/
.search-result {
    border-bottom: 1px solid #ececec;
    padding: 40px 0 0 0px;
}
/*-------------------------------------
ARTICLE TITLES
-------------------------------------*/
/* Article titles */
.search-result-link,
.search-result-link:hover {
    color: #444444 !important;
    font-size: 1.3em !important;
    font-weight: 400 !important;
}
/* Turns article titles blue on hover */
.search-result-link:hover {
  color: #1C8BC7 !important;
}
/*-------------------------------------*/

/*-------------------------------------
RESULT DETAILS
-------------------------------------*/
/* One line blurb for each search result, not sure if this is necessary */
.search-result-description {
    padding: 0 50px 0px 0;
    color: #959595;
}
/* Line containing author, date created, breadcrumbs */
.search-result-meta {
    color: #959595;
    padding-bottom: 10px;
    padding-top: 10px;
}
/* All bolded parts of meta; author, breadcrumbs */
.search-result-meta a {
    color: #333;
}
/*-------------------------------------*/

/* Entire list of search results */
ul.search-results-list {
    padding-left: 0 !important;
}


/* Search Result End */

/* ========================================================================================================================================================================*/

/* Article comment - NOT ENABLED
.error-page {
    text-align: center;
    padding: 3% 0;
    color: #545454;
}
.error-page h1 {
    font-size: 5em;
    text-transform: uppercase;
}
.error-page h2 {
    text-transform: uppercase;
    padding-top: 70px;
}

ul.copyright-related-bullets li {
    background: none !important;
    padding-left: 0 !important;
}
Article comment End */

/* ========================================================================================================================================================================*/

/* Article voting start */

.article-vote-up,
.article-vote-down {
    box-shadow: none;
    color: var(--text-color);
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
  	background-color: var(--neutral--brand--slate-blue);
  	&:hover {
      filter: brightness(1.05);
      transform: scale(1.05);
      &::before {
      	color: var(--text-color);
      }
      &::after {
 		   opacity: 1;
			}
		}
}
.article-vote-up::before {
    color: #fff;
    content: "Yes";
}
.article-vote-down::before {
    color: #fff;
    content: "No";
}

.article-vote-up::after {
    content: "👍";
  	opacity: 1;
}
.article-vote-down::after {
    content: "👎";
  	opacity: 1;
}

.company-info {
    float: left;
    padding-top: 15px;
}
.company-info a {
    color: #fff;
}
.article-vote {
    display: inline-block;
}
.article-voting ul.share {
    float: right;
    padding-top: 10px;
}
.article-voting {
    border-top: 1px solid #C4FF004D;
    border-bottom: 1px solid #C4FF004D;
    padding: 10px 0;
    margin-top: 20px;
}
.article-voting .article-vote-controls {
    display: inline-block;
}
.article-vote-controls a {
    margin: 11px 2px;
}

.my-activities-table {
  padding-inline: 0.5rem;
  tbody > tr:hover {
    background-color: var(--neutral--brand--slate-blue);
  }
  td {
  	padding: 0;  
  	a {
        width: 100%;
        display: block;
        padding: 0.5rem;
      &:hover { 
        color: var(--text-color) !important;
      }
    }
  }
}

/* Article voting end */

/* ========================================================================================================================================================================*/

/* community - NOT ENABLED

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
    line-height: 0;
}
.clearfix::after {
    clear: both;
}
.vote {
    display: table-cell;
    margin-left: 15px;
    margin-right: 10px;
    min-width: 95px;
    vertical-align: top;
}
.vote-sum {
    font-size: 15px;
    font-weight: bold;
    min-width: 60px;
    padding-left: 0px;
    text-align: center;
}
.vote-sum,
.vote-controls {
    display: inline-block;
    vertical-align: middle;
}
.vote-controls {
    border-radius: 5px;
}
.vote-up::before {
    content: "<";
}
.vote-down::before {
    content: ">";
}
.vote-controls:hover a {
    background: none repeat scroll 0 0 #ffffff;
    border-color: #a6a6a6;
    color: #bbbbbb;
}

.markdown {
    line-height: 1.7;
    word-wrap: break-word;
}

input[type="checkbox"] + label {
    display: inline-block;
    margin-left: 5px;
}
.form-field > input[type=checkbox],
input[type=radio] {
    margin-right: 5px;
    float: left;
}
lable {
    font-size: 12px;
}
h2.request-heading {
    font-size: 1.7em;
    text-transform: capitalize;
}
nav.sub-nav.clearfix {
    margin-top: 4%;
    margin-bottom: 20px;
}
.my-activities-table > p {
    padding-top: 15px;
}
.my-activities-table {
    overflow-x: auto;
}
.con-table tr th + th,
.con-table tr td + td {
    text-align: center;
}
.searchbox:last-child {
    margin-top: 12px;
}
.searchbox-suggestions {
    padding: 9px 0 0 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
.searchbox-suggestions ul li {
    padding: 3px 0;
}
section.main-column form .searchbox {
    padding-top: 10px;
}
section.main-column form .searchbox label {
    padding-bottom: 7px;
}
.footer .footer-inner .col-md-3 {
    float: none;
    display: inline-block;
    margin: -3px;
    vertical-align: top;
}
.comment-actions .dropdown-toggle:after {
    color: #424242;
}
a.submit-a-request,
div#user, .language-selector {
    display: inline-block;
}
a.my_tickets,
div#user, .language-selector {
  display:inline-block;
}
.user-nav div#user {
    vertical-align: top;
}

.comment-body,
.answer-text,
.question-body p {
    word-wrap: break-word;
    word-break: break-all;
}
.comment-body pre,
.answer-text pre,
.question-body pre {
  max-width: 1000px;
}

 Community end */

 /* ========================================================================================================================================================================*/
/* Formats the section descriptions (we don't currently use this) - RELOCATE*/

h3 p.section-description {
    font-size: 0.5em;
    margin: 10px 0 -10px 0;
    font-weight: 100;
}

/* Styles the Zendesk Follow button specifically */
.follow-button-container .button {
    border-radius: 4px;
    padding: 8px 20px;
}

/* Small section description under h3 */
h3 p.section-description {
    font-size: 0.5em;
    margin: 10px 0 -10px 0;
    font-weight: 400;
}

/* Article user info - stacked layout, no right-aligned button */
.article-user-info {
    display: block;        /* revert to normal block layout */
    margin-top: 16px;
    font-size: 0.9em;
    font-weight: 300;
    border-bottom: 1px solid #C4FF004D;
    padding-bottom: 20px;              /* spacing between content and line */
    margin-bottom: 16px;   
   
}

.article-userinfo-and-follow {
    display: flex;                  /* turn it into a flex container */
    justify-content: space-between; /* push first item left, second item right */
    align-items: flex-start;        /* align items at the top */
    gap: 16px;  
padding-bottom:4px;
  
}

/* Avatar styling */
.avatar-and-author > img[alt="Avatar"] {
    border-radius: 9999px;
    width: 30px;
    margin-right: 6px;
    margin-bottom: 8px; /* space between avatar and text */
   margin-top: 0px; /* space between avatar and text */
  
}

/* Writer name */
a[target="_zendesk_lotus"] {
    font-size: 1.2em;
    font-weight: 500;
}

/* Keep label inline so colon stays with it */
.article-user-info strong {
    display: inline;
    font-weight: 400;
    opacity: 50%;
}

/* Optional spacing between colon and date */
.article-user-info time {
    margin-left: 4px;
}

/* Add line breaks between Updated/Created */
.article-user-info strong:not(:first-of-type)::before {
    content: "\A";
    white-space: pre;
    display: block;
    line-height: 0.1; /* adjust as needed for tighter spacing */
}


/* attachment section on article - RELOCATE*/
.article-attachments {
    padding-top: 10px;
}
/* Attachment link on article - RELOCATE*/
.article-attachments a {
    color: #53BDF8;
    font-weight: 600;
}
/* home icon in breadcrumbs  - RELOCATE*/
ol.breadcrumbs {
  display: inline-flex;
  align-items: center;
  /* line-drawn house, same stroke style as the home page arrow */
  --breadcrumb-home-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  li {
    /* masked so the icon takes the link's color and hover state */
    &:first-child a:before {
      content: "";
      width: 1.15em;
      height: 1.15em;
      flex: none;
      background-color: currentColor;
      -webkit-mask: var(--breadcrumb-home-icon) no-repeat center / contain;
      mask: var(--breadcrumb-home-icon) no-repeat center / contain;
      margin-inline-end: 0.5rem;
    }
    a {
      display: inline-flex;
      align-items: center;
    }
  }
}
/* not sure */
#user #user-name {
  max-width: 250px;
  font-size: 1rem;
}
h1.about-post {
    padding-bottom: 10px;
    font-size: 1.9em;
}
/* not sure */
.answer-controls .dropdown-toggle:before {
    content: "\2699";
    font-size: 11px;
    font-family: "entypo";
}


/* ========================================================================================================================================================================*/

/* Responsive CSS start */

@media all and (max-width: 480px) {
    body .home-wrapper .cat-list {
        --cat-cols: 1;
    }
    body .home-wrapper .cat-list li {
        border-bottom: 0;  /* the card draws its own border now */
        border-right: 0;
        width: auto;
    }
    .home-wrapper .cat-list li article {
        margin-bottom: 20px;
    }

    .wrapper-mains > form > input[type="search"] {
        font-size: 1.3em;
    }
    .footer-copyright p {
        text-align: center;
    }
    .search-results {
        padding-left: 15px;
    }
    body h1.search-title {
        font-size: 2.1em;
    }
    .request-table-toolbar > input {
        width: 100%;
    }
    .request-table-filters {
        text-align: left;
        display: table;
    }
    .request-table-toolbar label {
        padding: 9px 5px 4px 1px;
        margin-left: -20px;
    }
    .question-avatar, .answer-avatar {
        display: table;
        padding: 20px 0;
    }
    .nav-bordered li,
    .community-nav li {
        width: 100%;
        padding-left: 0;
    }
    .nav-bordered li + li,
    .community-nav li + li {
        border-color: #fff;
        margin: 7px 0px 2px 0px;
        padding-left: 0;
    }
    .answer-form .answer-body {display: inline;}
    .answer-form {margin: 0;}
    img#user-avatar {display: none;}

    body.hc_body {
        font-size: 12px;
    }
    section.profile-section span.profile-section-sorter.dropdown{
      float: none;
    }
    .profile-section .dropdown-menu[aria-expanded=true] {
      right: initial;
    }
}

.user-nav .pull-right {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.right-col,
.left-col {
  padding-top: 1rem;
}


@media all and (max-width: 767px) {
    .navbar-header .navbar-toggle {
        margin-right: -10px;
        margin-top: -55px;
    }
    .header-right {
        width: 100%;
        margin-top: 10px;
    }
    nav.user-nav.sign-in.hidden-xs {
        top: -60px;
    }
    .request-details-page {margin-bottom: 25px;}
    .header-right nav.user-nav {display: inline;}
    .answer-body img {width: 100%;}
    .user-nav .pull-right {
        float: none !important;
    }
    .right-col {
        margin-top: 20px;
    }
    .home-wrapper .cat-list {
        --cat-cols: 2;
    }
    .home-wrapper .cat-list li {
        width: auto;
      
    }
    body .question-title,
    body .topic-title {
        font-size: 12px;
      
    }
    body .community-nav {
        padding: 0;
      
    }
    .header-inner .btn.submit-a-request {
        padding-bottom: 7px;
    }
    .header-inner .btn.my_tickets {
        padding-bottom: 7px;
    }

}

@media all and (max-width: 600px) {
    .footer-copyright p {
        float: none;
        padding: 5px 0;
        width: 100%;
    }
    .community-nav li:last-child {
        float: none;
        margin: 10px 0px 0px 0px;
        padding: 0;
    }
    .article-voting ul.share {
        float: none;
        display: block;
    }
    body .home-search-form {
        min-height: 250px;
    }
/*     .left-col .hc-category-list > li > a h4 {
        font-size: 10px !important;   */
    }
    body h1 {
        font-size: 26px;
        font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
     		font-weight: 500; 
    }
    body h3 {
        font-size: 18px;
    } 
}
@media all and (max-width: 992px) {
    .header-inner .col-xs-12 {
        text-align: center;
    }
    .header-inner .header-right {
        float: none;
    }
    h1.search-title {
        font-size: 3em;
    }
    .home-wrapper .cat-list li img {
        max-width: 70px;
    }

}

/* Reasponsive CSS end */

/* ========================================================================================================================================================================*/

/*   User Profiles Start */

/* not sure if any of these are used */
.profile-contribution .comment-link,
span.profile-private-badge.btn {
    margin-right: 5px;
}
/* currently the space above name on profile; not sure but there must be a better way to do this */
.profile-header {
    display: flex;             /* 1. Aligns children horizontally */
    flex-direction: row;       /* 2. Forces row direction */
    flex-wrap: nowrap;         /* 3. Prevents items from jumping to the next line */
    align-items: center;       /* 4. Vertically centers items (optional) */
    gap: 15px;                 /* 5. Adds space between the items */
    width: 100%;
    
}
/* not sure */
.profile-header .container {
    display: flex;
    flex-wrap: wrap;
}
/* Contains profile picture, name, and edit profile button (used to have activity stats */
.profile-header .profile-info {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
}

/* profile picture positioning */
.profile-avatar {
    position: relative;
    line-height: 0;
    align-self: center;
    margin-right: 10px;

}
/* not sure */
[dir=rtl] .profile-avatar {
    margin-left: 10px;
    margin-right: 0;
}
/* profile picture shape/size */
.profile-avatar .user-avatar {
    width: 65px;
    height: 65px;
    border-radius: 100%;
}
/* just the name, not sure but could be made simpler? */
.profile-header .basic-info {
    display: flex;
    flex-direction: row; /* This aligns items horizontally */
    align-items: center; /* This keeps the name and buttons vertically centered with each other */
    gap: 0px;
    /* Change these two lines */
    flex: 0 1 auto;       /* Prevents the box from growing to fill space */
    width: fit-content;   /* Forces width to match the text length */
}

.profile-header .basic-info .name {
    margin: 0;
  	margin-left:4px;
    border: 0;
    font-size: 30px;
    white-space: nowrap;  /* Optional: prevents the name from ever wrapping to two lines */
}
/* contains edit profile button */
.profile-header .options {
    display: flex;
    flex-basis: 100%;
    margin-bottom: 2px;
    align-items: center;
    flex-wrap: wrap;
  padding-left:20px;
}

.options a[data-action="edit-profile"] {
    display: inline-block !important;
    background-color: rgba(191, 255, 0, 0.0) !important;
    color:  var(--neutral--brand--naviam-green);
    padding: 8px 14px !important;
  border-color: var(--neutral--brand--naviam-green);
    border-radius: 20px !important;
    text-decoration: none !important;

}

.options a[data-action="edit-profile"]:hover {
    background-color: var(--neutral--brand--naviam-green) !important;
    color: #000 !important; /* Changes text to white when background fills in */
    transition: all 0.3s ease; /* Makes the color change smooth */
    cursor: pointer;
}

/* not sure but something to do with positioning of edit profile button */
.profile-header .options:not(:last-child) {
    margin-bottom: 10px;
}
/* Not sure but I don't think this is used */
.profile-header .description {
    margin: 15px 0;
    flex-basis: 100%;
    word-break: break-all;
    word-break: break-word;
}
/* not sure */
section.profile-section header {
    background: none;
}
/* Somehow marks profile if set to private - need to look into more */
.profile-private-badge {
    text-align: center;
    float: right;
    background: rgba(196, 255, 0, 1);
    color: #fff !important;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid rgba(196, 255, 0, 1);
    margin-right: 6px;
}
.profile-private-badge::after {
    content: "\1f512";
    margin-left: 5px;
    font-family: "copenhagen-icons";
    font-style: normal;
    font-size: 12px;
    font-weight: normal;
    vertical-align: middle;
}
/* Contains navigation options - i.e., Activity Overview, Articles, Posts, Comments */
.profile-nav {
    border: 0;
    margin-bottom: 20px;
    border-top: 1px solid #E4EAED;
    border-bottom: 1px solid #E4EAED;
}
/* Everything below profile-nav */
.profile-section {
    width: 100%;
}
/* Title at top of profile-section */
.profile-section-title {
    flex-basis: 100%;
    margin-bottom: 10;
    margin-top: 6;
}
/* Directly below profile-section-title */
.profile-section-description {
    flex-basis: 100%;
    font-weight: 500;
    font-size: 13px;
  opacity:80%;
}


/* Sorting is available within some of the sections */
.profile-section-sorter {
    flex-basis: 100%;
    font-size: 13px;
}
/* Sorting dropdown */
.profile-section-sorter .dropdown-toggle {
    width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
    right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
    left: 0;
    right: initial;
}
/* 1 block within section */
.profile-activity-contribution.profile-contribution {
  background-color: #19191A; /* The dark background from your original screenshot */
  border-radius: 8px; /* Rounded corners */
  padding-top: 0px;
  margin-top: 10px;
  margin-left: 40px;
}
/* Heading to right of paper symbol */
.profile-contribution-header {
    margin-bottom: 5px;
    background: transparent;
  	color: var(--text-color)
      
}

/* not sure if this is used*/ 
.profile-contribution-title {
    margin: 0 0 5px 0;
    display: inline;
    line-height: 21px;
    font-size: 15px;
    vertical-align: middle;
}
/* body of contribution */
.profile-contribution-body {
    margin: 10px 0;
}
/* not sure why*/
.profile-contribution-list > .profile-contribution {
    border-top: 1px solid #eee;
}
/*n not sure why*/
.profile-contribution-list > .profile-contribution:last-child {
    border-bottom: 1px solid #eee;
}
/* green line on left */
.profile-contribution-list > .profile-contribution::before {
    left: 0;
    position: absolute;
    font-size: 16px;
    color: #8EC850;
    font-family: "copenhagen-icons";
    line-height: 25px;
}
/*not sure*/
[dir=rtl] .profile-contribution-list > .profile-contribution::before {
    right: 0;
}
/* not sure */
.profile-contribution-list .profile-contribution-header {
    margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
    padding-right: 30px;
    padding-left: 0;
}

/* not sure but assuming that this is for if there is no activity or activity is private */
.profile-section .no-activity,
.profile-section .private-activity {
    display: block;
    margin-top: 0;
    color: #999;
}
.profile-section .no-activity {
    margin-top: 20px;
}
.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;
}
/* positions entire list */
.profile-activity-list {
  border-left: 1px solid #49545c; /* This creates the line you see in Harin's profile */
  margin-left: 20px; /* Adjust this to line up perfectly with the avatars */
  padding-left: 0;
  margin-top:50px;
  list-style: none;
 
}
/* positions individual blocks and paper icons */
.profile-activity {
    position: relative;
    padding-bottom: 30px;
}
/* picture, name, and date above each block */
.profile-activity-header {
    display: flex;
    align-items: center;
    margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
    margin-left: 0;
    margin-right: 35px;
}
/* Profile picture in activity header */
.profile-activity-header .user-avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 100%;
}
[dir=rtl] .profile-activity-header .user-avatar {
    margin-left: 10px;
    margin-right: 0;
}
/* Name, activity description, and date in activity header */
.profile-activity-description {
    margin: 0;
}
/* name in profile descrition is bolded */
.profile-activity-description span:first-child {
    font-weight: 600;
    display: block;
}

/* breadcrumbs in activity block */
.profile-section ol.breadcrumbs {
    background: none;
}

/*No / before first breadcrumb */
.profile-section ol.breadcrumbs li:first-child a:before {
    content: none;
}

/* format text in block as a whole */
.profile-activity-contribution {
    padding: 20px;
    margin-top: 10px;
    border-radius: 8px;
    background-color: #f8f8f8;
}

/* paper icon */
.profile-activity:before {
    position: absolute;
    left: 0;
    width: 28px;
    border-radius: 50%;
    content: "";
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: 50% 50%;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #8EC850;
    font-family: "copenhagen-icons";
}
[dir=rtl] .profile-activity:before {
    right: 0;
}
/* paper icon in articles tab */
.profile-articles > .profile-contribution::before,
.profile-activity-list > li[class$="-article"]:before {
    content: "\1f4c4";
}
/* list with activity overview, articles, etc - not sure */
.collapsible-nav-list {
    display: inline;
    flex-direction: column;
    padding: 0;
}
/* not sure if this is necessary */
.collapsible-nav-list li[aria-selected=true] {
    order: 0;
    position: relative;
}
/* formatting for individual navigation list items */
.collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
    display: inline-block;
}

/* Information at bottom of each block */
.meta-group {
    display: flex;
    flex-wrap: wrap;
    padding:0px;
}
/* one piece of information in meta-group */
ul.meta-group > li {
    padding-right:7px;
}
/* Blurb of text within block */
.profile-activity-contribution p {
    text-align: justify;
}
/* articles in profile contribution list */
ul.profile-contribution-list.profile-articles {
    padding: 0px;
}
/* text in edit profile button - might be used elsewhere too, not sure*/
.options a {
    float: right;
		background-color: var(--neutral--brand--naviam-green) !important;
  	color: var(--text-color-inverse);
    padding: 6px 10px;
    border-radius: 100px;
    border: 1px solid #C8D0D5;
  	&:hover { 
      color: var(--text-color-inverse) !important;
      filter: brightness(1.05);
  	}
}
/* color of text in edit profile button */
.profile-info .options a {
  

}


/* name at top */
.basic-info h1 {
    position: relative;
    font-size: 3.1em;
}
/* drop down stuff */
span.profile-section-sorter.dropdown span.dropdown-menu.animated.fadeInDown {
    right: 100%;
    left: 0;
  }
/* dropdown stuff */
span.profile-section-sorter.dropdown {
  float: right;
}
@media (min-width: 768px) {
    .profile-header .container {
        flex-wrap: nowrap;
    }
  
.profile-info-container {
display: flex;
    justify-content: space-between; /* This pushes items to the edges */
    width: 100%;
}

.profile-stats-container {
    display: flex;             /* 1. Enable flexbox */
    flex-direction: row;       /* 2. Forces the two lists side-by-side */
    justify-content: flex-end; /* 3. Pushes everything to the right side of the page */
    align-items: flex-end;     /* 4. Aligns them to the bottom line */
    gap: 20px;                 /* 5. Space between the two lists */
}
/* 1. Shared List Container (Activity & Counters) */
.profile-stats {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 240px;
    height: 140px;
    padding-bottom: 10px;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 500;
    list-style: none; /* Removes default bullets */
}

/* RTL Support for the container */
[dir=rtl] .profile-stats {
    margin-left: 0;
    margin-right: 0;
}

/* 2. Shared Individual Stat Row */
.profile-stats .stat {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
}

/* 3. Shared Label Style (The 110px column) */
.profile-stats .stat-label {
    flex: 0 0 110px; 
    width: 110px;
    font-weight: 300;
    opacity: 0.7; /* 70% opacity */
}

/* 4. Shared Value Style */
.profile-stats .stat-value {
    /* No specific styles needed unless you want to bold the numbers */
}


    .profile-header .options {
        flex-wrap: nowrap;
        flex-basis: auto;
        margin-top: 0;
    }
    .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-stats-activity .stat-value time {
    display: inline-block;   /* needed for width to apply */
    width: 80px;             /* fixed width */
    white-space: nowrap;      /* prevent wrapping */         /* hide overflow if text is longer */
    text-overflow: ellipsis;  /* optional: show "..." if text overflows */
}

    
    .profile-private-badge {
        flex-basis: auto;
    }
   
    .profile-section-sorter {
        flex: 0 1 auto;
        padding-top: 0;
        border-top: 0;
    }
    .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-header {
        margin-left: 0;
    }
    [dir=rtl] .profile-contribution-list .profile-contribution-header {
        padding-right: 0;
    }
    .profile-comments .profile-contribution-breadcrumbs {
        margin-left: 0;
  
    }
    [dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
       display: flex;


  list-style: none;
  padding: 0;
  margin-bottom: 15px;
  font-size: 13px;
  color: #87929d;
    }
    .profile-activity {
        padding-left: 20px;
    }
    [dir=rtl] .profile-activity {
        padding-right: 20px;
        padding-left: 0;
    }
    .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 {
        margin-left: 0;
    }
    [dir=rtl] .profile-activity-header {
        margin-right: 0;
    }
    .profile-activity-description span:first-child {
        display: inline;
    }
    .profile-activity-contribution {
        margin-top: 0;
        margin-left: 50px;
    }
    [dir=rtl] .profile-activity-contribution {
        margin-left: 0;
        margin-right: 50px;
    }
    .profile-activity:before {
        left: -14px;
    }
    [dir=rtl] .profile-activity:before {
        right: -14px;
    }
    .collapsible-nav-list {
        flex-direction: row;
    }
}
@media (min-width: 1024px) {
    .profile-stats-counters {
        flex: 0 0 270px;
    }
    [dir=rtl] .profile-stats-counters {
        margin-right: 0px;
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    .profile-stats-counters .stat {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .profile-stats-counters .stat-label {
        flex: 0 0 124px; 
        width: 124px;
    }
}

@media (min-width: 1024px) {
    .profile-stats-counters .stat-value {
        flex: 0 0 80px;  /* fixed width for counters */
        width: 80px;
    }

    .profile-stats-activity .stat-value {
        flex: 0 0 80px; /* fixed width for activities */
        width: 80px;
    }
}



/*   User Profiles Ends

/* ========================================================================================================================================================================*/

@font-face {
 font-family: 'Proxima_Nova';
 src: url('/hc/theming_assets/01M33MXQ5BWRZH3JM11T1Q3N2B');
}
@font-face {
 font-family: 'Proxima_Nova_Light';
 src: url('/hc/theming_assets/01M33MXQ58GYA8AQV794AFRDYK');
}

@charset "UTF-8";

@font-face {
  font-family: "ezmaxmobile";
  src:local ("Regular"),
  src:url('/hc/theming_assets/01M33MXQ5DTBP9TSM7XXAJRVN3');
  src:url('/hc/theming_assets/01M33MXQ5DTBP9TSM7XXAJRVN3?#iefix') format("embedded-opentype"),
    url('/hc/theming_assets/01M33MXPT6VBD4EP109SR2GYBW') format("woff"),
    url('/hc/theming_assets/01M33MXQ6PNTGKW6BSECCYAHNJ') format("truetype"),
    url('/hc/theming_assets/01M33MXQ7FP41KTS8HR4YKAKBE#ezmaxmobile') format("svg");
  font-weight: normal;
  font-style: normal;

}
p
[data-icon]:before {
  font-family: "ezmaxmobile" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="emm-"]:before,
[class*=" emm-"]:before {
  font-family: "ezmaxmobile" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.emm-bars:before {
    content: "\e07f";
  }





/* --- overrides ---- */
input[type="search"] {
  padding: 0.5rem;
	left: inherit;
  --tw-border-opacity: 1;
    border-color:  color-mix(in srgb, var(--p-surface-700) calc(100% * var(--tw-border-opacity)), transparent);
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--p-surface-900) calc(100% * var(--tw-bg-opacity)), transparent);
    --tw-text-opacity: 1;
    color: color-mix(in srgb, var(--p-surface-0) calc(100% * var(--tw-text-opacity)), transparent);
}

a:not([role="button"]) {
  &:hover {
    color: var(--neutral--brand--naviam-green) !important;
  }
}

a[role="button"] {
  font-size: 0.75rem;
}

.article-body,
.comment-list {
  p {
    color: var(--text-color) !important;
  }
  a {
  	text-decoration: underline !important;
  }
  .dropdown-menu {
    border: 1px solid #efefef;
    a {
      text-decoration: none !important;
      &:hover {
        background-color: #3f3f46 !important;
      }
    }
    span[role="separator"] {
      border-top: 1px solid #C4FF004D;
      height: 1px !important;
      padding: 0;
      margin: 2px;
    }
  }
  *:not(.dropdown-menu) {
    border-width: 0;
    color: var(--text-color) !important;
    background: none;
    background-color: transparent !important;
  }
  td > table {
    display: inline-block;
  }
}

label { 
	font-weight: normal !important;
}

#preview-bar-container {
  & > div {
  	position: relative;
  }
}

.satisfaction-box,
.request-details {
  border: 1px solid color-mix(in srgb, var(--current-card-color) 90%, var(--text-color) 10%);
  border-radius: 20px;
	background-color: var(--current-card-color);
  background: var(--current-card-color);
}


.nesty-input, 
.hc-multiselect-toggle {
  background-color: #121212;
  color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  
}
.hc-multiselect-menu {
  ul {
		li
    {
			label {
    		color: #ffffff;
        &:hover {
          color: var(--neutral--brand--naviam-green) !important;
          background-color: #3f3f46 !important;
        }
  		}
    }
  }
}

.nesty-panel {
  background-color: #121212 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  ul {
    background-color: #121212 !important;
    li {
      background-color: #121212 !important;
      color: #fff;
      height: 2.5rem;
      display: flex;
      align-items: center;
      font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
      font-size: 1rem;
      font-weight: normal !important;
      &:hover {
        color: var(--neutral--brand--naviam-green) !important;
        background-color: #3f3f46 !important;
      }
    }
  }
}

  input:not(type='submit'):not(type='button'){
    background: #121212 !important;
    color: var(--text-color) !important;
  }

	textarea {
  	background: #121212 !important;
		color: var(--text-color) !important;
	}

.form-field{
  input, textarea {
    background: #121212 !important;
  }
  ul {
    background: #121212 !important;
    li {
      background: inherit !important;
      input {
        background: inherit !important;
      }
    }
  }
} 

.form footer {
  background: transparent !important;
}

button, html input[type=button], input[type=reset], input[type=submit] {
  background-color: var(--neutral--brand--naviam-green);
  color: var(--text-color-inverse);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 8px 24px;
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
  margin-left: 8px;
  transition: all 0.25s ease-in-out;
  &:not(.with-image) {
    &:hover {
     filter: brightness(1.05);
      color: var(--text-color-inverse) !important; 
    }
  }
}


html {
  scrollbar-color: var(--neutral--neutral-dark) var(--neutral--neutral-darkest);

  * {
    scrollbar-color: var(--neutral--neutral-darkest)
      var(--neutral--neutral-dark);
  } 
}

select {
  padding: 0.5em 2.5em 0.5em 0.5em;
    border: 1px solid #444;
    border-radius: 0.5rem 0.5rem 0 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #EED 50%), linear-gradient(135deg, #eee 50%, transparent 50%);
    background-position: right 1em center, right 0.75em center;
    background-size: 0.35em 0.35em;
    background-repeat: no-repeat;
  	&:focus {
      outline-offset: 2px !important;
  	}
}

/* ========================================================================================================================================================================*/
/* Article code blocks and their copy buttons (markup wrapper added by script.js) */

/* Code block styling */
.content-area.article-body pre {
  background-color: #1e1e1e !important;
  color: #d4d4d4 !important;
  border-radius: 6px !important;
  padding: 1rem 1.25rem !important;
  overflow-x: auto !important;
  margin: 1rem 0 !important;
  border: 1px solid #3a3a3a !important;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  white-space: pre !important;
}

.content-area.article-body pre > code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  white-space: inherit !important;
  font-size: inherit !important;
}

/* Inline code badges — dark background, light text */
.content-area.article-body :not(pre) > code {
  background-color: #3d4d5c !important;
  color: #f0f4f7 !important;
  border-radius: 4px !important;
  padding: 0.15em 0.4em !important;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
  font-size: 0.875em !important;
  display: inline-block !important;
}

.content-area.article-body :not(pre) > code strong,
.content-area.article-body :not(pre) > code b {
  color: #f0f4f7 !important;
}

/* Copy button, added to each code block by script.js */
.content-area.article-body .code-block {
  position: relative;
}

/* Inset matches the pre's padding, height matches its first line box (0.875rem x 1.6),
   so the button sits on the first line of code rather than above it. */
.content-area.article-body .code-copy {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  box-sizing: border-box;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0 0.5rem;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  background: #2d2d2d !important;
  color: #d4d4d4;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.content-area.article-body .code-block:hover .code-copy,
.content-area.article-body .code-copy:focus,
.content-area.article-body .code-copy--done {
  opacity: 1;
}

.content-area.article-body .code-copy:hover {
  background: #3d3d3d !important;
  color: #ffffff;
}

.content-area.article-body .code-copy:focus-visible {
  outline: 2px solid var(--neutral--brand--naviam-green);
  outline-offset: 2px;
}

/* The .article-body colour override wins over these, so the green border alone marks the copied state. */
.content-area.article-body .code-copy--done {
  border-color: var(--neutral--brand--naviam-green);
  color: var(--neutral--brand--naviam-green);
}

.content-area.article-body .code-copy-icon {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* No hover to reveal it on touch */
@media (hover: none) {
  .content-area.article-body .code-copy {
    opacity: 1;
  }
}