/* 1.1.1 - Thu Jan 22 2026 10:22:56 GMT+0000 (Greenwich Mean Time) */ 
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
}
/* roboto-italic - latin_greek */
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto-400i-latin-greek.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto-600i-latin-greek.woff2") format("woff2");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}
/* roboto-serif - latin_greek */
@font-face {
  font-family: "Merriweather", serif;
  src: url("../font/merriweather_400i.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather", serif;
  src: url("../font/merriweather_600i.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  --bg-max: #fff;
  --bg-focus: rgb(250, 250, 251);
  --bg-hint: rgb(240, 240, 241);
  --bg-page: rgb(230, 230, 231);
  --bg-nav: rgb(220, 220, 221);
  --bg-popup: rgb(205, 205, 206);
  --bg-backdrop: rgba(20, 20, 21, 0.5);
  --bg-shadow: rgba(50, 50, 51, 0.4);
  --bg-invert: rgb(50, 50, 51);
  --bg-selected: rgb(90, 90, 91);
  --bg-highlighter: rgba(255, 210, 72, 0.7);
  --txt-base: #000;
  --txt-light: #666;
  --txt-invert: #fff;
  --txt-anchor: rgb(30, 50, 180);
  --txt-alert: #fff;
  --font-weight-thin: 250;
  --font-weight-light: 350;
  --font-weight-medium: 400;
  --font-weight-semibold: 480;
  --font-weight-bold: 600;
  --btn-text: rgb(255, 255, 255);
  --btn-base: rgb(40, 50, 80);
  --btn-halo: rgba(0, 0, 0, 0.4);
  --btn-blue: rgb(25, 100, 230);
  --btn-blue-hover: rgb(15, 90, 250);
  --btn-blue-active: rgb(10, 70, 180);
  --btn-green: rgb(0, 130, 50);
  --btn-green-hover: rgb(0, 150, 40);
  --btn-green-active: rgb(0, 110, 40);
  --btn-red: rgb(160, 0, 0);
  --btn-red-hover: rgb(180, 0, 0);
  --btn-red-active: rgb(140, 0, 0);
  --btn-soft-hint: rgba(150, 150, 151, 0.2);
  --btn-disabled-c1: rgb(190, 190, 190);
  --btn-disabled-c2: rgb(210, 210, 210);
  --btn-icon-hover-filter: brightness(2);
  --btn-icon-to-white-filter: grayscale(1) invert(1) brightness(2);
  --gui-line-hard: rgb(160, 160, 160);
  --gui-line: rgb(180, 180, 180);
  --gui-line-soft: rgb(190, 190, 190);
  --gui-scroll-track: rgba(255, 255, 255, 0.5);
  --gui-scroll-thumb: #667;
  --gui-spinner-c1: rgb(50, 255, 255);
  --gui-spinner-c2: rgb(0, 50, 205);
  --gui-event-icon-filter: none;
  --gui-fade: 0.7;
  --gui-fade-soft: 0.4;
  --input-scheme: light;
  --input-base: rgb(255, 255, 255);
  --input-text: rgb(0, 0, 0);
  --input-border: rgb(210, 210, 210);
  --input-placeholder: rgb(181, 181, 181);
  --input-disabled-opacity: 0.4;
  --input-blue: rgb(0, 94, 200);
  --input-radio-checked: rgb(0, 50, 240);
  --input-focus-drop: rgba(0, 94, 200, 0.7);
  --input-focus-outline: rgb(107, 161, 199);
  --color-gray: rgb(190, 190, 191);
  --color-gray-plus: rgb(160, 160, 161);
  --color-dark-gray: rgb(100, 100, 111);
  --color-dark-gray-plus: rgb(140, 140, 151);
  --color-green: #145F14;
  --color-green-plus: #30CA30;
  --color-orange: #C8781E;
  --color-orange-plus: #Ff5F12;
  --color-red: #A50E0E;
  --color-red-plus: #f00;
  --color-highlighter: #ebd37b;
  --color-burgundy: #731e0d;
  --color-yellow: #d2aa14;
  --color-hint-blue: #B1DEFF;
  --color-hint-green: #B4DDB2;
  --color-hint-red: #FFB9B3;
  --color-hint-orange: #FFCA94;
  --theme-grad-top: rgb(170, 170, 170);
  --theme-grad-top-alpha: rgba(170, 170, 170, 0.6);
  --theme-grad-bottom: rgb(220, 220, 220);
  --theme-logo-panacea360: url('../svg/app/panacea360-for-light.svg');
  --theme-btn-halo: rgba(0, 0, 0, 0.4);
  --theme-btn-hover: rgb(245, 245, 246);
  --theme-txt: #000;
  --theme-anchor: rgb(0, 20, 200);
  --theme-line: rgba(250, 250, 251, 0.4);
  --theme-grey-line: #999;
  --theme-hitarea: rgba(255, 255, 255, 0.1);
  --theme-fav-btn-opacity: 0.2;
  --theme-svg-fill-grey: #333;
  --i-add-file: url("../svg/light/add-file.1.svg");
  --i-aside-magic: url("../svg/light/aside-magic.1.svg");
  --i-bell: url("../svg/light/bell.1.svg");
  --i-box: url("../svg/light/box.1.svg");
  --i-barchart: url("../svg/light/barchart.1.svg");
  --i-btn-add-file: url("../svg/light/btn-add-file.1.svg");
  --i-btn-arrow-down: url("../svg/light/btn-arrow-down.1.svg");
  --i-btn-arrow-up: url("../svg/light/btn-arrow-up.1.svg");
  --i-btn-check: url("../svg/light/btn-check.1.svg");
  --i-btn-cross: url("../svg/light/btn-cross.1.svg");
  --i-btn-decr: url("../svg/light/btn-decr.1.svg");
  --i-btn-dir-right: url("../svg/light/btn-dir-right.1.svg");
  --i-btn-eye: url("../svg/light/btn-eye.1.svg");
  --i-btn-incr: url("../svg/light/btn-incr.1.svg");
  --i-btn-plus: url("../svg/light/btn-plus.1.svg");
  --i-arrow-select: url("../svg/light/arrow-select.1.svg");
  --i-arrow-down: url("../svg/light/arrow-down.1.svg");
  --i-arrow-up: url("../svg/light/arrow-up.1.svg");
  --i-check: url("../svg/light/check.1.svg");
  --i-cross: url("../svg/light/cross.1.svg");
  --i-cog: url("../svg/light/cog.1.svg");
  --i-decr: url("../svg/light/decr.1.svg");
  --i-eye: url("../svg/light/eye.1.svg");
  --i-dir-right: url("../svg/light/dir-right.1.svg");
  --i-dir-out: url("../svg/light/dir-out.1.svg");
  --i-go-right: url("../svg/light/go-right.1.svg");
  --i-graph: url("../svg/light/graph.1.svg");
  --i-incr: url("../svg/light/incr.1.svg");
  --i-lat-L-NA: url("../svg/light/lat-L-NA.1.svg");
  --i-lat-L-red: url("../svg/light/lat-L-red.1.svg");
  --i-lat-L-query: url("../svg/light/lat-L-query.1.svg");
  --i-lat-L-inactive: url("../svg/light/lat-L-inactive.1.svg");
  --i-lat-R-NA: url("../svg/light/lat-R-NA.1.svg");
  --i-lat-R-green: url("../svg/light/lat-R-green.1.svg");
  --i-lat-R-query: url("../svg/light/lat-R-query.1.svg");
  --i-lat-R-inactive: url("../svg/light/lat-R-inactive.1.svg");
  --i-menu: url("../svg/light/menu.1.svg");
  --i-money: url("../svg/light/money.1.svg");
  --i-office: url("../svg/light/office.1.svg");
  --i-patients: url("../svg/light/patients.1.svg");
  --i-p-front: url("../svg/light/p-front.1.svg");
  --i-p-back: url("../svg/light/p-back.1.svg");
  --i-pencil: url("../svg/light/pencil.1.svg");
  --i-pencil-orange: url("../svg/light/pencil-orange.1.svg");
  --i-plus: url("../svg/light/plus.1.svg");
  --i-search: url("../svg/light/search.1.svg");
  --i-spinner: url("../svg/light/spinner.1.svg");
  --i-shift-left: url("../svg/light/shift-left.1.svg");
  --i-shift-right: url("../svg/light/shift-right.1.svg");
  --i-star: url("../svg/light/star.1.svg");
  --i-star-edge: url("../svg/light/star-edge.1.svg");
  --i-tick: url("../svg/light/tick.1.svg");
  --i-tick-green: url("../svg/light/tick-green.1.svg");
  --i-trash: url("../svg/light/trash.1.svg");
  --brand-orange: #ff6400;
  --brand-teal: #00ADC5;
  --brand-dark-blue: #171D36;
}

:root.theme-mdit {
  --theme-grad-top: #25536f;
  --theme-grad-top-alpha: rgba(37, 83, 111, 0.6);
  --theme-grad-bottom: rgb(31, 34, 46);
  --theme-logo-panacea360: url('../svg/app/panacea360-full.svg');
  --theme-btn-halo: rgba(255, 255, 255, 0.5);
  --theme-btn-hover: hsl(203, 40%, 20%);
  --theme-txt: #fff;
  --theme-anchor: rgb(100, 200, 255);
  --theme-line: rgba(20, 121, 184, 0.3);
  --theme-grey-line: rgba(204, 204, 204, 0.3);
  --theme-hitarea: rgba(20, 121, 184, 0.1);
  --theme-fav-btn-opacity: 0.2;
  --theme-svg-fill-grey: #ccc;
}

:root.theme-dark {
  --bg-max: rgb(0, 0, 10);
  --bg-focus: rgb(4, 6, 10);
  --bg-hint: rgb(13, 15, 20);
  --bg-page: rgb(23, 25, 30);
  --bg-nav: rgb(33, 35, 40);
  --bg-popup: rgb(43, 45, 50);
  --bg-backdrop: rgba(45, 45, 45, 0.5);
  --bg-invert: rgb(210, 210, 212);
  --bg-selected: rgb(18, 18, 25);
  --bg-highlighter: rgba(255, 163, 0, 0.2);
  --txt-base: #ddd;
  --txt-light: #999;
  --txt-invert: rgb(41, 41, 41);
  --txt-anchor: rgb(100, 200, 235);
  --txt-alert: rgba(250, 250, 250, 0.9);
  --font-weight-thin: 160;
  --font-weight-light: 240;
  --font-weight-medium: 360;
  --font-weight-semibold: 420;
  --font-weight-bold: 500;
  --btn-text: rgb(230, 230, 230);
  --btn-base: rgb(40, 50, 75);
  --btn-halo: rgba(255, 255, 255, 0.1);
  --btn-blue: hsl(215, 56%, 27%);
  --btn-blue-hover: rgb(0, 50, 140);
  --btn-blue-active: rgb(0, 45, 100);
  --btn-green: hsl(135, 60%, 16%);
  --btn-green-hover: rgb(0, 90, 10);
  --btn-green-active: rgb(0, 60, 10);
  --btn-red: rgb(115, 19, 19);
  --btn-red-hover: rgb(140, 15, 15);
  --btn-red-active: rgb(100, 5, 5);
  --btn-soft-hint: rgba(101, 100, 100, 0.1);
  --btn-disabled-c1: rgb(80, 80, 80);
  --btn-disabled-c2: rgb(90, 90, 90);
  --btn-icon-hover-filter: brightness(1.5);
  --btn-icon-to-white-filter: brightness(2) grayscale(1);
  --gui-line-hard: rgb(91, 90, 90);
  --gui-line: rgb(61, 60, 60);
  --gui-line-soft: rgb(61, 60, 60);
  --gui-scroll-track: rgba(21, 20, 20, 0.3);
  --gui-scroll-thumb: rgb(71, 70, 70);
  --gui-spinner-c1: rgb(0, 185, 250);
  --gui-spinner-c2: rgb(0, 40, 80);
  --gui-event-icon-filter: brightness(0.7);
  --gui-fade: 0.5;
  --gui-fade-soft: 0.2;
  --input-scheme: dark;
  --input-base: rgb(0, 2, 8);
  --input-text: rgb(240, 240, 240);
  --input-border: rgba(66, 68, 70, 0.5);
  --input-placeholder: rgb(100, 100, 100);
  --input-disabled-opacity: 0.4;
  --input-blue: rgb(3, 93, 195);
  --input-radio-checked: rgb(225, 225, 255);
  --input-focus-drop: rgba(3, 93, 195, 0.5);
  --input-focus-outline: rgb(71, 95, 107);
  --color-gray: rgb(71, 70, 70);
  --color-gray-plus: rgb(91, 90, 90);
  --color-dark-gray: rgb(71, 70, 70);
  --color-dark-gray-plus: rgb(91, 90, 90);
  --color-green: #0A2B03;
  --color-green-plus: #060;
  --color-orange: #863804;
  --color-orange-plus: #c27b0a;
  --color-red: #750000;
  --color-red-plus: #a00;
  --color-highlighter: #b8ab88;
  --color-burgundy: #551507;
  --color-yellow: #c8b432;
  --color-hint-blue: #37424B;
  --color-hint-green: #28492E;
  --color-hint-red: #731919;
  --color-hint-orange: #733925;
  --theme-grad-top: rgb(23, 25, 30);
  --theme-grad-top-alpha: rgba(23, 25, 30, 0.6);
  --theme-grad-bottom: rgb(33, 35, 40);
  --theme-logo-panacea360: url('../svg/app/panacea360-for-dark.svg');
  --theme-btn-halo: rgba(255, 255, 255, 0.1);
  --theme-btn-hover: rgb(0, 0, 0);
  --theme-txt: #ccc;
  --theme-anchor: rgb(100, 200, 235);
  --theme-line: rgba(20, 20, 22, 0.3);
  --theme-grey-line: rgba(204, 204, 204, 0.3);
  --theme-hitarea: rgba(103, 105, 110, 0.1);
  --theme-fav-btn-opacity: 0.1;
  --theme-svg-fill-grey: #ccc;
  --i-add-file: url("../svg/dark/add-file.1.svg");
  --i-aside-magic: url("../svg/dark/aside-magic.1.svg");
  --i-bell: url("../svg/dark/bell.1.svg");
  --i-box: url("../svg/dark/box.1.svg");
  --i-barchart: url("../svg/dark/barchart.1.svg");
  --i-btn-add-file: url("../svg/dark/btn-add-file.1.svg");
  --i-btn-arrow-down: url("../svg/dark/btn-arrow-down.1.svg");
  --i-btn-arrow-up: url("../svg/dark/btn-arrow-up.1.svg");
  --i-btn-check: url("../svg/dark/btn-check.1.svg");
  --i-btn-cross: url("../svg/dark/btn-cross.1.svg");
  --i-btn-decr: url("../svg/dark/btn-decr.1.svg");
  --i-btn-dir-right: url("../svg/dark/btn-dir-right.1.svg");
  --i-btn-eye: url("../svg/dark/btn-eye.1.svg");
  --i-btn-incr: url("../svg/dark/btn-incr.1.svg");
  --i-btn-plus: url("../svg/dark/btn-plus.1.svg");
  --i-arrow-select: url("../svg/dark/arrow-select.1.svg");
  --i-arrow-down: url("../svg/dark/arrow-down.1.svg");
  --i-arrow-up: url("../svg/dark/arrow-up.1.svg");
  --i-check: url("../svg/dark/check.1.svg");
  --i-cross: url("../svg/dark/cross.1.svg");
  --i-cog: url("../svg/dark/cog.1.svg");
  --i-decr: url("../svg/dark/decr.1.svg");
  --i-eye: url("../svg/dark/eye.1.svg");
  --i-dir-right: url("../svg/dark/dir-right.1.svg");
  --i-dir-out: url("../svg/dark/dir-out.1.svg");
  --i-go-right: url("../svg/dark/go-right.1.svg");
  --i-graph: url("../svg/dark/graph.1.svg");
  --i-incr: url("../svg/dark/incr.1.svg");
  --i-lat-L-NA: url("../svg/dark/lat-L-NA.1.svg");
  --i-lat-L-red: url("../svg/dark/lat-L-red.1.svg");
  --i-lat-L-query: url("../svg/dark/lat-L-query.1.svg");
  --i-lat-L-inactive: url("../svg/dark/lat-L-inactive.1.svg");
  --i-lat-R-NA: url("../svg/dark/lat-R-NA.1.svg");
  --i-lat-R-green: url("../svg/dark/lat-R-green.1.svg");
  --i-lat-R-query: url("../svg/dark/lat-R-query.1.svg");
  --i-lat-R-inactive: url("../svg/dark/lat-R-inactive.1.svg");
  --i-menu: url("../svg/dark/menu.1.svg");
  --i-money: url("../svg/dark/money.1.svg");
  --i-office: url("../svg/dark/office.1.svg");
  --i-patients: url("../svg/dark/patients.1.svg");
  --i-p-front: url("../svg/dark/p-front.1.svg");
  --i-p-back: url("../svg/dark/p-back.1.svg");
  --i-pencil: url("../svg/dark/pencil.1.svg");
  --i-pencil-orange: url("../svg/dark/pencil-orange.1.svg");
  --i-plus: url("../svg/dark/plus.1.svg");
  --i-search: url("../svg/dark/search.1.svg");
  --i-spinner: url("../svg/dark/spinner.1.svg");
  --i-shift-left: url("../svg/dark/shift-left.1.svg");
  --i-shift-right: url("../svg/dark/shift-right.1.svg");
  --i-star: url("../svg/dark/star.1.svg");
  --i-star-edge: url("../svg/dark/star-edge.1.svg");
  --i-tick: url("../svg/dark/tick.1.svg");
  --i-tick-green: url("../svg/dark/tick-green.1.svg");
  --i-trash: url("../svg/dark/trash.1.svg");
}

@supports (color: oklch(0% 0 0deg)) {
  :root {
    --brand-orange: oklch(70% 0.2209 46.59deg);
    --brand-teal: oklch(69.42% 0.1542 212.0354deg);
  }
}
@media only screen and (max-width: 590px) {
  :root {
    --font-weight-thin: 350;
    --font-weight-light: 350;
  }
  :root.theme-dark {
    --font-weight-thin: 350;
    --font-weight-light: 350;
  }
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gui-scroll-track);
}

::-webkit-scrollbar-track-piece {
  background: var(--gui-scroll-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--gui-scroll-thumb);
}

@supports (scrollbar-color: black white) {
  * {
    scrollbar-color: var(--gui-scroll-thumb) var(--gui-scroll-track);
    scrollbar-width: thin;
  }
}
*:focus-visible {
  outline: 1px dotted var(--input-focus-outline);
  outline-offset: -1px;
}

:is(button, .as-btn):focus-visible {
  outline: 1px solid var(--input-focus-outline);
  outline-offset: -1px;
}

.hidden,
*[hidden] {
  display: none !important;
}

.tr-hidden {
  visibility: collapse;
}

.inline {
  display: inline-block;
}

.display-block {
  display: block !important;
}

.display-flex {
  display: flex !important;
}

.invisible {
  visibility: hidden;
}

:is(.visually-hidden, .sr-only) {
  position: absolute;
  transform: scale(0);
  border: 0;
  overflow: hidden;
}

.cols-1 {
  width: 8.33333%;
}

.cols-2 {
  width: 16.66667%;
}

.cols-3 {
  width: 25%;
}

.cols-4 {
  width: 33.33333%;
}

.cols-5 {
  width: 41.66667%;
}

.cols-6 {
  width: 50%;
}

.cols-7 {
  width: 58.33333%;
}

.cols-8 {
  width: 66.66667%;
}

.cols-9 {
  width: 75%;
}

.cols-10 {
  width: 83.33333%;
}

.cols-11 {
  width: 91.66667%;
}

:is(.cols-12, .cols-full) {
  width: 100%;
}

[popover] {
  display: none;
  border: none;
}
[popover]:popover-open {
  display: block;
}

/* remove default arrow - possibly an a11ty problem (but this is a browser issue!) */
summary {
  list-style: none;
}
summary::-webkit-details-marker {
  /* arrow in safari */
  display: none;
}

:root {
  font: var(--font-weight-medium, 400) 14px/1.4 "Roboto", system-ui;
  background-color: var(--bg-page);
}
@media only screen and (orientation: portrait) and (max-width: 590px) {
  :root {
    font-size: 12px;
  }
}
@media only screen and (orientation: landscape) and (max-height: 590px) and (max-width: 900px) {
  :root {
    font-size: 12px;
  }
}
@supports (color-scheme: dark) {
  :root {
    color-scheme: var(--input-scheme);
  }
}

body {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  background: var(--bg-page);
  color: var(--txt-base);
}
body.bliss {
  display: grid;
  grid: 48px 1fr/1fr;
  min-height: 100svh;
}

header.banner {
  position: sticky;
  top: 0;
  z-index: 9;
  height: 48px;
  padding-inline: 4px;
  background: var(--bg-nav);
}

h1.app-name {
  all: unset;
  box-sizing: border-box;
  user-select: none;
  position: fixed;
  inset: 16px auto auto 64px;
  font: var(--font-weight-light) 18px/1 "Roboto", system-ui;
  transition: color 250ms ease-out;
  color: #fff;
}
.theme-light h1.app-name {
  color: var(--brand-dark-blue);
}
.theme-dark h1.app-name {
  color: var(--brand-teal);
}
.focus-mode h1.app-name {
  opacity: var(--gui-fade, 0.5);
  font-size: 1rem;
  color: var(--txt-base) !important;
  inset: auto 8px 8px auto;
}
@media only screen and (width <= 1000px) {
  h1.app-name {
    opacity: var(--gui-fade, 0.5);
    font-size: 1rem;
    color: var(--txt-base) !important;
    inset: auto 8px 8px auto;
  }
}

body.mdit {
  min-height: 100svh;
  background: linear-gradient(var(--theme-grad-top) 80px, var(--theme-grad-top) 80px, var(--theme-grad-bottom)) fixed;
}
body.mdit h2 {
  color: var(--theme-txt);
  font-weight: var(--font-weight-thin);
  font-size: 1.57rem;
  line-height: 1;
  margin-block-end: 16px;
}
@media only screen and (orientation: portrait) and (max-width: 590px) {
  body.mdit h2 {
    font-size: 1.29rem;
  }
}
@media only screen and (orientation: landscape) and (max-height: 590px) and (max-width: 900px) {
  body.mdit h2 {
    font-size: 1.29rem;
  }
}

header.mdit-banner {
  position: sticky;
  inset: 0 0 auto 0;
  height: 80px;
  background: var(--theme-grad-top-alpha);
  border-bottom: 1px solid var(--theme-grad-top);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-inline-start: 48px;
}
header.mdit-banner svg {
  height: 30px;
  width: auto;
}
header.mdit-banner h1 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.86rem;
  line-height: 1;
  font-weight: var(--font-weight-light);
  transform: translateY(-3px);
}
.theme-light header.mdit-banner h1 {
  color: #fff;
  font-weight: 400;
}
header.mdit-banner h1.title {
  transform: none;
  font-size: 1.71rem;
  font-weight: var(--font-weight-thin);
}
header.mdit-banner a.exit {
  position: absolute;
  top: 25px;
  right: 48px;
  color: var(--btn-text);
  background: var(--btn-base);
  padding: 6px 16px;
  border-radius: 5px;
}
header.mdit-banner a.exit:is(:hover, :focus) {
  background: var(--btn-blue-hover);
  outline: 3px solid var(--gui-line-soft);
  outline-offset: 2px;
}
@media only screen and (width <= 1000px) {
  header.mdit-banner {
    padding-inline-start: 16px;
  }
  header.mdit-banner a.exit {
    right: 16px;
  }
}

