@charset "UTF-8";
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('./select2.css');




/**

  Variables - your main settings

  Components choose which variables to use.

  Modifiers override variables, thus theeming components;

  most common variables:
  - width
  - font-size

  Colors
  - color
  - background
  - border color
  →
 */

:root {
  font-size: 8px;

  --navbar-width: 10rem;
  --sidebar-width: 40rem;
  --sidebar-width-min: 32rem;
  --sidebar-width-max: 60rem;
  --container-width-large: 160rem;
  --container-width-medium: 100rem;
  --container-width-small: 75rem;
  --container-padding: 3rem;
  --modal-width-medium: 70rem;

  --gutter: 4rem;
  --padding: 2.5rem;
  --spacing: 1em;

  --line-height: 1.5;
  --icon-size: calc(1em * var(--line-height));
  /* --v-icon: 0.258em; */

  --border-width: 1px;

  --spacing-small: .5em;
  --spacing: 1em;
  --spacing-large: 2em;
  --spacing-xlarge: 4em;

  --inline-spacing-small: .5em;
  --inline-spacing: .75em;
  --inline-spacing-large: 1em;

  --btn-padding: calc(var(--inline-spacing) - var(--border-width));
  --input-padding: var(--btn-padding);
  --dialog-padding: 2.5rem;

  --form-indent: 20rem;
  --list-indent: 2em;

  --input-block-spacing: var(--spacing);

  /* Misc */
  --radius-smallest: .25em;
  --radius-small: .5em;
  --radius: 1em;
  --radius-large: 1.5em;
}
@media (min-width: 1600px) {
  html {
    font-size: 10px;
  }
}

