@media (min-width: 768px) {
  html {
    font-size: 12px;
  }
}

html,
body {
  height: 100%;
  font-size: 12px !important;
  color: #212529;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body>.container-fluid {
  flex: 1;
}

.mb-5 {
  margin-bottom: 5rem !important;
}

.table-striped>tbody>tr:hover>* {
  --bs-table-color-state: var(--bs-table-hover-color) !important;
  --bs-table-bg-state: #82DED6 !important;
}

.tablesorter-filter {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.tablesorter-filter.disabled {
  visibility: hidden !important;
}

.fa-duration-1 {
  animation-iteration-count: 1;
}

.fa-duration-10 {
  animation-iteration-count: 10;
}

.footer {
  margin-top: auto;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
  text-align: start;
}

.twitter-typeahead {
  width: 100%;
}

.modal-dialog-scrollable {
  max-height: 90vh !important;
}

/* A dialog 90% of the viewport wide, for the claim detail modal. Wider than modal-xl's 1140px
   because the service line table runs to fourteen columns and a remit is read across rather than
   down - at modal-xl anything past a line or two scrolled sideways inside the dialog. Used in
   place of modal-xl rather than over it, so the width does not rest on which stylesheet loads
   last. Bootstrap only reads --bs-modal-width from 576px up; below that the dialog is already
   the full width less its margin */
.modal-90w {
  --bs-modal-width: 90vw;
}

.tt-menu {
  width: 100%;
  background-color: #f8f9fa;
  font-family: "Lexend Deca";
  font-size: 1em;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  overflow-y: auto;
  z-index: 1051;
}

.tt-suggestion {
  border-top: dashed;
  border-top-width: .5px;
  margin: 0 0 0 0;
  padding: 5px 5px 5px 5px;
  white-space: nowrap;
  cursor: pointer;
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
  .tt-suggestion {
    border-top: dashed;
    border-top-width: .5px;
    margin: 0 0 0 0;
    padding: 5px 5px 5px 5px;
    white-space: nowrap;
  }
}

.tt-suggestion:nth-child(2n+1) {
  background-color: #ebedf1;
}

.tt-highlight {
  font-weight: bold;
}

/* typeahead.js writes background-color: transparent inline on the input it wraps so the hint
   behind it shows through, which also hides the disabled grey form-control would otherwise give */
.twitter-typeahead .tt-input:disabled {
  background-color: var(--bs-secondary-bg) !important;
}

.input-group>.twitter-typeahead {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* New Request's left-hand summary. It shows the request type, patient and each chosen provider
   and facility as fs-4 badges, and .badge never wraps, so one long name widened the table past
   col-4 - in a window narrower than full screen its rows ran across the result table on the
   right and took the clicks meant for that table's Select buttons. The badges wrap here, an
   unbroken string may break anywhere, and the column clips whatever is still too wide rather
   than spill into its neighbour. clip rather than auto: auto would make the card a scroll box
   and cut off the specialty typeahead menu that drops out of the provider search */
.auth-request-summary {
  overflow-x: clip;
}

.auth-request-summary .badge {
  white-space: normal;
  text-align: start;
}

.auth-request-summary td {
  overflow-wrap: anywhere;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Table cell watermarks — one class per -small.png image */
[class^="wm-"],
[class*=" wm-"] {
  position: relative;
}

[class^="wm-"]::before,
[class*=" wm-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.15;
  pointer-events: none;
}

.wm-acp-hmoi::before {
  background-image: url('../images/ACP-HMOI-small.png');
}

.wm-bcp::before {
  background-image: url('../images/BCP-small.png');
}

.wm-chp-hmoi::before {
  background-image: url('../images/CHP-HMOI-small.png');
}

.wm-gh-bh::before {
  background-image: url('../images/GH-BH-small.png');
}

.wm-hshs-hmoi::before {
  background-image: url('../images/HSHS-HMOI-small.png');
}

.wm-ipg-hmoi::before {
  background-image: url('../images/IPG-HMOI-small.png');
}

.wm-nmpn-hmoi::before {
  background-image: url('../images/NMPN-HMOI-small.png');
}

.wm-npa-hmoi::before {
  background-image: url('../images/NPA-HMOI-small.png');
}

.wm-path::before {
  background-image: url('../images/PATH-small.png');
}

.wm-pcn-hmoi::before {
  background-image: url('../images/PCN-HMOI-small.png');
}

.wm-php-hmoi::before {
  background-image: url('../images/PHP-HMOI-small.png');
}

.wm-ucmpp-hmoi::before {
  background-image: url('../images/UCMPP-HMOI-small.png');
}

.wm-vpn-hmoi::before {
  background-image: url('../images/VPN-HMOI-small.png');
}

/* Full-page wait - markup in _LoadingOverlay.cshtml, raised by loading-overlay.js. Above the
   modal layer (1055) and the typeahead menu (1051), since it has to cover whatever the page was
   showing. d-none does the hiding, so display here only lays the panel out once it is shown */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.loading-overlay-panel {
  min-width: 14rem;
}

/* The library viewer - markup in _LibraryViewer.cshtml, driven by library-viewer.js. The frame and
   the video fill the dialog's width and most of the viewport's height, since a PDF in a letterbox
   is a PDF nobody reads. Above the modal layer (1055) so that on Account Search, where it opens
   over the account modal, it is the one on top; the second backdrop Bootstrap appends is lifted
   with it, so the account modal dims behind the viewer rather than showing through beside it */
.modal.library-viewer {
  z-index: 1090;
}

.modal-backdrop ~ .modal-backdrop {
  z-index: 1085;
}

/* The wait sits over the stage rather than in place of the element, so the element loads at full
   size from the moment it is added. The stage keeps a little height of its own for the spinner to
   sit in before there is an element to cover */
.library-viewer-stage {
  position: relative;
  min-height: 12rem;
}

.library-viewer-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.library-viewer-content iframe,
.library-viewer-content video {
  display: block;
  width: 100%;
  height: 78vh;
  border: 0;
}

.library-viewer-content video {
  background-color: #000;
}