@charset "utf-8";
/* CSS Document */

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* BASE  */

/* colors */

:root {

  --black: #202020;

  --clf: #0085b2;
  --clf-dark: #00698d;

  --allright: #10a432;
  --allright-bg: #f2fdf5;
  --warning: darkorange;
  --warning-bg: #fffaf2;
  --gonebad: darkred;
  --gonebad-bg: #fff5f6;

  --btn-bg: #f6f7f7;
  --btn-bg-hover: #f1f1f2;

  --error-border: #ff7700;
  --error-text: #ff5700;

  --accent: var(--clf);
  --accent-hover: var(--clf-dark);

  --base-color: var(--black);
  --base-color: var(--black);

  --slide-out-panel-width: 320px;
  --slide-out-panel-import-width: 640px;

  --sort-up: '⭡';
  --sort-down: '⭣';
  --sort-idle: '⭥';

  --menu-down: ' ▾';

}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* layout */

.site-container {
  padding-left: 35px;
  padding-right: 35px
}

.in-container {
  max-width: 1610px;
  margin-left: auto;
  margin-right: auto
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* typography */

:root {

  --xs-copy: 11px;
  --s-copy: 12px;
  --m-copy: 14px;
  --l-copy: 16px;
  --xl-copy: 18px;
  --xxl-copy: 24px;

  --xs-data: 11px;
  --xxs-label: 10px;

  --xs-title: 16px;
  --s-title: 18px;
  --m-title: 21px;
  --l-title: 24px;
  --xl-title: 30px;
  --xxl-title: 36px;

}

.xs-copy {
  font-size: var(--xs-copy);
  line-height: 1.25;
  letter-spacing: .033em
}

.s-copy {
  font-size: var(--s-copy);
  line-height: 1.25;
  letter-spacing: .012em
}

.m-copy {
  font-size: var(--m-copy);
  line-height: 1.25;
  letter-spacing: normal
}

.l-copy {
  font-size: var(--l-copy);
  line-height: 1.25;
  letter-spacing: normal
}

.xl-copy {
  font-size: var(--xl-copy);
  line-height: 1.25;
  letter-spacing: normal
}

.xxl-copy {
  font-size: var(--xxl-copy);
  line-height: 1.25;
  letter-spacing: normal
}

.xs-data {
  font-size: var(--xs-copy);
  line-height: 1
}

small,
.xxs-label {
  font-size: var(--xxs-label);
  line-height: 1.2;
  letter-spacing: .066em
}

h6,
.xs-title {
  margin: 0;
  letter-spacing: normal;
  font-size: var(--xs-title);
  line-height: 1.125
}

h5,
.s-title {
  margin: 0;
  letter-spacing: normal;
  font-size: var(--s-title);
  line-height: 1.16
}

h4,
.m-title {
  margin: 0;
  letter-spacing: normal;
  font-size: var(--m-title);
  line-height: 1.286
}

h3,
.l-title {
  margin: 0;
  letter-spacing: normal;
  font-size: var(--l-title);
  line-height: 1.25
}

h2,
.xl-title {
  margin: 0;
  letter-spacing: normal;
  font-size: var(--xl-title);
  line-height: 1.2
}

h1,
.xxl-title {
  margin: 0;
  letter-spacing: normal;
  font-size: var(--xxl-title);
  line-height: 1.25
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* general elements */

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: var(--m-copy)
}

html {
  scroll-behavior: smooth
}

body {
  background: #fff;
  color: #000
}

body.overflow_hidden {
  overflow: hidden;
}

:not(.btn-img) svg {
  fill: currentcolor
}

img {
  max-width: 100%;
  height: auto
}

figure {
  display: block;
  margin: 0;
  line-height: 0;
  position: relative;
  overflow: hidden
}

figure img {
  width: 100%;
  object-fit: cover;
  object-position: center center
}

p {
  margin: 0 0 1em 0
}

hr {
  color: currentColor;
  height: 1px;
  border: none;
  background: currentColor;
  clear: both;
  margin: 1.5em 0
}

blockquote {
  font-style: italic;
  margin: 1em 0 1.5em 1.5em
}

pre,
.pre {
  background-color: var(--grey-100);
  border-radius: 4px;
  padding: 0 6px;
  font-family: monospace
}

pre {
  padding: .5em
}

iframe {
  max-width: 100%;
  border: none;
  outline: none
}

table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 3px;
  border: solid 1px #0004
}

table :is(td, th) {
  padding: 4px
}

table:not(.report-check) tr:hover td {
  background: #0001
}

table:not(.report-check) th {
  font-size: var(--s-copy);
  letter-spacing: .033em;
  font-weight: 600;
  opacity: .8
}

