@charset "UTF-8";
/*
 *  Bootstrap 3 classes that Bootstrap 5 does not define. Bootstrap 3 breakpoint and gutter values
 *  for the classes whose names both versions share.
 *
 *  PHR's markup was written against Bootstrap 3. PHR-5818 moved the stylesheet to Bootstrap 5
 *  and did not rewrite that markup. This file supplies what Bootstrap 5 dropped or changed.
 *  WEB-INF/common/bootstrap-css.jspf loads it directly after the Bootstrap stylesheet and before
 *  PHR's own. Every rule here wins against Bootstrap 5 by source order, not by specificity.
 *  Several rules are the structural base that PHR's own stylesheets then adjust.
 *
 *  Declarations are Bootstrap 3.4.1's own, except in the grid section. A grid column keeps
 *  Bootstrap 3's padding and float. It also gets Bootstrap 5's `flex: 0 0 auto`, so it works
 *  inside a `.row` and outside one.
 *
 *  Each area of the app that moves to Bootstrap 5 class names deletes the rules it no longer
 *  needs. What remains here is the list of what has not moved yet.
 */
/* ==========================================================================
   Grid and container: Bootstrap 3 breakpoints and gutters
   ========================================================================== */
/*
 *  The two versions disagree on what a tier name means:
 *
 *      tier   Bootstrap 3   Bootstrap 5
 *      sm     >= 768px      >= 576px
 *      md     >= 992px      >= 768px
 *      lg     >= 1200px     >= 992px
 *
 *  So .col-md-9 in PHR's markup means "9 wide from 992px", which is Bootstrap 5's .col-lg-9.
 *  This file redefines the tiers to mean what the markup intends, instead of a shift of 484
 *  class uses across the app. Each tier is first reset to full width to cancel Bootstrap 5's
 *  narrower breakpoint. Each tier is then set again at Bootstrap 3's breakpoint.
 *
 *  Within PHR, .col-sm-*, .col-md-* and .col-lg-* keep Bootstrap 3 semantics. New markup that
 *  wants Bootstrap 5 semantics uses .col-xl-* and .col-xxl-*, which are untouched, or waits
 *  until its area moves.
 */
/* Bootstrap 3 columns are 15px each side inside a row with -15px margins. */
.container,
.container-fluid,
.row {
  --bs-gutter-x: 30px;
}

/*
 *  Bootstrap 3 columns were floats, so each took the height of its content. As flex items they
 *  stretch to the tallest column in the row. That change shows wherever a column has a background
 *  of its own. The help panel beside the add organisation form ran the whole height of the page.
 */
.row {
  align-items: flex-start;
}

/*
 *  Bootstrap 3 had no rule for the children of a `.row`. The gutter padding sat on the columns,
 *  and anything else inside a row was left alone.
 *
 *  Bootstrap 5 styles every child through `.row > *`: gutter padding, `width: 100%`,
 *  `max-width: 100%` and `flex-shrink: 0`. This block cancels the padding and the `flex-shrink: 0`.
 *  It keeps the width, because a `.row` is a flex container under Bootstrap 5. Without the width,
 *  a block child that Bootstrap 3 let fill the row shrinks to its content.
 *  `#search-test-container` in myTests.jsp does exactly that, which broke the test search box.
 *
 *  Two examples of the harm that the rest caused:
 *
 *    - the landing pages make `#inner` a direct child of `#outer.row`. 15px each side narrowed the
 *      login form and moved the language selector and "Powered by" 15px right;
 *    - a notification row is `<a class="row spacer">` holding a `div.message`. As an unshrinkable
 *      full-width flex item it overflowed its row. `.single_message` is `white-space: nowrap`
 *      with `overflow: hidden`, so the text was clipped away entirely. The row rendered blank, the
 *      page grew a horizontal scrollbar, and `getText()` returned only the subject.
 *
 *  Columns are left alone. Bootstrap 5's own `.col`, `.col-4` and `.col-auto` carry no width or
 *  padding and depend on this rule. The team skins and questionnaire tags use them.
 *  `[class*="col-"]` also spares `.col-form-label`, which the Struts theme emits and which
 *  Bootstrap 5 pads deliberately.
 */
.row > *:not([class*="col-"]):not(.col) {
  flex-shrink: 1;
  padding-right: 0;
  padding-left: 0;
}

/*
 *  Bootstrap 3 put the gutter padding on the column itself and floated it. Bootstrap 5 moved the
 *  padding to `.row > *` and sizes columns as flex items. That difference matters, because much
 *  PHR markup puts columns outside a `.row`. Every `.form-horizontal .form-group` does, and
 *  112 files use `form-horizontal`. Such a column keeps its width but loses the padding and the
 *  float, so label and field stack instead of sitting side by side.
 *
 *  The base below is Bootstrap 3's. `flex: 0 0 auto` stays on the sized rules for the columns
 *  inside a `.row`. The float is ignored there.
 */
