/* 1. LOAD ORIGINAL ZOHO STYLES (Fixes the layout of sign in form) */
@import url("https://static.zohocdn.com/helpcenter/elegant/css/hc_authentication.e23fe04c5ccef9ac9f15.css");
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

* {
      font-family: "DM Sans", sans-serif;
  	  color: white;
}

/* site body */
body {
    /* This paints your Main Page. */
  	color: #FFFFFFCC;
    background: linear-gradient(180deg, #0D2326 0%, #1F4042 20%) !important;
    background-attachment: fixed !important; /* Keeps it steady when scrolling */
    background-repeat: no-repeat !important;
    min-height: 100vh; /* Ensures it covers the full height */
}
.commonStyle__displayBlock{
	color:white;
}

/* This rule basically says: "Wait! If this page contains the 
   Sign-In Box (#signin_flow), ignore the gradient above 
   and be transparent instead." */
html:has(#signin_flow),
body:has(#signin_flow) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important; /* Forces the gradient OFF inside the iframe */
}

/* =========================================================
   LOGIN POPUP FIX (Scoped to .SignInPopup__openBox Only)
   ========================================================= */

/* --- 1. LEFT SIDE: "Already a member?" --- */
/* We target .SignInPopup__openBox first to protect static pages */
.SignInPopup__openBox .Signin__loginHead,
.SignInPopup__openBox .Signin__loginHead .Signin__loginTitle,
.SignInPopup__openBox .Signin__loginHead .Signin__loginSubTitle {
    color: #000000 !important; /* Force Black inside popup only */
}

/* --- 2. RIGHT SIDE: Text Colors (Scoped) --- */

/* Headers ("New User?", "Forgot Password?") */
.SignInPopup__openBox .Signin__userHeader,
.SignInPopup__openBox .Signin__userHeader span {
    color: #000000 !important;
}

/* Description Text - Force Dark Grey */
.SignInPopup__openBox .Signin__userDesc {
    color: #555555 !important;
}

/* Links ("Sign Up", "Reset") - Brand Orange */
.SignInPopup__openBox .Signin__userLink {
    color: #ff9d00 !important;
    text-decoration: none !important;
}
.SignInPopup__openBox .Signin__userLink:hover {
    text-decoration: underline !important;
}

/* --- 3. ICONS: Size & Color (Scoped) --- */
/* Target the SVG specifically inside the popup box */
.SignInPopup__openBox .Signin__loginUserIcon svg {
    /* Color */
    fill: #000000 !important;
    color: #000000 !important;
    
    /* Size */
    width: 45px !important;
    height: 45px !important;
    
    /* Visibility */
    filter: none !important;
    opacity: 1 !important;
}

/* Ensure container has room */
.SignInPopup__openBox .Signin__loginUserIcon {
    width: 60px !important; 
}

/* --- 4. CLOSE BUTTON ('X') --- */
.SignInPopup__openBox .SignInPopup__closeIcon {
    top: 15px !important;
    right: 15px !important;
    z-index: 1000;
    padding: 5px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.SignInPopup__openBox .SignInPopup__closeIcon svg {
    width: 20px !important;
    height: 20px !important;
    fill: #333333 !important; /* Dark Grey */
    color: #333333 !important;
    filter: none !important;
}

/* Hover Effect */
.SignInPopup__openBox .SignInPopup__closeIcon:hover {
    opacity: 1;
}
.SignInPopup__openBox .SignInPopup__closeIcon:hover svg {
    fill: #ff9d00 !important; /* Brand Orange */
    color: #ff9d00 !important;
}

/* =========================================================
   "THANK YOU FOR SIGNING UP" PAGE FIX (Text Visibility)
   ========================================================= */

/* 1. Main Title ("THANK YOU FOR SIGNING UP!") */
.ErrorPage__errorTitle {
    color: #ff9d00 !important; /* Brand Orange for visibility */
}

/* 2. The Message Body ("We have sent an email...") */
.ErrorPage__errorContent p {
    color: #ffffff !important; /* Force Bright White for maximum contrast */
}

/* 3. The Email Address Displayed */
.ErrorPage__userMailId {
    color: #FFF2C6 !important; /* Brand Cream to stand out */
}

/* =========================================================
   CREATE/CHANGE PASSWORD PAGE - INSTRUCTIONS (Scoped)
   ========================================================= */

/* 1. Scoped Parent Container */
.UserContainer__logInMainContainer .UserContainer__innerContainer2 {
    text-align: left !important;
    padding: 20px !important;
}

/* 2. The Header ("Your password,") */
.UserContainer__logInMainContainer .ChangePasswordContainer__profileHeadTitle {
    color: #ffffff !important; /* Bright White */
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* 3. The Instruction Text (Currently invisible dark grey) */
.UserContainer__logInMainContainer .ChangePasswordContainer__profileDesp {
    color: #dddddd !important; /* Light Grey for readability */
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
    opacity: 0.9;
}

/* 4. The Icon (Lock/Feather) */
.UserContainer__logInMainContainer .UserContainer__innerContainer2 svg {
    /* Force Brand Orange */
    fill: #ff9d00 !important;
    color: #ff9d00 !important;
    
    /* Make it visible */
    width: 45px !important;
    height: 45px !important;
    margin-bottom: 15px !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Ticket Submission Form */
.Cc__type2{
  color: red;
}
.Cc__searching {
	color: black;
}
.DropDown__optionTxt, 
.HCNewCaptcha__captchaButton, 
.TextArea__textArea {
 	color: black !important;
}
.TicketFormLeftContainer__sectionName, 
.HCNewCaptcha__captchaAnswerLabel,
.FileUpload__uploadInform{
 	color: #FFFFFFCC;
}
.ConfirmBox__alert .Icon__icon {
    fill: #E85867 !important;
    stroke: none !important;
}
.ConfirmBox__messageHeader #title {
   color: #E85867 !important;
   font-weight: bold;
}
.ConfirmBox__messageContent #message {
  color: #333333 !important;
}
button[data-id="confirm_box_cancel"] {
  color: #333333 !important;
  background-color: #fff !important;
  border: 1px solid #ccc !important;
}
.ConfirmBox__btnFooter button:hover {
  box-shadow: 0 3px 3px 1px rgba(209,209,209,0.3) !important;
}

/* like/dislike article text and icons */
/* 1. Make the "Helpful?" text permanently black */
[data-id="vote_enabled"] .KbDetailLtContainer__share {
  color: #000000 !important;
}
/* 2. Make both icons black by default */
[data-id="like_article"] svg,
[data-id="dislike_article"] svg {
  fill: #000000 !important;
  transition: fill 0.3s ease; /* Smooth transition */
}
/* 3. Change only the specific icon being hovered to #FFF2C6 */
[data-id="like_article"]:hover svg {
  fill: #fc9f16 !important;
}
[data-id="dislike_article"]:hover svg {
  fill: #fc9f16 !important;
}

/* Articles */
.Tag__tag{
  background: #25706e;
}

.ScrollSticky__type2 {
	background: none; 
}
.KbDetailRtContainer__subscribeDescription, 
.ArticleListRightContainer__subscribeDescription,
.ListHeader__header1,
.ListHeader__header2 {
  color: white;
}

.Icon__icon, 
.ContentList__listLink,
.ListHeader__description,
.ContentList__topicContent {
	color: #FFFFFFCC;
}

/* -------- */
.DepartmentList__listContent{
  /* background:#1F4E52;*/
  border: 1px solid #1F4E52;
}

.AppContainer__breadCrumbs{
	background: #0E2326;
  	color: white;
}

.Layout__oneColumn, 
.Layout__twoColumn, 
.Layout__twoColumn2, 
.Layout__twoColumnReverse{
background: transparent;
}

/* Footer Customization */
.Footer__footerBg{
  background: transparent;
  
}
.Footer__footerQus, 
.KbDetailLtContainer__detailHeader, 
.commonStyle__detailHeader {
	color: #FFF2C6;
}
.Footer__footerDescription {
	color: #FFFFFF;
}

/*Submit ticket button background colour*/
.Button__footerBtn {
    /* 1. Define the Border Width (Transparent allows gradient to show) */
    border: 1px solid transparent !important;

    /* 2. Define the Roundness (Change 4px to whatever you need) */
    border-radius: 50px !important;

    /* 3. The Double Background Trick */
    background: 
        /* Top Layer: Dark Green Inner Background */
        linear-gradient(#0e2326, #0e2326) padding-box, 
        
        /* Bottom Layer: The Orange Gradient Border */
        linear-gradient(90deg, #FFB312 50%, #F99507 100%) border-box !important;

    /* 4. Text & Layout Safety */
    color: #ffffff !important;
    display: inline-block; /* Ensures radius works correctly */
}

/* Hover Effect: Fill with Orange */
.Button__footerBtn:hover {
    /* 1. Make the inner layer transparent so the orange gradient shows through */
    background: 
        linear-gradient(transparent, transparent) padding-box, 
        linear-gradient(90deg, #FFB312 50%, #F99507 100%) border-box !important;

    /* 2. Change text color to Dark Green for readability */
    color: #0e2326 !important; 
    
    /* 3. Add a mouse cursor pointer */
    cursor: pointer;
    
    /* 4. Optional: Add a subtle glow/shadow */
    box-shadow: 0 0 15px rgba(255, 179, 18, 0.4);
}

/*Search button background colour*/
.commonStyle__zt3BrandBg {
    background-color: #F99507;
}

/*link colours*/
.KbDetailLtContainer__articleContent a {
   color: #208aed;  
}

/*custom widget properties*/
@media screen and (min-width: 900px) {
    .widgets {
    width: 30%; 
    float: left;
    margin: 0 5px; 
    text-align: center;
    padding: 0.5em;
    border-radius: 0.5em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.59); 
  	height: 210px;
  }
  
  #widget-container {
    display: flex;
    justify-content: center; /* Horizontally center the items */
    align-items: center; /* Vertically center the items */
  }
}
@media screen and (max-width: 899px) {
  .widgets {
    width: 100%; 
    float: left; 
    margin: 10px 0; 
    text-align: center;
    padding: 0.7em;
    border-radius: 0.5em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.59); 
 
 }
}

/*Custom widget Link Color before mouse hover*/
portal a {
	color: #FFF2C6;
}

/* Article title Container Width for mobile Device Screen*/
@media screen and (max-width: 500px) {
   .KbDetailLtContainer__detailHeader{	
  		width: 290px;
	}
}
  
/* Sign in page */
/* 2. APPLY TRANSPARENCY (Removes the white box) */
.signin_container,
.signin_container .signin_box {
  background: transparent !important;
  background-color: transparent !important;
}
.Signin__loginSubTitle, 
.Signin__userDesc  {
  color: #FFFFFFCC;
}

/*Custom widget hover*/
/* Category Tiles Grid */
/* Category Tiles Grid */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.category-grid > * {
  margin: 0.75rem;
}

@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
}

/* Base Tile Styles */
.category-tile {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 1.5rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.35);
}

.category-tile:hover {
  transform: scale(1.02);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.45);
}