/* Theme settings */
.light-mode,
.dark-mode {
  color-scheme: light;
  color: var(--body);
  accent-color: var(--success);

  --paper:          #fff;
  --paper-alt:      #fff;

  --body:           rgba(0, 0, 0, 1);
  --muted:          rgba(0, 0, 0, 0.6);
  --disabled:       rgba(0, 0, 0, 0.5);
  --border:         rgba(0, 0, 0, 0.25);
  --border-solid:   #BFBFBF;
  --bg-alt:         rgba(0, 0, 0, 0.13);
  --bg:             rgba(0, 0, 0, 0.07);

  --border-solid:   #ccc;
  --bg-alt-solid:   #dedede;
  --bg-solid:       #efefef;

  --action:        hsla(225, 100%, 60%, 1);
  --action-muted:  hsla(225, 100%, 60%, 0.6);
  --action-border: hsla(225, 100%, 60%, 0.4);
  --action-bg-alt: hsla(225, 100%, 60%, 0.2);
  --action-bg:     hsla(225, 100%, 60%, 0.1);

  --success:       hsla(146 76% 31% / 1);
  --success-gradient: linear-gradient(180deg, #32B560, #138947);
  --success-bg-alt:hsla(146 76% 31% / .3);
  --success-bg:    hsla(146 76% 31% / .1);

  --warning:       hsla(29, 100%, 45%, 1);
  --warning-muted: hsla(29, 100%, 45%, .6);

  --error:         hsla(10, 79%, 39%, 1);
  --error-bg:      hsla(10, 79%, 39%, .3);
  --danger:         var(--error);
  --danger-gradient: linear-gradient(180deg, hsl(11 71% 48%), hsl(10 79% 39%));

  --order-status-new:          hsl( 14  89% 61%);
  --order-status-offer:        hsl(213  92% 33%);
  --order-status-sampling:     hsl( 43  98% 53%);
  --order-status-analysis:     hsl(250 100% 69%);
  --order-status-complete:     var(--success);
  --order-status-rejected:     var(--error);

  --menu-shadow: 0 .1em  .5em rgb(0 0 0 / .2),
                 0  0    .1em rgb(0 0 0 / .4);

  --chevron: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="black" xmlns="http://www.w3.org/2000/svg" ><path d="M6 8l-1 1l5 5l5-5l-1-1l-4 4l-4-4z"/></svg>');
  --search: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M6.32812 12.7031C7.20312 13.5781 8.26562 14.0156 9.51562 14.0156C10.7656 14.0156 11.8281 13.5781 12.7031 12.7031C13.5781 11.8281 14.0156 10.7656 14.0156 9.51562C14.0156 8.26562 13.5781 7.20313 12.7031 6.32812C11.8281 5.45312 10.7656 5.01562 9.51562 5.01562C8.26562 5.01562 7.20312 5.45312 6.32812 6.32812C5.45312 7.20313 5.01562 8.26562 5.01562 9.51562C5.01562 10.7656 5.45312 11.8281 6.32812 12.7031ZM15.5156 14.0156L20.4844 18.9844L18.9844 20.4844L14.0156 15.5156V14.7188L13.7344 14.4375C12.5469 15.4688 11.1406 15.9844 9.51562 15.9844C7.70312 15.9844 6.15625 15.3594 4.875 14.1094C3.625 12.8594 3 11.3281 3 9.51562C3 7.70312 3.625 6.17188 4.875 4.92188C6.15625 3.64063 7.70312 3 9.51562 3C11.3281 3 12.8594 3.64063 14.1094 4.92188C15.3594 6.17188 15.9844 7.70312 15.9844 9.51562C15.9844 10.1719 15.8281 10.9219 15.5156 11.7656C15.2031 12.5781 14.8438 13.2344 14.4375 13.7344L14.7188 14.0156H15.5156Z"/></svg>');
  --file: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M6 2C4.89 2 4 2.89 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2H6ZM6 4H13V9H18V20H6V4Z"/></svg>');
  --excel: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M21.17 3.25C21.39 3.25 21.5867 3.33333 21.76 3.5C21.92 3.66 22 3.85333 22 4.08V19.92C22 20.1467 21.92 20.34 21.76 20.5C21.5867 20.6667 21.39 20.75 21.17 20.75H7.83C7.61 20.75 7.41333 20.6667 7.24 20.5C7.08 20.34 7 20.1467 7 19.92V17H2.83C2.61 17 2.41333 16.92 2.24 16.76C2.08 16.5867 2 16.39 2 16.17V7.83C2 7.61 2.08 7.41333 2.24 7.24C2.41333 7.08 2.61 7 2.83 7H7V4.08C7 3.85333 7.08 3.66 7.24 3.5C7.41333 3.33333 7.61 3.25 7.83 3.25H21.17ZM7 13.06L8.18 15.28H9.97L8 12.06L9.93 8.89H8.22L7.13 10.9L7.09 10.96L7.06 11.03C6.88667 10.6767 6.7 10.32 6.5 9.96C6.33333 9.60667 6.15667 9.25 5.97 8.89H4.16L6.05 12.08L4 15.28H5.78L7 13.06ZM13.88 19.5V17H8.25V19.5H13.88ZM13.88 15.75V12.63H12V15.75H13.88ZM13.88 11.38V8.25H12V11.38H13.88ZM13.88 7V4.5H8.25V7H13.88ZM20.75 19.5V17H15.13V19.5H20.75ZM20.75 15.75V12.63H15.13V15.75H20.75ZM20.75 11.38V8.25H15.13V11.38H20.75ZM20.75 7V4.5H15.13V7H20.75Z"/></svg> ');
  --shape: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.9549 2.47868C10.7081 1.07032 9.47904 0 8 0C6.34315 0 5 1.34315 5 3C5 3.86245 5.36393 4.63989 5.9466 5.18715L4.22217 9.0081C4.14882 9.00273 4.07473 9 4 9C2.34315 9 1 10.3431 1 12C1 13.6569 2.34315 15 4 15C4.06554 15 4.13058 14.9979 4.19508 14.9938L4.96668 16.7942C4.3723 17.3423 4 18.1277 4 19C4 20.6569 5.34315 22 7 22C8.11459 22 9.08721 21.3922 9.60447 20.4899L15.0378 21.4778C15.2667 22.9076 16.5058 24 18 24C19.6569 24 21 22.6569 21 21C21 19.826 20.3256 18.8095 19.3431 18.3167L20.6413 7.93129C21.99 7.63758 23 6.43674 23 5C23 3.34315 21.6569 2 20 2C18.8697 2 17.8853 2.62512 17.3739 3.54851L10.9549 2.47868ZM8 4C7.44772 4 7 3.55228 7 3C7 2.44772 7.44772 2 8 2C8.55228 2 9 2.44772 9 3C9 3.55228 8.55228 4 8 4ZM8 6C7.92522 6 7.85107 5.99726 7.77766 5.99189L6.05328 9.81274C6.63602 10.36 7 11.1375 7 12C7 12.8723 6.6277 13.6577 6.03333 14.2058L6.80493 16.0062C6.86942 16.0021 6.93447 16 7 16C8.49422 16 9.7333 17.0924 9.96215 18.5221L15.3956 19.51C15.8107 18.786 16.519 18.2516 17.3586 18.0687L18.6568 7.68322C17.8231 7.26508 17.2113 6.46986 17.0451 5.52131L10.6261 4.45147C10.1147 5.37487 9.13034 6 8 6ZM19 5C19 5.55228 19.4477 6 20 6C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4C19.4477 4 19 4.44772 19 5ZM17 21C17 21.5523 17.4477 22 18 22C18.5523 22 19 21.5523 19 21C19 20.4477 18.5523 20 18 20C17.4477 20 17 20.4477 17 21ZM7 20C6.44772 20 6 19.5523 6 19C6 18.4477 6.44772 18 7 18C7.55228 18 8 18.4477 8 19C8 19.5523 7.55228 20 7 20ZM3 12C3 12.5523 3.44772 13 4 13C4.55228 13 5 12.5523 5 12C5 11.4477 4.55228 11 4 11C3.44772 11 3 11.4477 3 12Z"/></svg>');
  --zip: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M20.0156 6H12L9.98438 3.98438H3.98438C3.45312 3.98438 2.98438 4.1875 2.57812 4.59375C2.20312 4.96875 2.01562 5.4375 2.01562 6V18C2.01562 18.5625 2.20312 19.0469 2.57812 19.4531C2.98438 19.8281 3.45312 20.0156 3.98438 20.0156H20.0156C20.5469 20.0156 21 19.8281 21.375 19.4531C21.7812 19.0469 21.9844 18.5625 21.9844 18V8.01562C21.9844 7.45312 21.7812 6.98438 21.375 6.60938C21 6.20312 20.5469 6 20.0156 6ZM18 12H15.9844V14.0156H18V15.9844H15.9844V18H14.0156V15.9844H15.9844V14.0156H14.0156V12H15.9844V9.98438H14.0156V8.01562H15.9844V9.98438H18V12Z"/></svg>');
}

.dark-mode {
  color-scheme: dark;

  --paper:         #121212;
  --paper-alt:     #1f1f1f; /* used with raised (popup) elements */

  --action:        hsla(198, 100%, 60%, 1);
  --action-muted:  hsla(198, 100%, 60%, 0.7);
  --action-border: hsla(198, 100%, 60%, 0.4);
  --action-bg-alt: hsla(198, 100%, 60%, 0.25);
  --action-bg:     hsla(198, 100%, 60%, 0.15);

  --warning:       hsla(33, 95%, 66%, 1);

  --body:            hsl(0 0% 100% / 1);
  --muted:           hsl(0 0% 100% / .7);
  --disabled:        hsl(0 0% 100% / .5);
  --border-solid:    #333;
  --border:          hsl(0 0% 100% / .3);
  --bg-alt:          hsl(0 0% 100% / .15);
  --bg:              hsl(0 0% 100% / .1);

  --border-solid:    #555;
  --bg-alt-solid:    #2c2c2c;
  --bg-solid:        #1f1f1f;

  --menu-shadow: 0 0 0 2px hsl(198 100% 60% / 1);


  --chevron: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="white" xmlns="http://www.w3.org/2000/svg" ><path d="M6 8l-1 1l5 5l5-5l-1-1l-4 4l-4-4z"/></svg>');
  --search: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M6.32812 12.7031C7.20312 13.5781 8.26562 14.0156 9.51562 14.0156C10.7656 14.0156 11.8281 13.5781 12.7031 12.7031C13.5781 11.8281 14.0156 10.7656 14.0156 9.51562C14.0156 8.26562 13.5781 7.20313 12.7031 6.32812C11.8281 5.45312 10.7656 5.01562 9.51562 5.01562C8.26562 5.01562 7.20312 5.45312 6.32812 6.32812C5.45312 7.20313 5.01562 8.26562 5.01562 9.51562C5.01562 10.7656 5.45312 11.8281 6.32812 12.7031ZM15.5156 14.0156L20.4844 18.9844L18.9844 20.4844L14.0156 15.5156V14.7188L13.7344 14.4375C12.5469 15.4688 11.1406 15.9844 9.51562 15.9844C7.70312 15.9844 6.15625 15.3594 4.875 14.1094C3.625 12.8594 3 11.3281 3 9.51562C3 7.70312 3.625 6.17188 4.875 4.92188C6.15625 3.64063 7.70312 3 9.51562 3C11.3281 3 12.8594 3.64063 14.1094 4.92188C15.3594 6.17188 15.9844 7.70312 15.9844 9.51562C15.9844 10.1719 15.8281 10.9219 15.5156 11.7656C15.2031 12.5781 14.8438 13.2344 14.4375 13.7344L14.7188 14.0156H15.5156Z"/></svg>');
  --file: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M6 2C4.89 2 4 2.89 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2H6ZM6 4H13V9H18V20H6V4Z"/></svg>');
  --excel: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M21.17 3.25C21.39 3.25 21.5867 3.33333 21.76 3.5C21.92 3.66 22 3.85333 22 4.08V19.92C22 20.1467 21.92 20.34 21.76 20.5C21.5867 20.6667 21.39 20.75 21.17 20.75H7.83C7.61 20.75 7.41333 20.6667 7.24 20.5C7.08 20.34 7 20.1467 7 19.92V17H2.83C2.61 17 2.41333 16.92 2.24 16.76C2.08 16.5867 2 16.39 2 16.17V7.83C2 7.61 2.08 7.41333 2.24 7.24C2.41333 7.08 2.61 7 2.83 7H7V4.08C7 3.85333 7.08 3.66 7.24 3.5C7.41333 3.33333 7.61 3.25 7.83 3.25H21.17ZM7 13.06L8.18 15.28H9.97L8 12.06L9.93 8.89H8.22L7.13 10.9L7.09 10.96L7.06 11.03C6.88667 10.6767 6.7 10.32 6.5 9.96C6.33333 9.60667 6.15667 9.25 5.97 8.89H4.16L6.05 12.08L4 15.28H5.78L7 13.06ZM13.88 19.5V17H8.25V19.5H13.88ZM13.88 15.75V12.63H12V15.75H13.88ZM13.88 11.38V8.25H12V11.38H13.88ZM13.88 7V4.5H8.25V7H13.88ZM20.75 19.5V17H15.13V19.5H20.75ZM20.75 15.75V12.63H15.13V15.75H20.75ZM20.75 11.38V8.25H15.13V11.38H20.75ZM20.75 7V4.5H15.13V7H20.75Z"/></svg> ');
  --shape: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.9549 2.47868C10.7081 1.07032 9.47904 0 8 0C6.34315 0 5 1.34315 5 3C5 3.86245 5.36393 4.63989 5.9466 5.18715L4.22217 9.0081C4.14882 9.00273 4.07473 9 4 9C2.34315 9 1 10.3431 1 12C1 13.6569 2.34315 15 4 15C4.06554 15 4.13058 14.9979 4.19508 14.9938L4.96668 16.7942C4.3723 17.3423 4 18.1277 4 19C4 20.6569 5.34315 22 7 22C8.11459 22 9.08721 21.3922 9.60447 20.4899L15.0378 21.4778C15.2667 22.9076 16.5058 24 18 24C19.6569 24 21 22.6569 21 21C21 19.826 20.3256 18.8095 19.3431 18.3167L20.6413 7.93129C21.99 7.63758 23 6.43674 23 5C23 3.34315 21.6569 2 20 2C18.8697 2 17.8853 2.62512 17.3739 3.54851L10.9549 2.47868ZM8 4C7.44772 4 7 3.55228 7 3C7 2.44772 7.44772 2 8 2C8.55228 2 9 2.44772 9 3C9 3.55228 8.55228 4 8 4ZM8 6C7.92522 6 7.85107 5.99726 7.77766 5.99189L6.05328 9.81274C6.63602 10.36 7 11.1375 7 12C7 12.8723 6.6277 13.6577 6.03333 14.2058L6.80493 16.0062C6.86942 16.0021 6.93447 16 7 16C8.49422 16 9.7333 17.0924 9.96215 18.5221L15.3956 19.51C15.8107 18.786 16.519 18.2516 17.3586 18.0687L18.6568 7.68322C17.8231 7.26508 17.2113 6.46986 17.0451 5.52131L10.6261 4.45147C10.1147 5.37487 9.13034 6 8 6ZM19 5C19 5.55228 19.4477 6 20 6C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4C19.4477 4 19 4.44772 19 5ZM17 21C17 21.5523 17.4477 22 18 22C18.5523 22 19 21.5523 19 21C19 20.4477 18.5523 20 18 20C17.4477 20 17 20.4477 17 21ZM7 20C6.44772 20 6 19.5523 6 19C6 18.4477 6.44772 18 7 18C7.55228 18 8 18.4477 8 19C8 19.5523 7.55228 20 7 20ZM3 12C3 12.5523 3.44772 13 4 13C4.55228 13 5 12.5523 5 12C5 11.4477 4.55228 11 4 11C3.44772 11 3 11.4477 3 12Z"/></svg>');
  --zip: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M20.0156 6H12L9.98438 3.98438H3.98438C3.45312 3.98438 2.98438 4.1875 2.57812 4.59375C2.20312 4.96875 2.01562 5.4375 2.01562 6V18C2.01562 18.5625 2.20312 19.0469 2.57812 19.4531C2.98438 19.8281 3.45312 20.0156 3.98438 20.0156H20.0156C20.5469 20.0156 21 19.8281 21.375 19.4531C21.7812 19.0469 21.9844 18.5625 21.9844 18V8.01562C21.9844 7.45312 21.7812 6.98438 21.375 6.60938C21 6.20312 20.5469 6 20.0156 6ZM18 12H15.9844V14.0156H18V15.9844H15.9844V18H14.0156V15.9844H15.9844V14.0156H14.0156V12H15.9844V9.98438H14.0156V8.01562H15.9844V9.98438H18V12Z"/></svg>');
}

/**
 [1] Fix thick font rendering: https://stackoverflow.com/questions/28217486/font-renders-thicker-in-browsers
*/
body {
  font-size: 1.75rem; /* 14px */
  font-family: "Instrument Sans";
  line-height: var(--line-height);

  -moz-osx-font-smoothing: grayscale;  /* 1 */
  -webkit-font-smoothing: antialiased; /* 1 */
}

/* Links */
a {
  text-decoration: none;
  color: var(--action);
  word-break: break-all;
}
a:hover {
  text-decoration: underline;
}

/*
  Tables

  [1] There's a 1px overflow due to the way the browser rounds percetages.
      Looks hacky but it works.
      https://stackoverflow.com/a/23563485/2743230

  [2] Remove margins from blocks that already add margins
*/
table {
  --cell-padding: 1.5rem;
  --negate-cell-padding: -1.5rem;

  width: 99.75%; /* 1 */
  margin-bottom: var(--spacing);
  text-align: left;
  border-collapse: collapse;
}
.scroll-container table {
  margin-bottom: 0; /* 2 */
}

table th,
table td {
  padding: var(--cell-padding);
}
thead tr {
  border-bottom: 1px solid var(--border);
}
tbody tr {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* Entire table row clickable */
tr[data-href] {
  cursor: pointer;
  transition: background-color .1s ease-in;
}
tr[data-href]:hover {
  background: var( --action-bg );
}
tr[data-href]:active {
  background: var( --action-bg-alt );
}
tbody tr:has(a:focus),
tbody tr:has(.focus) {
  background: var( --action-bg );
}

/*
  Order group row

  [1] Remove separator between group and first item
*/
.row-order-group      { border-bottom: 0; } /* 1 */
.row-order-group + tr { border-top: 0; }    /* 1 */

.row-order-group th {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing-small);
  font-weight: normal;
  color: var(--muted);
}

/* Empty row */
.row-empty td {
  padding: var(--spacing-large);
  vertical-align: middle;
  text-align: center;
  font-size: larger;
}
.row-empty p span {
  display: block;
}

/* Empty */
.empty {
  display: flex;
  flex-direction: column;
  min-height: 40rem;
  justify-content: center;
  text-align: center;
  color: var(--muted);
}

/* Definition lists */
dl {
  display: grid;
  grid-template-columns: [dt] min-content [dd] 1fr;
  gap: .5rem;
}
dl dt {
  grid-column: dt;
}
dl dd {
  grid-column: dd;
  margin: 0; /* Reset UA styles */
}

/* Text styles */
.text-body    { color: var(--body)    }
.text-muted,
     .muted   { color: var(--muted)   }
.text-inherit { color: inherit;       }

.text-success { color: var(--success) }
.text-warning { color: var(--warning) }
.text-error   { color: var(--error)   }

.highlight {
  text-shadow: 0 0 .25em var(--accent, gray);
}

/* Horizontal ruler */
hr {
  box-sizing: border-box;
  margin-block: var(--spacing);
  border: 0;
  border-top: var(--border-width);
  border-color: var(--border);
  border-style: solid;
}

hr.small {
  max-width: 15rem;
}

/**
  Vertical navbar

  [1] Make room for navbar
  [2] Position last element at end of container: https://stackoverflow.com/questions/33924655/position-last-flex-item-at-the-end-of-container
 */
.layout {
  margin-left: var(--navbar-width); /* 1 */
}

.navbar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--navbar-width);
  padding: 2rem 0;
  background: var(--paper);

  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */

  border-right: 1px solid var(--border);
}
.navitem {
  display: block;
  margin-right: -1px;
  padding: 1rem;
  border: 0;
  border-right: 3px solid transparent;

  text-align: center;
  text-decoration: none!important;
  white-space: nowrap;
  color: var(--muted);

  background-color: transparent;
}
.navitem:last-child {
  margin-top: auto; /* 2 */
}
.navitem:hover {
  background-color: var(--action-bg);
  color: inherit;
}
.navitem.--active {
  border-color: var(--success);
  color: inherit;
  font-weight: bold;
}
.navitem .material-icons {
  display: block;
  font-size: 2.5em;
}
.navitem ._label {
  font-size: smaller;
  letter-spacing: -0.025em;
}

