@charset "UTF-8";
/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
/*
 * hide-scrollbar() - Keep a box scrollable without drawing its scrollbar
 *
 * No single declaration covers every engine: scrollbar-width is the
 * standard one and is what Firefox reads, the pseudo element is what
 * WebKit and Chromium read, and -ms-overflow-style is what the older
 * Edge and IE read
 */
/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
.btn {
  height: 34px;
  padding: 8px 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  transition: background-color 300ms;
  user-select: none;
  cursor: pointer; }

.btn > svg {
  width: 16px;
  height: 16px;
  fill: currentColor; }

.btn > p {
  margin-left: 10px; }

.btn-spinner {
  border: 3px solid white;
  border-top: 3px solid transparent;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: btn-spinner-animation 1s linear infinite; }

@keyframes btn-spinner-animation {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.btn-blue {
  color: white;
  background-color: #00b0f0; }

.btn-blue:hover {
  background-color: #0078b4; }

/* The quiet one, for cancel and back */
.btn-gray {
  color: #464646;
  background-color: #e4e4e4; }

.btn-gray:hover {
  background-color: #d0d0d0; }

.btn-red {
  color: white;
  background-color: red; }

.btn-red:hover {
  background-color: #c80000; }

.btn-green {
  color: white;
  background-color: #00b400; }

.btn-green:hover {
  background-color: #008c00; }

.btn-disabled:is(.btn-green) {
  background-color: #008c00; }

/* Square icon-only buttons, used in the list control panels */
.btn-icon, .btn-icon-8 {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  background-color: #00b0f0;
  border-radius: 5px;
  transition: background-color 0.2s;
  cursor: pointer; }

/* Same darker blue the search button hovers to */
.btn-icon:hover, .btn-icon-8:hover {
  background-color: #008cc8; }

.btn-icon {
  padding: 5px; }

.btn-icon-8 {
  padding: 8px; }

.btn-icon > svg, .btn-icon-8 > svg {
  width: 100%;
  height: 100%;
  fill: white; }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
.tb, .tb-btn {
  width: fit-content;
  height: 34px;
  position: relative; }

.tb-btn {
  display: flex;
  flex-direction: row;
  align-items: stretch; }

/* The input grew past the row on its padding alone, the button fell short
 * of it, so both are pinned to the height of the row instead */
.tb-btn > input {
  height: 100%; }

.tb > input, .tb-btn > input, .ta {
  width: 100%;
  padding: 8px 15px;
  box-sizing: border-box;
  border: 1px solid #b4b4b4;
  outline: none;
  color: #464646;
  z-index: 0; }

.tb-err > input {
  border: 1px solid red; }

.tb > input, .ta {
  border-radius: 5px; }

.tb-btn > input {
  border-right: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; }

.tb > p, .tb-btn > p {
  padding: 0 2px;
  position: absolute;
  left: 13px;
  top: 50%;
  font-size: 80%;
  color: #464646;
  background-color: white;
  transform: translateY(-50%);
  transition: 100ms;
  z-index: 1;
  pointer-events: none;
  user-select: none; }

.tb > input:focus + p, .tb > input:not(:placeholder-shown) + p, .tb-btn > input:focus + p, .tb-btn > input:not(:placeholder-shown) + p {
  top: -0px;
  font-size: 65%; }

.tb-btn > div:not(.dt-panel) {
  height: 100%;
  box-sizing: border-box;
  padding: 0px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #00b0f0;
  border-left: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #00b0f0;
  transition: 0.2s;
  cursor: pointer;
  user-select: none; }

.tb-btn > div:not(.dt-panel):hover {
  border-color: #008cc8;
  background-color: #008cc8; }

/*
 * Only the icon inside a button. As a descendant selector this reached
 * everything a date box drops into its panel, and painted it white
 */
.tb-btn > div:not(.dt-panel) > svg {
  width: 16px;
  height: 16px;
  fill: white; }

.ta {
  font-size: 85%;
  resize: none; }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
.dd {
  height: 34px;
  position: relative; }

.dd > .tb, .dd > .tb-btn {
  width: 100%; }

/*
 * With a search button the box is the textbox and the button as one control,
 * the way a listing searches, and the input takes the room that is left
 */
.dd > .tb-btn > input {
  min-width: 0;
  flex-grow: 1; }

.dd:has(> svg) > .tb > input, .dd:has(> svg) > .tb-btn > input {
  /* keep the selected text clear of the arrow */
  padding-right: 32px;
  overflow: hidden;
  text-overflow: ellipsis; }

/*
 * A read only input still shows a caret and lets its text be selected,
 * neither of which makes sense on a picker. The element still takes focus,
 * which is what the dropdown needs in order to close on blur
 */
.dd > .tb > input[readonly], .dd > .tb-btn > input[readonly] {
  caret-color: transparent;
  cursor: pointer;
  user-select: none; }

.dd > svg {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 10px;
  top: 50%;
  color: #464646;
  transform: translateY(-50%);
  transition: transform 0.2s;
  pointer-events: none;
  user-select: none; }

.dd-active > svg {
  transform: translateY(-50%) rotate(180deg); }

.dd-selected {
  width: 100%;
  padding: 8px 15px;
  box-sizing: border-box;
  border: 1px solid #b4b4b4;
  border-radius: 5px;
  text-wrap: nowrap; }

.dd-options {
  max-height: 170px;
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  overflow-y: auto;
  border: 1px solid #b4b4b4;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 2px 5px #c8c8c8;
  z-index: 2; }

.dd-active > .dd-options {
  display: block; }

.dd-options > p {
  padding: 8px 15px;
  color: #464646;
  font-size: 85%;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none; }

.dd-options > p:hover {
  background-color: rgba(0, 176, 240, 0.15); }

/* Not an option, so it takes neither the pointer nor the hover */
.dd-options > .dd-msg, .dd-options > .dd-msg:hover {
  color: rgba(70, 70, 70, 0.5);
  background-color: transparent;
  cursor: default; }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
.cb {
  height: 34px;
  display: flex;
  flex-direction: row;
  align-items: center; }

.cb > input {
  display: none; }

.cb-slider {
  width: 38px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: #b4b4b4;
  transition: background-color 0.2s;
  cursor: pointer;
  user-select: none; }

.cb-slider::after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background-color: white;
  transition: transform 0.2s; }

.cb > input:checked + .cb-slider {
  background-color: #00aaf6; }

.cb > input:checked + .cb-slider::after {
  transform: translateX(18px); }

.cb > p {
  margin-left: 10px;
  color: #464646;
  user-select: none; }

/*
 * The three way switch. The knob has three places to sit in a 54px track:
 * hard left for no, the middle for either, hard right for yes. The travel
 * is the track less its 2px inset either side and the 16px knob
 */
.ts-slider {
  width: 54px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: #b4b4b4;
  transition: background-color 0.2s;
  cursor: pointer;
  user-select: none; }

.ts-slider::after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background-color: white;
  transition: transform 0.2s; }

.ts[state="0"] > .ts-slider::after {
  transform: translateX(17px); }

.ts[state="1"] > .ts-slider {
  background-color: #00aaf6; }

.ts[state="1"] > .ts-slider::after {
  transform: translateX(34px); }

.ts[state="2"] > .ts-slider {
  background-color: #c02626; }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
/*
 * A date box is a textbox with a button that drops a calendar panel below
 * it. The panel is drawn in the page rather than by the browser, so that
 * it can carry its own footer buttons and be closed on demand
 */
.tb-date > input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.dt-panel {
  width: 260px;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  display: none;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #b4b4b4;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 2px 6px #c8c8c8;
  cursor: default;
  user-select: none;
  z-index: 3; }

.dt-open > .dt-panel {
  display: flex; }

.dt-hdr {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; }

.dt-title {
  color: #464646;
  font-weight: bold; }

.dt-nav {
  width: 14px;
  height: 14px;
  padding: 6px;
  box-sizing: content-box;
  border-radius: 5px;
  fill: #464646;
  cursor: pointer;
  transition: fill 200ms, background-color 200ms; }

.dt-nav:hover {
  fill: #00b0f0;
  background-color: rgba(0, 176, 240, 0.15); }

.dt-week, .dt-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px; }

.dt-week > p {
  padding: 2px 0;
  color: rgba(70, 70, 70, 0.5);
  text-align: center;
  font-size: 80%;
  font-weight: bold; }

.dt-day {
  padding: 6px 0;
  border-radius: 5px;
  color: #464646;
  text-align: center;
  font-size: 90%;
  cursor: pointer;
  transition: background-color 150ms; }

.dt-day:hover {
  background-color: rgba(0, 176, 240, 0.15); }

/*
 * Saturdays and Sundays. This sits above the rules that follow, which
 * carry the same weight, so a day that is also outside the month, today,
 * or the selected one keeps that marking instead
 */
.dt-day-weekend {
  color: #c25450; }

/* Days either side of the month being shown */
.dt-day-out {
  color: #bebebe; }

.dt-day-today {
  color: #00b0f0;
  font-weight: bold; }

.dt-day-sel, .dt-day-sel:hover {
  color: white;
  background-color: #00b0f0; }

.dt-ftr {
  padding-top: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-top: 1px solid #e6e6e6; }

.dt-btn {
  padding: 5px 10px;
  border-radius: 5px;
  color: #464646;
  font-size: 85%;
  cursor: pointer;
  transition: background-color 150ms; }

.dt-btn:hover {
  background-color: #f0f0f0; }

.dt-btn-prm {
  color: #00b0f0;
  font-weight: bold; }

.dt-btn-prm:hover {
  background-color: rgba(0, 176, 240, 0.15); }

/*
 * On a phone a fixed panel width can overhang the field it belongs to, so
 * it matches the field instead. The width resolves against .tb-date,
 * which is the positioned box around the input and its button
 */
@media only screen and (max-width: 900px) {
  .dt-panel {
    width: 100%; } }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
nav {
  width: 0%;
  height: calc(100% - 44px);
  position: absolute;
  top: 44px;
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: white;
  box-shadow: 1px 2px 2px #c8c8c8;
  overflow: hidden;
  z-index: 100; }

.nb-show {
  width: 85%; }

.nb-links {
  width: 100%;
  padding: 0 13px 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: scroll;
  scrollbar-width: none; }

nav > .logo {
  display: inline-block;
  padding: 10px 15px;
  box-sizing: border-box; }

.nb-item {
  width: 100%;
  position: relative;
  padding: 12px 10px;
  margin: 2px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #8c8c96;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color 0.1s, color 0.1s; }

/*
 * The icons carry different viewBoxes, so a square box renders each at a
 * different size. Constraining the height instead lands them all on the
 * same 14px the home icon already had, while the fixed width keeps every
 * label starting at the same offset
 */
.nb-item > svg {
  width: 16px;
  height: 14px;
  margin-right: 10px;
  flex-shrink: 0;
  fill: currentColor; }

.nb-item::before {
  content: "";
  display: none;
  position: absolute;
  bottom: 0;
  left: -2px;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background-color: #00b0f0; }

.nb-active::before {
  display: inline-block; }

.nb-item:hover, .nb-active {
  background-color: rgba(0, 176, 240, 0.15); }

.nb-item:not(.nb-active):hover {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; }

/*
.nb-item::after
{
    content:            "";
    position:           absolute;
    bottom:             0;
    left:               10px;
    width:              0px;
    height:             100%;
    border-radius:      4px;
    background-color:   $clr_prm_a;
}

.nb-item:hover::after, .nb-active::after
{
    width:              100%;
}
*/
.nb-item:hover > *, .nb-active > * {
  color: #00b0f0; }

.service-version {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  color: #969696;
  text-align: center;
  font-size: 80%; }

@media only screen and (max-width: 1500px) {
  nav {
    transition: width 0.3s; } }

@media only screen and (min-width: 1500px) {
  nav {
    width: 13%;
    height: 100%;
    position: static;
    display: flex; }
  nav > .logo {
    display: none; } }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
/*
 * hide-scrollbar() - Keep a box scrollable without drawing its scrollbar
 *
 * No single declaration covers every engine: scrollbar-width is the
 * standard one and is what Firefox reads, the pseudo element is what
 * WebKit and Chromium read, and -ms-overflow-style is what the older
 * Edge and IE read
 */
/*
 * Slides in from the left the way the navbar does on a phone, but on
 * every screen size. It sits over the navbar, so it is above it in the
 * stack, and it is closed until .filters-show gives it a width
 */
.filters {
  width: 0;
  height: calc(100% - 43px);
  position: absolute;
  top: 43px;
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: white;
  box-shadow: 1px 2px 2px #c8c8c8;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.3s;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 101; }
  .filters::-webkit-scrollbar {
    display: none; }

/*
 * The padding is on the contents rather than the panel, which has to be
 * able to close to nothing
 */
.filters > * {
  margin: 15px;
  flex-shrink: 0;
  text-wrap: nowrap; }

.filters-show {
  width: 85%; }

/*
 * A textbox sizes to its own content by default, which in here leaves it
 * short of the panel. Letting the width be auto lets the column stretch it
 */
.filters > .tb {
  width: auto; }

/* The buttons at the foot of the panel share the row evenly */
.filters-btns {
  display: flex;
  flex-direction: row;
  gap: 10px; }

.filters-btns > .btn {
  flex: 1 1 0;
  min-width: 0; }

/*
 * The same grey the modals dim the page with. It is built by
 * setup_filter_panel() rather than written into every page, and sits
 * between the panel and everything else
 */
.filters-overlay {
  width: 100%;
  height: calc(100% - 43px);
  position: absolute;
  top: 43px;
  left: 0;
  background-color: rgba(80, 80, 80, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 100; }

.filters-overlay-show {
  opacity: 1;
  pointer-events: auto; }

@media only screen and (min-width: 1500px) {
  .filters-show {
    width: 22%; } }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
header {
  width: 100%;
  height: 43px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: black;
  background-color: white;
  box-shadow: 1px 1px 2px #c8c8c8; }

header > #burger, header > #messages {
  padding: 10px;
  box-sizing: border-box; }

header > #burger {
  flex-grow: 1; }

header > #burger > svg, header > #messages > svg {
  width: 24px;
  height: 24px;
  color: #464646;
  user-select: none; }

header > .logo-cnt {
  height: 100%;
  display: none; }

header > .logo-cnt > img {
  height: 35px; }

header > .spacer {
  height: 100%;
  flex-grow: 1; }

.account {
  padding: 2px 15px;
  box-sizing: border-box;
  margin-right: 15px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  color: #646464;
  transition: box-shadow 0.1s; }

.account-active {
  box-shadow: 0 0 1px 1px #c8c8c8; }

@media (hover: hover) and (pointer: fine) {
  .account:hover {
    box-shadow: 0 0 1px 1px #c8c8c8; } }

.account > p {
  font-weight: bold;
  margin: 4px 8px; }

.account > svg {
  width: 16px;
  height: 16px;
  user-select: none;
  transition: transform 0.2s; }

.account-active > svg {
  transform: rotate(180deg); }

.user-menu {
  width: 15%;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  right: 10px;
  top: 50px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 2px #c8c8c8;
  border-radius: 5px;
  background-color: white; }

.user-menu > a {
  padding: 8px 20px;
  color: #464646;
  text-decoration: none; }

#global-search {
  width: 350px;
  padding: 5px 15px;
  box-sizing: border-box;
  outline: none;
  border: 2px solid #00b0f0;
  border-radius: 10px; }

@media only screen and (min-width: 1500px) {
  nav {
    display: flex; }
  header > #burger {
    display: none; }
  header > .logo-cnt {
    padding: 0 15px;
    display: flex;
    flex-direction: row;
    align-items: center; } }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; }

.ws-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 10px; }

.ws-row > .ws-panel-cnt {
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box; }

.ws-row > .ws-panel-cnt:first-child {
  padding-left: 10px; }

.ws-row > .ws-panel-cnt:last-child {
  padding-right: 10px; }

.ws-panel {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 0 2px #c8c8c8; }

@media only screen and (min-width: 1500px) {
  #ws {
    width: 87%; }
  .ws-row {
    flex-direction: row;
    justify-content: center; } }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
.misc-menu {
  width: calc(100% - 10px);
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  position: absolute;
  top: 50px;
  right: 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 2px 2px #c8c8c8;
  background-color: white;
  overflow: hidden;
  z-index: 100;
  user-select: none; }

.misc-menu-active {
  display: flex; }

.misc-menu-item {
  padding: 10px 100px 10px 20px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
  border-radius: 5px;
  color: #8c8c96;
  text-decoration: none;
  transition: 0.1s;
  cursor: pointer; }

.misc-menu-item:hover {
  color: #00b0f0;
  background-color: rgba(0, 176, 240, 0.2); }

.misc-menu svg {
  width: 16px;
  height: 16px;
  margin-right: 20px;
  fill: currentColor; }

.misc-menu-delim {
  width: 100%;
  height: 1px;
  margin: 5px 0;
  background-color: #c8c8c8; }

#btn-logout {
  color: #ff8282; }

#btn-logout:hover {
  color: #c80000;
  background-color: rgba(255, 0, 0, 0.2); }

@media only screen and (min-width: 500px) {
  .misc-menu {
    width: auto; } }

@media only screen and (min-width: 1500px) {
  /*
    .misc-menu > a:after
    {
        content:            "";
        width:              0;
        height:             100%;
        position:           absolute;
        top:                0;
        right:              -5%;
        border-radius:      4px;
        background-color:   $clr_prm_a;
        transition:         width 400ms;
    }

    .misc-menu > a:hover:after
    {
        width: 110%;
    }
    */ }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
.pg {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px; }

.pg > svg {
  width: 16px;
  height: 16px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 5px;
  fill: #464646;
  cursor: pointer;
  transition: fill 200ms, background-color 200ms; }

.pg:not(.pg-busy) > svg:not(.pg-disabled):hover {
  fill: #00b0f0;
  background-color: rgba(0, 176, 240, 0.15); }

/* A busy paginator looks like one with nowhere to go until its page arrives */
.pg > .pg-disabled, .pg-busy > svg {
  fill: rgba(70, 70, 70, 0.25);
  cursor: default; }

.pg > .pg-item {
  min-width: 20px;
  padding: 5px 10px;
  border-radius: 5px;
  color: #464646;
  text-align: center;
  transition: color 200ms, background-color 200ms;
  cursor: pointer;
  user-select: none; }

.pg > .pg-item:not(.pg-current):hover {
  color: white;
  background-color: rgba(0, 176, 240, 0.35); }

.pg > .pg-current {
  color: white;
  background-color: #00b0f0;
  cursor: default; }

.pg-sep {
  width: 0.1rem;
  height: 1rem;
  border-radius: 4px;
  background-color: rgba(70, 70, 70, 0.6); }

/*
 * On a phone the arrows grow to fill the row, a 16px glyph is a poor
 * touch target. The basis and min-width are zero because an svg with no
 * intrinsic size would otherwise refuse to shrink
 */
@media only screen and (max-width: 900px) {
  .pg {
    width: 100%; }
  .pg > svg {
    height: 44px;
    padding: 14px;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0; }
  .pg > .pg-item {
    padding: 10px 16px; } }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
/*
 * hide-scrollbar() - Keep a box scrollable without drawing its scrollbar
 *
 * No single declaration covers every engine: scrollbar-width is the
 * standard one and is what Firefox reads, the pseudo element is what
 * WebKit and Chromium read, and -ms-overflow-style is what the older
 * Edge and IE read
 */
/*
 * Pieces shared by every listing page: the control panel above the
 * list, and the block layout each row falls back to on a phone
 */
.controls {
  display: flex; }

.ctrl > .tb-btn {
  width: 40%;
  /* Line up with the 36px icon buttons either side of it */
  height: 36px; }

/* Square, so it matches the icon buttons rather than just their height */
.ctrl > .tb-btn > div {
  padding: 0;
  flex-shrink: 0;
  aspect-ratio: 1; }

.ctrl {
  display: flex; }

.ctrl > *:not(:last-child) {
  margin-right: 10px; }

.ctrl-left, .ctrl-mid {
  flex-direction: row; }

.ctrl-left, .ctrl-right {
  flex-grow: 1; }

.ctrl-right {
  flex-direction: row-reverse; }

.ctrl-mid {
  flex-grow: 2;
  justify-content: center; }

/*
 * On a phone the search box takes a line of its own and the icon buttons
 * drop below it. The .ctrl groups are dissolved so that every button
 * becomes an item of the controls row and can wrap on its own
 */
@media only screen and (max-width: 900px) {
  .controls {
    flex-wrap: wrap;
    gap: 10px; }
  .ctrl {
    display: contents; }
  /*
     * Same selector as the rule above, so it actually wins: spacing comes
     * from the gap alone, otherwise one button keeps a margin on top of it
     */
  .ctrl > *:not(:last-child) {
    margin-right: 0; }
  .ctrl > .tb-btn {
    width: 100%;
    order: -1; }
  /*
     * Share the line out evenly between the icon buttons. The basis and
     * the min-width both have to be zero: a flex item will not shrink
     * below its content, and these hold an svg with no intrinsic size,
     * which is what pushed them onto separate lines
     */
  .ctrl > .btn-icon, .ctrl > .btn-icon-8 {
    flex: 1 1 0;
    min-width: 0; } }

/*
 * Mobile block layout. Cards must not shrink: they are flex items in a
 * column, so without this they are squashed to fit the panel and clipped
 */
.lst-cards {
  width: 100%;
  padding: 10px 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none; }
  .lst-cards::-webkit-scrollbar {
    display: none; }

.lst-card {
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid gainsboro;
  border-radius: 6px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden; }

.lst-card-hdr {
  padding: 10px 12px;
  color: white;
  background-color: #00b0f0;
  font-weight: bold;
  text-decoration: none;
  overflow-wrap: anywhere; }

.lst-card-row {
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px; }

.lst-card-row:not(:last-child) {
  border-bottom: 1px solid #eeeeee; }

.lst-card-label {
  /* Only as wide as the longest label needs, so the value starts near it */
  width: 27%;
  flex-shrink: 0;
  color: #969696;
  font-size: 85%; }

.lst-card-value {
  flex-grow: 1;
  color: #464646;
  overflow-wrap: anywhere; }

/* An empty field would otherwise leave the row looking unfinished */
.lst-card-value:empty::before {
  content: "—";
  color: #c3c3c3; }

/* The ballance pill, shared by the row layout and the block layout */
.lst-pill {
  width: fit-content;
  padding: 2px 8px;
  flex-grow: 0;
  border-radius: 4px; }

/* Only a ballance that is owed or owing is emphasised */
.lst-pill-pos, .lst-pill-neg {
  font-weight: bold; }

.lst-pill-pos {
  color: #009600;
  background-color: rgba(0, 200, 0, 0.15); }

.lst-pill-neg {
  color: #c80000;
  background-color: rgba(255, 0, 0, 0.12); }

/* Shown in place of the rows when a listing comes back empty */
.lst-empty {
  padding: 30px 15px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #969696;
  font-size: 200%;
  text-align: center;
  user-select: none; }

/*
 * hide-scrollbar() - Keep a box scrollable without drawing its scrollbar
 *
 * No single declaration covers every engine: scrollbar-width is the
 * standard one and is what Firefox reads, the pseudo element is what
 * WebKit and Chromium read, and -ms-overflow-style is what the older
 * Edge and IE read
 */
/* The tab body scrolls when a form is taller than its panel */
.tabs {
  scrollbar-width: none;
  -ms-overflow-style: none; }
  .tabs::-webkit-scrollbar {
    display: none; }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
/*
 * hide-scrollbar() - Keep a box scrollable without drawing its scrollbar
 *
 * No single declaration covers every engine: scrollbar-width is the
 * standard one and is what Firefox reads, the pseudo element is what
 * WebKit and Chromium read, and -ms-overflow-style is what the older
 * Edge and IE read
 */
.mdl-cnt {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(80, 80, 80, 0.8);
  z-index: 100; }

.mdl {
  /*
     * Sized rather than left to its contents, which made for a cramped
     * box. The percentage keeps it inside a phone screen, the cap stops
     * it stretching across a desktop one
     */
  width: 90%;
  max-width: 440px;
  min-height: 180px;
  max-height: 80%;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 0px 5px #282828;
  background-color: white; }

.mdl-hdr, .mdl-body, .mdl-ftr {
  width: 100%; }

.mdl-hdr {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #b4b4b4; }

.mdl-hdr > p {
  padding-bottom: 2px;
  margin-left: 8px;
  margin-right: 15px;
  flex-grow: 1;
  font-size: 120%;
  color: #464646; }

.mdl-hdr > .mdl-btn-close {
  width: 20px;
  height: 20px;
  padding: 4px;
  box-sizing: border-box;
  margin-right: 8px;
  fill: #8c8c8c;
  cursor: pointer;
  transition: fill 0.2s; }

.mdl-hdr > .mdl-btn-close:hover {
  fill: #505050; }

/*
 * The body takes whatever height the header and footer leave, which is
 * what the modal's own minimum turns into. overflow was scroll, which
 * paints the bars whether or not there is anything to scroll
 */
.mdl-body {
  flex-basis: 0;
  flex-grow: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #464646;
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none; }
  .mdl-body::-webkit-scrollbar {
    display: none; }

.mdl-ftr {
  margin-top: 10px; }

/* Taller than the others, it holds a field as well as a message */
.mdl-cnt-pwd > .mdl {
  min-height: 230px; }

/* The body of a modal that asks for something, rather than just telling */
.mdl-pwd {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px; }

.mdl-pwd > .tb {
  width: 100%; }

/* A row of equal buttons, what every modal footer holds so far */
.mdl-ftr-btns {
  display: flex;
  flex-direction: row;
  gap: 10px; }

.mdl-ftr-btns > .btn {
  width: 100%; }

@media only screen and (min-width: 1500px) {
  /*
     * A modal with a single button, the error one, would otherwise have it
     * running the whole footer. Half the width less half the gap is what
     * one of a pair gets, and the auto margins centre it
     */
  .mdl-ftr-btns > .btn:only-child {
    width: calc(50% - 5px);
    margin-left: auto;
    margin-right: auto; }
  .mdl-cnt-pwd > .mdl {
    max-width: 480px; }
  /*
     * The extra width goes to the field. 200px is what a button measured
     * in a 440px modal, so they stay the size they are elsewhere
     */
  .mdl-cnt-pwd .mdl-ftr-btns {
    justify-content: center; }
  .mdl-cnt-pwd .mdl-ftr-btns > .btn {
    width: 200px;
    flex: none; }
  /* 410px is the width it had in a 440px modal, less that modal's padding */
  .mdl-cnt-pwd .mdl-pwd > .tb {
    max-width: 410px; } }

/* Primary */
/* Login background gradient, ending in the primary */
/* Customers */
/* Transactions */
/* Success */
/* Error */
/* Warning */
/* Weekend days in the date picker */
/* Links and highlighted text */
/* Settings panel text */
/* Licence badges: text, background and border */
/* Backgrounds */
/* Text */
/* Border */
/* Shadow */
/* Overlay behind modals and the filters panel */
/* Greys, darkest first */
.mdl-ftr-logout {
  display: flex;
  flex-direction: row;
  flex-wrap: none; }

.mdl-ftr-logout > .btn {
  width: 100%; }

.mdl-ftr-logout > .btn:first-child {
  margin-right: 5px; }

.mdl-ftr-logout > .btn:last-child {
  margin-left: 5px; }

* {
  margin: 0;
  font-family: "Arial"; }

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f0f0f0; }

.main {
  width: 100%;
  height: calc(100% - 43px);
  display: flex;
  flex-direction: row;
  flex-grow: 1; }

.ws {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none; }
  .ws::-webkit-scrollbar {
    display: none; }