/* Watermark Background Icon */
.tile-watermark {
  position: absolute;
  right: -2rem;
  top: -2rem;
  opacity: 0.04;
  pointer-events: none;
  transition: all 0.7s ease;
  color: white;
}

.category-tile:hover .tile-watermark {
  opacity: 0.08;
  transform: scale(1.1);
}

/* Gradient Orb */
/* Removed as it was causing display issues - replaced with radial-gradient on parent */

/* Accent Colors - Orange */
.category-tile.tile-orange {
  background-color: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
  box-shadow: 0 8px 24px -14px rgba(245, 158, 11, 0.35);
}

.category-tile.tile-orange:hover {
  background-color: rgba(245, 158, 11, 0.16);
  box-shadow: 0 12px 30px -16px rgba(245, 158, 11, 0.45);
}

.category-tile.tile-orange .tile-icon {
  color: #f59e0b;
}

.category-tile.tile-orange .tile-cta {
  color: #f59e0b;
}

.category-tile.tile-orange .tile-icon-wrapper {
  box-shadow: 0 10px 22px -14px rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.28);
}

.category-tile.tile-orange:hover .tile-icon-wrapper {
  box-shadow: 0 12px 26px -14px rgba(245, 158, 11, 0.32);
}

/* Accent Colors - Teal */
.category-tile.tile-teal {
  background-color: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.28);
  box-shadow: 0 8px 24px -14px rgba(16, 185, 129, 0.35);
}