main.mdit-hub {
  display: grid;
  grid: auto-flow/2fr 1fr;
  gap: 48px;
  grid-auto-columns: 1fr;
  padding: 8px 48px 48px 48px;
}
@media only screen and (width <= 1000px) {
  main.mdit-hub {
    display: block;
    padding-inline: 16px;
  }
  main.mdit-hub > * {
    margin-block-end: 32px;
  }
}
@media only screen and (width >= 1800px) {
  main.mdit-hub {
    gap: 64px;
  }
  main.mdit-hub .app-browser-check {
    grid-area: 1/3/span 3;
  }
  main.mdit-hub .mdit-newsfeed {
    grid-area: 1/2/span 3;
  }
  main.mdit-hub .our-apps {
    grid-column: span 3;
  }
}

.mdit-newsfeed {
  grid-area: 2/2/span 4;
  overflow-y: auto;
}
.mdit-newsfeed article {
  color: var(--theme-txt);
  margin-block-end: 48px;
  padding-inline-start: 16px;
  border-left: 2px solid var(--brand-orange);
}
.mdit-newsfeed article a {
  font-weight: 450;
  color: var(--theme-anchor);
}
.mdit-newsfeed header {
  display: grid;
  grid: 1fr/1fr max-content;
  gap: 8px;
}
.mdit-newsfeed header h2 {
  font-size: 1.29rem;
  font-weight: var(--font-weight-light);
  margin-block-end: 8px;
  line-height: 1.2;
}
.mdit-newsfeed header time {
  place-self: start;
  font-size: 0.64rem;
  font-weight: 400;
  color: var(--theme-svg-fill-grey);
}
.mdit-newsfeed p {
  line-height: 1.6;
  margin-block-end: 8px;
}

