@charset "UTF-8";
/* Using pseudo-elements; cf. https://fontawesome.com/v6/docs/web/setup/upgrade/pseudo-elements#contentHeader */
.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Specific cases: */
#body-wrapper.waiting-for-complete-syncing .topbar-icon-button-icon > i.fa-square-plus {
  color: red;
}

/* Prevent iPhone from changing sizes: */
* {
  -webkit-text-size-adjust: none;
}

/* Big sections: */
/* ^ Just enough to enable the insertion arrow to be shown in full. Was 24 */
/* Overview table layout: */
/* Within root: */
/* Dropdown menus: */
/* ^The down arrow requires less of a margin. */
/* Miscellaneous */
/* Grid column gaps: */
/* Each variable appears in only one place in a Sass file; but we list them together
 * * so as to be able to see the relationships. */
/* To do: Prune and replace most or all of these variables, using UXBin variables instead: */
:root {
  /* Relative colors: */
  --color-general-light: white;
  --color-general-light-less-opaque: rgba(--color-general-light, .60);
  /* Multipurpose colors: */
  --color-multipurpose-yellow: rgb(255, 255, 208);
  --color-multipurpose-green: rgb(238, 254, 214);
  /* Showing changes: */
  --color-background-highlighting: hsla(60, 100%, 95%, 1);
  --color-foreground-highlighting: hsla(60, 100%, 75%, 1);
  --color-background-new-content: hsla(120, 73%, 95%, 1);
  --color-foreground-new-content: hsla(120, 73%, 85%, 1);
  --color-foreground-deletion: hsla(4, 100%, 88%, 1);
  /* Specific purposes: */
  --color-active-cell: rgba(255, 255, 255, 1.0);
  --color-insertion-arrow:	--color-general-light;
  --color-start-edit-background:	--color-background-new-content;
  --color-start-edit-background-no-hover: hsla(120, 60%, 95%, 1);
  --color-start-edit-background-hover: hsla(120, 60%, 90%, 1);
  --color-grouping-cell: transparentize(	--color-general-light, 0.25);
  /* ^transparentize evidently just subtracts the second argument from the color's current alpha value. */
  --color-cells-to-delete: rgba(255, 200, 196, 0.9);
  /* ^ gray */
  /* For icons: */
  --color-green-icons: #8CC152;
  --color-blue-icons: #4A89DC;
  --color-red-icons: #DA4453;
  --color-gray-icons: #AAB2BD;
  /* Graying out: */
  --color-gray-uxbin: #737992;
  --color-grayed-out-background: rgb(250, 250, 250);
  --color-grayed-out-icon: darken(	--color-grayed-out-background, 15%);
  --color-grayed-out-text: #808080;
  --color-field-title-in-display-mode: #888;
  --color-field-title-in-edit-mode: #4a89dc;
  --color-field-title-zoomed:	--color-field-title-in-edit-mode;
  /* Older: */
  --color-dark: rgb(0, 43, 127);
  --color-light: rgba(203, 224, 239, 0.5);
  --color-lighter: rgba(203, 224, 239, 0.25);
  --color-border: #ddd;
  --color-red: #C1A;
  --color-green: rgba(188, 219, 168, 1);
  --color-green-darker: #00b167;
  --color-hidden-cell: #eeeeee;
  --color-highlight: #4A89DC;
  --color-main-background: #eef2f1;
  --color-topbar: var(--color-white);
  --color-chessboard: #eee;
}

:root {
  --color-white: hsla(0, 0%, 100%, 1);
  --color-neutral-10: hsla(220, 25%, 95%, 1);
  --color-neutral-20: hsla(228, 28%, 88%, 1);
  --color-neutral-30: hsla(228, 31%, 81%, 1);
  --color-neutral-40: hsla(228, 20%, 71%, 1);
  --color-neutral-50: hsla(228, 16%, 61%, 1);
  --color-neutral-60: hsla(228, 12%, 51%, 1);
  --color-neutral-70: hsla(228, 14%, 41%, 1);
  --color-neutral-80: hsla(228, 16%, 32%, 1);
  --color-neutral-90: hsla(228, 17%, 23%, 1);
  --color-neutral-100: hsla(231, 19%, 15%, 1);
  --color-teal-10: hsla(174, 100%, 96%, 1);
  --color-teal-20: hsla(176, 100%, 87%, 1);
  --color-teal-30: hsla(176, 100%, 77%, 1);
  --color-teal-40: hsla(176, 100%, 68%, 1);
  --color-teal-50: hsla(176, 88%, 56%, 1);
  --color-teal-60: hsla(176, 80%, 45%, 1);
  --color-teal-70: hsla(176, 91%, 35%, 1);
  --color-teal-80: hsla(177, 100%, 27%, 1);
  --color-teal-90: hsla(177, 100%, 21%, 1);
  --color-teal-100: hsla(177, 100%, 14%, 1);
  --color-red-80: hsla(349, 100%, 33%, 1);
  --color-red-90: hsla(349, 100%, 25%, 1);
  --color-blue-10: hsla(227, 100%, 95%, 1);
  --color-blue-15: mix(hsla(227, 100%, 95%, 1), hsla(226, 100%, 85%, 1));
  --color-blue-20: hsla(226, 100%, 85%, 1);
  --color-blue-30: hsla(227, 100%, 75%, 1);
  --color-blue-40: hsla(227, 100%, 65%, 1);
  --color-blue-50: hsla(227, 86%, 51%, 1);
  --color-blue-60: hsla(227, 92%, 41%, 1);
  --color-blue-70: hsla(227, 100%, 33%, 1);
  --color-blue-80: hsla(227, 100%, 26%, 1);
  --color-blue-90: hsla(226, 89%, 23%, 1);
  --color-blue-100: hsla(226, 96%, 20%, 1);
  --color-purple-10: hsla(257, 100%, 96%, 1);
  --color-purple-20: hsla(256, 100%, 89%, 1);
  --color-green-10: hsla(120, 100%, 97%, 1);
  --color-green-20: hsla(119, 100%, 89%, 1);
  --color-green-30: hsla(119, 100%, 82%, 1);
  --color-green-40: hsla(119, 100%, 74%, 1);
  --color-green-50: hsla(119, 100%, 66%, 1);
  --color-green-60: hsla(119, 75%, 56%, 1);
  --color-green-70: hsla(119, 66%, 46%, 1);
  --color-green-80: hsla(119, 74%, 36%, 1);
  --color-green-90: hsla(119, 84%, 27%, 1);
  --color-green-100: hsla(119, 94%, 18%, 1);
  --color-orange-100: hsla(39, 100%, 21%, 1);
  --color-orange-90: hsla(39, 100%, 29%, 1);
  --color-orange-80: hsla(39, 100%, 37%, 1);
  --color-orange-70: hsla(40, 97%, 45%, 1);
  --color-orange-60: hsla(40, 100%, 55%, 1);
  --color-orange-50: hsla(40, 100%, 63%, 1);
  --color-orange-40: hsla(40, 100%, 71%, 1);
  --color-orange-30: hsla(40, 100%, 79%, 1);
  --color-orange-20: hsla(39, 100%, 87%, 1);
  --color-orange-10: hsla(39, 100%, 95%, 1);
  --color-yellow-10: hsla(53, 100%, 95%, 1);
  --color-yellow-20: hsla(54, 100%, 86%, 1);
  --color-warning: hsla(40, 100%, 55%, 1);
  --color-orange-frame: hsla(40, 97%, 45%, 1);
  --color-code: hsla(39, 100%, 29%, 1);
  --color-hyperlink: hsla(227, 100%, 33%, 1);
  --color-default-error: hsla(349, 96%, 55%, 1);
  /* Only the hex values could be copied directly from UXBin: */
  --color-toast-success: #417640;
  --color-toast-error: #FB2047;
  --color-toast-info: #1847ED;
  --color-toast-warning: #FFB119;
  --color-toast-neutral: #A6ACC4;
  /* Colors for specific purposes: */
  --color-info-mode-outline: var(--color-teal-60);
  --color-onboarding-highlighting: var(--color-green-60);
  --color-onboarding-highlighting-darker: var(--color-green-100);
  --color-highlight-onboarding-text: var(--color-green-90);
  --color-pdf-icon: var(--color-red-80);
  --color-word-icon: var(--color-blue-60);
  --color-blue-uxbin-primary-light: var(--color-blue-50);
  /* Colors for the Alternativplaner: */
  --color-alternativplaner-walking: var(--color-neutral-50);
  --color-alternativplanner-missed-transfer: var(--color-blue-50);
  --color-alternativplanner-successful-transfer: var(--color-green-80);
  --color-alternativplaner-delay: var(--color-orange-70);
  --color-alternativplaner-big-bar: var(--color-neutral-70);
}

:root {
  --shadow-root-inactive-old: -3px 3px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-root-inactive-not-used: -3px 3px 3px 0 var(--color-neutral-20);
}

.color-highlight {
  color: #4A89DC !important;
}

.bg-highlight {
  background-color: #4A89DC !important;
  color: #FFF !important;
}

.border-highlight {
  border-color: #4A89DC !important;
}

.gradient-highlight {
  background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC) !important;
  color: #FFF;
}

.color-highlight-light {
  color: #5D9CEC !important;
}

.bg-highlight-light {
  background-color: #5D9CEC !important;
  color: #FFF !important;
}

.bg-fade-highlight-dark {
  background-color: !important;
  color: #FFF !important;
}

.bg-fade-highlight-light {
  background-color: !important;
  color: #FFF !important;
}

.color-highlight-dark {
  color: #4A89DC !important;
}

.color-icon-highlight {
  stroke: #4A89DC !important;
  fill: !important;
}

.bg-highlight-dark {
  background-color: #4A89DC !important;
  color: #FFF !important;
}

.border-highlight-light {
  border-color: #5D9CEC !important;
}

.border-highlight-dark {
  border-color: #4A89DC !important;
}

.focus-highlight:focus {
  border-color: #4A89DC !important;
}

.gradient-highlight {
  background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
}

.color-green-light {
  color: #A0D468 !important;
}

.bg-green-light {
  background-color: #A0D468 !important;
  color: #FFF !important;
}

