/* ============================================================================
   bs5-reconcile.css
   Reconciliation layer for the Bootstrap 3.3.5 -> 5.3.3 migration.
   Holds ONLY the overrides needed where BS5 core CSS conflicts with the
   BS3-era Velonic theme (core/components/pages) and the custom inline skin.
   Load order: bootstrap5 -> theme CSS -> THIS FILE -> inline <style> skin.
   Shared across all migrated layouts (Hr/CM/CM1/Direct) so fixes stay DRY.
   ============================================================================ */

/* ---- Glyphicons Halflings font -------------------------------------------
   BS3's bootstrap.css shipped this @font-face; BS5 removed Glyphicons wholly.
   The app's blades were migrated to FontAwesome, BUT third-party plugin CSS
   still references the font by name - notably DataTables' sort arrows
   (`.sorting::after { content:"\e150"; font-family:"Glyphicons Halflings" }`),
   which rendered blank in BS5 (font unregistered) so ALL table headers lost
   their sort icons. The font files still ship at css/fonts/, so just re-declare
   the face. (This file lives in assets/css/, so the path is relative to here.) */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('fonts/glyphicons-halflings-regular.eot');
    src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

/* ---- Links ---------------------------------------------------------------
   BS5 Reboot underlines every <a> by default; BS3 did not (underline only on
   hover). The whole app was built against BS3 link behavior, so restore it.
   (Hover underline intentionally omitted: the current skin signals hover via
   colour, not underline, so a global a:hover underline would regress it.) */
a { text-decoration: none; }

/* ---- Link colour ---------------------------------------------------------
   BS3 core set the default link colour to #337ab7; BS5 uses #0d6efd (via the
   --bs-link-color variable). Swapping BS3 core for BS5 turned EVERY content
   link (DataTable cell links, document titles, etc.) BS5-blue. Restore BS3's
   palette by pointing BS5's link CSS variables at the BS3 values — this fixes
   links app-wide WITHOUT a blanket `a{color}` that would clobber links the
   theme intentionally colours (e.g. the white sidebar menu items, which set
   their own colour and are unaffected). */
:root {
    --bs-link-color: #337ab7;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color: #23527c;
    --bs-link-hover-color-rgb: 35, 82, 124;
}

/* ---- Removed BS3 utility classes -----------------------------------------
   BS3 had `.hidden` / `.hide` (display:none); BS5 removed them (use `.d-none`).
   The app uses `class="hidden"` to hide template/popover content (e.g. the
   Library rating breakdown), which became visible under BS5. Restore them.
   NOT `.show` — BS5 reuses that for dropdowns/collapse/modals. */
.hidden, .hide { display: none !important; }

/* BS3 float utilities BS5 removed (BS4 renamed them to .float-right/.float-left,
   BS5 to .float-end/.float-start). 38 HR blades still use `pull-right` to right-
   align toolbars / action buttons / kebab menus (e.g. documentTrackerView's action
   menu, which stopped floating, fell into normal block flow and overlapped the card
   below). Restore BS3's definitions verbatim. */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

/* BS4/BS5 also renamed BS3's text-alignment utilities (.text-right -> .text-end,
   .text-left -> .text-start; .text-center kept). The app still uses the BS3 names to
   right-align header action buttons (e.g. Back/Modify on the attendance Mark/View
   pages, which fell to the left of their column). Restore the BS3 names. */
.text-left  { text-align: left !important; }
.text-right { text-align: right !important; }

/* BS3 image helper classes BS5 removed (renamed to .rounded-circle/.rounded/
   .img-fluid). App still uses the BS3 names (e.g. Settings/profile DP), which
   rendered as squares. Restore them. */
.img-circle { border-radius: 50%; }
.img-rounded { border-radius: 6px; }
.img-responsive { display: block; max-width: 100%; height: auto; }

/* ---- Native <select class="form-control"> dropdown arrow ------------------
   BS3's `.form-control` left native <select> appearance intact, so selects
   showed the browser's dropdown chevron. BS5 core sets `appearance: none` on
   `.form-control` (custom arrows belong to `.form-select`), and this app's
   selects use `.form-control` without a custom arrow bg, so the chevron
   vanished (e.g. qdForm KPI Achievement select). Restore native appearance so
   the arrow shows like BS3. (select2-enhanced selects are display:none and
   unaffected — they draw their own arrow.) */
select.form-control { -webkit-appearance: auto; appearance: auto; }

/* ---- Button font size ----------------------------------------------------
   BS5 sizes buttons in rem (.btn = 1rem/16px, .btn-sm = 0.875rem/14px); BS3
   used px (.btn 14px, .btn-sm 12px), so EVERY button's text rendered ~2px
   larger under BS5. Match BS3 via BS5's button font-size variable (setting it
   on `.btn` itself — a `:root` value is overridden by BS5's own `.btn`
   declaration; a plain `font-size` override is ignored because `.btn` reads the
   variable). */
.btn { --bs-btn-font-size: 14px; --bs-btn-line-height: 1.42857143; }
.btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: 12px; --bs-btn-line-height: 1.5; }
/* BS5 removed .btn-xs outright, so `<button class="btn btn-xs">` fell back to
   full .btn sizing (font 14 / pad 6-12 / lh 21) where BS3 renders it tiny
   (font 12 / pad 1-5 / lh 18). Recreate BS3's btn-xs via BS5's button vars. */
.btn-xs, .btn-group-xs > .btn {
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: 5px;
    --bs-btn-border-radius: 3px;
}

/* ---- Form control font size + label weight -------------------------------
   BS5 sizes `.form-control` at 1rem(16px); BS3 at 14px -> base inputs/selects
   rendered larger. And BS3 core bolded every <label> (font-weight:700); BS5
   Reboot leaves them normal(400). Restore BS3 for both. (`.input-sm` /
   `.form-control-sm` stay 12px.) */
.form-control { font-size: 14px; }
.form-control.input-sm, .form-control-sm, select.input-sm { font-size: 12px; }
/* BS5 removed `.form-control-feedback` (BS3's `.has-feedback` validation-icon
   class). The kelect autocomplete reuses it for its search magnifier
   (`<span class="fa fa-search form-control-feedback">`, positioned by
   `.kelect1 span{top:25px;right:10px}`). Without position:absolute the icon fell
   into normal flow -> dropped onto its own line below the input and pushed the
   kelect dropdown out of alignment (rewards "Team Member" picker). Restore it. */
.form-control-feedback { position: absolute; z-index: 2; display: block; pointer-events: none; }
/* Some kelect search inputs render without `.form-control` (class is just
   "search-kelect undefined"), so they don't get width:100% and end up narrower
   than their column - leaving the search icon (pinned to the column's right
   edge) floating in the gutter outside the box (e.g. modifyRequisition
   "Requisition For (Name)"). Make the kelect input fill its container so the
   icon lands at its right edge. Harmless where it already fills (rewards). */
.kelect1 .search-kelect { width: 100%; }
/* BS5 Reboot stripped <pre> to bare (no padding, no radius, margin-bottom 1rem);
   BS3 bootstrap padded it 9.5px with a 4px radius and 10px bottom margin. The
   app uses <pre> as read-only value boxes (e.g. leaveApplication view modal),
   so the value text jammed against the box border. Restore BS3's pre metrics.
   (Page rules that style specific .*-pre classes still win by specificity.) */
pre { padding: 9.5px; margin: 0 0 10px; border-radius: 4px; }
/* BS3 set `position:relative` on EVERY grid column, so absolutely-positioned
   descendants (has-feedback icons, plugin dropdowns like kelect) anchored to
   their own column. BS5 flex columns are static, so those descendants anchored
   to the first positioned ancestor instead - the modal-content - throwing them
   to the modal corner (kelect search icon + its dropdown on rewards). Restore. */
