/* Krown brand layer. Loaded after Materialize, stylez.css and tablestyle.css,
   so it wins on equal specificity. Brand source: Krown BRAND.md (Yellow
   #FFCF00, Gray #F0EFEE, Charcoal #333F4C, Black #231F20). Yellow is never
   text or an icon on a light surface: there it is only a fill behind black
   text. Materialize puts !important on its colour helpers (.green, .red...)
   and on several input states, which is why some rules below need it too. */

/* Museo Sans has no web licence yet; Nunito Sans (OFL) stands in. Swap the
   family in --k-font when a licensed Museo Sans is available. */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../assets/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../assets/fonts/nunito-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --k-yellow: #FFCF00;
  --k-yellow-hover: #F2C400;
  --k-yellow-soft: #FFF3BF;
  --k-gray: #F0EFEE;
  --k-gray-2: #E5E3E1;
  --k-charcoal: #333F4C;
  --k-charcoal-hover: #283240;
  --k-black: #231F20;
  --k-white: #FFFFFF;

  --k-ink: #231F20;
  --k-ink-2: #4A5562;   /* 7.5:1 on white */
  --k-ink-3: #66707B;   /* 4.9:1 on white; 4.4:1 on gray, so white surfaces only */
  --k-line: #DEDBD8;
  --k-line-strong: #C9C5C1;

  --k-on-dark: #FFFFFF;
  --k-on-dark-2: rgba(255, 255, 255, 0.74);
  --k-on-dark-3: rgba(255, 255, 255, 0.68);

  --k-danger: #B3261E;
  --k-danger-soft: #FCEDEC;
  --k-danger-faint: #FDF5F4;
  --k-success: #2E6B34;
  --k-success-soft: #E8F1E8;
  --k-warn-soft: #FFF3BF;

  --k-font: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --k-radius: 6px;
  --k-radius-lg: 10px;
  --k-shadow-1: 0 1px 2px rgba(35, 31, 32, 0.06), 0 1px 3px rgba(35, 31, 32, 0.06);
  --k-shadow-2: 0 4px 12px rgba(35, 31, 32, 0.10), 0 2px 4px rgba(35, 31, 32, 0.06);
  --k-shadow-3: 0 12px 32px rgba(35, 31, 32, 0.18), 0 4px 8px rgba(35, 31, 32, 0.08);
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- base */

html {
  font-family: var(--k-font);
  font-weight: 500;
  color: var(--k-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--k-font);
  background-color: var(--k-gray);
  color: var(--k-ink);
}

body,
button,
input,
select,
textarea,
.select2,
.select2-results__options,
.signup-form input,
textarea,
.login form input,
.login form button,
.tableExplanation,
.noResult,
.list,
.messageChildRight,
.task-item {
  font-family: var(--k-font) !important;
}

/* Material Icons and Font Awesome must keep their own faces. */
.material-icons {
  font-family: "Material Icons" !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--k-ink);
}

b, strong, label, .l1 {
  font-weight: 800;
}

::selection {
  background: var(--k-yellow);
  color: var(--k-black);
}

a {
  color: var(--k-charcoal);
  text-decoration: underline;
  text-decoration-color: rgba(51, 63, 76, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 150ms var(--k-ease), color 150ms var(--k-ease);
}

a:hover {
  color: var(--k-black);
  text-decoration-color: currentColor;
}

/* Buttons, nav and list rows are anchors too; they don't take the link underline. */
a.btn, a.btn-small, a.btn-large, a.btn-flat, a.btn-floating,
.sidenav a, nav a, .collection a.collection-item, .tabs a,
.dropdown-content a, .breadcrumb, .pagination a {
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--k-black);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--k-yellow);
}

hr {
  border: 0;
  border-top: 1px solid var(--k-line);
}

table, .badge, .scheduled-date, .showing-count, .stat-number, .stat-total,
#sync-status, .announcements-count, .outbox-badge-count {
  font-variant-numeric: tabular-nums;
}

* {
  scrollbar-color: #A9A6A3 transparent;
}

/* ---------------------------------------------------------------- shell */

/* Top bar */
header nav.k-topbar {
  background-color: var(--k-charcoal);
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  height: 60px;
  line-height: 60px;
}

header nav.k-topbar .greet {
  color: var(--k-on-dark);
  font-size: 17px;
  font-weight: 500;
  padding-left: 24px;
  letter-spacing: 0;
}

header nav.k-topbar .greet strong {
  font-weight: 900;
}

header nav.k-topbar .sidenav-trigger {
  color: var(--k-on-dark);
}