.col-xs-1 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-2 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-3 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-6 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-7 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-8 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-10 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-11 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-1 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-2 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-3 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-6 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-7 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-8 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-10 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-11 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-1 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-2 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-3 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-6 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-7 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-8 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-10 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-11 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-md-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-1 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-2 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-3 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-6 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-7 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-8 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-10 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-11 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

/*
 *  Below its own breakpoint a Bootstrap 3 column carried no width and filled the row. This file
 *  therefore holds each tier at full width up to Bootstrap 3's breakpoint. That also cancels
 *  Bootstrap 5's narrower breakpoint. Bootstrap 5 starts sizing .col-md-* at 768px, and PHR's
 *  markup means 992px.
 *
 *  These rules come before .col-xs-*, so a column that carries both, such as `col-md-3 col-xs-6`,
 *  gets its xs width between the two breakpoints.
 */
@media (max-width: 767.98px) {
  .col-sm-1 {
    width: 100%;
  }

  .col-sm-2 {
    width: 100%;
  }

  .col-sm-3 {
    width: 100%;
  }

  .col-sm-4 {
    width: 100%;
  }

  .col-sm-5 {
    width: 100%;
  }

  .col-sm-6 {
    width: 100%;
  }

  .col-sm-7 {
    width: 100%;
  }

  .col-sm-8 {
    width: 100%;
  }

  .col-sm-9 {
    width: 100%;
  }

  .col-sm-10 {
    width: 100%;
  }

  .col-sm-11 {
    width: 100%;
  }

  .col-sm-12 {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .col-md-1 {
    width: 100%;
  }

  .col-md-2 {
    width: 100%;
  }

  .col-md-3 {
    width: 100%;
  }

  .col-md-4 {
    width: 100%;
  }

  .col-md-5 {
    width: 100%;
  }

  .col-md-6 {
    width: 100%;
  }

  .col-md-7 {
    width: 100%;
  }

  .col-md-8 {
    width: 100%;
  }

  .col-md-9 {
    width: 100%;
  }

  .col-md-10 {
    width: 100%;
  }

  .col-md-11 {
    width: 100%;
  }

  .col-md-12 {
    width: 100%;
  }
}
@media (max-width: 1199.98px) {
  .col-lg-1 {
    width: 100%;
  }

  .col-lg-2 {
    width: 100%;
  }

  .col-lg-3 {
    width: 100%;
  }

  .col-lg-4 {
    width: 100%;
  }

  .col-lg-5 {
    width: 100%;
  }

  .col-lg-6 {
    width: 100%;
  }

  .col-lg-7 {
    width: 100%;
  }

  .col-lg-8 {
    width: 100%;
  }

  .col-lg-9 {
    width: 100%;
  }

  .col-lg-10 {
    width: 100%;
  }

  .col-lg-11 {
    width: 100%;
  }

  .col-lg-12 {
    width: 100%;
  }
}
/*
 *  Bootstrap 3's xs tier has no lower bound, so these rules apply at every width.
 *
 *  Order decides the outcome here, not specificity. .col-xs-6 and .col-md-3 are both one class,
 *  and a media query adds none. On `col-md-3 col-sm-4 col-xs-6`, whichever rule is written last
 *  wins at every width. The tier widths below must therefore stay after these.
 */
.col-xs-1 {
  flex: 0 0 auto;
  float: left;
  width: 8.3333333333%;
}

.col-xs-2 {
  flex: 0 0 auto;
  float: left;
  width: 16.6666666667%;
}

.col-xs-3 {
  flex: 0 0 auto;
  float: left;
  width: 25%;
}

.col-xs-4 {
  flex: 0 0 auto;
  float: left;
  width: 33.3333333333%;
}

.col-xs-5 {
  flex: 0 0 auto;
  float: left;
  width: 41.6666666667%;
}

.col-xs-6 {
  flex: 0 0 auto;
  float: left;
  width: 50%;
}

.col-xs-7 {
  flex: 0 0 auto;
  float: left;
  width: 58.3333333333%;
}

.col-xs-8 {
  flex: 0 0 auto;
  float: left;
  width: 66.6666666667%;
}

.col-xs-9 {
  flex: 0 0 auto;
  float: left;
  width: 75%;
}

.col-xs-10 {
  flex: 0 0 auto;
  float: left;
  width: 83.3333333333%;
}

.col-xs-11 {
  flex: 0 0 auto;
  float: left;
  width: 91.6666666667%;
}

.col-xs-12 {
  flex: 0 0 auto;
  float: left;
  width: 100%;
}

.col-xs-offset-0 {
  margin-left: 0%;
}

.col-xs-offset-1 {
  margin-left: 8.3333333333%;
}

.col-xs-offset-2 {
  margin-left: 16.6666666667%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-4 {
  margin-left: 33.3333333333%;
}

.col-xs-offset-5 {
  margin-left: 41.6666666667%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-7 {
  margin-left: 58.3333333333%;
}

.col-xs-offset-8 {
  margin-left: 66.6666666667%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-10 {
  margin-left: 83.3333333333%;
}

.col-xs-offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 768px) {
  .col-sm-1 {
    flex: 0 0 auto;
    float: left;
    width: 8.3333333333%;
  }

  .col-sm-2 {
    flex: 0 0 auto;
    float: left;
    width: 16.6666666667%;
  }

  .col-sm-3 {
    flex: 0 0 auto;
    float: left;
    width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 auto;
    float: left;
    width: 33.3333333333%;
  }

  .col-sm-5 {
    flex: 0 0 auto;
    float: left;
    width: 41.6666666667%;
  }

  .col-sm-6 {
    flex: 0 0 auto;
    float: left;
    width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 auto;
    float: left;
    width: 58.3333333333%;
  }

  .col-sm-8 {
    flex: 0 0 auto;
    float: left;
    width: 66.6666666667%;
  }

  .col-sm-9 {
    flex: 0 0 auto;
    float: left;
    width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 auto;
    float: left;
    width: 83.3333333333%;
  }

  .col-sm-11 {
    flex: 0 0 auto;
    float: left;
    width: 91.6666666667%;
  }

  .col-sm-12 {
    flex: 0 0 auto;
    float: left;
    width: 100%;
  }

  .col-sm-offset-0 {
    margin-left: 0%;
  }

  .col-sm-offset-1 {
    margin-left: 8.3333333333%;
  }

  .col-sm-offset-2 {
    margin-left: 16.6666666667%;
  }

  .col-sm-offset-3 {
    margin-left: 25%;
  }

  .col-sm-offset-4 {
    margin-left: 33.3333333333%;
  }

  .col-sm-offset-5 {
    margin-left: 41.6666666667%;
  }

  .col-sm-offset-6 {
    margin-left: 50%;
  }

  .col-sm-offset-7 {
    margin-left: 58.3333333333%;
  }

  .col-sm-offset-8 {
    margin-left: 66.6666666667%;
  }

  .col-sm-offset-9 {
    margin-left: 75%;
  }

  .col-sm-offset-10 {
    margin-left: 83.3333333333%;
  }

  .col-sm-offset-11 {
    margin-left: 91.6666666667%;
  }

  /*
   *  Bootstrap 5 dropped push and pull and uses flex order instead. Push and pull are only
   *  position offsets, so they work either way.
   */
  .col-sm-push-0 {
    left: auto;
  }

  .col-sm-pull-0 {
    right: auto;
  }

  .col-sm-push-1 {
    left: 8.3333333333%;
  }

  .col-sm-pull-1 {
    right: 8.3333333333%;
  }

  .col-sm-push-2 {
    left: 16.6666666667%;
  }

  .col-sm-pull-2 {
    right: 16.6666666667%;
  }

  .col-sm-push-3 {
    left: 25%;
  }

  .col-sm-pull-3 {
    right: 25%;
  }

  .col-sm-push-4 {
    left: 33.3333333333%;
  }

  .col-sm-pull-4 {
    right: 33.3333333333%;
  }

  .col-sm-push-5 {
    left: 41.6666666667%;
  }

  .col-sm-pull-5 {
    right: 41.6666666667%;
  }

  .col-sm-push-6 {
    left: 50%;
  }

  .col-sm-pull-6 {
    right: 50%;
  }

  .col-sm-push-7 {
    left: 58.3333333333%;
  }

  .col-sm-pull-7 {
    right: 58.3333333333%;
  }

  .col-sm-push-8 {
    left: 66.6666666667%;
  }

  .col-sm-pull-8 {
    right: 66.6666666667%;
  }

  .col-sm-push-9 {
    left: 75%;
  }

  .col-sm-pull-9 {
    right: 75%;
  }

  .col-sm-push-10 {
    left: 83.3333333333%;
  }

  .col-sm-pull-10 {
    right: 83.3333333333%;
  }

  .col-sm-push-11 {
    left: 91.6666666667%;
  }

  .col-sm-pull-11 {
    right: 91.6666666667%;
  }

  .col-sm-push-12 {
    left: 100%;
  }

  .col-sm-pull-12 {
    right: 100%;
  }
}
@media (min-width: 992px) {
  .col-md-1 {
    flex: 0 0 auto;
    float: left;
    width: 8.3333333333%;
  }

  .col-md-2 {
    flex: 0 0 auto;
    float: left;
    width: 16.6666666667%;
  }

  .col-md-3 {
    flex: 0 0 auto;
    float: left;
    width: 25%;
  }

  .col-md-4 {
    flex: 0 0 auto;
    float: left;
    width: 33.3333333333%;
  }

  .col-md-5 {
    flex: 0 0 auto;
    float: left;
    width: 41.6666666667%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    float: left;
    width: 50%;
  }

  .col-md-7 {
    flex: 0 0 auto;
    float: left;
    width: 58.3333333333%;
  }

  .col-md-8 {
    flex: 0 0 auto;
    float: left;
    width: 66.6666666667%;
  }

  .col-md-9 {
    flex: 0 0 auto;
    float: left;
    width: 75%;
  }

  .col-md-10 {
    flex: 0 0 auto;
    float: left;
    width: 83.3333333333%;
  }

  .col-md-11 {
    flex: 0 0 auto;
    float: left;
    width: 91.6666666667%;
  }

  .col-md-12 {
    flex: 0 0 auto;
    float: left;
    width: 100%;
  }

  .col-md-offset-0 {
    margin-left: 0%;
  }

  .col-md-offset-1 {
    margin-left: 8.3333333333%;
  }

  .col-md-offset-2 {
    margin-left: 16.6666666667%;
  }

  .col-md-offset-3 {
    margin-left: 25%;
  }

  .col-md-offset-4 {
    margin-left: 33.3333333333%;
  }

  .col-md-offset-5 {
    margin-left: 41.6666666667%;
  }

  .col-md-offset-6 {
    margin-left: 50%;
  }

  .col-md-offset-7 {
    margin-left: 58.3333333333%;
  }

  .col-md-offset-8 {
    margin-left: 66.6666666667%;
  }

  .col-md-offset-9 {
    margin-left: 75%;
  }

  .col-md-offset-10 {
    margin-left: 83.3333333333%;
  }

  .col-md-offset-11 {
    margin-left: 91.6666666667%;
  }

  /*
   *  Bootstrap 5 dropped push and pull and uses flex order instead. Push and pull are only
   *  position offsets, so they work either way.
   */
  .col-md-push-0 {
    left: auto;
  }

  .col-md-pull-0 {
    right: auto;
  }

  .col-md-push-1 {
    left: 8.3333333333%;
  }

  .col-md-pull-1 {
    right: 8.3333333333%;
  }

  .col-md-push-2 {
    left: 16.6666666667%;
  }

  .col-md-pull-2 {
    right: 16.6666666667%;
  }

  .col-md-push-3 {
    left: 25%;
  }

  .col-md-pull-3 {
    right: 25%;
  }

  .col-md-push-4 {
    left: 33.3333333333%;
  }

  .col-md-pull-4 {
    right: 33.3333333333%;
  }

  .col-md-push-5 {
    left: 41.6666666667%;
  }

  .col-md-pull-5 {
    right: 41.6666666667%;
  }

  .col-md-push-6 {
    left: 50%;
  }

  .col-md-pull-6 {
    right: 50%;
  }

  .col-md-push-7 {
    left: 58.3333333333%;
  }

  .col-md-pull-7 {
    right: 58.3333333333%;
  }

  .col-md-push-8 {
    left: 66.6666666667%;
  }

  .col-md-pull-8 {
    right: 66.6666666667%;
  }

  .col-md-push-9 {
    left: 75%;
  }

  .col-md-pull-9 {
    right: 75%;
  }

  .col-md-push-10 {
    left: 83.3333333333%;
  }

  .col-md-pull-10 {
    right: 83.3333333333%;
  }

  .col-md-push-11 {
    left: 91.6666666667%;
  }

  .col-md-pull-11 {
    right: 91.6666666667%;
  }

  .col-md-push-12 {
    left: 100%;
  }

  .col-md-pull-12 {
    right: 100%;
  }
}
@media (min-width: 1200px) {
  .col-lg-1 {
    flex: 0 0 auto;
    float: left;
    width: 8.3333333333%;
  }

  .col-lg-2 {
    flex: 0 0 auto;
    float: left;
    width: 16.6666666667%;
  }

  .col-lg-3 {
    flex: 0 0 auto;
    float: left;
    width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    float: left;
    width: 33.3333333333%;
  }

  .col-lg-5 {
    flex: 0 0 auto;
    float: left;
    width: 41.6666666667%;
  }

  .col-lg-6 {
    flex: 0 0 auto;
    float: left;
    width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 auto;
    float: left;
    width: 58.3333333333%;
  }

  .col-lg-8 {
    flex: 0 0 auto;
    float: left;
    width: 66.6666666667%;
  }

  .col-lg-9 {
    flex: 0 0 auto;
    float: left;
    width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 auto;
    float: left;
    width: 83.3333333333%;
  }

  .col-lg-11 {
    flex: 0 0 auto;
    float: left;
    width: 91.6666666667%;
  }

  .col-lg-12 {
    flex: 0 0 auto;
    float: left;
    width: 100%;
  }

  .col-lg-offset-0 {
    margin-left: 0%;
  }

  .col-lg-offset-1 {
    margin-left: 8.3333333333%;
  }

  .col-lg-offset-2 {
    margin-left: 16.6666666667%;
  }

  .col-lg-offset-3 {
    margin-left: 25%;
  }

  .col-lg-offset-4 {
    margin-left: 33.3333333333%;
  }

  .col-lg-offset-5 {
    margin-left: 41.6666666667%;
  }

  .col-lg-offset-6 {
    margin-left: 50%;
  }

  .col-lg-offset-7 {
    margin-left: 58.3333333333%;
  }

  .col-lg-offset-8 {
    margin-left: 66.6666666667%;
  }

  .col-lg-offset-9 {
    margin-left: 75%;
  }

  .col-lg-offset-10 {
    margin-left: 83.3333333333%;
  }

  .col-lg-offset-11 {
    margin-left: 91.6666666667%;
  }

  /*
   *  Bootstrap 5 dropped push and pull and uses flex order instead. Push and pull are only
   *  position offsets, so they work either way.
   */
  .col-lg-push-0 {
    left: auto;
  }

  .col-lg-pull-0 {
    right: auto;
  }

  .col-lg-push-1 {
    left: 8.3333333333%;
  }

  .col-lg-pull-1 {
    right: 8.3333333333%;
  }

  .col-lg-push-2 {
    left: 16.6666666667%;
  }

  .col-lg-pull-2 {
    right: 16.6666666667%;
  }

  .col-lg-push-3 {
    left: 25%;
  }

  .col-lg-pull-3 {
    right: 25%;
  }

  .col-lg-push-4 {
    left: 33.3333333333%;
  }

  .col-lg-pull-4 {
    right: 33.3333333333%;
  }

  .col-lg-push-5 {
    left: 41.6666666667%;
  }

  .col-lg-pull-5 {
    right: 41.6666666667%;
  }

  .col-lg-push-6 {
    left: 50%;
  }

  .col-lg-pull-6 {
    right: 50%;
  }

  .col-lg-push-7 {
    left: 58.3333333333%;
  }

  .col-lg-pull-7 {
    right: 58.3333333333%;
  }

  .col-lg-push-8 {
    left: 66.6666666667%;
  }

  .col-lg-pull-8 {
    right: 66.6666666667%;
  }

  .col-lg-push-9 {
    left: 75%;
  }

  .col-lg-pull-9 {
    right: 75%;
  }

  .col-lg-push-10 {
    left: 83.3333333333%;
  }

  .col-lg-pull-10 {
    right: 83.3333333333%;
  }

  .col-lg-push-11 {
    left: 91.6666666667%;
  }

  .col-lg-pull-11 {
    right: 91.6666666667%;
  }

  .col-lg-push-12 {
    left: 100%;
  }

  .col-lg-pull-12 {
    right: 100%;
  }
}
/*
 *  Bootstrap 3 gave .container a fixed width from 768px up and nothing below. Bootstrap 5 limits
 *  it from 576px up and to different values. This block resets it, then restores Bootstrap 3's.
 */
.container {
  max-width: none;
}

@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}
/*
 *  Bootstrap 3 gave containers a table-display ::before and ::after to contain floated children.
 *  Bootstrap 5 dropped them. They also stop the bottom margin of a last child from collapsing out
 *  through the container. That collapse took 5px off the footer on every page.
 *
 *  `.row` is deliberately not in this list. It is a flex container under Bootstrap 5. There the
 *  two pseudo-elements become flex items and add a stray cell to every row.
 */
.container::before,
.container::after,
.container-fluid::before,
.container-fluid::after {
  display: table;
  content: " ";
}

.container::after,
.container-fluid::after {
  clear: both;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 *  Bootstrap 5's reboot sets `margin-top: 0` on every heading and a 1.2 line height. Bootstrap 3
 *  gave headings a top margin and 1.1. Without the top margin, a section heading sits flush
 *  against what precedes it. The diagnoses and medications pages each lost 20px per heading.
 *
 *  Font sizes are not restored. PHR sets its own for every heading it uses, so Bootstrap 3's
 *  values would be dead here.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}

h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4,
h5,
h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Bootstrap 5 gives these `margin-bottom: 1rem`, which is 15px against PHR's 15px root. */
ul,
ol {
  margin-bottom: 10px;
}

dl {
  margin-bottom: 20px;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-group {
  margin-bottom: 15px;
}

/* Bootstrap 3 form groups are rows, so they carry the row's negative margins and clear. */
.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
}

.form-horizontal .form-group::before,
.form-horizontal .form-group::after {
  display: table;
  content: " ";
}

.form-horizontal .form-group::after {
  clear: both;
}

/*
 *  Bootstrap 3 put these on `label` itself. Bootstrap 5's reboot keeps only the
 *  `display: inline-block` and drops the rest. That left the login page's "show password"
 *  checkbox 5px shorter than before and pulled everything below it up.
 *
 *  The selector matters as much as the declarations. This file first applied them to
 *  `.control-label`, which missed every plain `<label>`. It reached the `h2` and `p` elements
 *  that also carry the class, which Bootstrap 3 never touched.
 */
label {
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

/*
 *  Bootstrap 5 splits selects out of .form-control into .form-select. That class suppresses the
 *  own dropdown arrow of the browser and draws an SVG chevron instead. .form-control keeps the
 *  suppression, which is there for date inputs in Safari, but not the replacement. PHR's selects
 *  carry .form-control because that was the Bootstrap 3 way, so they lost their arrow and got
 *  nothing back. Bootstrap 3's .form-control never touched appearance.
 *
 *  The arrow of the browser stays rather than the chevron. That keeps the current look of the
 *  control and leaves no image to size or colour. A select that opts into .form-select gets the
 *  chevron as Bootstrap 5 intends. No markup in PHR does yet.
 */
/*
 *  Bootstrap 5 sizes form controls in rem. Against PHR's 15px root, every input and select
 *  renders a point larger with slightly tighter padding and a 5.625px radius. These are
 *  Bootstrap 3's own values.
 */
.form-control {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #eeeeee;
}

select.form-control {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

@media (min-width: 768px) {
  .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
  }
}
.form-horizontal .radio,
.form-horizontal .checkbox {
  min-height: 27px;
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.radio label,
.checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }

  /* This is what makes the sfhft_sher header search box shrink to its content. */
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }
}
/* Bootstrap 5 renamed this to .form-control-plaintext. */
.form-control-static {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}

/* Bootstrap 5 renamed this to .form-control-sm. */
.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

/* Positioning context for .form-control-feedback. */
.has-feedback {
  position: relative;
}

.has-feedback .form-control {
  padding-right: 42.5px;
}

/*
 *  Bootstrap 3 laid an input group out as a table. Bootstrap 5 uses a flex row that fills its
 *  container. The only input group PHR renders is the site search box in the sfhft_sher skin.
 *  It came out 2px narrower with its button no longer vertically centred.
 *
 *  This rule must go if PHR starts to use the `prepend` or `append` templates of the Struts
 *  theme. Those templates emit Bootstrap 5 input-group markup, which a table layout would break.
 *  No markup uses them today.
 */
.input-group {
  display: table;
  width: auto;
}

.input-group .form-control,
.input-group-addon,
.input-group-btn {
  display: table-cell;
}

.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

textarea.form-control {
  height: auto;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

/*
 *  Bootstrap 5 kept neither of these. `.d-none` replaced them. `.hide` is the class the timeline
 *  legend toggles through `[ngClass]="{ 'timeline-icons': true, hide: collapsed }"`. Without it
 *  the legend stays open below 1160px, where it should start collapsed.
 */
.hidden,
.hide {
  display: none !important;
}

/* Bootstrap 5 renamed this to .visually-hidden. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Bootstrap 5 renamed this to .img-fluid. */
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

/*
 *  Bootstrap 5 shows a .fade with .show. Bootstrap 3 used .in. The vendored jQuery File Upload
 *  plugin under js/upload toggles .in on the .fileupload-progress bar in both file uploaders.
 *  js/uploadMultiAttachment adds it too, so both keep working.
 */
.fade.in {
  opacity: 1;
}

/* ==========================================================================
   Responsive visibility, at Bootstrap 3's breakpoints
   ========================================================================== */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-xs,
  .visible-xs-block {
    display: block !important;
  }

  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }

  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }

  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }

  .hidden-lg {
    display: none !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}