table:not(.report-check) tr:first-child th {
  border-bottom: solid 1px #0002
}

.show-on-tr-hover {
  visibility: hidden
}

tr:hover .show-on-tr-hover {
  visibility: visible
}

/* Modifiers */
.serif {
  font-family: serif
}

.underline {
  text-decoration: underline
}

.italic {
  font-style: italic
}

.light {
  font-weight: 300
}

.regular {
  font-weight: 400
}

.medium {
  font-weight: 500
}

.demi,
.semibold {
  font-weight: 600
}

.strong,
.bold {
  font-weight: 700
}

.uppercase {
  text-transform: uppercase
}

.hidden {
  display: none
}

.list-style-type-none {
  list-style-type: none;
  padding: 0;
  margin: 0
}

.list-style-type-none li {
  margin: 0
}

.row {
  display: flex;
  justify-content: space-between
}

.flex-wrap {
  flex-wrap: wrap;
}

.col {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.s-gap {
  gap: 8px
}

.m-gap {
  gap: 12px
}

.l-gap {
  gap: 18px
}

.align-items-center {
  align-items: center
}

.align-items-baseline {
  align-items: baseline
}

.justify-content-start {
  justify-content: flex-start
}

.justify-content-end {
  justify-content: flex-end
}

.centered {
  margin-left: auto;
  margin-right: auto
}

.text-align-center {
  text-align: center
}

.text-align-right {
  text-align: right
}

.text-align-left {
  text-align: left
}

.disabled {
  opacity: .35;
  filter: grayscale(100);
  cursor: default
}

a.disabled:hover {
  cursor: default
}

figure.disabled {
  opacity: 1
}

.btn[disabled] {
  opacity: .3;
  filter: grayscale(100);
  cursor: not-allowed !important;
}

.inline {
  display: inline;
  margin-top: 0;
  margin-bottom: 0
}

.sticky {
  position: sticky;
  top: var(--top);
  z-index: 999
}

.relative {
  position: relative
}

.accent {
  color: var(--accent)
}

.danger {
  color: var(--error-text)
}

.warning {
  color: var(--warning)
}

.success {
  color: var(--allright)
}

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

tr.color-disabled td a {
  opacity: .6;
}

tr.color-disabled td {
  color: #0007;
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* interactive elements */

:focus {
  outline: dotted 2px var(--accent-hover);
  outline-offset: 1px
}

:is(a, button, input[type="button"], input[type="submit"], select):not(.disabled, [disabled]) {
  cursor: pointer
}

:is(a, button, input[type="button"], input[type="submit"], select):is(.disabled, [disabled], .readonly, [readonly], .inert, [inert]) {
  cursor: default
}

a {
  text-decoration: none;
  color: var(--accent)
}

a:hover {
  text-decoration: underline;
  text-decoration-style: dashed;
  color: var(--accent-hover)
}

a.hiddenlink,
.hiddenlink {
  color: currentColor
}

a.hiddenlink:hover,
.hiddenlink:hover {
  color: inherit;
  text-decoration: none
}

a.opacitylink,
.opacitylink {
  opacity: .70
}

a.opacitylink:hover,
.opacitylink:hover {
  opacity: 1
}

a.underlinelink,
.underlinelink {
  text-decoration: underline
}

a.underlinelink:hover,
.underlinelink:hover {
  text-decoration-style: dashed
}

a.disabled {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration-line: none !important;
}

a.disabled:hover {
  cursor: default !important;
}

/* Input fields and other form things */

input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="button"], [type="date"], [type="number"], [type="tel"], [type="url"], [type="checkbox"], [type="submit"]),
.btn,
button,
select,
textarea {
  color: currentColor;
  border-radius: 3px;
  border: solid 1px currentColor;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit
}

input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="button"], [type="date"], [type="number"], [type="tel"], [type="url"], [type="checkbox"], [type="submit"]),
.btn,
button,
select {
  line-height: 2em;
  padding: 0 0.66em
}

input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="checkbox"], [type="date"], [type="number"], [type="tel"], [type="url"]),
select,
textarea {
  width: 100%;
  max-width: 480px;
  min-width: 140px
}

input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="checkbox"], [type="date"], [type="number"], [type="tel"], [type="url"], [type="submit"], [type="button"]):hover,
.btn:hover,
button:hover,
select:hover,
textarea:hover {
  border-color: var(--accent-hover)
}

textarea {
  padding: .33em .66em;
  width: 100% !important;
  max-width: 100%;
  max-height: 21.3em;
  min-width: 100%;
  min-height: 7.1em;
}

