body.mstrWeb {
    background: white;
    color: #000;/** LP Customization **/
}
.mstrLogo{
background-image: url("../../../style/mstr/images/theme/pathBarIcons.png") !important;
background-position: 0 -578px !important;
padding-left: 20px;
}

.mstrPath{
background-color:rgb(143,157,163);
}
.Red .mstrPath > TABLE, .Red .mstrPath > div.mstrPathContainer {
    border-bottom-color: rgb(143,157,163);
}
#mstrPathAccount {
    position: relative !important;
}
#mstrAccountMenu {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 8px !important;
}

.mscld-create {
background-color:rgb(143,157,163);
border-color:rgb(143,157,163);
}

.mscld-create :hover{
background-color:rgb(143,157,163);
border-color:rgb(143,157,163);
}

.mscld-create.open{
background-color:rgb(143,157,163);
}

.mstrFooterWrapper * {
    color: #656565;
}

.mstrListView > tbody > tr a:link {
    color: #000;
    text-decoration: underline;
}

.mstrPanelPortrait{

 border-color: #bbb;
}

.mstrPanelTitleBar {
    background: url("images/panelHeader.JPG") repeat-x scroll left top rgb(143,157,163) !important;
	height:20px!important;
	line-height :18px !important;
}
.Red .mstrPanelTitleBar,
.mstrPanelTitleBar .mstrPanelTitle {
    color: #fff !important;
}

/* Prompt title bars — actual element is div.mstrPromptQuestionTitleBar */
.mstrPromptQuestionTitleBar {
    background: rgb(143,157,163) !important;
    color: #fff !important;
}
.mstrPromptQuestionTitleBar .mstrPromptQuestionTitleBarTitle {
    color: #fff !important;
}

/* Hamburger dropdown shortcut icons.
   MSTR generates class="item {@name}" using the name attribute verbatim.
   Multi-word names produce multiple CSS classes (spaces become class boundaries).
   "List Converter" → .item.List.Converter  "Support Link" → .item.Support.Link
   OOTB only defines sprites for single-word names; custom items need explicit rules.
   Sprite sheet: shortcuts.png — same Y-offsets as OOTB (center -Xpx). */
.mstrShortcutsListPopup .item.subscriptions .icon {
    background-position: center -408px !important;  /* ensure OOTB rule isn't overridden */
}
.mstrShortcutsListPopup .item.newFilter .icon {
    background-position: center -169px !important;  /* filter funnel icon — from on-prem shortcuts.png */
}
.mstrShortcutsListPopup .item.Support.Link .icon,
.mstrShortcutsListPopup .item.List.Converter .icon {
    background-position: center -288px;  /* preferences/wrench icon — matches on-prem */
}

/* Report toolbar dropdowns: SharedBase sets color:#004054 (dark) for hover rows,
   but VectorAnalytics's hover-row background is dark enough to make it invisible.
   Override to white so text is visible on the dark hover background. */
.mstrWeb.Red .menu-row-selected .menu-item,
.mstrWeb.Red .menu-row-selected .menu-item-with-separator,
.mstrWeb.Red .mstrFloatingMenuItem .hover {
    color: #fff !important;
}

/* Export options page: panel title bar keeps the VA gray-blue background but needs white text. */
.mstr-page-exportOptionsFromReport .mstrPanelTitleBar {
    color: #fff !important;
}

#projects_ProjectsStyle .mstrLargeIconViewItemName a:link,
#projects_ProjectsStyle .mstrLargeIconViewItemName a:visited {
    color: #6d6d6d;
}

.mstrWeb.Red #folderAllModes .mstrLargeIconViewItem:hover .mstrLargeIconViewItemName .mstrLink{
color: rgb(143,157,163);
}
.mstrWeb .mstrLargeIconViewItemName A:visited { color: #656565; }
#DIV_filenameSpaceDelimiter{
display: none;
}
#DIV_burstSubFolder{
display: none;
}
.mojoPath{
background-color:rgb(143,157,163);
}
.mstrWeb.Red .mojoPath{
border-bottom:2px solid rgb(143,157,163);
}
@font-face {
 src: url('fonts/Poppins-Regular.ttf');
 font-family: "Poppins";
}

/* ============================================================
   VectorAnalyticsCustom overrides
   ============================================================ */