/* ==========================================================================
   Tables
   ========================================================================== */
/*
 *  Bootstrap 3 left table cells transparent, so the `table th` background of PHR showed through.
 *  Bootstrap 5 paints `--bs-table-bg` on every cell through `.table > :not(caption) > * > *`.
 *  That selector outranks an element selector and turns every header white. The read-only
 *  attributes table on the organisation page lost its dark blue header row. The striped, hover
 *  and contextual variants paint through the inset box-shadow, which this block leaves alone.
 */
.table > :not(caption) > * > * {
  background-color: transparent;
}

/* ==========================================================================
   Panels — Bootstrap 5 replaced these with .card
   ========================================================================== */
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-body {
  padding: 15px;
}

.panel-body::before,
.panel-body::after {
  display: table;
  content: " ";
}

.panel-body::after {
  clear: both;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.panel > .table,
.panel > .table-responsive > .table {
  margin-bottom: 0;
}

.panel-default {
  border-color: #ddd;
}

.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

/* ==========================================================================
   Navbar — Bootstrap 5 rewrote this component
   ========================================================================== */
/*
 *  .nav, .navbar, .navbar-nav and .navbar-collapse exist in both versions, so nothing flags them.
 *  Bootstrap 5 makes them flex containers where Bootstrap 3 used blocks and floats. PHR's header
 *  is Bootstrap 3 markup. .navbar-header and .navbar-collapse are block children of .navbar, and
 *  .nav-buttons is a .nav whose li carry their own widths. Under Bootstrap 5 the header wraps
 *  onto extra lines and grows by about 150px, which pushes everything below it down.
 *
 *  These rules restore Bootstrap 3's layout. PHR's own nav rules then adjust it as they do today,
 *  including a move of the collapse breakpoint to 992px.
 */
.navbar {
  position: relative;
  display: block;
  min-height: 50px;
  padding: 0;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

@media (min-width: 768px) {
  .navbar {
    border-radius: 4px;
  }
}
/*
 *  Bootstrap 5 turns a container placed directly inside a navbar into a flex row. Bootstrap 3 left
 *  it a block. PHR's header puts .navbar-header and .navbar-collapse inside .container-fluid. As
 *  a flex row they sit side by side and the header grows by 54px. That pushes the content of every
 *  page down by 54px. The clearfix these then need comes from the container rules above.
 */
.navbar > .container,
.navbar > .container-fluid {
  display: block;
}

.nav {
  display: block;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav::before,
.nav::after {
  display: table;
  content: " ";
}

.nav::after {
  clear: both;
}

.nav > li {
  position: relative;
  display: block;
}

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}

/*
 *  Bootstrap 3 laid tabs out with a float on the li. Bootstrap 5 expects .nav-item on the li and
 *  .nav-link on the anchor, and PHR's markup has neither. With `.nav` back to a block, the tabs
 *  stacked vertically. The EMIS extract services sub-menu and the activation type tabs of the
 *  registration page use them.
 */
.nav-tabs {
  border-bottom: 1px solid #ddd;
}

.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
  border-color: #eee #eee #ddd;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

.nav-justified {
  width: 100%;
}

.nav-justified > li {
  float: none;
}

.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}

.nav-tabs.nav-justified {
  border-bottom: 0;
}

.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}