select {
  appearance: none;
  background-color: #fff;
  padding-right: 24px;
  background-position: right center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxOSIgdmlld0JveD0iMCAwIDI0IDE5Ij4NCiAgPHRleHQgZm9udC1zaXplPSIxNCI+PHRzcGFuIHg9IjUuOTcxIiB5PSIxNSI+4pa+PC90c3Bhbj48L3RleHQ+DQo8L3N2Zz4NCg==")
}

input[type="date"] {
  padding-right: .25em
}

input[type="radio"] {
  width: 1.5em;
  height: 1.5em;
  opacity: .6;
  margin: 0 .4em .5em 0;
  vertical-align: middle;
  cursor: pointer;
  font-size: inherit
}

:hover>input[type="radio"] {
  opacity: 1
}

input[type="radio"]:checked {
  color: var(--accent);
  opacity: 1
}

.option-group {
  gap: .5em
}

.option-group .option-element {
  display: flex;
  align-items: center;
  gap: .5em;
  position: relative;
  cursor: pointer
}

.option-group .option-element .option-label {
  opacity: .7;
  margin-top: -3px
}

.option-group .option-element:hover .option-label {
  opacity: 1
}

.option-group .option-element input:checked+.option-label {
  opacity: 1
}

.option-group .option-element input[type="radio"] {
  appearance: none;
  border: solid 1px #000;
  border-radius: 50%;
  margin: 0
}

.option-group .option-element input[type="radio"]:checked {
  border: solid 2px var(--accent)
}

.option-group .option-element input[type="radio"]:checked+.option-label::before {
  content: '';
  display: block;
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--accent);
  top: 0;
  left: 0;
  border: solid 5px transparent;
  background-clip: content-box;
  box-sizing: border-box
}

:is(input, select, textarea):is([disabled], .disabled, [readonly], .readonly, [inert], .inert) {
  background-color: #0000000d;
  border-color: #00000033;
  color: #0008
}

:is(input, select, textarea):is([disabled], .disabled, [readonly], .readonly, [inert], .inert):hover {
  border-color: #00000033
}

.form-row {
  margin-bottom: 1.3em;
  position: relative;
}

.form-row.submit {
  margin-top: 2em
}

.the-label {
  line-height: 20px;
  font-weight: 600;
  opacity: .9
}

.field-info {
  line-height: 15px;
  display: block;
  margin: 0 0 7px 0;
  font-size: var(--xs-copy);
  letter-spacing: .033em
}

.error-info {
  line-height: 15px;
  display: block;
  margin: 0 0 7px 0;
  font-size: var(--xs-copy);
  letter-spacing: .033em;
  color: var(--error-text)
}

ul.error-info {
  padding: 0 0 0 1em;
  list-style-type: '🗙'
}

ul.error-info li {
  margin-bottom: 2px;
  padding-left: 2px
}

.field-notes {
  line-height: 16px;
  display: block;
  margin: 7px 0 0 0;
  font-size: var(--s-copy);
  letter-spacing: .012em
}

.the-label+ :is(input, select, textarea, .option-group, .form-control-wrap) {
  margin-top: .5em
}

/* errors */
.form-row.error::before {
  content: '';
  position: absolute;
  display: block;
  top: .3em;
  bottom: 0;
  width: 2px;
  left: -10px;
  background-color: var(--error-border)
}

.form-row.error input:is([type="text"], [type="email"], [type="password"]),
.form-row.error textarea {
  border-color: var(--error-border)
}

.form-row.error .field-info {
  margin-bottom: 2px
}

.form-row.error :focus {
  outline-color: var(--error-border)
}

/* leading e trailing */
.form-control-wrap {
  display: block;
  position: relative;
  max-width: 480px;
  min-width: 140px
}

.form-control-wrap[data-leading]::before,
.form-control-wrap[data-trailing]::after {
  display: block;
  position: absolute;
  min-width: 30px;
  padding: 0 .5em;
  line-height: 2em;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  top: 1px;
  bottom: 1px;
  text-align: center;
  box-sizing: border-box
}

.form-control-wrap[data-leading]::before {
  content: attr(data-leading);
  left: 0
}

.form-control-wrap[data-trailing]::after {
  content: attr(data-trailing);
  right: 0
}

.form-control-wrap[data-trailing]:has(input[disabled])::before,
.form-control-wrap[data-trailing]:has(input[disabled])::after {
  opacity: .5
}

.form-control-wrap[data-leading] input {
  padding-left: 30px
}

.form-control-wrap[data-leading] button {
  padding-left: 30px
}

.form-control-wrap[data-trailing] input {
  padding-right: 30px
}

.form-control-wrap[data-trailing] button {
  padding-right: 30px
}