/**
  Layout

  [1] Ensures that each area occupies the full height of the screen
  [2] Fixes sidebar to the left such that main content occupies remaining
      space; if there is no sidebar main content occupies the whole space.
 */
.layout {
  display: flex;
  height: 100vh; /* 1 */
}
.main {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sidebar {
  min-width: var(--sidebar-width-min);
  max-width: var(--sidebar-width-max);
  width: calc(var(--sidebar-width) + var(--resize, 0px));
  height: 100vh;
  position: sticky; top: 0; /* 2 */
  overflow-x: visible;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.header:empty,
.sidebar:empty {
  display: none;
}
.body {
  flex-grow: 1;
}
.container,
.container-medium,
.container-small {
  --max-width: var(--container-width-large);

  max-width: var(--max-width);
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--container-padding);
  box-sizing: border-box;
}
.container-medium {
  --max-width: var(--container-width-medium);
}
.container-small {
  --max-width: var(--container-width-small);
}

header,
section,
footer {
  --spacing: 2.5rem;
  margin: var(--spacing) 0;
  /* border-top: 1px solid var(--border); */
}
header {
  border: 0;
}

/* Simple layout */
.layout-float {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
}
.body {
  margin-bottom: var(--spacing-xlarge);
}

/*
  Scroll container

  [1] considers container a block and adds appropiate margin
  [2] scrolling can happen on both X and Y axis
*/
.main {
  overflow: auto;
}
.scroll-container {
  max-width: 100%;
  overflow: auto;
  margin-bottom: var(--spacing); /* 1 */
}
.scroll-container::-webkit-scrollbar-track {
  background-color: var(--bg);
}
.scroll-container::-webkit-scrollbar {
  width:  1.5rem; /* 2 */
  height: 1.5rem; /* 2 */
  background-color: transparent;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: var(--border);
}
.scroll-container:hover::-webkit-scrollbar-thumb {
  background-color: var(--muted);
}


/*
  Navtabs

  [1] Move navtab underline over container border
  [2] Account for bottom border width
 */
.navtabs {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  background: var(--bg-solid);
}
.navtabs .container {
  display: flex;
}
.navtab {
  --border: transparent;
  display: block;
  margin-bottom: -1px; /* 1 */
  padding: 2rem;
  padding-bottom: 1.5rem; /* 2 */
  border-bottom: .5rem solid var(--border);

  font-size: larger;
  font-weight: bold;
  text-decoration: none!important;
  color: inherit;
  background: transparent;
  white-space: nowrap;
}
.navtab:hover {
  background: var(--bg);
}
.navtab:active {
  background: var(--bg-alt);
}
.navtab.--active {
  --border: var(--success);
  cursor: default;
  background: revert;
}
.navtab.--disabled {
  cursor: not-allowed;
  color: var(--disabled);
  background: revert;
}

/**
  Modal

  [1] Align to right
*/
dialog {
  --negate-dialog-padding: calc( var(--dialog-padding) * -1 );

  width: var(--modal-width-medium);
  padding: var(--dialog-padding);
  border: 0;
  border-radius: var(--radius);
  background: var(--paper-alt);
}
dialog::backdrop {
  background: rgba(0,0,0,.4);
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--negate-dialog-padding);
  margin-bottom: var(--dialog-padding);
  padding: var(--dialog-padding);
  border-bottom: 1px solid var(--border);
}
.dialog-header :where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0;
}
.dialog-footer {
  display: flex;
  gap: var(--inline-spacing);
  margin-top: var(--spacing);
  margin-bottom: 0;
}