/* The logo lives in the side nav. */
header nav.k-topbar .logo {
  display: none;
}

/* Side nav */
.sidenav.k-sidenav {
  background-color: var(--k-charcoal);
  width: 250px;
  padding-top: 0;
  padding-bottom: 24px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.k-sidenav li {
  padding: 0;
  list-style: none;
}

.k-sidenav .k-brand {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  margin-bottom: 12px;
  background-color: var(--k-black);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidenav.k-sidenav .k-brand a,
.sidenav.k-sidenav .k-brand a:hover {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  line-height: 1;
  color: var(--k-on-dark-2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.k-sidenav .k-brand img {
  display: block;
  height: 26px;
  width: auto;
}

.k-sidenav .k-brand span {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.k-sidenav li > a,
.sidenav.k-sidenav li > a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  line-height: 42px;
  margin: 1px 12px;
  padding: 0 12px;
  border-radius: var(--k-radius);
  color: var(--k-on-dark-2);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 150ms var(--k-ease), color 150ms var(--k-ease);
}

.sidenav.k-sidenav li > a > i.material-icons,
.k-sidenav li > a > i.material-icons {
  flex: none;
  margin: 0;
  padding: 0;
  width: 22px;
  height: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--k-on-dark-3);
  transition: color 150ms var(--k-ease);
}

.sidenav.k-sidenav li > a:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--k-on-dark);
}

.sidenav.k-sidenav li > a:hover > i.material-icons {
  color: var(--k-on-dark);
}

/* The current page: a yellow fill behind black text. */
.sidenav.k-sidenav li > a[aria-current="page"] {
  background-color: var(--k-yellow);
  color: var(--k-black);
  font-weight: 800;
}

.sidenav.k-sidenav li > a[aria-current="page"] > i.material-icons {
  color: var(--k-black);
}

.sidenav.k-sidenav li > a:focus-visible {
  outline: 2px solid var(--k-yellow);
  outline-offset: -2px;
  box-shadow: none;
}

.sidenav.k-sidenav .subheader {
  height: auto;
  line-height: 1.2;
  margin: 18px 0 6px;
  padding: 0 24px;
  color: var(--k-on-dark-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: default;
}

.sidenav.k-sidenav .divider {
  height: 1px;
  margin: 12px 24px;
  background-color: rgba(255, 255, 255, 0.08);
}

.k-sidenav .k-logout {
  margin-top: auto;
  padding: 16px 24px 0;
}

.k-sidenav .k-logout button {
  width: 100%;
  height: 40px;
  line-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--k-radius);
  background: transparent;
  color: var(--k-on-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 150ms var(--k-ease), border-color 150ms var(--k-ease);
}

.k-sidenav .k-logout button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.k-sidenav .k-logout button:focus {
  background-color: transparent;
}

/* An administrator viewing the app as a BDM. */
.k-sidenav .k-assume {
  margin: 12px 12px 0;
  padding: 12px;
  border-radius: var(--k-radius);
  background-color: var(--k-yellow);
  color: var(--k-black);
}

.k-sidenav .k-assume p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.k-sidenav .k-assume p i.material-icons {
  font-size: 18px;
  padding: 0;
}

.k-sidenav .k-assume button {
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: var(--k-radius);
  background-color: var(--k-black);
  color: var(--k-on-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

@media only screen and (min-width: 993px) {
  header nav.k-topbar.col {
    left: 250px;
  }
}

@media only screen and (max-width: 992px) {
  header nav.k-topbar .greet {
    padding-left: 0;
  }

  .sidenav.k-sidenav {
    box-shadow: var(--k-shadow-3);
  }
}

/* The greeting, the dashboard search and the bell share one row. */
header nav.k-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
}

/* Room for the bell, which the announcements component fixes over the bar's right end. */
body:has(.announcements) header nav.k-topbar {
  padding-right: 64px;
}

header nav.k-topbar .greet,
header nav.k-topbar .nav-badges {
  flex: 0 1 auto;
  min-width: 0;
}

/* Search in the top bar (dashboard only) */
.k-topbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 200px;
  max-width: 520px;
  line-height: normal;
}

header nav.k-topbar .k-topbar-search .material-icons {
  position: absolute;
  left: 10px;
  height: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--k-on-dark-2);
  pointer-events: none;
}

.k-topbar-search input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 12px 0 38px;
  font: inherit;
  font-size: 15px;
  color: var(--k-on-dark);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--k-radius);
  outline: none;
}

.k-topbar-search input::placeholder {
  color: var(--k-on-dark-2);
}

