.navbar {
	background-color: #FFF;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid var(--gray);
	height: 60px;
	z-index: 999;
	margin-bottom: 0;
}
.navbar-nav {
	float: none;
}
.navbar-main li{
	padding: 8px 0;
}

.navbar-brand {
	padding: 15px 30px 15px 15px;
	height: 60px;
}
.navbar-nav li a:hover,
.navbar-nav li a:focus,
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
	background-color: inherit;
	border-color: #FFF;
}
.navbar-nav li a.actions {
	color: var(--gray);
	font-size: 18px;
	white-space: nowrap;
}
.navbar-right li a.actions {
	margin-top: -2px;
	padding-left: 8px;
	padding-right: 8px;
}
.navbar-right li button {
	height: 42px;
} 
@media (max-width: 991px) {
	.navbar-collapse {
		background-color: #FFF;
	}
	.navbar-nav {
		margin: 0;
	}
}
@media (min-width: 992px) {
	.navbar-main li {
		padding: 0;
		margin-left: 0;
		height: 60px;
	}
	.navbar-main li>a.actions,
	.navbar-main li>.searchbar {
		padding: 20px 30px 20px 0;
		cursor: pointer;
	}
	.navbar-right {
		margin-right: 0;
	}
	.navbar-right li {
		padding-top: 9px;
		margin-left: 24px;
	}
	.navbar-main li>form {
		padding: 13px 0;
	}	
	#dashboard_button,
	#contacts_button,
	#organization_contacts_button,
	#organization_vc_deals_button,
	#organization_reports_button {
		margin-left: 0px;
	}
	.navbar-nav li.active:before,
	.navbar-nav li.active:after {
	  content: '';
	  display: block;
	  position: absolute;
	  bottom: 100%;
	  width: 0;
	  height: 0;
	}
	.navbar-nav li.active:before {
	  left: calc(50% - 15px);
	  border: 11px solid transparent;
	  border-bottom-color: var(--gray);
	  top: 38px;
	}
	.navbar-nav li.active:after {
	  left: calc(50% - 14px);
	  border: 10px solid transparent;
	  border-bottom-color: var(--subhead-gray);
	  top: 40px;
	}
}

/* Icons */
	.navbar .navbar-brand img {
		height: 30px;
	}
	.navbar-nav li a.actions svg,
	.navbar-nav li .searchbar svg {
		fill: var(--gray);
		vertical-align: bottom;
		margin-right: 5px;
		height: 18px;
	}
	.navbar-nav li.active a.actions svg,
	.navbar-nav li:hover a.actions svg {
		fill: var(--dark-purple);
	}

.navbar-nav li a.dropdown-toggle:focus,
.nav .open>a.dropdown-toggle,
.nav .open>a.dropdown-toggle:focus {
	border-color: transparent;
}

.navbar-nav li a.actions {
	border-bottom: 1px solid transparent;
}
.navbar-nav li.active a.actions>.main-nav-text,
.navbar-nav li:hover a.actions>.main-nav-text {
	color: #45297A;
	font-weight: 600;
}
.navbar-nav li.active>.main-nav-text:after {
	position: absolute;
	content: '';
	border-bottom: 3px solid #FFF;
	width: 60%;
	transform: translateX(-50%);
	bottom: -6px;
	left: 30%;
}
.vertical-line {
	border-left: 1px solid var(--gray);
	max-height: 40px;
	top: 7px;
	width: 30px;
}
@media (max-width: 991px) {
	.navbar-header>.navbar-toggle {
		display: block;
	}
	.navbar-main li.search-section {
		padding: 0;
	}
	.navbar-right>li {
		padding: 10px 0;
	}	
	.navbar-right>li>a {
		padding: 19px 0;
	}
	.navbar-toggle svg {
		fill: var(--purple);
		height: 18px;
		width: 27px;
	}
	.navbar-collapse {
		width: 110%;
		border-bottom: 1px solid var(--gray);
		padding-bottom: 10px;
	}
	.navbar-nav li a.actions {
		padding-left: 0;
	}
}

/* Dropdown Menus */
	.navbar-nav .dropdown-menu {
		top: 42px;
	}
	.navbar-nav .dropdown-menu li {
		height: 30px;
		margin-left: 0;
		padding-top: 0;
	}