/* ---------------------------------------------------------- */

/*
  Buttons

  [1] input[type"submit"] has a higher specificity than .btn,
      so I use :where()
  [2] Remember links are inline by default
 */
 [type="submit"]:where(input), /* 1 */
 button {
   cursor: pointer;
   font: inherit;
   line-height: inherit;
 }
 [type="submit"]:where(input):disabled, /* 1 */
 button:disabled {
   cursor: not-allowed;
 }

.btn {
  --padding: var(--btn-padding);
  --negate-padding: calc( (var(--padding) + var(--border-width)) * -1 );
  --background: var(--paper);

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: var(--width);
  border-radius: var(--radius-smallest);
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--border);
  padding: var(--padding);

  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  line-height: inherit;
  color: var(--color);
  text-align: center;
  text-decoration: none!important;
  background: var(--background);
  box-shadow: var(--box-shadow);
}
.btn:hover {
  --background: var(--action-bg);
  z-index: 10;
}
.btn:active {
  --background: var(--action-bg-alt);
  z-index: 10;
}
.btn.focus {
  --background: var(--action-bg-alt);
  z-index: 10;
  outline: auto;
  outline-color: var(--action);
}
.btn:is([disabled], .--disabled) {
  cursor: not-allowed;
  box-shadow: none!important;
  background-image: none!important;

  --color: var(--disabled)!important;
  --background: var(--background)!important;
}

.--primary {
  --color: #fff;
  --background: var(--success-gradient);
  --border: var(--success);
}
.--primary:hover {
  --background: var(--success);
}