.bg-fade-green-dark {
  background-color: rgba(140, 193, 82, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-green-light {
  background-color: rgba(140, 193, 82, 0.3) !important;
  color: #FFF !important;
}

.color-green-dark {
  color: #8CC152 !important;
}

.color-icon-green {
  stroke: #8CC152 !important;
  fill: rgba(140, 193, 82, 0.3) !important;
}

.bg-green-dark {
  background-color: #8CC152 !important;
  color: #FFF !important;
}

.border-green-light {
  border-color: #A0D468 !important;
}

.border-green-dark {
  border-color: #8CC152 !important;
}

.focus-green:focus {
  border-color: #8CC152 !important;
}

.gradient-green {
  background-image: linear-gradient(to bottom, #A0D468, #8CC152);
}

.color-grass-light {
  color: #34cc73 !important;
}

.bg-grass-light {
  background-color: #34cc73 !important;
  color: #FFF !important;
}

.bg-fade-grass-dark {
  background-color: rgba(140, 193, 82, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-grass-light {
  background-color: rgba(140, 193, 82, 0.3) !important;
  color: #FFF !important;
}

.color-grass-dark {
  color: #2ABA66 !important;
}

.color-icon-grass {
  stroke: #2ABA66 !important;
  fill: rgba(140, 193, 82, 0.3) !important;
}

.bg-grass-dark {
  background-color: #2ABA66 !important;
  color: #FFF !important;
}

.border-grass-light {
  border-color: #34cc73 !important;
}

.border-grass-dark {
  border-color: #2ABA66 !important;
}

.focus-grass:focus {
  border-color: #2ABA66 !important;
}

.gradient-grass {
  background-image: linear-gradient(to bottom, #34cc73, #2ABA66);
}

.color-red-light {
  color: #ED5565 !important;
}

.bg-red-light {
  background-color: #ED5565 !important;
  color: #FFF !important;
}

.bg-fade-red-dark {
  background-color: rgba(218, 68, 83, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-red-light {
  background-color: rgba(218, 68, 83, 0.3) !important;
  color: #FFF !important;
}

.color-red-dark {
  color: #DA4453 !important;
}

.color-icon-red {
  stroke: #DA4453 !important;
  fill: rgba(218, 68, 83, 0.3) !important;
}

.bg-red-dark {
  background-color: #DA4453 !important;
  color: #FFF !important;
}

.border-red-light {
  border-color: #ED5565 !important;
}

.border-red-dark {
  border-color: #DA4453 !important;
}

.focus-red:focus {
  border-color: #DA4453 !important;
}

.gradient-red {
  background-image: linear-gradient(to bottom, #ED5565, #DA4453);
}

.color-orange-light {
  color: #FC6E51 !important;
}

.bg-orange-light {
  background-color: #FC6E51 !important;
  color: #FFF !important;
}

.bg-fade-orange-dark {
  background-color: rgba(233, 87, 63, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-orange-light {
  background-color: rgba(233, 87, 63, 0.3) !important;
  color: #FFF !important;
}

.color-orange-dark {
  color: #E9573F !important;
}

.color-icon-orange {
  stroke: #E9573F !important;
  fill: rgba(233, 87, 63, 0.3) !important;
}

.bg-orange-dark {
  background-color: #E9573F !important;
  color: #FFF !important;
}

.border-orange-light {
  border-color: #FC6E51 !important;
}

.border-orange-dark {
  border-color: #E9573F !important;
}

.focus-orange:focus {
  border-color: #E9573F !important;
}

.gradient-orange {
  background-image: linear-gradient(to bottom, #FC6E51, #E9573F);
}

.color-yellow-light {
  color: #FFCE54 !important;
}

.bg-yellow-light {
  background-color: #FFCE54 !important;
  color: #FFF !important;
}

.bg-fade-yellow-dark {
  background-color: rgba(246, 187, 66, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-yellow-light {
  background-color: rgba(246, 187, 66, 0.3) !important;
  color: #FFF !important;
}

.color-yellow-dark {
  color: #F6BB42 !important;
}

.color-icon-yellow {
  stroke: #F6BB42 !important;
  fill: rgba(246, 187, 66, 0.3) !important;
}

.bg-yellow-dark {
  background-color: #F6BB42 !important;
  color: #FFF !important;
}

.border-yellow-light {
  border-color: #FFCE54 !important;
}

.border-yellow-dark {
  border-color: #F6BB42 !important;
}

.focus-yellow:focus {
  border-color: #F6BB42 !important;
}

.gradient-yellow {
  background-image: linear-gradient(to bottom, #FFCE54, #F6BB42);
}

.color-sunny-light {
  color: #f0b31b !important;
}

.bg-sunny-light {
  background-color: #f0b31b !important;
  color: #FFF !important;
}

.bg-fade-sunny-dark {
  background-color: rgba(246, 187, 66, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-sunny-light {
  background-color: rgba(246, 187, 66, 0.3) !important;
  color: #FFF !important;
}

.color-sunny-dark {
  color: #d99914 !important;
}

.color-icon-sunny {
  stroke: #d99914 !important;
  fill: rgba(246, 187, 66, 0.3) !important;
}

.bg-sunny-dark {
  background-color: #d99914 !important;
  color: #FFF !important;
}

.border-sunny-light {
  border-color: #f0b31b !important;
}

.border-sunny-dark {
  border-color: #d99914 !important;
}

.focus-sunny:focus {
  border-color: #d99914 !important;
}

.gradient-sunny {
  background-image: linear-gradient(to bottom, #f0b31b, #d99914);
}

.color-blue-light {
  color: #5D9CEC !important;
}

.bg-blue-light {
  background-color: #5D9CEC !important;
  color: #FFF !important;
}

.bg-fade-blue-dark {
  background-color: rgba(74, 137, 220, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-blue-light {
  background-color: rgba(74, 137, 220, 0.3) !important;
  color: #FFF !important;
}

.color-blue-dark {
  color: #4A89DC !important;
}

.color-icon-blue {
  stroke: #4A89DC !important;
  fill: rgba(74, 137, 220, 0.3) !important;
}

.bg-blue-dark {
  background-color: #4A89DC !important;
  color: #FFF !important;
}

.border-blue-light {
  border-color: #5D9CEC !important;
}

.border-blue-dark {
  border-color: #4A89DC !important;
}

.focus-blue:focus {
  border-color: #4A89DC !important;
}

.gradient-blue {
  background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
}

.color-teal-light {
  color: #A0CECB !important;
}

.bg-teal-light {
  background-color: #A0CECB !important;
  color: #FFF !important;
}

.bg-fade-teal-dark {
  background-color: rgba(125, 177, 177, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-teal-light {
  background-color: rgba(125, 177, 177, 0.3) !important;
  color: #FFF !important;
}

.color-teal-dark {
  color: #7DB1B1 !important;
}

.color-icon-teal {
  stroke: #7DB1B1 !important;
  fill: rgba(125, 177, 177, 0.3) !important;
}

.bg-teal-dark {
  background-color: #7DB1B1 !important;
  color: #FFF !important;
}

.border-teal-light {
  border-color: #A0CECB !important;
}

.border-teal-dark {
  border-color: #7DB1B1 !important;
}

.focus-teal:focus {
  border-color: #7DB1B1 !important;
}

.gradient-teal {
  background-image: linear-gradient(to bottom, #A0CECB, #7DB1B1);
}

.color-mint-light {
  color: #48CFAD !important;
}

.bg-mint-light {
  background-color: #48CFAD !important;
  color: #FFF !important;
}

.bg-fade-mint-dark {
  background-color: rgba(55, 188, 155, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-mint-light {
  background-color: rgba(55, 188, 155, 0.3) !important;
  color: #FFF !important;
}

.color-mint-dark {
  color: #37BC9B !important;
}

.color-icon-mint {
  stroke: #37BC9B !important;
  fill: rgba(55, 188, 155, 0.3) !important;
}

.bg-mint-dark {
  background-color: #37BC9B !important;
  color: #FFF !important;
}

.border-mint-light {
  border-color: #48CFAD !important;
}

.border-mint-dark {
  border-color: #37BC9B !important;
}

.focus-mint:focus {
  border-color: #37BC9B !important;
}

.gradient-mint {
  background-image: linear-gradient(to bottom, #48CFAD, #37BC9B);
}

.color-pink-light {
  color: #EC87C0 !important;
}

.bg-pink-light {
  background-color: #EC87C0 !important;
  color: #FFF !important;
}

.bg-fade-pink-dark {
  background-color: rgba(215, 112, 173, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-pink-light {
  background-color: rgba(215, 112, 173, 0.3) !important;
  color: #FFF !important;
}

.color-pink-dark {
  color: #D770AD !important;
}

.color-icon-pink {
  stroke: #D770AD !important;
  fill: rgba(215, 112, 173, 0.3) !important;
}

.bg-pink-dark {
  background-color: #D770AD !important;
  color: #FFF !important;
}

.border-pink-light {
  border-color: #EC87C0 !important;
}

.border-pink-dark {
  border-color: #D770AD !important;
}

.focus-pink:focus {
  border-color: #D770AD !important;
}

.gradient-pink {
  background-image: linear-gradient(to bottom, #EC87C0, #D770AD);
}

.color-pink2-light {
  color: #ff5982 !important;
}

.bg-pink2-light {
  background-color: #ff5982 !important;
  color: #FFF !important;
}

.bg-fade-pink2-dark {
  background-color: rgba(215, 112, 173, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-pink2-light {
  background-color: rgba(215, 112, 173, 0.3) !important;
  color: #FFF !important;
}

.color-pink2-dark {
  color: #fb3365 !important;
}

.color-icon-pink2 {
  stroke: #fb3365 !important;
  fill: rgba(215, 112, 173, 0.3) !important;
}

.bg-pink2-dark {
  background-color: #fb3365 !important;
  color: #FFF !important;
}

.border-pink2-light {
  border-color: #ff5982 !important;
}

.border-pink2-dark {
  border-color: #fb3365 !important;
}

.focus-pink2:focus {
  border-color: #fb3365 !important;
}

.gradient-pink2 {
  background-image: linear-gradient(to bottom, #ff5982, #fb3365);
}

.color-magenta-light {
  color: #AC92EC !important;
}

.bg-magenta-light {
  background-color: #AC92EC !important;
  color: #FFF !important;
}

.bg-fade-magenta-dark {
  background-color: rgba(150, 122, 220, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-magenta-light {
  background-color: rgba(150, 122, 220, 0.3) !important;
  color: #FFF !important;
}

.color-magenta-dark {
  color: #967ADC !important;
}

.color-icon-magenta {
  stroke: #967ADC !important;
  fill: rgba(150, 122, 220, 0.3) !important;
}

.bg-magenta-dark {
  background-color: #967ADC !important;
  color: #FFF !important;
}

.border-magenta-light {
  border-color: #AC92EC !important;
}

.border-magenta-dark {
  border-color: #967ADC !important;
}

.focus-magenta:focus {
  border-color: #967ADC !important;
}

.gradient-magenta {
  background-image: linear-gradient(to bottom, #AC92EC, #967ADC);
}

.color-brown-light {
  color: #BAA286 !important;
}

.bg-brown-light {
  background-color: #BAA286 !important;
  color: #FFF !important;
}

.bg-fade-brown-dark {
  background-color: rgba(170, 142, 105, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-brown-light {
  background-color: rgba(170, 142, 105, 0.3) !important;
  color: #FFF !important;
}

.color-brown-dark {
  color: #AA8E69 !important;
}

.color-icon-brown {
  stroke: #AA8E69 !important;
  fill: rgba(170, 142, 105, 0.3) !important;
}

.bg-brown-dark {
  background-color: #AA8E69 !important;
  color: #FFF !important;
}

.border-brown-light {
  border-color: #BAA286 !important;
}

.border-brown-dark {
  border-color: #AA8E69 !important;
}

.focus-brown:focus {
  border-color: #AA8E69 !important;
}

.gradient-brown {
  background-image: linear-gradient(to bottom, #BAA286, #AA8E69);
}

.color-gray-light {
  color: #e2e5ea !important;
}

.bg-gray-light {
  background-color: #e2e5ea !important;
  color: #FFF !important;
}

.bg-fade-gray-dark {
  background-color: rgba(170, 178, 189, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-gray-light {
  background-color: rgba(170, 178, 189, 0.3) !important;
  color: #FFF !important;
}

.color-gray-dark {
  color: #AAB2BD !important;
}

.color-icon-gray {
  stroke: #AAB2BD !important;
  fill: rgba(170, 178, 189, 0.3) !important;
}

.bg-gray-dark {
  background-color: #AAB2BD !important;
  color: #FFF !important;
}

.border-gray-light {
  border-color: #e2e5ea !important;
}

.border-gray-dark {
  border-color: #AAB2BD !important;
}

.focus-gray:focus {
  border-color: #AAB2BD !important;
}

.gradient-gray {
  background-image: linear-gradient(to bottom, #e2e5ea, #AAB2BD);
}

.color-aqua-light {
  color: #4FC1E9 !important;
}

.bg-aqua-light {
  background-color: #4FC1E9 !important;
  color: #FFF !important;
}

.bg-fade-aqua-dark {
  background-color: rgba(67, 74, 84, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-aqua-light {
  background-color: rgba(67, 74, 84, 0.3) !important;
  color: #FFF !important;
}

.color-aqua-dark {
  color: #3BAFDA !important;
}

.color-icon-aqua {
  stroke: #3BAFDA !important;
  fill: rgba(67, 74, 84, 0.3) !important;
}

.bg-aqua-dark {
  background-color: #3BAFDA !important;
  color: #FFF !important;
}

.border-aqua-light {
  border-color: #4FC1E9 !important;
}

.border-aqua-dark {
  border-color: #3BAFDA !important;
}

.focus-aqua:focus {
  border-color: #3BAFDA !important;
}

.gradient-aqua {
  background-image: linear-gradient(to bottom, #4FC1E9, #3BAFDA);
}

.color-night-light {
  color: #222529 !important;
}

.bg-night-light {
  background-color: #222529 !important;
  color: #FFF !important;
}

.bg-fade-night-dark {
  background-color: rgba(67, 74, 84, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-night-light {
  background-color: rgba(67, 74, 84, 0.3) !important;
  color: #FFF !important;
}

.color-night-dark {
  color: #16181c !important;
}

.color-icon-night {
  stroke: #16181c !important;
  fill: rgba(67, 74, 84, 0.3) !important;
}

.bg-night-dark {
  background-color: #16181c !important;
  color: #FFF !important;
}

.border-night-light {
  border-color: #222529 !important;
}

.border-night-dark {
  border-color: #16181c !important;
}

.focus-night:focus {
  border-color: #16181c !important;
}

.gradient-night {
  background-image: linear-gradient(to bottom, #222529, #16181c);
}

.color-dark-light {
  color: #656D78 !important;
}

.bg-dark-light {
  background-color: #656D78 !important;
  color: #FFF !important;
}

.bg-fade-dark-dark {
  background-color: rgba(67, 74, 84, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-dark-light {
  background-color: rgba(67, 74, 84, 0.3) !important;
  color: #FFF !important;
}

.color-dark-dark {
  color: #434A54 !important;
}

.color-icon-dark {
  stroke: #434A54 !important;
  fill: rgba(67, 74, 84, 0.3) !important;
}

.bg-dark-dark {
  background-color: #434A54 !important;
  color: #FFF !important;
}

.border-dark-light {
  border-color: #656D78 !important;
}

.border-dark-dark {
  border-color: #434A54 !important;
}

.focus-dark:focus {
  border-color: #434A54 !important;
}

.gradient-dark {
  background-image: linear-gradient(to bottom, #656D78, #434A54);
}

/* Cells in general: */
/* Active cells: */
/* Sections: */
/* Menus: */
/* Buttons: */
/* Topbar elements: */
/* To do: Use the z-index-maps consistently everywhere and eliminate all other ways of specifying z-indices. */
/* ^You could make it not-allowed, but it might be distracting. */
body.info-mode #enter-info-mode-button {
  display: none !important;
}

body:not(.info-mode) [data-pointer_events=none] {
  pointer-events: none;
}
body:not(.info-mode) [data-pointer_events=auto] {
  pointer-events: auto;
}
body:not(.info-mode) #exit-info-mode-button {
  display: none !important;
}

:root {
  --onboarding-animation: 250ms linear;
  --transition-default: none;
  --general-border-radius: 16px //To do: Omit redundancy with $border-radius-general;
}
:root #onboarding-overlay[data-onboarding_content_type=navigation] {
  --onboarding-animation: 1000ms linear;
}

* {
  font-family: "Inter", "Open Sans", Tahoma, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.5;
  scroll-behavior: smooth;
}

body, html, #body-wrapper {
  height: 100%;
  width: 1px;
  min-width: 100%;
  background-color: var(--color-neutral-10);
  overflow: hidden;
}

.fa-duotone {
  filter: opacity(100%) saturate(100%);
}

input[type=checkbox] {
  cursor: pointer;
  margin-right: 0.5em;
}

a, .inline-link {
  text-decoration: none;
  color: var(--color-hyperlink);
  font-weight: 600;
  cursor: pointer;
}

::placeholder, ::-webkit-input-placeholder {
  /* ^Latter needed for Edge. */
  color: var(--color-neutral-30);
  font-size: 1em;
}

h1, h2, h3, h4 {
  color: black;
}

h1 {
  font-weight: 600;
  margin-bottom: 0.5em;
  font-size: 1.5em;
}

h2 {
  font-weight: 400;
}

h3 {
  font-weight: 400;
}

h4 {
  font-weight: 600;
}

button, select {
  border: 1px solid var(--color-border);
  color: var(--color-dark);
  background: white;
  padding: 0.3125em 0.625em;
}

.deleted {
  text-decoration: line-through;
}

fieldset {
  border: 0 none;
}
fieldset div {
  display: flex;
}
fieldset div input[type=checkbox] {
  margin-top: 0.1875em;
}
fieldset div label {
  cursor: pointer;
}

.target-cell-highlight {
  animation: highlight 2s;
}

@keyframes target-cell-highlight {
  0% {
    background: #ffff99;
  }
  100% {
    background: none;
  }
}
.underline {
  text-decoration: underline;
}

button, select {
  cursor: pointer;
}

.hide {
  display: none;
}

.original {
  color: var(--color-gray-uxbin);
}

.browser-error-screen {
  padding: 1em 2em;
}
.browser-error-screen h1, .browser-error-screen h2, .browser-error-screen h3 {
  font-size: 1.375em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.125em;
}
.browser-error-screen ul {
  font-size: 1.1875em;
  list-style-type: square;
  padding-left: 2.5em;
}

.root:not(.hidden-cell) .cell-content:not(.empty) {
  min-height: 1.875em;
}

.hidden-select-box, .hidden-within-sidebar, .hidden-save-button, .hidden-sidebar-option {
  display: none !important;
}

/* important sollte hier nicht stören, da die Klasse hidden- die Anzeige endgültig bestimmen sollte */
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

*:focus {
  outline: none;
}

.clickable {
  cursor: pointer;
}
.clickable:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}

.icon-in-display-name {
  opacity: 0.6;
  padding-right: 0.3125em;
}

/* For Font Awesome: */
.fa-rotate-45 {
  transform: rotate(45deg);
  --webkit-transform: rotate(45deg);
}

.cell-field-wrapper.editable-inherited-value > .cell-field-content {
  opacity: 0.5;
  font-style: italic;
}

.best-anchor {
  background-color: lightgreen;
}

.shown-hidable-field {
  display: block !important;
}

.white-space-nowrap {
  white-space: nowrap;
}

@keyframes appear-from-above {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes appear-from-below {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes disappear-to-above {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes disappear-to-below {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
/* Print
 * @media print
 * #main-ui-area 
 * .scrollable-wrapper
 *  position: static */
/* Different Versions of the UI Layout */
@media print {
  html #main-ui-area, html body, html html, html #body-wrapper {
    height: auto;
  }
  html #main-ui-area > .scrollable-wrapper {
    overflow: initial;
  }
  html .root {
    border: thin solid var(--color-neutral-20);
  }
}
body[deployment=dev] .prod:not(.dev), body[deployment=dev] .node:not(.dev) {
  display: none !important;
}
body[deployment=prod] .dev:not(.prod), body[deployment=prod] .node:not(.prod) {
  display: none !important;
}
body[deployment=node] .dev:not(.node), body[deployment=node] .prod:not(.node) {
  display: none !important;
}

@layer icon-button-default, icon-button-highlighted;
@layer icon-button-default {
  .cell-icon-button-icon, .topbar-icon-button-icon, .sidebar-entry-icon, .overlay-header-icon {
    color: black;
    cursor: pointer;
  }
  .cell-icon-button-icon:not(.no-hover):hover, .topbar-icon-button-icon:not(.no-hover):hover, .sidebar-entry-icon:not(.no-hover):hover, .overlay-header-icon:not(.no-hover):hover {
    background-color: var(--color-neutral-10);
  }
  .cell-icon-button-icon:active, .topbar-icon-button-icon:active, .sidebar-entry-icon:active, .overlay-header-icon:active {
    outline: thin solid var(--color-highlight);
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
  }
  .cell-icon-button-icon:active, .cell-icon-button-icon.clicked-and-loading, .topbar-icon-button-icon:active, .topbar-icon-button-icon.clicked-and-loading, .sidebar-entry-icon:active, .sidebar-entry-icon.clicked-and-loading, .overlay-header-icon:active, .overlay-header-icon.clicked-and-loading {
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
  }
  .cell-icon-button-icon.clicked-and-loading, .topbar-icon-button-icon.clicked-and-loading, .sidebar-entry-icon.clicked-and-loading, .overlay-header-icon.clicked-and-loading {
    cursor: wait;
  }
  .icon-row-left > .icon-wrapper, .icon-row-right > .icon-wrapper {
    color: black;
    cursor: pointer;
  }
  .icon-row-left > .icon-wrapper:not(.no-hover):hover, .icon-row-right > .icon-wrapper:not(.no-hover):hover {
    background-color: var(--color-neutral-10);
  }
  .icon-row-left > .icon-wrapper:active, .icon-row-right > .icon-wrapper:active {
    outline: thin solid var(--color-highlight);
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
  }
  .icon-row-left > .icon-wrapper:active, .icon-row-left > .icon-wrapper.clicked-and-loading, .icon-row-right > .icon-wrapper:active, .icon-row-right > .icon-wrapper.clicked-and-loading {
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
  }
  .icon-row-left > .icon-wrapper.clicked-and-loading, .icon-row-right > .icon-wrapper.clicked-and-loading {
    cursor: wait;
  }
}
@layer icon-button-highlighted {
  #hamburger-menu-button.hamburger-showing-disconnected > .topbar-icon-button-icon {
    color: var(--color-red-80);
  }
}
.fa-star {
  color: #f6bb42;
}

.mind-map-button {
  width: 2.5em;
}

textarea, .clearable-input-field-wrapper, .ck.ck-editor {
  max-width: max(500px, 100%);
  border-style: solid;
  border-width: thin;
  border-color: hsl(227, 17%, 83%);
  border-radius: 6px;
  box-shadow: 0px 0px 0px 1px #CDD1DC;
}
textarea.edit-dom-with-invalid-value, .clearable-input-field-wrapper.edit-dom-with-invalid-value, .ck.ck-editor.edit-dom-with-invalid-value {
  box-shadow: 0px 0px 0px 1px var(--color-default-error);
}
textarea.edit-dom-with-invalid-value:focus-within, .clearable-input-field-wrapper.edit-dom-with-invalid-value:focus-within, .ck.ck-editor.edit-dom-with-invalid-value:focus-within {
  box-shadow: 0px 0px 0px 2px var(--color-default-error) inset, 0px 0px 0px 4px #B4C5FF, 0px 2px 6px 0px rgba(5, 16, 55, 0.2);
}
textarea, .clearable-input-field-wrapper, .ck.ck-editor {
  padding: 8px 11px;
}
textarea:focus-within, .clearable-input-field-wrapper:focus-within, .ck.ck-editor:focus-within {
  box-shadow: 0px 0px 0px 4px #B4C5FF, inset 0px 0px 0px 1px #8C92AB;
}

.invalid-value-feedback {
  color: var(--color-default-error);
}
.invalid-value-feedback:before {
  content: "\f071";
  font: var(--fa-font-light);
  padding-right: 6px;
}

textarea {
  border-radius: 6px 6px 0 6px;
  font-size: 1em;
  width: 100%;
}

.clearable-input-field-wrapper {
  display: flex;
  align-items: center;
  border-radius: 0.375em;
  gap: 10px;
}
.clearable-input-field-wrapper > .icon-wrapper {
  color: black;
  cursor: pointer;
}
.clearable-input-field-wrapper > .icon-wrapper:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.clearable-input-field-wrapper > .icon-wrapper:active {
  outline: thin solid var(--color-highlight);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.clearable-input-field-wrapper > .icon-wrapper:active, .clearable-input-field-wrapper > .icon-wrapper.clicked-and-loading {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.clearable-input-field-wrapper > .icon-wrapper.clicked-and-loading {
  cursor: wait;
}
.clearable-input-field-wrapper > input {
  font-size: 1em;
  border-style: none;
  width: calc(100% - 35px);
}

.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
  border-color: transparent;
}

.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
  border-color: transparent;
  box-shadow: none;
}

.ck.ck-editor__editable_inline {
  padding: 0;
}

.button-general {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 14px 24px 14px 18px;
  gap: 0.75em;
  border-radius: 30px;
  background-color: var(--color-neutral-10);
  color: var(--color-neutral-100);
  cursor: pointer;
}
.button-general.button-general-without-icon {
  padding-right: 18px;
}
.button-general.small-button-general i, .button-general.very-small-button-general i {
  font-size: 16px;
}
.button-general.small-button-general {
  padding: 4px 18px 4px 14px;
}
.button-general.small-button-general.icon-without-text {
  padding: 4px;
}
.button-general.very-small-button-general {
  padding: 4px 4px 4px 4px;
}
.button-general.blue-button {
  background-color: var(--color-blue-uxbin-primary-light);
  color: var(--color-white);
  font-weight: 600;
}
.button-general.blue-outline-button {
  outline: 1px solid var(--color-blue-uxbin-primary-light);
  outline-offset: -1px;
  background-color: var(--color-white);
  color: var(--color-blue-uxbin-primary-light);
}
.button-general.disabled, .button-general[disabled] {
  background-color: var(--color-neutral-10);
  color: var(--color-neutral-50);
  cursor: not-allowed;
}
.button-general.selected-button, .button-general:not(.disabled):hover {
  background-color: var(--color-neutral-20);
}
.button-general.selected-button.blue-button, .button-general:not(.disabled):hover.blue-button {
  background-color: var(--color-blue-60);
}
.button-general.selected-button.blue-outline-button, .button-general:not(.disabled):hover.blue-outline-button {
  outline-color: var(--color-blue-60);
  color: var(--color-blue-60);
  background-color: var(--color-white);
}
.button-general:active {
  background-color: var(--color-neutral-60);
  color: var(--color-white);
}

.blue-outline-icon {
  color: var(--color-blue-uxbin-primary-light);
}

.sticky-field[data-field_type=ContributionStamp] > .cell-field-content > .avatar-outer-wrapper {
  padding: 0.375em 0;
}

.date-and-or-time-wrapper > input {
  width: 100%;
}

.reactions-wrapper {
  display: grid;
}
.reactions-wrapper.without-text {
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, 2.5em);
}
.reactions-wrapper.with-text {
  grid-gap: 0.5em;
}
.reactions-wrapper.with-text .reaction {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content min-content 1fr;
  grid-gap: 0.5em;
}
.reactions-wrapper .reaction {
  align-items: center;
}
.reactions-wrapper .reaction .reaction-avatar {
  display: grid;
  align-items: center;
  justify-content: center;
}
.reactions-wrapper .reaction .reaction-avatar img {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
}
.reactions-wrapper .reaction .reaction-icon {
  display: grid;
  justify-content: center;
}
.reactions-wrapper .reaction .reaction-icon i {
  font-size: 1.8125em;
}
.reactions-wrapper .reaction .reaction-text {
  font-size: 0.8125em;
}

.list-item-collection {
  margin-left: -0.5em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.list-item-collection > .list-item-with-controls {
  display: flex;
  justify-items: start;
  align-items: center;
}
.list-item-collection > .list-item-with-controls > .icon-wrapper {
  flex: 0 0 2em;
  cursor: pointer;
}
.list-item-collection > .list-item-with-controls > .list-item-display-dom, .list-item-collection > .list-item-with-controls .list-item-editable-content {
  flex: 1;
  cursor: pointer;
}
.list-item-collection > .list-item-with-controls > .list-item-display-dom.set-of-texts-input, .list-item-collection > .list-item-with-controls .list-item-editable-content.set-of-texts-input {
  cursor: text;
}
.list-item-collection > .list-item-with-controls > .list-item-editable-content {
  margin: 0.5em 0;
}

[data-field_type=SetOfTexts] > .list-item-collection-user-input > .list-item-collection {
  gap: 0;
}

.new-text-item-control {
  width: -moz-max-content;
  width: max-content;
}

.cell-field-content.list-item-collection-user-input {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  max-width: 37.5em;
}

.cell-field-content[data-link_layout=Column] {
  max-width: 25em;
}

.rating-option {
  cursor: pointer;
  padding-left: 0.3125em;
  padding-right: 0.3125em;
  font-size: 1em;
  color: #888;
}

.rating-option.selected-rating-option {
  font-weight: 700;
  font-size: 1em;
  color: black;
}

.set-of-texts > li > span {
  min-width: 3.125em;
}
.set-of-texts > li > span:empty:before {
  content: "";
  font-style: italic;
  color: #666;
}
.set-of-texts > li > .set-of-texts-input {
  width: 100%;
}
.set-of-texts > li > i {
  cursor: pointer;
}
.set-of-texts.edit-mode > li.hidden-sot-item {
  display: none;
}
.set-of-texts.edit-mode > li {
  display: flex;
  gap: 1em;
  padding-bottom: 0.75em;
  align-items: center;
}
.set-of-texts.edit-mode > li:first-child .fa-arrow-up {
  visibility: hidden;
}
.set-of-texts.edit-mode > li:nth-last-child(3) .fa-arrow-down {
  visibility: hidden;
}
.set-of-texts.edit-mode > .fa-plus {
  width: calc(100% - 3.1875em);
  margin-left: 3.1875em;
}
.set-of-texts.bulleted-list {
  display: flex;
  flex-direction: column;
  padding-left: 0;
}
.set-of-texts .add-new-label {
  order: 1;
}
.set-of-texts.comma-separated-values {
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.set-of-texts.comma-separated-values > li:not(:last-child):after {
  content: ", ";
}
.set-of-texts.floating-tags {
  flex-direction: row;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.set-of-texts.floating-tags > li {
  border: 1px solid var(--color-border);
  margin: 0 0.3125em 0.3125em 0;
}
.set-of-texts.floating-tags > li span {
  padding: 0.125em 0.3125em;
}

.cell-field-content ul.set-of-texts:not(.bulleted-list):not(.floating-tags) > li {
  margin: 0;
}

.arrowed-list > .arrowed-list-element {
  display: grid;
  grid-template-areas: "icon display-name";
  align-items: center;
  cursor: pointer;
}
.arrowed-list > .arrowed-list-element div.arrowed-text {
  grid-area: display-name;
  justify-self: start;
}
.arrowed-list.arrowed-list-for-display > .arrowed-list-element {
  grid-template-columns: 1.875em 1fr;
  grid-column-gap: 0.125em;
}
.arrowed-list.arrowed-list-for-display > .arrowed-list-element > .icon-wrapper {
  grid-area: icon;
}
.arrowed-list.arrowed-list-for-display > .arrowed-list-element > .icon-wrapper > i {
  color: var(--color-blue-40);
}
.arrowed-list.arrowed-list-for-input > .arrowed-list-element {
  grid-template-columns: min-content;
  grid-column-gap: 0.3125em;
}
.arrowed-list.arrowed-list-for-input > .arrowed-list-element:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}

.pre-wrapped-text {
  white-space: pre-wrap;
}

mark.marker-yellow {
  background-color: var(--color-yellow-20);
}

.cell-field-content.active-ck-editor {
  cursor: text;
}
.cell-field-content.active-ck-editor.ck-focused {
  margin-top: 2.125em;
}

.ck.ck-reset.ck-editor {
  cursor: text;
}

.ck-body-wrapper .ck-powered-by-balloon {
  display: none;
}

.ck-placeholder[data-placeholder]:before {
  color: var(--color-neutral-30);
  font-size: 1em;
}

.cell-field-content h1, .ck-editor h1, .onboarding-section-instructions h1 {
  font-weight: 600;
  font-size: 1.5em;
  margin-top: 0.6875em;
  margin-bottom: 0.6875em;
}
.cell-field-content h2, .ck-editor h2, .onboarding-section-instructions h2 {
  font-weight: 600;
  font-size: 1.1875em;
  margin-top: 0.8125em;
  margin-bottom: 0.625em;
}
.cell-field-content h3, .ck-editor h3, .onboarding-section-instructions h3 {
  font-weight: 600;
  font-size: 1em;
  margin-top: 1em;
  margin-bottom: 0.5em;
}
.cell-field-content h4, .ck-editor h4, .onboarding-section-instructions h4 {
  font-weight: 400;
  font-size: 1em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-style: italic;
}
.cell-field-content p, .ck-editor p, .onboarding-section-instructions p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.cell-field-content ol > li, .cell-field-content ul > li, .ck-editor ol > li, .ck-editor ul > li, .onboarding-section-instructions ol > li, .onboarding-section-instructions ul > li {
  padding-left: 0em;
}
.cell-field-content ul > li, .ck-editor ul > li, .onboarding-section-instructions ul > li {
  margin-left: 1.25em;
}
.cell-field-content ol > li, .ck-editor ol > li, .onboarding-section-instructions ol > li {
  margin-left: 1.5em;
}
.cell-field-content ul, .ck-editor ul, .onboarding-section-instructions ul {
  list-style-type: square;
}
.cell-field-content ol, .ck-editor ol, .onboarding-section-instructions ol {
  list-style-type: decimal;
  list-style-position: outside;
}

div.ck.ck-editor__top {
  position: sticky;
  z-index: 10;
  /* Needed at least for Brave on iPhone, maybe for Safari as well. And it can hardly hurt. */
  top: 1.25em;
  border-bottom: 1px solid #ddd;
}

/* Making the toolbar compact -- work in progress, which needs to be discussed carefully and then finalized: */
/* Funktionierende ck-styles: */
a.ck.ck-button.ck-button_with-text {
  padding: 0 0.125em !important;
}

a.ck.ck-button {
  min-width: 0 !important;
  min-height: 0 !important;
}

.ck.ck-toolbar {
  padding: 0;
}
.ck.ck-toolbar > .ck-toolbar__items > * {
  margin: 0 !important;
}
.ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown {
  margin: 0 !important;
}

.ck.ck-editor__editable_inline > :last-child {
  margin: 0 !important;
}

.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline {
  max-height: 75vh;
  overflow-y: scroll;
}

.thumbnail-box-with-icon {
  display: grid;
  grid-template-areas: "thumbnail-box";
  cursor: pointer;
}
#body-wrapper[data-minor_mode] .thumbnail-box-with-icon > .thumbnail-icon-wrapper {
  display: none;
}
#body-wrapper[data-minor_mode] .root.active-cell .thumbnail-box-with-icon {
  cursor: pointer;
}
#body-wrapper[data-minor_mode] .root:not(.active-cell) .thumbnail-box-with-icon {
  cursor: default;
}
#body-wrapper[data-minor_mode=start-edit-mode] .root:not(.active-cell) .thumbnail-box-with-icon {
  cursor: crosshair;
}
.thumbnail-box-with-icon {
  /* ^ Needed to exceed specificity of previous rule. */
}
#body-wrapper[data-minor_mode=start-edit-mode] .thumbnail-box-with-icon {
  cursor: crosshair;
}
.thumbnail-box-with-icon > .thumbnail-icon-wrapper {
  grid-area: thumbnail-box;
  align-self: end;
  justify-self: center;
  background-color: hsla(0, 0%, 0%, 0.3);
  color: hsla(0, 0%, 100%, 0.7);
}
.thumbnail-box-with-icon > .video-time-display-in-thumbnail-box {
  grid-area: thumbnail-box;
  align-self: start;
  justify-self: center;
  background-color: hsla(0, 0%, 0%, 0.3);
  color: hsl(0, 0%, 100%);
  padding: 0.125em 0.25em;
  border-radius: 16px;
}
.thumbnail-box-with-icon > .thumbnail {
  display: block;
  pointer-events: none;
  /* ^ Earilier remark: The 128-px image will not be made larger than that. */
  /* ^ But video thumbnails will be made bigger, so I removed this specification, even in Prod. Is it still needed for Parall-E?
  * I guess the goal was to ensure that an image thumbnail is never wider than its enclosing box even with very small screens .
  * But is it necessary ? We now have an explicit relevant max-width on the Parall-E thumbnails . * / */
  grid-area: thumbnail-box;
  align-self: end;
  justify-self: center;
}
.thumbnail-box-with-icon > .thumbnail.youtube-thumbnail {
  max-width: 12.25em;
}

.list-item-with-controls.link-with-controls > .link-display-dom > .thumbnail-box-with-icon > .thumbnail {
  justify-self: start;
}

.link-widgets-thumbnail {
  grid-area: thumbnail;
  height: 1.875em;
  width: auto;
  pointer-events: none;
}

.audio-bookmark {
  color: var(--color-dark);
  font-weight: 600;
}

.web-link {
  display: block;
  padding-top: 0.125em;
  cursor: pointer;
}

.inline-web-link {
  display: inline-block;
  cursor: pointer;
  color: var(--color-hyperlink);
}

.link-subtitle {
  color: var(--color-field-title-in-display-mode);
  font-weight: normal;
  cursor: pointer;
}

.link-caption {
  line-height: 1.35;
}

.cell-field-content > .link-display-dom > .link-caption {
  cursor: pointer;
}
.cell-field-content > .link-display-dom:not(:first-child) {
  margin-top: 0.4375em;
}

.link-widgets {
  /* Where is this element positioned within its surrounding grid? */
  /* How is this element aligned within its grid cell? */
  /* How big is this element? */
  /* Does the element always have display: grid? */
  display: grid;
  /* What does the grid look like? */
  grid-template-areas: "thumbnail" "input-line" "caption-input-line" "save-button";
  row-gap: 0.1875em;
  border-left: 5px solid #ddd;
  padding-left: 0.3125em;
  margin: 0.3125em 0;
  width: 100%;
}
.link-widgets > .finish-link-button {
  grid-area: save-button;
  width: -moz-max-content;
  width: max-content;
}

.link-address-input-line {
  grid-area: input-line;
  /* How is this element aligned within its grid cell? */
  /* How big is this element? */
  /* Does the element always have display: grid? */
  display: grid;
  /* What does the grid look like? */
  grid-template-areas: "subtitle" "input-field" "button";
  grid-template-columns: 1fr;
  /* How are the items to be aligned within their cells? */
  justify-items: start;
  /* (Other specifications:) */
}
.link-address-input-line > .link-subtitle {
  grid-area: subtitle;
}
.link-address-input-line > .link-widgets-url-input {
  grid-area: input-field;
  width: 100%;
}
.link-address-input-line > .link-small-button {
  grid-area: button;
}
.link-address-input-line > .link-widgets-url-input {
  padding: 0.1875em;
}

.link-file-input-line {
  display: grid;
  /* What does the grid look like? */
  grid-template-areas: "subtitle" "filename" "button";
  grid-template-columns: repeat(1, max-content);
  /* How are the items to be aligned within their cells? */
  justify-items: start;
  /* (Other specifications:) */
}
.link-file-input-line > .link-subtitle {
  grid-area: subtitle;
}
.link-file-input-line > .link-uploaded-filename {
  grid-area: filename;
  display: flex;
  align-items: center;
}
.link-file-input-line > .link-file-selector-with-label {
  grid-area: button;
}
.link-file-input-line > *:not(:last-child) {
  margin-right: 0.625em;
}

.link-caption-input-line {
  /* Where is this element positioned within its surrounding grid? */
  grid-area: caption-input-line;
  /* How is this element aligned within its grid cell? */
  /* How big is this element? */
  /* Does the element always have display: grid? */
  display: grid;
  /* What does the grid look like? */
  grid-template-areas: "caption-subtitle" "caption-input";
  /* How are the items to be aligned within their cells? */
  /* (Other specifications:) */
}
.link-caption-input-line .link-subtitle {
  grid-area: caption-subtitle;
}
.link-caption-input-line > .link-widgets-text {
  padding: 0.1875em;
}

/* ^ It is normally inherited as 5px, 10px, but I prefer it when the user can see exactly where there is white space,
 * for example at the beginning of a line. 3px is enough to avoid a collision with the borderline
 * but not enough to be confused with persistent white space */
.link-file-selector {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.url {
  color: #137333;
}
.url:empty:before {
  content: "Url";
  color: var(--color-gray-uxbin);
  font-weight: normal;
  font-style: italic;
}

.new-link-controls {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 1em;
       column-gap: 1em;
  row-gap: 0.5em;
}
.new-link-controls > span {
  margin-bottom: 0.125em;
}
.new-link-controls > span:not(:last-child) {
  margin-right: 0.625em;
}

.link-large-button, .link-small-button {
  display: grid;
  grid-template-areas: "icon text";
  grid-template-columns: 1.875em 1fr;
  grid-column-gap: 0.5em;
  align-items: center;
  cursor: pointer;
  border-radius: 16px;
  border-style: solid;
  border-width: 1px;
  padding-right: 0.625em;
  white-space: nowrap;
  /* &:hover
  * background: var(--color-light) */
}
.link-large-button > .large-or-small-button-icon, .link-small-button > .large-or-small-button-icon {
  grid-area: icon;
  justify-self: end;
}
.link-large-button > .large-or-small-button-text, .link-small-button > .large-or-small-button-text {
  grid-area: text;
  justify-self: start;
}

.link-large-button {
  height: 1.875em;
}

.show-audio-player, .make-available-offline {
  font-size: 2.3125em;
  cursor: pointer;
}

.audio-element-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.weblink-icon.fa-file-pdf {
  color: var(--color-pdf-icon);
}
.weblink-icon.fa-file-word {
  color: var(--color-word-icon);
}
.weblink-icon.fa-arrow-up-right-from-square {
  color: var(--color-hyperlink);
}

.thumbnail-square {
  display: grid;
  align-items: end;
  justify-items: center;
}

[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] > .link-display-dom {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0.3125em 0;
}
[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] > .link-display-dom > .link-caption {
  display: flex;
  justify-content: center;
  max-width: 14.0625em;
}
[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] > .link-display-dom {
  /* Other text properties: see .link-caption above. */
}
[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] > .link-display-dom > .web-link {
  flex-direction: column;
  padding: 0.1875em;
  display: flex;
  height: 100%;
  word-break: break-all;
}
[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] > .link-display-dom {
  /* Other text properties: see .web-link above. */
}
[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] > .link-display-dom > .fa-headphones.show-audio-player,
[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] > .link-display-dom > .fa-video.show-video-player,
[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] > .link-display-dom > .fa-file-pdf.weblink-icon,
[data-field_type=Url] > .cell-field-content[data-link_layout=Gallery] > .link-display-dom > .fa-link-ext.weblink-icon {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5em;
}

.list-item-with-controls.link-with-controls > .link-display-dom {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.list-item-with-controls.link-with-controls > .link-display-dom > .thumbnail-square {
  justify-items: start;
}

.inline-loading-animation {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* Edit mode: */
.recipient-buttons {
  display: flex;
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
}
.recipient-buttons > .add-recipient-button, .recipient-buttons > .show-all-recipients-button, .recipient-buttons .recipient-ok-button {
  cursor: pointer;
  border-radius: 20px;
  background-color: var(--color-general-light);
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  padding-left: 0.5em;
  padding-right: 0.625em;
  margin-top: 0.3125em;
  margin-right: 0.625em;
}
.recipient-buttons > .add-recipient-button:not(.no-hover):hover, .recipient-buttons > .show-all-recipients-button:not(.no-hover):hover, .recipient-buttons .recipient-ok-button:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.recipient-buttons > .add-recipient-button, .recipient-buttons .recipient-ok-button {
  color: black;
  font-weight: 600;
}
.recipient-buttons.recipient-added > .add-recipient-button {
  display: none;
}
.recipient-buttons:not(.recipient-added) > .recipient-ok-button {
  display: none;
}

.recipient-collection > .recipient-wrapper {
  display: flex;
}
.recipient-collection > .recipient-wrapper:first-child .fa-arrow-up, .recipient-collection > .recipient-wrapper:last-child .arrow-down {
  visibility: hidden;
}
.recipient-collection > .recipient-wrapper > .control-buttons {
  align-items: center;
  display: grid;
  /* What does the grid look like? */
  grid-template-rows: auto;
  grid-template-columns: repeat(3, max-content);
  grid-column-gap: 1em;
  justify-items: center;
}
.recipient-collection > .recipient-wrapper > .control-buttons > i {
  cursor: pointer;
}
.recipient-collection > .recipient-wrapper > .recipient-content {
  border-left: 0.3125em solid #ddd;
  padding-left: 1em;
  margin: 0.3125em 0 0 1em;
  width: 100%;
}
.recipient-collection > .recipient-wrapper > .recipient-content > .recipient-content-address, .recipient-collection > .recipient-wrapper > .recipient-content > .recipient-content-name {
  display: block;
  width: 100%;
}
.recipient-collection:not(.show-all-recipients) > .recipient-wrapper:not(.new-recipient-wrapper) {
  display: none;
}
.recipient-collection:not(.show-all-recipients) .fa-arrow-up, .recipient-collection:not(.show-all-recipients) .fa-arrow-down {
  visibility: hidden;
}

.operation-button {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
}
.operation-button.small-operation-button {
  padding: 0.375em;
}

#chat-overlay {
  background-color: var(--color-neutral-10);
}
.chat-overlay-open #chat-overlay {
  right: 0;
}
#chat-overlay > #chat-overlay-header {
  grid-template-columns: 6em 1fr 6em;
  padding: 0 1em;
}
#chat-overlay > #chat-panel {
  flex: 1;
  overflow-y: auto;
  padding: 1em;
  display: flex;
  flex-direction: column-reverse;
}
#chat-overlay > #chat-panel .root[data-creator] {
  word-break: break-word;
  border-radius: 1em;
}
#chat-overlay > #chat-panel .root[data-creator]:before, #chat-overlay > #chat-panel .root[data-creator]:after {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;
}
#chat-overlay > #chat-overlay-footer {
  background-color: var(--color-white);
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.26);
  padding: 0.5em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "add-button send";
  z-index: 15;
}
#chat-overlay > #chat-overlay-footer > .add-chat-message {
  grid-area: add-button;
  justify-self: center;
}

[data-clmn_label_in_subtree=Chat0] > .root {
  width: 100%;
}

body.chat-overlay-open #show-chat-from-topbar-button {
  display: none;
}

.links-from-chat {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.links-from-chat > .link-from-chat {
  display: flex;
  padding: 0 6px 0 6px;
  align-items: center;
  border-radius: 6px;
  justify-content: space-around;
  cursor: pointer;
}
.links-from-chat > .link-from-chat:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}

.entity-number, .links-from-chat > .link-from-chat {
  border-radius: 16px 0 0 0;
  background: var(--color-neutral-20);
  padding: 2px 6px 2px 8px;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--color-neutral-80);
}

.thumbnail-box-with-icon[data-image_letter]:before, .media-window-body[data-image_letter]:before {
  content: attr(data-image_letter);
  position: absolute;
  background: var(--color-neutral-20);
  font-weight: 700;
}

.thumbnail-box-with-icon[data-image_letter]:before {
  top: 27px;
  padding: 0 4px;
  font-size: 0.6875em;
}

.media-window-body[data-image_letter]:before {
  top: 34px;
  padding: 0 4px;
  font-size: 1.25em;
}

/* Within #main-ui-area*/
.scrollable-area[data-value=explorer] {
  background: white;
}
.scrollable-area[data-value=explorer] > #explorer-headerbar {
  height: 3em;
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: white;
}
.scrollable-area[data-value=explorer] > #explorer-headerbar button {
  border: 0;
  padding: 0 1em;
  display: flex;
  align-items: center;
  gap: 0.3125em;
}
.scrollable-area[data-value=explorer] > #explorer-headerbar button:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.scrollable-area[data-value=explorer] > #explorer-headerbar button.new-folder i, .scrollable-area[data-value=explorer] > #explorer-headerbar button.new-intervention i {
  position: relative;
}
.scrollable-area[data-value=explorer] ul.current-position {
  background: white;
}
.scrollable-area[data-value=explorer] #explorer-breadcrumbs {
  display: flex;
}
.scrollable-area[data-value=explorer] #explorer-breadcrumbs > div {
  display: flex;
  position: relative;
  align-items: center;
  padding: 0 1em;
  cursor: pointer;
  color: var(--color-dark);
}
.scrollable-area[data-value=explorer] #explorer-breadcrumbs > div:not(:last-child) {
  margin-right: 0.875em;
}
.scrollable-area[data-value=explorer] #explorer-breadcrumbs > div:not(:last-child):after {
  content: "\e8ad";
  font-family: fontello;
  position: absolute;
  right: -0.625em;
  top: 1em;
}
.scrollable-area[data-value=explorer] #explorer-breadcrumbs > div:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.scrollable-area[data-value=explorer] .current-position > li, .scrollable-area[data-value=explorer] .current-position li:first-child {
  display: block;
  border-bottom: 1px solid var(--color-border);
  padding: 0.5em;
  cursor: pointer;
}
.scrollable-area[data-value=explorer] .current-position > li:not(.no-hover):hover, .scrollable-area[data-value=explorer] .current-position li:first-child:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.scrollable-area[data-value=explorer] .folder:before, .scrollable-area[data-value=explorer] .intervention:before, .scrollable-area[data-value=explorer] .model:before {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.scrollable-area[data-value=explorer] .folder:before {
  content: "\f07b";
  font: var(--fa-font-light);
}
.scrollable-area[data-value=explorer] .intervention:before {
  content: "\e290";
  font: var(--fa-font-light);
}
.scrollable-area[data-value=explorer] .model:before {
  content: "\f0ce";
  font: var(--fa-font-light);
}
.scrollable-area[data-value=explorer] .file-edit-mode > span {
  display: flex;
}
.scrollable-area[data-value=explorer] .file-edit-mode > span.explanation:empty:after {
  content: "Explanation";
  padding-left: 0.3125em;
  color: var(--color-gray-uxbin);
  font-style: italic;
}
.scrollable-area[data-value=explorer] .file-edit-mode > span > input {
  padding: 0.25em;
  flex: 1;
}
.scrollable-area[data-value=explorer] .explorer-context-menu-header {
  text-align: right;
  position: relative;
}
.scrollable-area[data-value=explorer] .explorer-context-menu-header > .xxx-icon-wrapper > i {
  padding: 0.625em;
  margin: -0.3125em;
  border-radius: 50%;
  position: relative;
}
.scrollable-area[data-value=explorer] .explorer-context-menu-header > .xxx-icon-wrapper > i > .xxx-explorer-context-menu {
  position: absolute;
  background: white;
  white-space: nowrap;
  z-index: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  outline: thin solid #4A89DC;
  border-radius: 0.5em;
  padding: 0.625em;
}
.scrollable-area[data-value=explorer] .explorer-context-menu-header > .xxx-icon-wrapper > i > .xxx-explorer-context-menu span {
  flex: 0;
  padding: 0.3125em;
  color: black;
}
.scrollable-area[data-value=explorer] .explorer-context-menu-header > .xxx-icon-wrapper > i > .xxx-explorer-context-menu > li {
  display: block;
  padding: 0.5em 2em 0.5em 1em;
  border-bottom: 1px solid var(--color-border);
}
.scrollable-area[data-value=explorer] .explorer-context-menu-header > .xxx-icon-wrapper > i > .xxx-explorer-context-menu > li > i {
  color: var(--color-dark);
  position: relative;
}
.scrollable-area[data-value=explorer] .explorer-context-menu-header > .xxx-icon-wrapper > i > .xxx-explorer-context-menu > li > i:hover {
  background: transparent;
}
.scrollable-area[data-value=explorer] .explorer-context-menu-header > .xxx-icon-wrapper > i > .xxx-explorer-context-menu > li > i.faicon-user-o:after {
  font-family: "fontello";
  content: "\e835";
  position: absolute;
  font-style: normal;
  right: 0.3125em;
  bottom: 0.3125em;
}
.scrollable-area[data-value=explorer] .explorer-context-menu-header > .xxx-icon-wrapper > i > .xxx-explorer-context-menu > li:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.scrollable-area[data-value=explorer][data-view=table] li.explorer-li, .scrollable-area[data-value=explorer][data-view=table] .current-position > li:first-child {
  display: none;
}
.scrollable-area[data-value=explorer][data-view=table] .current-position > li, .scrollable-area[data-value=explorer][data-view=table] .current-position > ul > li:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100vw;
}
.scrollable-area[data-value=explorer][data-view=table] span {
  flex: 1 1 6.25em;
  padding: 0 0.5em;
  color: #555;
}
.scrollable-area[data-value=explorer][data-view=table] span.display-name, .scrollable-area[data-value=explorer][data-view=table] span.explanation {
  flex: 1 0 20em;
  min-height: 1.375em;
}
.scrollable-area[data-value=explorer][data-view=table] span.display-name {
  color: var(--color-dark);
  padding: 0.1875em 0.5em;
}
.scrollable-area[data-value=explorer][data-view=table] span.explanation {
  font-size: 0.8125em;
}
.scrollable-area[data-value=explorer][data-view=table] span.owner {
  font-size: 0.8125em;
  color: green;
  display: flex;
  align-items: center;
}
.scrollable-area[data-value=explorer][data-view=table] span.owner .user {
  min-width: 2.5em;
  margin: 0 0.3125em 0 0;
}
.scrollable-area[data-value=explorer][data-view=table] span.created {
  font-size: 0.8125em;
}
.scrollable-area[data-value=explorer][data-view=table] span.last-modified {
  font-size: 0.8125em;
}

.loading {
  text-align: center;
  padding: 1em;
}
.loading img {
  width: 1.875em;
  height: 1.875em;
}

#facade-topbar {
  height: 2.1875em;
  width: 100%;
  background-color: var(--color-topbar);
}

/* From internal-css-for-cell-content: */
.rp-html #main-panel [data-clmn_label_in_cell_content=Tippseiten] {
  grid-template-areas: "Piktogramm Titel" "Piktogramm Erlaeuterung";
  grid-template-columns: 3.125em 1fr;
  grid-template-rows: repeat(2, max-content) 1fr;
  -moz-column-gap: 1.25em;
       column-gap: 1.25em;
}
.rp-html #main-panel [data-clmn_label_in_cell_content=Tippseiten] > [data-field_label=Titel] .cell-field-content {
  font-size: 1em;
  font-weight: 600;
  color: black;
}
.rp-html #main-panel [data-clmn_label_in_cell_content=Tippseiten] > [data-field_label=Erlaeuterung] .cell-field-content {
  font-size: 0.875em;
  font-weight: 400;
  color: black;
}
.rp-html #main-panel [data-clmn_label_in_cell_content=Tippseiten] > [data-field_label=Piktogramm] .cell-field-content {
  color: black;
}
.rp-html {
  /* From internal-css-for-column-widths: */
}
.rp-html #main-panel {
  grid-template-areas: "Tippseiten";
  grid-template-columns: 100%;
}
.rp-html [data-clmn_label_in_subtree=Tippseiten] > .root {
  width: 100%;
}
.rp-html [data-clmn_label_in_header_subtree=Tippseiten] > .header-root {
  width: 100%;
}

#stop-global-search-button {
  display: none;
}

#body-wrapper[data-major_mode=global-search-mode] #start-global-search-button {
  display: none;
}
#body-wrapper[data-major_mode=global-search-mode] #stop-global-search-button {
  display: block;
}

@media all and (max-width: 664px) {
  #global-search-controls {
    z-index: 11;
    background: white;
  }
}
#body-wrapper.showing-global-search-results.small-screen-mode #global-search-box-with-icons {
  display: none;
}

#body-wrapper[data-major_mode=global-search-mode] #global-search-controls {
  display: flex !important;
  width: calc(100vw - 24px);
  flex-wrap: wrap;
  -moz-column-gap: 0.875em;
       column-gap: 0.875em;
  row-gap: 0.3125em;
  align-items: center;
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block {
  display: flex;
  align-items: center;
  gap: 0.625em;
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons {
  position: relative;
  display: flex;
  align-items: center;
  background-color: white;
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons #global-search-input {
  flex: 0 1 200px;
  min-width: 60px;
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons .small-search-icon {
  cursor: pointer;
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons .small-search-icon:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons .arrow-icon {
  grid-area: arrow;
  transition: width 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons .arrow-icon[data-number_of_previous_search_terms="0"] {
  display: none;
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons .arrow-icon.opened {
  transform: rotate(-180deg) translateY(-1px);
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons .recent-searches {
  position: absolute;
  top: 2.625em;
  right: 0;
  z-index: 11;
  width: 100%;
  background: white;
  padding: 0.3125em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons .recent-searches .recent-search {
  padding: 0.0625em 0.3125em;
  cursor: pointer;
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-left-block #global-search-box-with-icons .recent-searches .recent-search:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
#body-wrapper[data-major_mode=global-search-mode] #global-search-controls .global-search-right-block {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.625em;
}

@media (min-width: 1200px) {
  body.onboarding-overlay-open.main-ui-area-maybe-smaller > #onboarding-overlay > #onboarding-overlay-header > .maximize-right-overlay-button, body.onboarding-overlay-open.main-ui-area-maybe-smaller > #onboarding-overlay > #onboarding-overlay-header > .minimize-right-overlay-button {
    display: none;
  }
}
@media (max-width: 1199px) {
  body.onboarding-overlay-open[data-onboarding_overlay_status=maximized] > #onboarding-overlay > #onboarding-overlay-header > .maximize-right-overlay-button {
    display: none;
  }
  body.onboarding-overlay-open[data-onboarding_overlay_status=maximized] > #onboarding-overlay > #onboarding-overlay-header > .minimize-right-overlay-button {
    display: flex;
  }
}
body.onboarding-overlay-open[data-onboarding_overlay_status=minimized] > #onboarding-overlay > #onboarding-overlay-header > .maximize-right-overlay-button {
  display: flex;
}
body.onboarding-overlay-open[data-onboarding_overlay_status=minimized] > #onboarding-overlay > #onboarding-overlay-header > .minimize-right-overlay-button {
  display: none;
}
body.onboarding-overlay-open[data-onboarding_overlay_status=minimized] .onboarding-section-for-about > .onboarding-section-top-part > .icon-wrapper {
  display: none;
}

#onboarding-overlay {
  background-color: var(--color-white);
  transition-delay: 0s;
}
#onboarding-overlay .invalid-value-feedback {
  background: var(--color-neutral-10);
  margin: 0 -5px -5px -5px;
  padding: 8px 16px;
  border-top: thin solid #ccc;
}
#onboarding-overlay #onboarding-overlay-header {
  display: flex;
  justify-content: space-between;
  padding: 0 1em;
}
#onboarding-overlay #onboarding-overlay-header > .onboarding-tab {
  cursor: pointer;
  height: 100%;
  align-items: center;
  display: flex;
}
@media (min-width: 22.5em) {
  #onboarding-overlay #onboarding-overlay-header > .onboarding-tab:first-child {
    margin-left: 2.75em;
  }
}
#onboarding-overlay #onboarding-overlay-header > .onboarding-tab.selected-onboarding-tab {
  font-weight: 600;
  border-bottom: 6px solid var(--color-neutral-80);
  margin-bottom: -6px;
}
#onboarding-overlay .right-overlay-header .close-right-overlay-button {
  justify-self: right;
}
#onboarding-overlay > #onboarding-search-wrapper {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  position: relative;
  z-index: 20;
  padding: 0 1em;
}
#onboarding-overlay > #onboarding-search-wrapper:focus-within > #autocomplete-wrapper {
  display: flex !important;
}
#onboarding-overlay > #onboarding-search-wrapper > #onboarding-search-box {
  width: calc(100% - 2em);
  margin-top: 1em;
  padding: 0.5em;
  display: grid;
  grid-template-areas: "clear-icon-wrapper input search-icon-wrapper";
  grid-template-columns: 1.875em 1fr 1.875em;
  grid-column-gap: 0.5em;
  justify-items: start;
  align-items: center;
}
#onboarding-overlay > #onboarding-search-wrapper > #onboarding-search-box > .icon-wrapper {
  grid-area: clear-icon-wrapper;
}
#onboarding-overlay > #onboarding-search-wrapper > #onboarding-search-box > input {
  grid-area: input;
}
#onboarding-overlay > #onboarding-search-wrapper > #onboarding-search-box > .onboarding-search-icon-wrapper {
  grid-area: search-icon-wrapper;
}
#onboarding-overlay > #onboarding-search-wrapper > #autocomplete-wrapper {
  display: none;
  position: absolute;
  top: 5em;
  right: 0;
  max-height: 18em;
  overflow-y: auto;
  flex-direction: column;
  z-index: 20;
  width: 100%;
  background: white;
  padding: 0.3125em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
#onboarding-overlay > #onboarding-search-wrapper > #autocomplete-wrapper > .onboarding-keyword-div {
  padding: 0.125em 3.75em;
  cursor: pointer;
}
#onboarding-overlay > #onboarding-search-wrapper > #autocomplete-wrapper > .onboarding-keyword-div:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
#onboarding-overlay > #onboarding-search-wrapper > #autocomplete-wrapper > .onboarding-keyword-div[data-keyword_visibility=invisible] {
  display: none;
}
#onboarding-overlay > #onboarding-search-wrapper > #autocomplete-wrapper > .onboarding-keyword-div[data-keyword_visibility=visible].highlighted-keyword {
  background-color: var(--color-neutral-20);
}
#onboarding-overlay > #onboarding-search-wrapper > #autocomplete-wrapper > .onboarding-keyword-div[data-keyword_visibility=visible] > .search-text-within-onboarding-keyword {
  font-weight: 700;
}
#onboarding-overlay[data-onboarding_content_type=default] > #onboarding-search-wrapper > #onboarding-search-box > .button-general, #onboarding-overlay[data-onboarding_content_type=navigation] > #onboarding-search-wrapper > #onboarding-search-box > .button-general {
  visibility: hidden;
}
#onboarding-overlay > #onboarding-content {
  height: calc(100vh - 54px);
  padding: 0 1em;
  transition: padding var(--onboarding-animation);
  overflow-y: auto;
}
#onboarding-overlay > #onboarding-content[data-onboarding_content_id=navigation-onboarding-content], #onboarding-overlay > #onboarding-content[data-onboarding_content_id=default-onboarding-content], #onboarding-overlay > #onboarding-content[data-onboarding_content_id=search-results-onboarding-content], #onboarding-overlay > #onboarding-content[data-onboarding_content_id=ui-element-based-panel-header] {
  overflow: hidden;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header {
  padding-top: 1em;
  z-index: 10;
  border-bottom: thin solid #ccc;
  padding-bottom: 8px;
  background: white;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header > .button-general {
  margin-bottom: 10px;
  transition: padding var(--onboarding-animation);
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header > .button-general span:last-child {
  white-space: nowrap;
  overflow: hidden;
  transition: max-width var(--onboarding-animation);
  max-width: 300px;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#default-panel-header, #onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#search-results-panel-header, #onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#about-panel-header, #onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#nav-intro-header, #onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#ui-element-based-panel-header {
  display: grid;
  grid-template-areas: "prolog prolog" "_blank_ hints";
  grid-template-columns: 2.25em 1fr;
  grid-column-gap: 0.5em;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#default-panel-header {
  grid-template-areas: "user-level-setting-div user-level-setting-div" "prolog prolog" "_blank_ hints";
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header {
  display: grid;
  grid-template-areas: "prolog prolog prolog" "_blank1 button button" "_blank1_ editing-button-wrapper editing-button-wrapper" "_blank1_ mute-button-wrapper mute-button-wrapper" "top-part top-part top-part" "_blank2_ status status" "_blank2 hints hints";
  grid-template-columns: 2.25em 1fr 1fr;
  transition: margin var(--onboarding-animation);
  transition-delay: 0s;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > #enter-info-mode-button, #onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > #exit-info-mode-button {
  grid-area: button;
  justify-self: start;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > .onboarding-section-top-part {
  grid-area: top-part;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > #return-to-goal-selection-button {
  grid-area: actions-button;
  justify-self: start;
  display: none;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > #onboarding-mute-button-wrapper {
  grid-area: mute-button-wrapper;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > .navigation-panel-status {
  grid-area: status;
  padding-left: 1em;
  align-self: center;
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > .navigation-panel-status[data-navigation_panel_status=completed] {
  box-shadow: inset 6px 0px 0px var(--color-green-60);
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > .navigation-panel-status[data-navigation_panel_status=expectedStepFocused], #onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > .navigation-panel-status[data-navigation_panel_status=earlier-step] {
  box-shadow: inset 6px 0px 0px var(--color-toast-info);
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > .navigation-panel-status[data-navigation_panel_status=noStepRelevant] {
  box-shadow: inset 6px 0px 0px var(--color-toast-warning);
}
#onboarding-overlay > #onboarding-content .sticky-onboarding-content-header#navigation-panel-header > .navigation-panel-status[data-navigation_panel_status=earlierStepFocused] {
  box-shadow: inset 6px 0px 0px var(--color-toast-neutral);
}
#onboarding-overlay[data-onboarding_content_type=default] > #onboarding-content > #default-onboarding-content .scrollable-onboarding-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin-right: -1em;
  padding-right: 1em;
}
#onboarding-overlay[data-onboarding_content_type=search-results] > #onboarding-content > #search-results-onboarding-content .scrollable-onboarding-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin-right: -1em;
  padding-right: 1em;
}
#onboarding-overlay[data-onboarding_content_type=navigation] > #onboarding-content > #navigation-onboarding-content .scrollable-onboarding-content {
  display: flex;
  flex-direction: column;
  padding-bottom: 62.5em;
  overflow-y: auto;
  margin-right: -1em;
  padding-right: 1em;
}

.onboarding-hints {
  grid-area: hints;
  align-self: center;
  font-style: italic;
  margin-top: 0.5em;
}

.onboarding-content-prolog {
  grid-area: prolog;
  display: grid;
  grid-template-areas: "icon title";
  grid-template-columns: 2.25em 1fr;
  grid-column-gap: 0.5em;
  justify-items: start;
}
.onboarding-content-prolog > .icon-wrapper {
  grid-area: icon;
}
.onboarding-content-prolog > .onboarding-content-prolog-title {
  grid-area: title;
  font-size: 1.5em;
  font-weight: 300;
}

#user-level-setting-div {
  grid-area: user-level-setting-div;
}

#onboarding-exit-button {
  grid-area: exit-button;
}

.onboarding-section-instructions > #back-to-possible-actions-button {
  background-color: var(--color-neutral-10);
  padding: 6px 0px;
  border-radius: 1em;
  margin-top: 3em;
}
.onboarding-section-instructions > #back-to-possible-actions-button:not(.no-hover):hover {
  background-color: var(--color-neutral-20);
}
.onboarding-section-instructions > #back-to-possible-actions-button > .icon-wrapper {
  justify-self: center;
}
.onboarding-section-instructions > .onboarding-block {
  display: grid;
  grid-template-columns: 2.75em 1fr;
  grid-template-areas: "number-and-letter text" "icon-wrapper text" "_blank_ supplementary-text";
  align-items: baseline;
  margin-bottom: 1em;
  margin: 0 0.3125em 1em 0.3125em;
  max-width: 328px;
  transition: max-width var(--onboarding-animation);
  overflow: hidden;
  outline-width: 0px;
}
.onboarding-section-instructions > .onboarding-block > .onboarding-block-number-and-letter {
  grid-area: number-and-letter;
  text-align: center;
  z-index: 2;
  position: relative;
  background-color: inherit;
  border-radius: 1em 1em 0 0;
  transition: font-size var(--onboarding-animation);
}
.onboarding-section-instructions > .onboarding-block > .onboarding-block-text {
  grid-area: text;
}
.onboarding-section-instructions > .onboarding-block > .icon-wrapper.for-mini-nav-panel {
  grid-area: icon-wrapper;
  justify-self: center;
  opacity: 0;
  margin-top: -100%;
  transition: opacity var(--onboarding-animation), margin var(--onboarding-animation);
  z-index: 1;
  position: relative;
  background: inherit;
  border-radius: 0 0 1em 1em;
}
.onboarding-section-instructions > .onboarding-block > .onboarding-block-supplementary-text {
  grid-area: supplementary-text;
}
.onboarding-section-instructions > .onboarding-block.relevant-onboarding-block {
  cursor: pointer;
  border-radius: 1em;
  outline-width: 5px;
  outline-color: var(--color-onboarding-highlighting);
}
.onboarding-section-instructions > .onboarding-block.relevant-onboarding-block.block-with-no-css-selector {
  outline-color: var(--color-neutral-80);
  outline-width: 2px;
  outline-style: solid;
}
.onboarding-section-instructions > .onboarding-block.relevant-onboarding-block:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.onboarding-section-instructions > .onboarding-block > .onboarding-block-text > [data-onboarding_event=highlight] {
  border-bottom: 2px solid var(--color-highlight-onboarding-text);
}
.onboarding-section-instructions > .onboarding-block > .onboarding-block-text > [data-onboarding_event=highlight] > i {
  padding: 0 0.25em 0 0.25em;
}
.onboarding-section-instructions > .onboarding-block > .onboarding-block-text > [data-onboarding_event=highlight] > .icon-plus-word {
  white-space: nowrap;
}
.onboarding-section-instructions > .onboarding-block > .onboarding-block-text > [data-onboarding_event=highlight] > .icon-plus-word > i {
  padding: 0 0.25em 0 0.25em;
}
.onboarding-section-instructions > .onboarding-block > .onboarding-block-links {
  display: flex;
  flex-direction: column;
  gap: 0.625em;
  margin: auto;
}

