/* =====================================================================
   Bootstrap 3 -> 5 Compatibility Shim
   ---------------------------------------------------------------------
   The application markup (250+ .aspx/.master pages) was authored for
   Bootstrap 3.x. After upgrading the library to Bootstrap 5.3.3, several
   classes were RENAMED or REMOVED. Rewriting every page is high risk, so
   this stylesheet re-implements the removed/renamed Bootstrap 3 classes
   on top of Bootstrap 5 so existing markup keeps rendering.

   Load order: bootstrap.css (v5)  ->  THIS FILE  ->  theme css (style.css)
   so this overrides BS5 defaults but the custom theme can still win.
   ===================================================================== */

/* Keep Bootstrap 3's 14px base so text isn't enlarged by BS5's 16px default */
body { font-size: 14px; }

/* ------------------------------------------------------------------ */
/* GRID: BS5 dropped the -xs- infix (col-xs-6 -> col-6). Recreate it.  */
/* ------------------------------------------------------------------ */
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs {
  position: relative; width: 100%; flex: 0 0 auto;
}
.col-xs    { flex: 1 0 0%; width: auto; }
.col-xs-1  { width: 8.33333333%; }
.col-xs-2  { width: 16.66666667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.33333333%; }
.col-xs-5  { width: 41.66666667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.33333333%; }
.col-xs-8  { width: 66.66666667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-12 { width: 100%; }
.col-xs-offset-0  { margin-left: 0; }
.col-xs-offset-1  { margin-left: 8.33333333%; }
.col-xs-offset-2  { margin-left: 16.66666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.33333333%; }
.col-xs-offset-5  { margin-left: 41.66666667%; }
.col-xs-offset-6  { margin-left: 50%; }
.col-xs-offset-7  { margin-left: 58.33333333%; }
.col-xs-offset-8  { margin-left: 66.66666667%; }
.col-xs-offset-9  { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }

/* ------------------------------------------------------------------ */
/* GRID COLUMNS WRAPPED OUTSIDE A FLEX .row                             */
/* In BS3 .col-* FLOATED, so columns laid out horizontally inside ANY    */
/* parent. In BS5 .col-* are flex items that only flow horizontally when */
/* their DIRECT parent is the flex .row; otherwise they STACK. This bites */
/* very common ASP.NET shapes: a classed .col-lg-12 wrapping inner cols  */
/* (col-in-col, no inner .row), an <asp:UpdatePanel>/<asp:Panel> div     */
/* around the columns, a <div id="row"> (id, not class), or two nested   */
/* wrappers. Reproduce BS3 by making ANY direct parent of grid columns a */
/* flex-wrap row. .row already is flex (harmless re-declare); elements    */
/* that don't directly contain a column are not matched, so ordinary     */
/* layout is untouched.                                                  */
/* ------------------------------------------------------------------ */
div:has(> [class*="col-xs-"]),
div:has(> [class*="col-sm-"]),
div:has(> [class*="col-md-"]),
div:has(> [class*="col-lg-"]) { display: flex; flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/* The rule above flexes a wrapper so its INNER cols flow, but a class-  */
/* less <asp:UpdatePanel>/<asp:Panel> <div> that sits DIRECTLY in a .row */
/* and holds a SINGLE column is itself a flex item with no col width —   */
/* so that column collapses to content width and the row misaligns (e.g. */
/* an UpdatePanel-wrapped col beside plain cols). Dissolve the wrapper's  */
/* box with display:contents so the inner column becomes a direct flex    */
/* child of the .row and gets its proper NN% basis. The element stays in  */
/* the DOM, so UpdatePanel async partial-updates keep working.            */
/* ------------------------------------------------------------------ */
.row > div:not([class]):has(> [class*="col-"]:only-child) { display: contents; }

/* ------------------------------------------------------------------ */
/* PANELS  (BS5 replaced .panel 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,.05); }
.panel-body { padding: 15px; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent;
  border-top-left-radius: 3px; border-top-right-radius: 3px; }
.panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; }
.panel-title > a { color: inherit; text-decoration: none; }
.panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd;
  border-bottom-left-radius: 3px; border-bottom-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; }
.panel-primary { border-color: #337ab7; }
.panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.panel-success { border-color: #d6e9c6; }
.panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.panel-info { border-color: #bce8f1; }
.panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.panel-warning { border-color: #faebcc; }
.panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.panel-danger { border-color: #ebccd1; }
.panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

/* ------------------------------------------------------------------ */
/* WELLS (removed in BS4+)                                             */
/* ------------------------------------------------------------------ */
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5;
  border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); }
