/* Jeepney.io logged-in header: styling for the header bar, launcher, logo and app menu.
   Served from a cached file (was four inline <style> blocks in layout/header/content.phtml, re-sent with every page).
   Rule order below is the original cascade order; do not reorder. */

/* =====================================================
   JEEPNEY.IO HEADER APPS SOURCE DROPDOWN V7
   Clean desktop + mobile Apps popup.
   Prevents raw/ghost menu leak.
===================================================== */


.jp-header-apps-source-dropdown {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	margin: 0 8px 0 0 !important;
	padding: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 2147483400 !important;
	box-sizing: border-box !important;
}

.jp-header-apps-source-toggle {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	max-width: 42px !important;
	min-height: 42px !important;
	max-height: 42px !important;
	border: 1px solid rgba(252,216,54,0.16) !important;
	border-radius: 14px !important;
	background: var(--jp-ink) !important;
	color: var(--jp-cyan) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 8px 22px rgba(9,23,71,0.08) !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	touch-action: manipulation !important;
}

.jp-header-apps-source-toggle:hover,
.jp-header-apps-source-toggle:focus,
.jp-header-apps-source-dropdown.jp-source-apps-open .jp-header-apps-source-toggle {
	background: #09184a !important;
	box-shadow: 0 12px 26px rgba(252,216,54,0.18) !important;
}

.jp-header-apps-source-toggle svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	pointer-events: none !important;
}

/* Closed state must be brutal to prevent the raw ghost menu from leaking. */
#jp_header_apps_source_menu,
.jp-header-apps-source-menu {
	position: fixed !important;
	top: -9999px !important;
	left: -9999px !important;
	right: auto !important;

	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;

	width: 252px !important;
	min-width: 252px !important;
	max-width: calc(100vw - 24px) !important;
	max-height: calc(100dvh - 88px) !important;

	padding: 10px !important;
	margin: 0 !important;
	border: 1px solid rgba(252,216,54,0.16) !important;
	border-radius: 20px !important;
	background: var(--jp-ink) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5) !important;
	z-index: 2147483646 !important;

	overflow-y: auto !important;
	overflow-x: hidden !important;
	list-style: none !important;
	box-sizing: border-box !important;
	-webkit-overflow-scrolling: touch !important;
	transform: none !important;
	backdrop-filter: blur(18px) saturate(150%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

/* Open state */
#jp_header_apps_source_menu.jp-source-apps-open,
.jp-header-apps-source-menu.jp-source-apps-open {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	top: var(--jp-header-apps-menu-top, 76px) !important;
	left: var(--jp-header-apps-menu-left, 12px) !important;
}

.jp-header-apps-source-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 18px !important;
	width: 100% !important;
	min-height: 34px !important;
	padding: 0 10px 9px !important;
	margin: 0 0 7px 0 !important;
	font-size: 12px !important;
	font-weight: 950 !important;
	letter-spacing: 0.055em !important;
	color: #ffffff !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	border-bottom: 1px solid rgba(252,216,54,0.16) !important;
	box-sizing: border-box !important;
}

.jp-header-apps-source-menu > li {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	box-sizing: border-box !important;
	border: 0 !important;
}

.jp-header-apps-source-menu > li > a {
	display: grid !important;
	grid-template-columns: 30px minmax(0, 1fr) !important;
	grid-template-rows: auto auto !important;
	align-items: center !important;
	column-gap: 12px !important;
	row-gap: 3px !important;
	gap: 12px !important;
	width: 100% !important;
	min-height: 52px !important;
	padding: 8px 10px !important;
	margin: 0 !important;
	border-radius: 13px !important;
	font-size: 14.5px !important;
	font-weight: 850 !important;
	line-height: 1.15 !important;
	color: #dbe4f3 !important;
	text-decoration: none !important;
	white-space: normal !important;
	background: transparent !important;
	box-sizing: border-box !important;
}

.jp-header-apps-source-menu > li > a .jp-header-apps-source-emoji {
	grid-column: 1 !important;
	grid-row: 1 / 3 !important;
}