.our-apps {
  padding-block-start: 64px;
}

.mdit-learn-more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: max-content;
  gap: 32px 64px;
}
@media only screen and (orientation: portrait) and (max-width: 590px) {
  .mdit-learn-more {
    display: block;
  }
  .mdit-learn-more .about-app {
    padding-block-end: 64px;
  }
}
@media only screen and (orientation: landscape) and (max-height: 590px) and (max-width: 900px) {
  .mdit-learn-more {
    display: block;
  }
  .mdit-learn-more .about-app {
    padding-block-end: 64px;
  }
}
.mdit-learn-more .app-logo {
  position: absolute;
  top: 16px;
  left: 0;
}
.mdit-learn-more .app-logo svg {
  contain: content;
}
.mdit-learn-more .app-logo svg.openeyes {
  height: 44px;
}
.mdit-learn-more .app-logo svg.panacea360-mono {
  height: 50px;
}
.mdit-learn-more .app-logo svg.iris-ai-mono {
  height: 28px;
}
.mdit-learn-more .app-logo svg.openpims-mono {
  width: 72px;
}
.mdit-learn-more .app-logo svg.atlas-mono {
  width: 50px;
}
.mdit-learn-more .about {
  padding: 48px 0 0 80px;
  color: var(--theme-svg-fill-grey);
}
.mdit-learn-more .about p {
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  margin-block-end: 10px;
  color: var(--theme-txt);
}
.mdit-learn-more .about p b {
  font-weight: 450;
}
.mdit-learn-more .about a {
  color: inherit;
  font-size: 0.86rem;
  font-weight: 450;
  text-decoration: underline;
}
.mdit-learn-more .about a:is(:hover, :focus) {
  text-decoration: none;
  color: var(--theme-anchor);
}

.mdit-active-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: 20vh;
  grid-auto-rows: 20vh;
  gap: 32px;
}
@media only screen and (width <= 1000px) {
  .mdit-active-apps {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    padding-block-end: 32px;
  }
}

a.go-app {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  min-height: 100px;
  background: #fff;
  border: 3px solid #fff;
  border-radius: 13px;
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  transition: all 250ms ease-in-out;
}
.theme-dark a.go-app {
  background: rgb(222, 221, 221);
  border-color: rgb(222, 221, 221);
}
a.go-app svg {
  height: 100%;
  width: 90%;
}
a.go-app svg.openeyes {
  width: 70%;
}
a.go-app svg:is(.openpims, .atlas) {
  height: 80%;
}
a.go-app svg.panacea360 {
  height: 90%;
}
a.go-app::before {
  content: attr(data-version);
  position: absolute;
  bottom: 3px;
  left: 8px;
  font-size: 0.57rem;
  font-weight: 700;
  color: #888;
}
a.go-app::after {
  content: "";
  pointer-events: none;
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: 3px;
  right: 3px;
  border-radius: 50%;
  background: center/12px var(--i-dir-right) var(--bg-page) no-repeat;
  transition: background-color 250ms ease-in-out;
}
a.go-app:is(:hover, :focus-within) {
  border-color: var(--btn-blue-hover);
  outline-offset: 5px;
}
a.go-app:is(:hover, :focus-within)::after {
  background-color: var(--btn-blue-hover);
  background-image: var(--i-btn-dir-right);
}

details.app-hub-extra {
  outline: 3px solid var(--gui-line-soft);
  outline-offset: 2px;
  border-radius: 9px;
}
details.app-hub-extra .details-content {
  background: var(--bg-page);
  color: var(--txt-base);
  border-radius: 9px;
  padding: 16px;
  margin-block-start: 8px;
}
details.app-hub-extra summary {
  display: grid;
  box-sizing: border-box;
  place-content: center;
  grid-template-columns: 1fr 24px;
  gap: 32px;
  cursor: pointer;
  padding: 12px 16px;
  background: var(--bg-page);
  border-radius: 9px;
  font-size: 1.14rem;
}
details.app-hub-extra summary::after {
  content: "";
  width: 16px;
  height: 16px;
  background: center/contain var(--i-plus) transparent no-repeat;
  place-self: center;
}
details.app-hub-extra summary:hover {
  color: var(--btn-text);
  background: var(--btn-blue-hover);
}
details.app-hub-extra summary:hover::after {
  background-image: var(--i-btn-plus);
}
details.app-hub-extra summary:focus {
  outline: 2px solid var(--txt-light);
}
details.app-hub-extra[open] summary {
  color: var(--btn-text);
  background-color: var(--btn-blue-active);
}
details.app-hub-extra[open] summary::after {
  background-image: var(--i-btn-arrow-up);
}

.app-browser-check {
  grid-column: 2;
  place-self: start stretch;
  padding-block: 32px;
}
.app-browser-check .alert-box {
  transition: all 1s ease-out;
}

.mdit-app {
  height: calc(100svh - 80px);
  display: grid;
  justify-content: center;
  grid: 1fr auto/1fr;
  place-items: center;
  gap: 16px;
}

body.mdit .about-app {
  position: relative;
  border-top: 1px dotted var(--theme-grey-line);
  padding-block-start: 16px;
}

main.mdit-app .about-app {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block-end: 16px;
  color: var(--theme-txt);
  font-weight: var(--font-weight-medium);
}

body.mdit .app-logo svg {
  fill: var(--theme-svg-fill-grey);
  width: auto;
  height: auto;
}

main.mdit-app .about-app {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block-end: 16px;
  color: var(--theme-txt);
  font-weight: var(--font-weight-medium);
}
main.mdit-app .app-logo {
  width: fit-content;
}
main.mdit-app .app-logo svg {
  height: 45px;
}

.mdit-app .app-setup {
  padding: 0 16px;
}
.mdit-app .app-setup h2 {
  text-align: center;
}
.mdit-app .app-setup :is(button, .as-btn):is(:hover, :focus) {
  border-color: var(--theme-btn-halo);
}

.app-setup :is(.app-form, .app-login) {
  border: 3px solid var(--theme-line);
  border-radius: 13px;
  background: var(--theme-hitarea);
  color: var(--theme-txt);
}
.app-setup :is(.app-form, .app-login) .label-over-input {
  color: var(--input-text);
}
.app-setup :is(.app-form, .app-login) a.pro:hover {
  color: currentColor;
  text-decoration: underline;
}