.nav-tabs.nav-justified > li.active > a,
.nav-tabs.nav-justified > li.active > a:hover,
.nav-tabs.nav-justified > li.active > a:focus {
  border: 1px solid #ddd;
}

@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }

  .nav-justified > li > a {
    margin-bottom: 0;
  }

  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }

  .nav-tabs.nav-justified > li.active > a,
  .nav-tabs.nav-justified > li.active > a:hover,
  .nav-tabs.nav-justified > li.active > a:focus {
    border-bottom-color: #fff;
  }
}
.navbar-nav {
  display: block;
  margin: 7.5px -15px;
}

.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }

  .navbar-nav > li {
    float: left;
  }

  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
/*
 *  Bootstrap 3 pulled the header and the collapse out to the edge of the container below 768px,
 *  where the container keeps its 15px padding. Without it the mobile header sits 15px narrow and
 *  the toggle button lands 15px in from the edge.
 */
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: -15px;
  margin-left: -15px;
}

@media (min-width: 768px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}
/* Bootstrap 5 makes this a flex child that always fills the row. */
.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  border-top: 1px solid transparent;
}

@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
  }

  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
}
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

/*
 *  Bootstrap 3 kept navbar links transparent on hover and focus. That is what stopped the grey
 *  from `.nav > li > a:hover` above from reaching them. Bootstrap 5 dropped .navbar-default and
 *  that rule with it, so a grey box appeared behind Log out, Help and Profile in every header.
 *  The markup is `ul class="nav navbar-nav"` in hamburger-menu.tagx and in the pro decorators.
 *  PHR sets the link colours itself with !important, so only the background is restored here.
 */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: #ddd;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ddd;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #888;
}