.k-topbar-search input:focus {
  border-color: var(--k-yellow);
  box-shadow: 0 0 0 1px var(--k-yellow);
}

/* On phones there is no room beside the greeting: the search gets its own
   charcoal row pinned under the bar, and the header grows to push the page down. */
@media only screen and (max-width: 600px) {
  .k-topbar-search {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 56px;
    min-width: 0;
    max-width: none;
    padding: 0 12px;
    background: var(--k-charcoal);
  }

  header nav.k-topbar .k-topbar-search .material-icons {
    left: 22px;
  }

  .navbar-fixed:has(.k-topbar-search) {
    height: 116px;
  }
}

/* ---------------------------------------------------------------- buttons */

.btn,
.btn-small,
.btn-large {
  background-color: var(--k-charcoal);
  color: var(--k-on-dark);
  border-radius: var(--k-radius);
  box-shadow: none;
  font-weight: 800;
  letter-spacing: 0.05em;
  transition: background-color 150ms var(--k-ease), box-shadow 150ms var(--k-ease), transform 120ms var(--k-ease);
}

.btn,
.btn-small {
  font-size: 13px;
}

.btn-large {
  border-radius: var(--k-radius);
  font-size: 14px;
}

.btn:hover,
.btn-small:hover,
.btn-large:hover,
.btn:focus,
.btn-small:focus,
.btn-large:focus {
  background-color: var(--k-charcoal-hover);
  color: var(--k-on-dark);
  box-shadow: var(--k-shadow-1);
}

.btn:active,
.btn-small:active,
.btn-large:active {
  transform: translateY(1px);
}

/* Materialize colour helpers on buttons, mapped to the brand. */
.btn.green, .btn-small.green, .btn-large.green,
.btn.blue, .btn-small.blue, .btn-large.blue,
.btn.teal, .btn-small.teal, .btn-large.teal,
.btn.grey, .btn-small.grey, .btn-large.grey {
  background-color: var(--k-charcoal) !important;
  color: var(--k-on-dark) !important;
}

/* Primary: the one action a BDM came to the page for. Repeated per-row
   actions (the dashboard Action menus) stay charcoal so yellow keeps its
   meaning. */
.btn.orange, .btn-small.orange, .btn-large.orange,
.btn.yellow, .btn-small.yellow, .btn-large.yellow,
.btn.k-primary, .btn-small.k-primary, .btn-large.k-primary,
button.btn[type="submit"] {
  background-color: var(--k-yellow) !important;
  color: var(--k-black) !important;
}

.btn.orange:hover, .btn-small.orange:hover, .btn-large.orange:hover,
.btn.yellow:hover, .btn-small.yellow:hover, .btn-large.yellow:hover,
.btn.k-primary:hover, .btn-small.k-primary:hover, .btn-large.k-primary:hover,
button.btn[type="submit"]:hover {
  background-color: var(--k-yellow-hover) !important;
}

.btn.red, .btn-small.red, .btn-large.red, .edit-button.red {
  background-color: var(--k-danger) !important;
  color: var(--k-on-dark) !important;
}

.btn.red:hover, .btn-small.red:hover, .btn-large.red:hover {
  background-color: #8F1E18 !important;
}

.edit-button {
  background-color: var(--k-charcoal);
}

.btn-flat {
  color: var(--k-charcoal);
  background-color: transparent;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-radius);
  font-weight: 800;
  letter-spacing: 0.05em;
  transition: background-color 150ms var(--k-ease), border-color 150ms var(--k-ease);
}

.btn-flat:hover,
.btn-flat:focus {
  background-color: rgba(51, 63, 76, 0.06);
  color: var(--k-charcoal);
  border-color: var(--k-charcoal);
}

.btn-flat.red-text {
  color: var(--k-danger) !important;
}

.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled,
.btn-flat.disabled, .btn:disabled, .btn-floating:disabled, .btn-large:disabled,
.btn-small:disabled, .btn-flat:disabled, .btn[disabled], .btn-floating[disabled],
.btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
  background-color: var(--k-gray-2) !important;
  color: #8A8784 !important;
  border-color: transparent;
}

/* The new-account button on the dashboard */
.fixed-action-btn .btn-floating {
  background-color: var(--k-yellow) !important;
  box-shadow: var(--k-shadow-2);
}

.fixed-action-btn .btn-floating:hover {
  background-color: var(--k-yellow-hover) !important;
  box-shadow: var(--k-shadow-3);
}

.fixed-action-btn .btn-floating i {
  color: var(--k-black) !important;
}

/* ---------------------------------------------------------------- forms */

input:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]),
.select-wrapper input.select-dropdown:focus {
  border-bottom: 1px solid var(--k-charcoal) !important;
  box-shadow: 0 1px 0 0 var(--k-charcoal) !important;
}

input:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label,
.input-field .prefix.active {
  color: var(--k-charcoal) !important;
}

input:not(.browser-default):not([type="checkbox"]):not([type="radio"]),
textarea.materialize-textarea {
  border-bottom-color: var(--k-line-strong);
}

::placeholder {
  color: var(--k-ink-3);
  opacity: 1;
}

[type="checkbox"]:checked + span:not(.lever):before {
  border-right-color: var(--k-charcoal);
  border-bottom-color: var(--k-charcoal);
}

[type="checkbox"].filled-in:checked + span:not(.lever):after {
  border-color: var(--k-charcoal);
  background-color: var(--k-charcoal);
}

[type="checkbox"].filled-in:checked + span:not(.lever):before {
  border-right-color: var(--k-yellow);
  border-bottom-color: var(--k-yellow);
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
  border-color: var(--k-charcoal);
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
  background-color: var(--k-charcoal);
}

.switch label {
  color: var(--k-ink-2);
  font-size: 13px;
  font-weight: 700;
}

.switch label .lever {
  background-color: var(--k-line-strong);
}

.switch label input[type="checkbox"]:checked + .lever {
  background-color: #FFE27A;
}

.switch label input[type="checkbox"]:checked + .lever:after {
  background-color: var(--k-charcoal);
}

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single,
.select2-container--classic .select2-selection--single {
  border-color: var(--k-line-strong);
  border-radius: var(--k-radius);
  background-image: none;
  background-color: var(--k-white);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
  background-color: var(--k-charcoal);
  color: var(--k-on-dark);
}

.select2-results__options {
  font-weight: 600 !important;
}

label.required,
.select2-label :required {
  color: var(--k-danger);
}

/* ---------------------------------------------------------------- surfaces */

.card,
.card-panel {
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-1);
  border: 1px solid var(--k-line);
}

.card .card-action {
  border-top-color: var(--k-line);
}

.card .card-title {
  font-weight: 900;
}

.collection {
  border-color: var(--k-line);
  border-radius: var(--k-radius-lg);
}

.collection .collection-item {
  border-bottom-color: var(--k-line);
}

.collection .collection-item.active {
  background-color: var(--k-yellow);
  color: var(--k-black);
}

.collection a.collection-item {
  color: var(--k-charcoal);
}

.collection.with-header .collection-header {
  border-bottom-color: var(--k-line);
}

.dropdown-content {
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-3);
}

.dropdown-content li > a,
.dropdown-content li > span {
  color: var(--k-ink);
}

.dropdown-content li:hover,
.dropdown-content li.active {
  background-color: var(--k-gray);
}

.modal {
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-3);
}

.modal .modal-footer {
  border-radius: 0 0 var(--k-radius-lg) var(--k-radius-lg);
}

table th {
  color: var(--k-ink-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

table tr {
  border-bottom-color: var(--k-line);
}

table.striped > tbody > tr:nth-child(odd),
table.rTable tr:nth-of-type(even) {
  background-color: #F7F6F5;
}

table.highlight > tbody > tr:hover {
  background-color: var(--k-gray);
}

table.rTable th {
  background: var(--k-charcoal);
  color: var(--k-on-dark);
}

span.badge.new,
.badge.new {
  background-color: var(--k-charcoal);
  color: var(--k-on-dark);
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  min-width: 28px;
  padding: 0 8px;
}

.tabs .tab a {
  color: var(--k-ink-2);
  font-weight: 800;
}

.tabs .tab a:hover,
.tabs .tab a.active {
  color: var(--k-black);
}

.tabs .tab a:focus,
.tabs .tab a:focus.active {
  background-color: rgba(51, 63, 76, 0.06);
}

.tabs .indicator {
  background-color: var(--k-black);
  height: 3px;
}

.pagination li.active {
  background-color: var(--k-yellow);
}

.pagination li.active a {
  color: var(--k-black);
}

#toast-container .toast {
  background-color: var(--k-black);
  color: var(--k-on-dark);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-3);
  font-weight: 700;
}

.toast-style,
a.toast-style:any-link,
.toast-style a {
  background-color: var(--k-black);
  color: var(--k-on-dark);
}

/* Progress and spinners */
.spinner-layer,
.spinner-green-only,
.spinner-blue-only {
  border-color: var(--k-charcoal);
}