.form-control-wrap[data-trailing="Months"] input {
  padding-right: 58px
}

.form-control-wrap[data-trailing="Mesi"] input {
  padding-right: 42px
}

.form-control-wrap[data-leading="download"]::before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cg fill='%23F0F0F0'%3E%3Cpath d='m19,22H5c-1.654,0-3-1.346-3-3v-4h2v4c0,.551.449,1,1,1h14c.551,0,1-.449,1-1v-4h2v4c0,1.654-1.346,3-3,3Z' stroke-width='0' fill='%23F0F0F0'%3E%3C/path%3E%3Cpolygon points='17 8.586 13 12.586 13 2 11 2 11 12.586 7 8.586 5.586 10 12 16.414 18.414 10 17 8.586' fill='%23F0F0F0' stroke-width='0'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
}

.form-control-wrap[data-trailing="search"]::after {
  content: '';
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48cGF0aCBkPSJNMTEgMTIgNyA3LjhhNCA0IDAgMCAxLTEuMi42IDQgNCAwIDAgMS0xLjQuMyA0LjIgNC4yIDAgMCAxLTMtMS4zIDQuMiA0LjIgMCAwIDEtMS4zLTMgNC4yIDQuMiAwIDAgMSAxLjMtMy4xIDQuMiA0LjIgMCAwIDEgMy0xLjMgNC4yIDQuMiAwIDAgMSAzLjEgMS4zIDQuMiA0LjIgMCAwIDEgMS4zIDMgNCA0IDAgMCAxLS4zIDEuNEE0IDQgMCAwIDEgNy44IDdsNC4yIDRaTTQuNCA3LjNhMi45IDIuOSAwIDAgMCAyLjItLjggMi45IDIuOSAwIDAgMCAuOC0yLjIgMi45IDIuOSAwIDAgMC0uOC0yIDIuOSAyLjkgMCAwIDAtMi4yLTEgMi45IDIuOSAwIDAgMC0yIDEgMi45IDIuOSAwIDAgMC0xIDIgMi45IDIuOSAwIDAgMCAxIDIuMiAyLjkgMi45IDAgMCAwIDIgLjhaIi8+PC9zdmc+")
}

.form-control-wrap[data-trailing="date"]::after {
  content: '';
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMy43IiB2aWV3Qm94PSIwIDAgMTIgMTMuNyI+PHBhdGggZD0iTTEuMyAxMy43YTEuMiAxLjIgMCAwIDEtMS0uNCAxLjIgMS4yIDAgMCAxLS4zLS45VjNhMS4yIDEuMiAwIDAgMSAuNC0uOSAxLjIgMS4yIDAgMCAxIC45LS40aDEuM1YwaDEuM3YxLjdIOFYwaDEuM3YxLjdoMS4zYTEuMiAxLjIgMCAwIDEgMSAuNCAxLjIgMS4yIDAgMCAxIC4zLjl2OS40YTEuMiAxLjIgMCAwIDEtLjQgMSAxLjIgMS4yIDAgMCAxLS45LjNabTAtMS4zaDkuNFY2SDEuM1ptMC03LjdoOS40VjNIMS4zWm0wIDBaTTYgOC42YS42LjYgMCAwIDEtLjUtLjIuNi42IDAgMCAxLS4xLS41LjYuNiAwIDAgMSAuMS0uNC42LjYgMCAwIDEgLjUtLjIuNi42IDAgMCAxIC41LjIuNi42IDAgMCAxIC4xLjQuNi42IDAgMCAxLS4xLjUuNi42IDAgMCAxLS41LjJabS0yLjggMGEuNi42IDAgMCAxLS40LS4yLjYuNiAwIDAgMS0uMi0uNS42LjYgMCAwIDEgLjItLjQuNi42IDAgMCAxIC40LS4yLjYuNiAwIDAgMSAuNS4yLjYuNiAwIDAgMSAuMi40LjYuNiAwIDAgMS0uMi41LjYuNiAwIDAgMS0uNS4yWm01LjYgMGEuNi42IDAgMCAxLS41LS4yLjYuNiAwIDAgMS0uMi0uNS42LjYgMCAwIDEgLjItLjQuNi42IDAgMCAxIC41LS4yLjYuNiAwIDAgMSAuNC4yLjYuNiAwIDAgMSAuMi40LjYuNiAwIDAgMS0uMi41LjYuNiAwIDAgMS0uNC4yWk02IDExYS42LjYgMCAwIDEtLjUtLjEuNi42IDAgMCAxLS4xLS41LjYuNiAwIDAgMSAuMS0uNS42LjYgMCAwIDEgLjUtLjEuNi42IDAgMCAxIC41LjEuNi42IDAgMCAxIC4xLjUuNi42IDAgMCAxLS4xLjUuNi42IDAgMCAxLS41LjFabS0yLjggMGEuNi42IDAgMCAxLS40LS4xLjYuNiAwIDAgMS0uMi0uNS42LjYgMCAwIDEgLjItLjUuNi42IDAgMCAxIC40LS4xLjYuNiAwIDAgMSAuNS4xLjYuNiAwIDAgMSAuMi41LjYuNiAwIDAgMS0uMi41LjYuNiAwIDAgMS0uNS4xWm01LjYgMGEuNi42IDAgMCAxLS41LS4xLjYuNiAwIDAgMS0uMi0uNS42LjYgMCAwIDEgLjItLjUuNi42IDAgMCAxIC41LS4xLjYuNiAwIDAgMSAuNC4xLjYuNiAwIDAgMSAuMi41LjYuNiAwIDAgMS0uMi41LjYuNiAwIDAgMS0uNC4xWiIvPjwvc3ZnPg==")
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* AJAX search */
.search-results {
  position: absolute;
  z-index: 99;
  width: 100%;
  min-height: 120px;
  max-height: 50vh;
  height: auto;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  background-color: #f2f2f2;
  border: solid 1px #0005;
  border-radius: 3px;
  box-shadow: 0 6px 12px #0001;
  box-sizing: border-box;
  overflow-y: auto
}

.search-results.loading :is(.no-results, .results) {
  display: none
}

.search-results.no-results :is(.loader, .results) {
  display: none
}

.search-results.has-results :is(.loader, .no-results) {
  display: none
}

.search-results .search-results-inner {
  position: relative
}

.search-results.loading .loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px
}