.jp-header-apps-source-menu > li > a strong {
	grid-column: 2 !important;
	grid-row: 1 !important;
	display: block !important;
	min-width: 0 !important;
	/* was white-space:nowrap -- at this menu's fixed 252px width, "Northern
	   Mindanao Practical Shooting Association" needs more than the ~190px
	   available in the text column, so nowrap pushed it past the menu's
	   own overflow-x:hidden and silently clipped the right side. Wrapping
	   is the general-purpose fix (any future long label gets the same
	   protection); the row's auto grid-template-rows already grows to fit
	   a 2-line title with no layout changes needed elsewhere. */
	white-space: normal !important;
	overflow-wrap: break-word !important;
}

.jp-header-apps-source-menu > li > a small {
	grid-column: 2 !important;
	grid-row: 2 !important;
	display: block !important;
	min-width: 0 !important;
	overflow: visible !important;
	color: rgba(219,228,243,0.55) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	white-space: normal !important;
}

.jp-header-apps-source-menu > li.jp-header-apps-source-section {
	padding: 14px 10px 6px !important;
	color: rgba(219,228,243,0.48) !important;
	font-size: 9px !important;
	font-weight: 950 !important;
	letter-spacing: 0.14em !important;
}

.jp-header-apps-source-menu > li > a:hover,
.jp-header-apps-source-menu > li > a:focus {
	background: rgba(252,216,54,0.08) !important;
	color: var(--jp-cyan) !important;
	text-decoration: none !important;
}

.jp-header-apps-source-emoji {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	min-width: 26px !important;
	height: 26px !important;
	font-size: 16px !important;
	line-height: 1 !important;
	text-align: center !important;
}