/* ============================================================
   VectorAnalyticsCustom/style/global.css
   App-specific CSS overrides for Vector Securities.
   Poppins font, logo, path bar and login page styling are included below.
   logo, path bar, and login page styling for this app.
   
   Shared rules (Red theme hover colors, button styles) live in
   SharedBase/style/global.css.
   ============================================================ */

/* ── mstr.css logo overrides (── */
/* logo_small1.png is the VA branding logo */
A.mstrLink:hover .mstrLogo {
    background-image: url(images/logo_hover_small.png);
}


/* Hamburger: OOTB sits flush at left:0 — add breathing room */
#mstrStarburst {
    margin-left: 10px !important;
}

/* Pull-down arrow: move from OOTB left:36px to sit flush against the hamburger icon */
#mstrLogoMenu {
    left: 21px !important;
}

/* Home icon — VA path bar is medium gray; OOTB dark sprite is visible without inversion */
.mstrPathIcons #tbHome {
    opacity: 0.85;
    transition: opacity 0.12s;
}

.mstrPathIcons a:hover #tbHome,
.mstrPathIcons #tbHome:hover {
    opacity: 1 !important;
}

/* VS back/forward arrows: both sprite positions are near-white at natural color on the
   gray bar. brightness(0) forces both to black; opacity 0.55 matches the visual weight
   of home/hamburger. .mstrWeb ancestor beats SharedBase's invert(1) rule. */
.mstrWeb .mstrPathIcons #tbBack0,
.mstrWeb .mstrPathIcons #tbForward0 {
    filter: brightness(0) !important;
    opacity: 0.55;
}
.mstrWeb .mstrPathIcons #tbBack0.disabled,
.mstrWeb .mstrPathIcons #tbForward0.disabled {
    opacity: 0.3;
}
.mstrWeb .mstrPathIcons a:hover #tbBack0:not(.disabled),
.mstrWeb .mstrPathIcons a:hover #tbForward0:not(.disabled) {
    filter: brightness(0) !important;
    opacity: 0.85 !important;
}

/* Help (?) button sprite on gray path bar — invert to white */
.mstrHelpShortcut {
    filter: brightness(0) invert(1) !important;
    opacity: 0.85;
    transition: opacity 0.12s;
}
.mstrHelpShortcut:hover {
    opacity: 1 !important;
}

/* Hide "Projects" from the left panel shortcuts popup — the shortcut must
   remain in the OOTB framework so the mojo path bar renders the home icon,
   but it should not be visible in the navigation list. */
.mstrShortcutsListPopup a.projects,
.mstrShortcutsListPopup .item.projects {
    display: none !important;
}

/* ── folder icon override (Projects page large icon view) ── */
span.mstrIcon {
    background: transparent url(images/folder.png);
    display: block;
    width: 77px;
    height: 77px;
}

/* ── Login button image ── */
.mstrLoginButton,
#mstrLoginButton input[type="submit"],
input#btnLogin {
    background: url(images/Login_button.jpg) !important;
}


/* ============================================================
   Footer — override MSTR 11.5 default (top: -1000px hidden)
   ============================================================ */