.navbar-default .navbar-collapse {
  border-color: #e7e7e7;
}

.navbar-header::before,
.navbar-header::after {
  display: table;
  content: " ";
}

.navbar-header::after {
  clear: both;
}

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}
/* Bootstrap 5 renamed this to .navbar-toggler. */
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

/* Bootstrap 5 replaced the three bars with a single .navbar-toggler-icon. */
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar-right {
    float: right !important;
    margin-right: -15px;
  }
}
/*
 *  Bootstrap 5 rewrote the dropdown metrics: 1rem text against Bootstrap 3's 14px, .5rem vertical
 *  padding against 5px, and its own body colour where Bootstrap 3 inherited. Bootstrap 5 also
 *  positions the menu absolutely only after Popper marks it. PHR's header menus are Bootstrap 3
 *  markup, so the open menu came out larger and in a different colour. `color: inherit` is not a
 *  Bootstrap 3 declaration. It undoes one that Bootstrap 5 added.
 */
.dropdown-menu {
  position: absolute;
  float: left;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

/*
 *  Bootstrap 5 keeps a dropdown inside a navbar in the flow, where `.navbar-nav .dropdown-menu` is
 *  `position: static`. It puts the menu back to absolute only for a `.navbar-expand-*` navbar.
 *  PHR's Bootstrap 3 markup is not one. Left alone, a header menu pushes the page down instead of
 *  overlaying it. Bootstrap 3 made the menu static only inside the collapsed menu.
 */
.navbar-nav .dropdown-menu {
  position: absolute;
}

@media (max-width: 767px) {
  .navbar-nav .dropdown-menu.show {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
}
/* Bootstrap 3 squared off the corners where the menu meets the navbar and dropped the 2px gap. */
.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Bootstrap 5 added this. Bootstrap 3 let a toggle's label wrap. */
.dropdown-toggle {
  white-space: normal;
}

/* ==========================================================================
   Buttons — Bootstrap 5 renamed .btn-default to .btn-secondary
   ========================================================================== */
/*
 *  Bootstrap 3 kept button text on one line and opted buttons out of the double-tap delay on
 *  touch devices. Bootstrap 5 drops both.
 */
.btn {
  white-space: nowrap;
  touch-action: manipulation;
  line-height: 1.42857143;
}

/*
 *  Bootstrap 3 only took pointer events away from a disabled anchor. A disabled button or input
 *  still received the click and did nothing with it. Bootstrap 5 takes them away from every
 *  disabled .btn, so a click aimed at one lands on whatever sits behind it.
 *
 *  The symptoms page disables Save until a symptom is picked. PatientSymptomsTest clicks it in
 *  that state on purpose to test the validation of the page. With pointer events off, the click
 *  hit the .form-actions container instead, and Selenium reported it as intercepted.
 */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  pointer-events: auto;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default:focus,
.btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}

.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-default:active,
.btn-default.active {
  color: #333;
  background-color: #e6e6e6;
  background-image: none;
  border-color: #adadad;
}

.btn-default.disabled:hover,
.btn-default[disabled]:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus {
  background-color: #fff;
  border-color: #ccc;
}

/*
 *  Bootstrap 5's .modal-title sets only a bottom margin, so the heading margins restored above
 *  would push a modal's title away from the top of its header. Bootstrap 3 pinned both margins.
 */
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}