.jp-header-apps-source-menu strong {
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

/* Kill old JS-generated Apps button/menu only. */
.jp-header-apps-btn,
.jp-apps-launcher-menu {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

body.jp-header-source-apps-open #jp_affiliates_mobile_topbar,
body.jp-header-source-apps-open .jp-affiliates-mobile-topbar,
body.jp-header-source-apps-open .jp-affiliates-mobile-menu-bar,
body.jp-header-source-apps-open .jp-affiliates-topbar,
body.jp-header-source-apps-open .jp-mobile-affiliates-topbar {
	z-index: 2147482500 !important;
}

@media (min-width: 769px) {
	.jp-header-apps-source-dropdown {
		width: 42px !important;
		min-width: 42px !important;
		max-width: 42px !important;
		height: 70px !important;
		margin-left: 6px !important;
		margin-right: 0 !important;
	}

	#jp_header_apps_source_menu,
	.jp-header-apps-source-menu {
		width: 1080px !important;
		/* 740px, not 900px -- must stay <= (769px breakpoint - 24px max-width
		   margin) = 745px so min-width can never exceed max-width at the
		   narrowest width this rule applies to; a min-width above that
		   threshold forces the menu wider than the viewport itself (clipped
		   text, no horizontal scroll) on any window between the breakpoint
		   and the min-width value. */
		min-width: 740px !important;
		max-width: calc(100vw - 24px) !important;
		/* The base rule's max-height:calc(100dvh - 88px) was tuned for a
		   single tall column; APPS+SERVICES stacked in one column here can
		   run to ~11 rows, which needs more like 660-700px and was getting
		   clipped (VV Security Agency onward) on ordinary laptop-height
		   viewports even though nothing was actually visually scrollable at
		   that point -- overflow-y:auto silently ate the rest. Reclaiming
		   the reserved space gets everything on screen at once, which is
		   the actual goal of going multi-column; overflow-y:auto stays on
		   as a fallback for unusually short desktop windows. */
		max-height: calc(100dvh - 40px) !important;
		border-radius: 0 0 20px 20px !important;
		/* Desktop only: 4 columns, one section per column (JEEPNEY.IO APPS,
		   SERVICES, REGULATED, EXPLORE), each forced via break-before on its
		   own section header below. A plain balanced column-count (2 columns,
		   the original design) split wherever the total height happened to
		   land once SERVICES grew past 4 entries (adding Michelle Francisco
		   Beauty pushed APPS+SERVICES over the natural 2-column balance
		   point), scattering SERVICES entries across both columns instead
		   of keeping them together -- N columns with a forced break per
		   section makes each section's placement independent of section
		   growth, so this class of bug can't recur as more tiles are added.
		   REGULATED (VV Security, SAC, NMPSA, JMD) was split out of SERVICES
		   into its own forced column for the same reason -- it had grown
		   large enough on its own to crowd out the rest of SERVICES in a
		   single column. */
		column-count: 4 !important;
		column-gap: 24px !important;
	}

	.jp-header-apps-services-section,
	.jp-header-apps-regulated-section,
	.jp-header-apps-explore-section {
		break-before: column !important;
		-webkit-column-break-before: always !important;
		margin-top: 0 !important;
	}
}

@media (max-width: 768px) {
	.jp-header-apps-source-dropdown {
		width: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
		height: 52px !important;
		margin: 0 0 0 4px !important;
	}


	.jp-header-apps-source-toggle svg {
		width: 19px !important;
		height: 19px !important;
	}

	#jp_header_apps_source_menu,
	.jp-header-apps-source-menu {
		width: min(340px, calc(100vw - 28px)) !important;
		min-width: 0 !important;
		max-height: calc(100dvh - 90px - env(safe-area-inset-bottom)) !important;
		padding: 10px !important;
		border-radius: 0 0 22px 22px !important;
	}

	.jp-header-apps-source-title {
		min-height: 32px !important;
		padding: 0 9px 8px !important;
		font-size: 11.5px !important;
		letter-spacing: 0.055em !important;
	}

	.jp-header-apps-source-menu > li > a {
		min-height: 50px !important;
		padding: 7px 9px !important;
		gap: 11px !important;
		font-size: 14.5px !important;
		border-radius: 13px !important;
	}

	.jp-header-apps-source-emoji {
		width: 25px !important;
		min-width: 25px !important;
		height: 25px !important;
		font-size: 16px !important;
	}
}


/*
  Jeepney.io Global Clean Header V1
  Merchant Wallet-inspired visual system.
  Existing Apps, requests, messages, notifications,
  Wallet, AI, profile, dropdowns, and popup portals remain intact.
*/

/* =====================================================
   GLOBAL DARK HEADER SHELL
===================================================== */


html body .header-container .header-fixed1000.jp-header-shell {
    min-height: 64px !important;
    height: 64px !important;
    background: #081540 !important;
    border: 0 !important;
}


html body .header-container .jp-header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* =====================================================
   CLEAN JEEPNEY.IO BRAND
===================================================== */


/* Hide the large legacy logo image only inside the global header */
html body .header-container .jp-header-logo-link > img,
html body .header-container .jp-header-logo-link > svg {
    display: none !important;
}

/* Small transport-network mark */
html body .header-container .jp-header-logo-link::before {
    content: "△" !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 11px !important;

    background: #0b1d57 !important;
    color: #fcd93b !important;

    border: 1px solid rgba(252,217,59,.20) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02) !important;

    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
}

/* Jeepney.io wordmark */
html body .header-container .jp-header-logo-link::after {
    content: "Jeepney.io" !important;

    color: #ffffff !important;

    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: -.035em !important;

    white-space: nowrap !important;
}

/* =====================================================
   APPS BUTTON
===================================================== */


html body .header-container .jp-header-apps-source-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    border-radius: 12px !important;

    background: #0b1d57 !important;
    color: #fcd93b !important;

    border: 1px solid rgba(252,217,59,.18) !important;
    box-shadow: none !important;
}

html body .header-container .jp-header-apps-source-toggle:hover,
html body .header-container .jp-header-apps-source-toggle:focus,
html body .header-container
.jp-header-apps-source-dropdown.jp-source-apps-open
.jp-header-apps-source-toggle {
    background: #0d246d !important;
    color: #fcda40 !important;
    box-shadow: 0 8px 20px rgba(252,216,54,.10) !important;
}


/* =====================================================
   RIGHT-SIDE GLOBAL CONTROLS
===================================================== */

html body .header-container #head_menu_rght.jp-header-right-nav {
    min-height: 64px !important;
    height: 64px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 3px !important;

    /*
     * margin-left: auto pins this group to the far right of the
     * header's flex row directly, independent of whatever the
     * sibling .jp-header-left's flex-grow is doing.
     */
    margin: 0 0 0 auto !important;
    padding: 0 !important;

    float: none !important;
    background: transparent !important;
}