.progress {
  background-color: var(--k-gray-2);
}

.progress .determinate,
.progress .indeterminate {
  background-color: var(--k-charcoal);
}

/* Date and time pickers */
.datepicker-date-display,
.timepicker-digital-display {
  background-color: var(--k-charcoal);
}

.datepicker-table td.is-selected {
  background-color: var(--k-yellow);
  color: var(--k-black);
}

.datepicker-table td.is-today {
  color: var(--k-black);
  font-weight: 900;
}

.datepicker-table td.is-selected.is-today {
  color: var(--k-black);
}

.datepicker-cancel,
.datepicker-clear,
.datepicker-today,
.datepicker-done,
.timepicker-close,
.datepicker-day-button:focus {
  color: var(--k-charcoal);
}

.datepicker-day-button:focus {
  background-color: var(--k-yellow-soft);
}

.select-dropdown.dropdown-content li.selected,
.dropdown-content li.selected {
  background-color: var(--k-gray);
}

.timepicker-canvas line {
  stroke: var(--k-charcoal);
}

.timepicker-canvas-bearing,
.timepicker-canvas-bg {
  fill: var(--k-charcoal);
}

/* v-calendar inline picker used by the dashboard's Schedule action */
.vc-container {
  font-family: var(--k-font) !important;
}

/* ---------------------------------------------------------------- page titles */

.tableExplanation {
  color: var(--k-ink);
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.subheading {
  color: var(--k-charcoal);
  font-weight: 800;
}

.smalltext {
  color: var(--k-ink-3);
}

.contactName {
  color: var(--k-ink);
  font-weight: 800;
}

.contactAddress,
.productLeft,
.noCall {
  color: var(--k-ink-3);
}

.modifiedDate {
  color: var(--k-ink-2);
}

.noResult {
  color: var(--k-ink-2);
}

/* ---------------------------------------------------------------- dashboard */

/* Sync toolbar above the lists */
.k-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 20px 0 16px;
  font-size: 14px;
}

.k-toolbar > .col {
  float: none;
  padding: 0;
}

.k-toolbar #sync-status {
  margin-left: 10px;
  color: var(--k-ink-2);
  font-size: 13px;
  font-weight: 700;
}

.k-toolbar .k-db {
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--k-line);
  border-radius: 4px;
  background-color: var(--k-white);
  color: var(--k-ink-3);
  font-size: 12px;
  font-weight: 700;
}

.k-toolbar .k-db:empty {
  display: none;
}

.k-toolbar .k-links {
  display: flex;
  gap: 16px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
}

/* The four lists: Today, Scheduled, Future, Customers. Each keeps one colour
   from list header to the Action menu item that moves a visit into it. */
.contains-with-color.k-list {
  margin: 0 0 16px !important;
  padding: 0;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-lg);
  background-color: var(--k-white);
  box-shadow: var(--k-shadow-1);
}

.k-list > .row:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px 10px 20px;
  border-radius: calc(var(--k-radius-lg) - 1px) calc(var(--k-radius-lg) - 1px) 0 0;
}

.k-list > .row:first-child > .col {
  float: none;
  width: auto;
  left: auto;
  right: auto;
  margin: 0;
  padding: 0;
}

.k-list > .row:first-child > .col:first-child {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.k-list > .row:first-child > .col:last-child {
  display: flex;
  align-items: center;
  gap: 4px;
}

.k-list .tableExplanation {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: left;
}

.k-list > .row:first-child .btn-flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
}

.k-list > .row:first-child .btn-flat:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.k-list > .row:first-child .badge.new {
  float: none;
  margin: 0;
  height: 24px;
  line-height: 24px;
}

.k-list > .row:first-child .preloader-wrapper.small {
  width: 22px;
  height: 22px;
  margin-left: 8px;
}

.k-list--today > .row:first-child {
  background-color: var(--k-yellow);
  color: var(--k-black);
}

.k-list--today > .row:first-child .badge.new {
  background-color: var(--k-black);
}

.k-list--scheduled > .row:first-child {
  background-color: var(--k-charcoal);
  color: var(--k-on-dark);
}

.k-list--scheduled > .row:first-child .badge.new {
  background-color: var(--k-yellow);
  color: var(--k-black);
}

.k-list--scheduled > .row:first-child .spinner-layer {
  border-color: var(--k-yellow);
}

.k-list--scheduled .overdue-count {
  color: var(--k-on-dark-2);
  font-weight: 700;
}

.k-list--future > .row:first-child {
  background-color: var(--k-gray-2);
  color: var(--k-ink);
}