/* ==========================================================================
   Remaining components Bootstrap 5 dropped
   ========================================================================== */
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

.pager {
  padding-left: 0;
  margin: 20px 0;
  text-align: center;
  list-style: none;
}

.pager::before,
.pager::after {
  display: table;
  content: " ";
}

.pager::after {
  clear: both;
}

.pager li {
  display: inline;
}

.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}

.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #eee;
}

.pager .next > a,
.pager .next > span {
  float: right;
}

.pager .previous > a,
.pager .previous > span {
  float: left;
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
}

/*
 *  Bootstrap 5 renamed the pagination internals to .page-item and .page-link and made .pagination
 *  a flex row. PHR's markup is still <ul class="pagination"><li><a>, and the main stylesheet
 *  adjusts .pagination > li > a on top of these rules.
 */
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}

.pagination > li {
  display: inline;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Bootstrap 5 expects .dropdown-item on the link rather than styling the list structure. */
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}

/* Bootstrap 5 makes this inline-flex and lays the buttons out as flex items. */
.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/*
 *  Bootstrap 5 adds `flex: 1 1 auto` here. Bootstrap 3 had no equivalent. The declaration is
 *  inert while .btn-group is the inline-block above, but PHR's own .btn-group-fluid makes the
 *  group a flex container. There the buttons stretched to fill it. The measurements page drew
 *  them 206px wide against 100px.
 */