html body .header-container #head_menu_rght > li {
    min-height: 64px !important;
    height: 64px !important;

    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

/* Requests / messages / notifications */
html body .header-container .jp-header-icon-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 12px !important;

    background: transparent !important;
    color: #d7e2ef !important;

    border: 1px solid transparent !important;
    box-shadow: none !important;
}

html body .header-container .jp-header-icon-toggle:hover,
html body .header-container .jp-header-icon-toggle:focus,
html body .header-container
.jp-header-popup-container.open
.jp-header-icon-toggle {
    background: #0b1d57 !important;
    color: #fcd93b !important;
    border-color: rgba(252,217,59,.13) !important;
}

/* Alert badges */
html body .header-container .jp-header-alert-badge,
html body .header-container .new-update-alert {
    min-width: 18px !important;
    height: 18px !important;

    padding: 0 5px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;

    background: #295fe7 !important;
    color: #ffffff !important;

    border: 2px solid #081540 !important;

    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;

    box-shadow: none !important;
}

/* =====================================================
   FEED / WALLET / PAGES / AI TEXT LINKS
===================================================== */

html body .header-container
.jp-header-nav-shortcut
.jp-header-mini-link,
html body .header-container
.jp-header-mini-shortcut
.jp-header-mini-link {
    min-width: 0 !important;
    height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    margin: 0 1px !important;
    padding: 0 11px !important;

    border-radius: 10px !important;

    background: transparent !important;
    color: #cbd7e5 !important;

    border: 1px solid transparent !important;
    box-shadow: none !important;

    text-decoration: none !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

html body .header-container
.jp-header-nav-shortcut
.jp-header-mini-link:hover,
html body .header-container
.jp-header-mini-shortcut
.jp-header-mini-link:hover,
html body .header-container
.jp-header-nav-shortcut
.jp-header-mini-link:focus,
html body .header-container
.jp-header-mini-shortcut
.jp-header-mini-link:focus {
    background: #0b1d57 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.05) !important;
}

/* Merchant header-inspired text-only navigation */

html body .header-container
.jeepney-mini-header-text {
    display: inline !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}



/* =====================================================
   PROFILE
===================================================== */

html body .header-container .jp-header-user-toggle {
    min-width: 0 !important;
    height: 42px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin: 0 0 0 5px !important;
    padding: 0 9px 0 5px !important;

    border-radius: 13px !important;

    background: transparent !important;
    color: #ffffff !important;

    border: 1px solid transparent !important;
    box-shadow: none !important;
}

html body .header-container .jp-header-user-toggle:hover,
html body .header-container
.jp-header-user-container.open
.jp-header-user-toggle {
    background: #0b1d57 !important;
    border-color: rgba(255,255,255,.05) !important;
}

html body .header-container .jp-header-user-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    margin: 0 !important;

    border-radius: 50% !important;

    overflow: hidden !important;

    border: 2px solid rgba(255,255,255,.16) !important;
    background: #ffffff !important;
}

html body .header-container .jp-header-user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body .header-container .jp-header-user-toggle > b {
    display: block !important;

    max-width: 115px !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    color: #ffffff !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    html body .header-container .header-fixed1000.jp-header-shell,
    html body .header-container .jp-header-inner {
        min-height: 56px !important;
        height: 56px !important;
    }




    html body .header-container .jp-header-logo-link::before {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;

        border-radius: 10px !important;

        font-size: 16px !important;
    }

    html body .header-container .jp-header-logo-link::after {
        font-size: 16px !important;
    }


    html body .header-container .jp-header-apps-source-toggle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;

        border-radius: 11px !important;
    }

    html body .header-container #head_menu_rght.jp-header-right-nav,
    html body .header-container #head_menu_rght > li {
        min-height: 56px !important;
        height: 56px !important;
    }



    html body .header-container .jp-header-user-toggle {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;

        margin-left: 1px !important;
        padding: 0 !important;

        justify-content: center !important;
    }

    html body .header-container .jp-header-user-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    html body .header-container .jp-header-user-toggle > b {
        display: none !important;
    }
}