.search-results.loading .loader::before {
  content: '';
  width: 36px;
  height: 36px;
  border: 4px solid var(--accent);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite
}

@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

.search-results .no-results {
  padding: 12px
}

.search-results .no-results .query-string {
  font-weight: 600
}

.search-results .search-result-item {
  padding: 12px
}

.search-results .search-result-item+.search-result-item {
  border-top: solid 1px #ccc
}

.search-results .search-result-item .title {
  font-weight: 600
}

.search-results .search-result-item .actions a {
  white-space: nowrap
}

.search-results .search-result-item .edit {
  margin-right: .5em
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* Styled links */

input:is([type="submit"], [type="button"]),
.btn,
button {
  background-color: var(--btn-bg);
  min-width: 30px;
  text-decoration: none;
  text-align: center;
  cursor: pointer
}

input:is([type="submit"], [type="button"]):hover,
.btn:hover,
button:hover {
  background-color: var(--btn-bg-hover);
  color: var(--accent-hover);
  text-decoration: none
}

.btn.btn-l {
  padding: 2px 0.99em
}

.btn.btn-wide {
  width: 100%
}

.btn.accent {
  border-color: currentColor
}

.btn.solid {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff
}

.btn.solid:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent);
  color: #fff
}

.btn.ghost {
  appearance: none;
  background-color: transparent;
  color: currentColor;
  border: none;
  padding: 0;
  text-align: inherit;
  line-height: inherit;
  display: inline-block
}

.btn.ghost:hover {
  appearance: none;
  background-color: transparent;
  color: currentColor;
  border: none
}

.btn.icon {
  display: flex;
  align-items: center;
  gap: .3em
}

.text-align-right .btn.icon {
  justify-content: flex-end
}

.text-align-right .btn.icon .icon {
  fill: currentColor
}

.btn.ghost .btn-text {
  opacity: .8
}

.btn.ghost:hover .btn-text {
  opacity: 1
}

.btn.icon.ghost .icon {
  opacity: .5
}

.btn.icon.ghost:hover .icon {
  opacity: 1
}

