/* =====================================================================================================
   Trip Manager · Planet UI  (restyle round, October 2026)
   Marcus: "Let's do a UI clean sweep of Trip Manager ... use the similar colours and style sheet that we
   have on the CRM, which we got from Monday ... let's make it look really pretty and really nice."

   One stylesheet, loaded last on every page (master/admin.Master, master/adminwithoutmenu.master and
   login.aspx), that lays the CRM's monday.com look over Trip Manager's own theme: Figtree, monday's
   palette (#0073ea blue, #323338 ink, #d0d4e4 lines), a light frame with the page on a white panel,
   pastel tabs, pastel status labels and buttons (22 Oct: "calmer pastel colours"), flat tables, 4 px / 8 px corners,
   and a faint wash on the reservation header and the open tab so the white boxes stand out.

   Looks only. No page, field, button or script changes what it does, and the layout stays where it was.
   To go back to the old look, take the <link> to this file (and to planet-ui.js) out of the two master
   pages and login.aspx, or put back their .PRE-R188.bak copies (UNDO-R188.command does it on the server).
   ===================================================================================================== */

:root {
  --pui-primary: #0073ea; --pui-primary-h: #0060b9; --pui-sel: #cce5ff; --pui-sel-h: #aad4ff;
  --pui-ink: #323338; --pui-ink-2: #676879; --pui-ink-3: #9699a6;
  --pui-bg: #f6f7fb; --pui-bg-2: #eceff8; --pui-line: #d0d4e4; --pui-line-2: #c3c6d4; --pui-line-3: #e6e9ef;
  --pui-hover: #f5f6f8;
  --pui-frame: #eceff8; --pui-frame-h: rgba(103, 104, 121, .1);
  --pui-green: #00c875; --pui-green-t: #00854d; --pui-orange: #fdab3d; --pui-orange-t: #b76e00;
  --pui-red: #e2445c; --pui-red-t: #d83a52; --pui-purple: #a25ddc; --pui-blue: #579bfc; --pui-dblue: #0086c0;
  --pui-lime: #9cd326; --pui-yellow: #ffcb00; --pui-sunset: #ff642e; --pui-grey: #c4c4c4; --pui-st-grey: #6b6f82;
  /* shades that keep white text readable (4.5:1 or better) */
  --pui-st-ok: #037f4c; --pui-st-bad: #d83a52; --pui-st-info: #0073ea; --pui-st-wait: #fdab3d; --pui-st-wait-ink: #3d2e00;
  /* pastel pairs (Marcus, 22 Oct: "calmer pastel colours" for statuses and buttons): a soft fill with a dark ink, all AA */
  --pui-pl-ok: #dcf5e8; --pui-pl-ok-ink: #0b6b40; --pui-pl-ok-edge: #a8dfc4;
  --pui-pl-bad: #ffe0e4; --pui-pl-bad-ink: #a8233a; --pui-pl-bad-edge: #f3b7bf;
  --pui-pl-wait: #fff3c4; --pui-pl-wait-ink: #6b4f00; --pui-pl-wait-edge: #efd98a;
  --pui-pl-no: #eceff8; --pui-pl-no-ink: #4f5468; --pui-pl-no-edge: #d0d4e4;
  --pui-pl-info: #e3efff; --pui-pl-info-ink: #1a53a8; --pui-pl-info-edge: #a9cdf7;
  --pui-r-card: 8px; --pui-r-ctl: 4px;
  --pui-sh-card: 0 1px 2px rgba(0, 0, 0, .04);
  --pui-sh-pop: 0 6px 20px rgba(0, 0, 0, .2);
  --pui-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --grp: #0073ea;
}

/* ---------------------------------------------------------------- base type ---- */
body {
  font-family: var(--pui-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pui-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--pui-font); color: var(--pui-ink); }
a { color: var(--pui-primary); }
a:hover, a:focus { color: var(--pui-primary-h); }
b, strong { font-weight: 600; }
hr { border-top-color: var(--pui-line-3); }
::selection { background: var(--pui-sel); }
.text-muted { color: var(--pui-ink-2); }

/* ------------------------------------------------- the frame: top bar + menu ---- */
.inner-wrapper { background: var(--pui-frame); }
.header {
  background: var(--pui-frame);
  border-top: 0;
  border-bottom: 0;
}
.header .logo { margin: 12px 0 0 20px; }
.header .logo img { height: 34px; }
.header .separator { display: none; }
.header .header-right { height: 60px; display: flex; align-items: center; padding-right: 20px; }
.header .userbox { margin: 0; }
.header .userbox .profile-info {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 4px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--pui-line-3);
}
.header .userbox .profile-info::before {
  content: "\f007";
  font-family: FontAwesome;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pui-primary);
  color: #fff;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.header .userbox .name { color: var(--pui-ink); font-size: 14px; line-height: 1.2; font-weight: 500; }

/* the menu down the left */
.sidebar-left { color: var(--pui-ink); background: var(--pui-frame); }
@media only screen and (min-width: 768px) {
  .sidebar-left { width: 204px; }
}
.sidebar-left .sidebar-header { color: var(--pui-ink-3); }
.sidebar-left .sidebar-header .sidebar-title {
  background: transparent;
  color: var(--pui-ink-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 16px 20px 8px;
}
.sidebar-left .sidebar-header .sidebar-toggle {
  top: 10px; right: 12px;
  width: 30px; height: 30px;
  background: transparent;
  border-radius: var(--pui-r-ctl);
}
.sidebar-left .sidebar-header .sidebar-toggle i { color: var(--pui-ink-3); font-size: 14px; line-height: 30px; }
.sidebar-left .sidebar-header .sidebar-toggle:hover { background: var(--pui-frame-h); }
.sidebar-left .sidebar-header .sidebar-toggle:hover i { color: var(--pui-ink); }
.sidebar-left .nano-content { outline: 0; }

ul.nav-main { padding: 2px 6px 18px; }
ul.nav-main > li { margin: 1px 0; }
ul.nav-main li a {
  font-size: 13.5px;
  color: var(--pui-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
ul.nav-main > li > a,
ul.nav-main li .nav-children li a {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  transition: background .12s ease, color .12s ease;
}
ul.nav-main > li > a { height: 36px; padding: 0 8px; gap: 8px; }
ul.nav-main li span { vertical-align: baseline; overflow: hidden; text-overflow: ellipsis; }
ul.nav-main li i { font-size: 15px; width: 18px; margin: 0; flex: none; text-align: center; color: var(--pui-ink-2); }
ul.nav-main > li > a:hover, ul.nav-main > li > a:focus,
ul.nav-main li .nav-children li a:hover, ul.nav-main li .nav-children li a:focus {
  background: var(--pui-frame-h);
  color: var(--pui-ink);
  text-decoration: none;
}
ul.nav-main li.nav-parent > a { padding-right: 22px; }
ul.nav-main li.nav-parent > a:after {
  right: 7px; top: 50%;
  padding: 0;
  line-height: 1;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--pui-ink-3);
}
ul.nav-main li.nav-parent.nav-expanded > a { font-weight: 600; }
ul.nav-main li .nav-children { box-shadow: none; padding: 2px 0 8px; margin: 0; }
ul.nav-main li .nav-children li { margin: 1px 0; }
ul.nav-main li .nav-children li a { height: 32px; padding: 0 8px 0 34px; font-size: 13px; }
ul.nav-main li .nav-children li a i { font-size: 13px; width: 16px; color: var(--pui-ink-3); }
ul.nav-main li .nav-children li a:after { content: none; }
/* the page you're on (planet-ui.js marks it) */
ul.nav-main > li.nav-active > a,
ul.nav-main li .nav-children li.nav-active > a,
ul.nav-main > li.nav-active > a:hover,
ul.nav-main li .nav-children li.nav-active > a:hover {
  background: var(--pui-sel);
  color: var(--pui-ink);
  box-shadow: none;
  font-weight: 500;
}
ul.nav-main li.nav-active > a i { color: var(--pui-primary); }
ul.nav-main li.active { background: transparent; }
.nav > li > a:hover, .nav > li > a:focus { background-color: transparent; }

/* phones: the logo bar and the menu keep the frame colour */
@media only screen and (max-width: 767px) {
  .header .logo-container {
    background: var(--pui-frame);
    border-top: 0;
    border-bottom: 1px solid var(--pui-line-3);
  }
  .header .header-right { background: var(--pui-frame); justify-content: flex-start; padding-left: 15px; }
  .header .userbox:after { display: none; }
  .header .toggle-sidebar-left { background: var(--pui-primary); top: 15px; }
  .sidebar-left { background: var(--pui-frame); }
  .header .userbox .name { max-width: none; }
}
html.mobile-device .sidebar-left { background: var(--pui-frame); }

/* ---------------------------------------------------- the page: a white panel ---- */
.content-body {
  background: #fff;
  border-top-left-radius: 16px;
  box-shadow: 0 0 0 1px var(--pui-line-3), 0 1px 3px rgba(0, 0, 0, .04);
  padding: 0 12px 32px;
}
.page-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  height: auto;
  margin: 0 0 14px;
  padding: 22px 15px 0;
}
.page-header h2 {
  color: var(--pui-ink);
  border: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.3;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--pui-line-3);
}
.page-header .right-wrapper { margin-top: -2px; }
.panel { background: transparent; }
.panel-body { background: transparent; box-shadow: none; border-radius: 0; padding: 0 15px 15px; }
.panel-body > .row { margin: 0; }