.category-tile.tile-teal:hover {
  background-color: rgba(16, 185, 129, 0.16);
  box-shadow: 0 12px 30px -16px rgba(16, 185, 129, 0.45);
}

.category-tile.tile-teal .tile-icon {
  color: #34d399;
}

.category-tile.tile-teal .tile-cta {
  color: #34d399;
}

.category-tile.tile-teal .tile-icon-wrapper {
  box-shadow: 0 10px 22px -14px rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.28);
}

.category-tile.tile-teal:hover .tile-icon-wrapper {
  box-shadow: 0 12px 26px -14px rgba(16, 185, 129, 0.32);
}

/* Accent Colors - Neutral */
.category-tile.tile-neutral {
  background-color: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 8px 24px -14px rgba(148, 163, 184, 0.35);
}

.category-tile.tile-neutral:hover {
  background-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 12px 30px -16px rgba(148, 163, 184, 0.45);
}

.category-tile.tile-neutral .tile-icon {
  color: #cbd5e1;
}

.category-tile.tile-neutral .tile-cta {
  color: #cbd5e1;
}

.category-tile.tile-neutral .tile-icon-wrapper {
  box-shadow: 0 10px 22px -14px rgba(148, 163, 184, 0.25);
  border-color: rgba(148, 163, 184, 0.28);
}

.category-tile.tile-neutral:hover .tile-icon-wrapper {
  box-shadow: 0 12px 26px -14px rgba(148, 163, 184, 0.32);
}

/* Icon Wrapper */
.tile-icon-wrapper {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.5s ease;
  font-size: 2rem;
}

.category-tile:hover .tile-icon-wrapper {
  transform: scale(1.1) rotate(3deg);
}

/* Content */
.tile-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.tile-content > * + * {
  margin-top: 0.75rem;
}

.tile-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.025em;
  margin: 0;
}

.tile-description {
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 90%;
}

/* CTA */
.tile-cta {
  display: inline-flex;
  align-items: center;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.tile-cta span {
  margin-right: 0.5rem;
}

.tile-cta::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.category-tile:hover .tile-cta::after {
  transform: translateX(4px) rotate(-45deg);
  -webkit-transform: translateX(4px) rotate(-45deg);
}

/* CTA hover state for DreamSave (orange accent) */
.tile-orange .tile-cta:hover {
  color: #fbbf24;
  text-decoration: underline;
}

/* Shine Effect */
.tile-shine {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  border-radius: 1.5rem;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.tile-shine::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%) skewX(12deg);
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  transition: transform 1s ease-out;
}

.category-tile:hover .tile-shine {
  opacity: 1;
}

.category-tile:hover .tile-shine::before {
  transform: translateX(100%) skewX(12deg);
}

/* Home Module Section */
/* Target the SVGs only within the Module Container */
.ModuleCont__moduleCont .ContentBox__boxThree svg {
    /* 1. Invert colors: Dark grey becomes light grey/white */
    /* 2. Rotate Hue: Inversion turns orange to blue; this rotates it back to orange */
    filter: invert(1) hue-rotate(180deg);
    
    /* Optional: Boost brightness if they look a bit dull after filtering */
    opacity: 0.8; 
}

/* ----- Department Selection when submitting ticket ----- */
/* =========================================================
   1. Header Section (Title & Sorting Icon)
   ========================================================= */