.app-setup .app-select-site {
  border: 3px solid var(--theme-line);
  border-radius: 13px;
  padding: 8px;
  display: grid;
  grid-template-columns: 280px;
  grid-template-rows: 40px;
  grid-auto-rows: 40px;
  gap: 8px;
  align-items: center;
  max-height: 50svh;
  width: fit-content;
  overflow: hidden auto;
  overscroll-behavior: contain;
}
@media only screen and (width > 590px) {
  .app-setup .app-select-site.many-sites {
    grid-template-columns: 280px 280px;
  }
}
@media only screen and (width >= 1800px) {
  .app-setup .app-select-site.many-sites {
    grid-template-columns: 280px 280px 280px;
  }
}
.app-setup .app-select-site > button {
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  border: 3px solid var(--btn-blue);
  border-radius: 5px;
  color: var(--btn-text);
  background-color: var(--btn-blue);
  width: 280px;
  height: 40px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-setup .app-select-site > button.org-admin-btn {
  background: center left 8px/16px url("../svg/mdit/office.svg") var(--btn-base) no-repeat;
  font-weight: var(--font-weight-bold);
}
.app-setup .app-select-site > button:is(:hover, :focus) {
  border-color: var(--theme-btn-halo);
  background-color: var(--btn-blue-hover);
}
.app-setup .app-select-site > button:active {
  background-color: var(--btn-blue-active);
}

.app-setup .app-form {
  width: 590px;
  padding: 32px;
}
@media only screen and (orientation: portrait) and (max-width: 590px) {
  .app-setup .app-form {
    width: 90vw;
  }
}
@media only screen and (orientation: landscape) and (max-height: 590px) and (max-width: 900px) {
  .app-setup .app-form {
    width: 90vw;
  }
}

.app-setup .app-login {
  width: 300px;
  padding: 8px;
}
.app-setup .app-login button {
  width: 100%;
}
.app-setup .app-login .forgot-password-help {
  text-align: right;
  padding-inline: 8px;
  font-size: 0.64rem;
  font-weight: var(--font-weight-semibold);
  opacity: var(--gui-fade-soft);
}

.bliss-grid {
  display: grid;
  grid: "nav main" 1fr/300px 1fr;
  gap: 16px;
  height: calc(100svh - 48px);
}
.bliss-grid.panel-gap {
  gap: 4px;
}
.focus-mode .bliss-grid {
  grid-template-columns: 1fr;
  grid-template-areas: "main";
}
@media only screen and (width <= 1000px) {
  .bliss-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }
}
@media only screen and (width >= 1800px) {
  .bliss-grid {
    grid: "nav main aside" 1fr/300px 1fr 450px;
  }
  .focus-mode .bliss-grid {
    grid-template-columns: 1fr 450px;
    grid-template-areas: "main aside";
  }
}

.bliss-grid > main {
  grid-area: main;
  overflow: hidden auto;
  padding-block: 16px 48px;
  padding-inline: 16px;
}
@media only screen and (orientation: portrait) and (max-width: 590px) {
  .bliss-grid > main {
    padding-inline-start: 8px;
  }
}
@media only screen and (orientation: landscape) and (max-height: 590px) and (max-width: 900px) {
  .bliss-grid > main {
    padding-inline-start: 8px;
  }
}
@media only screen and (width >= 1800px) {
  .bliss-grid > main {
    padding-inline-start: 36px;
  }
}
.bliss-grid.panel-gap > main {
  padding: 4px;
}

.bliss-grid > .bliss-nav:not([popover]) {
  grid-area: nav;
}

.bliss-grid > aside {
  padding-block-start: 16px;
  overflow: hidden auto;
}
@media only screen and (width >= 1800px) {
  .bliss-grid > aside:not([popover]) {
    display: block;
    position: static;
    grid-area: aside;
  }
}

nav.toolbar {
  display: grid;
  grid: 1fr/300px 48px 1fr repeat(2, max-content) 300px;
  place-items: center stretch;
  height: 48px;
}
nav.toolbar button:not(.ico-btn) {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
}
@media only screen and (width <= 1000px) {
  nav.toolbar {
    grid-template-columns: max-content 1fr repeat(2, max-content) 1fr;
  }
  nav.toolbar button#toolbar-focus-mode-btn {
    display: none;
  }
}

button#toolbar-nav-btn {
  background: var(--theme-grad-top);
  border-radius: 0 0 5px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-inline: 4px;
  width: 296px;
}
button#toolbar-nav-btn::before {
  content: "";
  height: 48px;
  width: 48px;
  background: center/32px var(--theme-logo-panacea360) no-repeat;
}
button#toolbar-nav-btn::after {
  content: "";
  width: 48px;
  height: 48px;
  background: center/16px var(--i-menu) no-repeat;
  opacity: 0;
}
.theme-mdit button#toolbar-nav-btn::after {
  background-image: url("../svg/mdit/menu.svg");
}
button#toolbar-nav-btn:not(:disabled) {
  padding-inline: 8px;
  cursor: pointer;
  width: 100px;
}
button#toolbar-nav-btn:not(:disabled)::after {
  opacity: 1;
}
button#toolbar-nav-btn:not(:disabled):is(:focus, :hover) {
  background: var(--theme-btn-hover);
}
button#toolbar-nav-btn.bliss-js-ready {
  transition-property: padding-inline-start, width;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
}
button#toolbar-nav-btn.bliss-js-ready::after {
  transition: opacity 750ms ease-out;
}

button#toolbar-search-btn {
  place-self: center start;
  height: 48px;
  width: min(300px, 100%);
  padding-inline: 16px;
  border-radius: 5px;
  position: relative;
}
button#toolbar-search-btn:is(:focus, :hover) {
  background: var(--bg-max);
}
button#toolbar-search-btn:is(:focus, :hover)::after {
  display: none;
}
button#toolbar-search-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto 0;
  height: 32px;
  border: 3px solid var(--gui-line-soft);
  border-radius: 24px;
  opacity: var(--gui-fade);
}
button#toolbar-search-btn::before {
  content: "…";
  position: absolute;
  top: 16px;
  left: 38px;
  color: var(--txt-light);
}
@media only screen and (width <= 1000px) {
  button#toolbar-search-btn::after {
    margin-inline: 8px;
  }
}

button#toolbar-user-btn {
  height: 48px;
  display: grid;
  grid: 1fr/1fr 32px;
  place-items: center end;
  gap: 8px;
  border-left: 4px solid var(--bg-page);
  padding-inline: 8px;
}
button#toolbar-user-btn:is(:focus, :hover) {
  background: var(--bg-max);
}
@media only screen and (width <= 1000px) {
  button#toolbar-user-btn {
    gap: 2px;
  }
  button#toolbar-user-btn .site::before {
    display: none !important;
  }
}
button#toolbar-user-btn * {
  pointer-events: none;
  user-select: none;
}
button#toolbar-user-btn .site {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: var(--font-weight-bold);
  color: var(--txt-light);
  padding: 2px 4px;
  border-radius: 5px;
}
button#toolbar-user-btn .site::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: 8px;
  opacity: var(--gui-fade);
  background: center/12px var(--i-office) no-repeat;
  translate: 0 1px;
}
button#toolbar-user-btn .avatar {
  display: grid;
  place-items: center;
  text-align: center;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  contain: content;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  background: #334;
}
button#toolbar-user-btn .avatar .initials {
  color: var(--brand-teal);
}

button#toolbar-aside-btn, button#toolbar-notify-btn {
  height: 48px;
  width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
  border-left: 4px solid var(--bg-page);
  transition: width 250ms ease-in-out;
}
button#toolbar-aside-btn:is(:focus, :hover), button#toolbar-notify-btn:is(:focus, :hover) {
  background: var(--bg-max);
}
@media only screen and (width <= 1000px) {
  button#toolbar-aside-btn, button#toolbar-notify-btn {
    width: 48px;
  }
}

div.bliss-nav {
  background: linear-gradient(to bottom, var(--theme-grad-top), var(--theme-grad-bottom));
  overflow: hidden auto;
  border-radius: 5px;
  margin: 4px;
  padding: 8px 16px;
  width: 296px;
  height: auto;
  color: var(--theme-txt);
}
div.bliss-nav * {
  user-select: none;
}
div.bliss-nav hr {
  border-bottom-color: var(--theme-line);
}
div.bliss-nav[popover] {
  margin: 0;
  transition-property: opacity, translate;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
}
div.bliss-nav[popover]:popover-open {
  inset: 52px auto 4px 4px;
  translate: 0 0;
  opacity: 1;
}
@starting-style {
  div.bliss-nav[popover]:popover-open {
    opacity: 0.5;
    translate: -10px 0;
  }
}

.theme-mdit .bliss-nav .ico.star-o {
  background-image: url("../svg/mdit/star-edge.svg");
}
.theme-mdit .bliss-nav .ico.star {
  background-image: url("../svg/mdit/star.svg");
}
.theme-mdit .bliss-nav .ico.office {
  background-image: url("../svg/mdit/office.svg");
}
.theme-mdit .bliss-nav .ico.money {
  background-image: url("../svg/mdit/money.svg");
}
.theme-mdit .bliss-nav .ico.patients {
  background-image: url("../svg/mdit/patients.svg");
}
.theme-mdit .bliss-nav .ico.box {
  background-image: url("../svg/mdit/box.svg");
}
.theme-mdit .bliss-nav .ico.graph {
  background-image: url("../svg/mdit/graph.svg");
}
.theme-mdit .bliss-nav .ico.barchart {
  background-image: url("../svg/mdit/barchart.svg");
}
.theme-mdit .bliss-nav .ico.cog {
  background-image: url("../svg/mdit/cog.svg");
}
.theme-mdit .bliss-nav button#clear-favourites-btn {
  background-image: url("../svg/mdit/star.svg");
}

.bliss-nav a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 24px;
  width: 100%;
  gap: 8px;
  color: var(--theme-txt);
  font-size: 0.93rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: 3px;
}
.bliss-nav a span.suffix {
  font-weight: var(--font-weight-light);
  opacity: var(--gui-fade);
}
.bliss-nav a:is(:hover, :focus, :active, .selected) {
  color: var(--theme-anchor);
  text-decoration: none;
  background-color: var(--theme-hitarea);
}
.bliss-nav app-nav a {
  padding-inline-start: 8px;
}

.bliss-nav {
  interpolate-size: allow-keywords;
}

details.nav-grp {
  margin-block: 8px;
  padding-block: 8px;
  height: 48px;
  overflow: hidden;
  border-top: 4px solid rgba(0, 0, 0, 0);
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  transition-property: height, border-color, padding;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
}
details.nav-grp:is(:hover, :focus-within, [open]) summary {
  opacity: 1;
}
details.nav-grp[open] {
  height: auto;
  padding-block-end: 16px;
  border-top-color: var(--theme-line);
  border-bottom-color: var(--theme-line);
}
details.nav-grp summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  opacity: 0.6;
  padding: 4px 0;
  margin-block-end: 4px;
  border-radius: 3px;
  background: transparent;
  font-size: 1.14rem;
  font-weight: var(--font-weight-light);
}
details.nav-grp summary:is(:hover, :focus) {
  background: var(--theme-hitarea);
}

nav.user-favourites {
  margin-block: 8px 16px;
}
nav.user-favourites a {
  margin-block: 8px;
}
nav.user-favourites.bliss-js-ready {
  transition: height 750ms ease-in-out;
}

.clear-all-favourites {
  margin-block-start: 48px;
  padding-block: 8px;
  border-top: 2px solid var(--theme-line);
}
.clear-all-favourites button#clear-favourites-btn {
  height: 24px;
  font-size: 12px;
  border: none;
  padding: 0 8px 0 32px;
  color: var(--theme-txt);
  background: center left 8px/12px var(--i-star) no-repeat var(--theme-hitarea);
  opacity: var(--gui-fade-soft);
}
.clear-all-favourites button#clear-favourites-btn:is(:hover, :focus, :active) {
  opacity: 1;
}