.onboarding-block-supplementary-text {
  font-style: italic;
}

.onboarding-section-divider {
  display: flex;
  justify-self: baseline;
  border: thin solid var(--color-neutral-30);
  margin-top: -1em;
  margin-bottom: 1em;
  background: white;
  padding: 2px 1em;
  margin-left: 1.75rem;
  border-radius: 1em;
  color: var(--color-neutral-80);
}

.onboarding-section-hr {
  border-top: thin solid var(--color-neutral-30);
  margin-top: 2.25em;
}

.onboarding-section-divider-placeholder {
  height: 2em;
}

.onboarding-section-top-part {
  display: grid;
  grid-template-areas: "icon heading" "n-steps explanation";
  grid-template-columns: 2.25em 1fr;
  grid-column-gap: 0.5em;
  justify-items: start;
  margin-left: -1em;
  margin-right: -1em;
  padding: 1em;
}
.onboarding-section-top-part.for-goal-selection {
  cursor: pointer;
}
.onboarding-section-top-part.for-goal-selection:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.onboarding-section-top-part > .icon-wrapper {
  grid-area: icon;
  justify-self: center;
}
.onboarding-section-top-part > .onboarding-section-heading {
  grid-area: heading;
  font-size: 1.25em;
  font-weight: 600;
}
.onboarding-section-top-part > .onboarding-section-explanation {
  grid-area: explanation;
}
.onboarding-section-top-part > .onboarding-section-number-of-steps {
  display: none;
  grid-area: n-steps;
  justify-self: center;
  white-space: nowrap;
  align-self: normal;
}
.onboarding-section-top-part > .onboarding-section-number-of-steps > .onboarding-section-number-of-steps-label {
  color: var(--color-neutral-60);
  font-size: 12px;
}

