/*<meta />*/

@import url('manual.css');

/*
---------------------------------------------------------------------------------------------------------------
   Baker Hughes web brand color overrides
   Applied to HTML5 Side Navigation web targets only.
   PDF and Dynamic Help targets continue to use manual.css directly.
---------------------------------------------------------------------------------------------------------------
*/

/* Links — BH Green instead of legacy blue */
a:link
{
    color: #018374; /* BH Green */
}

a:visited
{
    color: #018374; /* BH Green */
}

a:hover
{
    color: #02BC94; /* BH Light Green */
}

/* Headings — BH Dark Green instead of legacy blue */
h1,
h2,
h3,
h4,
h5,
h6,
h1.MidTopicHeading,
h2.MidTopicHeading,
h3.MidTopicHeading,
h4.MidTopicHeading,
h5.MidTopicHeading,
h6.MidTopicHeading
{
    color: #05322B; /* BH Dark Green */
}

p.MidTopicHeadingColor
{
    color: #018374; /* BH Green as accent */
}

/* Remove legacy blue from generic table headers and keep table labels neutral. */
th,
table.Basic th,
table.Basic tr.HeaderRow td,
table.Basic tr.HeaderRow td p,
table.Basic thead p,
table.UIElements th,
table.Icons th
{
    color: #010101;
}

/* Drop-down hotspots were blue in the legacy stylesheet; use BH dark green instead. */
MadCap|dropDownHotspot
{
    color: #018374;
}

MadCap|dropDownHotspot:hover
{
    color: #02BC94;
}