/* Main Header Container - Forces vertical alignment */
[data-id="departments_container"] .Departmentcontainer__titlePart {
    display: flex;
    align-items: center; /* Fixes the "Departments" text floating too high */
    margin-bottom: 20px;
}

/* "Departments" Title Text */
[data-id="departments_container"] .Departmentcontainer__title {
    color: #ffffff;
    font-weight: 600;
    margin: 0;           /* Resets default margins to prevent misalignment */
    padding-right: 12px; /* Spacing between text and icon */
    line-height: 1;
}

/* =========================================================
   Sorting Icon Fix (Bulletproof White)
   ========================================================= */

/* Sorting Icon Container */
[data-id="departments_container"] .Departmentcontainer__sortIcon {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Sorting Icon SVG - FORCE WHITE */
[data-id="departments_container"] .Departmentcontainer__sortIcon svg {
    /* brightness(0) turns it solid black, invert(1) turns that solid black to solid white */
    filter: brightness(0) invert(1) !important; 
    opacity: 0.7;                    
    transition: all 0.3s ease;
}

/* Sorting Icon Hover Effect */
[data-id="departments_container"] .Departmentcontainer__sortIcon:hover svg {
    opacity: 1;
    transform: scale(1.1);           
    /* Keep the white filter on hover */
    filter: brightness(0) invert(1) !important; 
}


/* =========================================================
   2. Card Styling (Glassmorphism - Editor Safe)
   ========================================================= */

/* The Card Container */
[data-id="departments_container"] .DepartmentList__deptListItem {
    /* Glass Effect (using opacity since backdrop-filter isn't supported) */
    background-color: rgba(255, 255, 255, 0.1); 
    
    /* Borders & Shape */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    
    /* Spacing */
    padding: 20px;
    margin-bottom: 20px;
    
    /* Animation */
    transition: all 0.3s ease;
}

/* Card Hover Effect */
[data-id="departments_container"] .DepartmentList__deptListItem:hover {
    transform: translateY(-5px); /* Lift up */
    background-color: rgba(255, 255, 255, 0.15); /* Slightly brighter */
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}


/* =========================================================
   3. Card Inner Content (Text & Avatars)
   ========================================================= */

/* Card Titles (DreamSave App / Insights) */
[data-id="departments_container"] .DepartmentList__title a {
    color: #FFF2C6 !important; /* Cream Color */
    font-weight: 600;
    text-decoration: none;
    font-size: 1.1em;
}

/* Card Descriptions */
[data-id="departments_container"] .DepartmentList__description {
    color: #cccccc; /* Light grey for readability */
    margin-top: 10px;
    line-height: 1.5;
    font-size: 0.95em;
}

/* "1 form" text styling */
[data-id="departments_container"] .DepartmentList__formCount {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85em;
    margin-left: 10px;
}

/* Avatar Box (DA / DI) - UPDATED COLOR */
[data-id="departments_container"] .AvatarText__avatarText {
    border: 1px solid #FFF2C6;     /* Border matches the cream text */
    color: #FFF2C6;                /* Initials are cream */
    background-color: transparent; /* Removed white bg so cream text pops */
    font-weight: bold;
}

/* ----- Search Box ----- */
/* =========================================================
   SEARCH FIX (Strict Override for Results)
   ========================================================= */

/* 1. Search Input & Icon (Standard Setup) */
.SearchContainer__searchBox .Input__searchBox {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 12px 15px;
    padding-right: 45px;
    height: auto !important;
}
.SearchContainer__searchBox .Input__searchBox::placeholder {
    color: rgba(255, 255, 255, 0.5); 
}
.SearchContainer__searchBox .SearchContainer__searchBoxIcon svg {
    filter: brightness(0) invert(1) !important;
    opacity: 0.7;
}

/* 2. The Dropdown Container (UL) */
/* Target by data-id to ensure we hit the right box */
ul[data-id="searchList"], 
.SearchList__listmenu {
    background-color: #1e2a30 !important; /* Dark Slate Background */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    margin-top: 5px !important;
    padding: 5px 0 !important;
}

/* 3. The Result Items (Aggressive Override) */
/* We explicitly target the classes seen in your HTML: .SearchList__bgColor and .SearchList__list */
ul[data-id="searchList"] li,
ul[data-id="searchList"] a.SearchList__list,
ul[data-id="searchList"] a.SearchList__bgColor {
    background-color: transparent !important; /* Remove the white background */
    background: transparent !important;
    color: #ffffff !important;                /* Force Text to White */
    text-decoration: none !important;
    border: none !important;
    display: block !important;
}

/* 4. Hover Effects */
/* When hovering the LI or the A, light up the background and change text to Cream */
ul[data-id="searchList"] li:hover,
ul[data-id="searchList"] li:hover a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFF2C6 !important; /* Cream Color */
}

/* 5. "No Matches" Text */
.SearchList__noresult {
    color: #cccccc !important;
    background-color: transparent !important;
    text-align: center;
    padding: 10px;
}

/* =========================================================
   HOME PAGE GLOBAL SEARCH (Centered Arrow & Menu)
   ========================================================= */

/* --- 1. Main Search Container Wrapper --- */
#searchContainer1 .SearchContainer__globalSearch {
    background-color: rgba(0, 0, 0, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 0;
    overflow: visible;
    transition: all 0.3s ease;
    display: flex;
    align-items: stretch; /* Crucial for vertical centering */
}

