/*
 * Bootstrap 3 → 5 compatibility layer for the Metronic theme used by this app.
 * Load order: bootstrap-5.3.8.min.css → this file → Metronic CSS (style-metronic.css, style.css ...).
 * It restores the Bootstrap 3 base metrics the theme was written against and
 * re-provides the few Bootstrap 3 classes that still appear in the markup.
 */
html { font-size: 16px; }
body { font-size: 14px; line-height: 1.428571429; color: #333; background-color: #fff; }
a { color: #428bca; text-decoration: none; }
a:hover, a:focus { color: #2a6496; text-decoration: underline; }
p { margin: 0 0 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; }
ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; }
address { margin-bottom: 20px; line-height: 1.428571429; }
label { display: inline-block; margin-bottom: 5px; font-weight: bold; }
th { text-align: left; }
hr { margin: 20px 0; border: 0; border-top: 1px solid #eee; opacity: 1; }
h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 24px; }
h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; }

/* Grid: Bootstrap 3 gutters (30px) and container widths */
.row { --bs-gutter-x: 30px; }
.container { padding-left: 15px; padding-right: 15px; }
@media (min-width: 576px) { .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; } }

/* Navbar: Bootstrap 3 block/float model that the Metronic header expects */
.navbar { display: block; position: relative; min-height: 50px; margin-bottom: 20px; padding: 0; border: 1px solid transparent; }
.navbar-fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; border-width: 0 0 1px; margin-bottom: 0; }
.navbar-brand { float: left; height: 50px; padding: 15px; margin-right: 0; font-size: 18px; line-height: 20px; white-space: normal; }
.nav { display: block; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav::after { content: ""; display: table; clear: both; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.navbar-nav { display: block; flex-direction: initial; 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; }
}
.navbar-toggle { position: relative; float: right; padding: 9px 10px; margin: 8px 15px 8px 0; background: transparent; border: 1px solid transparent; }
@media (min-width: 768px) { .navbar-toggle { display: none; } }
.navbar-collapse { flex-basis: auto; flex-grow: 0; }
.dropdown-toggle::after { display: none; }
.dropdown-menu { font-size: 14px; padding: 5px 0; margin: 2px 0 0; border-radius: 4px; min-width: 160px; }
.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; line-height: 1.428571429; color: #333; white-space: nowrap; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; }

/* Forms */
.form-group { margin-bottom: 15px; }
.form-control { height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555; border: 1px solid #ccc; border-radius: 4px; }
textarea.form-control { height: auto; }
select.form-control { appearance: auto; -webkit-appearance: menulist; -moz-appearance: menulist; }
.form-control:focus { box-shadow: none; }
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }
.form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.form-horizontal .form-group > [class*="col-"] { position: relative; width: 100%; min-height: 1px; padding-left: 15px; padding-right: 15px; }
@media (min-width: 992px) {
  .form-horizontal .form-group > .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .form-horizontal .form-group > .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .form-horizontal .form-group > .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .form-horizontal .form-group > .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .form-horizontal .form-group > .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  .form-horizontal .form-group > .col-lg-12 { flex: 0 0 auto; width: 100%; }
  .form-horizontal .control-label { text-align: right; padding-top: 7px; margin-bottom: 0; }
}

/* Buttons */
.btn { font-size: 14px; line-height: 1.428571429; padding: 6px 12px; border-radius: 4px; }
.btn-sm, .btn-xs { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-xs { padding: 1px 5px; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 5px; }

/* Tables: Bootstrap 3 colours instead of Bootstrap 5 tints */
.table { --bs-table-bg: transparent; --bs-table-striped-bg: #f9f9f9; --bs-table-hover-bg: #f5f5f5; --bs-table-border-color: #ddd; --bs-table-color: inherit; --bs-table-striped-color: inherit; --bs-table-hover-color: inherit; margin-bottom: 20px; vertical-align: top; }
.table > :not(caption) > * > * { padding: 8px; line-height: 1.428571429; }
.table > thead > tr > th { vertical-align: bottom; border-bottom-width: 2px; }
.table > :not(:first-child) { border-top: 0; }

/* Misc components removed in Bootstrap 5 */
.breadcrumb { display: block; padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; }
.breadcrumb > li { display: inline-block; }
.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); }
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.alert-dismissible .btn-close { padding: 17px 15px; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.pull-right { float: right !important; }
.collapse.in { display: block; }

/* Bootstrap 5 turns .navbar > .container into a flex row; the theme floats its children instead */
.navbar > .container, .navbar > .container-fluid { display: block; flex-wrap: initial; }
@media (min-width: 768px) { .navbar > .container .navbar-brand { margin-left: -15px; } }
/* Bootstrap 3 responsive images were block-level */
.img-fluid { display: block; }
/* Bootstrap 3 bordered tables: border on every cell rather than on rows */
.table-bordered { border: 1px solid #ddd; }
.table-bordered > :not(caption) > * { border-width: 0; }
.table-bordered > :not(caption) > * > * { border: 1px solid #ddd; }
.table-bordered > thead > tr > th { border-bottom-width: 2px; }
/* Bootstrap 3 kept responsive tables on one line per cell on phones (scroll sideways instead of wrapping) */
@media (max-width: 767px) {
  .table-responsive > .table { margin-bottom: 0; }
  .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td { white-space: nowrap; }
}
/* Bootstrap 5 makes navbar dropdowns static (collapsed navbar); Bootstrap 3 positioned them under the toggle */
.navbar-nav .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; }
.navbar-nav.pull-right > li > .dropdown-menu, .navbar-nav > li > .dropdown-menu.pull-right { right: 0; left: auto; }