/* Search Styles */
	.clear-contact-search {
		visibility: hidden;
		position: absolute;
		right: 22px;
		top: 22px;
		cursor: pointer;
	}
	.clear-contact-search svg {
		fill: var(--gray);
		height: 14px;
		width: 14px;
	}
	.search-result-table {
		width: 100%;
	}
	.search-result-table td {
		width: 50%;
		padding: 5px 10px;
		border-bottom: 1px solid var(--gray);
		background-color: #FFF;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 150px;
		height: 40px;
	}
	.search-result-table tr:last-child>td{
		border-bottom: 0px;
	}
	.master-search-no-results {
		padding: 5px;
		text-align: center;
		background-color: #FFF;
		border: 1px solid var(--gray);
	}
	.master-search-team-contacts {
		padding: 5px;
		text-align: center;
		border: 1px solid var(--gray);
		background-color: #FFF;
	}
	.master-search-div {
		background-color: #FFF;
		padding: 24px;
		border-radius: 4px;
		z-index: 1000;
		position: absolute;
		top: 50px;
		width: 400px;
		border: 1px solid var(--gray);
		left: -100px;
	}
	.master-search-sub-heading {
		font-weight: bold;
		margin-bottom: 4px;
	}
	.master-search-quick-filters {
		padding-right: 24px;
		border-right: 1px solid #D5D7DF;
		min-height: 440px;
		overflow: hidden;
	}
	.master-search-quick-filters-apply-div {
		margin-top: 16px;
	}
	.master-search-quick-filters-apply-div select {
		width: 120px;
		display: inline-block;
		position: relative;
		top: -3px;
	}
	.master-search-results {
		padding-bottom: 40px;
	}
	.master-search-settings {
		position: absolute;
		bottom: 24px;
	}
	.master-search-setting-row {
		position: relative;
	}
	.master-search-setting {
		max-width: calc(100% - 50px);
		display: inline-block;
	}
	.master-search-setting-toggle {
		width: 50px;
		display: inline-block;
		text-align: right;
	}
	.search-toggle {
		padding: 0;
		margin-left: -3px;
		border: none;
		background: transparent;
		outline: none;
	}
	.search-toggle img {
		max-width: 48px;
	}
	.master-search-results-content {
		margin-bottom: 12px;
	}

	.navbar .searchbar-search.form-control {
		padding: 3px 12px;
		height: 34px;
		background-color: #AEB3C51A;
		border: 1px solid var(--gray);
	}
	.navbar .searchbar-search.form-control::-webkit-input-placeholder,
	.quick-search-div .form-control::-webkit-input-placeholder {
		font-size: 12px;
		padding-left: 20px;
	}
	.navbar .search-icon,
	.quick-search-div .search-icon {
		display: inline-block;
		position: absolute;
		margin-top: 10px;
		margin-left: 11px;
	}
	.navbar .search-icon svg,
	.quick-search-div .search-icon svg {
		height: 15px;
		width: 15px;
		fill: var(--purple);
	}
	.navbar form:focus .search-icon,
	.navbar form:focus-within .search-icon {
		display: none;
	}
	#search_form .svg-x-icon {
		cursor: pointer
	}
	.icon-menu {
		color: #fff;
		font-size: 1.2rem;
	}
	.navbar .searchbar img {
		height: 18px;
		margin-right: 0;
		margin-top: 3px;
		cursor: pointer;
	}
	.search-form {
		display: none;
		position: fixed;
		padding: 13px 13px 12px;
		right: 60px;
		background-color: #FFF;
	}
	.search-form form {
		display: inline-block;
	}
	.search-form input {
		width: 277px;
		border-radius: 50px;
	}
	.hide-small-search {
		margin-right: -35px;
		margin-top: 10px;
	}
	.hide-small-search svg {
		fill: var(--text-gray);
	}
	@media (max-width: 991px) {
		.master-search-div {
			width: calc(100% - 36px);
			top: 6px;
			left: 0;
			position: relative;
		}
		.master-search-results {
			max-width: 50%;
		}
		.search-section {
			width: 100%;
		}
		.navbar .searchbar {
			width: 100%;
		}
		.navbar .searchbar :hover,  
		.navbar .searchbar :active{
			cursor: pointer;
		}
		.search-form {
			display: block;
			width: calc(100% - 36px);
			right: 0;
			position: relative;
			padding: 10px 0;
		}
		.search-form form,
		.search-form input {
			width: 100%;
		}
		.clear-contact-search {
			top: 18px;
			right: 14px;
		}
	}
	@media (min-width: 1200px) {
		.search-form {
			display: inline-block;
			right: 0;
			position: inherit;
		}
	}
	.master-search-quick-filters .svg-check {
		font-size: 0.8rem !important;
		position: relative !important;
		top: 2px !important;
	}

	@media (min-width: 992px) {
		.search-result-table {
			border: 1px solid var(--light-gray);
		}
		.navbar .search-section .dropdown-menu {
			margin-top: 11px;
			border-radius: 4px;
		}
	}

