/*!
 * bs5-bs3-mobile.css - navbar Bootstrap 3 untuk halaman v2 mobile yang disajikan dengan Bootstrap 5.
 * Susunan muat: bootstrap5 -> bs5-bs3-compat.css -> fail ini -> custom/theme.css
 * Peraturan navbar dijana daripada libraries_mobile/bootstrap-3.3.6/dist/css/bootstrap-custom.css (warna MBSJ),
 * dengan .open (BS3, pada <li>) dipetakan kepada .show (BS5, pada pencetus dan menu) dan .in kepada .show.
 */
/* Batalkan susun atur flex navbar BS5 supaya peraturan float BS3 di bawah berkuat kuasa */
.navbar { display: block; flex-wrap: nowrap; align-items: normal; justify-content: normal; padding: 0; }
.navbar > .container, .navbar > .container-fluid { display: block; flex-wrap: nowrap; align-items: normal; justify-content: normal; }
.navbar-brand { margin-right: 0; white-space: normal; }
.navbar-nav { display: block; flex-direction: row; }
.navbar-nav .dropdown-menu { position: absolute; float: left; }
.navbar-collapse { flex-basis: auto; flex-grow: 0; align-items: normal; }
/* Blok tersuai bukan navbar dalam bootstrap-custom.css */
.nav-pills > li { float: left; margin-right: 2px; }
.nav-pills > li > a { background-color: #cccccc; }
.nav-pills > li + li { margin-left: 0; }
@media (max-width: 767px) { .dropdown-header { color: #294D8B; } }
/* Komponen BS3 yang digayakan berbeza oleh BS5 */
.dropdown-toggle::after { display: none; }                      /* BS3 guna <b class="caret"> dalam markup */
.dropdown-menu { min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
.alert-light { --bs-alert-color: inherit; --bs-alert-bg: transparent; --bs-alert-border-color: transparent; --bs-alert-link-color: inherit; }   /* tiada dalam BS3 */
body.modal-open { overflow: auto !important; }                  /* theme.css: halaman kekal boleh diskrol; BS5 set overflow:hidden sebaris */
.form-control { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
.form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }
.row > .container, .row > .container-fluid { --bs-gutter-x: 30px; }   /* BS3 .container padding 15px walaupun anak .row */
.text-muted { color: #777 !important; }
p { margin: 0 0 10px; }
.text-primary { color: #337ab7 !important; } a.text-primary:hover, a.text-primary:focus { color: #286090 !important; }
.text-success { color: #3c763d !important; } a.text-success:hover, a.text-success:focus { color: #2b542c !important; }
.text-info { color: #31708f !important; } a.text-info:hover, a.text-info:focus { color: #245269 !important; }
.text-warning { color: #8a6d3b !important; } a.text-warning:hover, a.text-warning:focus { color: #66512c !important; }
.text-danger { color: #a94442 !important; } a.text-danger:hover, a.text-danger:focus { color: #843534 !important; }
.bg-primary { color: #fff; background-color: #337ab7 !important; }
.bg-success { background-color: #dff0d8 !important; } .bg-info { background-color: #d9edf7 !important; }
.bg-warning { background-color: #fcf8e3 !important; } .bg-danger { background-color: #f2dede !important; }
small, .small { font-size: 85%; }
@media screen and (max-width: 767px) {                          /* BS3: jadual responsif tidak membalut teks sel pada skrin kecil */
  .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; }
  .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; }
  .table-responsive > .table-bordered { border: 0; }
  .table-responsive > .table-bordered > thead > tr > th:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child { border-left: 0; }
  .table-responsive > .table-bordered > thead > tr > th:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child { border-right: 0; }
  .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > td { border-bottom: 0; }
}
.modal-backdrop { width: auto; height: auto; right: 0; bottom: 0; }   /* BS3 top/right/bottom/left 0: tidak menutup bar skrol (body.modal-open overflow auto) */
@media (min-width: 768px) { .container { width: 750px; } }       /* BS3 lebar tetap (bukan max-width): kandungan boleh melimpah induk sempit */
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
table { border-collapse: collapse; border-spacing: 0; }         /* normalize.css BS3; BS5 tidak menetapkan semula border-spacing (atribut cellspacing) */
.modal-header .close:focus { outline: 0; }                     /* BS3 memfokus elemen .modal; FocusTrap BS5 memfokus butang pertama */
/* Peraturan navbar BS3 (dijana) */
@media print {
  .navbar { display: none; }
}
.glyphicon-barcode:before { content: "\e040"; }
.dropup .caret, .navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px dashed; border-bottom: 4px solid \9; }
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 2px; }
@media (min-width: 768px) {
  .navbar-right .dropdown-menu { right: 0; left: auto; }
  .navbar-right .dropdown-menu-left { right: auto; left: 0; }
}
.navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent; }
@media (min-width: 768px) {
  .navbar { border-radius: 4px; }
  .navbar-header { float: left; }
}
.navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.navbar-collapse.show { overflow-y: auto; }
@media (min-width: 768px) {
  .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; }
  .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; }
  .navbar-collapse.show { overflow-y: visible; }
  .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-right: 0; padding-left: 0; }
}
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 340px; }
@media (max-device-width: 480px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 200px; }
}
.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; }
}
.navbar-static-top { z-index: 1000; border-width: 0 0 1px; }
@media (min-width: 768px) {
  .navbar-static-top { border-radius: 0; }
}
.navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; }
@media (min-width: 768px) {
  .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; }
}
.navbar-fixed-top { top: 0; border-width: 0 0 1px; }
.navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0; }
.navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px; }
.navbar-brand:hover, .navbar-brand:focus { text-decoration: none; }
.navbar-brand > img { display: block; }
@media (min-width: 768px) {
  .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: -15px; }
}
.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; }
.navbar-toggle:focus { outline: 0; }
.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; }
}
.navbar-nav { margin: 7.5px -15px; }
.navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; }
@media (max-width: 767px) {
  .navbar-nav .dropdown-menu.show { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; }
  .navbar-nav .dropdown-menu.show > li > a, .navbar-nav .dropdown-menu.show .dropdown-header { padding: 5px 15px 5px 25px; }
  .navbar-nav .dropdown-menu.show > li > a { line-height: 20px; }
  .navbar-nav .dropdown-menu.show > li > a:hover, .navbar-nav .dropdown-menu.show > li > a:focus { background-image: none; }
}
@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-form { padding: 10px 15px; margin-top: 8px; margin-right: -15px; margin-bottom: 8px; margin-left: -15px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1); }
@media (min-width: 768px) {
  .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
  .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; }
  .navbar-form .form-control-static { display: inline-block; }
  .navbar-form .input-group { display: inline-table; vertical-align: middle; }
  .navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn, .navbar-form .input-group .form-control { width: auto; }
  .navbar-form .input-group > .form-control { width: 100%; }
  .navbar-form .control-label { margin-bottom: 0; vertical-align: middle; }
  .navbar-form .radio, .navbar-form .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; }
  .navbar-form .radio label, .navbar-form .checkbox label { padding-left: 0; }
  .navbar-form .radio input[type="radio"], .navbar-form .checkbox input[type="checkbox"] { position: relative; margin-left: 0; }
  .navbar-form .has-feedback .form-control-feedback { top: 0; }
}
@media (max-width: 767px) {
  .navbar-form .form-group { margin-bottom: 5px; }
  .navbar-form .form-group:last-child { margin-bottom: 0; }
}
@media (min-width: 768px) {
  .navbar-form { width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; }
}
.navbar-nav > li > .dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { margin-bottom: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.navbar-btn { margin-top: 8px; margin-bottom: 8px; }
.navbar-btn.btn-sm { margin-top: 10px; margin-bottom: 10px; }
.navbar-btn.btn-xs { margin-top: 14px; margin-bottom: 14px; }
.navbar-text { margin-top: 15px; margin-bottom: 15px; }
@media (min-width: 768px) {
  .navbar-text { float: left; margin-right: 15px; margin-left: 15px; }
  .navbar-left { float: left !important; }
  .navbar-right { float: right !important; margin-right: -15px; }
  .navbar-right ~ .navbar-right { margin-right: 0; }
}
.navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; }
.navbar-default .navbar-brand { color: #777; }
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5e5e5e; background-color: transparent; }
.navbar-default .navbar-text { color: #777; }
.navbar-default .navbar-nav > li > a { color: #777; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; background-color: transparent; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; }
.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus { color: #ccc; 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, .navbar-default .navbar-form { border-color: #e7e7e7; }
.navbar-default .navbar-nav > li > a.show, .navbar-default .navbar-nav > li > a.show:hover, .navbar-default .navbar-nav > li > a.show:focus { color: #555; background-color: #e7e7e7; }
@media (max-width: 767px) {
  .navbar-default .navbar-nav .dropdown-menu.show > li > a { color: #777; }
  .navbar-default .navbar-nav .dropdown-menu.show > li > a:hover, .navbar-default .navbar-nav .dropdown-menu.show > li > a:focus { color: #333; background-color: transparent; }
  .navbar-default .navbar-nav .dropdown-menu.show > .active > a, .navbar-default .navbar-nav .dropdown-menu.show > .active > a:hover, .navbar-default .navbar-nav .dropdown-menu.show > .active > a:focus { color: #555; background-color: #e7e7e7; }
  .navbar-default .navbar-nav .dropdown-menu.show > .disabled > a, .navbar-default .navbar-nav .dropdown-menu.show > .disabled > a:hover, .navbar-default .navbar-nav .dropdown-menu.show > .disabled > a:focus { color: #ccc; background-color: transparent; }
}
.navbar-default .navbar-link { color: #777; }
.navbar-default .navbar-link:hover { color: #333; }
.navbar-default .btn-link { color: #777; }
.navbar-default .btn-link:hover, .navbar-default .btn-link:focus { color: #333; }
.navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:focus { color: #ccc; }
.navbar-inverse { background-color: #337AB7; border-color: #337AB7; border:none; box-shadow:0px 5px 5px #888888; }
.navbar-inverse .navbar-brand { color: #fff; padding-left:60px; }
.navbar-inverse .navbar-brand { background-image: url(../images/mpsj/logo.png); background-repeat: no-repeat; background-position:15px 50%; }
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { color: #fff; background-color: transparent; }
.navbar-inverse .navbar-text { color: #ddd; }
.navbar-inverse .navbar-nav > li > a { color: #ddd; }
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #fff; background-color: transparent; }
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #fff; background-color: #0C1B6E; }
.navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus { color: #444; background-color: transparent; }
.navbar-inverse .navbar-toggle { border-color: #0C1B6E; background-color: #0C1B6E; }
.navbar-inverse .navbar-toggle .icon-bar { background-color: #fff; }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #0C1B6E; }
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #0C1B6E; }
.navbar-inverse .navbar-nav > li > a.show, .navbar-inverse .navbar-nav > li > a.show:hover, .navbar-inverse .navbar-nav > li > a.show:focus { color: #fff; background-color: #294D8B; }
.navbar-inverse .navbar-nav .dropdown-menu.show > li > a:hover, .navbar-inverse .navbar-nav .dropdown-menu.show > li > a:focus { color: #fff; background-color: #294D8B; }
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .dropdown-menu.show > .dropdown-header { border-color: #294D8B; }
  .navbar-inverse .navbar-nav .dropdown-menu.show .divider { background-color: #294D8B; }
  .navbar-inverse .navbar-nav .dropdown-menu.show > li > a { color: #ddd; }
  .navbar-inverse .navbar-nav .dropdown-menu.show > li > a:hover, .navbar-inverse .navbar-nav .dropdown-menu.show > li > a:focus { color: #fff; background-color: transparent; }
  .navbar-inverse .navbar-nav .dropdown-menu.show > .active > a, .navbar-inverse .navbar-nav .dropdown-menu.show > .active > a:hover, .navbar-inverse .navbar-nav .dropdown-menu.show > .active > a:focus { color: #fff; background-color: #294D8B; }
  .navbar-inverse .navbar-nav .dropdown-menu.show > .disabled > a, .navbar-inverse .navbar-nav .dropdown-menu.show > .disabled > a:hover, .navbar-inverse .navbar-nav .dropdown-menu.show > .disabled > a:focus { color: #444; background-color: transparent; }
}
.navbar-inverse .navbar-link { color: #ddd; }
.navbar-inverse .navbar-link:hover { color: #fff; }
.navbar-inverse .btn-link { color: #ddd; }
.navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { color: #fff; }
.navbar-inverse .btn-link[disabled]:hover, fieldset[disabled] .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:focus { color: #444; }