/* Databank2u theme for the Perfex customer area (invoices, estimates, tickets, public links): light glass look.
   Loaded for every instance from application/config/databank2u_theme.php (switch off with databank2u_theme_disabled = 1).
   The sign-in and register pages have their own rules and are left out here. */

body.customers:not(.customers_login):not(.register) {
  --d2u-ink: #0b1f44;
  --d2u-muted: #64748b;
  --d2u-blue: #1f56d6;
  --d2u-sky: #2a8fe6;
  --d2u-line: rgba(15, 35, 80, .08);
  color: var(--d2u-ink);
  background: transparent !important;
}
/* gradient on a fixed layer behind the page: a body background leaves a seam where the body box ends on long pages */
body.customers:not(.customers_login):not(.register)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(560px 560px at 6% 10%, rgba(205, 223, 255, .85), transparent 70%),
    radial-gradient(520px 520px at 98% 45%, rgba(211, 234, 249, .85), transparent 70%),
    radial-gradient(480px 480px at 40% 108%, rgba(223, 230, 243, .9), transparent 70%),
    linear-gradient(180deg, #fff 0%, #f2f5fb 100%);
}
body.customers:not(.customers_login):not(.register) #wrapper { background: transparent; }

/* top bar */
body.customers:not(.customers_login):not(.register) .navbar.header {
  margin-bottom: 0;
  /* no backdrop-filter here: it isolates the bar, so the logo's multiply blend could not hide a white logo background */
  background: rgba(255, 255, 255, .78);
  border: 0;
  border-bottom: 1px solid var(--d2u-line);
  box-shadow: none;
}
body.customers:not(.customers_login):not(.register) .navbar-default .navbar-nav > li > a {
  margin: 10px 3px;
  padding: 8px 15px;
  color: #475569;
  font-weight: 500;
  border-radius: 999px;
  transition: color .15s, background .15s;
}
body.customers:not(.customers_login):not(.register) .navbar-default .navbar-nav > li > a:hover,
body.customers:not(.customers_login):not(.register) .navbar-default .navbar-nav > li > a:focus,
body.customers:not(.customers_login):not(.register) .navbar-default .navbar-nav > .active > a,
body.customers:not(.customers_login):not(.register) .navbar-default .navbar-nav > .active > a:hover {
  color: var(--d2u-blue);
  background: rgba(31, 86, 214, .11);
}

/* cards and headings */
body.customers:not(.customers_login):not(.register) .panel_s {
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--d2u-line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(20, 40, 90, .07), inset 0 1px 0 rgba(255, 255, 255, .95);
}
body.customers:not(.customers_login):not(.register) .panel_s .panel-body { background: transparent; border: 0; }
body.customers:not(.customers_login):not(.register) h1,
body.customers:not(.customers_login):not(.register) h2,
body.customers:not(.customers_login):not(.register) h3,
body.customers:not(.customers_login):not(.register) h4 { color: var(--d2u-ink); letter-spacing: -.01em; }

/* buttons */
body.customers:not(.customers_login):not(.register) .btn { border-radius: 999px; font-weight: 600; transition: transform .15s, box-shadow .15s; }
body.customers:not(.customers_login):not(.register) .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--d2u-blue) 0%, var(--d2u-sky) 100%);
  border: 0;
  box-shadow: 0 6px 18px rgba(31, 86, 214, .26);
}
body.customers:not(.customers_login):not(.register) .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(31, 86, 214, .36); }
body.customers:not(.customers_login):not(.register) .btn-default {
  color: var(--d2u-ink);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(15, 35, 80, .14);
  box-shadow: none;
}
body.customers:not(.customers_login):not(.register) .btn-default:hover { background: #fff; border-color: rgba(31, 86, 214, .4); color: var(--d2u-blue); }

/* forms and tables */
body.customers:not(.customers_login):not(.register) .form-control,
body.customers:not(.customers_login):not(.register) .bootstrap-select > .dropdown-toggle {
  color: var(--d2u-ink);
  background-color: rgba(255, 255, 255, .92);
  border: 1px solid rgba(15, 35, 80, .14);
  border-radius: 12px;
  box-shadow: none;
}
body.customers:not(.customers_login):not(.register) .form-control:focus {
  border-color: var(--d2u-blue);
  box-shadow: 0 0 0 4px rgba(31, 86, 214, .13);
}
body.customers:not(.customers_login):not(.register) .table > thead > tr > th {
  color: var(--d2u-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--d2u-line);
}
body.customers:not(.customers_login):not(.register) .table > tbody > tr > td { border-top: 1px solid rgba(15, 35, 80, .06); }
body.customers:not(.customers_login):not(.register) .pagination > .active > a,
body.customers:not(.customers_login):not(.register) .pagination > .active > span {
  color: #fff;
  background: var(--d2u-blue);
  border-color: var(--d2u-blue);
}
body.customers:not(.customers_login):not(.register) .nav-tabs > li.active > a,
body.customers:not(.customers_login):not(.register) .nav-tabs > li.active > a:hover {
  color: var(--d2u-blue);
  border: 0;
  border-bottom: 2px solid var(--d2u-blue);
  background: transparent;
}
body.customers:not(.customers_login):not(.register) .modal-content { border: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(15, 35, 80, .25); }
body.customers:not(.customers_login):not(.register) .footer { background: transparent; border: 0; color: #94a3b8; }
/* logos are uploaded with a white background: let the page gradient show through */
body.customers:not(.customers_login):not(.register) img[src*="/uploads/company/"] { mix-blend-mode: multiply; }
/* near-white logo backgrounds (e.g. rgb(251, 251, 251)) lifted to white so the multiply blend hides them */
body.customers:not(.customers_login):not(.register) img[src*="/uploads/company/"] { filter: brightness(1.03); }

/* customer sign-in: no "Please login or register" heading above the card (the card is self-explanatory) */
body.customers_login .login-heading { display: none; }
/* the card sits in the middle of the space between the top bar and the footer: the body is a flex column, the
   wrapper takes the free height and centres its content. Perfex's own margins (card 25px, footer 25px) are reset
   so the space above and below the card is equal */
body.customers_login { display: flex; flex-direction: column; min-height: 100vh; }
body.customers_login #wrapper { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 24px 0; }
body.customers_login #wrapper > * { width: 100%; }
body.customers_login .mtop40 { margin-top: 0; }
body.customers_login .panel_s { margin-bottom: 0; }
body.customers_login .footer { flex: 0 0 auto; margin-top: 0; }