/* Override Bootstrap defaults to allow navbar dropdown on windows 768-991px wide. */
@media(max-width:991px) {
	nav .navbar-header {
		float: none;
	}
	nav .navbar-left,.navbar-right {
		float: none !important;
	}
	nav .navbar-toggle {
		display: block;
	}
	nav .navbar-collapse {
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	}
	nav .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
	nav .navbar-collapse.collapse {
		display: none!important;
	}
	nav .navbar-nav {
		float: none!important;
		margin-top: 7.5px;
	}
	nav .navbar-nav>li {
		float: none;
	}
	nav .navbar-nav>li>a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	nav .collapse.in{
		display:block !important;
	}
	nav .navbar-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0;
		background-color: #0000;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
}


/* ═══════════════════════════════════════════════
   NAVBAR ACTION BUTTONS — Ask AI / Add / What's new / Settings
   (the cluster in #search_section_list, base_member.html)

   Before: .assistant-ask-btn, .navbar-icons and .rn-badge had no rule
   anywhere, so Ask AI rendered with browser-default button chrome and
   never matched its neighbours. The icon buttons leaned on .btn-gray,
   which ui-refresh.css never modernised — a dark var(--gray) hairline
   around a light fill reads as a *disabled* control, and .btn-gray
   defines no :hover/:focus, so the whole cluster felt inert.

   After: the three icon buttons go quiet (transparent at rest, grey
   glyph, soft pill on hover) and Ask AI becomes the single accented
   element, so the eye lands on it first.

   Scoped to #search_section_list — .btn-gray is used by nine other
   templates (login, register, reports, patterns) that must not change.
   ═══════════════════════════════════════════════ */

	#search_section_list .assistant-ask-btn,
	#search_section_list .btn.btn-gray {
		height: 36px;
		border-radius: 8px;
		line-height: 1;
		transition: background-color .12s ease, border-color .12s ease, color .12s ease;
	}
	#search_section_list .assistant-ask-btn:focus-visible,
	#search_section_list .btn.btn-gray:focus-visible {
		outline: 2px solid var(--purple);
		outline-offset: 2px;
	}

/* Icon buttons — quiet at rest, pill on hover */
	#search_section_list .btn.btn-gray {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		margin-left: 2px;
		padding: 0;
		background-color: transparent;
		border: 1px solid transparent;
		color: var(--gray-500);
	}
/* !important is load-bearing: styles.css:204 pins
   `li .dropdown-toggle:hover { color: var(--gray) !important }`, which
   otherwise wins over this rule for Add and Settings but not for the
   What's new bell (not a .dropdown-toggle) — leaving the three icons
   hovering to two different colours. */
	#search_section_list .btn.btn-gray:hover,
	#search_section_list .btn.btn-gray:focus,
	#search_section_list .open > .btn.btn-gray {
		background-color: var(--background-gray);
		color: var(--dark-purple) !important;
	}
	#search_section_list .btn.btn-gray svg {
		height: 20px;
		width: 20px;
	}

/* The pre-heroicons icons paint via .a/.b fills rather than
   currentColor, so route them through colour too. .b is the knockout
   circle in settings.svg and has to track the button fill, not the
   glyph. */
	#search_section_list .btn.btn-gray svg .a {
		fill: currentColor;
	}
	#search_section_list .btn.btn-gray svg .b {
		fill: #FFF;
	}
	#search_section_list .btn.btn-gray:hover svg .b,
	#search_section_list .btn.btn-gray:focus svg .b,
	#search_section_list .open > .btn.btn-gray svg .b {
		fill: var(--background-gray);
	}

/* The legacy settings glyph is solid where add/bell are outlines, so at a
   matched box size it carries noticeably more optical weight. Trim it to
   even out the row. Both icon sets use .svg-settings, so key off the
   stroke attribute the heroicons version carries — its gear is a stroke
   like its siblings and needs no correction. */
	#search_section_list .btn.btn-gray svg.svg-settings:not([stroke]) {
		height: 17px;
		width: 17px;
	}

/* Ask AI — the one accented control in the cluster */
	#search_section_list .assistant-ask-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 0 14px;
		font-size: 13px;
		font-weight: var(--semibold);
		color: var(--dark-purple);
		background-color: var(--light-purple);
		border: 1px solid var(--medium-purple);
		cursor: pointer;
	}
	#search_section_list .assistant-ask-btn:hover,
	#search_section_list .assistant-ask-btn:focus {
		background-color: var(--alert-purple);
		border-color: var(--purple);
		color: var(--black-purple);
	}