.--danger {
  --color: #fff;
  --background: var(--danger-gradient);
  --border: var(--danger);
}
.--danger:hover {
  --background: var(--danger);
}

.--muted {
  --color: var(--muted);
  --border: transparent;
  --background: var(--bg);
}
.--muted:hover {
  --color: var(--body);
  --background: var(--bg-alt);
}
.--muted:active {
  --color: var(--body);
  --background: var(--border);
}

.--text {
  --color: var(--action);
  --border: transparent;
  --background: transparent;
}
.--text:hover {
  --background: var(--action-bg);
}
.--text:active {
  --background: var(--action-bg-alt);
}

.--error {
  --color: var(--error);
}
.--error:hover {
  --background: var(--error-bg);
}


.--fake:hover,
.--fake:active {
  --background: initial;
  cursor: unset;
}
.--rounded {
  border-radius: 100rem;
}
.--compact {
  --btn-padding: var(--inline-spacing-small);
}

.negate-padding   { margin: var(--negate-padding); }
.negate-padding-b { margin-block: var(--negate-padding); }
.negate-padding-i { margin-inline: var(--negate-padding); }
.negate-padding-l { margin-left: var(--negate-padding); }
.negate-padding-r { margin-right: var(--negate-padding); }

.btn.block {
  --width: 100%;
}
.btn.min-width {
  min-width: min(25rem, 100%);
  /* max-width: 100%; */
}
.no-btn,
.link {
  background: transparent;
  border-color: transparent;
  color: unset;
}
.link {
  padding: 0;
  border: 0;
  color: var(--action);
}
.link:hover {
  text-decoration: underline;
}

/* Button group */
.btn-group,
.input-group {
  --padding: var(--btn-padding);
  --negate-padding: calc( (var(--padding) + var(--border-width)) * -1 );
  position: relative;
  display: inline-flex;
  background: var(--paper);
}
.btn-group .btn:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group .btn:not(:first-child) {
  margin-left: -1px;
}
.btn-group .btn {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tabular lining */
.col-num,
.col-nums,
.col-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}
input, select, textarea {
  font-variant-numeric: tabular-nums;
}
time, .code {
  font-variant-numeric: tabular-nums;
}

/**
  Inputs

  [ ] When two interactive elements are close to each other or share a border
      make sure the focused one shows the outline.
*/
input, select, textarea {
  --padding: var(--input-padding);
  --negate-padding: calc( (var(--padding) + var(--border-width)) * -1 );

  position: relative;
  display: inline-block;
  /* display: block; */
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size:   inherit;
  font-weight: inherit;
  color:       inherit;
  line-height: inherit;
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--border);
  border-radius: var(--radius-smallest);
  padding: var(--padding);
  background: var(--paper);
}
:is(input, select, textarea):focus {
  z-index: 10;
}

/* Number */
input[type=number] {
       appearance: textfield;
  -moz-appearance: textfield;
  text-align: right;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Tick */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: revert;
  appearance: revert;
  color: revert;
  cursor: pointer;
}

/* File */
input[type="file"]:blank {
  z-index: -1;
}
input[type="file"]::-webkit-file-upload-button {
  visibility: hidden;
  position: absolute;
}
input[type="file"]::before {
  display: inline-block;
  width: var( --icon-size );
  height: var( --icon-size );
  vertical-align: top;
  margin-inline-end: var( --inline-spacing-small );
}
[type="file"]::before {
  content: var( --file );
}
[data-filetype="zip"]::before {
  content: var( --zip );
}
[data-filetype="kml"]::before,
[data-filetype="kmz"]::before,
[data-filetype="geojson"]::before {
  content: var( --shape );
}

:is(input, select, textarea):disabled {
  cursor: not-allowed;
  user-select: none;
  pointer-events: none;

  color: var(--disabled);
  border-color: transparent;
  background-color: var(--bg-solid);
  box-shadow: none;
}

select {
  background-image: var(--chevron);
  background-size: var(--icon-size);
  background-position: center right var(--inline-spacing);
  background-repeat: no-repeat;
  padding-right: 2em;
}
select:disabled {
  background-image: none;
}

label {
  font-weight: bold;
  cursor: pointer;
}

:where(input, select, textarea).min-width {
  min-width: min(25rem, 100%);
}

/* Input group */
.input-group {
  display: flex;
  align-items: center;
  gap: var(--inline-spacing);
}
/* Input block */
.input-block {
  margin-block-end: var(--input-block-spacing);
}
.input-block label {
  display: inline-block;
  margin-bottom: var(--spacing-small);
}
.input-block :where(input, select, textarea) {
  display: block;
  width: 100%;
}


/*
  Forms
*/
.form-horizontal {
  max-width: var(--container-width-small);
  display: grid;
  grid-template-columns: [label] var(--form-indent) [input] 1fr;
  align-items: baseline;
  gap: 0 var(--spacing);
}
.form-horizontal label {
  grid-column: label;
}
.form-horizontal :where(input, select, textarea, .input-group) {
  grid-column: input;
  margin-block-end: var(--spacing);
}
.form-horizontal :where([type="checkbox"], [type="radio"]) {
  justify-self: flex-start;
  align-self: center;

  width: var(--icon-size);
  height: var(--icon-size);

  -webkit-appearance: revert;
  appearance: revert;
}
.form-horizontal .--row {
  grid-column: 1 / -1;
}
.form-horizontal .--footer {
  grid-column: 1 / -1;
  margin-block-start: var( --spacing );
}

.form-horizontal .input-group .select2-container--default {
  flex-grow: 1;
}

/* Form actions */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
}
.change .actions {
  display: flex;
}

/*
  Django built-in error list (<ul>)
  Has .nonfield when there is a form-level error
 */
.errorlist {
  padding-inline-start: var( --icon-size );
  color: var( --error );
}
.errorlist li::marker {
  content: '❗️';
}
.errorlist.nonfield {
  padding: var(--spacing-small);
  padding-inline-start: calc( var(--spacing-small) + var(--icon-size) );
  border-radius: var(--radius-smallest);

  color: revert;
  background: var(--error-bg);
}

.errorlist + :where(input, select, textarea) {
  border-color: var( --error );
}

.form-horizontal .errorlist {
  margin-block: 0 var( --spacing-small );
}
/*
  Django built-in help text

  br + span.helptext after input for singular text
  br + span.helptext > ul after input for multiple text

  [1] bring helptext underneath input. assumes margin bottom from input
  [2] sometimes a br appears next to text and messes with [1]
 */
.helptext {
  font-size: smaller;
}

.form-horizontal .helptext {
  position: relative;
  bottom: var( --spacing );           /* 1 */
  margin-block-end: var( --spacing ); /* 1 */
  display: block;
}
.form-horizontal br + .helptext {
  bottom: 0; /* 2 */
}
.form-horizontal .helptext ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
.form-horizontal .helptext li:only-child {
  list-style: none;
}
/* Form as p */
form p :where(input, select, textarea, [type="submit"]),
form textarea {
  width: 100%;
}


/* ---------------------------------------------------------- */

/**
  Panel
 */