/* Narrow phones */
@media (max-width: 390px) {

    html body .header-container .jp-header-logo-link::after {
        font-size: 14px !important;
    }


    html body .header-container #head_menu_rght.jp-header-right-nav {
        gap: 1px !important;
    }
}



/* Real brand unit: triangle first, Jeepney.io second */
html body .header-container .jp-header-logo-link {
    order: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    text-decoration: none !important;
    overflow: visible !important;
}

/* Disable all older pseudo-logo pieces */
html body .header-container .jp-header-logo-link::before,
html body .header-container .jp-header-logo-link::after {
    content: none !important;
    display: none !important;
}

/* Restore the new real source children */
html body .header-container .jp-header-logo-link > .jp-global-brand-mark,
html body .header-container .jp-header-logo-link > .jp-global-brand-name {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .header-container .jp-global-brand-mark {
    align-items: center !important;
    justify-content: center !important;

    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;

    color: #fcd836 !important;
}

html body .header-container .jp-global-brand-mark svg {
    display: block !important;

    width: 34px !important;
    height: 30px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 4 !important;
    stroke-linejoin: round !important;
}

html body .header-container .jp-global-brand-name {
    align-items: center !important;

    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    white-space: nowrap !important;
}

/* Apps button always follows the complete brand */
html body .header-container .jp-header-apps-source-dropdown {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 2px !important;
}

html body .header-container .jp-header-left-nav {
    order: 3 !important;
}

@media (max-width: 768px) {
    html body .header-container .jp-header-left {
        gap: 7px !important;
    }

    html body .header-container .jp-header-logo-link {
        gap: 6px !important;
    }

    html body .header-container .jp-global-brand-mark {
        width: 31px !important;
        min-width: 31px !important;
        height: 31px !important;
    }

    html body .header-container .jp-global-brand-mark svg {
        width: 30px !important;
        height: 27px !important;
    }

    html body .header-container .jp-global-brand-name {
        font-size: 15px !important;
    }

    /* Wordmark stays visible on phones. The old overlap with the apps button came from the
       logo-link and wordmark boxes shrinking below their nowrap text, so keep both at content
       size (no shrink) instead of hiding the wordmark. */

    html body .header-container .jp-header-logo-link > .jp-global-brand-name {
        flex: 0 0 auto !important;
        width: max-content !important;
        min-width: max-content !important;
    }
}



/* =====================================================
   ZERO COUNTS MUST NOT APPEAR
===================================================== */



/* =====================================================
   TECH-GRADE REQUESTS / MESSAGES / NOTIFICATIONS
===================================================== */

/* Main dropdown shells */
html body #jp_header_requests_dropdown,
html body #jp_header_messages_dropdown,
html body #jp_main_notifications_dropdown,
html body .user-request-container .dropdown-menu,
html body .messages-notification-container .dropdown-menu,
html body .notification-container .dropdown-menu,
html body .jp-header-popup-panel,
html body .messages-dropdown,
html body .notifications-dropdown {

    background:
        linear-gradient(
            180deg,
            #081642 0%,
            #071235 100%
        ) !important;

    color: #edf6ff !important;

    border:
        1px solid
        rgba(252,217,59,.22) !important;

    box-shadow:
        0 26px 70px
        rgba(0, 0, 0, .58) !important;
}


/* Dropdown title bars */
html body #jp_header_requests_dropdown .hdr_notis_title,
html body #jp_header_messages_dropdown .hdr_notis_title,
html body #jp_main_notifications_dropdown .hdr_notis_title,
html body .user-request-container .hdr_notis_title,
html body .messages-notification-container .hdr_notis_title,
html body .notification-container .hdr_notis_title,
html body .messages-dropdown .hdr_notis_title,
html body .notifications-dropdown .hdr_notis_title {

    background: #09184a !important;

    color: #ffffff !important;

    border-bottom:
        1px solid
        rgba(252,217,59,.20) !important;
}


/* List backgrounds */
html body #requests-list,
html body #messages-list,
html body #notification-list {

    background: #071235 !important;

    color: #edf6ff !important;
}