.mstrFooterWrapper,
.mstrFooterWrapper.close {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    z-index: 100;
    background: #edecec;
    background: -webkit-linear-gradient(#f0f0f0, #cdcdcd);
    background: -moz-linear-gradient(#f0f0f0, #cdcdcd);
    background: linear-gradient(#f0f0f0, #cdcdcd);
    border-top: 1px solid #ddd;
    padding: 0;
    display: block !important;
}

/* push page content up so the fixed footer doesn't overlap the last row */
#mstrWebContents {
    padding-bottom: 50px;
}

/* repLayoutLeft is a server-computed spacer (width = ltW browser setting) designed for
   when tdDockLeft is 0px wide (CSS-only). mstrMenuTabsImpl.js also sets tdDockLeft to
   200px inline, making it part of the table flow. The two offsets stack, pushing the
   report data right. Force width:0 so tdDockLeft alone offsets the report from the panel. */
td.repLayoutLeft {
    width: 0 !important;
}

/* mstrMenuExtra (folder toolbar: New Folder / List / Icon / Refresh) is clipped
   by #leftToolbar {overflow:hidden}. mstrLeftPaneImpl.js sets mstrMenuContent
   height to nearly the full pane height via inline style, pushing mstrMenuExtra
   (~30px) past the overflow boundary. Absolute-position at the bottom of the pane
   so it's always visible regardless of content height. */
#leftToolbar {
    position: relative !important;
}
.mstrMenuExtra {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
    background-color: #f5f5f5 !important;
    z-index: 5 !important;
}

/* Suppress OOTB red border-bottom on path/breadcrumb bar.
   mstrColorThemeRed.css sets border-bottom-color:#d9222d on
   .Red .mstrPath>DIV and border-bottom-style:solid on
   .mstrPathContainer — visible as a 1-2px red line below the
   header on Chrome/Windows and Edge. */
.Red .mstrPath > TABLE,
.Red .mstrPath > DIV,
.Red .mstrPath > div.mstrPathContainer {
    border-bottom: none !important;
}

/* VS #10: Hide Home (Projects shortcut) and My Subscriptions from the left navigation panel.
   The existing .mstrShortcutsListPopup rules cover the hamburger popup; these cover the panel.
   SharedBase also hides subscriptions via title-attr; .item.subscriptions is a fallback. */
.item.projects,
.item.home,
.item.subscriptions {
    display: none !important;
}

/* Exception: restore home button inside any mojoPath container — OIVM's path bar has a
   different DOM depth than the classic mojoPath, so .mojoPath-navigation was too narrow.
   Specificity (0,3,0) beats the hide rule (0,2,0). */
.mojoPath .item.home,
.mojoPath a.item.home {
    display: inline-block !important;
}


/* mojoPath bar — VS gray background matches the header */
.mojoPath {
    background: rgb(143,157,163) !important;
}

/* Starburst logo in toolbar — acts as the left-edge spacer.
   10px left padding creates the visual indent; 24px width keeps it compact. */
#mojoPath-starburst {
    padding-left: 10px !important;
    width: 24px !important;
}

/* Breadcrumb path text — white on the gray bar, matching the VS header style */
.mojoPath A:link,
.mojoPath A:visited,
.mojoPath A:hover,
.mojoPath .mojoPath-path,
.mojoPath .pathText,
.mojoPath .pathFirst,
.mojoPath .pathAncestor,
.mojoPath .pathLast,
.mojoPath .pathCurrent,
.mojoPath .pathBreadCrumbs,
.mojoPath .mojoPath-extraLinks span {
    color: #ffffff !important;
}

/* OIVM mojoPath: back/forward/home arrows use dark sprites on VS's medium-gray bar.
   They are visible but too harsh at full opacity — dim slightly to match the bar tone. */
.mojoPath .mojoPath-navigation .tbBack0,
.mojoPath .mojoPath-navigation .tbForward0,
.mojoPath .mojoPath-navigation .tbHome {
    opacity: 0.6;
    transition: opacity 0.12s;
}
.mojoPath .mojoPath-navigation a:hover .tbBack0,
.mojoPath .mojoPath-navigation a:hover .tbForward0,
.mojoPath .mojoPath-navigation a:hover .tbHome {
    opacity: 0.9 !important;
}

/* Forward (right) arrow — use the darker sprite at -70px */
.mojoPath .mojoPath-navigation .tbForward0 {
    background-position: 0 -70px !important;
}

/* OIVM mojoPath: search icon on the right — VS global.css inverts #mstrSearchSuggest
   to white for the classic path bar but the mojoPath search sits in .mojoPath-search.
   The dark sprite is too dark on the medium-gray mojoPath bar; dim without inverting. */
.mojoPath .mojoPath-search .mstrNavIcon,
.mojoPath .mojoPath-search input {
    opacity: 0.6;
    transition: opacity 0.12s;
}
.mojoPath .mojoPath-search:hover .mstrNavIcon,
.mojoPath .mojoPath-search:hover input {
    opacity: 0.9 !important;
}

/* Up (parent folder) button — dark sprite invisible on gray-blue path bar.
   Same inversion applied to #tbBack0/#tbForward0 in SharedBase. */
.mstrPathIcons #tbReturn {
    filter: brightness(0) invert(1) !important;
    opacity: 0.72;
    transition: opacity 0.12s;
}
.mstrPathIcons #tbReturn.disabled {
    opacity: 0.4;
}
.mstrPathIcons a:hover #tbReturn:not(.disabled) {
    opacity: 1 !important;
}