/* --------------------------------------------------------- cards (widgets) ---- */
.widget { margin-bottom: 20px; }
.widget .widget-header {
  background: #fff;
  filter: none;
  border: 1px solid var(--pui-line);
  border-bottom-color: var(--pui-line-3);
  border-radius: var(--pui-r-card) var(--pui-r-card) 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  padding: 6px 12px 6px 16px;
}
.widget .widget-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--pui-ink);
  text-shadow: none;
  line-height: 1.3;
  flex: 1 1 auto;
}
.widget .widget-header [class^="fa-"], .widget .widget-header [class*=" fa-"] { margin: 0; color: var(--grp); font-size: 16px; }
.widget .widget-header .btn, .widget .widget-header .pull-right { margin: 0; order: 2; }
.widget .widget-content {
  background: #fff;
  border: 1px solid var(--pui-line);
  border-radius: var(--pui-r-card);
  box-shadow: var(--pui-sh-card);
  padding: 18px 16px 14px;
}
.widget .widget-header + .widget-content { border-top: 0; border-radius: 0 0 var(--pui-r-card) var(--pui-r-card); }
.widget.widget-nopad .widget-content { padding: 6px 0; }
.widget.widget-plain .widget-content { background: transparent; border: 0; box-shadow: none; }
/* the wrapper around the reservation header is only a holder: no frame of its own */
.panel-body > .row > .widget-content.form-horizontal { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* the reservation / booking header block (it carries Bootstrap's alert-info): a white card with a blue bar */
.widget-content.alert-info {
  /* a faint blue wash fading left to right (22 Oct), so the white boxes stand out */
  background: linear-gradient(90deg, #e6f0ff 0%, #f4f8ff 45%, #fff 100%);
  color: var(--pui-ink);
  border: 1px solid var(--pui-line);
  border-left: 6px solid var(--pui-primary);
  border-radius: var(--pui-r-card);
}
/* its drop-downs sit in 2-column grid cells (136px inside): the full cell, 13px type and a slim chevron, so the longest
   choices ("Confirmation sent", "PENDING CLIENT DECISION") show whole, as they did in the old look (live check, 22 Oct) */
.widget-content.alert-info select { width: 100%; max-width: 100%; font-size: 13px; padding: 0 20px 0 8px; background-position: right 7px center; }
.alert-info { background: #eef5ff; border-color: #cfe3ff; color: #1f4e8c; border-radius: var(--pui-r-card); }

/* label + value lists */
.news-items li { border-bottom: 1px solid var(--pui-line-3); padding: 0 6px; }
.news-items > li { padding-top: 8px; padding-bottom: 8px; margin-bottom: 0; }
.news-items > li:last-child { border-bottom: 0; }
.news-items b { font-weight: 500; color: var(--pui-ink-2); }
.news-items span, .news-items li a:not(.btn) { color: var(--pui-ink); }
.alert-info .news-items > li > div { color: var(--pui-ink-2); font-size: 13px; }
.alert-info .news-items > li:first-child > div { color: var(--pui-ink); font-size: 14px; }
.alert-info .news-items > li:first-child > div > a:not(.btn) { color: var(--pui-primary); font-weight: 600; }
.alert-info .news-items span { font-size: 14px; }
.news-items li .fa-gbp { color: var(--pui-ink-3); }

/* a titled box (fieldset look) */
.block-header {
  border: 1px solid var(--pui-line);
  border-radius: var(--pui-r-card);
  padding: 18px 8px 8px;
  margin: 14px 0;
}
.block-header span.title {
  top: -10px; left: 12px;
  padding: 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pui-primary);
  background: #fff;
}

/* ---------------------------------------------------------------- forms ---- */
label, .control-label { color: var(--pui-ink-2); font-weight: 500; font-size: 13px; margin-bottom: 4px; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"],
input[type="search"], input[type="url"], input[type="date"], select, textarea {
  font-family: var(--pui-font);
  font-size: 14px;
  color: var(--pui-ink);
  background-color: #fff;
  border: 1px solid var(--pui-line-2);
  border-radius: var(--pui-r-ctl);
  padding: 0 10px;
  height: 34px;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { height: auto; min-height: 34px; padding: 7px 10px; line-height: 1.45; }
input[style*="width:35px"], input[style*="width: 35px"], input[style*="width:40px"], input[style*="width: 40px"],
input[style*="width:45px"], input[style*="width:50px"], input[style*="width: 50px"] { padding: 0 4px; text-align: center; }
select[multiple], select[size] { height: auto; padding: 4px 6px; }
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23676879' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
  cursor: pointer;
}
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 6px; }
select::-ms-expand { display: none; }
input[type="text"]:hover, input[type="password"]:hover, select:hover, textarea:hover { border-color: var(--pui-ink-3); }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, input[type="search"]:focus, select:focus, textarea:focus, .form-control:focus {
  outline: 0;
  border-color: var(--pui-primary);
  box-shadow: 0 0 0 1px var(--pui-primary);
}
input[disabled], select[disabled], textarea[disabled], input[readonly], textarea[readonly] {
  background-color: var(--pui-bg);
  color: var(--pui-ink-2);
  border-color: var(--pui-line);
  cursor: default;
}
input::placeholder, textarea::placeholder { color: var(--pui-ink-3); opacity: 1; }
input[type="text"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--pui-ink-3); }
.form-control {
  font-family: var(--pui-font);
  font-size: 14px;
  height: 34px;
  color: var(--pui-ink);
  border: 1px solid var(--pui-line-2);
  border-radius: var(--pui-r-ctl);
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--pui-primary);
  width: 15px; height: 15px;
  vertical-align: -2px;
  cursor: pointer;
}
input[type="checkbox"] + label, input[type="radio"] + label { color: var(--pui-ink); font-weight: 400; font-size: 14px; margin-left: 5px; cursor: pointer; }
input[type="file"] { font-size: 13px; color: var(--pui-ink-2); }
/* the calendar button beside date boxes */
img.ui-datepicker-trigger {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='2.75' y='4.25' width='14.5' height='13' rx='2.5' fill='none' stroke='%23676879' stroke-width='1.5'/%3E%3Cpath d='M2.75 8.25h14.5M6.5 2.5v3.5M13.5 2.5v3.5' stroke='%23676879' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  width: 20px; height: 20px;
  vertical-align: middle;
  margin-left: 6px;
  padding: 0;
  cursor: pointer;
  opacity: .9;
}
img.ui-datepicker-trigger:hover { opacity: 1; filter: brightness(.6); }
.rdoList label { color: var(--pui-ink); font-weight: 400; font-size: 14px; }
ul.rdoList.list-border { border-color: var(--pui-line-2); border-radius: var(--pui-r-ctl); background: #fff; }
.input-group-addon { background: var(--pui-bg); border-color: var(--pui-line-2); color: var(--pui-ink-2); border-radius: var(--pui-r-ctl); }

/* -------------------------------------------------------------- buttons ---- */
/* (the old theme colours buttons with "body .btn-..." rules, so these carry "body" too) */
body .btn {
  font-family: var(--pui-font);
  min-width: 0 !important;
  height: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--pui-r-ctl);
  border: 1px solid var(--pui-line-2);
  background: #fff;
  color: var(--pui-ink);
  box-shadow: none;
  text-shadow: none;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
body button.btn { border-radius: var(--pui-r-ctl); }
body input.btn { display: inline-block; line-height: 32px; }
body .btn:hover, body .btn:focus { background: var(--pui-hover); border-color: var(--pui-line-2); color: var(--pui-ink); box-shadow: none; text-decoration: none; }
body .btn:active, body .btn.active { background: var(--pui-bg-2); box-shadow: none; }
body .btn:focus-visible { outline: 2px solid var(--pui-primary) !important; outline-offset: 2px; }
body .btn .fa { font-size: 13px; }
/* the main buttons (Submit, Send, Search, Add …) in pastel with dark ink, as Marcus asked on 22 Oct ("these submit buttons,
   this send button … pastel"); the fill deepens on hover */
body .btn-primary, body .btn-primary:focus {
  background: var(--pui-pl-info) !important;
  border-color: var(--pui-pl-info-edge);
  color: var(--pui-pl-info-ink);
  padding: 0 18px;
  margin-bottom: 0;
}
body .btn-primary:hover, body .btn-primary:active, body .btn-primary.active {
  background: var(--pui-sel) !important;
  border-color: #7fb3f5;
  color: var(--pui-pl-info-ink);
}
body .btn-success, body .btn-success:focus { background: var(--pui-pl-ok); border-color: var(--pui-pl-ok-edge); color: var(--pui-pl-ok-ink); }
body .btn-success:hover, body .btn-success:active { background: #c9efdb; border-color: #7fcfa6; color: var(--pui-pl-ok-ink); }
body .btn-danger, body .btn-danger:focus { background: var(--pui-pl-bad); border-color: var(--pui-pl-bad-edge); color: var(--pui-pl-bad-ink); }
body .btn-danger:hover, body .btn-danger:active { background: #ffd1d8; border-color: #e99aa6; color: var(--pui-pl-bad-ink); }
/* btn-info was teal like btn-primary in the old look, so it is a main action too */
body .btn-info, body .btn-info:focus { background: var(--pui-pl-info) !important; border-color: var(--pui-pl-info-edge); color: var(--pui-pl-info-ink); margin-bottom: 0; }
body .btn-info:hover, body .btn-info:active { background: var(--pui-sel) !important; border-color: #7fb3f5; color: var(--pui-pl-info-ink); }
/* edit-type buttons (orange in the old look): quiet outline buttons with an orange pencil */
body .btn-warning, body .btn-warning:focus {
  background: #fff !important;
  border-color: var(--pui-line-2);
  color: var(--pui-ink);
  padding: 0 14px;
  margin-bottom: 0;
}
body .btn-warning:hover, body .btn-warning:active { background: var(--pui-hover) !important; border-color: var(--pui-line-2); color: var(--pui-ink); }
body .btn-warning .fa { color: var(--pui-orange-t); }
body .btn-default { background: #fff; border-color: var(--pui-line-2); color: var(--pui-ink); }
body .btn-link { border-color: transparent; background: transparent; color: var(--pui-primary); }
body .btn-sm { height: 30px; padding: 0 12px; font-size: 13.5px; }
body .btn-xs { height: 26px; padding: 0 10px; font-size: 12.5px; border-radius: var(--pui-r-ctl); gap: 5px; }
body input.btn-sm { line-height: 28px; }
body input.btn-xs { line-height: 24px; }
/* small header actions (Print Invoice, File Sheet) and Reset: blue outline rather than solid */
body .btn-xs.btn-primary, body .btn-xs.btn-primary:focus,
body input.btn-primary[value="Reset"], body input.btn-primary[value="Reset"]:focus {
  background: #fff !important; color: var(--pui-primary); border-color: #a9cdf7;
}
body .btn-xs.btn-primary:hover, body input.btn-primary[value="Reset"]:hover { background: #eef5ff !important; color: var(--pui-primary-h); border-color: var(--pui-primary); }
body .btn-xs.btn-primary + .btn-xs.btn-primary, body .btn-xs.btn-primary.pull-right { margin-left: 6px; }
body .btn.disabled, body .btn[disabled] { opacity: .45; }

/* the small square icon buttons in tables (edit / delete / tick) */
.btn-primary-icon, .btn-warning-icon, .btn-info-icon, .btn-danger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: var(--pui-r-ctl);
  border: 1px solid var(--pui-line-2);
  background: #fff;
  color: var(--pui-ink-2);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
a.btn-primary-icon:hover, a.btn-warning-icon:hover, a.btn-info-icon:hover, .btn-primary-icon:hover, .btn-warning-icon:hover, .btn-info-icon:hover {
  background: #eef5ff; color: var(--pui-primary); border-color: var(--pui-primary); text-decoration: none;
}
.btn-warning-icon { color: var(--pui-primary); }
.btn-danger-icon { color: var(--pui-red-t); border-color: #f3b7bf; }
a.btn-danger-icon:hover, .btn-danger-icon:hover { background: #ffe6ea; color: var(--pui-red-t); border-color: var(--pui-red-t); text-decoration: none; }
input.btn-info-icon, input.btn-primary-icon {
  background: var(--pui-pl-info); border-color: var(--pui-pl-info-edge); color: var(--pui-pl-info-ink);
  padding: 0 12px; font-family: var(--pui-font); font-weight: 500; cursor: pointer;
}
input.btn-info-icon:hover, input.btn-primary-icon:hover { background: var(--pui-sel); border-color: #7fb3f5; color: var(--pui-pl-info-ink); }
.btn-xs.btn-warning-icon, .btn-xs.btn-danger-icon, .btn-xs.btn-primary-icon { height: 28px; }

/* --------------------------------------------------- tabs: pastel, solid when open ---- */
.tabs { border-radius: 0; margin: 10px 0 28px; }
.tabs .nav-tabs, .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 0;
  margin: 0 0 10px;
  padding: 0;
  font-size: 0;
}
.nav-tabs > li { float: none; margin: 0; }
.nav-tabs > li.hidden { display: none !important; }
.nav-tabs li a, .nav-tabs li a:hover, .nav-tabs li a:focus,
.nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
  --t-bg: var(--pui-bg-2); --t-fg: var(--pui-ink); --t-on: var(--pui-primary); --t-on-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid transparent !important;
  border-radius: var(--pui-r-card);
  background: var(--t-bg) !important;
  color: var(--t-fg) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
  transition: filter .12s ease, background .12s ease, color .12s ease;
}
.nav-tabs > li > a:hover { filter: brightness(.96); }
/* the open tab: a deeper pastel with its colour as an underline (22 Oct: no solid blocks; a browser without color-mix
   keeps the pastel fill and still gets the underline and the bold) */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus,
.nav-tabs li.active a, .nav-tabs li.active a:hover, .nav-tabs li.active a:focus {
  background: color-mix(in srgb, var(--t-on) 22%, #fff) !important;
  color: var(--t-fg) !important;
  border-color: color-mix(in srgb, var(--t-on) 45%, #fff) !important;
  box-shadow: inset 0 -3px 0 var(--t-on);
  font-weight: 600;
  filter: none;
}
.nav-tabs > li > a::before { font-family: FontAwesome; font-weight: normal; font-size: 13px; opacity: .85; }
.nav-tabs > li.active > a::before { opacity: 1; }
/* one colour per tab, from monday's status palette */
.nav-tabs a[href="#Client"], .nav-tabs a[href="#Settings"] { --t-bg: #e3efff !important; --t-fg: #1f5bb5 !important; --t-on: var(--pui-primary) !important; }
.nav-tabs a[href="#Item"], .nav-tabs a[href="#Documents"] { --t-bg: #f1e7fb !important; --t-fg: #6a3cb5 !important; --t-on: #8a3fc6 !important; }
.nav-tabs a[href="#People"], .nav-tabs a[href="#Locations"] { --t-bg: #dcf0fa !important; --t-fg: #005f8a !important; --t-on: #0074a6 !important; }
.nav-tabs a[href="#Payment"], .nav-tabs a[href="#Notification"] { --t-bg: #dcf5e8 !important; --t-fg: #0f7a4a !important; --t-on: var(--pui-green-t) !important; }
.nav-tabs a[href="#Voucher"] { --t-bg: #fff3c4 !important; --t-fg: #7a5b00 !important; --t-on: var(--pui-yellow) !important; --t-on-fg: #3d2e00 !important; }
.nav-tabs a[href="#cpPage_Finance"], .nav-tabs a[href="#GPSNotification"] { --t-bg: #eef8d6 !important; --t-fg: #4a7508 !important; --t-on: var(--pui-lime) !important; --t-on-fg: #1f3b00 !important; }
.nav-tabs a[href="#Supplier"], .nav-tabs a[href="#Itinenary"] { --t-bg: #ffe5da !important; --t-fg: #96320f !important; --t-on: #c53d12 !important; }
.nav-tabs a[href="#Client"]::before { content: "\f007"; }
.nav-tabs a[href="#Item"]::before { content: "\f03a"; }
.nav-tabs a[href="#People"]::before { content: "\f0c0"; }
.nav-tabs a[href="#Payment"]::before { content: "\f154"; }
.nav-tabs a[href="#Voucher"]::before { content: "\f145"; }
.nav-tabs a[href="#cpPage_Finance"]::before { content: "\f201"; }
.nav-tabs a[href="#Settings"]::before { content: "\f013"; }
.nav-tabs a[href="#Documents"]::before { content: "\f15c"; }
.nav-tabs a[href="#Locations"]::before { content: "\f041"; }
.nav-tabs a[href="#Notification"]::before { content: "\f017"; }
.nav-tabs a[href="#GPSNotification"]::before { content: "\f124"; }
.nav-tabs a[href="#Supplier"]::before { content: "\f0b1"; }
/* the open tab's panel: a white card in that tab's colour */
.tab-content {
  background: #fff;
  border: 1px solid var(--pui-line);
  border-radius: var(--pui-r-card);
  box-shadow: var(--pui-sh-card);
  padding: 16px;
}
.tab-content > .tab-pane { --grp: var(--pui-primary); }
#Client { --grp: var(--pui-primary); } #Item { --grp: #8a3fc6; } #People { --grp: #0074a6; }
#Payment { --grp: var(--pui-green-t); } #Voucher { --grp: #d4a500; } #cpPage_Finance { --grp: #7cb518; }
#Settings { --grp: var(--pui-primary); } #Documents { --grp: #8a3fc6; } #Locations { --grp: #0074a6; }
#Notification { --grp: var(--pui-green-t); } #GPSNotification { --grp: #7cb518; } #Supplier, #Itinenary { --grp: #c53d12; }
/* the open panel is washed with its tab's colour, fading from left to right (Marcus, 22 Oct: "a faded purple from left to
   right … so the details stand out"); the white boxes and lists sit on it. It fills the card (the card's padding is 16px) */
.tab-content > .tab-pane.active {
  margin: -16px;
  padding: 16px;
  border-radius: var(--pui-r-card);
  background: linear-gradient(90deg, color-mix(in srgb, var(--grp) 11%, #fff) 0%, color-mix(in srgb, var(--grp) 4%, #fff) 55%, #fff 100%);
}
.tab-content .widget { margin-bottom: 6px; }
.tab-content .widget .widget-header { border: 0; border-bottom: 1px solid var(--pui-line-3); border-radius: 0; padding: 0 0 10px; min-height: 0; }
.tab-content .widget .widget-content { border: 0; box-shadow: none; border-radius: 0; }
.tab-content .widget .widget-header + .widget-content { padding-top: 4px; }

/* -------------------------------------------------------------- tables ---- */
.table, .grdtable, .jsgrid { font-family: var(--pui-font); }
.table { color: var(--pui-ink); background: #fff; }
/* the grids (GridView, the item grid and Bootstrap tables) with monday's board look */
.table-bordered, .grdtable, table[rules="all"] {
  border: 1px solid var(--pui-line) !important;
  border-left: 6px solid var(--grp) !important;
  border-collapse: collapse;
  background: #fff;
}
table[rules="all"] > tbody > tr > td, table[rules="all"] > tbody > tr > th { border-color: var(--pui-line-3); }
.table > thead > tr > th, .table > tbody > tr > th, .table th,
.gridHeader th, .gridHeader td, .gridHeaderInner th, .gridHeaderInner td {
  background: #fff !important;
  background-image: none !important;
  color: var(--pui-ink-2);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 8px 7px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pui-line) !important;
  border-right: 1px solid var(--pui-line-3) !important;
  box-shadow: none !important;
  white-space: normal;
  line-height: 1.25;
  vertical-align: middle;
}
.gridHeader, .table-striped > tbody > tr.gridHeader { background: #fff !important; background-image: none !important; }
.gridHeader th a, .table th a, table[rules="all"] th a { color: inherit; text-decoration: none; }
.gridHeader th a:hover, .table th a:hover, table[rules="all"] th a:hover { color: var(--pui-primary); }
.tab-pane .clearfix + .btn-primary, .tab-pane .clearfix + input.btn-primary { margin-top: 12px; }
.table > tbody > tr > td, .table td,
.gridRow td, .gridRowAlt td, .gridFooter td, .gridPager td {
  font-size: 13px;
  color: var(--pui-ink);
  padding: 6px 7px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pui-line-3) !important;
  border-right: 1px solid var(--pui-line-3) !important;
  vertical-align: middle;
  line-height: 1.4;
}
.table > tbody > tr > td:last-child, .table th:last-child, .gridHeader th:last-child,
.gridRow td:last-child, .gridRowAlt td:last-child { border-right: 0 !important; }
.gridRow, .gridRowAlt, .table-striped > tbody > tr:nth-of-type(odd), .table-striped > tbody > tr:nth-of-type(even) { background: #fff; }
.gridRow:hover, .gridRowAlt:hover, .table-hover > tbody > tr:hover, .table > tbody > tr:hover > td { background: var(--pui-hover); color: inherit; }
.gridRow.ub, .gridRowAlt.ub { background: #fff8ec; font-weight: 600; }
.gridRow.um, .gridRowAlt.um { background: #fff0db; color: #8a5300; }
.gridFooter { background: var(--pui-bg) !important; }
.gridFooter td { background: var(--pui-bg); border-top: 1px solid var(--pui-line) !important; }
.gridPager td { background: #fff; text-align: left; }
.gridPager table td { border: 0 !important; padding: 2px !important; }
.gridPager a, .gridPager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--pui-r-ctl);
  font-size: 13px; color: var(--pui-ink); text-decoration: none;
}
.gridPager a:hover { background: var(--pui-hover); color: var(--pui-primary); }
.gridPager span { background: var(--pui-sel); color: var(--pui-primary); font-weight: 600; }
.table-edit tr td:last-child { padding: 5px 6px !important; white-space: nowrap; }
.table-edit tr td:last-child > a + a, .table-edit tr td:last-child > a + span, .table-edit .pull-left + a { margin-left: 4px; }
/* the item grid on the reservation page */
.grdtable { width: 100%; background: #fff; }
.grdtable input[type="text"], .grdtable select,
table[rules="all"] td input[type="text"], table[rules="all"] td select, .table td input[type="text"], .table td select,
.jsgrid td input[type="text"], .jsgrid td select { height: 28px; font-size: 13px; padding: 0 6px; }
.grdtable select, .jsgrid td select { padding-right: 22px; background-position: right 7px center; }
/* r188 live check (22 Oct): the Finance and Payment grids size their columns themselves (Account Type is 15%), so their
   drop-downs keep the browser's own arrow and the cell's full width; the chevron and 7px cell padding left "Accou…" */
table[rules="all"] td select, .table td select {
  -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; background-image: none;
  width: 100%; max-width: 100%; min-width: 0; font-size: 12px; padding: 0 2px 0 4px;
}
.table > tbody > tr > td:has(> select), .table td:has(> select), table[rules="all"] td:has(> select) { padding-left: 4px !important; padding-right: 4px !important; }
table[rules="all"] td textarea, .table td textarea { font-size: 13px; padding: 4px 6px; min-height: 28px; }
body .flight-seg select { padding: 0 20px 0 6px !important; background-position: right 6px center; }
/* the notes editor (FreeTextBox, on Supplier and Voucher Remark) keeps its own toolbar look. Its markup carries no
   .FreeTextBox class: the toolbar table is <id>_OuterTable and the editing frame <id>_DesignBox (seen live, 22 Oct) */
.FreeTextBox select, .FreeTextBox input[type="text"], .FreeTextBox textarea,
table[class$="_OuterTable"] select, table[class$="_OuterTable"] input[type="text"], table[class$="_OuterTable"] textarea {
  -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
  background-image: none; height: auto; min-height: 0; width: auto; padding: 1px 2px; border: 1px solid #a0a0a0; border-radius: 0;
  font-family: Tahoma, Arial, sans-serif; font-size: 11px; box-shadow: none;
}
.FreeTextBox select, table[class$="_OuterTable"] select { padding-right: 2px; }
table[class$="_OuterTable"] td { padding: 0; }
.grdtable .gridFooter td { padding: 6px 6px !important; }
.grdtable td { font-size: 13px; }
.grdtable td b { font-weight: 600; color: var(--pui-ink); }
.grdtable textarea { font-size: 12.5px; padding: 4px 6px; line-height: 1.35; min-height: 0; }
.grdtable select { font-size: 12.5px; }
.grdtable .tmx-btn { font-size: 12px; padding: 4px 7px; white-space: nowrap; }
/* Item & Supplier: wide enough for the supplier's name and "Send booking request" */
.grdtable > tbody > tr > td:nth-child(2) { min-width: 150px; }
.grdtable > tbody > tr > td > table { border: 1px solid var(--pui-line-3); border-radius: var(--pui-r-ctl); }

/* the jsGrid lists (reservations, bookings, reports) */
.jsgrid { font-size: 13px; color: var(--pui-ink); }
.jsgrid-grid-header, .jsgrid-grid-body {
  border: 1px solid var(--pui-line);
  border-left: 6px solid var(--grp);
  background: #fff;
}
.jsgrid-grid-header { border-bottom: 0; border-radius: var(--pui-r-card) var(--pui-r-card) 0 0; }
.jsgrid-grid-body { border-top: 0; border-radius: 0 0 var(--pui-r-card) var(--pui-r-card); }
.jsgrid-header-row, .jsgrid-header-row > th { background: #fff !important; background-image: none !important; }
.jsgrid .jsgrid-header-row th, .jsgrid .jsgrid-header-row td {
  color: var(--pui-ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  padding: 9px 4px;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  border: 0;
  border-bottom: 1px solid var(--pui-line);
  border-right: 1px solid var(--pui-line-3);
  box-shadow: none;
  white-space: normal;
  vertical-align: middle;
}
.jsgrid .jsgrid-header-row th:last-child { border-right: 0; }
.jsgrid-header-sortable:hover { background: var(--pui-hover) !important; color: var(--pui-ink); }
.jsgrid-header-row .jsgrid-header-sort { background: #eef5ff !important; color: var(--pui-primary); }
.jsgrid-header-sort:before { margin: 6px 6px 0 0; }
.jsgrid-header-sort-asc:before { border-color: transparent transparent var(--pui-primary); }
.jsgrid-header-sort-desc:before { border-color: var(--pui-primary) transparent transparent; }
.jsgrid-row, .jsgrid-alt-row, .jsgrid-row > td, .jsgrid-alt-row > td { background: #fff; }
.jsgrid .jsgrid-row td, .jsgrid .jsgrid-alt-row td {
  font-size: 12.5px;
  color: var(--pui-ink);
  padding: 8px 5px;
  border: 0;
  border-bottom: 1px solid var(--pui-line-3);
  border-right: 1px solid var(--pui-line-3);
  line-height: 1.35;
}
.jsgrid .jsgrid-row td:last-child, .jsgrid .jsgrid-alt-row td:last-child { border-right: 0; }
.jsgrid-row:hover > td, .jsgrid-alt-row:hover > td { background: var(--pui-hover); }
.jsgrid-row td a, .jsgrid-alt-row td a { font-weight: 600; color: var(--pui-primary); }
.jsgrid-selected-row > td { background: var(--pui-sel) !important; border-color: var(--pui-line-3); }
.jsgrid-nodata-row td { color: var(--pui-ink-2); padding: 24px 0 !important; }
.jsgrid .fa-check-square-o { color: var(--pui-green-t); font-size: 15px; }
.jsgrid .fa-square-o { color: var(--pui-ink-3); font-size: 15px; }
.jsgrid-pager-container { margin-top: 10px; }
.jsgrid-pager { color: var(--pui-ink-2); font-size: 13px; padding: 4px 0; }
.jsgrid-pager-nav-button a, .jsgrid-pager-page a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 9px; border-radius: var(--pui-r-ctl);
  color: var(--pui-ink); text-decoration: none;
}
.jsgrid-pager-nav-button a:hover, .jsgrid-pager-page a:hover { background: var(--pui-hover); color: var(--pui-primary); }
.jsgrid-pager-nav-button, .jsgrid-pager-page { padding: 0 1px; }
.jsgrid-pager-current-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 9px; border-radius: var(--pui-r-ctl);
  background: var(--pui-sel); color: var(--pui-primary); font-weight: 600;
}
.jsgrid-load-shader { background: #fff; opacity: .6; }
.jsgrid-load-panel { border: 1px solid var(--pui-line); border-radius: var(--pui-r-card); box-shadow: var(--pui-sh-pop); color: var(--pui-ink-2); }
.jsgrid-load-panel:before { border-color: var(--pui-primary); border-right-color: transparent; }

/* the flags Trip Manager puts on rows and cells: same meaning, monday's colours */
.jsgrid tr td.incomplete, td.incomplete, .grdtable td.incomplete {
  background: var(--pui-pl-bad) !important;
  color: var(--pui-pl-bad-ink) !important;
  box-shadow: inset 0 0 0 1px var(--pui-pl-bad-edge);
  font-weight: 600;
  text-align: center;
}
tr.incomplete td, .jsgrid tr.incomplete td {
  background: #fff0f2 !important;
  color: #a1203a !important;
}
tr.incomplete td:first-child { box-shadow: inset 4px 0 0 var(--pui-red); }
tr.incomplete td a { color: #a1203a !important; }
tr.incomplete .balance-due { font-weight: 600; }
tr.incomplete td.incomplete { background: var(--pui-pl-bad) !important; color: var(--pui-pl-bad-ink) !important; }
.incomplete.p, tr.incomplete.p td, td.incomplete.p { background: #dcf0fa !important; color: #005f8a !important; }
td.green-bg { background-color: var(--pui-pl-ok) !important; color: var(--pui-pl-ok-ink) !important; box-shadow: inset 0 0 0 1px var(--pui-pl-ok-edge); font-weight: 600; }
/* status cells (planet-ui.js adds pui-st-* from the word in the cell): pastel, with a dark ink and a hairline edge */
table tr td.pui-st.pui-st { text-align: center; font-weight: 600; padding-left: 4px; padding-right: 4px; }
table tr td.pui-st.pui-st-ok { background: var(--pui-pl-ok) !important; color: var(--pui-pl-ok-ink) !important; box-shadow: inset 0 0 0 1px var(--pui-pl-ok-edge); }
table tr td.pui-st.pui-st-wait { background: var(--pui-pl-wait) !important; color: var(--pui-pl-wait-ink) !important; box-shadow: inset 0 0 0 1px var(--pui-pl-wait-edge); }
table tr td.pui-st.pui-st-no { background: var(--pui-pl-no) !important; color: var(--pui-pl-no-ink) !important; box-shadow: inset 0 0 0 1px var(--pui-pl-no-edge); }
table tr td.pui-st.pui-st-bad { background: var(--pui-pl-bad) !important; color: var(--pui-pl-bad-ink) !important; box-shadow: inset 0 0 0 1px var(--pui-pl-bad-edge); }
table tr td.pui-st.pui-st-info { background: var(--pui-pl-info) !important; color: var(--pui-pl-info-ink) !important; box-shadow: inset 0 0 0 1px var(--pui-pl-info-edge); }
.jsgrid-row:hover > td.pui-st, .jsgrid-alt-row:hover > td.pui-st { filter: brightness(.97); }

/* the Status box on a reservation, coloured like a monday status label (planet-ui.js sets data-pui-st) */
select[data-pui-st="ok"], select[data-pui-st="wait"], select[data-pui-st="no"], select[data-pui-st="bad"], select[data-pui-st="info"] {
  font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23323338' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select[data-pui-st="ok"] { background-color: var(--pui-pl-ok); color: var(--pui-pl-ok-ink); border-color: var(--pui-pl-ok-edge); }
select[data-pui-st="wait"] { background-color: var(--pui-pl-wait); color: var(--pui-pl-wait-ink); border-color: var(--pui-pl-wait-edge); }
select[data-pui-st="no"] { background-color: var(--pui-pl-no); color: var(--pui-pl-no-ink); border-color: var(--pui-pl-no-edge); }
select[data-pui-st="bad"] { background-color: var(--pui-pl-bad); color: var(--pui-pl-bad-ink); border-color: var(--pui-pl-bad-edge); }
select[data-pui-st="info"] { background-color: var(--pui-pl-info); color: var(--pui-pl-info-ink); border-color: var(--pui-pl-info-edge); }
select[data-pui-st]:hover { filter: brightness(.97); }
select[data-pui-st] option { color: var(--pui-ink); background: #fff; font-weight: 400; }

/* ---------------------------------------------- pop-ups, messages, calendars ---- */
/* Bootstrap modal (the edit windows: hotel, flight, passenger ...) */
.modal-backdrop.in { opacity: .7; }
.modal-backdrop { background: #292f4c; }
.modal-content { border: 0; border-radius: var(--pui-r-card); box-shadow: var(--pui-sh-pop); overflow: hidden; }
.modal-dialog .modal-header {
  background: #fff;
  background-image: none;
  border-bottom: 1px solid var(--pui-line-3);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.modal-dialog .modal-header::before, .modal-dialog .modal-header::after { content: none; display: none; }
.modal-dialog .modal-header h3, .modal-dialog .modal-header h3 h3 {
  font-variant: normal;
  color: var(--pui-ink);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.modal-dialog .modal-header h3 .fa { color: var(--pui-primary); margin-right: 6px; }
.modal-header .close, button.close, button.close:hover {
  position: static;
  float: none;
  width: 32px; height: 32px;
  margin: 0 -6px 0 12px;
  border-radius: var(--pui-r-ctl);
  background: transparent;
  color: var(--pui-ink-2);
  font-size: 22px;
  font-weight: 300;
  line-height: 32px;
  text-shadow: none;
  opacity: 1;
}
.modal-header .close:hover, button.close:hover { background: var(--pui-hover); color: var(--pui-ink); }
.modal-body { background: #fff; }

/* the message box ($.msgBox: errors, confirmations; "body" as msgbox.css comes after this sheet on the sign-in page) */
body div.msgBox {
  font-family: var(--pui-font);
  background: #fff !important;
  background-image: none !important;
  border-radius: var(--pui-r-card);
  box-shadow: var(--pui-sh-pop);
  border: 0;
  border-top: 4px solid var(--pui-primary);
  padding: 18px 22px 16px;
  width: 460px;
  min-height: 0;
  color: var(--pui-ink);
}
body div.msgBox:has(img[src$="error.png"]) { border-top-color: var(--pui-red); }
body div.msgBox:has(img[src$="alert.png"]) { border-top-color: var(--pui-orange); }
body div.msgBox:has(img[src$="confirm.png"]) { border-top-color: var(--pui-primary); }
body div.msgBox:has(img[src$="info.png"]) { border-top-color: var(--pui-green); }
body div.msgBoxBackGround { background-color: #292f4c; }
body div.msgBoxTitle {
  font-variant: normal;
  font-size: 18px;
  font-weight: 600;
  color: var(--pui-ink);
  border-bottom: 1px solid var(--pui-line-3);
  padding: 0 0 12px;
  margin-bottom: 12px;
}
body div.msgBoxImage { margin: 2px 14px 0 0; width: 36px; height: 36px; }
body div.msgBoxImage img { width: 36px; height: 36px; }
body div.msgBoxContent, body div.msgBoxContentIEOld { font-size: 14px; height: auto; min-height: 40px; width: calc(100% - 56px); margin: 0 0 14px; color: var(--pui-ink); }
body div.msgBoxContent p { display: block; height: auto; }
body div.msgBoxContent span { display: block; line-height: 1.5; padding-top: 6px; }
body div.msgBoxButtons { display: flex; justify-content: flex-end; gap: 8px; border-top: 0; clear: both; }
body div.msgBoxButtons input[type=button] {
  font-family: var(--pui-font);
  height: 34px; width: auto; min-width: 84px;
  padding: 0 18px; margin: 0;
  border: 1px solid var(--pui-line-2);
  background: #fff; color: var(--pui-ink);
  border-radius: var(--pui-r-ctl);
  font-size: 14px; font-weight: 500;
}
body div.msgBoxButtons input[type=button]:hover { background: var(--pui-hover); color: var(--pui-ink); }
body div.msgBoxButtons input[type=button]:first-child { background: var(--pui-primary); border-color: var(--pui-primary); color: #fff; }
body div.msgBoxButtons input[type=button]:first-child:hover { background: var(--pui-primary-h); border-color: var(--pui-primary-h); }
div.msgInput input[type=text], div.msgInput input[type=password] { width: 100%; }

/* the red "kindly enter ..." note next to a field */
body .formError .formErrorContent {
  background: var(--pui-red-t);
  color: #fff;
  font-family: var(--pui-font);
  font-size: 13px;
  font-weight: 500;
  border: 0;
  border-radius: var(--pui-r-ctl);
  box-shadow: 0 4px 12px rgba(216, 58, 82, .35);
  padding: 7px 12px;
}
body .formError .formErrorArrow div { background: var(--pui-red-t); border-left-color: var(--pui-red-t); border-right-color: var(--pui-red-t); box-shadow: none; }
body .formError .formErrorArrow .line3, body .formError .formErrorArrow .line2, body .formError .formErrorArrow .line1 { background: var(--pui-red-t); border-color: var(--pui-red-t); }

/* the calendar (jQuery UI datepicker) */
.ui-widget { font-family: var(--pui-font); font-size: 14px; }
.ui-datepicker {
  padding: 10px;
  background: #fff;
  border: 1px solid var(--pui-line) !important;
  border-radius: var(--pui-r-card);
  box-shadow: var(--pui-sh-pop);
  z-index: 2000 !important;
}
.ui-datepicker .ui-datepicker-header {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 0 8px;
  color: var(--pui-ink);
}
.ui-datepicker .ui-datepicker-title { font-size: 15px; font-weight: 600; line-height: 28px; color: var(--pui-ink); }
.ui-datepicker .ui-datepicker-title select { height: 28px; font-size: 13px; padding: 0 22px 0 8px; background-position: right 7px center; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  top: 4px; width: 28px; height: 28px;
  border: 0 !important; background: transparent !important;
  border-radius: var(--pui-r-ctl);
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { background: var(--pui-hover) !important; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: none; }
.ui-datepicker .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before {
  font-family: FontAwesome; font-size: 14px; color: var(--pui-ink-2);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.ui-datepicker .ui-datepicker-prev::before { content: "\f104"; }
.ui-datepicker .ui-datepicker-next::before { content: "\f105"; }
.ui-datepicker-multi .ui-datepicker-group { padding: 0 6px; }
.ui-datepicker-multi .ui-datepicker-group table { width: 100%; }
.ui-datepicker th { color: var(--pui-ink-3); font-size: 12px; font-weight: 500; padding: 6px 0; }
.ui-datepicker td { padding: 1px; }
.ui-datepicker td .ui-state-default, .ui-datepicker td span, .ui-datepicker td a {
  border: 0 !important;
  background: transparent !important;
  color: var(--pui-ink) !important;
  border-radius: var(--pui-r-ctl);
  text-align: center;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 400;
}
.ui-datepicker td a.ui-state-hover, .ui-datepicker td a:hover { background: var(--pui-hover) !important; }
.ui-datepicker td .ui-state-highlight { color: var(--pui-primary) !important; font-weight: 700; box-shadow: inset 0 0 0 1px var(--pui-primary); }
.ui-datepicker td .ui-state-active, .ui-datepicker td a.ui-state-active { background: var(--pui-primary) !important; color: #fff !important; font-weight: 600; box-shadow: none; }
.ui-datepicker .ui-datepicker-unselectable .ui-state-default, .ui-datepicker .ui-state-disabled { opacity: .35; }
.ui-datepicker .ui-datepicker-buttonpane { border-top: 1px solid var(--pui-line-3); margin: 8px 0 0; padding: 8px 0 0; }
.ui-datepicker .ui-datepicker-buttonpane button {
  font-family: var(--pui-font); font-size: 13px; padding: 4px 12px; margin: 0 0 0 6px;
  border: 1px solid var(--pui-line-2) !important; background: #fff !important; color: var(--pui-ink) !important;
  border-radius: var(--pui-r-ctl); opacity: 1; font-weight: 500;
}
.ui-widget-overlay { background: #292f4c; opacity: .7; }

/* jQuery UI dialogs and tooltips */
.ui-dialog.dvDialogBox { background: #fff !important; border: 0; border-radius: var(--pui-r-card); box-shadow: var(--pui-sh-pop); padding: 6px; }
.ui-tooltip { background: var(--pui-ink); color: #fff; border: 0; border-radius: var(--pui-r-ctl); box-shadow: var(--pui-sh-pop); font-size: 13px; padding: 6px 10px; }

/* suggestion lists under a box (region search and the like) */
.ac_results { border: 1px solid var(--pui-line); border-radius: var(--pui-r-card); box-shadow: var(--pui-sh-pop); background: #fff; padding: 4px; margin-top: 2px; }
.ac_results li { font: inherit; font-family: var(--pui-font); font-size: 14px; line-height: 18px; padding: 7px 10px; border-radius: var(--pui-r-ctl); color: var(--pui-ink); }
.ac_odd { background: #fff; }
.ac_over { background: var(--pui-sel); color: var(--pui-ink); }
.ac_over a { color: var(--pui-ink); }
.ui-autocomplete.ui-menu { border: 1px solid var(--pui-line); border-radius: var(--pui-r-card); box-shadow: var(--pui-sh-pop); padding: 4px; background: #fff; }
.ui-autocomplete .ui-menu-item, .ui-autocomplete .ui-menu-item-wrapper { border-radius: var(--pui-r-ctl); padding: 6px 10px; font-size: 14px; }
.ui-autocomplete .ui-state-active, .ui-autocomplete .ui-state-focus { background: var(--pui-sel) !important; border: 0 !important; color: var(--pui-ink) !important; margin: 0 !important; }

/* "please wait" while the page saves */
#Background { background: #292f4c; }
#Progress {
  position: fixed;
  width: 64px; height: 64px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--pui-sh-pop);
}
#Progress img { display: none; }
#Progress::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 3px solid var(--pui-sel);
  border-top-color: var(--pui-primary);
  border-radius: 50%;
  animation: pui-spin .75s linear infinite;
}
@keyframes pui-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------- the edit windows (no menu, in a pop-up) ---- */
.form-container { background: #fff; padding: 22px 12px 18px; }
.form-container > label, .form-container label[class*="col-"] { padding-top: 8px; }
.form-container .mt10 > .btn-primary, .form-container .btn-primary { margin-top: 4px; }

/* ----------------------------------------------------------- scrollbars ---- */
.scroll-x { overflow-x: auto; }
.scroll-x::-webkit-scrollbar, .jsgrid-grid-body::-webkit-scrollbar, .nano-content::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-x::-webkit-scrollbar-thumb, .jsgrid-grid-body::-webkit-scrollbar-thumb, .nano-content::-webkit-scrollbar-thumb {
  background: #c5c7d0; border-radius: 10px; border: 2px solid transparent; background-clip: content-box;
}
.scroll-x::-webkit-scrollbar-track, .jsgrid-grid-body::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------ the sign-in page ---- */
body.login-body {
  background: var(--pui-frame);
  background-image: none;
  min-height: 100vh;
}
.login-body .container { padding: 0 15px; }
.login-body .login-box {
  margin: 12vh auto 40px;
  background: #fff;
  border: 1px solid var(--pui-line-3);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(41, 47, 76, .08);
  padding: 28px 28px 24px;
}
.login-body .login-head { border-bottom: 1px solid var(--pui-line-3); margin-bottom: 22px; padding-bottom: 20px; }
.login-body .login-head img { height: 52px; width: auto; }
.login-body label { color: var(--pui-ink-2); font-weight: 500; font-size: 13px; margin: 6px 0 4px; }
.login-body .login-box i.fa {
  color: var(--pui-ink-2);
  background: var(--pui-bg);
  border: 1px solid var(--pui-line-2);
  border-right: 0;
  border-radius: var(--pui-r-ctl) 0 0 var(--pui-r-ctl);
  width: 38px;
  height: 38px;
  line-height: 36px;
  padding: 0;
  margin: 0 -4px 6px 0;
  font-size: 15px;
  vertical-align: top;
}
.login-body input[type="text"], .login-body input[type="password"] {
  height: 38px;
  border-radius: 0 var(--pui-r-ctl) var(--pui-r-ctl) 0;
  margin-bottom: 6px;
  vertical-align: top;
}
.login-body .btn-primary { height: 38px; min-width: 140px !important; margin-top: 8px; font-size: 15px; }
.login-body .login-tips {
  border: 0;
  border-radius: 12px;
  background: var(--pui-bg);
  padding: 16px 20px;
  color: var(--pui-ink-2);
}
.login-body .login-tips h3 { font-size: 15px; font-weight: 600; color: var(--pui-ink); margin: 0 0 10px; }
.login-body .login-tips ul { padding-left: 18px; font-size: 13px; line-height: 1.5; }
.login-body .login-tips ul li { margin-bottom: 8px; }

/* ----------------------------------------------- r187 booking checks (tmx187) ---- */
.tmx-bar, .tmx-box, .tmx-btn, .tmx-trail, .tmx-note { font-family: var(--pui-font); }
.tmx-bar { border-radius: var(--pui-r-card); font-size: 13.5px; }
.tmx-bar.tmx-red { background: #fff0f2; border: 1px solid #f6c5cd; border-left: 6px solid var(--pui-red); color: #8f1d33; }
.tmx-bar.tmx-amber { background: #fff6e5; border: 1px solid #f7d9a6; border-left: 6px solid var(--pui-orange); color: #6b4300; }
.tmx-bar.tmx-grey { background: var(--pui-bg); border: 1px solid var(--pui-line-3); border-left: 6px solid var(--pui-grey); color: var(--pui-ink-2); }
.tmx-btn { border-radius: var(--pui-r-ctl); border-color: var(--pui-line-2); color: var(--pui-ink); font-weight: 500; font-size: 13.5px; padding: 6px 14px; }
.tmx-btn:hover { background: var(--pui-hover); }
.tmx-btn.tmx-go { background: var(--pui-pl-info); border-color: var(--pui-pl-info-edge); color: var(--pui-pl-info-ink); }
.tmx-btn.tmx-go:hover { background: var(--pui-sel); border-color: #7fb3f5; color: var(--pui-pl-info-ink); }
.tmx-btn.tmx-btn-red, .tmx-btn.tmx-go.tmx-btn-red { background: var(--pui-red-t); border-color: var(--pui-red-t); }
.tmx-btn.tmx-btn-red:hover { background: #b8293f; }
.tmx-ov { background: rgba(41, 47, 76, .7); }
.tmx-box { border-radius: var(--pui-r-card); box-shadow: var(--pui-sh-pop); color: var(--pui-ink); }
.tmx-box.tmx-strong { border: 2px solid var(--pui-red); }
.tmx-hd { font-size: 17px; font-weight: 600; padding: 14px 18px; border-radius: var(--pui-r-card) var(--pui-r-card) 0 0; border-bottom-color: var(--pui-line-3); }
.tmx-hd.tmx-red { background: var(--pui-red); border-bottom-color: var(--pui-red); }
.tmx-hd.tmx-amber { background: #fff3d6; color: #5c3b00; border-bottom-color: #f7d9a6; }
.tmx-bd { padding: 16px 18px; }
.tmx-ft { padding: 12px 18px 16px; }
.tmx-trail, .tmx-note { border-radius: var(--pui-r-card); }
.tmx-trail { background: var(--pui-bg); border-color: var(--pui-line-3); color: var(--pui-ink-2); }
.tmx-trail a, .tmx-note a, .tmx-rewrite { color: var(--pui-primary); }
.tmx-row input[type="text"], .tmx-row select, .tmx-row textarea { border-color: var(--pui-line-2); border-radius: var(--pui-r-ctl); font-size: 14px; }
.tmx-row input[type="text"], .tmx-row select { height: 34px; padding: 0 10px; }
.tmx-row select { padding-right: 30px; }
.tmx-row textarea { padding: 8px 10px; }
.tmx-lab { color: var(--pui-ink-2); font-weight: 500; }
.tmx-st { border-radius: var(--pui-r-ctl); font-weight: 600; padding: 1px 7px; }
.tmx-st-UC { background: #fff0d6; color: #8a5300; }
.tmx-st-RQ { background: #e3efff; color: #1f5bb5; }
.tmx-st-HK { background: #dcf5e8; color: #0f7a4a; }
.tmx-st-CL { background: #ffe0e4; color: #b0293f; }