.btn.icon .icon {
  user-select: none
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* Status chips */
.status-chip {
  display: inline-block;
  border-radius: 3px;
  border: solid 1px #ddd;
  font-size: var(--xs-copy);
  font-weight: 600;
  letter-spacing: .025em;
  line-height: 1.5;
  padding: 0 4px
}

.status-chip.closed {
  background-color: #ddd;
  border-color: #ddd;
  color: #0007
}

.status-chip.active {
  background-color: #fff;
  border-color: var(--allright);
  color: #0b6b21
}

.status-chip.not_is_active {
  background-color: #fff;
  border-color: #888;
  color: #888;
  border-style: dashed
}

.status-chip.terminated {
  background-color: #ddd;
  border-color: #ddd;
  color: #0007
}

.status-chip.draft {
  background-color: #fff;
  border-color: #888;
  color: #888;
  border-style: dashed
}

.status-chip.ready {
  background-color: #fff;
  border-color: var(--allright);
  color: #555;
  border-style: dashed
}

.status-chip.tag {
  background-color: #fff;
  border-color: #888;
  color: #888;
  border-style: solid
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* Snackbar */
.snackbar {
  position: fixed;
  /* bottom: -100px; */
  top: 82px;
  opacity: 0;
  transition: bottom .25s ease-out, opacity .25s ease-out;
  box-sizing: border-box;
  width: calc(100% - 40px);
  min-width: 280px;
  max-width: 480px;
  border-radius: 6px;
  box-shadow: 0 3px 12px #0001;
  padding: 10px 12px;
  background-color: #fff;
  left: 50%;
  transform: translateX(-50%);
  border: solid 1px #ccc;
  z-index: -1;
}

.snackbar.active {
  /* bottom: 30px; */
  opacity: 1;
  z-index: 100001;
}

.snackbar .dismiss {
  color: var(--accent);
  min-width: unset;
  text-align: center;
  font-weight: 600
}

.snackbar.confirmation {
  border-color: var(--allright);
  background-color: var(--allright-bg)
}

.snackbar.confirmation .dismiss {
  color: var(--allright)
}

.snackbar.warning {
  border-color: var(--warning);
  background-color: var(--warning-bg)
}

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

.snackbar.error {
  border-color: var(--gonebad);
  background-color: var(--gonebad-bg)
}

.snackbar.error .dismiss {
  color: var(--gonebad)
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* divider */

.divider {
  display: block;
  width: 4px;
  margin-left: 4px;
  height: 1.8rem;
  /* background-color: var(--black);
  border-radius: 50%; */
  border-left: 1px solid var(--black);
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* SITE HEADER & MAIN NAVIGATION  */

#site-header {
  padding: 12px 35px 12px 12px;
  border-top: solid 1px var(--accent);
  border-bottom: solid 1px var(--accent)
}

#site-header a {
  color: #000;
  text-decoration: none
}

#site-header a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dashed
}

#site-header .current-menu-item>a,
#site-header a.current-language {
  text-decoration: underline
}

#site-header .inline-menu {
  gap: 35px
}

#site-header li>a {
  line-height: 36px
}

#site-header .has-submenu {
  position: relative
}

#site-header .has-submenu::after {
  content: var(--menu-down)
}

#site-header .has-submenu:hover .submenu {
  visibility: visible
}

#site-header .submenu {
  position: absolute;
  visibility: hidden;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: var(--btn-bg-hover);
  border-radius: 8px;
  min-width: 150px;
  z-index: 100002;
}

#site-header .submenu::before {
  position: absolute;
  display: block;
  content: '';
  top: -10px;
  border-bottom: solid 10px var(--btn-bg-hover);
  border-left: solid 8px transparent;
  border-right: solid 8px transparent;
  transform: translateX(-50%);
  left: 50%
}

#site-header .submenu li>a {
  line-height: 2em;
  padding: 0 .5em
}

#site-header .vertical-separator {
  width: 0;
  border-right: dashed 1px #0004;
  height: 36px
}

#site-footer {
  height: 60px
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* INDEX // LOGIN */

.login {
  height: 100vh
}

