/* here you can put your own css to customize and override the theme */

.custom-required {
    box-shadow: 4px 0px 0px #C90000;
}

.custom-right{
    float: right;
}

.custom-font-small{
    font-size: 12px;
    font-weight: bold;
}

span.custom-field{
    width: 5px;
    display: inline-block;
    margin: -3px 8px -4px 0px;
    height: 20px;
    margin-top: 5px;
}
.custom-convert-result{
    font-size: 19px;
    font-weight: bold;
}

.custom-convert-result-color{
    color: #0477A3;
}

#currencySave .ui-button-text {
    display: initial;
    padding: 0;
}

.p-dropdown-menu {
    z-index: 1000;
    list-style: none;
    text-shadow: none;
    padding: 0px;
    margin:0px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    font-family: "Segoe UI",Helvetica, Arial, sans-serif;
    border: 1px solid #ddd;
}

.p-dropdown-menu li > a {
    padding: 6px 0 6px 13px;
    color: #333;
    text-decoration: none;
    display: block;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    white-space: nowrap;
}

.p-dropdown-menu li:hover,
.p-dropdown-menu .ui-state-highlight,
.p-dropdown-menu .ui-state-highlight:hover {
    text-decoration: none;
    background-image: none;
    background-color: #eee;
    color: #333;
    filter:none;
    -webkit-text-shadow: none;
    -moz-text-shadow: none;
    text-shadow: none;
}

/* Neither style.css nor style-responsive.css puts the header in its own
   stacking/positioning context at any width - header.xhtml uses Bootstrap's
   .navbar-static-top (plain normal-flow), not the .navbar-fixed-top variant
   the theme's z-index:9995 rule (style.css:428) targets, and style-responsive.css
   only ever forces it back to position:relative at <=991px, never sets it
   anywhere itself. So this is safe to apply unconditionally: sticky needs no
   content-side margin/padding compensation, unlike position:fixed. */
.header.navbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9995;
}

/* PrimeFaces' growl.js sets z-index inline on every show() call
   (this.jq.css("z-index", ++PrimeFaces.zindex), starting in the low
   thousands) - so plain CSS here loses to that inline style and only
   !important can win. Once the header gained its own z-index for
   sticky positioning it started painting above growl's default
   stacking, since growl's inline value sits well below the header's
   9995; matches the existing !important override this theme already
   uses for the same header-stacking problem (style.css:428). Applies
   at every width now that the header is sticky at every width. */
.ui-growl {
    z-index: 9999 !important;
}

/* Desktop's default .page-sidebar (style-responsive.css:53-58, 992px+) is a
   floated, negative-margined column - normal document flow, so it scrolls
   away with the page exactly like the mobile .in panel did below. A pure-CSS
   position:fixed here (tried first) pins the box correctly but has no working
   scroll: this theme's own JS (assets/scripts/core/app.js handleFixedSidebar,
   called from App.init()) is what wires up an independent, wheel-scrollable
   sidebar - it wraps .page-sidebar-menu in slimScroll with allowPageScroll:
   false and a height computed from the actual viewport - but it only runs
   when a .page-sidebar-fixed element exists in the DOM (app.js:328: bails
   out to the old non-fixed height-sync path otherwise), and nothing in this
   app ever added that class. layout.xhtml's <h:body> now carries
   styleClass="page-sidebar-fixed" to turn on both halves of the theme's own
   feature at once: style-responsive.css:97-101 (.page-sidebar-fixed
   .page-sidebar { position:fixed !important; top:41px; }) for positioning,
   and this same JS for the actual scroll - no independent CSS needed here
   for either. Only layout.xhtml was flipped since that's the template the
   reported pages (Plane Locator, Device Search) actually use; operator/
   layout.xhtml and layoutNew/layout.xhtml also render .page-sidebar and
   would need the same class if they hit the same bug. */

/* footer.xhtml's own root <div> carries an inline style="...width:100%;..."
   (predates this file, unrelated to the fixed-sidebar work above) - inline
   style beats any stylesheet width, so it was never overridable from here
   before. That was harmless while .page-sidebar-fixed .footer's own
   margin-left:225px (style-responsive.css:161-165, >=992px) was dead code -
   nothing in this app ever put .page-sidebar-fixed on <body> to trigger it.
   Now that the block above does, width:100% (=viewport) plus that newly-live
   margin-left:225px pushes the footer's right edge 225px past the viewport
   on every page (confirmed via Tools/admin-screenshot/overflow-check.js on
   identificationEmail.jsf, operatorDetail.jsf and index.jsf alike - all
   share this footer through layout.xhtml, table or no table). !important is
   required to beat the inline style; letting width go back to auto is what
   the vendor rule's margin-left:225px already assumes will happen. */