[class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"],
[class*="col-lg-"], [class*="col-xl-"] { position: relative; }
label { font-weight: 700; }
/* ...but BS3 keeps CHECKBOX/RADIO labels normal weight (bootstrap's
   `.radio label, .checkbox label { font-weight: 400 }` + inline variants).
   Without this, `label{700}` above bolds consent/acknowledgment checkboxes
   (e.g. the signCompDoc document "I acknowledge..." label) that BS3 leaves
   normal. Restore the BS3 exception. */
.checkbox label, .radio label,
.checkbox-inline, .radio-inline,
.form-check-label { font-weight: 400; }

/* ---- BS3 .checkbox/.radio input positioning ------------------------------
   BS3 bootstrap positioned the real input `position:absolute; margin-left:-20px`
   inside `.checkbox`/`.radio`. The Velonic skin hides it (opacity:0, z-index:1)
   under a fake box drawn by `label::before`, and relies on the input sitting
   ON TOP so a click on the box hits the (invisible) input and toggles it. BS5
   dropped this rule (it uses `.form-check-input`), so the input fell to
   `position:static` -> its z-index was ignored -> the label covered it and
   clicks no longer reached the input (e.g. signCompDoc's "I acknowledge"
   checkbox became untoggleable). Restore BS3 positioning. */
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
    position: absolute;
    margin-top: 4px;
    margin-left: -20px;
}

/* ---- Form group spacing + horizontal labels ------------------------------
   BS5 deprecated `.form-group` (it expects `.mb-3` utilities), so it carries
   NO margin -> every form lost BS3's 15px vertical gap between fields. And BS5
   dropped `.form-horizontal .control-label`, so labels lost padding-top:7px
   (vertical-centring with the input) and text-align:right. Restore both to
   BS3 (the label rules only apply >=768px in BS3, same as here). */
.form-group { margin-bottom: 15px; }
@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 7px; margin-bottom: 0; text-align: right;
    }
    /* BS3 zeroed form-group margin inside inline/navbar forms; keep parity so
       the 15px rule above doesn't over-space DataTables/toolbar inline forms. */
    .form-inline .form-group, .navbar-form .form-group { margin-bottom: 0; }
}

/* ---- Input-group addon ---------------------------------------------------
   BS5 renamed `.input-group-addon` to `.input-group-text`, so the app's BS3
   addons rendered unstyled (transparent bg, zero padding, wrong line-height).
   Restore BS3's bootstrap rule. border-radius is left to the theme, which
   already rounds the correct (outer) corners under both BS3 and BS5. */
.input-group-addon {
    /* display:flex + align-items:center mirrors BS3's table-cell + vertical-
       align:middle so the addon LABEL is vertically centred. Under BS5 the
       input-group is flex and the addon stretches to the input's height (38px);
       as a plain block its text top-aligned (BS3 centred it). */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
}

/* ---- Label / badge / alert (BS3 -> BS5 renames & default changes) ---------
   BS5 removed `.label` (merged into `.badge`), so pills rendered oversized
   (14px), square, with grey inherited text instead of BS3's 75%/rounded/white.
   Recreate BS3's `.label`; font-weight is left to the theme (600). Badge radius
   dropped 10->6; alert padding/margin/radius all changed (15/20/4 -> 16/16/6). */
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.badge { border-radius: 10px; }
.alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; }

/* ---- Modal fade (BS3 .in -> BS5 .show) ------------------------------------
   The theme fades modals in via BS3's `.modal.fade{opacity:0}` -> `.modal.fade.in
   {opacity:1}`. BS5 opens modals with `.show` (not `.in`), so the modal element
   stayed at opacity:0 while its backdrop showed - every CM modal opened as a dim
   overlay with an INVISIBLE dialog. Restore visibility for BS5's `.show` state
   (the existing opacity transition still animates the fade). The source rule
   carries !important, so this must too; it only applies while `.show` is present,
   so removing `.show` on close still fades the modal back out. */
.modal.fade.show { opacity: 1 !important; }

/* ---- Bootstrap-slider value tooltip --------------------------------------
   seiyria bootstrap-slider draws its value bubble as a BS3-style
   `.tooltip.tooltip-main.top` (always-on -> `.in`), relying on BS3 tooltip CSS:
   opacity via `.in`, and a bordered `.tooltip-arrow`. BS5 restructured tooltips
   (opacity 0 by default, shown via `.show` not `.in`; the arrow moved from a
   bordered element to a `::before` pseudo), so the slider bubble rendered
   invisible / unpositioned / arrowless (pepres Experience + Salary sliders).
   Restore BS3 rendering, scoped to `.slider` so real BS5 tooltips are untouched. */
.slider .tooltip { position: absolute; }
.slider .tooltip.tooltip-main { opacity: .9; }
.slider .tooltip.top .tooltip-arrow {
    position: absolute; width: 0; height: 0;
    bottom: 0; left: 50%; margin-left: -5px;
    border-style: solid; border-color: transparent;
    border-width: 5px 5px 0; border-top-color: #000;
}

/* ---- Base heading sizes --------------------------------------------------
   BS5 sizes headings in rem (h1 2.5rem/40, h2 2rem/32, h3 1.75rem/28,
   h4 1.5rem/24, h5 1.25rem/20, h6 1rem/16); BS3 used px (36/30/24/18/14/12).
   Headings WITHOUT an explicit theme size (e.g. .modal-title h4) rendered
   larger under BS5. Restore BS3 sizes. Theme-explicit sizes (.page-title 22px,
   .header-title, etc — higher specificity) still win, so styled headings are
   unaffected. */
h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 24px; }
h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; }

/* ---- Base font size ------------------------------------------------------
   BS3's bootstrap.css set `body { font-size: 14px }` and the theme relied on
   it. BS5 Reboot sets 1rem (16px), enlarging every element that inherits its
   size (breadcrumbs, plain text, labels). Explicitly-sized elements (tables,
   headings) are unaffected. Restore 14px to match BS3. */
body { font-size: 14px; }

/* ---- Dropdown carets -----------------------------------------------------
   BS5 auto-draws a caret via `.dropdown-toggle::after`; BS3 drew none (it used
   an explicit <span class="caret">). Remove the auto-caret (fixes the stray
   arrows next to profile / 9-box / row "..." toggles) and restore the BS3
   .caret triangle so intentional carets still render. */
.dropdown-toggle::after { display: none; }
.caret {
    display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle;
    border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent;
}

/* ---- Accordion panel collapse caret --------------------------------------
   The theme (components.css) draws the panel-collapse caret via
   `a[data-toggle="collapse"]::before` (FontAwesome caret-up when open /
   caret-down when collapsed, floated right). The bulk data-toggle ->
   data-bs-toggle migration changed the toggle attribute, so that selector
   stopped matching and the caret vanished on EVERY accordion panel
   (viewRequisition Feeds/Efforts/Attachments etc.). Replicate the theme rules
   verbatim for the migrated `data-bs-toggle` attribute. */
.panel-group .panel .panel-heading a[data-bs-toggle="collapse"] { display: block; }
.panel-group .panel .panel-heading a[data-bs-toggle="collapse"]::before {
    content: '\f0d8';               /* caret-up (expanded) */
    display: block; float: right; text-align: right;
    font-family: 'FontAwesome'; font-size: 14px;
}
.panel-group .panel .panel-heading a[data-bs-toggle="collapse"].collapsed::before {
    content: '\f0d7';               /* caret-down (collapsed) */
}