.panel {
  padding: 2.5rem;
  border-top: 1px solid var(--border);
}
.panel:first-child {
  border-top: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing);
}
.panel-title {
  margin: 0;
  font-size: inherit;
}

.panel.--raised {
  background: var(--bg);
  border-radius: var(--radius);
  border: 0;
}

/* ---------------------------------------------------------- */

/* Order status */
/* 1. break line only if necessary */
.order-status {
  display: inline-block; /* 1 */
  color: var(--color, inherit);
}
.order-status::before {
  content: "● ";
  color: var(--marker-color, var(--color))
}
[data-status="100"] {
  --marker-color: var(--order-status-new);
}
[data-status="110"],
[data-status="111"] {
  --marker-color: var(--order-status-offer);
}
[data-status="210"],
[data-status="220"],
[data-status="225"] {
  --marker-color: var(--order-status-sampling);
}
[data-status="230"],
[data-status="310"] {
  --marker-color: var(--order-status-analysis);
}
[data-status="420"] {
  --marker-color: var(--order-status-complete);
}
[data-status="410"],
[data-status="430"] {
  --marker-color: var(--order-status-rejected);
}

/* Parcel depth */
[data-sample-depth="deep"],
[data-sample-depth="both"] {
  text-decoration: underline;
  text-decoration-color: var(--border);
}
[data-sample-depth="both"] {
  text-decoration-style: double;
}
/* [data-sample-depth="shallow"]::after {
  content: ' ⬒';
} */
/* [data-sample-depth="deep"]::after {
  content: ' ⬓';
}
[data-sample-depth="both"]::after {
  content: ' ◽️';
} */


.label {
  --color: var(--muted);

  font-size: smaller;
  padding: .25em var(--inline-spacing-small);
  border: 1px solid;
  border-radius: var(--radius-smallest);
  line-height: 1;
  color: var(--color);
}
[data-prelevator-type="intern"] {

}
[data-prelevator-type="extern"] {
  border-style: dashed;
}


.underline-dashed {
  text-decoration: underline;
  text-decoration-thickness: 0.15em;
  text-decoration-color: var(--warning-muted);
  text-decoration-style: dashed;
  text-decoration-skip-ink: none;
}


/*
  Order package
 */
.package-options {
  /* grid-template-columns: [dt] 1fr [dd] auto;
  gap: var(--spacing); */
  grid: initial;
  display: flow-root;
  font-variant-numeric: tabular-nums;
}
.package-options :where(dt, dd):not(:last-of-type) {
  margin-bottom: var(--spacing);
}
.package-options dt {
  float: left;
  clear: left;
}
.package-options dd {
  /* text-align: right; */
  float: right
}

/*
  Order snippet
*/
.order-snippet {
  box-sizing: border-box;
  max-width: 100%;
  width: 40rem;
  margin-block: var(--spacing);
  margin-inline: auto;
  padding: var(--inline-spacing);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  text-align: left;
}

/**
 Timeline

 [1]
*/
.timeline {
  --timeline-color: var(--success);
  --marker-color: var(--timeline-color);

  list-style: none;
  padding: 0;
}
.timeline li {
  position: relative;
  padding: 1rem;
  padding-left: 4rem;
}
.timeline li::before,
.timeline li::after {
  content: '';
  position: absolute;
}
.timeline li::before {
  top: 0;
  left: 1.875rem;
  bottom: 0;
  width: .25rem;
  background: var(--timeline-color);
}
.timeline li:first-child::before {
  top: 1.75rem;
}
.timeline li:last-child::before {
  bottom: auto;
  height: 1.75rem;
}
.timeline li:first-child:last-child::before {
  height: 0;
}
.timeline li::after {
  top: 1.75rem;
  left: 1.5rem;

  width: 1rem;
  height: 1rem;
  border-radius: .5rem;
  background: var(--timeline-color);
}

.timeline li time {
  color: var(--muted);
}

.timeline .--order {
  display: block;
  margin: -1rem;
  margin-left: -4rem;
  padding: 1rem;
  padding-left: 4rem;
  border-radius: var(--radius-small);
  text-decoration: none;
  color: inherit;
}
.timeline .--order:hover {
  background: var(--bg);
}

.timeline .--order .--title {
  font-weight: bold;
}

/**
  Message
  A persistent block that communicates important information. E.g.:
  - Form validation
  - Caution performing destructive actions
  - Available actions
 */
.messages {
  /* list-style: none; */
  list-style-position: inside;
  padding-inline-start: 0;
}
.messages li,
.message {
  --color: var(--body);

  margin-bottom: var(--spacing);
  padding: 2rem;

  border-radius: var(--radius-small);
  color: var(--color);
  background: var(--bg);
}
.messages li::marker {
  content: var(--marker);
  font-size: var(--icon-size);
  line-height: 1;
}
.messages .success,
.--success {
  --marker: '👍';
  --bg: var(--success-bg-alt);
}
.messages .warning,
.--warning {
  --marker: '⚠️';
  --bg: var(--warning-bg);
}
.messages .info,
.--info {
  --marker: 'ℹ️';
  --bg: var(--info-bg);
}
.messages .error,
.--error {
  --marker: '❗️';
  --bg: var(--error-bg);
}

/*
  Parcel shape

  [1] Parcel shapes have different sizes and you don't want the resize
      to affect the stroke width
 */
.shape {
  --stroke: var(--body);
  --stroke-width: 1px;
  --fill: transparent;

  display: inline-block;
  vertical-align: middle;
  width: 4em;
  height: 4em;
}
.shape svg {
  width: 4em;
  height: 4em;
}
.shape rect,
.shape path {
  stroke: var(--stroke);
  stroke-width: var(--stroke-width);
  fill: var(--fill);

}
.shape path {
  vector-effect: non-scaling-stroke; /* 1 */
}

/* Color differently if row is selected */
tr:has(.check-parcel:checked) {
  background: var(--success-bg);
}
tr:has(.check-parcel:checked) .shape {
  --stroke: var(--success);
  --fill: var(--success-bg-alt);
}

/*
  Pagination
 */
.pagination {
  /* margin-block-start: var( --spacing-large ); */
  display: inline-flex;
  align-items: baseline;
  gap: -1px;
}
.pagination .btn {
  margin-inline-start: calc( var(--border-width) * -1 );
  border-radius: 0;
}
.pagination .btn:first-child {
  border-top-left-radius: var(--radius-smallest);
  border-bottom-left-radius: var(--radius-smallest);
}
.pagination .btn:last-child {
  border-top-right-radius: var(--radius-smallest);
  border-bottom-right-radius: var(--radius-smallest);
}

/*
  Tooltips - Tippy.js (https://atomiks.github.io/tippyjs)

  [1] Non-interactive elements will change cursor and cue users of the
      tooltip. Interactive elements already do that and will simply override
      this property.
  [2] Disabled elements are not affected; They will not trigger a tooltip.
      https://atomiks.github.io/tippyjs/v6/constructor/#disabled-elements
 */