.well-sm { padding: 9px; border-radius: 3px; }
.well-lg { padding: 24px; border-radius: 6px; }

/* ------------------------------------------------------------------ */
/* BUTTONS  (.btn-default and .btn-xs removed in BS5)                  */
/* ------------------------------------------------------------------ */
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
.btn-default:hover, .btn-default:focus, .btn-default:active { color: #333; background-color: #e6e6e6; border-color: #adadad; }
.btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
/* legacy ".btn-outline" (theme) -> behave like a normal coloured button */
.btn-outline { background-image: none; }

/* ------------------------------------------------------------------ */
/* LABELS  (BS5 renamed .label -> .badge)                             */
/* ------------------------------------------------------------------ */
.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700;
  line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; }
.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info    { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger  { background-color: #d9534f; }
a.label:hover, a.label:focus { color: #fff; text-decoration: none; cursor: pointer; }

/* ------------------------------------------------------------------ */
/* FORMS  (.form-group, .control-label, .help-block, validation states */
/*         and .input-group-addon were removed/renamed in BS5)         */
/* ------------------------------------------------------------------ */
.form-group { margin-bottom: 15px; }
/* BS5 enlarged form controls (1rem/16px font, .375rem/.75rem padding,
   line-height 1.5 => ~38px tall). The BS3-designed forms assume the smaller
   BS3 metrics (14px, 34px tall); the bigger BS5 size makes dense grids of
   textboxes/dropdowns misalign. Restore BS3 sizing globally. */
.form-control, .form-select {
  height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143;
  border-radius: 4px;
}

textarea.form-control {
    height: auto;
    padding: 5px 12px !important;
    line-height: 18px !important;    
}

/* let textareas grow */
select.form-control[multiple], select.form-control[size] { height: auto; }
.input-group .form-control, .input-group .form-select { height: 34px; }
.control-label { margin-bottom: 5px; font-weight: 700; }
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }
.has-error .form-control { border-color: #a94442; }
.has-error .control-label, .has-error .help-block, .has-error .checkbox, .has-error .radio { color: #a94442; }
.has-success .form-control { border-color: #3c763d; }
.has-success .control-label { color: #3c763d; }
.has-warning .form-control { border-color: #8a6d3b; }
.has-warning .control-label { color: #8a6d3b; }
.input-group-addon { padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1;
  color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc;
  border-radius: 4px; display: flex; align-items: center; }
.input-sm { min-height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 3px; }
.input-lg { min-height: 46px; padding: 10px 16px; font-size: 18px; border-radius: 6px; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; }
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }

/* ------------------------------------------------------------------ */
/* CLOSE BUTTON & MODAL HEADER                                         */
/* BS5 replaced text "x" .close with the icon-only .btn-close.         */
/* Existing markup uses <button class="close">&times;</button> with    */
/* the close BEFORE the title, so keep the BS3 block/float layout.     */
/* ------------------------------------------------------------------ */
.close { float: right; padding: 0; font-size: 21px; font-weight: 700; line-height: 1;
  color: #000; text-shadow: 0 1px 0 #fff; background: transparent; border: 0;
  opacity: .4; cursor: pointer; }
.close:hover, .close:focus { color: #000; opacity: .8; }
.modal-header {
    display: block;
    padding: 5px 15px !important; /* reduce top/bottom space */
    margin: 0 !important;
}
.modal-header .close { margin-top: -2px; }
/* BS3 sized modals via inline width:X% on .modal-dialog; BS5 caps that with
   max-width:500px, silently shrinking every wide modal (patient search 80%,
   others 40/50/70%) and making their grids spill. Drop the cap so the existing
   inline widths take effect again. Centering via BS5 margin:auto is preserved. */
.modal-dialog { max-width: none; }

/* ------------------------------------------------------------------ */
/* DROPDOWNS - old "<ul class=dropdown-menu><li><a>" markup            */
/* (BS5 expects <a class="dropdown-item">). Toggling still works via   */
/* data-bs-toggle; this only restores the item styling.                */
/* ------------------------------------------------------------------ */
.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: 400;
  line-height: 1.42857143; color: #333; white-space: nowrap; text-decoration: none; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; background-color: #f5f5f5; }
.dropdown-menu .divider, .dropdown-menu li.divider { height: 1px; margin: 9px 0; overflow: hidden;
  background-color: #e5e5e5; list-style: 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; }

/* ------------------------------------------------------------------ */
/* NAV / TABS / PILLS - old "<ul class=nav><li><a>" markup             */
/* (BS5 expects .nav-item/.nav-link)                                   */
/* ------------------------------------------------------------------ */
/* BS5 made .nav `display:flex`. Two BS3 navs need to be a BLOCK vertical list:
   the sidebar menu (#side-menu + its .nav-second-level submenus) and the navbar
   top-links (.navbar-top-links: hospital-name marquee stacked above the
   user/buttons). Without block they flow horizontally / overlap. Scope it to
   these two so .nav-tabs / .nav-pills keep their (flex) horizontal layout. */
/* NOTE: do NOT force #side-menu .nav-second-level to display:block — those
   submenus are metisMenu collapse panels (.collapse / .collapse.in) and must
   stay hidden until expanded. Only the top-level lists need block. */
#side-menu, .navbar-top-links { display: block; margin-bottom: 0; padding-left: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; text-decoration: none; }
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; }
.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-pills > li { float: left; }
.nav-pills > li > a { border-radius: 4px; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { color: #fff; background-color: #337ab7; }

/* ------------------------------------------------------------------ */
/* IMAGES (renamed/removed)                                            */
/* ------------------------------------------------------------------ */
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-rounded { border-radius: 6px; }
.img-circle { border-radius: 50%; }
.img-thumbnail { padding: 4px; line-height: 1.42857143; background-color: #fff;
  border: 1px solid #ddd; border-radius: 4px; max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ */
/* TABLES (.table-condensed -> .table-sm)                              */
/* ------------------------------------------------------------------ */
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td { padding: 5px; }

/* ------------------------------------------------------------------ */
/* UTILITIES renamed/removed in BS5                                    */
/* ------------------------------------------------------------------ */
.pull-left  { float: left !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.text-left  { text-align: left !important; }
.text-right { text-align: right !important; }
.hidden { display: none !important; }
.show   { display: block !important; }
.hide   { display: none !important; }
.invisible { visibility: hidden; }

/* ------------------------------------------------------------------ */
/* NAVBAR - BS5 renamed navbar-fixed-top -> fixed-top and removed      */
/* navbar-default / navbar-right / navbar-toggle. The custom theme     */
/* (style.css) styles most of the bar; these restore positioning.     */
/* ------------------------------------------------------------------ */
.navbar-fixed-top    { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
.navbar-fixed-bottom { position: fixed; bottom: 0; right: 0; left: 0; z-index: 1030; }
.navbar-static-top   { z-index: 1000; }
.navbar-right { float: right !important; margin-right: 0; }
.navbar-left  { float: left !important; }
.navbar-toggle { position: relative; float: right; padding: 9px 10px; margin: 8px;
  background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; }
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background-color: #888; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
/* BS3 hid the hamburger toggle on desktop (>=768px) - the side menu is shown
   directly there, so the toggle is only needed to collapse it on small screens.
   This rule was lost in the BS3->BS5 migration, leaving the toggle visible in
   the navbar header row and adding height. Restore it. */
@media (min-width: 768px) { .navbar-toggle { display: none !important; } }
.navbar-brand { float: left; height: 50px; padding: 15px; font-size: 18px; line-height: 20px; }
.navbar-nav > li { float: left; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* BS3 responsive visibility utilities */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767px)  { .visible-xs { 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; } }

/* ------------------------------------------------------------------ */
/* PAGE HEADER (removed in BS4+). 166 pages open with                  */
/* <div class="page-header"><h_>Title</h_></div>. Restore BS3 styling. */
/* ------------------------------------------------------------------ */
.page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee; }
.page-header:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* FADE / TAB-PANE / COLLAPSE "shown" state.                          */
/* BS3 used ".in" to mark a faded element as visible (opacity:1);      */
/* BS5 renamed it to ".show". Existing markup still ships the default  */
/* tab as <div class="tab-pane fade in active"> and metisMenu toggles  */
/* "ul.in", so without this the default tab content stays at opacity:0 */
/* (invisible). Treat ".in" as an alias of BS5's ".show".              */
/* ------------------------------------------------------------------ */
.fade.in { opacity: 1; }
.collapse.in { display: block; }
tr.collapse.in { display: table-row; }
tbody.collapse.in { display: table-row-group; }

/* ------------------------------------------------------------------ */
/* WIDGETS IN INACTIVE TABS (Syncfusion ej:Grid, charts, schedulers).  */
/* A widget built while its tab pane is display:none measures 0 width  */
/* and renders collapsed to ~2px; it CANNOT recover afterwards         */
/* (refreshContent / re-create reuse the cached 0). Fix at the source: */
/* keep every pane laid out (display:block) so widgets always build     */
/* against the pane's REAL width at page load; hide the inactive panes  */
/* with height:0 + overflow:hidden instead of display:none, and give    */
/* the active pane its normal height/overflow back. Plain content tabs  */
/* are visually unchanged (inactive = 0-height, clipped, opacity 0).    */
/* ------------------------------------------------------------------ */
.tab-content > .tab-pane { display: block !important; height: 0; overflow: hidden; }
.tab-content > .tab-pane.active { height: auto; overflow: visible; }

/* ------------------------------------------------------------------ */
/* GRID OFFSETS on sm/md/lg (BS5 renamed col-md-offset-N -> offset-md-N */
/* and gates them by breakpoint). The col-xs-offset block above covers */
/* xs (all widths); these restore the responsive breakpoint offsets,   */
/* e.g. the centred login / registration cards using col-md-offset-4.  */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .col-sm-offset-0  { margin-left: 0; }
  .col-sm-offset-1  { margin-left: 8.33333333%; }
  .col-sm-offset-2  { margin-left: 16.66666667%; }
  .col-sm-offset-3  { margin-left: 25%; }
  .col-sm-offset-4  { margin-left: 33.33333333%; }
  .col-sm-offset-5  { margin-left: 41.66666667%; }
  .col-sm-offset-6  { margin-left: 50%; }
  .col-sm-offset-7  { margin-left: 58.33333333%; }
  .col-sm-offset-8  { margin-left: 66.66666667%; }
  .col-sm-offset-9  { margin-left: 75%; }
  .col-sm-offset-10 { margin-left: 83.33333333%; }
  .col-sm-offset-11 { margin-left: 91.66666667%; }
}
@media (min-width: 992px) {
  .col-md-offset-0  { margin-left: 0; }
  .col-md-offset-1  { margin-left: 8.33333333%; }
  .col-md-offset-2  { margin-left: 16.66666667%; }
  .col-md-offset-3  { margin-left: 25%; }
  .col-md-offset-4  { margin-left: 33.33333333%; }
  .col-md-offset-5  { margin-left: 41.66666667%; }
  .col-md-offset-6  { margin-left: 50%; }
  .col-md-offset-7  { margin-left: 58.33333333%; }
  .col-md-offset-8  { margin-left: 66.66666667%; }
  .col-md-offset-9  { margin-left: 75%; }
  .col-md-offset-10 { margin-left: 83.33333333%; }
  .col-md-offset-11 { margin-left: 91.66666667%; }
}
@media (min-width: 1200px) {
  .col-lg-offset-0  { margin-left: 0; }
  .col-lg-offset-1  { margin-left: 8.33333333%; }
  .col-lg-offset-2  { margin-left: 16.66666667%; }
  .col-lg-offset-3  { margin-left: 25%; }
  .col-lg-offset-4  { margin-left: 33.33333333%; }
  .col-lg-offset-5  { margin-left: 41.66666667%; }
  .col-lg-offset-6  { margin-left: 50%; }
  .col-lg-offset-7  { margin-left: 58.33333333%; }
  .col-lg-offset-8  { margin-left: 66.66666667%; }
  .col-lg-offset-9  { margin-left: 75%; }
  .col-lg-offset-10 { margin-left: 83.33333333%; }
  .col-lg-offset-11 { margin-left: 91.66666667%; }
}