app-nav {
  display: grid;
  grid: 24px/24px 1fr;
  gap: 8px;
  place-items: center start;
  margin-block: 8px;
  padding-inline-end: 4px;
}
app-nav:not(:where(:hover, :focus-within)) button.ico-btn.subtle {
  opacity: 0.1;
}
app-nav .ico.nav-star {
  background-image: var(--i-star-edge);
}
.theme-mdit app-nav .ico.nav-star {
  background-image: url("../svg/mdit/star-edge.svg");
}
app-nav[data-favourite=true] > button.ico-btn {
  opacity: 0.8;
}
app-nav[data-favourite=true] .ico.nav-star {
  background-image: var(--i-star);
}
.theme-mdit app-nav[data-favourite=true] .ico.nav-star {
  background-image: url("../svg/mdit/star.svg");
}

.bliss-nav .legal-about {
  opacity: var(--gui-fade-soft);
  margin-block-start: 32px;
  padding-block-start: 16px;
  font-size: 0.64rem;
  color: var(--theme-txt);
  line-height: 1.8;
  border-top: 2px solid var(--theme-line);
}

div.bliss-user {
  background: var(--bg-popup);
  overflow: hidden auto;
  border-radius: 5px;
  margin: 4px;
  padding: 16px;
  width: 296px;
  box-shadow: 0 0 4px 4px var(--bg-page);
}
div.bliss-user[popover] {
  transition-property: opacity, translate;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
}
div.bliss-user[popover]:popover-open {
  position: fixed;
  inset: 52px 4px auto auto;
  margin: 0;
  translate: 0 0;
  opacity: 1;
}
@starting-style {
  div.bliss-user[popover]:popover-open {
    opacity: 0.5;
    translate: 10px 0;
  }
}

.bliss-user .user-name {
  font-size: 1.14rem;
}
.bliss-user .user-name .user-family {
  display: block;
  font-weight: var(--font-weight-bold);
}

main .user-name.update-profile {
  font-size: 1.86rem;
}
main .user-name.update-profile .user-family {
  display: inline-block;
}

.select-language {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
}
.select-language > button.ico-btn {
  flex: 1 1 0;
  height: 48px;
  opacity: var(--gui-fade);
}
.select-language > button.ico-btn:is(:hover, :focus) {
  opacity: 1;
  background: var(--bg-max);
}
.select-language > button.ico-btn:disabled {
  opacity: 1;
  background: var(--bg-max);
  outline: 2px solid var(--bg-focus);
  outline-offset: 2px;
}

.select-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.select-theme > button {
  flex: 1;
  user-select: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 5px;
  border: none;
  padding: 6px 16px;
}
.select-theme > button.theme-mdit {
  color: #ddd;
  background: #25536f;
}
.select-theme > button.theme-dark {
  color: #ddd;
  background: #212328;
}
.select-theme > button.theme-light {
  color: #111;
  background: #e6e6e7;
}
.select-theme > button:is(:hover, :focus) {
  outline: 2px solid var(--input-focus-outline);
  outline-offset: 1px;
}

:root.theme-mdit button.theme-mdit {
  outline: 2px solid var(--btn-blue);
  outline-offset: 1px;
}
:root.theme-light button.theme-light {
  outline: 2px solid var(--btn-blue);
  outline-offset: 1px;
}
:root.theme-dark button.theme-dark {
  outline: 2px solid var(--brand-teal);
  outline-offset: 1px;
}

aside.bliss-aside {
  background: var(--bg-popup);
  overflow: hidden auto;
  border-radius: 5px;
  margin: 4px;
  height: auto;
}
aside.bliss-aside[popover] {
  width: min(450px, 100vw);
  transition-property: opacity, translate;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
}
aside.bliss-aside[popover]:popover-open {
  position: fixed;
  inset: 52px 4px auto auto;
  margin: 0;
  translate: 0 0;
  opacity: 1;
}
@starting-style {
  aside.bliss-aside[popover]:popover-open {
    opacity: 0.5;
    translate: 10px 0;
  }
}