#searchContainer1 .SearchContainer__globalSearch:hover,
#searchContainer1 .SearchContainer__globalSearch:focus-within {
    border-color: #FFF2C6; /* Cream border glow */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}


/* --- 2. The Input Field --- */
#searchContainer1 .SearchContainer__formGroup {
    flex-grow: 1;
}

#searchContainer1 .Input__headerSearch {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px 20px;
    height: 50px;
    font-size: 16px;
    width: 100%;
}

#searchContainer1 .Input__headerSearch::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* --- UPDATED: 'X' BUTTON --- */
#searchContainer1 .Input__headerSearch:not(:placeholder-shown)::-webkit-search-cancel-button {
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.9)) !important;
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    cursor: pointer;
    opacity: 1 !important;
    margin-right: 10px;
    transform: scale(1.2); 
}
#searchContainer1 .Input__headerSearch:not(:placeholder-shown)::-webkit-search-cancel-button:hover {
    transform: scale(1.4);
    filter: brightness(0) invert(1) drop-shadow(0 0 5px #FFF2C6) !important;
}


/* --- 3. The "Boxed" Search Button --- */
#searchContainer1 .SearchContainer__searchIcon {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 60px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

#searchContainer1 .SearchContainer__searchIcon svg {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9;
    width: 22px;
    height: 22px;
    margin: 0 !important;
}

#searchContainer1 .SearchContainer__searchIcon:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}
#searchContainer1 .SearchContainer__searchIcon:hover svg {
    opacity: 1;
    transform: scale(1.1);
}


/* --- 4. The Filter Dropdown (Selector & Menu) --- */
/* The Arrow Trigger Area */
#searchContainer1 .SearchContainer__moduleChangePopup {
    display: flex;
    align-items: center;     /* Vertically Center Arrow */
    justify-content: center; /* Horizontally Center Arrow in its space */
    align-self: stretch;     /* Force it to fill height of bar */
    padding: 0 15px;         /* Clickable area width */
    position: relative;
    cursor: pointer;
}

/* The Arrow Icon Itself */
#searchContainer1 .SearchContainer__downArrow {
    border-top-color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 !important;    /* Remove theme margins that offset it */
}

/* The Dropdown Menu List */
#searchContainer1 .SearchContainer__searchFilter {
    background-color: #1e2a30 !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    
    /* Position Logic: Centered under the arrow */
    top: 100% !important;
    margin-top: 15px;
    width: 200px;
    left: 50% !important;    /* Push to middle of arrow... */
    right: auto !important;
    transform: translateX(-50%); /* ...then pull back 50% to perfectly center */
    
    z-index: 999;
}

/* Menu Items */
#searchContainer1 .SearchContainer__searchFilter li {
    color: #ffffff !important;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: transparent !important;
    cursor: pointer;
    text-align: center; /* Center text inside the dropdown too */
}
#searchContainer1 .SearchContainer__searchFilter li:last-child {
    border-bottom: none;
}
#searchContainer1 .SearchContainer__searchFilter li:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFF2C6 !important;
}
#searchContainer1 .SearchContainer__searchFilter li.SearchContainer__selected {
    color: #FFF2C6 !important;
    font-weight: bold;
}

/* =========================================================
   DOTS MENU POPUP (Cream Theme - Final Fix)
   ========================================================= */

/* 1. RESET THE OUTER WRAPPER (Removes the white square box) */
.DottedMenuPopup__content {
    background-color: transparent !important; 
    box-shadow: none !important; 
    border: none !important;
}

/* 2. Color the Arrow/Triangle to match Cream */
.DottedMenuPopup__content .Popup__arrow,
.DottedMenuPopup__content .Popup__arrow::after,
.DottedMenuPopup__content .Popup__arrow::before {
    border-bottom-color: #FFF2C6 !important;
}


/* 3. Style the Inner Box (Rounded Cream Card) */
.DottedMenuPopup__dotMenuPopup {
    background-color: #FFF2C6 !important;
    border: 1px solid #e0d0a0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    border-radius: 16px !important;
    padding: 0;
    overflow: hidden; 
}