.onboarding-section-extension-prolog {
  margin-left: 2.75em;
  font-style: italic;
  margin-bottom: 1em;
}
.onboarding-section-extension-prolog.irrelevant-extension-prolog {
  opacity: 0.35;
}

body.onboarding-overlay-open #show-onboarding-from-topbar-button {
  display: none;
}
body.onboarding-overlay-open #onboarding-overlay {
  right: 0;
}

.onboarding-block-text {
  width: 284px;
  margin-left: 0;
  max-height: 400px;
  transition: margin-left var(--onboarding-animation), opacity var(--onboarding-animation), max-height var(--onboarding-animation);
}

body[data-onboarding_overlay_status=minimized] #onboarding-overlay .onboarding-block-text, body[data-onboarding_overlay_status=minimized] #onboarding-overlay .onboarding-block-supplementary-text {
  margin-left: -100%;
  opacity: 0;
  max-height: 0;
  width: 284px;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay .icon-wrapper.for-mini-nav-panel {
  opacity: 1;
  margin-top: 0;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay .sticky-onboarding-content-header#navigation-panel-header {
  margin-top: calc(55px - 100%);
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay .sticky-onboarding-content-header .button-general {
  gap: 0;
  padding: 4px;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay .sticky-onboarding-content-header .button-general span:last-child {
  max-width: 0 !important;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay .sticky-onboarding-content-header#default-panel-header, body[data-onboarding_overlay_status=minimized] #onboarding-overlay .sticky-onboarding-content-header#search-results-panel-header, body[data-onboarding_overlay_status=minimized] #onboarding-overlay .sticky-onboarding-content-header#about-panel-header, body[data-onboarding_overlay_status=minimized] #onboarding-overlay .sticky-onboarding-content-header#nav-intro-header, body[data-onboarding_overlay_status=minimized] #onboarding-overlay .sticky-onboarding-content-header#ui-element-based-panel-header {
  margin-left: 0.375em;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay {
  right: calc(-23.5em + 78px);
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-overlay-header {
  justify-content: normal;
  padding: 0 0.75em;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-overlay-header > .hide-right-overlay-button {
  display: none !important;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-overlay-header > .minimize-right-overlay-button {
  display: none;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-overlay-header > .onboarding-tab {
  display: none;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-search-wrapper {
  display: none;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content {
  padding-left: 3px;
  padding-top: 3em;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #about-onboarding-content > .onboarding-section-for-about {
  margin-left: 3em;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #navigation-onboarding-content > .scrollable-onboarding-content > .onboarding-section-instructions > .onboarding-section-hr, body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #navigation-onboarding-content > .scrollable-onboarding-content > .onboarding-section-instructions > .onboarding-section-divider, body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #navigation-onboarding-content > .scrollable-onboarding-content > .onboarding-section-instructions > .onboarding-section-extension-prolog {
  display: none;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #navigation-onboarding-content > .scrollable-onboarding-content > .onboarding-section-instructions > .onboarding-block {
  max-width: 2.875em;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #navigation-onboarding-content > .scrollable-onboarding-content > .onboarding-section-instructions > .onboarding-block > .onboarding-block-number-and-letter {
  font-size: 1.25em;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #navigation-onboarding-content > .scrollable-onboarding-content > .onboarding-section-instructions > .onboarding-block > .icon-wrapper.for-mini-nav-panel {
  display: flex !important;
}
body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #default-onboarding-content > .scrollable-onboarding-content, body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #search-results-onboarding-content > .scrollable-onboarding-content, body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #about-onboarding-content > .scrollable-onboarding-content, body[data-onboarding_overlay_status=minimized] #onboarding-overlay > #onboarding-content > #ui-element-based-onboarding-content > .scrollable-onboarding-content {
  margin-left: 3em;
}

.scrollable-onboarding-content {
  transition: margin ease 300ms;
}

/* Trying inclusion of the large font size in the maximized panel: */
.full-ordering-explanation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-weight: 600;
}
.full-ordering-explanation > .section-explanation {
  display: grid;
  grid-template-areas: "relation heading heading" "_blank_ _blank_ relevance-conditions";
  grid-template-columns: 1.5em 2em 1fr;
}
.full-ordering-explanation > .section-explanation > .section-relation {
  grid-area: relation;
}
.full-ordering-explanation > .section-explanation > .section-heading {
  grid-area: heading;
}
.full-ordering-explanation > .section-explanation > .relevance-conditions {
  grid-area: relevance-conditions;
  font-weight: normal;
}

.relevance-condition-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.inherited-relevance-conditions {
  list-style-type: none;
  margin-left: 0;
}

.specified-relevance-conditions {
  list-style-type: disc;
  margin-left: 0;
}

.onboarding-exit-message {
  font-size: 1.5em;
}

body[data-special_groupsheet=groupsheets-home] > #onboarding-search-wrapper, body[data-special_groupsheet=project-home] > #onboarding-search-wrapper {
  display: none;
}

#onboarding-overlay-header:has(.selected-onboarding-tab[data-onboarding_tab_type=specific]) + #onboarding-search-wrapper {
  display: none;
}

#onboarding-overlay:has([data-onboarding_content_id=navigation-onboarding-content]) > #onboarding-search-wrapper {
  display: none;
}

#onboarding-content {
  display: flex;
}

#default-onboarding-content, #search-results-onboarding-content, #navigation-onboarding-content, #about-onboarding-content, #ui-element-based-onboarding-content {
  display: none;
  background-color: white;
}

#onboarding-content[data-onboarding_content_id=default-onboarding-content] #default-onboarding-content,
#onboarding-content[data-onboarding_content_id=search-results-onboarding-content] #search-results-onboarding-content,
#onboarding-content[data-onboarding_content_id=navigation-onboarding-content] #navigation-onboarding-content,
#onboarding-content[data-onboarding_content_id=about-onboarding-content] #about-onboarding-content,
#onboarding-content[data-onboarding_content_id=ui-element-based-onboarding-content] #ui-element-based-onboarding-content {
  display: flex;
  flex-direction: column;
}

#navigation-onboarding-content {
  transition: margin var(--onboarding-animation);
}

@keyframes highlightPulse {
  0% {
    outline-color: var(--color-onboarding-highlighting);
  }
  50% {
    outline-color: var(--color-onboarding-highlighting-darker);
  }
  100% {
    outline-color: var(--color-onboarding-highlighting);
  }
}
.highlighted-for-onboarding {
  outline-width: 5px;
  animation: highlightPulse 1000ms ease-in-out forwards;
}

[data-highlight_style=solid] {
  outline-style: solid;
}

[data-highlight_style=dashed] {
  outline-style: dashed;
}

[data-highlight_style=dotted] {
  outline-style: dotted;
}

[data-highlight_style=double] {
  outline-style: double;
}

[data-highlight_style=groove] {
  outline-style: groove;
}

[data-highlight_style=ridge] {
  outline-style: ridge;
}

[data-highlight_style=inset] {
  outline-style: inset;
}

[data-highlight_style=outset] {
  outline-style: outset;
}

.onboarding-instruction-overlay {
  position: absolute;
  top: 5px;
  left: 10px;
  border-radius: 16px;
  background-color: white;
  padding: 0.5em 1em;
  width: 31.25em;
  max-width: calc(100% - 20px - 3em);
  z-index: 100;
  cursor: pointer;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-onboarding-highlighting);
}
.onboarding-instruction-overlay [data-onboarding_event=highlight] {
  border-bottom: 2px solid var(--color-highlight-onboarding-text);
}
.onboarding-instruction-overlay [data-onboarding_event=highlight] > i {
  padding: 0 0.25em 0 0.25em;
}
.onboarding-instruction-overlay [data-onboarding_event=highlight] > .icon-plus-word {
  white-space: nowrap;
}
.onboarding-instruction-overlay [data-onboarding_event=highlight] > .icon-plus-word > i {
  padding: 0 0.25em 0 0.25em;
}

.onboarding-ordering-explanation-table-header {
  font-weight: 600;
}

/* Within #topbar */
#hlc-toggle-and-controls {
  /* Where is this element positioned within its surrounding grid? */
  /* How is this element aligned within its grid cell? */
  /* Does the element always have display: grid? */
  display: grid;
  /* What does the grid look like? */
  grid-template-areas: "hlc-toggle high-level-controls";
  grid-template-columns: max-content max-content;
  grid-template-rows: 100%;
  /* How are the items to be aligned within their cells? */
  /* (Other specifications:) */
  position: relative;
  /* Control the visibility of the two components from here, since the data attribute
  * * is attached to this element: */
}
@media all and (max-width: 664px) {
  #hlc-toggle-and-controls[data-hlc_show_toggle_or_controls=toggle] > #hlc-toggle {
    display: grid;
  }
  #hlc-toggle-and-controls[data-hlc_show_toggle_or_controls=toggle] > #high-level-controls {
    display: none;
  }
  #hlc-toggle-and-controls[data-hlc_show_toggle_or_controls=controls] > #hlc-toggle {
    display: grid;
  }
  #hlc-toggle-and-controls[data-hlc_show_toggle_or_controls=controls] > #hlc-toggle .topbar-icon-button-icon {
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
  }
  #hlc-toggle-and-controls[data-hlc_show_toggle_or_controls=controls] > #high-level-controls {
    gap: 0.9375em;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--color-white);
    padding-bottom: 1.5em;
  }
  #hlc-toggle-and-controls[data-hlc_show_toggle_or_controls=controls] .dropdown-menu-with-title {
    grid-template-areas: "dropdown-menu-title" "dropdown-menu-placeholder";
    grid-template-rows: 1.5em 1.75em;
    align-items: self-end;
  }
}
#hlc-toggle-and-controls > #hlc-toggle {
  align-self: stretch;
  height: auto;
  justify-self: center;
  /* How big is this element? */
  /* Does the element always have display: grid? */
  /* What does the grid look like? */
  grid-template-areas: "hlc-toggle-button";
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  /* How are the items to be aligned within their cells? */
  /* (Other specifications:) */
  display: none;
}
#hlc-toggle-and-controls > #high-level-controls {
  /* Where is this element positioned within its surrounding grid? */
  /* How is this element aligned within its grid cell? */
  grid-area: high-level-controls;
  /* How big is this element? */
  /* Does the element always have display: grid? */
  display: grid;
  /* What does the grid look like? */
  grid-template-columns: max-content;
  grid-auto-columns: max-content;
  grid-template-rows: 1.25em;
  grid-column-gap: 0.625em;
  /* How are the items to be aligned within their cells? */
  align-items: center;
  justify-items: center;
  transform: translateY(-1em);
  z-index: 20;
  /* (Other specifications:) */
}
@media all and (max-width: 664px) {
  #hlc-toggle-and-controls > #high-level-controls {
    left: 0;
    top: 0;
    /* ^ It may be best to cover up the other controls:
    * The user's attention is focused better.
    * They can't click on other buttons while the controls are visible, which would require quickly hiding the controls.
    * A bit less of the tipsheet is covered up. */
    z-index: 40;
    background-color: var(--color-topbar);
    min-width: 10.9375em;
    grid-row-gap: 0.3125em;
    box-shadow: 0 0.625em 0.625em rgba(0, 0, 0, 0.3);
    justify-items: start;
    position: fixed;
    width: 100%;
    padding: 0.5em 1em;
  }
}
#hlc-toggle-and-controls > #high-level-controls > .hlc-cancel-option {
  display: none;
}
@media all and (max-width: 664px) {
  #hlc-toggle-and-controls > #high-level-controls > .hlc-cancel-option {
    display: block;
    padding: 0.5em;
    cursor: pointer;
    width: 100%;
  }
  #hlc-toggle-and-controls > #high-level-controls > .hlc-cancel-option:not(.no-hover):hover {
    background-color: var(--color-neutral-10);
  }
  #hlc-toggle-and-controls > #high-level-controls > .hlc-cancel-option:active {
    outline: 1px solid var(--color-topbar);
  }
}
#hlc-toggle-and-controls > #high-level-controls > .hlc-widget {
  grid-row: 1;
  grid-column: auto;
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  /* How are the items to be aligned within their cells? */
  align-items: start;
  justify-items: center;
}
#hlc-toggle-and-controls > #high-level-controls > .hlc-widget > .dropdown-menu-with-title {
  padding-top: 0em;
}
#hlc-toggle-and-controls > #high-level-controls > .hlc-widget > .dropdown-menu-with-title > .dropdown-menu-title {
  max-width: 10.9375em;
}
#hlc-toggle-and-controls > #high-level-controls > .hlc-widget {
  /* (Other specifications:) */
}
#hlc-toggle-and-controls > #high-level-controls > .hlc-widget.ignored-hlc-widget {
  opacity: 0.3;
}
@media all and (max-width: 664px) {
  #hlc-toggle-and-controls > #high-level-controls > .hlc-widget {
    grid-row: auto;
    grid-column: 1;
  }
  #hlc-toggle-and-controls > #high-level-controls > .hlc-widget .dropdown-menu-title .topbar-selector-icon {
    padding-right: 0.375em;
  }
}

body:not([data-special_status=Administrator]) #hlc-toggle-and-controls:has(.hlc-widget-for-administrator) {
  display: none;
}

/* Not currently needed; may be inefficient for the whole UI (ul, li). */
.gh-project-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 4em;
  margin: 2em;
  justify-content: space-between;
}
.gh-project-overview > .gh-project-overview-title {
  width: 100%;
  font-size: 2em;
  font-weight: 600;
  margin-bottom: -2em;
}
.gh-project-overview > .gh-project-category {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.gh-project-overview > .gh-project-category > .gh-project-category-heading {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
.gh-project-overview > .gh-project-category > .gh-project-category-heading > .project-category {
  font-size: 1.5em;
  font-weight: 600;
}
.gh-project-overview > .gh-project-category > .gh-project-category-entries {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.gh-project-overview > .gh-project-category > .gh-project-category-entries > .gh-project-card {
  position: relative;
  width: 15em;
  height: 21.875em;
  z-index: 1;
  transition: transform 0.2s ease;
}
.gh-project-overview > .gh-project-category > .gh-project-category-entries > .gh-project-card:hover {
  transform: scale(1.1);
  position: relative;
  z-index: 2;
}
.gh-project-overview > .gh-project-category > .gh-project-category-entries > .gh-project-card .gh-background {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  transform: translateY(calc(-100% - 25px)) scale(0.97);
  border: thin solid #ccc;
  background: white;
}
.gh-project-overview > .gh-project-category > .gh-project-category-entries > .gh-project-card .gh-background.gh-background-2 {
  transform: translateY(calc(-100% - 35px)) scale(0.94);
  z-index: -2;
}
.gh-project-overview > .gh-project-category > .gh-project-category-entries > .gh-project-card > .gh-project-card-content {
  height: 100%;
  border: thin solid #ccc;
}

.gh-empty-state-text {
  max-width: 18.75em;
  color: #777;
  font-style: oblique;
}

.gh-project-card-content, .ph-groupsheet-card {
  display: grid;
  cursor: pointer;
  background: white;
  position: relative;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15);
  gap: 0.25em;
  margin: 0.875em 0em;
  grid-template-areas: "home-card-display-name" "home-card-graphical-wrapper" "home-card-explanation";
  grid-template-columns: 1fr;
  grid-template-rows: 5em 8.5625em 1fr;
  grid-row-gap: 0.25em;
  overflow: hidden;
}
.gh-project-card-content > .home-card-display-name, .ph-groupsheet-card > .home-card-display-name {
  grid-area: home-card-display-name;
  font-size: 1.25em;
  font-weight: 700;
  color: hsl(228, 17%, 23%);
  display: flex;
  align-items: end;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  margin: 0em 1.25em;
}
.gh-project-card-content > .home-card-graphical-wrapper, .ph-groupsheet-card > .home-card-graphical-wrapper {
  grid-area: home-card-graphical-wrapper;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  overflow: hidden;
}
.gh-project-card-content > .home-card-graphical-wrapper > .home-card-image, .ph-groupsheet-card > .home-card-graphical-wrapper > .home-card-image {
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}
.gh-project-card-content > .home-card-explanation, .ph-groupsheet-card > .home-card-explanation {
  grid-area: home-card-explanation;
  display: flex;
  justify-content: center;
  margin: 0em 1.25em;
}

.gh-icon-and-text-user-role {
  display: none;
}

@media all and (max-width: 664px) {
  .gh-project-overview {
    margin: 0.5rem;
  }
  .gh-project-overview > .gh-project-category {
    width: 100%;
    gap: 1rem;
  }
  .gh-project-overview > .gh-project-category > .gh-project-category-heading > .icon-wrapper > i {
    font-size: 1.25em;
  }
  .gh-project-overview > .gh-project-category > .gh-project-category-heading > .project-category {
    font-size: 1.25em;
  }
  .gh-project-overview > .gh-project-category .gh-project-category-empty {
    max-width: 100%;
  }
  .gh-project-overview > .gh-project-category > .gh-project-category-entries > .gh-project-card {
    width: 100%;
    height: auto;
  }
  .gh-project-overview > .gh-project-category > .gh-project-category-entries > .gh-project-card .gh-background {
    transform: translateY(calc(-100% - 5px)) scale(0.97);
  }
  .gh-project-overview > .gh-project-category > .gh-project-category-entries > .gh-project-card .gh-background.gh-background-2 {
    transform: translateY(calc(-100% - 10px)) scale(0.94);
  }
  .gh-project-overview > .gh-project-category > .gh-project-category-entries > .gh-project-card .gh-project-card-content {
    width: 100%;
  }
  .gh-project-card-content, .ph-groupsheet-card {
    display: grid;
    grid-template-areas: "home-card-graphical-wrapper home-card-display-name";
    grid-template-rows: auto;
    grid-template-columns: min-content 1fr;
    justify-items: start;
    align-items: center;
    grid-column-gap: 0.75em;
    margin: 0;
    padding: 0 0.75em;
  }
  .gh-project-card-content > .home-card-graphical-wrapper, .ph-groupsheet-card > .home-card-graphical-wrapper {
    font-size: 3.5em;
    margin: 0;
    height: 100px;
    width: 120px;
  }
  .gh-project-card-content > .home-card-display-name, .ph-groupsheet-card > .home-card-display-name {
    font-size: 1.125em;
    font-weight: 600;
    text-align: left;
    margin: 0;
  }
  .gh-project-card-content > .home-card-explanation, .ph-groupsheet-card > .home-card-explanation {
    display: none;
  }
}
[data-special_groupsheet=groupsheets-home] #topbar-chat-control {
  display: none;
}

.gh-top-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -moz-column-gap: 1.5em;
       column-gap: 1.5em;
  row-gap: 3em;
}

