: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: rgba(255, 255, 255, 1);
    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;
}
.home-wrapper .cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0;
  margin: 0;
  justify-content: center;  
}

/* Let the card control its own size */
.home-wrapper .cat-list li {
  list-style: none;
  display: flex;     /* was inline-block */
  width: auto;       /* was 20% */
  margin: 0;         /* gap handles spacing */
  border-bottom: 0;  /* optional: remove the underline */
     /* center the whole block */
   
}

/*-------------------------------------
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;
}

/* 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-block;
}
/* 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;
    display: inline-block;
}
/*-------------------------------------*/


/* 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;
}

.subsection-list .section-list-item > a:first-of-type {
  font-size: 1em;
}

.subsection-list .section-list-item a {
  font-size: .8em;
}

.subsection-list .section-list-item {
  margin-bottom: .5em;
}

/*-------------------------------------
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*/
ul.article-list { 
  padding-left: 20px;
  line-height: 1.75rem;
	.li {
  	padding: 6px 0;
    line-height: 2rem;
  }
 	li:not(.article-promoted)::before {
  	content: "• ";
  	position: absolute;
  	font-size: 1rem;
  	color:#f0f4f680;
    left: 1px;
    margin-top: -1px;
	}
  
  li.article-promoted::before {
	  content: "★";
    list-style-type: none;
	  color: gold;
    position: absolute;
    left: -4px;
    margin-top: -1px;
	  font-size: 1rem; /* adjust to match regular bullets */
  }
  
  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;  
  li {
		&:first-child a:before {
    	content: "\f015";
    	font-family: FontAwesome;
  		color: #53BDF8;
  		font-size: 32px;
  		display: inline-flex;
  		align-items: center;
    	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 li {
        border-bottom: 1px solid #e5e5e5;
        border-right: 0 solid #e5e5e5;
        width: 100%;
    }
    .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 li {
        width: 50%;
      
    }
    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/01HZH90T9DT7YEBKZG7S04D76H');
}
@font-face {
 font-family: 'Proxima_Nova_Light';
 src: url('/hc/theming_assets/01HZH90TDHFAV7E7J5XK8Q5AGJ');
}

@charset "UTF-8";

@font-face {
  font-family: "ezmaxmobile";
  src:local ("Regular"),
  src:url('/hc/theming_assets/01HZH90THX4CZA2FQTVAD3X5F0');
  src:url('/hc/theming_assets/01HZH90THX4CZA2FQTVAD3X5F0?#iefix') format("embedded-opentype"),
    url('/hc/theming_assets/01HZH90TTREBN2HHECNAGK49HF') format("woff"),
    url('/hc/theming_assets/01HZH90TP0VM9MRG903SPNBJTX') format("truetype"),
    url('/hc/theming_assets/01HZH90V0WCWZYYQ998979CN2N#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;
  	}
}