/* 4. The Menu Row (Item Container) */
.DottedMenuPopup__dotMenuPopup .ListHeader__popupList {
    background-color: transparent !important;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* --- 5. TEXT COLOR FIX (Forces "Follow" to be Dark) --- */
.DottedMenuPopup__dotMenuPopup .ListHeader__followTxt {
    color: #333333 !important; /* Dark Grey */
    font-weight: 600;          /* Make it slightly bolder */
}

/* --- 6. ICON COLOR FIX (Forces Tick Circle to be Dark) --- */
.DottedMenuPopup__dotMenuPopup .ListHeader__popupList svg {
    filter: none !important;       /* Remove any "make white" filters */
    fill: #333333 !important;      /* Fill the shape with Dark Grey */
    color: #333333 !important;     /* Text color fallback */
    opacity: 0.8;
}


/* 7. Hover Effects */
.DottedMenuPopup__dotMenuPopup .ListHeader__popupList:hover {
    background-color: rgba(0, 0, 0, 0.05) !important; /* Slight darken */
}

/* On hover, make icon fully opaque */
.DottedMenuPopup__dotMenuPopup .ListHeader__popupList:hover svg {
    opacity: 1;
}

/* ------- Client's My Area ------ */
/* 1. Default State: Set Icon and Text to Black */
.exportDownloadHistory .Icon__icon {
    fill: #000000; /* Controls the SVG icon color */
}

.exportDownloadHistory .ExportMoreOptions__listContent {
    color: #000000; /* Controls the text color */
}

/* 2. Hover State: Change both to #FFF2C6 */
.exportDownloadHistory:hover .Icon__icon {
    fill: #FD9F17;
}

.exportDownloadHistory:hover .ExportMoreOptions__listContent {
    color: #FD9F17;
}

/* 3. Optional: Remove any default background hover effects if they exist */
.exportDownloadHistory:hover {
    background-color: transparent !important;
}

/* ----- My Area ticket view ----*/
.exportDownloadHistory, 
.Post__options2 .Post__popUpList {
    color: #000000 !important;
    transition: all 0.2s ease-in-out;
    border-radius: 4px; /* Softens the look */
}
.Post__userName {
  	color: white;
}
.TicketDetailRightContainer__sectionName, .TicketPropertiesContainer__sectionName, .ListHeader__header1 {
  	color: #FFF2C6;
}
.ListHeader__listIcon1 .ListHeader__listIcon {
    fill: #FFF2C6 !important;
    
    /* Some icon sets use stroke instead of fill; adding this just in case */
    stroke: #FFF2C6; 
    
    /* Removes any transparency from the default 'greyShade70' class */
    opacity: 1 !important; 
}

.Info__infoLabel, .TicketListItem__ticketId {
	color: #FFFFFFCC;
}
.exportDownloadHistory:hover, 
.Post__options2 .Post__popUpList:hover {
    background-color: #1C3B3D !important; /* Dark Teal Background */
    color: #FFF2C6 !important;            /* Cream Text (matches popup bg) */
}

/* Ensure the icon flips color too */
.exportDownloadHistory:hover .Icon__icon {
    fill: #FFF2C6 !important;
}

/* ------ My Area department selector pop up ---- */
/* 1. Fix the Popup Background and Container */
.TicketFilterPopup__elegant_filterPopup {
    background-color: #FFF2C6 !important;
    border-radius: 8px;
    padding: 8px 0; /* Adds a little breathing room at top and bottom */
    border: 1px solid rgba(28, 59, 61, 0.1); /* Subtle teal border */
}

/* 2. Default Text Style (Black and Visible) */
.TicketList__filterList {
    color: #000000 !important;
    transition: all 0.2s ease-in-out;
    margin: 0 4px;      /* Slight margin so the hover effect doesn't hit the edge */
    border-radius: 4px; /* Rounds the corners of the hover highlight */
}

.TicketList__listItem {
    color: #000000 !important;
    padding: 8px 12px;  /* Better spacing for readability */
}

/* 3. The Creative Hover State: Teal Background + Cream Text */
.TicketList__filterList:hover {
    background-color: #1C3B3D !important;
}

.TicketList__filterList:hover .TicketList__listItem {
    color: #FFF2C6 !important; /* Text flips to cream on hover */
}

/* 4. Active/Selected State (The "All Department" item) */
.TicketList__listActive {
    background-color: rgba(28, 59, 61, 0.08) !important; /* Soft teal tint */
}

.TicketList__listActive .TicketList__listItem {
    font-weight: 600; /* Makes the selected item slightly bolder */
}

/* 5. Fix the little arrow at the top of the popup */
.TicketFilterPopup__content .Popup__arrow {
    border-bottom-color: #FFF2C6 !important;
}

/* ---- my area pagination ---- */
/* 1. Container and Base Box Style */
.Pagination__arrowBox {
    background-color: #FFF2C6 !important; /* Cream background for the squares */
    border-radius: 4px;                  /* Slight rounding for a modern look */
    margin: 0 4px;                       /* Spacing between the two boxes */
    transition: all 0.2s ease;
}

/* 2. Style the Icons (Arrows) */
.Pagination__arrowBox .Icon__icon {
    fill: #1C3B3D !important; /* Dark Teal icons to pop against the cream */
}

/* 3. Handle the DISABLED state (like the left box in your 2nd image) */
.Pagination__paginationLtDisabled, 
.Pagination__paginationRtDisabled,
[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: 0.4 !important; /* Fades the whole box to show it's inactive */
}

/* 4. Handle the ACTIVE/HOVER state */
/* We only want the hover effect on links that AREN'T disabled */
.Pagination__arrowBox:not(:has(.Pagination__paginationLtDisabled)):not(:has(.Pagination__paginationRtDisabled)):hover {
    background-color: #1C3B3D !important; /* Flips to Dark Teal on hover */
}

.Pagination__arrowBox:not(:has(.Pagination__paginationLtDisabled)):not(:has(.Pagination__paginationRtDisabled)):hover .Icon__icon {
    fill: #FFF2C6 !important; /* Icon flips back to cream */
}

/* ----- Article Subscription popup message ---- */
/* 1. Main Container: Cream background and perfect vertical alignment */
.Message__messageShow.messagebox_container {
    background-color: #FFF2C6 !important;
    border: 1px solid #1C3B3D !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important; /* Remove padding so the left block hits the edges */
    overflow: hidden !important;
    border-radius: 4px !important;
}

/* 2. Left Icon Block: Solid Teal rectangle (as seen in your image) */
.Message__success.messagebox_icon {
    background-color: #1C3B3D !important;
    width: 45px !important;    /* Fixed width for the color block */
    height: 100% !important;   /* Spans the full height of the message box */
    min-height: 40px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;      /* Flushed to the left edge */
    flex-shrink: 0 !important;
    border-radius: 0 !important; /* Square block, not a circle */
}

/* 3. Checkmark: Perfectly visible in Cream */
.Message__success.messagebox_icon .Icon__icon,
.Message__success.messagebox_icon svg {
    fill: #FFF2C6 !important;
    width: 18px !important;
    height: 18px !important;
}

/* 4. Text Content: Centered and Black */
.Message__messageStr.messagebox_content {
    color: #000000 !important;
    padding: 0 20px !important; /* Space between the teal block and the X */
    font-size: 14px !important;
    flex-grow: 1 !important;    /* Takes up middle space */
    text-align: center !important; /* Horizontally centers the text string */
}

/* 5. Close Button: Visible Teal with Red Hover */
.messagebox_close {
    padding-right: 15px !important;
    display: flex !important;
    align-items: center !important;
}

.messagebox_close .Icon__icon {
    fill: #1C3B3D !important;
    width: 14px !important;
    height: 14px !important;
    transition: fill 0.2s ease !important;
}

.messagebox_close:hover .Icon__icon {
    fill: #d9534f !important; /* Classic red hover for the close button */
}

/* ------ Article Detail page ---- */
.KbDetailRtContainer__followerCount {
  	color: #FFFFFFCC;
}
/* 1. Default State: Make all text and icons solid black */
.KbDetailLtContainer__share,
.KbDetailLtContainer__likeCount,
.KbDetailLtContainer__dislikeCount {
    color: #000000 !important;
}

.KbDetailLtContainer__thumsup .Icon__icon,
.KbDetailLtContainer__disLike .Icon__icon {
    fill: #000000 !important;
    transition: fill 0.2s ease !important;
}

/* 2. Hover State: Change icons to your Dark Teal */
.KbDetailLtContainer__thumsup:hover .Icon__icon,
.KbDetailLtContainer__dislike_article:hover .Icon__icon {
    fill: #1C3B3D !important;
    cursor: pointer !important;
}

/* 3. Selected State: Force the 'Active' vote to Dark Teal */
.selected_like .Icon__icon,
.selected_like .KbDetailLtContainer__likeCount {
    fill: #1C3B3D !important;
    color: #1C3B3D !important;
}

/* If a 'selected_dislike' class is used when the down-thumb is clicked */
.selected_dislike .Icon__icon,
.selected_dislike .KbDetailLtContainer__dislikeCount {
    fill: #1C3B3D !important;
    color: #1C3B3D !important;
}

/* ---- Navbar ----- */
/* 1. Force the Brighter Green Background across all layers */
#headerContainer.globalfixednav,
#headerContainer.globalfixednav #navBar,
#headerContainer.globalfixednav,
#headerContainer.globalfixednav .Header__container {
    background-color: #1F4042 !important; /* A brighter, vibrant forest green */
    background-image: none !important;
    z-index: 99999 !important;
}

/* 2. Fix the Search Bar - Remove the orange button and white box */
#headerContainer.globalfixednav .SearchContainer__searchIcon,
#headerContainer.globalfixednav .commonStyle__zt3BrandBg {
    background-color: #1C3B3D !important; /* Dark Teal search button instead of orange */
}

/* 3. Navigation Links - Clean Cream text */
#headerContainer.globalfixednav .Header__tabs__link,
#headerContainer.globalfixednav .Header__name {
    color: #FFF2C6 !important;
}

/* 4. Active Tab - No more orange underline */
#headerContainer.globalfixednav .Header__active .Header__tabs__link {
    color: #FFFFFF !important;
    border-bottom: 2px solid #FFFFFF !important;
    font-weight: bold !important;
}

/* 5. Profile Avatar (KK) - Teal on Cream */
#headerContainer.globalfixednav .enduser_avatar {
    background-color: #FFF2C6 !important;
    color: #1C3B3D !important;
    border: 1px solid #1C3B3D !important;
}

/* 6. Mobile Menu Icon (Hamburger) - Fix color */
#headerContainer.globalfixednav .Header__menu,
#headerContainer.globalfixednav .Header__menu::before,
#headerContainer.globalfixednav .Header__menu::after {
    background-color: #FFF2C6 !important;
}

/* Remove the orange/yellow border around the search button square */
#headerContainer.globalfixednav .SearchContainer__searchIcon {
    border: none !important;
    outline: none !important;
}

@media screen and (max-width: 1024px) {
  .Header__navopen .Header__menuTab, .Header__homeNavbarFixed.Header__navopen .Header__menuTab {
  	background-color: #314D53;
  }
  .Header__homeContent .Header__navbar {
        background-color: transparent;
  }
}

/* Fix the color of the clickable filter dropdown (the arrow area) */
.SearchContainer__moduleChangePopup {
    border-right: 1px solid #E5E8EA !important; /* Subtle divider */
}

/* Ensure the downward arrow is visible (Dark Teal) */
.SearchContainer__downArrow {
    border-top-color: #1C3B3D !important;
}

.SearchContainer__downArrow:hover {
	border-top-color: red !important;
}

/* Main Popup Container */
.SearchContainer__searchFilter {
    background-color: #FFF2C6 !important; /* Cream Background */
    border: 1px solid #1C3B3D !important;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    padding: 5px 0 !important;
}

/* Default List Items */
.SearchContainer__searchModule {
    color: #000000 !important; /* Black Text */
    padding: 8px 15px !important;
    transition: all 0.2s ease;
}

/* Hover State: The "Teal Flip" */
.SearchContainer__searchModule:hover {
    background-color: #1C3B3D !important; /* Dark Teal Background */
    color: #FFF2C6 !important;            /* Cream Text */
}

/* Active/Selected Item (The one currently checked) */
.SearchContainer__selected.SearchContainer__seaarchModule {
    background-color: rgba(28, 59, 61, 0.1) !important; /* Very faint teal tint */
    font-weight: bold !important;
    color: #1C3B3D !important;
}

/* language customizerr */
@media only screen and (max-width: 769px) {  
  .Header__navbar #userPreference_mobile .CustomizeContainer__CustomizeOption .Icon__icon {
      right: -55px;
      top: -25px; 
  }
  #headerContainer.globalfixednav .Header__menuicon {
    display: flex;
    align-items: center;
    gap: 15px;
    position: absolute;
    right: .9375rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

/* Profile Page - Client Side */
/* --- 1. LEFT SIDEBAR: AVATAR & USER INFO --- */

/* User Name & Membership */
.ProfileLeftContainer__userName.enduser_name {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

.ProfileLeftContainer__yearStart {
    color: #FFF2C6 !important; /* Cream accent */
    opacity: 0.9;
    font-size: 13px !important;
}

/* Avatar Initials (KK/KM) */
.AvatarText__avatarText.enduser_avatar {
    background-color: #FFF2C6 !important;
    color: #1C3B3D !important; /* Dark Teal text */
    border: 2px solid #FFF2C6 !important;
}

/* Camera Icon Fix (No more white-on-white) */
.ProfileLeftContainer__uploadText {
    background-color: #FFF2C6 !important; /* Cream circle */
    border: 1.5px solid #1C3B3D !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ProfileLeftContainer__uploadText svg,
.ProfileLeftContainer__uploadText .Icon__icon {
    fill: #1C3B3D !important; /* Force Dark Teal icon */
    width: 16px !important;
    height: 16px !important;
}

/* --- 2. LEFT SIDEBAR: TABS (WATCHLIST & MANAGE PROFILE) --- */

/* Base Tab Style */
.ProfileTabs__tabList {
    color: #FFFFFF !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    margin-bottom: 6px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ProfileTabs__tabList .Icon__icon {
    fill: #FFFFFF !important;
    margin-right: 12px !important;
}

/* Hover State: Subtle Green Glow */
.ProfileTabs__tabList:not(.ProfileTabs__activeTab):hover {
    background-color: rgba(71, 196, 148, 0.15) !important;
    color: #FFF2C6 !important;
}

/* THE "GLASS GREEN" SELECTED STATE (Active Tab) */
.ProfileTabs__activeTab {
    background: rgba(71, 196, 148, 0.25) !important; /* Semi-transparent Primary Green */
    backdrop-filter: blur(8px) !important;          /* Glass blur effect */
    border: 1px solid rgba(71, 196, 148, 0.4) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.ProfileTabs__activeTab .ProfileTabs__tabName {
    font-weight: 700 !important;
}

.ProfileTabs__activeTab .Icon__icon {
    fill: #47C494 !important; /* Brighter green icon highlight */
}

/* Nested Sub-tabs (KB / Users) */
.ProfileTabs__subTabCon {
    padding-left: 20px !important;
    margin-top: 4px !important;
}

/* --- 3. RIGHT SIDE: CONTENT PANEL & FILTERS --- */

/* Top Filter Tabs (Articles, Categories, Sections) */
.FilterTabs__filterList {
    color: #FFF2C6 !important;
    opacity: 0.8;
    padding: 10px 25px !important;
    transition: all 0.2s ease !important;
}

/* Glass Green for Active Filter */
.FilterTabs__activeFilter {
    background: rgba(71, 196, 148, 0.2) !important;
    backdrop-filter: blur(6px) !important;
    border-radius: 4px 4px 0 0 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    border-bottom: 2px solid #47C494 !important;
}

/* Article List Item & Breadcrumbs */
.ForumListItem__topicTitle {
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.ForumListItem__topic_breadCrumb_ul li a {
    color: #FFF2C6 !important;
    opacity: 0.7;
    font-size: 12px !important;
}

/* Unfollow Button: Cream Outline */
.Button__warningBorder {
    border: 1.5px solid #FFF2C6 !important;
    color: #FFF2C6 !important;
    background: transparent !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
}

.Button__warningBorder:hover {
    background-color: #FFF2C6 !important;
    color: #1C3B3D !important;
    font-weight: 600 !important;
}

/* Vertical Divider Line */
.profileRt__borderLt {
    border-left: 1px solid rgba(255, 242, 198, 0.15) !important;
}

.ProfileInformation__label {
	color: #FFF2C6 ;
}
.Attachment__attachSize, .ChangePasswordContainer__profileDesp, .ChangePasswordContainer__loginTitle{
	  	color: #FFFFFFCC;
}