.gh-top-subsection {
  display: flex;
  flex-direction: column;
  gap: 2em;
  flex: 1;
}

.gh-top-subsection-title {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}
.gh-top-subsection-title > .gh-top-subsection-title-text {
  font-size: 1.5em;
  font-weight: 600;
}

.gh-top-subsection-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}

.gh-element-div {
  display: flex;
  flex-direction: column;
  margin-top: -1.125em;
}
.gh-element-div .gh-element-title {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--color-gray-uxbin);
}

.screen-name-and-signed-in-and-button {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.screen-name-and-signed-in {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  flex-wrap: wrap;
  row-gap: 1.5em;
}

.avatar-and-name {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.button-and-icon {
  display: flex;
  align-items: flex-start;
}
.button-and-icon > .popup-tip-icon-wrapper {
  cursor: pointer;
}
.button-and-icon > .popup-tip-icon-wrapper:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.button-and-icon > .popup-tip-icon-wrapper:active {
  outline: thin solid var(--color-highlight);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.button-and-icon > .popup-tip-icon-wrapper:active, .button-and-icon > .popup-tip-icon-wrapper.clicked-and-loading {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.button-and-icon > .popup-tip-icon-wrapper.clicked-and-loading {
  cursor: wait;
}
.button-and-icon > .popup-tip-icon-wrapper {
  margin-top: -4px;
  border-radius: 100%;
}

.email-address-for-group-account {
  display: flex;
  gap: 1em;
}

.media-window-body#canvas-container {
  overflow: auto;
  display: flex;
}

#image-editing-control-groups {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  gap: 1.25em;
}
#image-editing-control-groups > .image-editing-control-group {
  padding-left: 0.625em;
  display: flex;
  flex-direction: column;
  gap: 0.625em;
  align-items: flex-start;
}
#image-editing-control-groups > .image-editing-control-group > .image-editing-buttons {
  display: flex;
  flex-direction: row;
  gap: 0.625em;
}
#image-editing-control-groups > .image-editing-control-group > .image-editing-buttons.radio-buttons {
  gap: 0px;
}
#image-editing-control-groups > .image-editing-control-group > .image-editing-buttons.radio-buttons > button.active {
  background-color: var(--color-neutral-20);
}
#image-editing-control-groups > .image-editing-control-group > .image-editing-buttons.radio-buttons > button:not(:first-child) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
#image-editing-control-groups > .image-editing-control-group > .image-editing-buttons.radio-buttons > button:not(:last-child) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.image-editing-control-group-label {
  color: var(--color-gray-uxbin);
}

#image-editor {
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex: 1 1 62.5em;
}

#canvas-container {
  width: 62.5em;
}

body.modal-overlay-active > div {
  transition: var(--transition-default);
}
body.modal-overlay-active > #modal-overlay {
  display: flex;
  background: rgba(255, 255, 255, 0.2);
}
body.modal-overlay-active > #modal-overlay > .content {
  transform: scale(1);
  opacity: 1;
}

body.modal-overlay-active-light > #modal-overlay {
  display: flex;
}

/* To do: Put in a better place: */
.password-hint {
  max-width: 18.75em;
}

#modal-overlay {
  display: none;
  margin: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  z-index: 40;
  background: rgba(0, 0, 0, 0);
  transition: var(--transition-default);
}
#modal-overlay > .modal-overlay-content {
  border: thin solid #bbb;
  box-shadow: -3px 3px 3px 0 var(--color-neutral-20);
  padding: 50px;
  background: white;
  border-radius: 15px;
}
#modal-overlay > .modal-overlay-content > .modal-overlay-prompt {
  font-size: 1.5em;
}
#modal-overlay > .modal-overlay-content > .modal-overlay-buttons {
  font-size: 1.5em;
}
#modal-overlay > .modal-overlay-content textarea {
  min-width: 300px;
  font-size: 1.5em;
}
#modal-overlay > .content {
  padding: 2em;
  background: white;
  width: 37.5em;
  max-width: 100%;
  border: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: relative;
  row-gap: 0.625em;
  transition: var(--transition-default);
  transform: scale(1.2);
  opacity: 0;
}
#modal-overlay > .content.login {
  width: 18.75em;
}
#modal-overlay > .content h2 {
  margin-bottom: 0.5em;
}
#modal-overlay > .content p {
  margin-bottom: 0.8125em;
}
#modal-overlay > .content {
  /* Why was this ever needed? 2021-11-08
  * border-bottom: 1px solid var(--color-border) */
}
#modal-overlay > .content > .close-overlay {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--color-red);
  cursor: pointer;
  padding: 0.3125em;
}
#modal-overlay > .content > .close-overlay:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
#modal-overlay > .content > .project-input-wrapper {
  display: flex;
}
#modal-overlay > .content > .project-input-wrapper > input {
  flex: 1;
  padding: 0.3125em 0.5em;
}
#modal-overlay > .content > .project-input-wrapper > #project-ok-button {
  flex: 0;
  padding: 0.3125em 0.5em;
  cursor: pointer;
  border: 1px solid var(--color-border);
  color: var(--color-dark);
  margin-left: 0.5em;
}
#modal-overlay > .content {
  /* ^To do: Reduce redundancy with sidebar-ok-button. */
}
#modal-overlay > .content > .login-input-wrapper {
  display: flex;
  align-items: flex-end;
  color: var(--color-dark);
  position: relative;
  margin-top: 1em;
}
#modal-overlay > .content > .login-input-wrapper label {
  position: absolute;
  top: -1.5em;
  text-transform: uppercase;
  color: var(--color-gray-uxbin);
  font-size: 0.75em;
}
#modal-overlay > .content > .login-input-wrapper > .icon-wrapper {
  position: absolute;
  right: 0;
  cursor: pointer;
  cursor: pointer;
}
#modal-overlay > .content > .login-input-wrapper > .icon-wrapper:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
#modal-overlay > .content > .login-input-wrapper > .icon-wrapper:active {
  outline: thin solid var(--color-highlight);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
#modal-overlay > .content > .login-input-wrapper > .icon-wrapper:active, #modal-overlay > .content > .login-input-wrapper > .icon-wrapper.clicked-and-loading {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
#modal-overlay > .content > .login-input-wrapper > .icon-wrapper.clicked-and-loading {
  cursor: wait;
}
#modal-overlay > .content > .login-input-wrapper input {
  width: 100%;
  border: 1px solid var(--color-border);
  background: white;
  padding: 0.3125em 2.3125em 0.3125em 1em;
  margin-top: 0.3125em;
}
#modal-overlay > .content > .login-input-wrapper input.label {
  margin: 0;
  max-width: 100%;
}
#modal-overlay > .content > .login-input-wrapper i + label + input {
  padding: 0.3125em 2.3125em;
}
#modal-overlay > .content > #traffic-light-wrapper {
  display: grid;
  grid-template-areas: "light text";
  grid-column-gap: 1.25em;
  grid-template-columns: max-content;
  align-items: center;
}
#modal-overlay > .content > #traffic-light-wrapper > img {
  grid-area: light;
  height: 4.375em;
}
#modal-overlay > .content > #traffic-light-wrapper > div {
  grid-area: text;
}
#modal-overlay > .content > ol.instruction-list {
  padding-left: 1.25em;
}
#modal-overlay > .content > ol.instruction-list img.instruction-icon {
  display: inline-block;
  height: 2em;
}
#modal-overlay > .content input[type=submit] {
  background: var(--color-light);
  color: var(--color-dark);
  cursor: pointer;
  padding: 0.3125em;
  border: 1px solid var(--color-border);
  margin-top: 1em;
}
#modal-overlay .button-wrapper {
  display: grid;
  grid-template-columns: repeat(2, min-content);
  -moz-column-gap: 1em;
       column-gap: 1em;
  justify-content: space-between;
}
#modal-overlay .button-wrapper .button {
  margin-top: 1em;
  border: thin solid #ccc;
  border-radius: 1em;
  padding: 0.1875em 1em;
  white-space: nowrap;
  font-size: 0.875em;
}
#modal-overlay .button-wrapper .button:hover {
  box-shadow: 1.5px 0px 1.5px 0px rgba(0, 0, 0, 0.2);
}
#modal-overlay .button-wrapper .button:active {
  box-shadow: 1.5px 0px 1.5px 0px rgba(0, 0, 0, 0.55) inset;
}
#modal-overlay .button-wrapper .button.call-to-action {
  padding: 0.1875em 2em;
  color: white;
  background: var(--color-green-darker);
  border: thin solid var(--color-green-darker);
}

.window-permission-request {
  display: grid;
  grid-template-areas: "query query" "new-tab cancel";
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 1em;
  padding: 2em;
  background-color: white;
  border-radius: 1.5em;
  max-width: 31.25em;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-warning);
}

/* Details of .ph-groupsheet-card mostly in groupsheets-home.sass */
.ph-overview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 20px;
  padding: 20px 0;
}

.home-card-display-name {
  grid-area: groupsheet-display-name;
  font-size: 1.25em;
  line-height: 1.25;
  font-weight: 700;
  color: hsl(228, 17%, 23%);
  display: flex;
  align-items: end;
  justify-content: center;
  text-align: center;
}

/* Begin scale animation */
.ph-groupsheet-card {
  transition: transform 0.2s ease;
}
.ph-groupsheet-card:hover {
  transform: scale(1.1);
  position: relative;
  z-index: 1;
}

/* End scale animation */
.ph-groupsheet-card {
  width: 15em;
  height: 21.875em;
}

.ph-entries {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  row-gap: 1.25em;
  -moz-column-gap: 2em;
       column-gap: 2em;
  margin-bottom: 2em;
}

@media all and (max-width: 664px) {
  .ph-entries {
    flex-direction: column;
    align-self: center;
  }
  .ph-groupsheet-card {
    width: 100%;
    height: auto;
  }
}
.settings-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
}
.settings-heading > .heading-graphical-wrapper {
  height: 3em;
}
.settings-heading > .heading-graphical-wrapper > .heading-image {
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}
.settings-heading > .heading-graphical-wrapper > .fa-duotone {
  font-size: 3em;
}
.settings-heading > .heading-display-name {
  font-size: 1.75em;
  font-weight: 700;
}

.settings-heading.small-heading {
  justify-content: start;
  margin-bottom: 0;
}
.settings-heading.small-heading > .heading-display-name {
  font-size: 1.25em;
  font-weight: 600;
}

.right-overlay {
  position: fixed;
  z-index: 40;
  box-shadow: -4px 0px 5px 0px rgba(5, 16, 55, 0.15);
  /* ^ Where did these values come from? */
  right: -23.5em;
  top: 0px;
  bottom: 0px;
  width: 22.5em;
  max-width: 100%;
  overflow: hidden;
  transition: right var(--onboarding-animation);
  display: flex;
  flex-direction: column;
}

.right-overlay-header {
  display: grid;
  align-items: center;
  grid-template-areas: "blank title arrow";
  background-color: var(--color-white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  height: 3.4375em;
  z-index: 15;
}
.right-overlay-header > .right-overlay-title {
  grid-area: title;
  font-weight: 600;
  justify-self: center;
}
.right-overlay-header > .close-right-overlay-button {
  grid-area: arrow;
  justify-self: end;
  padding: 0 32px;
  cursor: pointer;
}
.right-overlay-header > .close-right-overlay-button:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.right-overlay-header > .close-right-overlay-button:active {
  outline: thin solid var(--color-highlight);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.right-overlay-header > .close-right-overlay-button:active, .right-overlay-header > .close-right-overlay-button.clicked-and-loading {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.right-overlay-header > .close-right-overlay-button.clicked-and-loading {
  cursor: wait;
}

@media (min-width: 1200px) {
  body.main-ui-area-maybe-smaller #main-ui-area {
    width: calc(100% - 22.5em);
    position: relative;
  }
}
@media (max-width: 1199px) {
  body[data-onboarding_overlay_status=minimized] #main-ui-area {
    margin-right: 3em;
  }
}
#groupsheets-home-topbar {
  display: grid;
  grid-template-areas: "topbar-hamburger-menu topbar-groupsheets-home-banner topbar-right-controls";
  grid-template-columns: max-content 1fr max-content;
  grid-column-gap: 0.625em;
  height: 7.5em;
}
#groupsheets-home-topbar > #topbar-groupsheets-home-banner {
  display: grid;
  grid-template-areas: "groupsheets-logo groupsheets-name";
  grid-template-columns: 2.5em 1fr;
  grid-column-gap: 0.5em;
  align-items: center;
  margin-bottom: 0.5em;
}
#groupsheets-home-topbar > #topbar-groupsheets-home-banner > .groupsheets-logo {
  grid-area: groupsheets-logo;
  border-radius: 0.375em;
}
#groupsheets-home-topbar > #topbar-groupsheets-home-banner > .groupsheets-name {
  grid-area: groupsheets-name;
  justify-self: start;
  height: 1.5em;
  margin-top: 0.375em;
}

#project-home-topbar {
  display: grid;
  grid-template-areas: "topbar-hamburger-menu topbar-project-home-banner topbar-right-controls";
  grid-template-columns: max-content 1fr max-content;
  grid-column-gap: 0.625em;
  height: 5em;
}
#project-home-topbar > #topbar-project-home-banner {
  display: grid;
  grid-template-areas: "groupsheets-home-button project-home-title blank";
  grid-template-columns: 3.5em 1fr 3.5em;
  grid-column-gap: 1em;
  align-items: center;
}
#project-home-topbar > #topbar-project-home-banner > .icon-wrapper {
  margin-left: 0.5em;
  grid-area: groupsheets-home-button;
  cursor: pointer;
}
#project-home-topbar > #topbar-project-home-banner > .icon-wrapper:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
#project-home-topbar > #topbar-project-home-banner > .icon-wrapper:active {
  outline: thin solid var(--color-highlight);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
#project-home-topbar > #topbar-project-home-banner > .icon-wrapper:active, #project-home-topbar > #topbar-project-home-banner > .icon-wrapper.clicked-and-loading {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
#project-home-topbar > #topbar-project-home-banner > .icon-wrapper.clicked-and-loading {
  cursor: wait;
}
#project-home-topbar > #topbar-project-home-banner > .project-home-title {
  grid-area: project-home-title;
  font-size: 1.5em;
  font-weight: 600;
  justify-self: center;
}

.main-topbar {
  align-items: center;
  padding: 0.3125em 0.3125em 0em 0.3125em;
}
body.ipad-os26 .main-topbar {
  padding-top: 1.5em;
}
.main-topbar {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  z-index: 56;
  background-color: var(--color-white);
}
.main-topbar > #topbar-default-mode-controls {
  align-self: center;
}
@media all and (max-width: 664px) {
  .main-topbar > #topbar-default-mode-controls {
    align-self: center;
  }
}
.main-topbar > #topbar-default-mode-controls {
  justify-self: end;
  grid-template-areas: "hlc-toggle-and-controls";
  grid-template-columns: repeat(1, max-content);
  margin-right: 1em;
}
.main-topbar > #topbar-right-controls {
  align-self: center;
  justify-self: end;
  grid-template-areas: "topbar-info-mode-control topbar-onboarding-control";
  grid-template-columns: repeat(4, max-content);
  margin-right: 1em;
}
.main-topbar > .topbar-main-section {
  height: auto;
  display: grid;
  grid-column-gap: 0.3125em;
}
.main-topbar > .topbar-main-section > .header-menu {
  z-index: 5;
}
.main-topbar > .topbar-main-section > .topbar-subsection {
  display: grid;
  grid-column-gap: 0.375em;
  grid-auto-flow: row;
}

#default-topbar {
  display: grid;
  grid-template-areas: "topbar-hamburger-menu topbar-nonminor-and-minor-mode-controls topbar-space-in-middle topbar-default-mode-controls topbar-right-controls" "topbar-major-mode-controls topbar-major-mode-controls topbar-major-mode-controls topbar-major-mode-controls topbar-major-mode-controls" "header-row header-row header-row header-row header-row" !important;
  grid-template-columns: max-content max-content 1fr max-content;
  grid-template-rows: 3.75em max-content 1.875em;
  grid-column-gap: 0.625em;
  grid-row-gap: 0em;
}
#default-topbar > .subtrees {
  max-width: calc(100vw - 10px);
  margin: 0 5px;
  grid-area: header-row;
  border-radius: 16px 16px 0 0;
  border: solid thin hsl(228, 28%, 88%);
  border-bottom: 0 none;
  overflow: hidden;
}
#default-topbar > #topbar-nonminor-mode-controls {
  justify-self: start;
  grid-template-areas: "controls";
  grid-template-columns: max-content;
}
#default-topbar > #topbar-nonminor-mode-controls > #topbar-nonminor-mode-buttons {
  display: flex;
}
@media all and (max-width: 664px) {
  #default-topbar > #topbar-nonminor-mode-controls > #topbar-nonminor-mode-buttons > #groupsheets-home-button {
    display: none;
  }
}
#default-topbar > #topbar-minor-mode-controls {
  justify-self: start;
  grid-template-areas: "controls";
  grid-template-columns: max-content;
}
#default-topbar > #topbar-minor-mode-controls > #start-edit-controls, #default-topbar > #topbar-minor-mode-controls #add-cells-controls, #default-topbar > #topbar-minor-mode-controls #move-cell-controls {
  grid-template-areas: "instruction";
  grid-template-columns: max-content;
}
#default-topbar > #topbar-minor-mode-controls > #active-cell-controls {
  grid-template-areas: "cancel-button finish-button scroll-button";
  grid-template-columns: repeat(3, 2.5em);
}
#default-topbar > #topbar-minor-mode-controls > #annotation-controls {
  grid-template-areas: "exit-button save-annotations-button";
  grid-template-columns: repeat(2, 2.5em);
}
#default-topbar > #topbar-major-mode-controls {
  align-self: auto;
  justify-self: start;
  margin-left: 0.5em;
  margin-bottom: 0.625em;
  grid-template-areas: "controls";
  grid-template-columns: max-content;
}

.topbar-subsection > .icon-div-with-possible-popup-tip {
  padding: 0em 0.5em;
}

.topbar-instructions {
  grid-area: instruction;
  align-self: center;
  display: grid;
  width: 18.75em;
  grid-template-areas: "icon text";
  grid-template-columns: 1.75em 1fr;
  grid-column-gap: 0.625em;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.99);
  border-radius: 16px;
  padding-left: 0.625em;
  padding-right: 0.9375em;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-info);
}
.topbar-instructions > .topbar-instructions-icon {
  grid-area: icon;
  justify-self: right;
  color: var(--color-toast-info);
}

body[data-special_groupsheet=groupsheets-home] #groupsheets-home-topbar {
  display: grid;
}
body[data-special_groupsheet=groupsheets-home] #default-topbar, body[data-special_groupsheet=groupsheets-home] #project-home-topbar {
  display: none;
}

body[data-special_groupsheet=project-home] #project-home-topbar {
  display: grid;
}
body[data-special_groupsheet=project-home] #default-topbar, body[data-special_groupsheet=project-home] #groupsheets-home-topbar {
  display: none;
}

body:not([data-special_groupsheet]) #groupsheets-home-topbar, body:not([data-special_groupsheet]) #project-home-topbar {
  display: none;
}

/* Middle part of #body-wrapper, between sidebars. */
#main-ui-area {
  width: 100%;
  height: 100vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  overflow: hidden;
}
#main-ui-area > .scrollable-wrapper {
  width: 100%;
  overflow: scroll;
}
#main-ui-area > .scrollable-wrapper > .scrollable-area {
  height: 100%;
  width: 100%;
  display: none;
}
#main-ui-area > .scrollable-wrapper > .scrollable-area.active-area {
  display: block;
}
#main-ui-area #sync-spinner {
  position: absolute;
  left: calc(50% - 1em);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  height: 2em;
  width: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  top: calc(50% - 1em);
  left: calc(50% - 1em);
  z-index: 20;
}
#main-ui-area #sync-spinner[data-syncing_scope=trying-to-connect], #main-ui-area #sync-spinner[data-syncing_scope=loading-project], #main-ui-area #sync-spinner[data-syncing_scope=focused-project] {
  color: var(--color-red-90);
  border-color: var(--color-red-90);
}
#main-ui-area #sync-spinner[data-syncing_scope=nonfocused-projects] {
  color: var(--color-neutral-50);
  border-color: var(--color-neutral-50);
  top: 1.25em;
  left: 1.25em;
}

#main-panel {
  height: 100%;
  max-width: 100vw;
  display: grid;
  align-items: flex-start;
}

.sharing-overlay {
  font-size: 0.8125em;
  overflow: scroll;
  max-height: 100%;
  /* Attempts on 2022-04-19: */
  width: 1000px;
  max-width: 90%;
}

.sharing-section {
  /* Where is this element positioned within its surrounding grid? */
  /* How big is this element? */
  /* Does the element always have display: grid? */
  display: grid;
  /* What does the grid look like? */
  grid-row-gap: 0.6875em;
  /* How are the items to be aligned within their cells? */
  align-items: start;
  justify-items: left;
  /* (Other specifications:) */
}
.sharing-section textarea {
  display: block;
  width: 100%;
}
.sharing-section .tab-label-continuation {
  font-weight: 600;
  font-size: 1.125em;
}

.sharing-instruction {
  font-size: 1.125em;
}
.sharing-instruction ul {
  padding-left: 1.875em;
}

.sharing-button {
  /* Where is this element positioned within its surrounding grid? */
  /* How is this element aligned within its grid cell? */
  justify-self: center;
  /* How big is this element? */
  /* (Other specifications:) */
  border: thin solid #ccc;
  border-radius: 1em;
  padding: 0.1875em 1em;
  white-space: nowrap;
  font-size: 0.875em;
  color: black;
  font-size: 1.25em;
  font-weight: 600;
  cursor: pointer;
}
.sharing-button:hover {
  box-shadow: 1.5px 0px 1.5px 0px rgba(0, 0, 0, 0.2);
}
.sharing-button:active {
  box-shadow: 1.5px 0px 1.5px 0px rgba(0, 0, 0, 0.55) inset;
}

#download-buttons {
  justify-self: center;
  display: grid;
  grid-row-gap: 0.3125em;
}

#common-content {
  grid-template-areas: "instruction" "text-area";
}

#direct-post {
  display: grid;
  /* Where is this element positioned within its surrounding grid? */
  /* How is this element aligned within its grid cell? */
  /* How big is this element? */
  /* What does the grid look like? */
  grid-template-areas: "subtitle" "instruction" "post-button";
}

/* How are the items to be aligned within their cells? */
/* (Other specifications:) */
#manual-post {
  display: grid;
  grid-template-areas: "subtitle" "copy-instruction" "copy-button" "image-instruction" "download-buttons" "final-instructions";
}

#sharing-by-email {
  display: grid;
  grid-template-areas: "email-instruction1" "email-instruction2" "email-input-header" "email-input" "send-email" "feedback" "final-instruction" "close-button";
}