/* The fixed-sidebar footer variant (style-responsive.css:161-181) was tuned by
   the vendor for a light footer: background-color:#fff, .footer-inner text
   color:#333. This app wants the footer to match the sidebar/body's own dark
   chrome (#3d3d3d, style.css:8-9/138-140) instead, matching the sidebar
   rather than staying white. #ffffff for the text/link is the same pairing
   this theme already uses for its own text on this exact #3d3d3d background
   (ul.page-sidebar-menu > li > a, themes/default.css:141-144) - reusing an
   established contrast pairing rather than inventing a new one. Equal
   selector specificity to the vendor rules above, loaded after them, so no
   !important needed here (unlike width, which has to beat an inline style). */
@media (min-width: 992px) {
    .page-sidebar-fixed .footer {
        width: auto !important;
        background-color: #3d3d3d;
    }

    .page-sidebar-fixed .footer .footer-inner,
    .page-sidebar-fixed .footer .footer-inner a {
        color: #ffffff;
    }
}

@media (max-width: 991px) {
    /* header.xhtml now wraps the notification/inbox/user list plus the divider
       and node-name text in .header-info-collapse (class="navbar-collapse
       collapse"), so it's hidden by default here (Bootstrap's own .collapse
       rule) and the existing hamburger toggler - data-target=".navbar-collapse"
       already opens/closes the sidebar the same way - reveals it too, since
       Bootstrap toggles every element matching that selector. No layout-wrap/
       background-containment tricks needed anymore: closed, it contributes no
       height at all; open, it's a normal block child of the sticky header, so
       it scrolls with it instead of being left behind like the sidebar is. */
    .header.navbar .header-info-collapse {
        clear: both;
        background-color: #212121;
        padding: 10px 20px;
    }

    /* Its own children (the icon list, divider, node-name span) are still
       floated for their internal layout, so this panel still needs its own
       clearfix to report its real (open) height. */
    .header.navbar .header-info-collapse:after {
        content: "";
        display: table;
        clear: both;
    }

    /* style-responsive.css:517-519 sets max-height:none on .page-sidebar.navbar-
       collapse specifically to defeat Bootstrap's capped-height scrollable dropdown,
       so the .in (open) state's own overflow-y:auto (style-responsive.css:525-529)
       has nothing left to constrain - the panel just grows to its full content
       height in normal flow and scrolls away with the rest of the page, taking the
       menu with it. Giving it a fixed position of its own (pinned under the sticky
       header, capped to the remaining viewport height) restores an independent
       scroll region without touching the vendored file. 42px matches the header's
       own explicit height (style.css:423, also relied on by .page-header-fixed
       .page-container's margin-top at style.css:628) - not a guess. z-index sits
       one below the header's 9995 (declared above) so the header stays on top
       instead of being scrolled under by the sidebar. */
    .page-sidebar.navbar-collapse.in {
        position: fixed;
        top: 42px;
        left: 0;
        right: 0;
        bottom: 0;
        /* style-responsive.css:610-620 gives .page-sidebar/.page-sidebar.in a 20px
           margin at every width <=991px - a vendor "floating card" inset meant for the
           old in-flow dropdown panel. Against a fixed, full-bleed left:0/right:0/top/
           bottom box that margin is subtracted from the actual rendered width and
           height instead, leaving a 20px gap down the right edge and shrinking the
           scrollable area short of the real viewport. Zero it out here, same as the
           desktop page-sidebar-fixed rule already zeroes margin-left for the same
           reason (style-responsive.css:99). */
        margin: 0;
        max-height: none;
        height: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 9994;
    }
}

/* Above tablet/mobile this panel must render exactly as it always has -
   permanently visible inline, not a toggle-able dropdown. */
@media (min-width: 992px) {
    .header.navbar .header-info-collapse.collapse {
        display: block !important;
        height: auto !important;
    }
}

/* .flip-scroll's own 'table { width: 100% }' rule (style.css:4256) applies at
   every width, not just its own <=768px stacked-card breakpoint. Between
   769px and 991px (tablet) none of flip-scroll's other card-stacking rules
   are active, so that lone width:100% just forces the table to shrink-fit
   its container instead of overflowing it - which leaves the overflow-x:auto
   wrapper these report pages rely on with nothing to scroll. Let the table
   size to its own content again above 768px so it can actually overflow.
   Plain width:auto alone over-corrects, though: a table with few columns (or
   zero rows, e.g. an empty results grid) sizes down to just its header
   labels instead of filling the portlet - min-width:100% keeps that case at
   full width while still letting a genuinely wide table grow past 100% and
   overflow, since a larger natural content width always wins over a smaller
   min-width. */