.k-list--customer > .row:first-child {
  background-color: var(--k-white);
  border-bottom: 1px solid var(--k-line);
  color: var(--k-ink);
}

/* Rows */
.k-list > .collection {
  margin: 0;
  border: 0;
  border-radius: 0 0 var(--k-radius-lg) var(--k-radius-lg);
}

.k-list .collection .collection-item {
  padding: 10px 16px 10px 12px !important;
  background-color: var(--k-white);
  transition: background-color 120ms var(--k-ease);
}

.k-list .collection .collection-item:last-child {
  border-bottom: 0;
  border-radius: 0 0 var(--k-radius-lg) var(--k-radius-lg);
}

ul#todayCustomerList li.customer:hover,
ul#futureCustomerList li.customer:hover,
ul#customerList li.customer:hover,
ul#scheduledCustomerList li.customer:hover {
  background-color: #FAF9F8;
}

.k-list .contactName {
  font-size: 16px;
  font-weight: 800;
  line-height: 22px !important;
}

.k-list .contact-short-info {
  color: var(--k-ink-2);
  font-size: 14px;
}

.k-list .contact-short-info b {
  color: var(--k-ink);
  font-weight: 800;
}

.circle-icon {
  background-color: var(--k-gray);
  color: var(--k-charcoal);
  padding: 7px;
  font-size: 22px;
}

.k-list .scheduling-actions {
  padding-top: 2px;
}

.k-list .scheduling-actions .btn-small,
.k-list .scheduling-actions .btn-flat {
  height: 36px;
  line-height: 34px;
}

/* The Action menu: each choice wears its list's colour. */
.dropdown-content.k-actions {
  min-width: 160px;
  padding: 6px !important;
  border: 1px solid var(--k-line) !important;
  background-color: var(--k-white) !important;
}

.dropdown-content.k-actions li {
  min-height: 0;
  padding: 0;
  margin: 0 0 4px;
}

.dropdown-content.k-actions li:last-child {
  margin-bottom: 0;
}

.dropdown-content.k-actions li:hover {
  background-color: transparent;
}

.k-actions .k-act {
  width: 100%;
  height: 36px;
  line-height: 36px;
  border-radius: 4px !important;
  box-shadow: none;
  text-align: left;
  padding: 0 12px;
}

.k-act--today { background-color: var(--k-yellow) !important; color: var(--k-black) !important; }
.k-act--today:hover { background-color: var(--k-yellow-hover) !important; }
.k-act--scheduled { background-color: var(--k-charcoal) !important; color: var(--k-on-dark) !important; }
.k-act--scheduled:hover { background-color: var(--k-charcoal-hover) !important; }
.k-act--future { background-color: var(--k-gray-2) !important; color: var(--k-ink) !important; }
.k-act--future:hover { background-color: #D8D5D2 !important; }
.k-act--remove { background-color: var(--k-white) !important; color: var(--k-danger) !important; border: 1px solid #E3B4B1 !important; }
.k-act--remove:hover { background-color: var(--k-danger-soft) !important; }

/* Overdue: a tinted row and the OVERDUE badge carry the state. */
.appointment-overdue {
  border-left: 0;
  background-color: var(--k-danger-faint) !important;
}

.overdue-badge {
  background-color: var(--k-danger);
  border-radius: 4px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.overdue-count {
  color: var(--k-ink-3);
}

/* A change the Outbox holds and has not sent yet. */
.queued-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 4px;
  background-color: var(--k-warn-soft);
  color: var(--k-ink);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.queued-note {
  padding: 6px 0;
  color: var(--k-ink-3);
  font-size: 0.9em;
}

.queued-removal > div:not(:last-child) {
  text-decoration: line-through;
  color: var(--k-ink-3);
}

.showing-count {
  color: var(--k-ink-3);
}

.empty-list-prompt {
  padding: 14px 20px;
  color: var(--k-ink-2);
}

/* Date chips */
.scheduled-date {
  background-color: var(--k-gray);
  color: var(--k-ink);
  border-radius: var(--k-radius);
}

.scheduled-date .display-month {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scheduled-date .display-day {
  font-weight: 900;
}

.not-completed-appointment.scheduled-date {
  background-color: var(--k-yellow);
  color: var(--k-black);
}

#customerList span.scheduled-appointment-counter,
#customerList span.future-appointment-counter {
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  padding: 1px 6px;
}

#customerList span.scheduled-appointment-counter {
  background-color: var(--k-charcoal);
  color: var(--k-on-dark);
}

#customerList span.future-appointment-counter {
  background-color: var(--k-gray-2);
  color: var(--k-ink);
}

/* Territories view of the dashboard */
#territory-list-section {
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-1);
}