.sharing-feedback {
  justify-self: center;
  font-size: 1.25em;
  color: green;
}

.email-input {
  text-align: center;
  justify-self: center;
  min-width: 17.5em;
}

.call-to-action-button {
  background: green;
  color: white;
}

#close-button-section {
  display: grid;
  grid-template-areas: "close-button";
  justify-self: center;
}

#show-changes-controls {
  align-self: auto;
  justify-self: start;
  grid-template-areas: "exit-button next-button previous-button ignore-filters-button-show-changes";
  grid-template-columns: 3.75em repeat(3, max-content);
}

.sidebar {
  position: absolute;
  left: -100%;
  transition: var(--transition-default);
  border-right: 1px solid #ddd;
  overflow: hidden;
  overflow-y: auto;
  z-index: 11;
  max-width: 100%;
  min-height: 100%;
  background: var(--color-white);
  box-shadow: 4px 0px 5px 0px rgba(5, 16, 55, 0.15);
}
.sidebar .first-level, .sidebar .second-level {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.sidebar .first-level #first-level-fixed-at-start, .sidebar .second-level #first-level-fixed-at-start {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  border-bottom: thin solid #dedede;
}
[data-sidebar_level="1"] .sidebar {
  left: 0;
}
.sidebar::-webkit-scrollbar {
  display: none;
}
.sidebar #close-sidebar {
  display: flex;
  justify-content: space-between;
  padding: 0.3125em 1.25em 0.3125em 1em;
}
.sidebar #close-sidebar > .icon-wrapper {
  cursor: pointer;
}
.sidebar #close-sidebar > .icon-wrapper:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.sidebar #close-sidebar > .icon-wrapper:active {
  outline: thin solid var(--color-highlight);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.sidebar #close-sidebar > .icon-wrapper:active, .sidebar #close-sidebar > .icon-wrapper.clicked-and-loading {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.sidebar #close-sidebar > .icon-wrapper.clicked-and-loading {
  cursor: wait;
}
.sidebar #close-sidebar-second-level-button {
  height: 3.75em;
  width: 100%;
  display: none;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  cursor: pointer;
}
.sidebar #close-sidebar-second-level-button > .fa-arrow-left {
  grid-row: 1;
  grid-column: 1;
  justify-self: center;
  align-self: center;
  font-style: normal;
}
.sidebar {
  /* Not possible as child selector?: */
}
.sidebar div {
  max-width: 100%;
}
.sidebar div .sidebar-topbar {
  display: flex;
  position: sticky;
  align-items: center;
  justify-content: center;
  color: #002b7f;
  font-weight: 600;
  height: 3.75em;
  top: 0;
  background: white;
  z-index: 1;
  border-bottom: 1px solid var(--color-border);
}
.sidebar div button {
  border: 0 none;
  padding: 0;
  font-size: 1em;
  flex: 0 0 auto;
  width: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  /* .sidebar-input-dialog: see below. */
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper {
  width: 360px;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content {
  display: grid;
  margin: 0.3125em 1em;
  width: calc(100% - 2em);
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content.submenu-level, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content.submenu-level {
  margin-left: 3em;
  width: calc(100% - 4em);
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content {
  grid-template-areas: "icon title chevron" "empty explanation explanation" "empty extra-content extra-content";
  cursor: pointer;
  transition: none;
  grid-template-columns: 1.5em 1fr 1.5em;
  grid-column-gap: 0.5em;
  align-items: center;
  justify-items: start;
  border-radius: 0.375em;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content:not(:has(.sidebar-input-dialog)):hover:not(.no-hover):hover, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content:not(:has(.sidebar-input-dialog)):hover:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon {
  grid-area: icon;
  cursor: pointer;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon:not(.no-hover):hover, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon:active, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon:active {
  outline: thin solid var(--color-highlight);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon:active, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon.clicked-and-loading, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon:active, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon.clicked-and-loading {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon.clicked-and-loading, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon.clicked-and-loading {
  cursor: wait;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-icon {
  justify-self: center;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-title, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-title {
  grid-area: title;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-chevron, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-chevron {
  grid-area: chevron;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-explanation, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-entry-explanation {
  display: none;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .language-selector, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .language-selector {
  flex: 0 1 auto;
  text-align: left;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .language-selector > div, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .language-selector > div {
  display: inline;
  margin-right: 1em;
  cursor: pointer;
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .language-selector > div:not(.no-hover):hover, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .language-selector > div:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-editing-overview, .sidebar .first-level > #first-level-variable > .sidebar-entry-wrapper > .sidebar-submenu > .sidebar-entry-wrapper > .sidebar-entry-content > .sidebar-editing-overview {
  padding-left: 0.3125em;
}
.sidebar .first-level .explorer {
  border-bottom: 1px solid var(--color-border);
  padding: 0.5em 0.5em 2em 0.5em;
}
.sidebar .first-level .explorer .quicksearch-wrapper {
  display: grid;
  grid-template-areas: "search-icon input clear-icon";
  position: relative;
  height: 2em;
  align-items: center;
}
.sidebar .first-level .explorer .quicksearch-wrapper > .search-icon {
  grid-area: search-icon;
}
.sidebar .first-level .explorer .quicksearch-wrapper > .quicksearch {
  grid-area: input;
  font-size: 1em;
  height: 2em;
  padding: 0.5em;
}
.sidebar .first-level .explorer .quicksearch-wrapper > .clear-quicksearch {
  grid-area: clear-icon;
}
.sidebar .first-level .explorer .quicksearch-wrapper .fa-magnifying-glass {
  position: absolute;
  z-index: 1;
  color: var(--color-dark);
  padding: 0.25em 0.375em;
}
.sidebar .first-level .explorer .quicksearch-wrapper .xxquicksearch {
  position: absolute;
  width: calc(100% - 1em);
  padding: 0.1875em 1.5em;
}
.sidebar .first-level .explorer .quicksearch-wrapper .xxclear-quicksearch {
  width: 2em;
  display: inline-block;
  color: #777;
  position: absolute;
  right: 1em;
  padding: 0.25em;
  margin: 0;
  cursor: pointer;
}
.sidebar .first-level .explorer .quicksearch-wrapper .xxclear-quicksearch:hover {
  color: var(--color-red);
  background-color: var(--color-light);
}
.sidebar .first-level .explorer {
  /* For i and ul, we can't use a child selector, because the icon can occur on various
  * * levels of the explorer hence inefficient. */
}
.sidebar .first-level .explorer i:hover {
  background: transparent;
}
.sidebar .first-level .explorer ul {
  list-style: none;
  margin-left: 1.5em;
}
.sidebar .first-level .explorer ul[data-id="0"] {
  margin-left: 1.75em;
}
.sidebar .first-level .explorer ul li {
  cursor: pointer;
  max-height: 3.125em;
  transition: max-height 0.3s ease;
  background: white;
}
.sidebar .first-level .explorer ul li:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.sidebar .first-level .explorer .folder:before, .sidebar .first-level .explorer .intervention:before, .sidebar .first-level .explorer .model:before {
  margin-right: 0.5em;
}
.sidebar .first-level .explorer .folder {
  margin-left: -1.5em;
}
.sidebar .first-level .explorer .folder.closed ~ * {
  display: none;
}
.sidebar .first-level .explorer .folder:before {
  content: "\f107";
  font: var(--fa-font-light);
}
.sidebar .first-level .explorer .folder.closed:before {
  content: "\f105";
  font: var(--fa-font-light);
  margin-right: 0.75em;
}
.sidebar .first-level .explorer .intervention {
  margin-left: 1.5em;
}
.sidebar .first-level .explorer .intervention:before {
  content: "\e290";
  font: var(--fa-font-light);
}
.sidebar .first-level .explorer .intervention.active:before {
  content: "\e290";
  font: var(--fa-font-solid);
}
.sidebar .first-level .explorer .model {
  margin-left: 1.5em;
}
.sidebar .first-level .explorer .model:before {
  content: "\f0ce";
  font: var(--fa-font-light);
}
.sidebar .first-level .explorer .model.active:before {
  content: "\f0ce";
  font: var(--fa-font-solid);
}
.sidebar .first-level .permissions-box {
  padding: 1em;
  font-size: 0.875em;
}
.sidebar .first-level .permissions-box > ul {
  list-style: none;
}
.sidebar .first-level .permissions-box > ul > li {
  margin-bottom: 1em;
}
.sidebar .first-level .permissions-box > ul > li > span {
  display: flex;
  width: 100%;
  padding: 0.125em 0;
}
.sidebar .first-level .permissions-box > ul > li > span label {
  cursor: pointer;
}
.sidebar .first-level .permissions-box > ul > li > span > select {
  width: auto;
  margin-left: 0.5em;
  border: 1px solid var(--color-border);
  padding: 0 0.25em;
  flex: 1 0 9.375em;
}
.sidebar .first-level .permissions-box > ul > li > span > select[disabled=disabled] {
  cursor: not-allowed;
}
.sidebar .first-level .permissions-box > ul > li > span input[type=text] {
  flex: 1 0 auto;
}
.sidebar .first-level .permissions-box > ul > li > span input[type=radio] {
  margin-right: 0.5em;
  padding: 0 0.25em;
}
.sidebar .first-level .permissions-box > ul > li > span > i {
  padding: 0 0 0 0.1875em;
  margin-right: 0.5em;
  color: var(--color-dark);
}
.sidebar .first-level .permissions-box > ul > li > span > i:hover {
  background: none;
}
.sidebar .first-level .permissions-box > ul > li > span > button {
  width: auto;
  border: 1px solid var(--color-border);
  padding: 0;
  margin-left: 0.5em;
}
.sidebar .first-level .permissions-box > ul > li > span > button.revoke {
  border: 1px solid var(--color-red);
  color: var(--color-red);
}
.sidebar .first-level .permissions-box > ul > li > span > button.revoke > i {
  color: var(--color-red);
}
.sidebar .first-level .permissions-box > ul > li > span > button > i {
  margin-right: 0.1875em;
}

#sidebar-explorer .folder i {
  margin-right: 0.5em;
}

.sidebar div .explorer .override-closed-folders .folder.closed ~ * {
  display: block;
}

#body-wrapper[data-sidebar_level="2"] .first-level, #body-wrapper[data-sidebar_level="2"] .second-level {
  transform: translateX(-300px);
}

#right-sidebar {
  display: none;
}

.sidebar-input-dialog {
  max-width: 100%;
  grid-area: extra-content;
  display: flex;
  flex-direction: column;
  gap: 0.625em;
  align-items: center;
  justify-items: end;
}
.sidebar-input-dialog > .sidebar-input-field-wrapper {
  width: 100%;
}
.sidebar-input-dialog > .sidebar-ok-button {
  min-width: 9.375em;
}

.sidebar-divider {
  width: 100%;
  border-style: solid;
  border-width: thin;
  border-color: var(--color-neutral-20);
  margin: 0.5em 0;
}

.sidebar-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 1em 0em 0.3125em;
}
.sidebar-breadcrumbs > .small-button-general {
  padding-right: 0.875em;
}

.groupsheet-entries-in-sidebar {
  display: flex;
  margin-left: -1.5em;
  flex-direction: column;
  gap: 0.5em;
  padding-top: 0.25em;
}
.groupsheet-entries-in-sidebar > .groupsheet-entry-in-sidebar {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.groupsheet-entries-in-sidebar > .groupsheet-entry-in-sidebar > .project-name {
  color: var(--color-neutral-60);
}

.policy-detail-view {
  display: grid;
  width: -moz-max-content;
  width: max-content;
  gap: 0.25em;
}
.policy-detail-view > .timed-leg-detail {
  display: grid;
  grid-template-areas: "departure-time departure-stop" "_blank_ product-info" "arrival-time arrival-stop" "delayed-arrival-time delayed-arrival-label";
  grid-template-columns: auto 1fr;
  grid-column-gap: 0.5em;
  grid-row-gap: 0.125em;
}
.policy-detail-view > .timed-leg-detail > .leg-departure-time {
  grid-area: departure-time;
}
.policy-detail-view > .timed-leg-detail > .leg-departure-stop {
  grid-area: departure-stop;
}
.policy-detail-view > .timed-leg-detail > .leg-product-info {
  grid-area: product-info;
}
.policy-detail-view > .timed-leg-detail > .leg-arrival-time {
  grid-area: arrival-time;
}
.policy-detail-view > .timed-leg-detail > .leg-arrival-stop {
  grid-area: arrival-stop;
}
.policy-detail-view > .timed-leg-detail > .leg-delayed-arrival-time {
  grid-area: delayed-arrival-time;
  font-weight: 700;
  color: var(--color-alternativplanner-missed-transfer);
}
.policy-detail-view > .timed-leg-detail > .leg-delayed-arrival-label {
  grid-area: delayed-arrival-label;
}
.policy-detail-view > .transfer-leg-detail {
  display: flex;
  flex-direction: column;
  gap: 0em;
  margin-left: 2em;
  margin-top: auto;
}
.policy-detail-view > .transfer-leg-detail > .plan-b-title strong {
  font-size: 1.5em;
}

.policy-display {
  position: relative;
}

.policy-svg-canvas {
  width: 100%;
}

.policy-graphic-text {
  position: absolute;
  white-space: nowrap;
  font-weight: 700;
}

.policy-graphic-legend > img {
  display: block;
  margin: 0 auto;
}

.policy-graphic-transfer-bracket {
  position: absolute;
  border-style: solid;
}

.policy-graphic-rectangle {
  position: absolute;
  border-style: solid;
}

.subtree[data-clmn_label_in_subtree=Policies]:not(:first-child) [data-field_label=AddPoliciesBefore] {
  display: none;
}

.subtree[data-clmn_label_in_subtree=Policies]:not(:last-child) [data-field_label=AddPoliciesAfter] {
  display: none;
}

.focused-policy {
  animation-name: shake2;
  animation-duration: 2s;
  transform-origin: 50% 50%;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

.annotations {
  grid-area: _annotations_;
  display: grid;
  position: relative;
  justify-items: right;
  grid-template-areas: "note mark";
  align-items: start;
  grid-template-columns: 1fr 1.5em;
  grid-column-gap: 0.1875em;
}
.annotations .mark-annotation {
  grid-area: mark;
  z-index: 5;
  color: gold;
}
.annotations .mark-annotation.empty-mark {
  position: absolute;
  top: 0;
  right: 16px;
  width: auto;
  opacity: 0.75;
  z-index: 5;
}
.annotations .note-annotation {
  grid-area: note;
  width: calc(100% - 1em);
  max-width: 18.75em;
  margin: 0 0.5em 1em 0.5em;
  height: -moz-fit-content;
  height: fit-content;
  border-bottom-right-radius: 3.75em 0.3125em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transform: rotate(-0.5deg);
  transition: var(--transition-default);
}
.annotations .note-annotation[data-color=yellow], .annotations .note-annotation .annotation-topbar > .colors > .yellow {
  background: #ffff88;
}
.annotations .note-annotation[data-color=yellow] .yellow, .annotations .note-annotation .annotation-topbar > .colors > .yellow .yellow {
  outline: thin solid black;
}
.annotations .note-annotation[data-color=red], .annotations .note-annotation .annotation-topbar > .colors > .red {
  background: #ff7eb9;
}
.annotations .note-annotation[data-color=red] .red, .annotations .note-annotation .annotation-topbar > .colors > .red .red {
  outline: thin solid black;
}
.annotations .note-annotation[data-color=green], .annotations .note-annotation .annotation-topbar > .colors > .green {
  background: #88ff88;
}
.annotations .note-annotation[data-color=green] .green, .annotations .note-annotation .annotation-topbar > .colors > .green .green {
  outline: thin solid black;
}
.annotations .note-annotation[data-color=blue], .annotations .note-annotation .annotation-topbar > .colors > .blue {
  background: #7AFCFF;
}
.annotations .note-annotation[data-color=blue] .blue, .annotations .note-annotation .annotation-topbar > .colors > .blue .blue {
  outline: thin solid black;
}
.annotations .note-annotation:after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 3.125em;
  height: 3.125em;
  background-image: linear-gradient(173deg, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0.4) 100%);
  transform: rotate(10deg);
  z-index: -1;
  filter: blur(2px);
}
.annotations .note-annotation > .annotation-topbar {
  height: 1.3125em;
  background: rgba(0, 0, 0, 0.025);
  display: flex;
  padding: 0 0.25em;
  justify-content: space-between;
  align-items: center;
}
.annotations .note-annotation > .annotation-topbar > .colors {
  display: flex;
}
.annotations .note-annotation > .annotation-topbar > .colors span {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  margin-right: 0.5em;
  border: 2px solid white;
  cursor: pointer;
  visibility: hidden;
}
.annotations .note-annotation > .annotation-topbar > .controls > .icon-wrapper {
  color: black;
  cursor: pointer;
}
.annotations .note-annotation > .annotation-topbar > .controls > .icon-wrapper:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.annotations .note-annotation > .annotation-topbar > .controls > .icon-wrapper:active {
  outline: thin solid var(--color-highlight);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.annotations .note-annotation > .annotation-topbar > .controls > .icon-wrapper:active, .annotations .note-annotation > .annotation-topbar > .controls > .icon-wrapper.clicked-and-loading {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.annotations .note-annotation > .annotation-topbar > .controls > .icon-wrapper.clicked-and-loading {
  cursor: wait;
}
.annotations .note-annotation > .annotation-topbar > .controls > .icon-wrapper {
  color: red;
  visibility: hidden;
}
.annotations .note-annotation textarea {
  width: 100%;
  height: 1.5em;
  overflow: hidden;
  border: none;
  background: transparent;
  resize: none;
  color: var(--color-toast-info);
  font-family: "Kalam", cursive;
  margin-bottom: -0.3125em;
}
.annotations .note-annotation textarea[disabled] {
  font-style: normal;
  color: var(--color-toast-info);
  opacity: 1;
}
.annotations .note-annotation textarea:focus {
  outline: none;
}
.annotations .note-annotation.empty-note:not(:focus-within) {
  position: absolute;
  top: 0;
  right: 2.5em;
  width: auto;
  opacity: 0.75;
  max-width: 6.875em;
  z-index: 5;
}
.annotations .note-annotation.empty-note:not(:focus-within) .annotation-topbar {
  display: none;
}

[data-minor_mode=annotation-mode] .annotations > .note-annotation > .annotation-topbar > .colors > span {
  visibility: initial;
}
[data-minor_mode=annotation-mode] .annotations > .note-annotation > .annotation-topbar > .controls > .icon-wrapper {
  visibility: initial;
}
[data-minor_mode=annotation-mode] .mark-annotation {
  cursor: pointer;
}

/* To do: Make into grid. */
.announcements {
  list-style: none;
  position: fixed;
  bottom: 0;
  right: 1em;
  display: flex;
  flex-direction: column;
  z-index: 50;
}
.announcements > .announcement {
  display: grid;
  grid-template-columns: min-content auto min-content;
  align-items: center;
  -moz-column-gap: 0.75em;
       column-gap: 0.75em;
  grid-template-areas: "type main-content close" "explanation explanation explanation";
  margin-bottom: 1em;
  width: 25em;
  max-width: calc(100vw - 32px);
  padding: 1.25em 1.25em 1.25em 1.625em;
  background: #FFFFFF;
  border-radius: 1em;
  transform: translateY(0) scale(1);
  transition: all ease 600ms;
}
.announcements > .announcement.salient.hidden {
  transform: translateY(-560px) scale(1.5);
  opacity: 0;
  background: var(--color-foreground-highlighting);
}
.announcements > .announcement i {
  font-size: 1.25em;
}
.announcements > .announcement .announcement-type {
  grid-area: type;
}
.announcements > .announcement .announcement-message {
  grid-area: main-content;
  font-weight: 600;
}
.announcements > .announcement .announcement-close {
  grid-area: close;
  cursor: pointer;
  padding: 0.125em;
}
.announcements > .announcement .announcement-close:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.announcements > .announcement .announcement-explanation {
  grid-area: explanation;
  margin-top: 0.75em;
}
.announcements > .announcement .announcement-explanation:empty {
  display: none;
}

[data-announcement_type=success] {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-success);
}
[data-announcement_type=success] i.announcement-type {
  color: var(--color-toast-success);
}

[data-announcement_type=error] {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-error);
}
[data-announcement_type=error] i.announcement-type {
  color: var(--color-toast-error);
}

[data-announcement_type=info] {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-info);
}
[data-announcement_type=info] i.announcement-type {
  color: var(--color-toast-info);
}

[data-announcement_type=warning] {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-warning);
}
[data-announcement_type=warning] i.announcement-type {
  color: var(--color-toast-warning);
}

[data-announcement_type=neutral] {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-neutral);
}
[data-announcement_type=neutral] i.announcement-type {
  color: var(--color-toast-neutral);
}

#main-panel[data-opacity=opaque] {
  opacity: 1;
}
#main-panel[data-opacity=transparent] {
  opacity: 0;
}

/* Within .subtree: */
.bracket {
  display: block;
  box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.1);
  background-color: var(--color-general-light);
  /* ^ This default is overriden in a number of places with @include color-root-and-bracket. */
}
.terminal-subtree > .bracket {
  display: none;
}
.bracket > .bracket-background {
  display: block;
  height: 100%;
  width: 100%;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  background-color: var(--color-main-background);
}
.overview-table-header .bracket > .bracket-background {
  background-color: var(--color-topbar);
}

/* Principles for shadows for active cell:
 * * - The root gets a thick shadow, which is shifted to the left so that 
 * * it doesn't interfere with the shadow on the right.
 * * - The shadow on the right - which can be in the bracket-background or in the root
 * * itself - stays the same, since there seems to be no good way of thickening thi
 * * shadow. */
.root {
  /* Was previously for horizontal subtrees. Should now be overridden by internal CSS for vertical subtrees. */
  /* Don't respecify display:flex, so as not to add unnecessary specificity. */
  flex-direction: column;
}
.root > .cell-content {
  flex-grow: 1;
}
.root {
  container-name: root;
  container-type: inline-size;
}

.root:not(.active-cell) > .cell-content {
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
}
.root:not(.active-cell) > .cell-content > .cell-field-wrapper.sticky-field {
  position: sticky;
  z-index: 3;
  top: 0;
  background-color: inherit;
  margin-bottom: 0.5em;
  margin-right: -1em;
  padding: 0.25em 1em 0.25em 0;
}

/* ^ To do: Reconsider spacing for non-text fields */
.cell-content {
  display: grid;
  align-self: start;
}
.root[data-zoom_mode] > .cell-content {
  padding: 0 1.875em;
}
.cell-content {
  transition: padding 0.2s ease;
  top: 1.875em;
  height: -moz-max-content;
  height: max-content;
  width: 100%;
  background-color: inherit;
  -moz-column-gap: 1em;
       column-gap: 1em;
}
.cell-content em {
  text-decoration: none;
}
.cell-content em:hover {
  text-decoration: underline;
}
.cell-content ul {
  display: flex;
  flex-direction: column;
  list-style-position: outside;
  margin-left: 0.9375em;
}
.cell-content b, .cell-content strong {
  font-weight: 600;
}
.cell-content u {
  font-family: monospace;
  color: blue;
  display: inline;
  white-space: pre-line;
  font-weight: normal;
  vertical-align: baseline;
  text-decoration: none;
}
.cell-content > .cell-field-wrapper:not(.sticky-field) {
  min-width: 1.25em;
  margin-bottom: 0.5em;
}
.cell-content > .cell-field-wrapper:not(.sticky-field) > .cell-field-content {
  hyphens: auto;
  overflow-wrap: break-word;
}
.cell-content > .cell-field-wrapper:not(.sticky-field) > .cell-field-content .checkbox {
  cursor: pointer;
}
.cell-content > .cell-field-wrapper:not(.sticky-field) > .cell-field-content > input.input-element {
  width: 100%;
}

.cell-field-fade {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, white 80%, white 100%);
  height: 3em;
  margin-top: -3em;
  position: relative;
  justify-content: end;
  display: flex;
  padding-right: 0.3125em;
  cursor: pointer;
}

.content-expanded + .cell-field-fade {
  display: none;
}

.cell-field-title.content-toggle {
  cursor: pointer;
}
.cell-field-title.content-toggle:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}

/* Cell field title: */
.cell-field-title {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: var(--color-gray-uxbin);
  display: flex;
  gap: 0.5em;
}
.cell-field-title > .cell-field-title-text {
  flex: 0 1 auto;
}
.cell-field-title > .stt-button-span {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.25em;
  align-items: center;
}
.cell-field-title > .stt-button-span > audio {
  flex: 1 0 auto;
  height: 2.375em;
}
.cell-field-title > .stt-button-span > .stt-cancel-wrapper {
  cursor: pointer;
}
.cell-field-title > .field-type-icon {
  flex: 0 0 auto;
}
.cell-field-title > .popup-tip-icon-wrapper {
  flex: 0 0 auto;
}
.cell-field-title > .popup-tip-dummy-element {
  flex: 1 1 min-content;
}
.cell-field-title > .icon-in-cell-field-title {
  margin-bottom: 0.375em;
}
.cell-field-title.content-toggle {
  margin-top: 0.25em !important;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cell-field-title.content-toggle + .cell-field-content {
  transition: height 0.2s ease;
  height: 3em;
  overflow: hidden;
}
.cell-field-title.content-toggle + .cell-field-content.content-expanded {
  height: auto;
}
.cell-field-title > .content-toggle-icon {
  margin-right: 1em;
}

.root.active-cell > .cell-content > .cell-field-wrapper > .cell-field-title {
  font-weight: 700;
  padding: 8px 0 4px 0;
  align-items: center;
}

.root.active-cell > .cell-content > .openable-for-editing > .cell-field-title::after {
  margin-left: 1em;
}

.cell-field-title.active-ckeditor-title::after {
  margin-left: 1em;
  content: "\e021";
  font: var(--fa-font-light);
}

.root[data-zoom_mode] > .cell-content > .cell-field-wrapper > .cell-field-title {
  margin-top: 1.25em;
}

.root.active-cell > .cell-content > .cell-field-wrapper > .cell-field-title > .title-when-cell-inactive {
  display: none;
}
.root.active-cell > .cell-content > .cell-field-wrapper > .cell-field-title > .title-when-cell-active {
  display: inline-block;
}

.root:not(.active-cell) > .cell-content > .cell-field-wrapper > .cell-field-title > .title-when-cell-inactive {
  display: inline-block;
}
.root:not(.active-cell) > .cell-content > .cell-field-wrapper > .cell-field-title > .title-when-cell-active {
  display: none;
}

/* Content-specific styles (probably to be eliminated): */
.cell-content .resonance-rectangle {
  fill: rgb(255, 255, 255);
  stroke-width: 1;
  stroke: rgb(0, 0, 0);
}

pre {
  padding: 1em;
  background: hsla(0, 0%, 78%, 0.3);
  border: 1px solid #c4c4c4;
  border-radius: 2px;
  text-align: left;
  direction: ltr;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  white-space: pre-wrap;
  font-style: normal;
  min-width: 12.5em;
  margin: 0.3125em;
  color: var(--color-code) !important;
}
pre [data-language]:after {
  content: attr(data-language);
  position: absolute;
  top: -0.0625em;
  right: 0.625em;
  background: #757575;
  font-size: 0.625em;
  padding: 0.125em 0.3125em;
  color: #fff;
  white-space: nowrap;
}

code {
  font-family: monospace;
  color: var(--color-code);
}

.zoomed-in-body-wrapper .overview-table-body .root.active-cell[data-zoom_mode=Editing], .root[data-zoom_mode=Editing] {
  padding: 0;
}

.clearable-input-wrapper {
  display: grid;
  grid-template-areas: "clear-input-button clearable-input-field";
  grid-column-gap: 0.125em;
  grid-template-columns: 1.3125em 1fr;
  align-items: center;
}
.clearable-input-wrapper > .clear-input-button {
  cursor: pointer;
  grid-area: clear-input-button;
}
.clearable-input-wrapper > .clearable-input-field {
  grid-area: clearable-input-field;
  width: calc(100% - 21px);
}
.clearable-input-wrapper > .clearable-input-field.time {
  width: 9.375em;
}

/* To do: Convert to grid. */
.confirmation-dialog-box {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: -moz-fit-content;
  width: fit-content;
  padding: 1em 1.5em;
  position: sticky;
  margin: 0.5em 0;
  left: 0;
  top: 0.5em;
  z-index: 1;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), 0px 0px 0px 2px #FFB119 inset;
}
.confirmation-dialog-box > .confirmation-options {
  display: flex;
  gap: 1em;
}

.star-rating-scale {
  display: flex;
  flex-direction: row-reverse;
}
.star-rating-scale > .icon-wrapper:hover, .star-rating-scale .icon-wrapper:hover + .icon-wrapper, .star-rating-scale .icon-wrapper:hover + .icon-wrapper + .icon-wrapper {
  cursor: pointer;
}
.star-rating-scale > .icon-wrapper:hover > .fa-star, .star-rating-scale .icon-wrapper:hover + .icon-wrapper > .fa-star, .star-rating-scale .icon-wrapper:hover + .icon-wrapper + .icon-wrapper > .fa-star {
  color: #ED5565;
  font-weight: 900;
}

.thumbnail-box-with-rating {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 0.1875em;
  align-items: center;
}
.thumbnail-box-with-rating.hidden {
  display: none;
}
.thumbnail-box-with-rating:has(.header-menu) {
  z-index: 70;
}
.thumbnail-box-with-rating.being-pointed-to {
  border-style: dashed;
  border-width: 3px;
  border-color: #ED5565;
}
.thumbnail-box-with-rating .rating-header-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}

[data-clmn_label_in_subtree=Ideas] > .root:not(.active-cell) > .cell-content > .cell-field-wrapper:not(:is([data-field_label=EntityNumberDisplay], [data-field_label=Idea], [data-field_label=InlineComments])) {
  display: none;
}

[data-clmn_label_in_subtree=Generators] .root:not([data-cell_visibility]):not(.active-cell) > .cell-content > .cell-field-wrapper:not(:is([data-field_label=EntityNumberDisplay], [data-field_label=OpenAiRequestErrorSymbol], [data-field_label=ResultImageDisplay])) {
  display: none;
}

#body-wrapper[data-min_image_rating="3"] .thumbnail-box-with-rating:is([data-current_rating="0"], [data-current_rating="1"], [data-current_rating="2"]) {
  display: none !important;
}