div.bliss-search {
  background: var(--bg-popup);
  overflow: hidden auto;
  border-radius: 13px;
  padding: 16px;
  box-shadow: 0 0 12px 12px var(--bg-selected);
}
div.bliss-search .search-results {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
div.bliss-search .search-results > :is(output, section) {
  flex: 1 1 0;
}
div.bliss-search[popover] {
  width: min(1000px, 96vw);
  margin: 48px auto;
}
div.bliss-search[popover]:popover-open {
  position: fixed;
  inset: 0;
}
div.bliss-search[popover]::backdrop {
  pointer-events: none;
  background-color: var(--bg-backdrop);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
@media only screen and (orientation: portrait) and (max-width: 590px) {
  div.bliss-search {
    padding-inline: 8px;
  }
}
@media only screen and (orientation: landscape) and (max-height: 590px) and (max-width: 900px) {
  div.bliss-search {
    padding-inline: 8px;
  }
}

.split-sections {
  display: grid;
  grid: auto/1fr 1fr;
  gap: 48px;
}

.fade {
  opacity: var(--gui-fade) !important;
}

:is(h2, h3, h4, h5, h6) {
  font-size: 1.29rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  margin-block-end: 16px;
}

p {
  margin-block-end: 16px;
}

.h2 {
  font-size: 1.86rem;
  font-weight: var(--font-weight-light);
}

.h3 {
  font-size: 1.57rem;
  font-weight: var(--font-weight-light);
}

.h4 {
  font-size: 1.29rem;
  font-weight: var(--font-weight-medium);
}

em {
  font-style: italic;
  font-weight: 400;
}
em > b {
  font-weight: 600;
}

q {
  font-family: "Merriweather", "Georgia", serif;
  font-style: italic;
  font-weight: 400;
}
q > b {
  font-weight: 600;
}
q::before, q::after {
  display: none;
}

.th {
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--txt-light);
}

.big {
  font-size: 1.29rem;
}

a {
  color: var(--txt-anchor);
  text-underline-offset: 2px;
  text-decoration: none;
}
a.pro {
  color: currentColor;
}
a.jump-out {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: var(--font-weight-semibold);
}
a.jump-out:hover::before {
  opacity: 1;
}
a.jump-out::before {
  content: "";
  width: 24px;
  height: 24px;
  background: center/12px var(--i-dir-out) no-repeat;
  opacity: var(--gui-fade);
}
a:hover {
  color: var(--txt-anchor);
}
a:not(.pro):hover {
  text-decoration: underline;
}
a:focus-visible {
  text-decoration: underline;
}
a.as-btn {
  display: inline-block;
  text-decoration: none !important;
}

:is(.fx-out, .fx-l, .fx-r, .fx-c, .fx-btns) {
  display: flex;
}
:is(.fx-out, .fx-l, .fx-r, .fx-c, .fx-btns).v-start {
  align-items: flex-start;
}
:is(.fx-out, .fx-l, .fx-r, .fx-c, .fx-btns).v-stretch {
  height: 100%;
  align-items: stretch;
}
:is(.fx-out, .fx-l, .fx-r, .fx-c, .fx-btns).fx-wrap {
  flex-wrap: wrap;
}
:is(.fx-out, .fx-l, .fx-r, .fx-c, .fx-btns).auto-stack-fx {
  flex-wrap: wrap;
  container: fx-phone-width/inline-size;
}

.fx-out {
  align-items: center;
  justify-content: space-between;
}

.fx-l {
  align-items: center;
  justify-content: flex-start;
}

.fx-r {
  align-items: center;
  justify-content: flex-end;
}

.fx-c {
  align-items: center;
  justify-content: center;
}

.fx-stack {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 16px;
}

.fx-btns {
  gap: 16px;
}
.fx-btns > :is(button, .as-btn) {
  flex: 1 1 0;
}
.fx-btns > :is(button, .as-btn).fx-fill-2 {
  flex: 2 1 0;
}

:is(.fx-fill, .fx-fill-1) {
  flex: 1 1 0;
}

.fx-fill-2 {
  flex: 2 1 0;
}

.fx-fill-3 {
  flex: 3 1 0;
}

.fx-fill-4 {
  flex: 4 1 0;
}

@container fx-phone-width (width < 450px) {
  :is(.fx-fill, .fx-fill-1, .fx-fill-2, .fx-fill-3, .fx-fill-4, button, .as-btn) {
    flex-basis: 100% !important;
  }
}
.sp-sx {
  gap: 4px;
}

.sp-s {
  gap: 8px;
}

.sp-m {
  gap: 16px;
}

.sp-l {
  gap: 32px;
}

.sp-x {
  gap: 48px;
}

.sp-xx {
  gap: 48px;
}

.sp-fx-m {
  gap: 16px 32px;
}

.sp-fx-l {
  gap: 32px 48px;
}

hr {
  display: block;
  border: 0;
  margin: 16px 0;
  border-bottom: 1px solid var(--gui-line-soft);
  opacity: 1 !important;
}
hr.divider {
  margin: 16px 0;
  border-bottom: 2px solid var(--gui-line);
}
hr.soft {
  border-style: dotted;
}
hr:is(.spacer, .spacer-m, .spacer-l) {
  border: none;
  margin: 0;
}
hr.spacer {
  height: 8px;
}
hr.spacer-m {
  height: 16px;
}
hr.spacer-l {
  height: 32px;
}

:is(button, .as-btn):is(.dull-btn, .blue-btn, .green-btn, .red-btn) {
  cursor: pointer;
  font-size: 1rem;
  user-select: none;
  line-height: 1.2;
  white-space: nowrap;
  width: fit-content;
  border: 3px solid var(--btn-base);
  border-radius: 5px;
  padding: 6px 16px;
  color: var(--btn-text);
  background-color: var(--btn-base);
}
:is(button, .as-btn):is(.dull-btn, .blue-btn, .green-btn, .red-btn):is(:hover, :focus) {
  border-color: var(--btn-halo);
}
:is(button, .as-btn):is(.dull-btn, .blue-btn, .green-btn, .red-btn):has(.ico) .ico {
  filter: var(--btn-icon-to-white-filter);
}
:is(button, .as-btn):is(.dull-btn, .blue-btn, .green-btn, .red-btn).big-touch {
  font-size: 1.2rem;
  padding: 12px 16px;
}
:is(button, .as-btn):is(.dull-btn, .blue-btn, .green-btn, .red-btn).compact {
  padding: 2px 6px;
}
:is(button, .as-btn):is(.dull-btn, .blue-btn, .green-btn, .red-btn):disabled {
  pointer-events: none;
  cursor: default;
  color: var(--txt-light);
  border-color: var(--btn-disabled-c1);
  background: repeating-linear-gradient(-55deg, var(--btn-disabled-c1), var(--btn-disabled-c1) 10px, var(--btn-disabled-c2) 10px, var(--btn-disabled-c2) 20px);
}
:is(button, .as-btn):is(.dull-btn, .blue-btn, .green-btn, .red-btn):disabled .ico {
  opacity: 0.3;
}
:is(button, .as-btn):is(.dull-btn, .blue-btn, .green-btn, .red-btn).busy {
  pointer-events: none;
  cursor: default;
  position: relative;
  border-color: var(--input-focus-outline);
}
:is(button, .as-btn).dull-btn:is(:hover, :focus) {
  background-color: var(--btn-blue-hover);
}
:is(button, .as-btn).dull-btn:active {
  background-color: var(--btn-blue-active);
}
:is(button, .as-btn).blue-btn {
  background-color: var(--btn-blue);
  border-color: var(--btn-blue);
}
:is(button, .as-btn).blue-btn:is(:hover, :focus) {
  background-color: var(--btn-blue-hover);
}
:is(button, .as-btn).blue-btn:active {
  background-color: var(--btn-blue-active);
}
:is(button, .as-btn).green-btn {
  background-color: var(--btn-green);
  border-color: var(--btn-green);
}
:is(button, .as-btn).green-btn:is(:hover, :focus) {
  background-color: var(--btn-green-hover);
}
:is(button, .as-btn).green-btn:active {
  background-color: var(--btn-green-active);
}
:is(button, .as-btn).red-btn {
  background-color: var(--btn-red);
  border-color: var(--btn-red);
}
:is(button, .as-btn).red-btn:is(:hover, :focus) {
  background-color: var(--btn-red-hover);
}
:is(button, .as-btn).red-btn:active {
  background-color: var(--btn-red-active);
}

dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(60svw, 1000px);
  max-height: 80svw;
  outline: none;
  overflow: auto;
  overscroll-behavior: contain;
  border: 2px solid var(--bg-max);
  background: var(--bg-popup);
  border-radius: 13px;
  box-shadow: 4px 4px 18px 0 #000;
  padding: 16px;
}
dialog.see-thru {
  border-color: transparent;
  background: var(--bg-backgroup);
}
dialog.easy-dismiss {
  padding-inline-end: 48px;
}
dialog.easy-dismiss .btn-dismiss {
  position: absolute;
  top: 16px;
  right: 8px;
  z-index: 1;
  display: block;
  width: 32px;
  height: 32px;
  background: center/16px var(--i-btn-cross) var(--btn-blue) no-repeat;
  border-radius: 50%;
  border: 3px solid var(--btn-halo);
  cursor: pointer;
}
dialog::backdrop {
  pointer-events: none;
  background-color: var(--bg-backdrop);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.alert-info {
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 450;
  color: var(--txt-alert);
  background: var(--color-dark-gray);
  border: 3px solid var(--color-dark-gray-plus);
  border-radius: 13px;
}
.alert-info.success {
  background: var(--color-green);
  border-color: var(--color-green-plus);
}
.alert-info.issue {
  background: var(--color-orange);
  border-color: var(--color-orange-plus);
}
.alert-info.warn {
  background: var(--color-red);
  border-color: var(--color-red-plus);
}
.alert-info.compact {
  padding: 6px 8px;
  border-radius: 5px;
  border-width: 1px;
}
.alert-info a {
  text-decoration: underline;
}
.alert-info ul {
  list-style: disc inside;
  margin: 5px 0;
}
.alert-info ul li {
  margin-bottom: 3px;
}
.alert-info ul li:last-child {
  margin-bottom: 0;
}
.alert-info.fade-out {
  display: block;
  animation: 4s ease-in forwards fadeout;
}
.alert-info.has-actions {
  display: grid;
  grid: 1fr/1fr min-content;
  gap: 16px;
}
.alert-info :is(button, .button) {
  border: 1px solid var(--bg-html);
  text-decoration: none;
}
.alert-info.dismissible {
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: top 5px right 5px;
  background-image: url("../svg/dark/i/remove-circle.svg");
  background-size: 17px;
  padding-right: 30px;
}
.alert-info.dismissible:is(:focus, :hover) {
  background-color: var(--btn-blue);
}

.ico {
  display: inline-flex;
  line-height: 1;
  vertical-align: middle;
  contain: content;
  width: 24px;
  height: 24px;
  background: center/12px no-repeat;
}
.ico.big {
  background-size: 16px;
}
.ico.big-x {
  width: 48px;
  height: 48px;
  background-size: 32px;
}
.ico.aside-magic {
  background-image: var(--i-aside-magic);
}
.ico.barchart {
  background-image: var(--i-barchart);
}
.ico.box {
  background-image: var(--i-box);
}
.ico.bell {
  background-image: var(--i-bell);
}
.ico.cog {
  background-image: var(--i-cog);
}
.ico.decr {
  background-image: var(--i-decr);
}
.ico.graph {
  background-image: var(--i-graph);
}
.ico.incr {
  background-image: var(--i-incr);
}
.ico.money {
  background-image: var(--i-money);
}
.ico.office {
  background-image: var(--i-office);
}
.ico.p-back {
  background-image: var(--i-p-back);
}
.ico.p-front {
  background-image: var(--i-p-front);
}
.ico.patients {
  background-image: var(--i-patients);
}
.ico.pencil {
  background-image: var(--i-pencil);
}
.ico.pencil-orange {
  background-image: var(--i-pencil-orange);
}
.ico.search {
  background-image: var(--i-search);
}
.ico.shift-r {
  background-image: var(--i-shift-right);
}
.ico.shift-l {
  background-image: var(--i-shift-left);
}
.ico.star {
  background-image: var(--i-star);
}
.ico.star-o {
  background-image: var(--i-star-edge);
}
.ico.tick {
  background-image: var(--i-tick);
}
.ico.tick-green {
  background-image: var(--i-tick-green);
}
.ico.trash {
  background-image: var(--i-trash);
}

.ico-btn {
  all: unset;
  box-sizing: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  opacity: 0.8;
  contain: content;
  border-radius: 5px;
  background-color: var(--btn-soft-hint);
  transition: background-color 250ms ease-in-out, opacity 250ms ease-in-out;
}
.ico-btn > i {
  pointer-events: none;
}
.ico-btn.trash {
  background: center/16px var(--i-trash) no-repeat;
}
.ico-btn.subtle {
  opacity: var(--gui-fade-soft);
}
.ico-btn.no-hint {
  background-color: transparent;
}
.ico-btn:is(:hover, :focus) {
  opacity: 1;
}
.ico-btn:not(.subtle):is(:hover, :focus) {
  background-color: var(--bg-hint);
}
.ico-btn:active {
  opacity: 1;
  background-color: var(--bg-focus);
}
.ico-btn:disabled {
  opacity: var(--gui-fade-soft);
  cursor: default;
  pointer-events: none;
}

i.i-lat {
  display: block;
  height: 24px;
  width: 48px;
  min-width: 48px;
  background-size: 16px;
  background-position: center left 5px, center right 5px;
  background-repeat: no-repeat;
  background-image: var(--i-lat-R-NA), var(--i-lat-L-NA);
}
i.i-lat.tiny {
  width: 24px;
  min-width: 24px;
  background-size: 12px;
  background-position: center left, center right;
}
i.i-lat.R-L {
  background-image: var(--i-lat-R-green), var(--i-lat-L-red);
}
i.i-lat.R-n {
  background-image: var(--i-lat-R-green), var(--i-lat-L-NA);
}
i.i-lat.n-L {
  background-image: var(--i-lat-R-NA), var(--i-lat-L-red);
}
i.i-lat.R-Lq {
  background-image: var(--i-lat-R-green), var(--i-lat-L-query);
}
i.i-lat.Ri-Li {
  background-image: var(--i-lat-R-inactive), var(--i-lat-L-inactive);
}
i.i-lat.Ri-n {
  background-image: var(--i-lat-R-inactive), var(--i-lat-L-NA);
}
i.i-lat.Ri-L {
  background-image: var(--i-lat-R-inactive), var(--i-lat-L-red);
}
i.i-lat.Ri-Lq {
  background-image: var(--i-lat-R-inactive), var(--i-lat-L-query);
}
i.i-lat.n-Li {
  background-image: var(--i-lat-R-NA), var(--i-lat-L-inactive);
}
i.i-lat.R-Li {
  background-image: var(--i-lat-R-green), var(--i-lat-L-inactive);
}
i.i-lat.Rq-Li {
  background-image: var(--i-lat-R-query), var(--i-lat-L-inactive);
}
i.i-lat.Rq-Lq {
  background-image: var(--i-lat-R-query), var(--i-lat-L-query);
}
i.i-lat.Rq-n {
  background-image: var(--i-lat-R-query), var(--i-lat-L-NA);
}
i.i-lat.Rq-L {
  background-image: var(--i-lat-R-query), var(--i-lat-L-red);
}
i.i-lat.n-Lq {
  background-image: var(--i-lat-R-NA), var(--i-lat-L-query);
}
i.i-lat.sys {
  background-position: center center;
  background-image: var(--i-person-green);
}
i.i-lat.sys-i {
  background-position: center center;
  background-image: var(--i-person-inactive);
}
i.i-lat.sys-q {
  background-position: center center;
  background-image: var(--i-person-query);
}
i.i-lat.sys-n {
  background-position: center center;
  background-image: var(--i-lat-NA);
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
i.spinner {
  contain: content;
  position: relative;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
}
i.spinner::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 4px solid var(--gui-spinner-c1);
  border-top-color: var(--gui-spinner-c2);
  border-bottom-color: var(--gui-spinner-c2);
  animation: spinner 1s linear infinite;
}

:is(.blue-btn, .green-btn, .red-btn).busy {
  position: relative;
}
:is(.blue-btn, .green-btn, .red-btn).busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 4px solid var(--gui-spinner-c1);
  border-top-color: var(--gui-spinner-c2);
  border-bottom-color: var(--gui-spinner-c2);
  animation: spinner 1s linear infinite;
}

:is(.ie-hu, .ie-ab) {
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
  contain: content;
  filter: var(--gui-event-icon-filter);
}
:is(.ie-hu, .ie-ab).i-slate {
  background-position-y: 0px;
}
:is(.ie-hu, .ie-ab).i-sky {
  background-position-y: -24px;
}
:is(.ie-hu, .ie-ab).i-golden {
  background-position-y: -48px;
}
:is(.ie-hu, .ie-ab).i-moss {
  background-position-y: -72px;
}
:is(.ie-hu, .ie-ab).i-rust {
  background-position-y: -96px;
}
:is(.ie-hu, .ie-ab).i-pink {
  background-position-y: -120px;
}
:is(.ie-hu, .ie-ab).x2.i-slate {
  background-position-y: 0px;
}
:is(.ie-hu, .ie-ab).x2.i-sky {
  background-position-y: -48px;
}
:is(.ie-hu, .ie-ab).x2.i-golden {
  background-position-y: -96px;
}
:is(.ie-hu, .ie-ab).x2.i-moss {
  background-position-y: -144px;
}
:is(.ie-hu, .ie-ab).x2.i-rust {
  background-position-y: -192px;
}
:is(.ie-hu, .ie-ab).x2.i-pink {
  background-position-y: -240px;
}

.ie-ab {
  background: 0 0/600px 144px url("../icons/events-abstract-1.0.webp") no-repeat;
  width: 24px;
  height: 24px;
}
.ie-ab.x2 {
  background-size: 1200px 288px;
  width: 48px;
  height: 48px;
}

.i-ab-check {
  background-position-x: 0px;
}
.i-ab-check.x2 {
  background-position-x: 0px;
}

.i-ab-checklist {
  background-position-x: -24px;
}
.i-ab-checklist.x2 {
  background-position-x: -48px;
}