#territory-list-section .collection-item.avatar .circle {
  background-color: var(--k-charcoal);
}

/* Unsaved work waiting for a connection */
.outbox-badge {
  background: var(--k-black);
  color: var(--k-on-dark);
  border-radius: 999px;
  box-shadow: var(--k-shadow-3);
}

.outbox-badge .material-icons {
  color: var(--k-yellow);
}

.outbox-badge-count {
  background: var(--k-yellow);
  color: var(--k-black);
}

.outbox-pending-banner {
  background: var(--k-black);
  color: var(--k-on-dark);
  box-shadow: none;
}

.outbox-pending-banner .material-icons {
  color: var(--k-yellow);
}

/* Sync indicator (js/offline/syncIndicator.js), in the top bar. */
.sync-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  line-height: 1.2;
  vertical-align: middle;
}

.sync-indicator-button,
a.sync-indicator-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: var(--k-on-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sync-indicator-button .material-icons {
  font-size: 20px;
  line-height: 1;
  height: auto;
}

button.sync-indicator-button {
  cursor: pointer;
}

.sync-indicator--sent .sync-indicator-button {
  background: transparent;
  color: var(--k-on-dark-2);
  font-weight: 500;
}

.sync-indicator--waiting .sync-indicator-button {
  background: var(--k-yellow);
  color: var(--k-black);
}

.sync-indicator--attention .sync-indicator-button {
  background: var(--k-danger);
  color: var(--k-white);
}

.sync-indicator-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  min-width: 260px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  background: var(--k-white);
  color: var(--k-ink);
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-3);
  list-style: none;
}

.sync-indicator-list li {
  padding: 8px 14px;
  line-height: 1.4;
  border-bottom: 1px solid var(--k-line);
}

.sync-indicator-list li:last-child {
  border-bottom: 0;
}

.sync-indicator-entry-what {
  font-weight: 700;
}

.sync-indicator-entry-when,
.sync-indicator-entry-status {
  color: var(--k-ink-2);
  font-size: 13px;
}

/* Announcements */
.announcements-bell {
  color: var(--k-on-dark);
}

.announcements-bell:focus-visible {
  outline: 2px solid var(--k-yellow);
  box-shadow: none;
}

.announcements-count {
  background: var(--k-yellow);
  color: var(--k-black);
}

.announcements-panel {
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-3);
}

.announcements-title {
  font-weight: 900;
  border-bottom-color: var(--k-line);
}

/* ---------------------------------------------------------------- other pages */

.territory-tabs {
  border-bottom-color: var(--k-line);
}

.territory-tabs a {
  color: var(--k-ink-2);
  font-weight: 700;
}

.territory-tabs a.active {
  border-bottom-color: var(--k-black);
  color: var(--k-black);
  font-weight: 900;
}

.customer-jkrown-score > i {
  background: var(--k-charcoal);
}

.customer-jkrown-reason {
  background: var(--k-gray);
  color: var(--k-ink-2);
}

.dealer-link-notice {
  border-left-width: 1px;
  border-radius: var(--k-radius);
  background: var(--k-success-soft);
}

.dealer-link-danger {
  border-color: #E3B4B1;
  border-radius: var(--k-radius-lg);
}

.dealer-link-danger h6 {
  color: var(--k-danger);
  font-weight: 900;
}

.dealer-link-warning,
.dealer-link-flag {
  background: var(--k-warn-soft);
  color: var(--k-black);
}

.dealer-status-tile {
  border-color: var(--k-line);
  border-radius: var(--k-radius);
  background: var(--k-white);
}

.dealer-link-dialog {
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-3);
}

.dealer-link-overlay {
  background: rgba(35, 31, 32, 0.55);
}

.stats-summary .stat-card {
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-1);
}

.stats-summary .stat-number,
.stat-total {
  color: var(--k-ink);
  font-weight: 900;
}

.stats-summary .stat-label,
.territory-card .bdm-name,
.timeframe-dates,
.stat-non-completed {
  color: var(--k-ink-3);
}

.bdm-group-header {
  color: var(--k-ink);
  font-weight: 900;
  border-bottom: 1px solid var(--k-line-strong);
}

.territory-card {
  border-radius: var(--k-radius-lg);
}

.territory-card:hover {
  box-shadow: var(--k-shadow-2);
}

.customer-count-badge {
  background: var(--k-gray);
  color: var(--k-ink);
  font-weight: 800;
}