#body-wrapper[data-min_image_rating="2"] .thumbnail-box-with-rating:is([data-current_rating="0"], [data-current_rating="1"]) {
  display: none !important;
}

#body-wrapper[data-min_image_rating="1"] .thumbnail-box-with-rating[data-current_rating="0"] {
  display: none !important;
}

.ignore-this[data-clmn_label_in_subtree^=Generators] > .root:not(.active-cell) > .cell-content > .cell-field-wrapper {
  display: none;
}
.ignore-this[data-clmn_label_in_subtree^=Generators] > .root:not(.active-cell) > .cell-content > .cell-field-wrapper[data-field_label=ResultImageDisplay] {
  display: block;
}
.ignore-this[data-clmn_label_in_subtree^=Generators] > .root:not(.active-cell)[data-cell_visibility] > .cell-content > .cell-field-wrapper {
  display: block;
}
.ignore-this[data-clmn_label_in_subtree^=Generators] > .root:not(.active-cell)[data-cell_visibility] > .cell-content > .cell-field-wrapper[data-field_label=ResultImageDisplay] .thumbnail-box-with-rating {
  display: flex;
}

.root[data-cell_visibility=maximal], .root[data-cell_visibility=maximal].has-open-outside-header-menu {
  /* ^ 2nd part to prevent the non-dall-e rule from applying */
  z-index: 55;
  position: fixed;
  left: 0;
  overflow: scroll;
  top: 105px;
  height: calc(100% - 105px);
}
@media (min-width: 1200px) {
  .chat-overlay-open .root[data-cell_visibility=maximal], .chat-overlay-open .root[data-cell_visibility=maximal].has-open-outside-header-menu {
    width: calc(100% - 500px) !important;
  }
}

.dialog-box .link-caption-input-line {
  display: none;
}

.processing-step {
  display: flex;
  flex-direction: row;
  gap: 0.375em;
}
.processing-step > .user-avatar {
  flex-shrink: 0;
}

.result-image-wrapper {
  display: grid;
  grid-template-areas: "images icon";
  grid-template-columns: 1fr max-content;
  grid-column-gap: 1em;
  align-items: start;
}

.result-images {
  grid-area: images;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 5px;
       column-gap: 5px;
  row-gap: 5px;
  justify-content: center;
}

.result-images img {
  max-width: min(300px, 100%);
}

.result-images .ellipsis-icon {
  color: #aaa;
}

.show-in-context-button {
  grid-area: icon;
  display: none !important;
}

.root[data-cell_visibility=maximal] [data-field_label=ResultImageDisplay] .cell-field-content .show-in-context-button {
  display: block;
}
.root[data-cell_visibility=maximal] [data-field_label=ResultImageDisplay] .cell-field-content .generator-full, .root[data-cell_visibility=maximal] [data-field_label=ResultImageDisplay] .cell-field-content .generator-minimal {
  display: none;
}

.root[data-cell_visibility=maximal] [data-field_label=ResultImageDisplay] .thumbnail-box-with-icon {
  width: 300px;
}

.root[data-cell_visibility=full] .generator-full, .root[data-cell_visibility=full] .generator-exit-maximal {
  display: none;
}

.root:not([data-cell_visibility]) .generator-minimal, .root:not([data-cell_visibility]) .generator-exit-maximal {
  display: none;
}

.root[data-cell_visibility=maximal] .generator-minimal, .root[data-cell_visibility=maximal] .generator-full, .root[data-cell_visibility=maximal] .generator-maximal {
  display: none;
}

.entity-number-display {
  display: grid;
  grid-template-areas: "entity-number details-button full-screen-button";
  grid-template-columns: 1fr 2fr 1fr;
  justify-items: center;
  position: relative;
  margin-top: -8px;
}
.entity-number-display > .entity-number {
  grid-area: entity-number;
  position: absolute;
  top: 0px;
  left: -16px;
}
.entity-number-display > .generator-full, .entity-number-display > .generator-minimal {
  grid-area: details-button;
}
.entity-number-display > .generator-maximal, .entity-number-display > .generator-exit-maximal {
  grid-area: full-screen-button;
}

.intermediate-image-display {
  display: block;
}

.intermediate-image-display img {
  max-width: 100%;
}

[data-clmn_label_in_cell_content=Topics] .entity-number-display > .icon-wrapper, [data-clmn_label_in_cell_content=Ideas] .entity-number-display > .icon-wrapper {
  display: none;
}

#body-wrapper:not([data-min_image_rating]) [data-clmn_label_in_subtree=Ideas][data-idea_view_mode=focused-only] > .subtrees > .subtree:not([data-generator_role=focused-generator]) {
  display: none;
}
#body-wrapper:not([data-min_image_rating]) [data-clmn_label_in_subtree=Ideas][data-idea_view_mode=path-to-this-generator] > .subtrees > .subtree:not([data-generator_role=on-path]) {
  display: none;
}
#body-wrapper:not([data-min_image_rating]) [data-clmn_label_in_subtree=Ideas][data-idea_view_mode=terminal-generators] > .subtrees > .subtree:not([data-generator_role=terminal-generator]) {
  display: none;
}

#ui-datepicker-div {
  z-index: 11 !important;
}

.dropdown-menu-with-title {
  display: grid;
  grid-template-areas: "dropdown-menu-title" "dropdown-menu-placeholder";
  align-content: center;
  grid-row-gap: 0.1875em;
  grid-template-rows: max-content max-content;
}

.dropdown-menu-title {
  display: flex;
  grid-area: dropdown-menu-title;
  color: var(--color-neutral-100);
  cursor: pointer;
  font-weight: 400;
  max-width: 9.375em;
  text-align: center;
  justify-self: center;
}

.dropdown-menu-placeholder {
  /* Does the element always have display: grid? */
  display: grid;
  /* Where is this element positioned within its surrounding grid? */
  /* How is this element aligned within its grid cell? */
  align-self: start;
  /* What does the grid look like? */
  grid-template-areas: "dropdown-menu";
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  /* How are the items to be aligned within their cells? */
  /* (-> Items aligned individually.) */
  /* How big is this element? */
  height: auto;
  /* (Other specifications:) */
  position: relative;
}

.dropdown-menu {
  grid-area: dropdown-menu;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: -moz-max-content;
  width: max-content;
  overflow-wrap: break-word;
  background: var(--color-white);
  min-height: 1.5em;
  border-radius: 0.375em;
  box-shadow: 0px 2px 4px 0px rgba(5, 16, 55, 0.06), 0px 0px 0px 1px #CDD0DC inset;
  max-width: 100%;
}
.hlc-widget .dropdown-menu {
  border: none;
}
.dropdown-menu > .dropdown-menu-option {
  cursor: pointer;
}
.dropdown-menu[data-dropdown_menu_state=closed] {
  position: static;
}
.dropdown-menu-placeholder.edit-dom-with-invalid-value > .dropdown-menu[data-dropdown_menu_state=closed] {
  box-shadow: 0px 0px 0px 1px var(--color-default-error);
}
.dropdown-menu[data-dropdown_menu_state=closed] > .dropdown-menu-option {
  display: none;
}
.dropdown-menu[data-dropdown_menu_state=closed] > .dropdown-menu-option.selected-dropdown-menu-option {
  display: block;
  padding: 0.375em 1em;
}
.dropdown-menu[data-dropdown_menu_state=closed] > .dropdown-menu-option.selected-dropdown-menu-option::after {
  content: "\f078";
  font: var(--fa-font-light);
  margin-left: 0.625em;
  margin-top: 0.25em;
}
.dropdown-menu[data-dropdown_menu_state=closed] > .dropdown-menu-option.selected-dropdown-menu-option:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.dropdown-menu[data-dropdown_menu_state=closed] > .dropdown-menu-option.selected-dropdown-menu-option {
  border-radius: 0.375em;
}
.dropdown-menu[data-dropdown_menu_state=opened] {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5em;
  width: 300px;
  min-width: 300px;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15);
}
.dropdown-menu-placeholder.edit-dom-with-invalid-value > .dropdown-menu[data-dropdown_menu_state=opened] {
  box-shadow: 0px 0px 0px 2px var(--color-default-error) inset, 0px 0px 0px 4px #B4C5FF, 0px 2px 6px 0px rgba(5, 16, 55, 0.2);
}
.dropdown-menu[data-dropdown_menu_state=opened] {
  z-index: 20;
}
.root.active-cell .dropdown-menu[data-dropdown_menu_state=opened] {
  z-index: 12;
}
.dropdown-menu[data-dropdown_menu_state=opened] > .dropdown-menu-option {
  display: block;
  height: -moz-max-content;
  height: max-content;
  width: 100%;
  border-radius: 6px;
  padding: 0.375em 0.5em 0.375em 1.75em;
}
.dropdown-menu[data-dropdown_menu_state=opened] > .dropdown-menu-option.selected-dropdown-menu-option::before {
  content: "\f00c";
  font: var(--fa-font-light);
  margin-right: 0.5em;
  position: absolute;
  left: 0.875em;
  margin-top: 0.25em;
}
.dropdown-menu[data-dropdown_menu_state=opened] > .dropdown-menu-option:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.dropdown-menu.somm[data-dropdown_menu_state=opened] .dropdown-menu-summary {
  display: none !important;
}
.dropdown-menu.somm[data-dropdown_menu_state=opened].dropdown-menu-summary:before {
  content: "[" attr(data-amount_of_selected_options) "] selected";
  font-family: inherit;
}
.dropdown-menu.somm[data-dropdown_menu_state=opened] > .dropdown-menu-option {
  display: grid;
  grid-template-areas: "icons display-name";
  grid-template-columns: min-content;
  align-items: center;
  -moz-column-gap: 0.3125em;
       column-gap: 0.3125em;
}
.dropdown-menu.somm[data-dropdown_menu_state=opened] > .dropdown-menu-option i {
  grid-area: icons;
  font-size: 0.6875em;
}
.dropdown-menu.somm[data-dropdown_menu_state=opened] > .dropdown-menu-option .fa-check {
  margin-left: 0.34375em;
  display: none;
}
.dropdown-menu.somm[data-dropdown_menu_state=opened] > .dropdown-menu-option .display-name {
  grid-area: display-name;
}
.dropdown-menu.somm[data-dropdown_menu_state=opened] > .dropdown-menu-option.selected-somm-option i.fa-check {
  display: initial;
}

.main-topbar .dropdown-menu[data-dropdown_menu_state=opened] {
  position: static;
  overflow: hidden;
}

.dropdown-menu.wrap-lines > .dropdown-menu-option {
  height: auto;
  white-space: normal;
}

.field-default-query-dialog {
  display: grid;
  /* Where is this element positioned within its surrounding grid? */
  /* How is this element aligned within its grid cell? */
  /* How big is this element? */
  /* What does the grid look like? */
  grid-template-areas: "query" "yes-button" "no-button";
  grid-row-gap: 0.3125em;
  /* How are the items to be aligned within their cells? */
  align-content: start;
  justify-content: left;
  /* (Other specifications:) */
  margin-top: 0.3125em;
  padding: 0.3125em;
  color: black;
  border: 2px solid #ddd;
  background: white;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), 0px 0px 0px 2px #FFB119 inset;
}

#gps-coordinate-picker {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  padding: 1.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#gps-coordinate-picker p {
  margin: 0;
}
#gps-coordinate-picker #gps-coordinate-picker-map {
  flex: 1 1 auto;
  min-height: 20rem;
}
#gps-coordinate-picker #gps-coordinate-picker-output {
  min-height: 4.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d2d6db;
  border-radius: 0.5rem;
  background: #f7f8fa;
  white-space: pre-wrap;
  font-family: monospace;
}
#gps-coordinate-picker #gps-coordinate-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
#gps-coordinate-picker #gps-coordinate-picker-actions button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 14px 24px 14px 18px;
  gap: 0.75em;
  border: 0;
  border-radius: 30px;
  background-color: var(--color-neutral-10);
  color: var(--color-neutral-100);
  cursor: pointer;
}
#gps-coordinate-picker #gps-coordinate-picker-actions button:hover {
  background-color: var(--color-neutral-20);
}
#gps-coordinate-picker #gps-coordinate-picker-actions button:active {
  background-color: var(--color-neutral-60);
  color: var(--color-white);
}
#gps-coordinate-picker #gps-coordinate-picker-actions button#gps-coordinate-picker-store {
  background-color: var(--color-blue-uxbin-primary-light);
  color: var(--color-white);
  font-weight: 600;
}
#gps-coordinate-picker #gps-coordinate-picker-actions button#gps-coordinate-picker-store:hover {
  background-color: var(--color-blue-60);
}
#gps-coordinate-picker #gps-coordinate-picker-actions button#gps-coordinate-picker-store:active {
  background-color: var(--color-blue-60);
  color: var(--color-white);
}

.header-with-icons {
  display: flex;
  border-radius: 16px 16px 0 0;
}
.header-with-icons > .icon-row-left, .header-with-icons > .icon-row-right {
  align-items: center;
  display: flex;
}
.header-with-icons > .icon-row-left {
  justify-content: space-between;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 21.875em;
}
.header-with-icons > .icon-row-right {
  justify-self: end;
  justify-content: flex-end;
  flex-grow: 1;
}
.header-with-icons.cell-header {
  margin: -5px -15px 5px;
}
.header-with-icons.media-window-header {
  position: relative;
  z-index: 10;
}
.header-with-icons {
  position: sticky;
  top: 0;
  padding: 5px 8px;
  background-color: var(--color-white);
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.08);
}
.header-with-icons.cell-header {
  z-index: 12;
}
.header-with-icons.cell-header .header-menu {
  z-index: 15;
}
.header-with-icons.zoom-window-header {
  padding: 20px 16px 15px 16px;
  /* ^ Not sure why necessary */
}

.header-menu {
  grid-area: header-menu;
  width: 15.625em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: start;
  border-radius: 6px;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15);
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.header-menu > .header-menu-divider {
  width: 100%;
  border-style: solid;
  border-width: thin;
  border-color: var(--color-neutral-20);
  margin: 0.5em 0;
}
.header-menu > .header-menu-line {
  width: 100%;
  max-width: 15.625em;
  display: grid;
  grid-template-areas: "button header-menu-text" "_blank_ input-area";
  /* input-area is used only in the fallback case for getting a link. */
  grid-template-columns: 1.5em 1fr;
  grid-column-gap: 0.5em;
  align-items: center;
  justify-items: center;
  border-radius: 0.375em;
  cursor: pointer;
  padding: 0.3125em 1em;
}
.header-menu > .header-menu-line:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.header-menu > .header-menu-line {
  /* Icon wrapper: See icon-buttons.sass */
}
.header-menu > .header-menu-line > .icon-wrapper {
  align-self: start;
}
.header-menu > .header-menu-line > .header-menu-text {
  color: var(--color-neutral-100);
  justify-self: start;
  font-size: 1em;
}
.header-menu > .header-menu-line > .cell-header-input-area {
  grid-area: input-area;
  color: var(--color-general-light);
  font-size: 0.875em;
  font-style: italic;
}
.header-menu > .header-menu-line > .cell-header-input-area:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.header-menu > .header-menu-line > .cell-header-input-area > input {
  width: 100%;
}
.header-menu > .header-menu-line > .cell-header-input-area {
  font-size: 0.75em;
}

#topbar-ellipsis-menu {
  top: 3.125em;
  left: 1.25em;
}

#show-help-menu, #show-user-options-menu {
  top: 5em;
  right: 1.25em;
}

.icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  width: calc(1.5 * 1em);
  height: calc(1.5 * 1em);
}
.icon-wrapper[data-fa_size=fa-2xs] {
  width: calc(1.5 * 0.625em);
  height: calc(1.5 * 0.625em);
}
.icon-wrapper[data-fa_size=fa-xs] {
  width: calc(1.5 * 0.75em);
  height: calc(1.5 * 0.75em);
}
.icon-wrapper[data-fa_size=fa-sm] {
  width: calc(1.5 * 0.875em);
  height: calc(1.5 * 0.875em);
}
.icon-wrapper[data-fa_size=fa-lg] {
  width: calc(1.5 * 1.25em);
  height: calc(1.5 * 1.25em);
}
.icon-wrapper[data-fa_size=fa-xl] {
  width: calc(1.5 * 1.5em);
  height: calc(1.5 * 1.5em);
}
.icon-wrapper[data-fa_size=fa-2xl] {
  width: calc(1.5 * 2em);
  height: calc(1.5 * 2em);
}

.topbar-selector-icon {
  padding-right: 0.25em;
  display: none;
}

.operation-icon {
  margin-right: 0.5em;
}

.inline-comments {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.inline-comment {
  display: flex;
  gap: 0.5em;
}

.inline-comment > .comment-text {
  flex: 1;
  white-space: pre-wrap;
}

.inline-comment > .icon-wrapper {
  flex: 0;
}

.tooltip-with-timestamp {
  display: flex;
  flex-direction: column;
}

.avatar-wrapper {
  cursor: pointer;
}

.root-with-open-popup-tip {
  z-index: 5;
}

.insertion-arrows-overlay {
  display: grid;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 35;
}

.header-subtree > .header-root > .insertion-arrows-overlay {
  grid-template-areas: "b1 down b2";
  grid-template-columns: 1.25em 1.875em 1fr;
}

.subtree > .root > .insertion-arrows-overlay {
  grid-template-areas: "up b1 right" "down b1 b2";
  grid-template-columns: max-content 1fr max-content;
  /* Vertical subtrees handled in internal CSS. */
}

.insertion-arrow-div[data-arrow_direction=right] {
  align-self: start;
  justify-self: end;
  position: sticky;
  position: -webkit-sticky;
  top: 2.5em;
}
.insertion-arrow-div[data-arrow_direction=right] > .insertion-arrow {
  transform: translateY(0px) rotate(30deg);
}
.insertion-arrow-div[data-arrow_direction=right] {
  /* Vertical subtrees handled in internal CSS. */
}

.insertion-arrow-div {
  display: grid;
  grid-template-areas: "prompt hand";
  grid-template-columns: max-content max-content;
  grid-column-gap: 0em;
  /* ^ Otherwise, hard to deal with cases with no text. */
  align-items: center;
  justify-items: center;
  cursor: pointer;
  border-radius: 8px;
  background-color: var(--color-toast-info);
  color: white;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15);
  padding: 0.125em 0.375em 0.125em 0.375em;
  font-weight: 400;
}
.insertion-arrow-div > .insertion-arrow-prompt {
  grid-area: prompt;
}
.insertion-arrow-div > .insertion-arrow {
  grid-area: hand;
}
.insertion-arrow-div[data-arrow_direction=up] {
  justify-self: center;
  align-self: start;
}
.insertion-arrow-div[data-arrow_direction=down] {
  justify-self: left;
  align-self: end;
}

.journal-task-description {
  display: grid;
  grid-template-areas: "task duration end-time" "task planned-duration planned-end-time";
  grid-template-columns: 4fr 2fr 1fr;
  grid-column-gap: 0.5em;
  align-items: start;
}

.journal-task-description.work-task > .task {
  grid-area: task;
  font-weight: 700;
}
.journal-task-description.work-task > .duration {
  font-weight: 700;
}

.journal-task-description > .duration {
  grid-area: duration;
}