.i-ab-options {
  background-position-x: -48px;
}
.i-ab-options.x2 {
  background-position-x: -96px;
}

.i-ab-checkplus {
  background-position-x: -72px;
}
.i-ab-checkplus.x2 {
  background-position-x: -144px;
}

.i-ab-stack {
  background-position-x: -96px;
}
.i-ab-stack.x2 {
  background-position-x: -192px;
}

.i-ab-doc {
  background-position-x: -120px;
}
.i-ab-doc.x2 {
  background-position-x: -240px;
}

.i-ab-note {
  background-position-x: -144px;
}
.i-ab-note.x2 {
  background-position-x: -288px;
}

.i-ab-calendar {
  background-position-x: -168px;
}
.i-ab-calendar.x2 {
  background-position-x: -336px;
}

.i-ab-clip {
  background-position-x: -192px;
}
.i-ab-clip.x2 {
  background-position-x: -384px;
}

.i-ab-lab {
  background-position-x: -216px;
}
.i-ab-lab.x2 {
  background-position-x: -432px;
}

.i-ab-drop {
  background-position-x: -240px;
}
.i-ab-drop.x2 {
  background-position-x: -480px;
}

.i-ab-pill {
  background-position-x: -264px;
}
.i-ab-pill.x2 {
  background-position-x: -528px;
}

.i-ab-inj {
  background-position-x: -288px;
}
.i-ab-inj.x2 {
  background-position-x: -576px;
}

.i-ab-op {
  background-position-x: -312px;
}
.i-ab-op.x2 {
  background-position-x: -624px;
}

.i-ab-scan {
  background-position-x: -336px;
}
.i-ab-scan.x2 {
  background-position-x: -672px;
}

.i-ab-test {
  background-position-x: -360px;
}
.i-ab-test.x2 {
  background-position-x: -720px;
}

.i-ab-bottle {
  background-position-x: -384px;
}
.i-ab-bottle.x2 {
  background-position-x: -768px;
}

.i-ab-rx {
  background-position-x: -408px;
}
.i-ab-rx.x2 {
  background-position-x: -816px;
}

.i-ab-camera {
  background-position-x: -432px;
}
.i-ab-camera.x2 {
  background-position-x: -864px;
}

.i-ab-at {
  background-position-x: -456px;
}
.i-ab-at.x2 {
  background-position-x: -912px;
}

.i-ab-comms {
  background-position-x: -480px;
}
.i-ab-comms.x2 {
  background-position-x: -960px;
}

.i-ab-money {
  background-position-x: -504px;
}
.i-ab-money.x2 {
  background-position-x: -1008px;
}

.i-ab-chart {
  background-position-x: -528px;
}
.i-ab-chart.x2 {
  background-position-x: -1056px;
}

.i-ab-sun {
  background-position-x: -552px;
}
.i-ab-sun.x2 {
  background-position-x: -1104px;
}

.i-ab-tri {
  background-position-x: -576px;
}
.i-ab-tri.x2 {
  background-position-x: -1152px;
}

.ie-hu {
  background: 0 0/360px 144px url("../icons/events-human-1.0.webp") no-repeat;
  width: 24px;
  height: 24px;
}
.ie-hu.x2 {
  background-size: 720px 288px;
  width: 48px;
  height: 48px;
}

.i-hu-check {
  background-position-x: 0px;
}
.i-hu-check.x2 {
  background-position-x: 0px;
}

.i-hu-test {
  background-position-x: -24px;
}
.i-hu-test.x2 {
  background-position-x: -48px;
}

.i-hu-scan {
  background-position-x: -48px;
}
.i-hu-scan.x2 {
  background-position-x: -96px;
}

.i-hu-op {
  background-position-x: -72px;
}
.i-hu-op.x2 {
  background-position-x: -144px;
}

.i-hu-comms {
  background-position-x: -96px;
}
.i-hu-comms.x2 {
  background-position-x: -192px;
}

.i-hu-drop {
  background-position-x: -120px;
}
.i-hu-drop.x2 {
  background-position-x: -240px;
}

.i-hu-pill {
  background-position-x: -144px;
}
.i-hu-pill.x2 {
  background-position-x: -288px;
}

.i-hu-inj {
  background-position-x: -168px;
}
.i-hu-inj.x2 {
  background-position-x: -336px;
}

.i-hu-doc {
  background-position-x: -192px;
}
.i-hu-doc.x2 {
  background-position-x: -384px;
}

.i-hu-note {
  background-position-x: -216px;
}
.i-hu-note.x2 {
  background-position-x: -432px;
}

.i-hu-dna {
  background-position-x: -240px;
}
.i-hu-dna.x2 {
  background-position-x: -480px;
}

.i-hu-void {
  background-position-x: -264px;
}
.i-hu-void.x2 {
  background-position-x: -528px;
}

.i-hu-shake {
  background-position-x: -288px;
}
.i-hu-shake.x2 {
  background-position-x: -576px;
}

.i-hu-move {
  background-position-x: -312px;
}
.i-hu-move.x2 {
  background-position-x: -624px;
}

.i-hu-refer {
  background-position-x: -336px;
}
.i-hu-refer.x2 {
  background-position-x: -672px;
}

svg.lang-flag {
  width: auto;
  height: 24px;
  border-radius: 5px;
}

:is(input, textarea, select) {
  outline: none;
  font-size: 1rem;
  color: var(--input-text);
  font-family: inherit;
  background-color: var(--input-base);
  border: 2px solid var(--input-border);
  border-radius: 5px;
  padding: 6px 8px;
  margin: 0;
  outline-offset: 1px;
}
:is(input, textarea, select):is(:-webkit-autofill, :autofill) {
  outline: 1px solid currentColor;
}
:is(input, textarea, select):invalid:not(:placeholder-shown) {
  outline: 1px solid var(--color-orange);
}

input:disabled {
  opacity: var(--input-disabled-opacity);
}
input:is(:-webkit-autofill, :autofill) {
  outline: 2px solid var(--input-blue);
  -webkit-text-fill-color: var(--input-text);
  -webkit-box-shadow: 0 0 0px 20rem var(--input-base) inset;
}

textarea {
  height: auto;
  word-wrap: break-word;
}
textarea:is(.no-resize, .js-autosize) {
  resize: none;
}
textarea:read-only {
  opacity: 0.8;
}

select {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  min-width: 100px;
  padding-inline-end: 32px;
  background: right 8px center/12px var(--input-base) no-repeat var(--i-arrow-select);
  cursor: pointer;
}
select.inline {
  width: auto;
}
select:disabled {
  opacity: var(--input-disabled-opacity);
}
select.error {
  border-color: var(--color-red-plus);
}

label {
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.2;
}
label:not(.inx) {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
}
label:not(.inx).w-fit {
  width: fit-content;
}
label:not(.inx).label-t {
  align-items: start;
}
label:not(.inx).label-w-s {
  grid-template-columns: 1fr 5fr;
}
label:not(.inx).label-w-m {
  grid-template-columns: 1fr 3fr;
}
label:not(.inx).label-w-l {
  grid-template-columns: 1fr 2fr;
}
label:not(.inx).input-ch-w > input {
  text-align: center;
  padding-inline: 0;
  width: calc(var(--input-char-max, 8em) + 2em);
}

label.inx {
  cursor: pointer;
  user-select: none;
  display: grid;
  grid-template-columns: 16px auto;
  gap: 8px;
  place-items: center start;
  margin-block: 2px;
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--bg-hint);
}
label.inx.disabled {
  pointer-events: none;
  opacity: var(--gui-fade);
  color: var(--txt-light);
  background: repeating-linear-gradient(-55deg, var(--btn-disabled-c1), var(--btn-disabled-c1) 10px, var(--btn-disabled-c2) 10px, var(--btn-disabled-c2) 20px);
}
label.inx.w-fit {
  width: fit-content;
}
label.inx:not(.disabled):is(:hover, :focus-within) {
  background-color: var(--input-base);
  outline: 1px dotted var(--input-focus-outline);
  outline-offset: 1px;
}
label.inx input {
  cursor: pointer;
  align-self: start;
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  display: block;
  margin: 0;
  padding: 0;
}
label.inx input:is([type=radio], [type=checkbox]) {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  padding: 2px;
  background-clip: content-box;
  background-color: var(--input-base);
}
label.inx input:is([type=radio], [type=checkbox]):disabled {
  pointer-events: none;
}
label.inx input[type=radio] {
  /* Add if not using autoprefixer */
  border-radius: 50%;
}
label.inx input[type=radio]:checked {
  background-color: var(--input-radio-checked);
  border-color: var(--input-blue);
}
label.inx input[type=checkbox] {
  border-radius: 0;
  display: grid;
  place-content: center;
}
label.inx input[type=checkbox]::before {
  content: "";
  width: 12px;
  height: 12px;
}
label.inx input[type=checkbox]:checked {
  border-color: var(--input-blue);
}
label.inx input[type=checkbox]:checked::before {
  background: center/contain var(--i-btn-check) var(--input-blue) no-repeat;
}
label.inx input[type=checkbox]:disabled {
  border-color: var(--btn-base);
}
label.inx input[type=checkbox]:disabled::before {
  background-color: var(--btn-base);
}

fieldset.grp-inx {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
fieldset.grp-inx legend {
  display: block;
  padding: 0 8px 0 0;
  margin: 0;
  float: left;
  width: fit-content;
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.2;
}
fieldset.grp-inx.fx-fill > label {
  flex: 1 1 0;
}
fieldset.grp-inx.grp-r {
  justify-content: flex-end;
}

input[type=file] {
  height: auto;
  border-color: var(--input-base);
  cursor: copy;
}
input[type=file]:is(:hover, :focus-within) {
  border-color: var(--btn-blue);
}
input[type=file]::file-selector-button {
  all: unset;
  box-sizing: border-box;
  color: var(--btn-text);
  background-color: var(--btn-blue);
  border-radius: 5px;
  padding: 6px 16px;
  margin-inline-end: 8px;
}

.bliss-file-drop {
  border: 2px dotted var(--input-focus-outline);
  padding: 4px;
  border-radius: 9px;
}
.bliss-file-drop .input-drop-zone {
  position: relative;
}
.bliss-file-drop .input-drop-zone::after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  background: center/24px var(--i-btn-add-file) var(--input-focus-drop) no-repeat;
  border-radius: 5px;
  z-index: 2;
  pointer-events: none;
}
.bliss-file-drop .input-drop-zone.js-drag-over::after {
  display: block;
}
.bliss-file-drop .input-drop-zone > label {
  position: absolute;
  display: block;
  font-size: 0.79rem;
  color: var(--txt-light);
  padding: 6px 8px;
  pointer-events: none;
  z-index: 1;
}
.bliss-file-drop .input-drop-zone > input {
  width: 100%;
  padding-block-start: 2rem;
}
.bliss-file-drop > output .upload-file-details {
  display: grid;
  grid: 1fr/1fr 12ch 48px;
  place-items: center start;
  width: 100%;
  padding: 8px;
  font-size: 0.79rem;
  font-weight: var(--font-weight-bold);
  border-bottom: 1px dotted var(--input-focus-outline);
}
.bliss-file-drop > output .upload-file-details:is(:hover, :focus-within) {
  background-color: var(--bg-hint);
}
.bliss-file-drop > output .upload-file-details button.trash {
  place-self: center end;
}