@media (min-width: 769px) {
    .flip-scroll table {
        width: auto;
        min-width: 100%;
    }
}

/* flip-scroll's stacked-card layout (style.css:4278-4303, <=768px) floats <thead>
   left as a column of labels and leaves <tbody> to flow beside it - but never clears
   that float. A floated child doesn't contribute to its parent's height, so <table>'s
   own box only wraps the (non-floated) tbody; whenever the header column is taller
   than tbody's content (few/zero result rows, or a table with many columns), the
   table's own border/margin-bottom renders right after that short collapsed box -
   which lands visually mid-way through the still-taller floating header column,
   showing up as a stray line cutting across it. Standard clearfix: give the table
   a zero-height block after both children that clears the float, so the table's
   box grows to actually contain it. */
@media only screen and (max-width: 768px) {
    .flip-scroll table:after {
        content: "";
        display: table;
        clear: both;
    }
}

/* flip-scroll's stacked-card layout (style.css:4278-4301) only lines a row's
   label (thead, floated left as one column) up with its value (the matching
   td in each tbody tr "card") because both happen to be the same height - but
   td only gets a *minimum* height (min-height: 1.25em) and no explicit padding,
   while th has its own fixed padding (5px). A cell with no content (e.g. no
   ISBAO/ARG/WYV rating icon rendered) collapses to that bare minimum while an
   icon cell (24px images) or a wrapped two-line label grows past it, so every
   row below the mismatch drifts out of sync between the label column and the
   value cards. Give every th/td the same fixed height and padding so row N is
   always identical everywhere, whether its cell is empty, text, or an icon. */
@media only screen and (max-width: 768px) {
    .flip-scroll th,
    .flip-scroll td {
        box-sizing: border-box;
        height: 54px;
        min-height: 54px;
        max-height: 54px;
        padding: 5px !important;
        line-height: 44px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Cells that hold an icon button instead of plain text (devices.jsf's fa-2x
       "Push Notification" link, affinityGroups.jsf's p:rowEditor pencil/check icons)
       need the icon centered in whatever height the cell ends up with, once the
       height/width fixes below take effect instead of clipping it. */
    .flip-scroll td .btn,
    .flip-scroll td .ui-icon,
    .flip-scroll td em.fa {
        vertical-align: middle;
    }

    /* Only the very LAST column - devices.jsf's Push Notification, affinityGroups.jsf's
       row editor - is exempted from the row-height-sync rule above, and only that one:
       nothing follows it in the stacked card, so letting IT grow can't drift a later row
       out of sync. An earlier version of this rule exempted the last *two* columns
       (reasoning the same way about "nothing critical follows"), but that broke sync for
       devices.jsf's own second-to-last column instead - exempting a th/td pair from the
       fixed height only keeps them matching each other if both happen to size back to
       the exact same auto height, which "Last Access"'s date text and its label didn't
       reliably do. Only :last-child is provably safe. */
    .flip-scroll td:last-child,
    .flip-scroll th:last-child {
        height: auto;
        min-height: 34px;
        max-height: none;
        overflow: visible;
        white-space: normal;
    }

    /* The actual clipping culprit (confirmed via devtools: the button itself measures
       52x35px, well inside the 54px row height, so height was never the real blocker):
       p:column's style="width: ..." - set for DESKTOP column sizing, e.g. devices.jsf's
       Push Notification column at style="width: 10%" - is applied by PrimeFaces to both
       the <th> AND every <td> of that column, including here where the stacked-card
       layout has already turned the td into a full-width block on its own line. 10% of
       a wide card (long ID/Alias values push a card well past 300px) comes out narrower
       than the button it holds, and overflow:hidden was clipping that overflow off
       instead of letting the button show in full. */
    .flip-scroll td:last-child,
    .flip-scroll th:last-child {
        width: 100% !important;
    }
}

/* DataTables (PaymentTransaction.jsf's plain HTML table, not a p:dataTable) draws its
   sort-direction glyph as a background-image on the th itself, positioned
   background-position:center right, and relies on its own base padding (10px 18px)
   for the ~18px of right-hand clearance that keeps the glyph from sitting on top of
   the header text. The row-height-sync rule above forces every .flip-scroll th/td to
   padding:5px !important for a different reason (uniform row height on mobile), which
   as a side effect also flattened that clearance, so the sort arrow overlapped the
   label. Restore just the right-side padding for sortable headers, without touching
   top/bottom (which the sync rule still needs to control). */
@media only screen and (max-width: 768px) {
    .flip-scroll th.sorting,
    .flip-scroll th.sorting_asc,
    .flip-scroll th.sorting_desc {
        padding-right: 22px !important;
    }
}