@layer components {
  [data-tippy-content] {
    cursor: help; /* 1, 2 */
  }
}

/*
  Menu (using Tippy.js)
  (!) assumes <dialog> element
*/
.menu,
.tippy-box[data-theme~='menu'] {
  --menu-width: 32rem;
  --menu-padding: var(--inline-spacing-large);

  z-index: 200;
  width: var(--menu-width);
  padding: var(--menu-padding);
  border-radius: var(--radius-small);

  background: var(--paper-alt, var(--paper));
  box-shadow: var(--menu-shadow);
}
.tippy-box[data-theme~='menu'] {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.tippy-box[data-theme~='menu'] .tippy-content {
  padding: 0;
}
.menu-small {
  --menu-width: 20rem;
}

.menu-item {
  all: unset;
  display: block;
  padding: var(--inline-spacing) var(--inline-spacing-large);
  margin: 0 calc( var(--inline-spacing-large) * -1 );
}
.menu-item:hover,
.menu-item:focus {
  text-decoration: none;
}
button.menu-item {
  width: 100%;
}

.menu-hr,
.menu-separator {
  margin-block: var(--spacing-small);
}

/*
  Interactive
  Avoids duplicating hover/active behavior on every single interactive elem
*/
.interactive {
  cursor: pointer;
}
.interactive:hover  { background: var(--action-bg)     }
.interactive:active { background: var(--action-bg-alt) }

/*
  Display on hover
  [1] Assummes that there is a child .onhover, initially hidden
  [2] Shown on hover
  [3] Hides item that immediately follows, i.e. label/icon swapping on hover
  [4] Button trigger menu and mouse leaves parent
  [5] Same thing but with visibility instead of display
*/
.hover       .onhover     { display: none  } /* 1 */
.hover:hover .onhover     { display: unset } /* 2 */
.hover:hover .onhover + * { display: none  } /* 3 */
.onhover.focus            { display: unset } /* 4 */

.hover       .onhover-visibility     { visibility: hidden } /* 1, 5 */
.hover:hover .onhover-visibility     { visibility: unset  } /* 2, 5 */
.hover:hover .onhover-visibility + * { display: none } /* 3, 5 */
.onhover-visibility.focus            { visibility: unset  } /* 4 */

/*
  Display on change (forms)
  [1] Assummes that there is a child .onchange, initially hidden
  [2] Shown on change
  [3] Hides item that immediately follows. Enables toggling between 2 elements.
*/
        .onchange     { display: none;   } /* 1 */
.change .onchange     { display: revert; } /* 2 */
.change .onchange + * { display: none;   } /* 3 */

/*
  Details/Summary
  [1] normalize.css override normal display
*/
summary {
  display: revert; /* 1 */
  cursor: pointer;
  user-select: none;
}

/* Stack */
.stack {
  position: relative;
  display: inline-grid;

  .input-block & {
    display: grid;
  }
}
.stack > * {
  grid-area: 1 / 1; /* 1 */
}

/* ---------------------------------------------------------- */

.icon,
.icon img,
.icon svg,
.icon picture {
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  vertical-align: top;
}
.icon::before {
  content: var(--icon);
}
.icon.file {
  --icon: var(--file);
}
.material-icons {
  vertical-align: top;
  font-size: var(--icon-size);
}
.emoji {
  display: inline-block;
  font-size: var(--icon-size);
  line-height: 1;
  vertical-align: top;
}

/* ---------------------------------------------------------- */

.--selected {
  --bg: var(--action-bg);
}
.flex
.min-content {
  width: min-content;
}

.flex,
.justify {
  --input-block-spacing: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  gap: var(--spacing) 1rem;
  align-items: baseline;
}
.inline-flex {
  gap: .5rem;
  align-items: baseline;
}
.justify {
  justify-content: space-between;
}
.gap {
  gap: 1rem;
  gap: var(--spacing) 1rem;
}

.align-items-bottom {
  align-items: flex-end;
}

.na::before {
  content: '—';
  color: var(--disabled);
}

/*
  Utilities
  Using naming conventions of Tailwind.css
 */

/* Display */
.inline        { display: inline; }
.inline-block  { display: inline-block; }
.block         { display: block; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.hidden        { display: none; }

/* Grid */
.col-span-all      { grid-column: 1 / -1; }
.row-span-all      { grid-row:    1 / -1; }

/* Flex */
.flex-1        { flex: 1 1 0%; }
.flex-auto     { flex: 1 1 auto; }
.flex-initial  { flex: 0 1 auto; }
.flex-none     { flex: none; }
.flex-column   { flex-direction: column; }

.grow, .grow-1 { flex-grow: 1; }
.shrink-0      { flex-shrink: 0; }

/* Floats */
.float-right { float: right; }
.float-left  { float: left; }

/* Margins */
.m-auto  { margin: auto; }
.mi-auto { margin-inline: auto; }
.mk-auto { margin-block: auto; }
.mt-auto { margin-top: auto; }
.mr-auto { margin-right: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }

.m  { margin: var(--spacing); }
.mi { margin-inline: var(--spacing); }
.mk { margin-block: var(--spacing); }
.mt { margin-top: var(--spacing); }
.mr { margin-right: var(--spacing); }
.mb { margin-bottom: var(--spacing); }
.ml { margin-left: var(--spacing); }

.m-small  { margin: var(--spacing-small); }
.mi-small { margin-inline: var(--spacing-small); }
.mk-small { margin-block: var(--spacing-small); }
.mt-small { margin-top: var(--spacing-small); }
.mr-small { margin-right: var(--spacing-small); }
.mb-small { margin-bottom: var(--spacing-small); }
.ml-small { margin-left: var(--spacing-small); }

.m-large  { margin: var(--spacing-large); }
.mi-large { margin-inline: var(--spacing-large); }
.mk-large { margin-block: var(--spacing-large); }
.mt-large { margin-top: var(--spacing-large); }
.mr-large { margin-right: var(--spacing-large); }
.mb-large { margin-bottom: var(--spacing-large); }
.ml-large { margin-left: var(--spacing-large); }

.m-0  { margin: 0; }
.mi-0 { margin-inline: 0; }
.mk-0 { margin-block: 0; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }

/* Paddings */
.p-0  { padding: 0; }
.pl-0 { padding-left: 0; }

/* Borders */
.border-top      { border-top:    1px solid var(--border); }
.border-right    { border-right:  1px solid var(--border); }
.border-left     { border-left:   1px solid var(--border); }
.border-bottom   { border-bottom: 1px solid var(--border); }

.border-top-0    { border-top:    0; }
.border-right-0  { border-right:  0; }
.border-left-0   { border-left:   0; }
.border-bottom-0 { border-bottom: 0; }

/* Text align */
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* Vertical align */
.v-middle    { vertical-align: middle; }
.v-baseline  { vertical-align: baseline; }
.v-inherit   { vertical-align: inherit; }

/* Font style */
.regular { font-style: normal; }
.italic  { font-style: italic; }

/* Font weight */
.weight-normal { font-weight: normal; }
.medium,
.weight-medium { font-weight: 500; }
.semibold,
.weight-semibold { font-weight: 600; }

.bold,
.weight-bold   { font-weight: bold; }
.bolder,
.weight-bolder { font-weight: bolder; }

/* Font stretch */
.narrow        { font-variation-settings: "wdth" 90; }
.condensed     { font-variation-settings: "wdth" 80; }

/* Font size */
.larger  { font-size: larger; }
.smaller { font-size: smaller; }
.small   { font-size: small; }

/* Clip */
.clip {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.no-br,
.no-wrap {
  white-space: nowrap;
}
.break,
.break-all {
  word-break: break-all;
}

.pre          { white-space: pre;}
.pre-wrap     { white-space: pre-wrap;}
.pre-line     { white-space: pre-line; }

/* Hide */
  .hide        { display: none; }
@media (max-width: 599px) {
  .hide-m-only { display: none; }
}
@media (min-width: 600px) {
  .hide-t      { display: none; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .hide-t-only { display: none; }
}
@media (min-width: 1200px) {
  .hide-d      { display: none; }
}


/*
  Specific components
*/

#results_template .btn-group {
  vertical-align: var(--v-icon);
}

/* Parcel table */
/* Hidden columns */
.col-id { display: none; }

/* OGOR column for orders that were issued from OGOR */
.col-ogor {
  white-space: nowrap;
  width: 0;
  padding: 0;
  color: var(--muted);
}
.col-ogor .icon {
  /* margin: var(--negate-cell-padding); */
  padding: var(--cell-padding);
  opacity: 0.5;
}
tr[data-href]:hover .col-ogor { color: var(--body); }
tr[data-href]:hover .col-ogor .icon { opacity: 1; }

/* Columns that don't wrap */
.col-ogor,
.col-status,
.col-ref,
.col-block,
.col-parcel-no,
.col-area,
.col-yield,
.col-samples,
.col-icon {
  white-space: nowrap;
}
.col-date {
  width: 10ch;
}

/* Min-size columns */
.col-ogor,
.col-shape,
.col-state,
.col-status,
.col-delete,
.col-icon,
.col-min {
  width: 0; /* Basically width: min-content; */
}
.col-block,
.col-parcel-no,
.col-area,
.col-yield {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Inputs */
.col-block input,
.col-parcel-no input,
.col-area input,
.col-yield input {
  box-sizing: content-box; /* normally border-box so you can stretch input to fill row */
  min-width: 4ch;
  width: var(--length, 0);
  max-width: 100%;
  text-align: right;
}
.col-samples input {
  margin: unset;
}
/* Order table */
.col-order {
  width: 0;
  white-space: nowrap;
}
/* Other rules */
.col-ref {
  max-width: 20rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.col-crop span {
  max-width: 100%;
}
.col-area {
  width: 6ch; /* Assume 5 digits + decimal separator */
}
.col-samples {
  text-align: center;
  width: 4ch; /* Assume 2 digits */
}
.col-icon,
.col-delete {
  text-align: center;
}

/* Filters */
/* [1] Instead of using --input-padding use --cell-padding, then negate it.
       This makes the input cover the entire cell.
 */
.parcels_table .select2-container--default,
.parcels_table select {
  --padding: var(--cell-padding); /* 1 */
  margin: var(--negate-padding);
}
.parcels_table .select2-container--default .select2-selection--single,
.parcels_table select {
  border-color: transparent;
  border-radius: 0;
  background-clip: padding-box;
}
.parcels_table .select2-container--default .select2-selection--single {
  background-color: var(--paper);
}
.parcels_table tfoot {
  vertical-align: top;
}

.parcels_table th, .parcels_table td, .select2-dropdown{
  max-width: 24rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.parcels_form th, .parcels_form td, .select2-dropdown {
  max-width: 24rem;
}

.parcels_form td .select2-selection {
  max-width: 24rem;
}

.parcels_form :where(input, select) {
  margin: var(--negate-padding);
  border-color: transparent;
  border-radius: 0;
  background-clip: padding-box;
}


.parcels_form .col-delete {
  accent-color: var(--error);
}
.parcels_form .col-delete label {
  display: inline-block;
  margin: var(--negate-padding);
}
.parcels_form .col-delete input {
  margin: 0;
}
/* .parcels_form .col-delete:has(:checked), */
.parcels_form .checked .col-delete {
  background: repeating-linear-gradient(
    -45deg,
    var(--error-bg),
    var(--error-bg) 1rem,
    transparent 1rem,
    transparent 2rem
  );
}
/* .parcels_form .col-delete:has(:checked) label, */
.parcels_form .checked .col-delete label {
  visibility: visible;
}

/* Prelevators table */
.prelevators_table :where(.prelevator-inactive):not(:hover) {
  --action: var(--muted);
  color: var(--muted);
}

/*
  Route map
 */
.route-map {
  aspect-ratio: 1 / 1;

}
dialog .route-map {
  margin: var(--negate-dialog-padding);
}

/*
  Views specific rules
 */
.view_login .container-small {
  width: 40rem;
}

.view_parcels_order_list .header,
.view_commercial_parcels_order_list .header,
.view_prelevate_parcels_order_list .header,
.view_results_parcels_order_list .header {
  padding: var(--spacing) 0;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  border-bottom: 1px solid var(--border);
}

.view_parcels_edit .container {
  --max-width: auto;
}
.view_parcels_add .container {
  --max-width: auto;
}
.view_commercial_parcels_order_list tfoot {
  border: .375rem double var(--border-solid);
}
.view_settings .container {
  --max-width: var(--container-width-small);
}

.view_settings input {
  text-align: unset;
}

.view_action_by_token {
  text-align: center;
}

.view_action_by_token .logo {
  max-width: 20rem;
  margin-inline: auto;
}

#sampling-feedback-snippet::before { content: open-quote;  }
#sampling-feedback-snippet::after  { content: close-quote; }

.danger-zone {
  --accent: var(--error);
  --accent-bg: var(--error-bg);

  box-sizing: border-box;
  margin-top: var(--spacing-large);
  padding: var(--spacing);
  border: 1px solid var(--accent);
  border-radius: var(--radius-small);
  background: var(--accent-bg);
  color: var(--body);
}

.ogor-zone {
  --accent: var(--success);
  --accent-bg: var(--success-bg);

  box-sizing: border-box;
  margin-top: var(--spacing-large);
  padding: var(--spacing);
  border: 1px solid var(--accent);
  border-radius: var(--radius-small);
  background: var(--accent-bg);
  color: var(--body);
}

.while-resizing {
  user-select: none;
}
.sidebar:empty + .resize-controller { display: none; }
.resize-controller {
  cursor: col-resize;
  position: relative;
  z-index: 1000;
  overflow: visible;
  width: .5rem;
  margin-inline: -.25rem;
  background-color: transparent;
  transition: background-color .1s ease-in;
}
.resize-controller:hover {
  background-color: var(--action-muted);
}
.resize-controller:active {
  background-color: var(--action);
}

.attention-orange {
  color:orange;
}