.btn-group > .btn {
  position: relative;
  float: left;
  flex: 0 1 auto;
}

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border 0.2s ease-in-out;
}

.thumbnail > img,
.thumbnail a > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.thumbnail .caption {
  padding: 9px;
  color: #333;
}

/* Bootstrap 5 renamed this to .btn-close and draws it with a background image. */
.close {
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
}

/*
 *  Bootstrap 5 sizes the progress track in rem and drops its bottom margin. The upload bar in
 *  _file-uploader.jsp measured 15px tall on an #e9ecef track with a 5.625px radius, against
 *  Bootstrap 3's 20px on #f5f5f5 with 4px. It also lost the 20px gap below it.
 *
 *  The fill needs nothing. The upload plugin sets the width inline, which works under either
 *  layout. .progress-bar-success below still colours it, and nothing in PHR puts text in the bar.
 *  Bootstrap 3's 12px/20px type on .progress-bar would therefore be dead here.
 */
.progress {
  height: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* Bootstrap 5 renamed this to .progress-bar-striped. */
.progress-striped .progress-bar {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

/* Bootstrap 5 expects .bg-success on the bar instead. */
.progress-bar-success {
  background-color: #5cb85c;
}

/* Bootstrap 5 replaced these with .ratio and .ratio-16x9. */
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}