.login .full-background {
  background-color: var(--accent);
  background-image: url("img/login-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  height: 100%;
  box-sizing: border-box
}

.login .login-sidebar {
  width: 330px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff
}

.login header {
  margin-bottom: 80px
}

.login header .logo-group {
  margin-bottom: 28px
}

.login header h1 {
  margin-bottom: 2px
}

.login .footer-notes {
  display: flex;
  flex-direction: column;
  gap: 9px
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* SINGLE PAGE COMMON STYLES */
/* user */

/* Page header */
.page-header {
  margin-top: 48px;
  margin-bottom: 18px
}

.page-header .title-group.row {
  align-items: baseline
}

.page-header .title-group.row .btn {
  position: relative;
  bottom: 5px
}

.page-header .title-group.row .status-chip {
  position: relative;
  bottom: 2px
}

.page-header .page-header-actions {
  align-items: flex-start
}

/*
.page-header .page-header-actions .btn {
  position: relative;
  bottom: 5px
}
  */

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* filters row & pagination */
.filters.row :is(input, select, .form-control-wrap) {
  max-width: 180px
}

.filters.row button {
  flex-shrink: 0
}

@media (min-width:1600px) {
  .filters.row :is(input, select, .form-control-wrap) {
    max-width: 220px;
    width: 220px
  }
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* Sorting Table & general tables styles */
.list-view-header {
  margin-bottom: 8px
}

.list-view-footer {
  margin-top: 8px
}

.list-view th {
  padding: 6px 8px;
  text-align: left
}

.list-view td {
  padding: 12px 8px;
  vertical-align: top
}

.list-view tr:nth-child(even) td {
  background-color: #f6f7f7
}

.list-view tr:hover td {
  background-color: #edf6fa
}

.list-view+.list-view-navigation {
  margin-top: 8px
}

.list-view .sort-toggle:is(.sort-asc, .sort-desc) {
  opacity: 1;
  color: var(--accent)
}

.list-view .sort-toggle::after {
  content: var(--sort-idle);
  padding-right: .5em;
  opacity: .5;
  font-weight: normal
}

.list-view .sort-toggle:hover::after {
  opacity: 1
}

.list-view .sort-toggle:is(.sort-asc, .sort-desc)::after {
  opacity: 1
}

.list-view .sort-toggle.sort-asc::after {
  content: var(--sort-down)
}

.list-view .sort-toggle.sort-desc::after {
  content: var(--sort-up)
}

.list-view .sort-toggle.sort-idle::after {
  content: var(--sort-idle);
}

/* USER */

.user.index .list-view .tablecol-0 {
  width: 285px;
  text-align: left;
}

.user.index .list-view .tablecol-1 {
  text-align: left;
}

.user.index .list-view .tablecol-2 {
  text-align: left;
}

.user.index .list-view .tablecol-3 {
  text-align: right;
}

.user.index .list-view td .actions {
  margin-left: 8px
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* CREATE or EDIT ITEMS */

.edit-item-form {
  border: solid 1px #0005;
  border-radius: 3px
}

.edit-item-form .form-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr
}

.edit-item-form .form-body>.col {
  padding: 40px 36px
}

.edit-item-form .form-body>.col:not(:last-child) {
  border-right: dashed 1px #0005
}

.edit-item-form .form-footer {
  border-top: solid 1px #0005;
  padding: 34px 36px
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* slide-out-panel */
.slide-out-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--slide-out-panel-width);
  transform: translateX(var(--slide-out-panel-width));
  right: 0;
  display: flex;
  background-color: #f8f8f8;
  box-shadow: 0 0 0 0 #0000;
  transition: transform .25s ease-out, box-shadow .25s ease-out;
  height: 100%;
  overflow: hidden auto;
}

.slide-out-panel.import {
  width: var(--slide-out-panel-import-width);
  transform: translateX(var(--slide-out-panel-import-width));
}

.slide-out-panel.slide-in {
  transform: translateX(0);
  box-shadow: 0 0 12px 0 #0002;
  z-index: 100002;
}

.slide-out-panel .panel-inner {
  justify-content: space-between;
  width: 100%
}

.slide-out-panel .panel-header {
  padding: 8px 8px 8px 16px;
  border-bottom: solid 1px #ccc
}

.slide-out-panel .panel-body {
  padding: 21px 16px
}

.slide-out-panel .panel-footer {
  padding: 14px 16px;
  border-top: solid 1px #ccc;
  position: sticky;
  bottom: 0;
  background-color: #f8f8f8;
}

.slide-out-panel .close-panel {
  appearance: none;
  border: none;
  line-height: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .7
}

.slide-out-panel .close-panel:hover {
  background-color: #0001;
  opacity: 1;
  color: #000
}

.slide-out-panel .panel-top {
  padding-bottom: 108px;
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* Accordions */

.accordion {
  position: relative
}

.accordion-trigger {
  cursor: pointer
}

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height .2s ease-in-out
}

.accordion.show-excerpt .accordion-content {
  max-height: 3.6em
}

.accordion:not(.active) .accordion-trigger .label.active {
  display: none
}

.accordion.active .accordion-trigger .label:not(.active) {
  display: none
}

.label-accordion {
  display: block;
  margin-top: 5px;
  font-style: italic;
  text-transform: lowercase;
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

/* Chips */

.status-chip.development {
  background-color: #fff;
  border-color: var(--error-border);
  color: var(--error-text);
  border-style: dashed
}

.status-chip.locked::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -20px;
  width: 1.5em;
  height: 1.5em;
  background-position: right center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gU3ZnIFZlY3RvciBJY29ucyA6IGh0dHA6Ly93d3cub25saW5ld2ViZm9udHMuY29tL2ljb24gLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjU2IDI1NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8bWV0YWRhdGE+IFN2ZyBWZWN0b3IgSWNvbnMgOiBodHRwOi8vd3d3Lm9ubGluZXdlYmZvbnRzLmNvbS9pY29uIDwvbWV0YWRhdGE+DQo8Zz48Zz48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTk0LjMsMTA1LjlWNzYuNGMwLTM2LjctMjkuNy02Ni40LTY2LjMtNjYuNFM2MS43LDM5LjcsNjEuNyw3Ni40djI5LjVjLTEyLjIsMC0yMi4xLDkuOS0yMi4xLDIyLjF2NTEuNmMwLDM2LjcsMjkuNyw2Ni40LDY2LjMsNjYuNGg0NC4yYzM2LjYsMCw2Ni4zLTI5LjcsNjYuMy02Ni40VjEyOEMyMTYuNCwxMTUuOCwyMDYuNSwxMDUuOSwxOTQuMywxMDUuOUwxOTQuMywxMDUuOXogTTc4LjksNzYuMWMwLTI4LjUsMTkuNC00OS42LDQ3LjktNDkuNmMyOC41LDAsNTAuNywyMSw1MC43LDQ5LjZ2MjkuNUg3OC45Vjc2LjFMNzguOSw3Ni4xeiBNMTk4LjcsMTQ5LjN2MjguOWMwLDI3LjktMjIuNyw1MC42LTUwLjUsNTAuNmgtNDAuOWMtMjcuOSwwLTUwLjUtMjIuNy01MC41LTUwLjZ2LTQ4LjZjMC00LDMuMy03LjIsNy4yLTcuMmgxNC40aDk4LjZoMTQuNGM0LDAsNy4yLDMuMyw3LjIsNy4yTDE5OC43LDE0OS4zTDE5OC43LDE0OS4zeiBNMTI2LjgsMTQ5LjhjOC4xLDAsMTQuNyw2LjYsMTQuNywxNC44YzAsNC41LTIuNCwxMy00LjksMTkuOGMtMiw1LjQtNC4xLDkuNy05LjgsOS43Yy01LjMsMC03LjgtNC4zLTkuOC05LjhjLTIuNS02LjctNC45LTE1LjItNC45LTE5LjdDMTEyLDE1Ni40LDExOC42LDE0OS44LDEyNi44LDE0OS44TDEyNi44LDE0OS44eiIvPjwvZz48L2c+DQo8L3N2Zz4=")
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

.row.form-body:has(.spinner:not(.hidden)) {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  min-height: 100%;
  min-width: 100%;
  height: 100%;
  width: 100%;
  background-color: var(--clf);
  opacity: 50%;
  z-index: 100000;
  pointer-events: none;
  cursor: wait;
}

.spinner {
  --spinner_size: 64px;
  width: var(--spinner_size);
  height: var(--spinner_size);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: calc(var(--spinner_size) / 2 * -1);
  margin-left: calc(var(--spinner_size) / 2 * -1);
  border-radius: 50%;
  border: 5px solid #eaf5fe;
  border-right-color: #5597d4;
  animation: rotateSpinner 800ms linear infinite;
}

@keyframes rotateSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

.outline-navigation {
  gap: 20px
}

.outline-navigation .vertical-separator {
  height: 30px;
  width: 0;
  border-right: dashed 1px #0004
}

.outline-navigation select {
  min-width: 70px;
  width: 72px
}

.outline-navigation a {
  color: var(--accent);
  opacity: .7;
  text-decoration: underline;
}

.outline-navigation a.current {
  color: #000;
  font-weight: 600;
  opacity: 1;
  text-decoration: none;
}

.outline-navigation a:hover {
  opacity: 1;
  color: var(--accent)
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

#warning4changes {
  padding: 0;
  margin: 0 0 .33em 0;
}



/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

tbody.outline td {
  background-color: var(--white) !important;
}

tbody.outline .outline-row-1 {
  border-top: 1px solid #0005;
  border-bottom: 1px solid #0005;
}

tbody.outline .outline-row-2,
tbody.outline .outline-row-3,
tbody.outline .outline-row-4 {
  border-bottom: 1px dashed #0005;
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.outline-view-container {
  border: 1px solid #0005;
  border-radius: 4px;
  margin-top: 40px;
}

.outline-view-container>.row:nth-child(odd) {
  background-color: #f6f7f7
}

.outline-view-container .tablecol-1 {
  max-width: 400px;
  padding: 40px 36px;
}

.outline-view-container .tablecol-2 {
  padding: 40px 36px;
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */

.dropzone {
  width: 100%;
  min-height: 5rem;
  padding: 2em;
  box-sizing: border-box;
  border: 2px dashed #0005;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.dropzone>p:last-child {
  margin-bottom: 0;
}

.dropzone.over {
  border-color: var(--clf);
  background-color: #edf6fa;
}

/* .dropzone :not(a) {
  pointer-events: none
} */

.dropzone .media_container {
  width: 100%;
  gap: 3em;
}

/* ⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻ */