/* =============================
  DESIGN TOKENS / VARIABLES
  ============================= */
:root {
   /* Brand */
   --brand-color: #934AFF;        /* UPDATE ONCE */
   --brand-hover-color: #833cee;


   /* Typography */
   --primary-text: #1A1A1A;
   --header-font: 'Poppins', sans-serif;
   --body-font: 'Kantumruy Pro', sans-serif;


   /* Sizing */
   --min-font-size: 14px;
   --post-date-font-size: 14px;


   /* Radius */
   --card-radius: 8px;
   --button-radius: 8px;


   /* Buttons (single source of truth) */
   --button-height: 32px;
   --button-padding-x: 12px;
   --button-font-size: 14px;
}


/* =============================
  BASE / GLOBAL
  ============================= */
body {
   max-width: none;
   font-family: var(--body-font);
   font-size: var(--min-font-size);
   color: var(--primary-text);
}


/* =============================
  HEADERS
  ============================= */
h1, h2, h3, h4, h5, h6,
.default .topic-card-title,
.card-cover-title,
.page-header .header-label,
#left-sidebar .menu-item,
#left-sidebar a,
#left-sidebar li {
   font-family: var(--header-font);
   font-weight: 600;
}




/* Right sidebar – featured section title */
.span4.right-sidebar .section-title.featured-box-title,
.right-sidebar .section-title.featured-box-title {
   font-size: 14px;
Border-bottom: 0px;
}






/* =============================
  GLOBAL ROUNDING  visible overflow to show settings
  ============================= */
.card,
.topic-card,
.card.document.cover-present,
.card.poll,
.post-container.document,
.post-container.note,
.right-sidebar .card.note.show-content,
.dropdown-menu,
button,
.btn,
.button,
.cta,
input[type="submit"] {
   border-radius: var(--card-radius);
   overflow: visible;
}
/* Upvote / downvote button */
.post-button.upvote-btn {
 border: 0px !important;
}
.post-buttons.edit-post-buttons,
.post-buttons{
 margin: 0 8px 8px 0;
}


.post-button.send.highlighted.post-reply-btn,
.post-button.delete.highlighted.cancel-btn {
 display: flex;
 align-items: center;
 justify-content: center;
}
.ui-button.post-button.highlighted.attach-btn {
 border-radius: var(--card-radius);
}
.post-button {
   border: 0px;
}


/* Icons inside buttons */
.post-button .fa-thumbs-up,
.post-button .fa-thumbs-down {
 border: 0px !important;;
}
/* =============================
  GLOBAL ROUNDING  hide overflow
  ============================= */
.topics-container .add-topic-btn {
 background-color: none;
 border: 1px solid var(--brand-color);
}


  .btn.fa.fa-cog.dropdown-toggle.settings-btn.admin-only {
 border: none;
}




.card-cover-title,
.card-cover,
.card.note,
.card-label-note,
input[type="submit"] {
   border-radius: var(--card-radius);
}


@media (max-width: 768px) and (min-width: 481px) {
 .responsive .menu .badge {
   background-color: var(--brand-color);
 }
}


/* =============================
  NAVIGATION (LEFT + TOP)
  ============================= */
#left-sidebar,
#left-sidebar.theme-base-color,
.top-container {
   background-color: #1B1325;
   color: #FFFFFF;
   border-right: 1px solid #261F30;
}


#menu-item-inbox,
#menu-item-favorites,
#menu-item-todos,
#menu-item-activity,
#menu-item-library,
#menu-item-users,
#menu-item-groups,
#menu-item-ai-assistant {
   background-color: #1B1325;
   font-weight: 600;
   color: #FFFFFF;
}


/* Remove scrollbar from left sidebar */
.left-sidebar {
 overflow: hidden; /* hides both horizontal and vertical scrollbars */
}




/* =============================
  MENU – HOVER + ACTIVE
  ============================= */
#menu-item-inbox:hover,
#menu-item-favorites:hover,
#menu-item-todos:hover,
#menu-item-activity:hover,
#menu-item-library:hover,
#menu-item-users:hover,
#menu-item-groups:hover,
#menu-item-inbox.active,
#menu-item-favorites.active,
#menu-item-todos.active,
#menu-item-activity.active,
#menu-item-library.active,
#menu-item-users.active,
#menu-item-groups.active{
   background-color: #261F30;
   color: #FFFFFF;
   border-right: 4px solid #FFFFFF;
   text-transform: none;
}


.menu-item.ai-assistant svg.icon {
   fill: currentColor;
}


/* AI Assistant – hover state */
#left-sidebar .menu-item.ai-assistant:hover {
   background-color: #261F30;
   color: #FFFFFF;
   border-right: 4px solid white;
   text-transform: none;


}


/* AI Assistant – icon hover color */
#left-sidebar .menu-item.ai-assistant:hover svg.icon {
   fill: #FFFFFF;
}




/* Remove text transformation for sidebar subheaders */
.sidebar-subheader {
   text-transform: none !important;
   border: none !important;
   font-size: 16px;               /* remove all borders */
}


/* =============================
  MENU ICONS (IF APPLICABLE)
  ============================= */
#left-sidebar .menu-item i,
#left-sidebar .menu-item svg {
   color: currentColor; /* inherits black or brand */
}
/* Badges */
.badge,
#inbox-count,
.menu-item .badge {
   background-color: #ffffff;
   color: #1B1325;
}




/* =============================
  LINKS
  ============================= */
a {
   color: var(--brand-color);
   text-decoration: none;
}
a:hover {
  background-color: rgba(0,0,0,0.05);
}


/* =============================
  BUTTON SYSTEM (NORMALIZED)
  ============================= */
button,
.btn,
.button,
.cta,
input[type="submit"],
.dropdown-toggle,
.select-toggle,
.menu-toggle {
   height: var(--button-height);
   padding: 0 var(--button-padding-x);
   font-size: var(--button-font-size);
   font-weight: 600;
   border-radius: var(--button-radius);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border: none;
   background-image: none;
   white-space: nowrap;
}


/* Primary */
.button-primary,
.btn-primary,
button.primary,
.cta-primary,
input[type="submit"].primary {
   background-color: var(--brand-color);
   color: #ffffff !important;
}
.button-primary:hover,
.btn-primary:hover,
button.primary:hover {
   background-color: var(--brand-hover-color);
}


/* Secondary / Outline */
.btn-small,
.button-small,
.small-button,
button.small,
.btn.sm {
   background-color: #ffffff ;
   color: var(--brand-color) !important;
   border: 1px solid var(--brand-color) !important;
/* center content */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}


.btn.btn-success.cover-upload-btn {
 color: var(--primary-text) !important;
}


.btn-small:hover,
.button-small:hover {
   background-color: rgba(147, 74, 255, 0.08);
}


/* Cancel */
.button-cancel,
.btn-cancel {
   background-color: #ffffff;
   color: var(--brand-color) !important;
   border: 1px solid var(--brand-color) !important;
}


/* Restore */
.button-restore,
.btn-restore {
   background-color: var(--brand-color) !important;
   color: #ffffff;
}


.btn.btn-primary.hidden {
 display: none !important;
 visibility: hidden !important;
 pointer-events: none !important;
}


a.btn-primary, a.btn-primary:hover, a.btn-warning, a.btn-warning:hover, a.btn-danger, a.btn-danger:hover, a.btn-success, a.btn-success:hover, a.btn-info, a.btn-info:hover, a.btn-inverse, a.btn-inverse:hover {
 color: var(--brand-color) !important;
}
.fr-box.fr-basic.fr-top button,
.fr-box.fr-basic.fr-top .btn,
.fr-box.fr-basic.fr-top .button {
 background: none !important;
 border: 0 !important;
 box-shadow: none !important;
 color: inherit !important;
 padding: 0 !important;
 min-height: auto !important;
 font-size: inherit !important;
 border-radius: 0 !important;
}


/* =============================
  DROPDOWNS
  ============================= */
.dropdown-toggle,
.select-toggle,
.menu-toggle {
   background-color: #ffffff;
   color: var(--brand-color);
   border: 1px solid var(--brand-color);
}
.dropdown-toggle:hover,


.select-toggle:hover {
   background-color: #f5f5f5;
}


.dropdown-menu {
   background-color: #ffffff;
   border: 1px var(--brand-color);
}


.dropdown-menu li,
.dropdown-menu a {
   font-weight: 600;
   font-size: var(--min-font-size);
   color: var(--primary-text);
}


.dropdown-menu li:hover,
.dropdown-menu a:hover {
   background-color: rgba(0,0,0,0.05);
}


.theme-base-color {
 background-color: transparent;
 margin-bottom: 8px;
}


#header {
   box-shadow: none;
}


.caret {
 border-top: 4px solid var(--brand-color) !important;           /* fallback if using font icon */
}
.row-fluid {
 scrollbar-width: none;     /* Firefox */
 -ms-overflow-style: none;  /* IE/Edge */
}


.row-fluid::-webkit-scrollbar {
 display: none;             /* Chrome/Safari */
}


/* =============================
  CARDS & CONTENT
  ============================= */
.topic-card {
   background-color: #ebebea;
}


.right-sidebar .card.note.show-content .title {
   font-size: var(--min-font-size) !important;
}




.right-sidebar .card.note.show-content .fr-view p,
.right-sidebar .card.note.show-content li {
   font-size: var(--min-font-size);
   color: #7f7f7f;
}


/* Post date */
.post-date,
.post-meta .date {
   font-size: var(--post-date-font-size);
}


/* Cleanup */
.card.show-content:not(.video):before {
   background: none;
   box-shadow: none;
}


/* =============================
  APP BACKGROUND
  ============================= */
body,
#body,
.content,
.main-content {
   background-color: #FAFAFA;
}


/* =============================
  RIGHT SIDEBAR (span4)
  ============================= */
.span4.right-sidebar,
.right-sidebar {
   background-color: #FAFAFA;
   color: #1A1A1A;
}
/* Remove outline from upvote button and icon */
.post-button.upvote-btn,
.upvote-btn .fa-thumbs-up,
.post-rating.downvoted:hover .upvote-btn .fa-thumbs-up {
 outline: none;
 box-shadow: none; /* optional: removes focus glow in some browsers */
}
.notification-wrapper {
 margin: 0 !important;
}
/* Remove outline from post buttons container */
.post-buttons {
 outline: none;
 box-shadow: none;
}


/* Add margin to card todo */
.card.todo {
 margin: 4px;
}
/* Ensure cards still sit on white if needed */
.right-sidebar .card,
.right-sidebar .card.note,
.right-sidebar .card.note.show-content {
   background-color: #ffffff;
}
/* =============================
  NON-PRIMARY BUTTON OUTLINE
  ============================= */
button:not(.primary):not(.btn-primary):not(.button-primary),
.btn:not(.btn-primary),
.button:not(.button-primary),
.dropdown-toggle,
.select-toggle,
.menu-toggle {
   background-color: #ffffff;
   color: var(--brand-color);
   border: 1px solid var(--brand-color);
}
/* =============================
  SECTION TITLES
  ============================= */
.section-title {
   font-family: var(--header-font, 'Poppins', sans-serif);
   font-weight: 600;
Border-bottom: 0px;
Margin: 0 0 0 0;
}


h2.section-title.featured-box-title {
   font-size: 18px;
}




/* =============================
  DROPDOWN TOGGLE (hidden-phone)
  ============================= */
.dropdown-toggle.hidden-phone {
   background-color: #ffffff;
   color: var(--primary-text);
   border: 1px solid color-mix(in srgb, currentColor 70%, transparent);
}


/* -----------------------------
  BUTTONS – HOVER BACKGROUND ONLY
  ----------------------------- */
button,
.btn,
.button,
.cta,
input[type="submit"],
.button-primary,
.btn-primary,
button.primary,
.cta-primary,
input[type="submit"].primary,
.btn-small,
.button-small,
.small-button,
button.small,
.btn.sm,
.button-restore,
.btn-restore,
.button-cancel,
.btn-cancel,
.dropdown-toggle,
.select-toggle,
.menu-toggle {
   transition: background-color 0.2s ease;
}


/* Primary buttons – brand hover background */
.button-primary:hover,
.btn-primary:hover,
button.primary:hover,
.cta-primary:hover,
input[type="submit"].primary:hover,
.button-restore:hover,
.btn-restore:hover {
   background-color: var(--brand-hover-color);
   color: inherit; /* text color does NOT change */
}


/* Secondary / Outline / Small buttons – light gray hover */
.btn-small:hover,
.button-small:hover,
.small-button:hover,
button.small:hover,
.btn.sm:hover,
.button-cancel:hover {
   background-color: rgba(0, 0, 0, 0.05); /* light gray */
   color: inherit; /* text color does NOT change */
}


/* Dropdown toggles – hover */
.dropdown-toggle:hover,
.select-toggle:hover,
.menu-toggle:hover {
   background-color: #F0F0F0; /* light gray */
   color: inherit; /* text color unchanged */
   border-color: currentColor; /* preserve outline color */
}
/* Base styling for this button */
.clear-all-notifications-btn {
   background-color: var(--brand-color);
   color: #ffffff; /* text color stays white */
   border: none;
   border-radius: var(--button-radius);
   height: var(--button-height);
   padding: 0 var(--button-padding-x);
   font-size: var(--button-font-size);
   font-weight: 600;
   cursor: pointer;
}


/* Hover / Focus / Active – background only, text never changes */
.clear-all-notifications-btn:hover,
.clear-all-notifications-btn:focus,
.clear-all-notifications-btn:active {
   background-color: var(--brand-hover-color); /* darker shade of your button */
   color: #ffffff; /* text stays the same */
   text-decoration: none;
   border-color: none;
}


/* Optional: Disabled state (if needed) */
.clear-all-notifications-btn:disabled {
   background-color: rgba(0,0,0,0.08);
   color: rgba(255,255,255,0.6);
   cursor: not-allowed;
}
/* -----------------------------
  BUTTONS – NO TEXT SHADOW
  ----------------------------- */
button,
.btn,
.button,
.cta,
input[type="submit"],
.button-primary,
.btn-primary,
button.primary,
.cta-primary,
input[type="submit"].primary,
.btn-small,
.button-small,
.small-button,
button.small,
.btn.sm,
.button-restore,
.btn-restore,
.button-cancel,
.btn-cancel,
.dropdown-toggle,
.select-toggle,
.menu-toggle {
   text-shadow: none !important;
}
/* -----------------------------
  SELECT BUTTON – RIGHT SPACE
  ----------------------------- */
.select.btn,
button.select.btn {
   padding-right: 12px; /* adds 12px space to the right */
   box-sizing: border-box; /* ensures padding doesn't break width */
}
/* -----------------------------
  PRIMARY BUTTONS – BACKGROUND ONLY
  ----------------------------- */
.seeMore pull-right,
.button-primary,
.btn-primary,
button.primary,
.cta-primary,
input[type="submit"].primary,
.button-restore,
.btn-restore {
   background-color: var(--brand-color);
   color: #ffffff; /* text stays white */
   border: none;
   font-weight: 600;
   border-radius: var(--button-radius);
   transition: background-color 0.2s ease;
}


/* Hover / Focus / Active – background only, text unchanged */
.button-primary:hover,
.btn-primary:hover,
button.primary:hover,
.cta-primary:hover,
input[type="submit"].primary:hover,
.button-restore:hover,
.btn-restore:hover,
.button-primary:focus,
.btn-primary:focus,
button.primary:focus,
.cta-primary:focus,
input[type="submit"].primary:focus,
.button-restore:focus,
.btn-restore:focus,
.button-primary:active,
.btn-primary:active,
button.primary:active,
.cta-primary:active,
input[type="submit"].primary:active,
.button-restore:active,
.btn-restore:active {
   background-color: var(--brand-hover-color); /* darker background only */
   color: #ffffff;                             /* text never changes */
   text-decoration: none;                      /* just in case */
}


/* -----------------------------
  POST CONTAINER – QUESTION
  ----------------------------- */
.post-container.question {
   border-radius: var(--card-radius);  /* 8px edges */
   overflow: hidden;    /* ensures inner content respects rounding */
   background-color: #ffffff; /* optional: keeps card white */
   box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* optional subtle shadow */
}
/* -----------------------------
  NOTIFICATION WRAPPER – 8px EDGES
  ----------------------------- */
.notification-wrapper {
   border-radius: var(--card-radius);      /* 8px corners */
   overflow: hidden;        /* ensures inner content respects rounding */
   background-color: #ffffff; /* optional: solid white background */
   box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* optional subtle shadow */
}


/* -----------------------------
  HEADERS – CASE SENSITIVE
  ----------------------------- */
h1, h2, h3, h4, h5, h6,
.default .topic-card-title,
.card-cover-title,
.page-header .header-label {
   text-transform: none;  /* respect the text as-is */
}
/* -----------------------------
  P.BOX – 8px ROUNDED EDGES
  ----------------------------- */
p.box {
   border-radius: var(--card-radius);      /* 8px corners */
   overflow: visible;        /* ensures inner content respects rounding */
   background-color: #ffffff; /* optional: solid white background */
   padding: 12px 16px;      /* optional: consistent inner spacing */
   box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* optional subtle shadow */
}
/* -----------------------------
  uniSearch – remove shadow
  ----------------------------- */
#uniSearch,
.uniSearch {
   box-shadow: none !important; /* remove any shadow */
}
/* -----------------------------
  SELECT2 SINGLE – NO SHADOW
  ----------------------------- */
.global-search-container .select2-selection.select2-selection--single {
   box-shadow: none !important;  /* remove any shadow */
   border-radius: var(--card-radius);            /* optional: match 8px system rounding */
   border: 1px solid #d3d3d3;    /* optional: subtle border */
   background-color: #ffffff;     /* optional: solid white background */
}
/* -----------------------------
  NEW FEATURED BOX BUTTON – HOVER
  ----------------------------- */
.new-featured-box-btn {
   background-color: var(--brand-color); /* default brand color background */
   color: #ffffff;                       /* text stays white */
   border: none;
   border-radius: var(--card-radius);
   padding: 8px 16px;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s ease;
}


.new-featured-box-btn:hover,
.new-featured-box-btn:focus {
   background-color: #f5f5f5; /* light gray on hover/focus */
   color: #ffffff;             /* text stays the same */
}


#sync-clones-toggle {
 margin-bottom: 8px;
}




/* -----------------------------
  FEATURED DIALOG GROUP & UPLOAD – RESPONSIVE
  ----------------------------- */
.featured-dialog-group,
.featured-upload {
   display: flex;
   flex-wrap: wrap;         /* wrap items on smaller screens */
   gap: 12px;               /* consistent spacing between items */
   align-items: flex-start; /* align content at the top */
   width: 100%;             /* full width of parent */
   box-sizing: border-box;  /* include padding in width */
}


/* Individual items inside the group */
.featured-dialog-group > *,
.featured-upload > * {
   flex: 1 1 250px; /* flexible width, minimum 250px */
   max-width: 100%;
}


/* Smaller screens */
@media (max-width: 768px) {
   .featured-dialog-group,
   .featured-upload {
       flex-direction: column;  /* stack vertically */
       gap: 8px;                /* smaller spacing for narrow screens */
   }


   .featured-dialog-group > *,
   .featured-upload > * {
       flex: 1 1 100%;          /* full width on small screens */
   }
}


/* -----------------------------
  SELECTED TOPIC – BRAND OUTLINE
  ----------------------------- */
.topics-select .topic.selected {
   background-color: var(--brand-color);         /* inside remains clear */
   color: #ffffff;             /* text in brand color */
   border-radius: var(--card-radius);                     /* matches main topic rounding */
   font-weight: 600;                       /* same as main-topic */
   font-size: 14px;                        /* same as main-topic */
   display: inline-block;                  /* consistent layout */
   box-sizing: border-box;                 /* keeps size consistent */
}
/* -----------------------------
  TOP MENU USER MENU – NO BACKGROUND
  ----------------------------- */
#top-menu #user-menu {
   background-color: transparent !important; /* remove any background */
   box-shadow: none !important;              /* remove any shadow */
   border: none !important;                  /* remove border if any */
   color: #FFFFFF !important;
}
#top-menu #user-menu a,
#top-menu #user-menu span,
#top-menu #user-menu li,
#top-menu #user-menu .profile-btn-name {
   color: #FFFFFF !important;
}
#top-menu.open #user-menu {
   background-color: none !important;
}
.topic-name {
font-weight: 400;
}


.topic-control .add-topic-btn {
   background-color: #cccccc; /* gray background */
   color: #1A1A1A;            /* dark text for contrast */
   border: none;               /* remove default border */
   border-radius: var(--card-radius);         /* consistent rounding */
   padding: 6px 12px;          /* adjust as needed */
   font-weight: 600;           /* match other buttons */
   cursor: pointer;
   transition: background-color 0.2s ease;
}


/* Hover effect – light gray */
.topic-control .add-topic-btn:hover {
   background-color: #e0e0e0; /* slightly lighter gray */
   color: #1A1A1A;            /* text stays same */
}
.modal-header,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
   font-weight: 600;
   font-family: 'Poppins', sans-serif; /* consistent with headers */
}
.header-icon.icons8-news.activity-swatch {
   background-color: #ffffff; /* solid white background */
   color: #1A1A1A;            /* solid dark text/icon color */
   transition: none;           /* no hover transition */
}


.page-header .header-icon {
   background-color: var(--brand-color); /* brand color background */
   color: #ffffff;                        /* text/icon in white for contrast */
   border: none;                          /* remove any default border */
   box-shadow: none;                      /* remove shadow */
}
.new-featured-box-btn {
   background-color: #f0f0f0; /* light gray background */
   color: #1A1A1A;            /* dark text for contrast */
   border: none;
   border-radius: var(--card-radius);         /* consistent rounding */
   padding: 8px 16px;          /* spacing inside button */
   font-weight: 600;           /* match other buttons */
   cursor: pointer;
   transition: background-color 0.2s ease;
}


/* Hover / focus – slightly darker gray */
.new-featured-box-btn:hover,
.new-featured-box-btn:focus {
   background-color: #e0e0e0; /* subtle hover effect */
   color: #1A1A1A;            /* text stays the same */
}
.profile-activity-list {
   display: flex;
   flex-direction: column; /* stack items vertically */
   gap: 12px;              /* spacing between cards */
   width: 100%;            /* full width of container */
   box-sizing: border-box; /* ensures padding/borders don’t break layout */
}


/* Ensure individual cards fill width and maintain spacing */
.profile-activity-list > .card {
   width: 100%;            /* each card takes full container width */
   border-radius: var(--card-radius);     /* consistent 8px rounded edges */
}
.box.post-list-tools {
   border-radius: 8px;
   overflow: visible;     
   background-color: #ffffff; /* keeps it clean on the off-gray background */
}
.box {
   border-radius: 8px;
   overflow: visible;
}


/* Ensure submenu is hidden by default */
.dropdown-submenu > .dropdown-menu {
   display: none;       /* hide initially */
   position: absolute;
   top: 100%;           /* below parent menu item */
   left: 0;             /* aligned with parent item */
   z-index: 9999;
   min-width: 180px;    /* optional width */
   background-color: #EBEBEB;
   border: 1px solid #d3d3d3;
   box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}


/* Optional: submenu item styling */
.dropdown-submenu > a {
   cursor: pointer;     /* indicate clickable */
}


/* dropdown menu for the settings button */
.settings-btn.admin-only + .dropdown-menu {
   display: none;         /* hidden by default */
   position: absolute;    /* absolute to button */
   top: 100%;             /* below the button */
   right: 0;              /* align to button's right edge */
   z-index: 9999;         /* above everything */
   min-width: 180px;      /* optional width */
   border-radius: 8px;
   background-color: #EBEBEB;
   border: 1px solid #d3d3d3;
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.btn.btn-large.btn-success {
   display: flex;           /* enable flex layout */
   flex-direction: column;  /* stack text vertically */
   align-items: center;     /* center horizontally */
   justify-content: center; /* center vertically if multi-line */
   text-align: center;      /* center text for each line */
   white-space: normal;     /* allow text to wrap */
}
.topic-card-title {
   border-radius: 8px;      /* 8px edges */
   overflow: visible;        /* ensures inner content respects rounding */
   display: inline-block;   /* so padding and rounding work nicely */
   box-sizing: border-box;  /* padding doesn't break width */
}
.topic-overlay-hover {
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
   overflow: visible;
}


.topic-overlay-hover {
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}




.card.topic-card.cover-present {
   border-radius: 8px; /* adjust to your desired rounding */
   overflow: visible;   /* ensures inner content respects the rounding */
}


.cover-placeholder {
   border-radius: 8px;
   overflow: visible; /* ensures inner content respects rounding */
}




/* Featured items – one column box */
.featured-items .card-container.one-column-box,
.cards-horizontal.topic-theme-list .topic-card {
   border-radius: 8px;  /* consistent rounded corners */
   overflow: visible; 
}
/* Keep card rounded but allow title to extend */
.card.topic-card.cover-present {
   border-radius: 8px;   /* keep rounded corners */
   overflow: visible;    /* allow inner content like title to expand */
}


/* Optional: give card-cover-title its own rounding */
.card-cover-title {
   border-radius: 8px;   /* match card corners if needed */
   padding: 8px 12px;    /* spacing inside the title */
   display: block;       /* ensures padding and bg apply */
}


/* =============================
  FEATURED ITEMS WRAPPER
  ============================= */
.featured-items-wrapper {
   display: flex;
   flex-wrap: wrap;        /* allow content to wrap */
   gap: 12px;              /* consistent spacing */
   width: 100%;
   box-sizing: border-box;
   border-radius: 8px;
   overflow: visible;      /* CRITICAL: prevents dropdown clipping */
}


/* Ensure children behave nicely */
.featured-items-wrapper > * {
   flex: 1 1 auto;         /* allows wrapping without forcing equal widths */
   min-width: 240px;       /* prevents items from getting too small */
   box-sizing: border-box;
overflow: visible;
}
.top-container {
border-bottom: 1px solid #e0e0e0; /* light gray underline only */
   box-shadow: none;        /* no shadow */
 
}
/* Featured Items – four-column layout, no wrapping */
.featured-items .card-container.four-column-box {
   display: flex;
   flex-wrap: nowrap;        /* prevent wrapping */
   gap: 12px;                /* space between cards */
   overflow-x: auto;         /* allow horizontal scroll if needed */
   width: 100%;
   box-sizing: border-box;
}


/* Individual cards inside the four-column box */
.featured-items .card-container.four-column-box > .card {
   flex: 0 0 calc(25% - 9px); /* 4 columns, subtract half of gap to balance spacing */
   max-width: 25%;
   box-sizing: border-box;
}


/* Optional: horizontal scroll styling */
.featured-items .card-container.four-column-box::-webkit-scrollbar {
   height: 6px;
}
.featured-items .card-container.four-column-box::-webkit-scrollbar-thumb {
   background-color: rgba(0,0,0,0.2);
   border-radius: 3px;
}
.featured-items .card-container.four-column-box::-webkit-scrollbar-track {
   background: transparent;
}
/* Ensure topic card title is fully visible and not clipped */
.topic-card-title {
   overflow: visible !important;  /* override any hidden/clip */
   white-space: normal;           /* allow text to wrap if needed */
   display: block;                /* ensure proper layout */
   box-sizing: border-box;        /* respect padding */
}




/* Dropdown menu items – light gray on hover */
.dropdown-menu li:hover,
.dropdown-menu a:hover {
   background-color: #f0f0f0; /* light gray */
   color: inherit;             /* text color remains unchanged */
}
.card-author {
   width: 100%;       /* full width of parent container */
}


/* Override sidebar uppercase transform */
.sidebar .section-title,
.sidebar .box h2,
.section-title,
.featured-box-title {
   text-transform: none !important; /* forces case-sensitive text */
font-size: 16px;  
color: var(--primary-text);
}


/* Search Bar (not button) */
#uniSearch {
   padding-left: 40px;
   border-radius: 8px;
font-family: var(--body-font);
}
/* In Everything Button */
.select2-container .global-search-container {
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   background: #ffffff; /* corrected color code */
   color: #ffffff;      /* corrected color code */
}
/* Primary small button with white text */
.btn.btn-small.btn-primary,
.save-settings-btn {
   background-color: var(--brand-color);  /* brand background */
   color: #ffffff !important;             /* text stays white */
   border: none;                           /* remove default border */
   font-weight: 600;
   border-radius: var(--button-radius);
   padding: 0 var(--button-padding-x);
   height: var(--button-height);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   white-space: nowrap;
   transition: background-color 0.2s ease;
}


/* Hover / Focus / Active – only background changes, text stays white */
.btn.btn-small.btn-primary:hover,
.btn.btn-small.btn-primary:focus,
.btn.btn-small.btn-primary:active,
.save-settings-btn:hover,
.save-settings-btn:focus,
.save-settings-btn:active {
   background-color: var(--brand-hover-color); /* darker brand */
   color: #ffffff !important;                  /* enforce white text */
}
/* Post buttons inherit secondary / outline style */
.post-button.options.fa.fa-cog,
.post-button.reply-btn,
.post-button.answer-btn {
   background-color: #ffffff;            /* white background */
   color: var(--brand-color);            /* brand color text */
   border: 1px solid var(--brand-color); /* brand color border */
   font-weight: 600;
   border-radius: var(--button-radius);
   height: var(--button-height);
   padding: 0 var(--button-padding-x);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   white-space: nowrap;
   transition: background-color 0.2s ease, color 0.2s ease;
}


/* Hover / Focus / Active states */
.post-button.options.fa.fa-cog:hover,
.post-button.reply-btn:hover,
.post-button.answer-btn:hover,
.post-button.options.fa.fa-cog:focus,
.post-button.reply-btn:focus,
.post-button.answer-btn:focus,
.post-button.options.fa.fa-cog:active,
.post-button.reply-btn:active,
.post-button.answer-btn:active {
   background-color: rgba(147, 74, 255, 0.08); /* subtle brand tint */
   color: var(--brand-color);                   /* text stays brand color */
}
/* Allow overflow for Q&A comment containers */
.post-container.question-answer.comment-indent-NaN {
   overflow: visible !important;
}
/* See More → Primary button style */
.seeMore.pull-right {
   background-color: var(--brand-color);
   color: #ffffff;
   border: 1px solid var(--brand-color);
   border-radius: var(--button-radius);
   height: var(--button-height);
   padding: 0 var(--button-padding-x);
   font-size: var(--button-font-size);
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   text-transform: none;


}


/* Hover */
.seeMore.pull-right:hover {
   background-color: var(--brand-hover-color);
   color: #ffffff;
   text-decoration: none;
}
.profile-btn-name {
   font-size: 16px;
   line-height: 1.2;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block; /* or inline-block / flex child */
}
/* -------------------------
  Base state - completely flat tabs
------------------------- */


/* Flat tabs */
.folder-tab-slope,
.folder-tab-slope.hide {
 color: var(--primary-text) !important;
 background-color: #ffffff !important; /* flat white background */
 border: none !important;
 border-radius: 0 !important; /* remove rounded corners */
 box-shadow: none !important; /* remove any shadow */
 transform: none !important;  /* remove slope/skew */
 clip-path: none !important;   /* remove any angled clipping */
 transition: color 0.15s ease, background-color 0.15s ease !important;
 display: inline-block;        /* horizontal layout */
 margin: 0;                     /* remove spacing */
}


/* Hide back-slope completely */
.folder-tab-slope.back-slope {
 display: none !important;
}


/* Active tab indicator */
.folder-tab-slope.active {
 border-bottom: 2px solid var(--primary-color); /* underline active tab */
 background-color: #ebebeb;                     /* subtle active background */
}


/* Folder tab body adjustments */
.folder-tab-body {
 right: 0 !important;
 border-top-right-radius: 0 !important;
 border-right: 0 !important;
}


/* Sidebar subheader text color - default and hover */
li.sidebar-subheader,
li.sidebar-subheader:hover {
 color: var(--primary-text) !important;
Background-color: #FFFFFF;
}


html, body {
   overflow-x: hidden;
}


.container-fluid,
.content-container {
   box-sizing: border-box;
}


.featured-items-wrapper {
   max-width: 100%;
   overflow-x: visible;
}


.featured-items-wrapper > * {
   min-width: 0; /* critical for flex overflow */
}
.featured-items .card-container.four-column-box {
   max-width: 100%;
}


/* -----------------------------
  MAIN TOPIC – DARK GRAY
  ----------------------------- */
.topics-container .topic, .add-topic-btn, .topics-container .topic:visited .topics-select .topic.main-topic {
background-color: #FFFFFF;
border: 1px;
   font-size: 14px;


   color: var(--primary-text); /* dark gray text */
}


.topics-select .topic.selected {
   background-color: var(--brand-color);
   color: #ffffff;
   border-radius: 8px;
   font-size: 14px;
   display: inline-block;
}




.fa.fa-paperclip {
 margin-right: 8px;
}


.post-container.question {
Overflow: visible;
}


.post-container.question-answer.comment-indent-NaN .post-button.reply-btn {
 display: none;
}




/* Video.js control buttons – only background & color override */
.video-js .vjs-button,
.video-js .vjs-mute-control,
.video-js .vjs-vol-3,
.vjs-big-play-button,
.video-js .vjs-fullscreen-control {
   background: rgba(0, 0, 0, 0.3) !important; /* transparent + blur-ready background */
   color: #ffffff !important;                /* white icon/text */
   backdrop-filter: blur(8px);               /* blur behind button */
   border: none !important;                  /* remove any border */
}


/* Optional: hover effect – slightly lighter transparent */
.video-js .vjs-button:hover,
.video-js .vjs-mute-control:hover,
.video-js .vjs-vol-3:hover,
.vjs-big-play-button,
.video-js .vjs-fullscreen-control:hover {
   background: rgba(0, 0, 0, 0.4) !important;
   color: #ffffff !important;
}


.menu-item .badge {
 color: #1B1325;
}


.post-buttons,
.actions {
   border: none !important;
   align-items: flex-end;   /* bottom align content */
 display: flex;
 flex-direction: row; /* optional, row is default */
 align-items: center; /* vertical alignment */
 gap: 8px;            /* space between items */
}






.post-comments,
.post-container {
 border-radius: var(--card-radius);
}


.form-actions div {
 display: flex;
 flex-direction: row; /* optional, row is default */
 align-items: center; /* vertical alignment */
 gap: 8px;            /* space between items */
}


.popover .form-actions {
 display: flex;
 justify-content: space-between;
}


.notification-wrapper {
margin-bottom: 12px;
box-shadow: none;
}


#new-search-mask #close-search-btn {
Color: var(--brand-color);
}


.list-filters:before {
   border-top: 0px;
}


.fileupload-container input[type='file'], .fileupload-form input[type='file'], .ui-button.post-option input, .cover-upload-btn input[type='file'], .banner-upload-btn input[type='file'], .attachment-btn input[type='file'] {
border: 0px;
width: auto;
height: auto;
}




.menu-item .badge {
   background-color: #ffffff;
}


.card.note .card-cover-title {
   background-color: white;
}
#new-search-mask #close-search-btn {
   background-color: transparent;
   border: none;
   color: white;
   font-size: 16px;
   cursor: pointer;
}
#top-menu.open #user-menu {
   background-color: transparent !important;
}


.page-header-btn.new-todo-btn.btn-show-add {
   padding: 0px 10px 0px 10px ;
}


.topic-theme-list .subtopic {
   background-color: black;
}