.announcement-admin-row {
  border-left-width: 1px;
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow-1);
}

.customer-stat-badge--program {
  background: var(--k-success-soft);
  border-color: #B9D3BA;
  color: var(--k-success);
}

.customer-stat-badge--product {
  background: var(--k-yellow-soft);
  border-color: #F0DC8A;
  color: var(--k-black);
}

.customer-stat-badge--more {
  background: var(--k-gray);
  border-color: var(--k-line);
  color: var(--k-ink-2);
}

/* Legacy appointment colours */
.not-valid-appointment {
  border: 1px solid var(--k-danger);
  background-color: var(--k-danger-soft) !important;
}

.delete-button {
  background-color: var(--k-danger);
  border-radius: var(--k-radius);
  font-weight: 800;
}

.error {
  font-family: var(--k-font);
  font-size: 15px;
  font-weight: 800;
  background-color: var(--k-danger);
  border-radius: var(--k-radius);
  padding: 12px 16px;
}

/* ---------------------------------------------------------------- login */

body.k-login {
  background-color: var(--k-black);
  min-height: 100vh;
}

body.k-login main.no-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

body.k-login .container {
  width: 100%;
  max-width: 400px;
  margin: 0;
}

body.k-login .login {
  position: static;
  transform: none;
  width: 100%;
}

.k-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
  color: var(--k-on-dark-2);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.k-login-brand img {
  height: 32px;
  width: auto;
}

.k-login-brand span {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

body.k-login .login form {
  max-width: none;
  padding: 32px;
  border-radius: var(--k-radius-lg);
  box-shadow: none;
  text-align: left;
}

body.k-login .login form h1 {
  margin: 0 0 24px;
  font-size: 24px;
  line-height: 1.25;
}

body.k-login .login form label {
  display: block;
  margin: 0 0 6px;
  color: var(--k-ink);
  font-size: 13px;
  font-weight: 800 !important;
}

body.k-login .login form input {
  height: 46px;
  width: 100%;
  box-sizing: border-box !important;
  margin: 0 0 16px;
  padding: 0 14px;
  border: 1px solid var(--k-line-strong) !important;
  border-radius: var(--k-radius);
  background: var(--k-white);
  font-size: 16px;
  box-shadow: none !important;
}

body.k-login .login form input:focus {
  border-color: var(--k-charcoal) !important;
  box-shadow: 0 0 0 3px rgba(51, 63, 76, 0.18) !important;
}

body.k-login .login form button[type="submit"] {
  height: 48px;
  margin-top: 8px;
  padding: 0;
  border-radius: var(--k-radius);
  background: var(--k-yellow);
  color: var(--k-black);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06em;
  transition: background-color 150ms var(--k-ease);
}

body.k-login .login form button[type="submit"]:hover {
  background: var(--k-yellow-hover);
}

body.k-login .login form .k-login-clear {
  display: block;
  width: auto;
  margin: 20px auto 0;
  padding: 6px 8px;
  background: none;
  color: var(--k-ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.k-login .login form .k-login-clear:hover {
  color: var(--k-danger);
}

body.k-login .error {
  margin-top: 16px;
}

/* ---------------------------------------------------------------- phones */

@media only screen and (max-width: 600px) {
  .k-toolbar {
    margin: 16px 12px 12px;
  }

  .k-toolbar .k-links {
    margin-left: 0;
  }

  .k-list > .row:first-child {
    padding-left: 16px;
  }

  .k-list .contactName {
    font-size: 16px;
  }

  .k-list .scheduling-actions .btn-small,
  .k-list .scheduling-actions .btn-flat {
    height: 44px;
    line-height: 42px;
  }

  #app {
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
  }
}

/* ---------------------------------------------------------------- customer and territory pages */

#accountname,
#territoryname {
  font-weight: 900;
}

.card-header span,
.card-heading,
.customer-jkrown-heading {
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Decorative detail icons and edit pencils: brand neutrals, not Material blue and green. */
.material-icons.light-blue-text,
.material-icons.blue-text {
  color: var(--k-ink-3) !important;
}

.material-icons.green-text.text-lighten-1,
.material-icons.grey-text.text-lighten-1 {
  color: var(--k-ink-3) !important;
}

.material-icons.green-text.text-lighten-1:hover,
.material-icons.grey-text.text-lighten-1:hover {
  color: var(--k-black) !important;
}

/* The customer page's Action menu sits beside the large Log Visit button. */
[data-table="customer"] .scheduling-actions .dropdown-trigger.btn-small {
  height: 54px;
  line-height: 54px;
  font-size: 14px;
}