/* ---- Dropdown menu items -------------------------------------------------
   BS5 colours `<li><a>` menu items with link-blue (#0d6efd) and lets long
   labels wrap; BS3 used #333 and nowrap. Restore both (fixes profile / HR-CM
   switch / row-action menu text colour + the "Client Management" wrap).
   BS5 also sets the menu container font-size to 1rem(16px); BS3 was 14px. */
.dropdown-menu { font-size: 14px; }
/* BS5 dropped `.dropdown-menu > li > a` (it styles `.dropdown-item`), so the
   app's BS3 `<li><a>` items were inline -> their vertical padding didn't space
   the rows and the menu looked cramped. Restore BS3's block display + clear. */
.dropdown-menu > li > a { display: block; clear: both; font-weight: 400; color: #333; white-space: nowrap; }

/* ---- col-xs-* grid tier ---------------------------------------------------
   BS5 dropped BS3's `col-xs-*` tier (the smallest breakpoint, applied at all
   widths). Markup still uses it (e.g. modal form field rows), so those columns
   fell to full-width and stacked. Re-add them as flex columns matching BS5. */
[class*="col-xs-"] {
    position: relative; width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
.col-xs-1{flex:0 0 auto;width:8.33333%}   .col-xs-2{flex:0 0 auto;width:16.66667%}
.col-xs-3{flex:0 0 auto;width:25%}        .col-xs-4{flex:0 0 auto;width:33.33333%}
.col-xs-5{flex:0 0 auto;width:41.66667%}  .col-xs-6{flex:0 0 auto;width:50%}
.col-xs-7{flex:0 0 auto;width:58.33333%}  .col-xs-8{flex:0 0 auto;width:66.66667%}
.col-xs-9{flex:0 0 auto;width:75%}        .col-xs-10{flex:0 0 auto;width:83.33333%}
.col-xs-11{flex:0 0 auto;width:91.66667%} .col-xs-12{flex:0 0 auto;width:100%}

/* Re-assert BS5's responsive columns AFTER col-xs so they override it at their
   breakpoints (matches BS3 cascade). Without this, the reconcile col-xs rules
   above — loaded after bootstrap5 — win at all widths and break responsive
   combos like `col-xs-12 col-md-4` (which should be full-width on mobile, 1/3
   on desktop). */
@media (min-width:576px){
  .col-sm-1{width:8.33333%}.col-sm-2{width:16.66667%}.col-sm-3{width:25%}.col-sm-4{width:33.33333%}
  .col-sm-5{width:41.66667%}.col-sm-6{width:50%}.col-sm-7{width:58.33333%}.col-sm-8{width:66.66667%}
  .col-sm-9{width:75%}.col-sm-10{width:83.33333%}.col-sm-11{width:91.66667%}.col-sm-12{width:100%}
}
@media (min-width:768px){
  .col-md-1{width:8.33333%}.col-md-2{width:16.66667%}.col-md-3{width:25%}.col-md-4{width:33.33333%}
  .col-md-5{width:41.66667%}.col-md-6{width:50%}.col-md-7{width:58.33333%}.col-md-8{width:66.66667%}
  .col-md-9{width:75%}.col-md-10{width:83.33333%}.col-md-11{width:91.66667%}.col-md-12{width:100%}
}
@media (min-width:992px){
  .col-lg-1{width:8.33333%}.col-lg-2{width:16.66667%}.col-lg-3{width:25%}.col-lg-4{width:33.33333%}
  .col-lg-5{width:41.66667%}.col-lg-6{width:50%}.col-lg-7{width:58.33333%}.col-lg-8{width:66.66667%}
  .col-lg-9{width:75%}.col-lg-10{width:83.33333%}.col-lg-11{width:91.66667%}.col-lg-12{width:100%}
}
@media (min-width:1200px){
  .col-xl-1{width:8.33333%}.col-xl-2{width:16.66667%}.col-xl-3{width:25%}.col-xl-4{width:33.33333%}
  .col-xl-5{width:41.66667%}.col-xl-6{width:50%}.col-xl-7{width:58.33333%}.col-xl-8{width:66.66667%}
  .col-xl-9{width:75%}.col-xl-10{width:83.33333%}.col-xl-11{width:91.66667%}.col-xl-12{width:100%}
}

/* ---- col-*-offset-* (BS3) -------------------------------------------------
   BS5 renamed BS3's `.col-{tier}-offset-{n}` to `.offset-{tier}-{n}`. The app
   still uses the BS3 names (e.g. a DataTables search box wrapped in
   `col-sm-2 col-sm-offset-8` to right-align it; also form action-button rows),
   so those offsets were lost and the elements slid left. Re-add the BS3 offset
   classes as margin-left %, using the SAME BS5 breakpoints as the col re-decls
   above so offset pairs with its col width. */
.col-xs-offset-1{margin-left:8.33333%}.col-xs-offset-2{margin-left:16.66667%}.col-xs-offset-3{margin-left:25%}
.col-xs-offset-4{margin-left:33.33333%}.col-xs-offset-5{margin-left:41.66667%}.col-xs-offset-6{margin-left:50%}
.col-xs-offset-7{margin-left:58.33333%}.col-xs-offset-8{margin-left:66.66667%}.col-xs-offset-9{margin-left:75%}
.col-xs-offset-10{margin-left:83.33333%}.col-xs-offset-11{margin-left:91.66667%}.col-xs-offset-0{margin-left:0}
@media (min-width:576px){
  .col-sm-offset-1{margin-left:8.33333%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-offset-3{margin-left:25%}
  .col-sm-offset-4{margin-left:33.33333%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-offset-6{margin-left:50%}
  .col-sm-offset-7{margin-left:58.33333%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-offset-9{margin-left:75%}
  .col-sm-offset-10{margin-left:83.33333%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-offset-0{margin-left:0}
}
@media (min-width:768px){
  .col-md-offset-1{margin-left:8.33333%}.col-md-offset-2{margin-left:16.66667%}.col-md-offset-3{margin-left:25%}
  .col-md-offset-4{margin-left:33.33333%}.col-md-offset-5{margin-left:41.66667%}.col-md-offset-6{margin-left:50%}
  .col-md-offset-7{margin-left:58.33333%}.col-md-offset-8{margin-left:66.66667%}.col-md-offset-9{margin-left:75%}
  .col-md-offset-10{margin-left:83.33333%}.col-md-offset-11{margin-left:91.66667%}.col-md-offset-0{margin-left:0}
}
@media (min-width:992px){
  .col-lg-offset-1{margin-left:8.33333%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-offset-3{margin-left:25%}
  .col-lg-offset-4{margin-left:33.33333%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-offset-6{margin-left:50%}
  .col-lg-offset-7{margin-left:58.33333%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-offset-9{margin-left:75%}
  .col-lg-offset-10{margin-left:83.33333%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-offset-0{margin-left:0}
}

/* Some BS3 forms use `.form-group` itself as the grid row, with `.col-*`
   children sitting side-by-side (BS3 columns floated, so any block parent
   worked). BS5 columns are flex and need a flex parent, so those fields
   stacked. Make any BS3 container that directly holds columns a flex row
   (.form-group and .form-horizontal are both used this way in the app). */
.form-group:has(> [class*="col-"]),
.form-horizontal:has(> [class*="col-"]) { display: flex; flex-wrap: wrap; }

/* When the rule above flexes a `.form-horizontal`, that form's direct
   `.form-group` children (e.g. Settings' button row = col-sm-8 progress bar +
   col-sm-4 Save/Reset) become non-column flex items and shrink to content,
   collapsing their inner col-* (col-sm-4 fell to ~58px so Save/Reset stacked
   vertically). Under BS3 the form-group was a full-width block. Force these
   direct form-group rows back to full width so their inner cols size correctly. */
.form-horizontal:has(> [class*="col-"]) > .form-group { flex: 0 0 100%; width: 100%; }

/* ---- Modal close button ---------------------------------------------------
   BS5 replaced `.close` with `.btn-close` and made `.modal-header` a flexbox,
   so the app's `<button class="close">x</button>` lost its float:right and
   dropped to the left as an unstyled button. Restore BS3 behaviour: black glyph
   at .2 opacity with a white text-shadow (exactly BS3's `.close`). This is the
   BASE for closes OUTSIDE a dark modal header (e.g. the statusBanner close).
   NOTE: `.modal-header` closes are handled separately below - once the standing
   rule paints every `.modal-header` with the brand gradient (dark), those closes
   are overridden to WHITE for contrast (see the STANDING MODAL RULES block).
   Earlier, before the gradient standard, `.modal-header` headers were light and a
   white close was invisible; the gradient reverses that, so white is now correct. */
.modal-header { display: block; }
.close {
    float: right; font-size: 21px; font-weight: 700; line-height: 1;
    color: #000; opacity: .2; text-shadow: 0 1px 0 #fff;
    background: transparent; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none;
}
.close:hover, .close:focus { color: #000; opacity: .5; }

/* ---- Modal sizing --------------------------------------------------------
   BS5 changed the modal-width defaults and margins vs BS3 (all measured on
   signCompDoc's document-viewer modal, which is .modal-lg):
     default  BS5 500px -> BS3 600px
     .modal-lg BS5 800px -> BS3 900px (this made the doc modal visibly narrow)
     .modal-sm 300px == 300px (unchanged)
     dialog margin: BS5 1.75rem(28px)/0.5rem(8px) -> BS3 30px/10px
   BS5 drives width via the --bs-modal-width custom prop, so override that.
   Breakpoints mirror BS3: 600px caps app-wide; .modal-lg 900px only >=992px;
   30px dialog margin only >=768px. */
.modal { --bs-modal-width: 600px; }
.modal-sm { --bs-modal-width: 300px; }
@media (min-width: 992px) {
    .modal-lg, .modal-xl { --bs-modal-width: 900px; }
}
.modal-dialog { --bs-modal-margin: 10px; }
@media (min-width: 768px) {
    .modal-dialog { --bs-modal-margin: 30px; }
}
/* BS3's `.modal-dialog` had no max-width, so modals that set an explicit inline
   `style="width:X"` (e.g. /ur view modal width:64% ~= 1000px) sized exactly to
   it. BS5 adds `max-width: var(--bs-modal-width)` (600px default), which CAPS
   any inline width larger than that -> those modals shrank. Drop the cap when
   an inline width is present so the author's width wins, like BS3. */
.modal-dialog[style*="width"] { max-width: none; }
/* BS5 modal-title inherits body line-height 1.5 (27px @18); BS3 = 1.42857.
   Also: BS3 bootstrap zeroed BOTH margins (`.modal-title{margin:0}`); BS5 only
   zeroes margin-bottom, so the theme's h4 margin-top (10px) leaked through and
   pushed the title down (title looked bottom-aligned, close top-aligned in
   `.panel-heading`-based modals). Restore margin:0. */
.modal-title { margin: 0; line-height: 1.42857143; }
/* BS5 has no `.panel-footer` (only `.card-footer`), so it rendered with zero
   padding -> footer content (e.g. referral View "Created By" fields) hugged the
   edge. BS3 bootstrap padded it 10px 15px; the theme keeps bg white / no border,
   so padding is the only missing piece. */
.panel-footer { padding: 10px 15px; }
/* BS3 grid columns floated, so blades that drop col-* straight into a
   .panel-body WITHOUT a wrapping .row (a common BS3 idiom - e.g. the delete-
   confirm modal's col-md-3 icon + col-md-9 message) still sat side-by-side.
   BS5 columns are flex items with no float and need a flex .row parent, so
   those columns stacked vertically. Restore BS3 float for columns that are
   DIRECT children of a panel body (cols inside a real .row are untouched),
   and clear the floats so the body still wraps them. */
.panel-body > [class*="col-"] { float: left; }
.panel-body::after { content: ""; display: table; clear: both; }
/* BS5 makes .modal-content a flex column, which (unlike BS3's block) does NOT
   collapse a child's bottom margin. On borderless/paddingless custom modals
   (e.g. signCompDoc's `.modal-content.b-0.p-0` > `.panel` with margin-bottom
   :20px) that margin rendered as an empty white strip below the content that
   BS3 collapsed away. Zero the trailing margin to match BS3. Standard modals
   end in a marginless .modal-footer, so they are unaffected. */
.modal-content > :last-child { margin-bottom: 0; }

/* ---- STANDING MODAL RULES (apply to EVERY modal, app-wide) ---------------
   Two brand standards the user wants on every modal in the migration, whether
   or not a page's own <style> already sets them:
   1. Header background = brand gradient green->blue (the /ur modal look).
      Custom-header modals use `.panel-custom > .panel-heading`. The extra
      `div` qualifier lifts specificity above the (0,3,0) page-scoped rules a
      few blades still carry from an earlier solid-indigo pass, so the gradient
      wins everywhere without hand-editing each blade. `.panel-success` is also
      matched (some pages, e.g. bookmaster, use it for non-delete action modals
      like request/allot/return); the actual DELETE modals also use
      `.panel-success` but set a green->red gradient INLINE, which (being inline)
      overrides this rule, so deletes stay red and everything else is green->blue.
   2. Modal forms carry no extra L/R padding - the modal body's own padding is
      the only inset (BS5 flex/.row gutters otherwise double-inset the fields). */
.modal div.panel-custom > .panel-heading,
.modal div.panel-success > .panel-heading {
    background: linear-gradient(135deg, #232834 0%, #262c3d 42%, var(--brand-secondary) 100%) !important;
    border-color: var(--brand-secondary, #384c8e) !important;
}
/* Some modals wrap their header in a different colour-variant panel
   (panel-primary / panel-inverse / panel-warning) - e.g. signCompDoc's
   document viewer, EffortsTM's effort-detail, viewActivity's effort-view/assign.
   Cover EVERY colour-variant by matching the modal's OWN header panel: the .panel
   that is a DIRECT child of .modal-content (a nested content panel inside the body
   is never a direct child, so it is left alone). -> brand green->blue. */
.modal-content > div.panel > .panel-heading {
    background: linear-gradient(135deg, #232834 0%, #262c3d 42%, var(--brand-secondary) 100%) !important;
    border-color: var(--brand-secondary, #384c8e) !important;
}
/* panel-danger header = a danger/delete modal with no inline colour -> green->red.
   MUST follow the rule above (equal specificity, source order decides) so danger
   wins. Delete modals that already set an inline green->red gradient keep it
   (inline !important outranks any stylesheet rule here). */
.modal-content > div.panel-danger > .panel-heading {
    background: linear-gradient(135deg, #232834 0%, #262c3d 42%, #f05050 100%) !important;
    border-color: #f05050 !important;
}
/* Same standard applied to the OTHER header idiom: modals that use a plain
   `.modal-header` + `.modal-title` + `<button class="close">` (not a custom
   `.panel-heading`) - e.g. myDoc Upload/Rename/Preview, apps, mdqb, md, notify,
   locations, weeklyOffs, profileView. BS3/BS5 both render `.modal-header` with a
   light background, so these were the last modals still missing the brand
   gradient. Apply green->blue with a white title + white close for contrast. */
.modal .modal-header {
    background: linear-gradient(135deg, #232834 0%, #262c3d 42%, var(--brand-secondary) 100%) !important;
    border-bottom-color: var(--brand-secondary, #384c8e) !important;
}
.modal .modal-header .modal-title { color: #fff !important; }
.modal .modal-header .close { color: #fff !important; opacity: .85; text-shadow: none; }
.modal .modal-header .close:hover,
.modal .modal-header .close:focus { color: #fff !important; opacity: 1; }
/* DELETE/danger `.modal-header` modals -> green->red (matches the .panel-heading
   delete rule). These span a few id idioms: the shared `con-del-modal<Id>` /
   `delete-modal*` confirm modals plus per-page ids (ur/holiday/locations/attend). */
[id^="con-del-modal"] .modal-header,
[id^="delete-modal"] .modal-header,
#ur-delete-modal .modal-header,
#hcDelModal .modal-header,
#loRmModal .modal-header,
#attendDelModal .modal-header {
    background: linear-gradient(135deg, #232834 0%, #262c3d 42%, #f05050 100%) !important;
    border-bottom-color: #f05050 !important;
}
/* Delete modals identified ONLY by wrapper id (no panel-danger class / inline-red
   marker, so the normal gradient rule would paint them green->blue): viewActivity
   #effortDelete (panel-inverse) + notify #delnote (trash-triggered). Id specificity
   (1,1,0) beats the normal panel/.modal-header rules. Add new such ids here as found. */
#effortDelete .panel-heading, #effortDelete .modal-header,
#delnote .panel-heading, #delnote .modal-header {
    background: linear-gradient(135deg, #232834 0%, #262c3d 42%, #f05050 100%) !important;
    border-color: #f05050 !important;
}
/* CM's own delete/confirm modals (leadDelete, clientDelete, contactDelete, coiView
   #deleteconfirm, MFAActDelete, RecoDelete, ClassDelete, EffortsDelete, IWCodeDelete,
   ServiceDelete ...) use .panel-success + an inline solid-red heading that the
   gradient masks, so the generic non-delete rule above would paint them slate->
   secondary. Any modal whose id contains "elete" is a delete modal -> force the
   delete gradient. Same (0,3,0) specificity as the non-delete rules, placed after
   them so source order wins. `.modal-content` in the selector lifts specificity to
   (0,4,0) so it clears the non-delete `.modal div.panel-success > .panel-heading`
   / `.modal-content > div.panel > .panel-heading` rules, which are (0,3,1). */
.modal[id*="elete"] .modal-content .panel-heading,
.modal[id*="elete"] .modal-content .modal-header,
.modal[id*="elete"] .modal-header {
    background: linear-gradient(135deg, #232834 0%, #262c3d 42%, #f05050 100%) !important;
    border-color: #f05050 !important;
}
.modal form { padding-left: 0 !important; padding-right: 0 !important; }
/* Same floated-grid restore as .panel-body, for cols dropped straight into a
   modal .form-group with no wrapping .row (Month/Year, icon+message, etc.). */
.modal .form-group > [class*="col-"] { float: left; }
.modal .form-group::after { content: ""; display: table; clear: both; }
/* BS3's Velonic theme gave a bare `.btn` (no colour modifier) a grey face
   (#f0f0f0 / #797979 text); BS5's `.btn` base is transparent, so modal
   secondary buttons that use a plain `.btn` (e.g. every delete-confirm modal's
   "Cancel", markup `btn waves-effect waves-light`) lost their grey and rendered
   as bare dark text on white. Restore the grey, scoped to modals + bare .btn
   (`:not([class*="btn-"])` excludes btn-white/danger/etc.; the row-action kebab
   toggles keep their own contextual transparency). */
.modal .btn:not([class*="btn-"]):not(.dropdown-toggle):not(.close) {
    background-color: #f0f0f0;
    color: #797979;
}

/* ---- Breadcrumb ----------------------------------------------------------
   BS3 drew the "/" divider via `.breadcrumb > li + li:before`; BS5 removed that
   (it uses `.breadcrumb-item::before`). Markup is still BS3 `<ol.breadcrumb><li>`,
   so re-add the divider. Also restore BS3 link colour (#337ab7) / active (#777);
   BS5 recoloured them link-blue. */
.breadcrumb > li + li::before { content: "/"; padding: 0 8px; color: #b8c0cc; }
.breadcrumb a { color: #337ab7; }
.breadcrumb > .active, .breadcrumb > li.active { color: #777; }
.breadcrumb { border-radius: 4px; } /* BS5 zeroed it; BS3 = 4px */

/* ---- Topbar --------------------------------------------------------------
   BS5 sets `.navbar-nav { flex-direction: column }` and turns `.navbar` into a
   flex parent, so the old `navbar-right pull-right` float no longer right-aligns
   the controls and they stacked vertically. Restore a right-aligned single row. */
.topbar .navbar.navbar-default {
    display: flex !important;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.topbar .navbar.navbar-default .container {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-end;
    padding: 0;
}
.topbar .nav.navbar-nav.navbar-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 0 0 auto !important;
    padding-left: 0;
    list-style: none;
}
.topbar .nav.navbar-nav.navbar-right > li {
    list-style: none;
    float: none;
}

/* Topbar dropdown menus: were CSS-positioned under BS3; BS5 Popper mispositioned
   them (opened above the viewport). Toggles now carry data-bs-display="static"
   to disable Popper; anchor each menu below its toggle, right-aligned so wide
   menus (app grid) don't overflow the right edge. */
.topbar .dropdown-menu[data-bs-popper] { position: absolute !important; top: 100%; right: 0; left: auto; }

/* ---- .btn-group-toggle input hiding (BS3/BS4) ----------------------------
   BS3/BS4 `.btn-group-toggle` hid the native radio/checkbox inside its button
   labels so only the button-styled label showed. BS5 removed the class, so the
   raw radio circle appeared next to each label's text. Only virtualPunches uses
   it (Present/WFH/... punch-type buttons); its toggle behaviour is driven by the
   app's OWN `.btngrp` click handler (plain jQuery, not Bootstrap), so ONLY the
   input hiding needs restoring here. */
.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
    position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none;
}

/* ---- DataTables pagination (BS3 .pagination > li > a markup) --------------
   DataTables' Bootstrap integration emits BS3 markup: <ul.pagination><li
   .paginate_button><a href="#">N</a>. BS3's bootstrap.css styled `.pagination
   > li > a` as bordered pagination buttons; BS5 only styles `.page-item` /
   `.page-link`, so under BS5 the buttons collapsed to plain coloured text
   (the theme still supplies the indigo colour + radius, but the box — padding,
   border, background, display:block — came from BS3 core and is gone).
   Re-add the BS3 button box, matching the theme's spaced rounded look exactly
   (values captured from the BS3 site: 6px/12px padding, 1px #ddd border, 6px
   radius, indigo #384C8E text/active fill). Affects every multi-page DataTable
   app-wide. */
.pagination { display: inline-block; padding-left: 0; margin: 0; }
.pagination > li { display: inline; }
.pagination > li > a,
.pagination > li > span {
    display: block; float: left; padding: 6px 12px; margin: 0 2px;
    border: 1px solid #ddd; border-radius: 6px;
    background: #fff; color: #384C8E; line-height: 20px; text-decoration: none;
}
.pagination > li > a:hover { background: #eee; }
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
    background: #384C8E; border-color: #384C8E; color: #fff;
}
.pagination > .disabled > a,
.pagination > .disabled > a:hover { color: #777; cursor: not-allowed; background: #fff; }

/* DataTables inline controls (search input + length select) use BS3's
   `.form-control input-sm`. BS5's `.form-control{width:100%}` re-sized them:
   the search input ballooned to ~236px (overflowing its wrapper -> horizontal
   scroll on e.g. rLeaveInd) and the length select mis-sized. Match BS3's exact
   values: search input a fixed 180px; length select content-width (auto).
   (`!important` on the search input because a higher-specificity rule otherwise
   forces the wide width.) */
.dataTables_filter input.form-control { max-width: 100%; box-sizing: border-box; }
.dataTables_length select.form-control { width: auto; max-width: 100%; }
/* Default DataTables wraps the search box as <label>Search: <input></label>;
   BS3 rendered that input ~180px, BS5 ~237px -> it overflows its col and the
   card shows a horizontal scrollbar (e.g. rLeaveInd). Match BS3's 180px, SCOPED
   to the label-wrapped (default) input only. Re-skinned toolbars (e.g.
   signCompDoc) drop the label and place the input directly in .dataTables_filter
   at full width (already matches BS3), so this rule doesn't touch them. */
.dataTables_filter label input.form-control { width: 180px; }

/* ---- Table cell borders --------------------------------------------------
   BS5's `.table` adds a border to every cell edge (`.table > * > * >
   {border-bottom-width}`), so tables gained a thin line above the header (th
   top) and below the last row (td bottom) that the BS3 theme did not draw. BS3
   draws row separators via the cell TOP border only. Match BS3: drop the th
   top-border and the td bottom-border (row separators via td-top unchanged). */
.table > thead > tr > th { border-top-width: 0; }
.table > tbody > tr > td { border-bottom-width: 0; }

/* ---- Table cell background (row highlighting) ----------------------------
   BS5 paints every cell `background-color: var(--bs-table-bg)` which defaults
   to the body bg (white). That opaque cell fill PAINTS OVER any background set
   on the <tr> - so BS3-era row highlighting (inline `<tr style="background">`
   and contextual `.danger`/`.warning`/etc. rows) vanished. E.g. EffortsTM's
   Full-Day-Timeline: pink overlap rows (#ffe6e6) + yellow Break row (#fff7cc).
   BS3 cells were transparent so the row colour showed. Restore that; contextual
   `.table-*` variants still set their own --bs-table-bg locally so they win. */
.table { --bs-table-bg: transparent; }

/* Also re-map BS3's contextual ROW classes (BS5 renamed them to `.table-*`),
   in case any table uses `<tr class="danger|warning|success|info|active">`. */
.table > tbody > tr.active > td,  .table > tbody > tr > td.active  { background-color: #f5f5f5; }
.table > tbody > tr.success > td, .table > tbody > tr > td.success { background-color: #dff0d8; }
.table > tbody > tr.info > td,    .table > tbody > tr > td.info    { background-color: #d9edf7; }
.table > tbody > tr.warning > td, .table > tbody > tr > td.warning { background-color: #fcf8e3; }
.table > tbody > tr.danger > td,  .table > tbody > tr > td.danger  { background-color: #f2dede; }

/* ---- .card-box as a direct flex child of .row ----------------------------
   The theme makes `.row` a flex container. A `.card-box` placed DIRECTLY in a
   `.row` (no column wrapper — a pattern used by the form completion/error/
   processing panels, e.g. EPFForm11 "Thank you" card) becomes a flex item.
   Under BS3 it resolved to flex-shrink:1 / width:auto and shrank to its
   content; under BS5 it computes flex-shrink:0 / width:100% and stretches the
   card full-width. Restore the BS3 shrink-to-content sizing. Only matches the
   direct `.row > .card-box` anti-pattern, so column-wrapped card-boxes (every
   other page) are untouched.
   NOTE the :not([class*="col-"]) guard — some pages build elements that are BOTH a
   column AND a card-box (materialtm's JS emits `col-md-12 teammember-name card-box`
   for the per-member name bar and `col-md-6 ...-data card-box` for the Allocated /
   Returnable panels). Those must keep their GRID width; without the guard this rule
   shrink-wrapped the name bar to the member's name (89px instead of full width) and
   collapsed the panels, wrecking the page. */
.row > .card-box:not([class*="col-"]) { flex-shrink: 1; width: auto; }

/* Same anti-pattern, FLOATED variant: a `pull-right`/`pull-left` element placed
   DIRECTLY in a `.row` (no column wrapper) — e.g. the report pages' Excel-export
   button (`btn btn-create ... pull-right` on materialstock). BS3's `.row` was a
   plain block, so the float shrink-wrapped the button to its icon and pushed it to
   the right edge. BS5's `.row` is a flex container, so the float is IGNORED and
   `.row > *`'s width:100% stretches it into a full-width bar with the icon marooned
   in the middle. Restore the BS3 result: shrink to content, and sit at the right
   (margin-left:auto is the flex equivalent of float:right). Columns are excluded —
   they must keep their grid width. */
.row > .pull-right:not([class*="col-"]) {
    flex-shrink: 1;
    width: auto;
    max-width: none;
    margin-left: auto;
}
.row > .pull-left:not([class*="col-"]) {
    flex-shrink: 1;
    width: auto;
    max-width: none;
    margin-right: auto;
}

/* ---- Glyphicons Halflings CSS classes (BS3 -> BS5) ----------------------
   BS5 removed the entire glyphicon system (base .glyphicon class + every
   .glyphicon-*:before content mapping). The @font-face is restored above, but
   third-party plugins still emit glyphicon CLASSES - e.g. bootstrap-timepicker
   builds <span class="glyphicon glyphicon-chevron-up/down"> for its up/down
   arrows, which rendered blank without these rules. Extracted verbatim from the
   retained BS3 bootstrap.css (lines 269-1067) so codes are exact. */
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
  content: "\2a";
}
.glyphicon-plus:before {
  content: "\2b";
}
.glyphicon-euro:before,
.glyphicon-eur:before {
  content: "\20ac";
}
.glyphicon-minus:before {
  content: "\2212";
}
.glyphicon-cloud:before {
  content: "\2601";
}
.glyphicon-envelope:before {
  content: "\2709";
}
.glyphicon-pencil:before {
  content: "\270f";
}
.glyphicon-glass:before {
  content: "\e001";
}
.glyphicon-music:before {
  content: "\e002";
}
.glyphicon-search:before {
  content: "\e003";
}
.glyphicon-heart:before {
  content: "\e005";
}
.glyphicon-star:before {
  content: "\e006";
}
.glyphicon-star-empty:before {
  content: "\e007";
}
.glyphicon-user:before {
  content: "\e008";
}
.glyphicon-film:before {
  content: "\e009";
}
.glyphicon-th-large:before {
  content: "\e010";
}
.glyphicon-th:before {
  content: "\e011";
}
.glyphicon-th-list:before {
  content: "\e012";
}
.glyphicon-ok:before {
  content: "\e013";
}
.glyphicon-remove:before {
  content: "\e014";
}
.glyphicon-zoom-in:before {
  content: "\e015";
}
.glyphicon-zoom-out:before {
  content: "\e016";
}
.glyphicon-off:before {
  content: "\e017";
}
.glyphicon-signal:before {
  content: "\e018";
}
.glyphicon-cog:before {
  content: "\e019";
}
.glyphicon-trash:before {
  content: "\e020";
}
.glyphicon-home:before {
  content: "\e021";
}
.glyphicon-file:before {
  content: "\e022";
}
.glyphicon-time:before {
  content: "\e023";
}
.glyphicon-road:before {
  content: "\e024";
}
.glyphicon-download-alt:before {
  content: "\e025";
}
.glyphicon-download:before {
  content: "\e026";
}
.glyphicon-upload:before {
  content: "\e027";
}
.glyphicon-inbox:before {
  content: "\e028";
}
.glyphicon-play-circle:before {
  content: "\e029";
}
.glyphicon-repeat:before {
  content: "\e030";
}
.glyphicon-refresh:before {
  content: "\e031";
}
.glyphicon-list-alt:before {
  content: "\e032";
}
.glyphicon-lock:before {
  content: "\e033";
}
.glyphicon-flag:before {
  content: "\e034";
}
.glyphicon-headphones:before {
  content: "\e035";
}
.glyphicon-volume-off:before {
  content: "\e036";
}
.glyphicon-volume-down:before {
  content: "\e037";
}
.glyphicon-volume-up:before {
  content: "\e038";
}
.glyphicon-qrcode:before {
  content: "\e039";
}
.glyphicon-barcode:before {
  content: "\e040";
}
.glyphicon-tag:before {
  content: "\e041";
}
.glyphicon-tags:before {
  content: "\e042";
}
.glyphicon-book:before {
  content: "\e043";
}
.glyphicon-bookmark:before {
  content: "\e044";
}
.glyphicon-print:before {
  content: "\e045";
}
.glyphicon-camera:before {
  content: "\e046";
}
.glyphicon-font:before {
  content: "\e047";
}
.glyphicon-bold:before {
  content: "\e048";
}
.glyphicon-italic:before {
  content: "\e049";
}
.glyphicon-text-height:before {
  content: "\e050";
}
.glyphicon-text-width:before {
  content: "\e051";
}
.glyphicon-align-left:before {
  content: "\e052";
}
.glyphicon-align-center:before {
  content: "\e053";
}
.glyphicon-align-right:before {
  content: "\e054";
}
.glyphicon-align-justify:before {
  content: "\e055";
}
.glyphicon-list:before {
  content: "\e056";
}
.glyphicon-indent-left:before {
  content: "\e057";
}
.glyphicon-indent-right:before {
  content: "\e058";
}
.glyphicon-facetime-video:before {
  content: "\e059";
}
.glyphicon-picture:before {
  content: "\e060";
}
.glyphicon-map-marker:before {
  content: "\e062";
}
.glyphicon-adjust:before {
  content: "\e063";
}
.glyphicon-tint:before {
  content: "\e064";
}
.glyphicon-edit:before {
  content: "\e065";
}
.glyphicon-share:before {
  content: "\e066";
}
.glyphicon-check:before {
  content: "\e067";
}
.glyphicon-move:before {
  content: "\e068";
}
.glyphicon-step-backward:before {
  content: "\e069";
}
.glyphicon-fast-backward:before {
  content: "\e070";
}
.glyphicon-backward:before {
  content: "\e071";
}
.glyphicon-play:before {
  content: "\e072";
}
.glyphicon-pause:before {
  content: "\e073";
}
.glyphicon-stop:before {
  content: "\e074";
}
.glyphicon-forward:before {
  content: "\e075";
}
.glyphicon-fast-forward:before {
  content: "\e076";
}
.glyphicon-step-forward:before {
  content: "\e077";
}
.glyphicon-eject:before {
  content: "\e078";
}
.glyphicon-chevron-left:before {
  content: "\e079";
}
.glyphicon-chevron-right:before {
  content: "\e080";
}
.glyphicon-plus-sign:before {
  content: "\e081";
}
.glyphicon-minus-sign:before {
  content: "\e082";
}
.glyphicon-remove-sign:before {
  content: "\e083";
}
.glyphicon-ok-sign:before {
  content: "\e084";
}
.glyphicon-question-sign:before {
  content: "\e085";
}
.glyphicon-info-sign:before {
  content: "\e086";
}
.glyphicon-screenshot:before {
  content: "\e087";
}
.glyphicon-remove-circle:before {
  content: "\e088";
}
.glyphicon-ok-circle:before {
  content: "\e089";
}
.glyphicon-ban-circle:before {
  content: "\e090";
}
.glyphicon-arrow-left:before {
  content: "\e091";
}
.glyphicon-arrow-right:before {
  content: "\e092";
}
.glyphicon-arrow-up:before {
  content: "\e093";
}
.glyphicon-arrow-down:before {
  content: "\e094";
}
.glyphicon-share-alt:before {
  content: "\e095";
}
.glyphicon-resize-full:before {
  content: "\e096";
}
.glyphicon-resize-small:before {
  content: "\e097";
}
.glyphicon-exclamation-sign:before {
  content: "\e101";
}
.glyphicon-gift:before {
  content: "\e102";
}
.glyphicon-leaf:before {
  content: "\e103";
}
.glyphicon-fire:before {
  content: "\e104";
}
.glyphicon-eye-open:before {
  content: "\e105";
}
.glyphicon-eye-close:before {
  content: "\e106";
}
.glyphicon-warning-sign:before {
  content: "\e107";
}
.glyphicon-plane:before {
  content: "\e108";
}
.glyphicon-calendar:before {
  content: "\e109";
}
.glyphicon-random:before {
  content: "\e110";
}
.glyphicon-comment:before {
  content: "\e111";
}
.glyphicon-magnet:before {
  content: "\e112";
}
.glyphicon-chevron-up:before {
  content: "\e113";
}
.glyphicon-chevron-down:before {
  content: "\e114";
}
.glyphicon-retweet:before {
  content: "\e115";
}
.glyphicon-shopping-cart:before {
  content: "\e116";
}
.glyphicon-folder-close:before {
  content: "\e117";
}
.glyphicon-folder-open:before {
  content: "\e118";
}
.glyphicon-resize-vertical:before {
  content: "\e119";
}
.glyphicon-resize-horizontal:before {
  content: "\e120";
}
.glyphicon-hdd:before {
  content: "\e121";
}
.glyphicon-bullhorn:before {
  content: "\e122";
}
.glyphicon-bell:before {
  content: "\e123";
}
.glyphicon-certificate:before {
  content: "\e124";
}
.glyphicon-thumbs-up:before {
  content: "\e125";
}
.glyphicon-thumbs-down:before {
  content: "\e126";
}
.glyphicon-hand-right:before {
  content: "\e127";
}
.glyphicon-hand-left:before {
  content: "\e128";
}
.glyphicon-hand-up:before {
  content: "\e129";
}
.glyphicon-hand-down:before {
  content: "\e130";
}
.glyphicon-circle-arrow-right:before {
  content: "\e131";
}
.glyphicon-circle-arrow-left:before {
  content: "\e132";
}
.glyphicon-circle-arrow-up:before {
  content: "\e133";
}
.glyphicon-circle-arrow-down:before {
  content: "\e134";
}
.glyphicon-globe:before {
  content: "\e135";
}
.glyphicon-wrench:before {
  content: "\e136";
}
.glyphicon-tasks:before {
  content: "\e137";
}
.glyphicon-filter:before {
  content: "\e138";
}
.glyphicon-briefcase:before {
  content: "\e139";
}
.glyphicon-fullscreen:before {
  content: "\e140";
}
.glyphicon-dashboard:before {
  content: "\e141";
}
.glyphicon-paperclip:before {
  content: "\e142";
}
.glyphicon-heart-empty:before {
  content: "\e143";
}
.glyphicon-link:before {
  content: "\e144";
}
.glyphicon-phone:before {
  content: "\e145";
}
.glyphicon-pushpin:before {
  content: "\e146";
}
.glyphicon-usd:before {
  content: "\e148";
}
.glyphicon-gbp:before {
  content: "\e149";
}
.glyphicon-sort:before {
  content: "\e150";
}
.glyphicon-sort-by-alphabet:before {
  content: "\e151";
}
.glyphicon-sort-by-alphabet-alt:before {
  content: "\e152";
}
.glyphicon-sort-by-order:before {
  content: "\e153";
}
.glyphicon-sort-by-order-alt:before {
  content: "\e154";
}
.glyphicon-sort-by-attributes:before {
  content: "\e155";
}
.glyphicon-sort-by-attributes-alt:before {
  content: "\e156";
}
.glyphicon-unchecked:before {
  content: "\e157";
}
.glyphicon-expand:before {
  content: "\e158";
}
.glyphicon-collapse-down:before {
  content: "\e159";
}
.glyphicon-collapse-up:before {
  content: "\e160";
}
.glyphicon-log-in:before {
  content: "\e161";
}
.glyphicon-flash:before {
  content: "\e162";
}
.glyphicon-log-out:before {
  content: "\e163";
}
.glyphicon-new-window:before {
  content: "\e164";
}
.glyphicon-record:before {
  content: "\e165";
}
.glyphicon-save:before {
  content: "\e166";
}
.glyphicon-open:before {
  content: "\e167";
}
.glyphicon-saved:before {
  content: "\e168";
}
.glyphicon-import:before {
  content: "\e169";
}
.glyphicon-export:before {
  content: "\e170";
}
.glyphicon-send:before {
  content: "\e171";
}
.glyphicon-floppy-disk:before {
  content: "\e172";
}
.glyphicon-floppy-saved:before {
  content: "\e173";
}
.glyphicon-floppy-remove:before {
  content: "\e174";
}
.glyphicon-floppy-save:before {
  content: "\e175";
}
.glyphicon-floppy-open:before {
  content: "\e176";
}
.glyphicon-credit-card:before {
  content: "\e177";
}
.glyphicon-transfer:before {
  content: "\e178";
}
.glyphicon-cutlery:before {
  content: "\e179";
}
.glyphicon-header:before {
  content: "\e180";
}
.glyphicon-compressed:before {
  content: "\e181";
}
.glyphicon-earphone:before {
  content: "\e182";
}
.glyphicon-phone-alt:before {
  content: "\e183";
}
.glyphicon-tower:before {
  content: "\e184";
}
.glyphicon-stats:before {
  content: "\e185";
}
.glyphicon-sd-video:before {
  content: "\e186";
}
.glyphicon-hd-video:before {
  content: "\e187";
}
.glyphicon-subtitles:before {
  content: "\e188";
}
.glyphicon-sound-stereo:before {
  content: "\e189";
}
.glyphicon-sound-dolby:before {
  content: "\e190";
}
.glyphicon-sound-5-1:before {
  content: "\e191";
}
.glyphicon-sound-6-1:before {
  content: "\e192";
}
.glyphicon-sound-7-1:before {
  content: "\e193";
}
.glyphicon-copyright-mark:before {
  content: "\e194";
}
.glyphicon-registration-mark:before {
  content: "\e195";
}
.glyphicon-cloud-download:before {
  content: "\e197";
}
.glyphicon-cloud-upload:before {
  content: "\e198";
}
.glyphicon-tree-conifer:before {
  content: "\e199";
}
.glyphicon-tree-deciduous:before {
  content: "\e200";
}
.glyphicon-cd:before {
  content: "\e201";
}
.glyphicon-save-file:before {
  content: "\e202";
}
.glyphicon-open-file:before {
  content: "\e203";
}
.glyphicon-level-up:before {
  content: "\e204";
}
.glyphicon-copy:before {
  content: "\e205";
}
.glyphicon-paste:before {
  content: "\e206";
}
.glyphicon-alert:before {
  content: "\e209";
}
.glyphicon-equalizer:before {
  content: "\e210";
}
.glyphicon-king:before {
  content: "\e211";
}
.glyphicon-queen:before {
  content: "\e212";
}
.glyphicon-pawn:before {
  content: "\e213";
}
.glyphicon-bishop:before {
  content: "\e214";
}
.glyphicon-knight:before {
  content: "\e215";
}
.glyphicon-baby-formula:before {
  content: "\e216";
}
.glyphicon-tent:before {
  content: "\26fa";
}
.glyphicon-blackboard:before {
  content: "\e218";
}
.glyphicon-bed:before {
  content: "\e219";
}
.glyphicon-apple:before {
  content: "\f8ff";
}
.glyphicon-erase:before {
  content: "\e221";
}
.glyphicon-hourglass:before {
  content: "\231b";
}
.glyphicon-lamp:before {
  content: "\e223";
}
.glyphicon-duplicate:before {
  content: "\e224";
}
.glyphicon-piggy-bank:before {
  content: "\e225";
}
.glyphicon-scissors:before {
  content: "\e226";
}
.glyphicon-bitcoin:before {
  content: "\e227";
}
.glyphicon-btc:before {
  content: "\e227";
}
.glyphicon-xbt:before {
  content: "\e227";
}
.glyphicon-yen:before {
  content: "\00a5";
}
.glyphicon-jpy:before {
  content: "\00a5";
}
.glyphicon-ruble:before {
  content: "\20bd";
}
.glyphicon-rub:before {
  content: "\20bd";
}
.glyphicon-scale:before {
  content: "\e230";
}
.glyphicon-ice-lolly:before {
  content: "\e231";
}
.glyphicon-ice-lolly-tasted:before {
  content: "\e232";
}
.glyphicon-education:before {
  content: "\e233";
}
.glyphicon-option-horizontal:before {
  content: "\e234";
}
.glyphicon-option-vertical:before {
  content: "\e235";
}
.glyphicon-menu-hamburger:before {
  content: "\e236";
}
.glyphicon-modal-window:before {
  content: "\e237";
}
.glyphicon-oil:before {
  content: "\e238";
}
.glyphicon-grain:before {
  content: "\e239";
}
.glyphicon-sunglasses:before {
  content: "\e240";
}
.glyphicon-text-size:before {
  content: "\e241";
}
.glyphicon-text-color:before {
  content: "\e242";
}
.glyphicon-text-background:before {
  content: "\e243";
}
.glyphicon-object-align-top:before {
  content: "\e244";
}
.glyphicon-object-align-bottom:before {
  content: "\e245";
}
.glyphicon-object-align-horizontal:before {
  content: "\e246";
}
.glyphicon-object-align-left:before {
  content: "\e247";
}
.glyphicon-object-align-vertical:before {
  content: "\e248";
}
.glyphicon-object-align-right:before {
  content: "\e249";
}
.glyphicon-triangle-right:before {
  content: "\e250";
}
.glyphicon-triangle-left:before {
  content: "\e251";
}
.glyphicon-triangle-bottom:before {
  content: "\e252";
}
.glyphicon-triangle-top:before {
  content: "\e253";
}
.glyphicon-console:before {
  content: "\e254";
}
.glyphicon-superscript:before {
  content: "\e255";
}
.glyphicon-subscript:before {
  content: "\e256";
}
.glyphicon-menu-left:before {
  content: "\e257";
}
.glyphicon-menu-right:before {
  content: "\e258";
}
.glyphicon-menu-down:before {
  content: "\e259";
}
.glyphicon-menu-up:before {
  content: "\e260";
}