.journal-task-description > .end-time {
  grid-area: end-time;
}

.journal-task-description > .planned-duration {
  grid-area: planned-duration;
  font-style: italic;
  font-size: 1.25em;
}

.journal-task-description > .planned-end-time {
  grid-area: planned-end-time;
  font-style: italic;
  font-size: 1.25em;
}

.media-window {
  display: grid;
  grid-template-areas: "media-window-header" "media-window-caption-area" "media-window-body";
  grid-template-rows: max-content 3em 1fr;
  position: fixed;
  z-index: 30;
  bottom: 2px;
  left: 2px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.02);
  border: thin solid var(--color-highlight);
  width: -moz-min-content;
  width: min-content;
  background-color: var(--color-white);
}
.media-window > .media-window-header {
  grid-area: media-window-header;
  padding: 0.3125em 16px 0.3125em 16px;
  border-radius: inherit;
}
.media-window > .media-window-caption-area {
  grid-area: media-window-caption-area;
  padding: 0.3125em 16px 0.3125em 16px;
  overflow-y: auto;
  font-size: 1.25em;
}
.media-window > .media-window-body {
  grid-area: media-window-body;
  transition: width 0.3s, height 0.3s ease-in-out;
  transform-origin: top left;
  background-color: white;
}
.media-window > .media-window-body > .embedded-video {
  display: flex;
  justify-content: center;
  align-items: center;
}
.media-window > .media-window-body .konvajs-content {
  background-image: linear-gradient(45deg, var(--color-chessboard) 25%, transparent 25%), linear-gradient(-45deg, var(--color-chessboard) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-chessboard) 75%), linear-gradient(-45deg, transparent 75%, var(--color-chessboard) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.media-window.large-size {
  width: 100%;
  height: 99%;
  justify-self: center;
  align-self: center;
  bottom: auto;
  left: auto;
  box-shadow: 0 0 0 8000px rgba(255, 255, 255, 0.9);
}
.media-window.video-window {
  background: white;
}
.media-window.video-window > .media-window-body > .video-player {
  cursor: pointer;
}
.media-window.image-window > .media-window-body {
  grid-area: media-window-body;
}
.media-window.image-window > .media-window-body > img {
  display: block;
  margin: 0 auto;
  width: 56vw;
  pointer-events: none;
}
.media-window.image-editing-window > .media-window-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: auto;
  z-index: -1;
}

px {
  z-index: 30;
}

.shown-in-window {
  outline: var(--color-highlight) dotted 4px;
}

.video-position-display {
  grid-area: media-window-body;
  justify-self: center;
  align-self: start;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.125em 0.3125em;
  font-size: 1.5em;
  z-index: 10;
}

dialog {
  transform: translate(calc(50vw - 50%)) translateY(calc(50vh - 50%));
  border: 0 none;
  overflow: visible;
  background: transparent;
}
dialog .dialog-wrapper {
  max-width: 31.25em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 2em;
  background: white;
  border-radius: 1.5em;
}
dialog .dialog-wrapper .dialog-box-title {
  font-size: 1.5em;
  font-weight: 600;
}
dialog .dialog-wrapper .dialog-box-text {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  font-size: 1.25em;
}
dialog .dialog-wrapper .button-wrapper {
  justify-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

::backdrop {
  background: rgba(230, 230, 230, 0);
}

.button-subtrees {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.button-subtree {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.sidebar-entry-content {
  outline-offset: 2px;
}

.header-menu-line {
  outline-offset: -3px;
}

.cell-field-wrapper {
  outline-offset: 4px;
  border-radius: 4px;
}

.icon-div-with-possible-popup-tip {
  border-radius: 4px;
}

body.info-mode .has-open-popup-tip {
  background-color: var(--color-neutral-20);
}

.overview-table > .overview-table-body {
  /* For most specifications, see .subtrees. */
  grid-area: overview-table-body;
  padding-top: 0.625em;
  padding-right: 10px;
  padding-bottom: 31.25em;
  padding-left: 10px;
}
.overview-table > .overview-table-header {
  /* For many specifications, see .subtrees and .overview-table-header.sass */
  /* Where is this element positioned within its surrounding grid? */
  grid-area: overview-table-header;
  /* How is this element aligned within its grid cell? */
  position: sticky;
  top: 0;
  /* How big is this element? */
  /* Does the element always have display: grid? */
  /* (Other specifications:) */
  z-index: 10;
  color: #1f1f1f;
  font-weight: 400;
  background-color: var(--color-white);
  border-bottom: solid 1px rgba(0, 0, 0, 0.08);
}
.overview-table > .overview-table-header .header-root + .bracket > .bracket-background {
  background-color: var(--color-topbar);
}

#chat-panel > .overview-table > .overview-table-body {
  padding-bottom: 0.375em;
}

#main-panel > .overview-table > .overview-table-body {
  padding-bottom: 31.25em;
}

.overview-table-header {
  height: 1.875em;
  justify-items: center;
}

.header-subtrees {
  grid-area: subtrees;
  display: block;
}

.header-subtree {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.header-subtree > .bracket {
  visibility: hidden;
  /* ^ Until we've figured out something better. */
}
.header-subtree > .bracket > .bracket-background {
  height: 100%;
  width: 100%;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  box-shadow: inset 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
  background-color: var(--color-main-background);
}

.header-root {
  color: black;
  display: flex;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  /* &:hover
  * @include standard-hover
  * > .header-display-names
  * position: relative
  * &:before
  * font-family: 'Font Awesome 6 Pro', sans-serif
  * position: absolute
  * left: -20px
  * content: "\f33e" */
}
.header-root > .header-display-names {
  max-width: 100%;
  display: flex;
  align-items: center;
}
.header-root > .header-display-names > .vertical-display-name {
  display: none;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.header-root > .header-display-names > .narrowed-display-name {
  display: none;
}

#overview-table-header > .header-subtree > .header-root {
  position: relative;
}

.icon-div-with-possible-popup-tip {
  display: flex;
  align-items: start;
  position: relative;
  cursor: pointer;
}
.icon-div-with-possible-popup-tip:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
@media all and (max-width: 664px) {
  .icon-div-with-possible-popup-tip {
    padding: 0 !important;
  }
}

body.info-mode .has-open-popup-tip {
  outline-width: 0;
}

.has-open-popup-tip {
  position: relative;
}
.has-open-popup-tip > .popup-tip {
  position: absolute;
}
.has-open-popup-tip > .popup-tip[data-popup_tip_position=above] {
  bottom: calc(100% + 16px);
}
.has-open-popup-tip > .popup-tip[data-popup_tip_position=below] {
  top: calc(100% + 16px);
}
@media (pointer: fine) {
  .has-open-popup-tip > .popup-tip[data-popup_tip_position=below] {
    top: max(100%, 70px);
  }
}
.has-open-popup-tip > .popup-tip {
  /* ^ So that the cursor won't block part of the tip. This value works for AJ's relatively large pointer cursor */
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 12.5em;
}
.has-open-popup-tip > .popup-tip > svg {
  position: absolute;
}
.has-open-popup-tip > .popup-tip > svg > path {
  fill: var(--color-info-mode-outline);
}
.has-open-popup-tip > .popup-tip > .popup-tip-content {
  display: flex;
  cursor: crosshair;
  flex-direction: column;
  gap: 0.5em;
  background-color: var(--color-teal-10);
  border: 2px solid var(--color-info-mode-outline);
  padding: 0.5em;
  line-height: 1.25;
  border-radius: 0.375em;
  font-weight: 400;
}
.has-open-popup-tip > .popup-tip > .popup-tip-content > .popup-tip-info-text {
  padding-left: 0.5em;
}
.has-open-popup-tip > .popup-tip > .popup-tip-content > .popup-tip-line {
  cursor: pointer;
  width: 100%;
  max-width: 15.625em;
  display: grid;
  grid-template-areas: "button text";
  grid-template-columns: 1.5em 1fr;
  grid-column-gap: 0.5em;
  align-items: center;
  justify-items: center;
  border-radius: 1.875em;
  cursor: pointer;
  padding: 0.3125em 0.5em;
  background-color: var(--color-teal-20);
}
.has-open-popup-tip > .popup-tip > .popup-tip-content > .popup-tip-line:not(.no-hover):hover {
  background-color: var(--color-teal-40);
}
.has-open-popup-tip > .popup-tip > .popup-tip-content > .popup-tip-line > .icon-wrapper {
  grid-area: button;
  align-self: start;
}
.has-open-popup-tip > .popup-tip > .popup-tip-content > .popup-tip-line > .popup-tip-menu-text {
  grid-area: text;
  justify-self: start;
  font-size: 0.875em;
}

body.info-mode > #body-wrapper {
  cursor: crosshair;
}
body.info-mode .highlighted-for-onboarding {
  outline-color: var(--color-info-mode-outline) !important;
  /* ^ It should remain recognizable as a highlighted element, but the blue color indicates that tapping will not activate the control. */
}

#cookie-banner {
  position: absolute;
  bottom: 0;
  background: white;
  width: 100%;
  border-top: thin solid #ccc;
  padding: 1em 2em;
  display: none;
  z-index: 60;
  filter: none;
}
#cookie-banner h3 {
  font-weight: 600;
  margin-bottom: 0.5em;
}
#cookie-banner ul {
  margin-left: 2em;
  margin-bottom: 1em;
}

#privacy-buttons-in-cookie-banner {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 1em;
       column-gap: 1em;
  row-gap: 0.5em;
}

#privacy-buttons-in-main-panel {
  display: flex;
  margin-top: 4em;
  -moz-column-gap: 1em;
       column-gap: 1em;
  row-gap: 0.5em;
  flex-wrap: wrap;
}

/* To do: Move the following to a more general location: */
.tipsheet-button {
  border: thin solid #ccc;
  border-radius: 1em;
  padding: 0.1875em 1em;
  font-size: 0.875em;
  cursor: pointer;
}
.tipsheet-button:hover {
  box-shadow: 1.5px 0px 1.5px 0px rgba(0, 0, 0, 0.2);
}
.tipsheet-button:active {
  box-shadow: 1.5px 0px 1.5px 0px rgba(0, 0, 0, 0.55) inset;
}
.tipsheet-button.call-to-action {
  padding: 0.1875em 2em;
  background: var(--color-green-darker);
  color: white;
}

#shareAPIPolyfill-container {
  filter: none;
}

.root {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--color-general-light);
  cursor: default;
  box-shadow: -3px 3px 3px 0 var(--color-neutral-20);
  transition: box-shadow 0.3s ease, padding 0.3s ease, background-color 0.3ms ease;
  border-style: none;
  padding: 8px 16px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.root.has-open-outside-header-menu {
  z-index: 5;
}
.root.has-open-dialog-box {
  z-index: 5;
}
#body-wrapper[data-minor_mode=active-cell-mode] .root:not(.active-cell) {
  /* I forget what my logic for it was. Let's leave it commented out until we see a reason to put it back in. */
}
#body-wrapper[data-minor_mode=active-cell-mode] .root:not(.active-cell).marked-for-deletion {
  background-color: var(--color-cells-to-delete);
}
#body-wrapper[data-minor_mode=active-cell-mode] .root:not(.active-cell).marked-for-deletion + .bracket {
  background-color: var(--color-cells-to-delete);
}
.root {
  /* We need this redundant exception, since otherwise the above selector
  * * overrides the general rule for marked-for-deletion: */
}
.root.marked-for-deletion {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-error);
}
.root.marked-for-moving-or-copying {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-info);
}
.root.grouping-cell {
  background-color: var(--color-grouping-cell);
}
.root.grouping-cell + .bracket {
  background-color: var(--color-grouping-cell);
}
.root .cell-field-wrapper.irrelevant-field {
  display: none;
}
.terminal-subtree > .root {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.root:not(.active-cell).entire-cell-is-hitbox {
  cursor: pointer;
  border-radius: 0px;
  border-style: outset;
  border-width: 2px;
  box-shadow: none;
}
.root:not(.active-cell) > .icon-bar {
  display: none;
}
.root:not(.active-cell) .cell-field-wrapper.invisible-when-cell-inactive {
  display: none;
}
.root.active-cell {
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.4);
  /* ^ If there's a bracket, it also keeps its shadow. */
  z-index: 5;
  min-width: 250px;
  background-color: var(--color-active-cell);
}
.root.active-cell + .bracket {
  background-color: var(--color-active-cell);
}
.root.active-cell > .cell-content > .cell-field-wrapper.openable-for-editing {
  cursor: crosshair;
}
.root.active-cell.marked-for-deletion {
  background-color: var(--color-cells-to-delete);
}
.root.active-cell.marked-for-deletion + .bracket {
  background-color: var(--color-cells-to-delete);
}
.root.active-cell > .cell-content {
  top: 3.75em;
  margin-top: 3px;
}
.root.highlight-active {
  background-color: green;
}
.root > .outside-menu-wrapper {
  display: grid;
  grid-template-areas: "blank icon-wrapper";
  grid-template-columns: 1fr max-content;
  cursor: pointer;
  height: 0;
  align-items: center;
  justify-items: end;
  justify-content: end;
  position: sticky;
  z-index: 4;
  left: 0px;
  top: 14px;
  transform: translateX(0.75em);
  width: 100%;
  background-color: white;
}
.root > .outside-menu-wrapper > .icon-wrapper {
  justify-content: right;
  cursor: pointer;
}
.root > .outside-menu-wrapper > .icon-wrapper:not(.no-hover):hover {
  background-color: var(--color-neutral-10);
}
.root > .outside-menu-wrapper > .icon-wrapper:active {
  outline: thin solid var(--color-highlight);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.root > .outside-menu-wrapper > .icon-wrapper:active, .root > .outside-menu-wrapper > .icon-wrapper.clicked-and-loading {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11) inset, 0 5px 15px 0 rgba(0, 0, 0, 0.02) inset;
}
.root > .outside-menu-wrapper > .icon-wrapper.clicked-and-loading {
  cursor: wait;
}
.root > .outside-menu-wrapper > .icon-wrapper {
  grid-area: icon-wrapper;
}
.root > .outside-menu-wrapper > .icon-wrapper > i {
  margin-right: 0.375em;
  color: #aaa;
}
.root > .outside-menu-wrapper > #cell-header-menu {
  margin-right: 0em;
}

.root.active-cell.dialog-box {
  position: absolute;
  width: 27em;
  max-width: 90vw;
}
.root.active-cell.dialog-box.in-editing-panel {
  position: static;
  flex: 0 1 27em;
  margin-left: 1em;
  margin-top: 1em;
}
.root.active-cell.dialog-box {
  top: 0;
  right: 0;
  height: -moz-min-content;
  height: min-content;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  /* ^ Same as for terminal-subtree. */
}

#body-wrapper[data-minor_mode=annotation-mode] .outside-menu-wrapper {
  display: none;
}

.root > .locked-cell-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.root > .locked-cell-wrapper > .locked-cell-indicator {
  background-color: white;
  opacity: 0.8;
}
.root > .locked-cell-wrapper > .locked-cell-indicator > i {
  color: var(--color-neutral-70);
  font-size: 2rem;
}

/* By default, we omit the margin-top for the first subtree; vertical subtrees are handled in the internal-css-for-column-widths: */
.subtree:not(.fltrd) ~ .subtree:not(.fltrd) {
  margin-top: 0.625em;
}

.subtrees {
  display: flex;
  flex-direction: column;
  grid-area: subtrees;
}

@layer default-display-properties {
  .subtree {
    display: flex;
  }
}
.subtree.fltrd {
  display: none;
}

.user-avatar {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  color: white;
  background: #676b64;
  font-size: 13px;
  font-weight: 700;
}
.user-avatar[data-number_of_initials="1"] {
  font-size: 1.0625em;
  line-height: 1.0625em;
}
.user-avatar[data-number_of_initials="2"] {
  font-size: 0.6875em;
  line-height: 0.6875em;
}
.user-avatar[data-number_of_initials="3"] {
  font-size: 0.5625em;
  line-height: 0.875em;
}
.user-avatar[data-number_of_initials="3"] > span:first-child {
  margin-top: 0.125em;
}
.user-avatar[data-number_of_initials="4"] {
  font-size: 0.5625em;
  line-height: 0.875em;
}

/* To do: Adapt to grid. */
.user {
  height: 2.5em;
  width: 2.5em;
  background-size: cover;
  border-radius: 50%;
  margin: 0.3125em;
  position: relative;
  text-align: center;
  font-size: 1.25em;
  padding-top: 0.375em;
  color: var(--color-green);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-color: white;
}
.user[data-subscription_count]:after {
  content: attr(data-subscription_count);
  position: absolute;
  top: -0.5em;
  right: -0.375em;
  background: red;
  border-radius: 50%;
  width: 1.125em;
  height: 1.125em;
  text-align: center;
  font-size: 0.75em;
  color: white;
  font-weight: bold;
}
.user[data-subscription_count="1"]:after {
  display: none;
}
.user > .user-tooltip {
  background: rgba(255, 255, 255, 0.9);
  color: black;
  font-size: 0.625em;
  cursor: pointer;
}

#body-wrapper.zoomed-in-body-wrapper #default-topbar {
  display: none;
}
#body-wrapper.zoomed-in-body-wrapper .main .scrollable-wrapper {
  height: 100%;
  overflow: hidden;
}
#body-wrapper.zoomed-in-body-wrapper .overview-table-header {
  display: none;
}
#body-wrapper.zoomed-in-body-wrapper .overview-table-body .root.active-cell {
  z-index: 7;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
#body-wrapper.zoomed-in-body-wrapper .overview-table-body .root.active-cell .cell-content {
  font-size: 1.25em;
  top: 0;
}

#configuration-panel .cell-content {
  display: flex;
  flex-direction: column;
}

.mode-selection {
  grid-area: mode-selection;
}

.alignment-grid {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  z-index: 2;
  content: " ";
  pointer-events: none;
}
.alignment-grid .horizontal {
  height: 0.75em;
  display: flex;
}
.alignment-grid .horizontal:nth-child(even) {
  background: rgba(255, 0, 0, 0.3);
}

.root.global-search-root:not(.marked-for-deletion, .marked-for-moving-or-copying) {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-warning);
}
.root.global-search-root:not(.marked-for-deletion, .marked-for-moving-or-copying) > .cell-header {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-warning);
}

mark {
  background-color: var(--color-toast-warning);
  color: inherit;
}

#body-wrapper[data-major_mode=global-search-mode]:not(.showing-global-search-results) .global-search-result-button {
  display: none;
}

[data-button_state=grayed-out], .next-button[data-button_state=grayed-out] {
  opacity: 0.2;
  pointer-events: none;
}

body:not([data-special_status=Administrator])[data-wants_to_edit=false] .editing-control {
  display: none;
}
body:not([data-special_status=Administrator])[data-wants_advanced_options=false] .advanced-control {
  display: none;
}

#top_user-level-setting-div {
  width: 22.5em;
  max-width: 100%;
  position: absolute;
  top: 0em;
  right: 0em;
  gap: 0.5em;
  display: flex;
  flex-direction: row;
  background-color: white;
  padding: 0.5em 1em;
  border-radius: 0.375em;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15);
  z-index: 10;
}

#old_user-level-setting-div {
  width: 20em;
  position: absolute;
  top: 6.25em;
  right: 0.625em;
  gap: 0.5em;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 0.5em 1em;
  border-radius: 0.375em;
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15);
}

#user-level-setting-div #set-user-level-editing-wrapper, #user-level-setting-div #set-user-level-advanced-wrapper {
  justify-self: center;
  display: grid;
  grid-template-areas: "label toggle-button icon-wrapper";
  grid-template-columns: 1fr min-content min-content;
  align-items: center;
  justify-items: end;
  gap: 0.5em;
  width: 100%;
}
#user-level-setting-div #set-user-level-editing-wrapper > .level-setting-label, #user-level-setting-div #set-user-level-advanced-wrapper > .level-setting-label {
  grid-area: label;
}
#user-level-setting-div #set-user-level-editing-wrapper > .button-general, #user-level-setting-div #set-user-level-advanced-wrapper > .button-general {
  grid-area: toggle-button;
}
#user-level-setting-div #set-user-level-editing-wrapper > .icon-wrapper, #user-level-setting-div #set-user-level-advanced-wrapper > .icon-wrapper {
  grid-area: icon-wrapper;
}

/* For styles that apply in all minor modes. */
.shake {
  animation-name: shake;
  animation-duration: 1s;
  transform-origin: 50% 50%;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes shake {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-1px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
}
@keyframes shake2 {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-1px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  60% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  70% {
    transform: translate(-1px, 0px) rotate(1deg);
  }
  80% {
    transform: translate(0px, 2px) rotate(0deg);
  }
  90% {
    transform: translate(1px, -1px) rotate(1deg);
  }
}
.focused-cell {
  box-shadow: 0px 10px 30px 3px rgba(5, 16, 55, 0.15), inset 6px 0px 0px var(--color-toast-warning);
  animation-name: shake2;
  animation-duration: 3s;
  transform-origin: 50% 50%;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

/* Using "background" colors everywhere except for within-field changes, since the 
 * * foreground colors are too dominant for entire fields. */
.root[data-cell_change=different] {
  background-color: var(--color-background-highlighting);
}
.root[data-cell_change=different] + .bracket {
  background-color: var(--color-background-highlighting);
}
.root[data-cell_change=unique] {
  background-color: var(--color-background-new-content);
}
.root[data-cell_change=unique] + .bracket {
  background-color: var(--color-background-new-content);
}

.cell-field-wrapper[data-field_change=different] {
  background-color: var(--color-foreground-highlighting);
}
.cell-field-wrapper[data-field_change=unique] {
  background-color: var(--color-background-new-content);
}

ins {
  background-color: var(--color-foreground-new-content);
  text-decoration: none;
}

del {
  background-color: var(--color-foreground-deletion);
  text-decoration: none;
}

.spell-check-results-whole-text, .spell-check-results-suggestions {
  border-style: solid;
  border-width: 2px;
  border-color: var(--color-orange-frame);
  padding: 0.5em;
  margin: 0.5em 0;
}

.spell-check-results-suggestions {
  border-style: dotted;
  border-color: black;
}

.spell-check-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.spell-check-error, .spell-check-suggestion {
  background-color: var(--color-warning);
  border-radius: 4px;
  padding: 2px;
  margin: -2px;
  cursor: pointer;
}
.spell-check-error:hover, .spell-check-suggestion:hover {
  outline: 2px dotted var(--color-neutral-60);
}
.spell-check-error.focused-spell-check-error, .spell-check-suggestion.focused-spell-check-error {
  outline: 2px dotted black;
  cursor: auto;
}

.spell-check-suggestion {
  background-color: var(--color-green-30);
  padding: 2px 6px;
}

body:not([data-special_status=Administrator]) #sidebar-explorer {
  display: none;
}

[data-user_role=Reader] #enter-add-cells-mode-button, [data-user_role=Reader] #topbar-ellipsis-button {
  display: none !important;
}
[data-user_role=Reader] #enter-annotation-mode-button, [data-user_role=Reader] #home-button {
  display: grid !important;
}
[data-user_role=Reader] .outside-menu-wrapper {
  display: none;
}

.outpainting-control-buttons {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 1rem;
}
.outpainting-control-buttons .button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.outpainting-control-buttons .button-group .header {
  text-transform: uppercase;
  font-size: 0.6rem;
  color: #777;
}
.outpainting-control-buttons .button-group .buttons {
  display: flex;
  gap: 0.5rem;
}
.outpainting-control-buttons .button-group .buttons button.active {
  border: thin solid black;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  font-family: Liberation, Cambria, Georgia, "Times New Roman", Times, serif;
  line-height: 1.3;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  font-size: 13px;
  /* Same as in all of latex-style.css
  * Presumably chosen to match the 2012 handbook */
}
table td, table th {
  padding: 0.5em 8px 0.5em 0;
}
table td:last-child, table th:last-child {
  padding-right: 0;
}
table td, table th {
  text-align: left;
  line-height: 1.1;
}
table td > p, table th > p {
  text-align: left !important;
  text-indent: 0;
  margin: 0;
}
table td {
  vertical-align: top;
}
table td p + p {
  margin-top: 3px;
}
table th {
  vertical-align: bottom;
}
table ol, table ul {
  padding-inline-start: 0 !important;
  margin-left: 1.5em !important;
  /* ^ in latex-style.css, outside of the table context. But we don't want it to apply everywhere in groupsheets */
}
table li {
  margin: 0;
}

table.borders-custom {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  max-width: 100%;
  overflow-x: auto;
  counter-increment: caption;
}

.border-bottom-thick {
  border-bottom: 2.27px solid black;
}

.border-bottom-thin {
  border-bottom: 1.36px solid black;
}

/*# sourceMappingURL=compiled-20260619-190433.css.map */