@media screen
{
    /* Align top of content area with top of sidebar — skin generates
       padding-top: 1em on .body-container but the sidenav-wrapper has none. */
    .body-container
    {
        padding-top: 0;
    }

    /* Sidebar divider line: the skin places border-right on .sidenav-container
       (inner div, only as tall as menu content). Move it to nav.sidenav-wrapper
       (the flex item, which stretches to full layout height) so the line runs
       all the way to the bottom of the page. */
    .sidenav-container
    {
        border-right: none;
    }

    .sidenav-wrapper
    {
        border-right: solid 1px #D0D0D0;
        overflow-x: hidden; /* suppress horizontal scrollbar — prevents it crossing the border-right line at the bottom corner */
    }

    /* Breadcrumbs — left-aligned with "You are here:" prefix */
    div.MCBreadcrumbsBox_0
    {
        text-align: left;
        font-size: .8em; /* up from .7em in main.css */
    }

    MadCap|breadcrumbsProxy
    {
        mc-breadcrumbs-prefix: 'You are here: ';
        background-color: transparent;
        color: #949494; /* BH Gray */
    }

    a.MCBreadcrumbsLink
    {
        color: #018374; /* BH Green */
    }

    a.MCBreadcrumbsLink:visited
    {
        color: #018374;
    }

    a.MCBreadcrumbsLink:hover
    {
        color: #02BC94; /* BH Light Green */
    }

    /* Prev/Next chevron icons — recolor from blue to BH Green (#018374).
       brightness(0) normalises the source to black, then the remaining
       filters push it to the target hue. Adjust hue-rotate (125-145)
       if the shade is slightly off after a rebuild. */
    #PrevButton .tabs-nav-icon,
    #NextButton .tabs-nav-icon
    {
        filter: brightness(0) invert(44%) sepia(68%) saturate(480%) hue-rotate(133deg);
    }

    /* Footer bar: main.css sets position:fixed; bottom:0; width:100% with a
       border-top that crosses the sidebar border-right. Offset it to start at
       the sidebar width so both lines end cleanly at the same point. */
    Div.Footer
    {
        left: 20%;
        width: 80%;
        margin-left: 0;
        padding-left: 1em;
    }

    /* Title bar outer-row: expand to full viewport width so % positions inside
       title-bar-layout match the content section below. Restore the skin's
       1em side padding so the logo keeps its indent. */
    .off-canvas-wrapper-inner nav.title-bar .outer-row
    {
        max-width: 100%;
    }

    /* Title bar: needs position:relative so the absolutely placed product
       title ::after is anchored to the full-width header bar, not its
       immediate parent .logo-wrapper. */
    .title-bar-layout
    {
        position: relative;
    }

    /* Logo anchor: skin hardcodes width:400px but the image only renders at
       ~232px (400:62 aspect × 36px height). Shrink the element to its actual
       visual width so the absolute ::after title doesn't sit inside dead space. */
    .title-bar-layout a.logo
    {
        width: 244px;
    }

    /* Header product title — absolutely positioned so its left edge aligns
       exactly with the body content column (sidebar 20% + body padding 1em).
       Content text is set per-target via .logo-wrapper::after { content: "..." }
       in web-admin.css / web-geomechanics.css / web-subsurface.css.
       max() ensures the title always clears the logo image (244px) even when
       20vw < 244px at intermediate viewport widths. */
    .title-bar-layout .logo-wrapper::after
    {
        position: absolute;
        left: max(256px, 20vw); /* 256px = logo width + small gap; 20vw aligns with sidebar at wider viewports */
        top: 50%;
        transform: translateY(-50%);
        max-width: calc(60% - 2em); /* keep clear of the search bar */
        font-family: Poppins, Arial, sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: #05322B;
        padding-left: 16px;
        border-left: 2px solid #018374;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

/* Hide the product title on tablet/mobile — sidebar collapses at 768px
   and the off-canvas hamburger layout leaves no room for it.
   Also shift the logo background image right to clear the 48px hamburger
   button (positioned absolute at left:-13px relative to the nav bar).
   NOTE: kept as a separate top-level @media block — Flare's CSS parser does
   not support nested @media rules and emits a "bad token" warning if they
   are placed inside another @media screen { } block. */
@media only screen and (max-width: 768px)
{
    .title-bar-layout .logo-wrapper::after
    {
        display: none;
    }

    .title-bar-layout a.logo
    {
        background-position: 52px center;
        width: 400px; /* restore full width so logo has room to shift */
    }
}

/* Mobile off-canvas slide-out menu: generated skin uses #333333 dark background.
   Override to match the desktop sidebar — white background, BH Dark Green text,
   BH Green selected state, BH Light Green hover tint. */
@media only screen and (max-width: 768px)
{
    .off-canvas,
    .off-canvas ul ul
    {
        background-color: #ffffff;
    }

    ul.off-canvas-list li a
    {
        color: #05322B;
        font-family: Poppins, Arial, sans-serif;
        font-size: 13px;
    }

    ul.off-canvas-list li a:hover,
    ul.off-canvas-list ul > li > a:hover,
    ul.off-canvas-list ul ul > li > a:hover,
    ul.off-canvas-list ul ul ul > li > a:hover,
    ul.off-canvas-list ul ul ul ul > li > a:hover,
    ul.off-canvas-list li.js-drilldown-back > a:hover
    {
        background-color: #E8F5F2; /* BH Light Green tint — matches sidenav hover */
        color: #05322B;
    }

    ul.off-canvas-list li a.selected,
    ul.off-canvas-list ul > li > a.selected,
    ul.off-canvas-list ul ul > li > a.selected,
    ul.off-canvas-list ul ul ul > li > a.selected,
    ul.off-canvas-list ul ul ul ul > li > a.selected
    {
        background-color: #018374; /* BH Green — matches sidenav selected */
        color: #ffffff;
    }
}

/* Search results pagination links (Previous / Next / page numbers) */
.specificPage,
.nextPage,
.previousPage,
#pagination a,
#pagination a:visited,
#pagination a:link
{
    color: #018374;
}

.specificPage:hover,
.nextPage:hover,
.previousPage:hover,
#pagination a:hover
{
    color: #02BC94;
}

/* Drop-down hotspot links generated by the skin use class selectors and can remain blue
   unless overridden at the same/higher specificity. */
.MCDropDownHotSpot,
.MCDropDownHotSpot_,
.dropDownHotspot,
.MCDropDownHotSpot.dropDownHotspot,
.MCDropDownHotSpot.dropDownHotspot.MCHotSpotImage,
.MCDropDownHotSpot:link,
.MCDropDownHotSpot:visited,
.MCDropDownHotSpot_:link,
.MCDropDownHotSpot_:visited
{
    color: #018374 !important;
}

.MCDropDownHotSpot:hover,
.MCDropDownHotSpot:focus,
.MCDropDownHotSpot:active,
.MCDropDownHotSpot_:hover,
.MCDropDownHotSpot_:focus,
.MCDropDownHotSpot_:active,
.dropDownHotspot:hover,
.dropDownHotspot:focus,
.dropDownHotspot:active
{
    color: #02BC94 !important;
}

/* Drop-down body divider line: replace legacy light blue with BH green tint. */
MadCap|dropDownBody,
.MCDropDownBody,
.dropDownBody,
.MCDropDownBody.dropDownBody
{
    border-bottom: 1px solid #B7DDD6 !important;
}

/* Drop-down arrow icon (img class generated by the skin).
   Use the same green tinting approach as other web chevrons. */
.MCDropDown_Image_Icon
{
    filter: brightness(0) invert(44%) sepia(68%) saturate(480%) hue-rotate(133deg);
}

.MCDropDownHotSpot:hover .MCDropDown_Image_Icon,
.MCDropDownHotSpot_:hover .MCDropDown_Image_Icon,
.dropDownHotspot:hover .MCDropDown_Image_Icon
{
    filter: brightness(0) invert(65%) sepia(88%) saturate(420%) hue-rotate(118deg);
}

/* Web skin applies blue arrow PNGs via background-image on MCHotSpotImage.
   Replace with CSS triangles so arrow color follows BH green palette. */
.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage:not(.MCDropDownHotSpot_Video),
.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage:not(.MCDropDownHotSpot_Video)
{
    background-image: none !important;
    padding-left: 0 !important;
}

.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage:not(.MCDropDownHotSpot_Video)::before,
.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage:not(.MCDropDownHotSpot_Video)::before
{
    content: "";
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
    width: 0;
    height: 0;
}

.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage:not(.MCDropDownHotSpot_Video)::before
{
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #018374;
}

.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage:not(.MCDropDownHotSpot_Video)::before
{
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #018374;
}

.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage:not(.MCDropDownHotSpot_Video):hover::before
{
    border-left-color: #02BC94;
}

.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage:not(.MCDropDownHotSpot_Video):hover::before
{
    border-top-color: #02BC94;
}