.auto-stack-input {
  container: input-phone-width/inline-size;
  width: 100%;
}

@container input-phone-width (width < 590px) {
  label:not(.inx) {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    align-items: start;
    gap: 4px;
    padding-inline-start: 4px;
  }
  label:not(.inx) > :is(input, textarea) {
    translate: -4px;
  }
  fieldset.grp-inx:not(.no-stack) {
    display: block;
  }
  fieldset.grp-inx:not(.no-stack) legend {
    float: none;
    padding-block-end: 4px;
  }
}
:is(label:not(.inx), .grp-inx).error {
  position: relative;
}
:is(label:not(.inx), .grp-inx).error :is(input, textarea) {
  border-color: var(--color-red-plus);
}
:is(label:not(.inx), .grp-inx).error::after {
  content: attr(data-error-msg);
  position: absolute;
  top: calc(100% - 8px);
  right: 16px;
  z-index: 1;
  background: var(--color-red-plus);
  color: var(--txt-alert);
  font-size: 0.64rem;
  padding: 2px 4px;
  font-weight: 500;
  border-radius: 2px;
  line-height: 1;
}

.label-over-input {
  position: relative;
  margin-block-end: 8px;
}
.label-over-input label {
  position: absolute;
  top: 5px;
  left: 8px;
  opacity: var(--gui-fade-soft);
  font-size: 0.71rem;
}
.label-over-input input {
  width: 100%;
  padding: 18px 12px 8px 12px;
  font-size: 1.1rem;
}

ul {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}
ul li {
  padding: 0;
  margin: 0;
}

ol {
  list-style-position: inside;
}
ol.bullet-list {
  list-style-type: disc;
}

ul.row-list li {
  display: block;
  padding: 4px 0;
  border-top: 1px solid var(--gui-line);
}
ul.row-list li:first-child {
  border-top: none;
}

table {
  width: 100%;
}
table.standard:not(.no-pad) {
  margin: 20px 0 10px 0;
}
.hh-header table.standard:not(.no-pad) {
  margin: 0;
}

tbody:not(:first-of-type) {
  border-top: 10px solid var(--bg-page);
}
tbody tr {
  border-top: 1px solid var(--gui-line);
}
tbody tr:is(.no-line, :first-child) {
  border-top: none;
}
tbody tr.divider {
  border-top-width: 2px;
}
.oddeven-rows tbody tr:nth-child(odd) {
  background: var(--bg-hint);
}
.clickable-rows tbody tr:is(:hover, :focus-within), tbody tr.clickable:is(:hover, :focus-within) {
  cursor: pointer;
  background: var(--btn-base-light);
}
:is(.highlight-rows, .highlight-tr) tbody tr:is(:hover, :focus-within) {
  background: var(--bg-hover-row);
}
:is(.rows-focus, .focus-tr) tbody tr:is(:hover, :focus-within) {
  background-color: var(--bg-hover-row);
  outline: 1px solid var(--gui-line);
}
:is(.rows-focus, .focus-tr) tbody tr td {
  padding-block: 5px;
}
tbody tr.selected-row {
  background: var(--btn-blue-hint);
}
tbody tr.selected-row td {
  color: #fff;
}

:is(td, th) {
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  text-align: left;
  padding: 4px 0 4px 8px;
  vertical-align: top;
}
:is(td, th):first-child {
  padding-inline-start: 1px;
}
:is(td, th)[rowspan] + td {
  padding-inline-start: 1px;
}
:is(td, th).line-l {
  border-left: 2px solid var(--gui-line);
  padding-inline-start: 8px;
}

th {
  color: var(--txt-light);
}

tfoot {
  border-top: 2px solid var(--gui-line);
}

button.widget-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  grid: auto auto 1fr/max-content 1fr;
  gap: 8px 16px;
  place-items: start;
  position: relative;
  max-width: 28ch;
  border: 3px solid var(--btn-base);
  border-radius: 13px;
  padding: 8px;
  padding-block-end: 16px;
  margin: 4px;
  background-color: var(--bg-max);
  outline: 2px solid transparent;
  outline-offset: 0;
  transition-property: border, outline, outline-offset;
  transition-timing-function: ease-in-out;
  transition-duration: 250ms;
}
button.widget-btn :is(.w-title, .w-more-info) {
  grid-column: span 2;
  line-height: 1.1;
}
button.widget-btn :is(.w-value, .w-status) {
  font-weight: var(--font-weight-semibold);
}
button.widget-btn .w-title {
  font-weight: var(--font-weight-bold);
}
button.widget-btn .w-value {
  font-size: 1.29rem;
}
button.widget-btn .w-more-info {
  place-self: start;
  font-size: 0.79rem;
  color: var(--txt-light);
  padding-block-end: 2px;
}
button.widget-btn .w-more-info:not(:empty) {
  min-height: 2lh;
}
button.widget-btn .w-status {
  font-size: 0.79rem;
  line-height: 1;
  background: var(--color-hint-blue);
  border-radius: 100px;
  border: 1px solid var(--bg-max);
  height: fit-content;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
button.widget-btn .w-status.good {
  background: var(--color-hint-green);
}
button.widget-btn .w-status.issue {
  background: var(--color-hint-orange);
}
button.widget-btn .w-status.warn {
  background: var(--color-hint-red);
}
button.widget-btn.is-active {
  border-color: var(--btn-blue-hover);
}
button.widget-btn.is-active::before {
  opacity: 1;
  background-color: var(--btn-blue-active);
  background-image: var(--i-btn-decr);
}
button.widget-btn::before {
  content: "";
  pointer-events: none;
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: 2px;
  right: 3px;
  opacity: var(--gui-fade);
  border-radius: 50%;
  background: center/12px var(--i-incr) var(--btn-soft-hint) no-repeat;
  transition: background-color 250ms ease-in-out;
}
button.widget-btn:not(.is-active):is(:hover, :focus-within) {
  border-color: var(--btn-blue-hover);
  outline: 2px solid var(--btn-blue);
  outline-offset: 2px;
}
button.widget-btn:not(.is-active):is(:hover, :focus-within)::before {
  opacity: 1;
  background-color: var(--btn-blue);
  background-image: var(--i-btn-incr);
}

.widget-btn-grid {
  display: grid;
  grid: 1fr/repeat(auto-fill, minmax(24ch, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}

nav.evt-list {
  width: 266px;
  background: var(--bg-nav);
}

.evt-list-sort {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding-inline-end: 10px;
  border-bottom: 2px solid var(--bg-page);
}
.evt-list-sort:is(:hover, :focus-within) {
  border-bottom-color: var(--btn-blue);
}
.evt-list-sort select.select-evt-sort {
  all: unset;
  box-sizing: border-box;
  display: block;
  flex: 1 1 0;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1;
  padding: 8px 32px;
  width: 100%;
  font-weight: var(--font-weight-medium);
  border-radius: 0 5px 5px 0;
}
.evt-list-sort select.select-evt-sort:is(:hover, :focus, :active) {
  background-color: var(--bg-focus);
}

.evt {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.86rem;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}
.evt.selected {
  background: var(--btn-blue-active);
}
.evt.did-not-occur :is(.evt-short, time) {
  text-decoration: line-through 2px;
}

.evt a {
  flex: 1 1 0;
  height: 24px;
  display: grid;
  grid: 1fr/38px 11ch 48px 24px;
  place-items: center start;
  gap: 8px;
  padding-inline-end: 8px;
  color: var(--txt-base);
  text-decoration: none;
}
.evt a * {
  pointer-events: none;
}
.evt a .evt-short {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 7ch;
  font-size: 0.64rem;
  font-weight: var(--font-weight-bold);
  background: rgba(0, 0, 0, 0.1);
  opacity: 0.6;
  overflow: hidden;
}
.evt a time {
  place-self: center end;
}
.evt a .evt-state {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.evt a:is(:hover, :focus-within) {
  background: var(--btn-blue);
  color: var(--btn-text);
}
.evt a:is(:hover, :focus-within) .evt-short {
  opacity: 1;
}
.evt a:is(:hover, :focus-within) .ico {
  filter: var(--btn-icon-hover-filter);
}
.evt a:is(:hover, :focus-within) .i-lat {
  filter: brightness(1.2);
}
.evt a:not([href]) {
  color: var(--btn-text);
  pointer-events: none;
}
.evt a:not([href]) .evt-short {
  opacity: 1;
}
.evt a:not([href]) .ico {
  filter: var(--btn-icon-to-white-filter);
}

.evt .quick-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 48px;
  cursor: crosshair;
}
.evt .quick-view::after {
  content: "";
  width: 24px;
  height: 24px;
  inset: 0;
  background: center/12px var(--i-eye) no-repeat;
  opacity: 0.3;
}
.evt:not(.selected) .quick-view:hover {
  background-color: var(--bg-max);
}
.evt:not(.selected) .quick-view:hover::after {
  opacity: 1;
}
.evt.selected .quick-view {
  cursor: default;
}
.evt.selected .quick-view::after {
  background-image: var(--i-btn-eye);
  opacity: 0.8;
}

event-group {
  transition: margin 450ms ease-in-out;
  display: block;
  margin: 2px 0;
}
event-group event-list {
  display: none;
}
event-group.expanded {
  margin: 8px 0;
}
event-group.expanded event-list {
  display: block;
}

button.toggle-event-group {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center start;
  grid-template-columns: 24px 1fr 24px;
  gap: 8px;
  width: calc(100% - 4px);
  margin: 2px;
  padding: 8px 8px 8px 0;
  font-size: 0.86rem;
  line-height: 1;
  cursor: pointer;
  background: var(--btn-soft-hint);
  border-radius: 5px;
}
button.toggle-event-group::after {
  content: "";
  place-self: center;
  width: 12px;
  height: 12px;
  background: center/contain var(--i-plus) no-repeat;
  background-image: var(--i-plus), var(--i-btn-plus), var(--i-arrow-up);
  background-position-y: center, -48px, -48px;
}
button.toggle-event-group:is(:hover, :focus) {
  color: var(--btn-text);
  background: var(--btn-blue-hover);
}
button.toggle-event-group:is(:hover, :focus)::after {
  background-position-y: -48px, center, -48px;
}
.expanded button.toggle-event-group {
  color: var(--text-base);
  background: none;
  opacity: 0.7;
}
.expanded button.toggle-event-group::after {
  background-position-y: -48px, -48px, center;
}

button.toggle-event-group span.count {
  vertical-align: 25%;
  font-size: 0.71rem;
  font-weight: var(--font-weight-bold);
  padding-inline-start: 4px;
  opacity: 0.5;
}

button.toggle-event-group .icon {
  height: 24px;
  overflow: hidden;
}
button.toggle-event-group .icon i {
  transition: transform 250ms ease-in-out;
}
.expanded button.toggle-event-group .icon i {
  transform: translateY(24px);
}