/* Every dropdown row */
html body #requests-list > div,
html body #requests-list > li,
html body #requests-list .notification-list,

html body #messages-list > div,
html body #messages-list > li,
html body #messages-list .notification-list,

html body #notification-list > div,
html body #notification-list > li,
html body #notification-list .notification-list {

    background: #071235 !important;

    color: #edf6ff !important;

    border-bottom:
        1px solid
        rgba(252,218,64,.09) !important;

    transition:
        background .16s ease,
        border-color .16s ease !important;
}


/* Remove legacy white row backgrounds */
html body #requests-list a,
html body #messages-list a,
html body #notification-list a {

    background: transparent !important;

    color: #edf6ff !important;

    text-decoration: none !important;
}


/* Hover, selected, active, and unread rows */
html body #requests-list > div:hover,
html body #requests-list > li:hover,
html body #requests-list .notification-list:hover,
html body #requests-list .active,
html body #requests-list .unread,

html body #messages-list > div:hover,
html body #messages-list > li:hover,
html body #messages-list .notification-list:hover,
html body #messages-list .active,
html body #messages-list .unread,

html body #notification-list > div:hover,
html body #notification-list > li:hover,
html body #notification-list .notification-list:hover,
html body #notification-list .active,
html body #notification-list .unread {

    background:
        linear-gradient(
            90deg,
            rgba(252,217,59,.13),
            rgba(41,95,231,.08)
        ) !important;

    border-bottom-color:
        rgba(252,217,59,.18) !important;
}


/* Prevent hovered links from turning white */
html body #requests-list a:hover,
html body #requests-list a:focus,

html body #messages-list a:hover,
html body #messages-list a:focus,

html body #notification-list a:hover,
html body #notification-list a:focus {

    background: transparent !important;

    color: #ffffff !important;
}


/* User names and primary information */
html body #requests-list b,
html body #requests-list strong,
html body #requests-list .user-name,
html body #requests-list .main-color,

html body #messages-list b,
html body #messages-list strong,
html body #messages-list .user-name,
html body #messages-list .main-color,

html body #notification-list b,
html body #notification-list strong,
html body #notification-list .user-name,
html body #notification-list .main-color {

    color: #ffffff !important;

    opacity: 1 !important;
}


/* Message previews and notification descriptions */
html body #requests-list span,
html body #requests-list p,

html body #messages-list span,
html body #messages-list p,

html body #notification-list span,
html body #notification-list p {

    color: #b9c9db !important;

    opacity: 1 !important;
}


/* Dates and timestamps */
html body #requests-list time,
html body #requests-list .ajax-time,
html body #requests-list .time,
html body #requests-list .gray,
html body #requests-list .text-muted,

html body #messages-list time,
html body #messages-list .ajax-time,
html body #messages-list .time,
html body #messages-list .gray,
html body #messages-list .text-muted,

html body #notification-list time,
html body #notification-list .ajax-time,
html body #notification-list .time,
html body #notification-list .gray,
html body #notification-list .text-muted {

    color: #8497ae !important;

    opacity: 1 !important;
}


/* Keep names bright even when nested inside spans */
html body #requests-list span b,
html body #requests-list span strong,

html body #messages-list span b,
html body #messages-list span strong,

html body #notification-list span b,
html body #notification-list span strong {

    color: #ffffff !important;
}


/* See All / footer links */
html body #jp_header_requests_dropdown .see-all,
html body #jp_header_messages_dropdown .see-all,
html body #jp_main_notifications_dropdown .see-all,

html body #jp_header_requests_dropdown .view-more,
html body #jp_header_messages_dropdown .view-more,
html body #jp_main_notifications_dropdown .view-more {

    background: #09184a !important;

    color: #ffffff !important;

    border-top:
        1px solid
        rgba(252,217,59,.16) !important;
}


/* Scrollbar stays within the tech-grade design */
html body #jp_header_requests_dropdown,
html body #jp_header_messages_dropdown,
html body #jp_main_notifications_dropdown {

    scrollbar-color:
        rgba(252,217,59,.45)
        rgba(255, 255, 255, .04);

    scrollbar-width: thin;
}