@import url("/icon.font.css");
@import url("/-/theme");
@import url("/icon.font.css");
@import url("/-/theme");
html {
  width: 100vw;
  height: calc(100 * var(--vh, 1vh));
  min-height: calc(100 * var(--vh, 1vh));
  max-height: calc(100 * var(--vh, 1vh));
  position: fixed;
  overflow: hidden;
}
html body {
  width: 100vw;
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  background: var(--background-page);
  animation-duration: var(--time-animation);
  position: fixed;
  overflow: hidden;
}
html body[loading], html body[loading] * {
  pointer-events: none;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
  margin-top: 0;
  margin-bottom: var(--size-offset);
}
html body h1:last-child, html body h2:last-child, html body h3:last-child, html body h4:last-child, html body h5:last-child, html body h6:last-child {
  margin-bottom: 0;
}
html body p {
  margin: 0 0 calc(var(--size-offset) / 2) 0;
}
html body h1, html body h1 * {
  font-size: calc(var(--font-size) + 12px);
}
html body h2, html body h2 * {
  font-size: calc(var(--font-size) + 6px);
}
html body h3, html body h3 * {
  font-size: calc(var(--font-size) + 3px);
}
html body h4 {
  font-weight: normal;
}
html body h4, html body h4 * {
  font-size: var(--font-size);
}
html body h5 {
  font-weight: normal;
}
html body h5, html body h5 * {
  font-size: calc(var(--font-size) - 2px);
}
html body h6 {
  font-weight: normal;
}
html body h6, html body h6 * {
  font-size: calc(var(--font-size) - 4px);
}
html body a {
  text-decoration: none;
}
html body li {
  list-style: none;
}
html body spacer {
  flex: 10;
}
html body [scroll-y], html body [scroll-x] {
  position: relative;
}
html body [scroll-y]::before, html body [scroll-y]::after, html body [scroll-x]::before, html body [scroll-x]::after {
  content: "x";
  color: rgba(0, 0, 0, 0);
  position: sticky;
  position: -webkit-sticky;
  display: block;
  z-index: 1;
  box-shadow: 0px 0px 4px 8px var(--background-page);
}
html body [scroll-y][scroll-x]::before, html body [scroll-y][scroll-x]::after, html body [scroll-x][scroll-x]::before, html body [scroll-x][scroll-x]::after {
  top: 0;
  bottom: 0;
  width: 0px;
}
html body [scroll-y][scroll-x]::before, html body [scroll-x][scroll-x]::before {
  left: 0;
}
html body [scroll-y][scroll-x]::after, html body [scroll-x][scroll-x]::after {
  right: 0;
}
html body [scroll-y][scroll-y]::before, html body [scroll-y][scroll-y]::after, html body [scroll-x][scroll-y]::before, html body [scroll-x][scroll-y]::after {
  left: 0;
  right: 0;
  height: 0px;
}
html body [scroll-y][scroll-y]::before, html body [scroll-x][scroll-y]::before {
  top: 0;
}
html body [scroll-y][scroll-y]::after, html body [scroll-x][scroll-y]::after {
  bottom: 0;
}
html body button {
  background: var(--button-primary);
  color: var(--font-color-button);
  border-radius: var(--size-border-radius);
  border: var(--button-border);
  font-weight: bold;
}
html body button, html body .--action {
  cursor: pointer;
}
html body button:active, html body .--action:active {
  transform: scale(0.9);
  transition-duration: calc(var(--time-transition) / 2);
}
html body input, html body textarea, html body select {
  border-radius: var(--size-border-radius);
  border: var(--input-border);
  outline: none !important;
  background: var(--background-input);
}
html body button, html body input, html body select, html body textarea {
  height: var(--size-block);
  min-height: var(--size-block);
  max-height: var(--size-block);
  outline: none !important;
  padding: calc(var(--size-offset) / 2);
  margin-bottom: var(--size-offset);
}
html body button:last-child, html body input:last-child, html body select:last-child, html body textarea:last-child {
  margin-bottom: 0;
}
html body [no-select], html body [no-select] *, html body button, html body .--action {
  user-select: none;
  -webkit-user-select: none;
  user-zoom: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
html body select {
  padding: 0 calc(var(--size-offset) / 4);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
html body select::placeholder {
  color: var(--font-color) !important;
}
html body label {
  font-weight: bold;
  margin-bottom: calc(var(--size-offset) / 4);
}
html body [disabled] {
  opacity: 0.5 !important;
  pointer-events: none !important;
}
html body [hidden] {
  display: none;
}
html body view-container {
  display: grid;
}
html body view-container [view-route] {
  grid-row: 1;
  grid-column: 1;
  animation-fill-mode: forwards !important;
}
html body [page] {
  animation-fill-mode: forwards !important;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
}
html body [page][page] {
  min-height: calc(100 * var(--vh, 1vh));
  max-height: calc(100 * var(--vh, 1vh));
  height: calc(100 * var(--vh, 1vh));
}
html body [page][page][load-out] {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
html body [page][load-out] {
  z-index: -1;
  position: absolute;
}
html body:not([load-page]):not([load-view]) [load-out], html body:not([load-page]):not([load-view]) [load-in] {
  display: none;
}
html body[load-page] [page]:not([load-in]):not([load-out]) {
  display: none;
}
html body, html body * {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--font-color);
}
html body, html body * {
  transition: color var(--time-transition), background var(--time-transition), transform var(--time-transition), opacity var(--time-transition);
}

:root {
  --time-transition: 0.5s;
  --time-animation: 1s;
  --shadow: none;
  --font-family: Arial;
  --font-size: 14px;
  --font-color: black;
  --font-color-button: white;
  --color-border: transparent;
  --color-primary: black;
  --color-secondary: grey;
  --background-page: white;
  --background-block: white;
  --background-input: white;
  --size-offset: 20px;
  --size-block: 40px;
  --size-border: 0px;
  --size-border-radius: 0px;
  --button-primary: var(--color-primary);
  --button-secondary: var(--color-secondary);
  --button-border: solid var(--size-border) var(--color-border);
  --input-border: solid var(--size-border) var(--color-border);
}

:root {
  --font-family: "Open Sans";
  --font-size: 0.8125rem;
  --font-color: #323232;
  --size-border-radius: 0.25rem;
  --button-border: none;
  --input-border: solid 0px transparent;
  --background-page: #fafafa;
  --b: white;
  --size-block: 2.5rem;
  --shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.05);
  --time-animation: 1s;
  --size-offset: 1rem;
  --transition-time: 0.25s;
  --button-primary: var(--color-primary);
  --max-width: 1200px;
  --comment-color: rgba(255, 228, 145, 0.5);
  --c05: color-mix(in srgb, var(--font-color), transparent 95%);
  --c10: color-mix(in srgb, var(--font-color), transparent 90%);
  --p05: color-mix(in srgb, var(--color-primary), transparent 95%);
  --b: white;
  --a: color-mix(in srgb, var(--font-color), transparent 95%);
  --area-color: var(--a);
  --background-block: var(--b);
  --color-info: #145988;
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-info: #2e8dcd;
  }
}
@media screen and (max-width: 1500px) {
  :root {
    --font-size: 0.75rem;
  }
}

@font-face {
  font-family: "LG Smart";
  src: url("/font/lg-smart.regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "LG Smart";
  src: url("/font/lg-smart.bold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "LG Smart";
  src: url("/font/lg-smart.light.woff") format("woff");
  font-style: normal;
  font-weight: lighter;
}
@font-face {
  font-family: "Open Sans";
  src: url("/font/open-sans.regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("/font/open-sans.bold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "Open Sans";
  src: url("/font/open-sans.light.woff") format("woff");
  font-style: normal;
  font-weight: lighter;
}
html, ticket-edit .overlay::before {
  background: var(--background-page);
}

html body {
  overflow: unset !important;
  /* TODO: THIS IS A PROBLEM ? */
  /** ADMIN **/
}
html body .card {
  background: var(--b);
  border-radius: var(--size-border-radius);
  border: solid 1px var(--a);
}
@media screen and (prefers-color-scheme: dark) {
  html body .card {
    border-color: rgba(255, 255, 255, 0.1);
  }
}
html body[data-loading], html body[data-loading] * {
  cursor: progress !important;
}
html body > [page="/"] {
  overflow: clip;
}
html body .toggle-select {
  display: inline-block;
  min-height: 20px;
  height: 20px;
  width: 45px;
  border-radius: 10px;
  background: var(--area-color);
  position: relative;
}
html body .toggle-select::after {
  content: "";
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  top: 4px;
  transition: all var(--time-transition);
}
html body .toggle-select.--active {
  background: var(--color-primary, var(--area-color));
}
html body .toggle-select.--active::after {
  left: 29px;
}
html body button {
  justify-content: center;
  align-items: center;
  transition: all var(--time-transition);
}
html body button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid white 2px;
  border-color: white transparent white transparent;
  animation: rotate 1.2s linear infinite;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transition: all var(--time-transition);
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
html body button[in-action] {
  color: transparent;
}
html body button[in-action]::before {
  opacity: 1;
}
html body label {
  font-size: 0.75em;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  background: black;
  border: solid black 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  min-width: 60px;
  white-space: nowrap;
}
html body label.add {
  text-transform: uppercase;
  background: none;
  border: solid 1px currentColor;
  color: unset;
  background: none;
  cursor: pointer;
  position: relative;
}
html body label.add i {
  margin-right: 0.5rem;
}
html body label:has(i) > span, html body label::before {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
html body label i {
  font-size: 0.75rem !important;
}
html body label i.close.close {
  color: white;
  position: unset;
  height: unset;
  width: unset;
  margin-left: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
html body label.--folder {
  height: 1.5rem;
  display: flex;
  align-items: center;
  grid-gap: 0.5rem;
  border: dotted 1px currentColor;
  color: unset;
  background: none;
}
html body label.--folder.add {
  text-transform: uppercase;
  border: solid 1px currentColor;
}
html body label.--folder.add i {
  margin-right: 0;
}
html body label.--folder span {
  margin: 0 !important;
}
html body label.--folder * {
  color: currentColor;
}
html body label.--folder i {
  padding: 0 !important;
  min-width: unset !important;
}
html body label[label]::before, html body label[channel]::before, html body label[status]::before, html body label[flag]::before {
  display: inline-block;
}
html body label[channel] {
  background: var(--color-primary) !important;
}
html body label span,
html body label strong,
html body label input {
  color: white;
  font-size: calc(var(--font-size) - 4px);
}
html body label.--alternate {
  border-color: var(--font-color);
  background: color-mix(in srgb, var(--area-color), transparent 90%);
  color: var(--font-color);
  border-width: 1px;
}
html body label.--alternate span,
html body label.--alternate strong,
html body label.--alternate input {
  color: var(--font-color);
}
@media screen and (prefers-color-scheme: dark) {
  html body label.--alternate {
    color: white;
    border-color: currentColor;
  }
}
html body label.--user {
  background: white;
  border: solid 1px var(--font-color);
  color: var(--font-color) !important;
}
html body label::before {
  display: inline-block !important;
}
html body label input {
  max-height: 20px;
  height: 20px;
  min-height: unset;
  background: transparent;
  text-align: center;
  width: 60px;
}
html body label input[type=date] {
  width: unset;
}
html body label input::-webkit-inner-spin-button, html body label input::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
html body label.count {
  position: relative;
  padding-left: 50px;
  overflow: hidden;
}
html body label.count > span.count {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  width: 40px;
  display: flex;
  place-content: center;
  place-items: center;
  border-radius: 2px;
}
html body label.count.large {
  padding-left: 70px;
}
html body label.count.large > span.count {
  width: 60px;
}
html body modal content {
  padding: 1.5rem !important;
  border-radius: var(--size-border-radius) !important;
  max-width: min(1800px, calc(100vw - 40px)) !important;
  height: calc(100% - 2 * var(--size-offset));
  min-height: calc(100% - 2 * var(--size-offset));
  max-height: calc(100% - 2 * var(--size-offset));
  overflow: hidden !important;
  width: 100% !important;
}
html body modal content h1 {
  margin-bottom: 1em;
  line-height: 1;
}
html body modal content > i.close.close {
  top: -1px;
  right: 0px;
  font-size: 20px;
  z-index: 3;
  padding: 1.5rem;
  height: unset;
  width: unset;
}
html body modal#item-dialog content {
  padding: 0 !important;
}
html body modal#feedback content {
  display: flex;
  flex-direction: column;
}
html body button {
  margin: 0 var(--size-offset);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--time-transition);
  font-weight: normal;
}
html body button:hover {
  opacity: 0.9;
}
html body button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid white 2px;
  border-color: white transparent white transparent;
  animation: rotate 1.2s linear infinite;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transition: all var(--time-transition);
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
html body button[in-action] {
  color: transparent;
}
html body button[in-action]::before {
  opacity: 1;
}
html body input,
html body select {
  padding: 0 var(--size-offset) 0 var(--size-offset) !important;
  -webkit-appearance: none;
}
html body select {
  background: var(--b) url("/icon/chevron-down.svg") no-repeat right var(--size-offset) center/auto 50%;
}
html body button,
html body input,
html body textarea,
html body select {
  box-shadow: none;
}
html body [page][load-in] {
  animation: come-in var(--time-animation) ease;
}
@keyframes come-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
html body [page][load-out] {
  animation: come-out var(--time-animation) ease;
}
@keyframes come-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
html body users > footer,
html body hooks > footer,
html body channels > footer,
html body signatures > footer,
html body text-block > footer,
html body sticky-notes.--admin > footer,
html body contact-book > footer,
html body label-list > footer,
html body rule-list > footer {
  background: var(--b);
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  padding: 1rem 1.5rem;
  margin: 4rem -1.5rem -1.5rem -1.5rem;
  border-top: solid 1px var(--area-color);
}
html body users > footer > div.search,
html body hooks > footer > div.search,
html body channels > footer > div.search,
html body signatures > footer > div.search,
html body text-block > footer > div.search,
html body sticky-notes.--admin > footer > div.search,
html body contact-book > footer > div.search,
html body label-list > footer > div.search,
html body rule-list > footer > div.search {
  position: relative;
  border-radius: var(--size-border-radius);
}
html body users > footer > div.search i,
html body hooks > footer > div.search i,
html body channels > footer > div.search i,
html body signatures > footer > div.search i,
html body text-block > footer > div.search i,
html body sticky-notes.--admin > footer > div.search i,
html body contact-book > footer > div.search i,
html body label-list > footer > div.search i,
html body rule-list > footer > div.search i {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  display: flex;
  align-items: center;
  font-size: 1rem;
  padding: 0 1rem;
}
html body users > footer > div.search input,
html body hooks > footer > div.search input,
html body channels > footer > div.search input,
html body signatures > footer > div.search input,
html body text-block > footer > div.search input,
html body sticky-notes.--admin > footer > div.search input,
html body contact-book > footer > div.search input,
html body label-list > footer > div.search input,
html body rule-list > footer > div.search input {
  background: none;
  padding-left: 2.5rem !important;
  color: var(--color-primary);
  font-weight: bold;
}
html body users > header,
html body hooks > header,
html body channels > header,
html body signatures > header,
html body text-block > header,
html body sticky-notes.--admin > header,
html body contact-book > header,
html body label-list > header,
html body rule-list > header {
  display: grid;
  gap: 1rem;
}
html body users > header a,
html body hooks > header a,
html body channels > header a,
html body signatures > header a,
html body text-block > header a,
html body sticky-notes.--admin > header a,
html body contact-book > header a,
html body label-list > header a,
html body rule-list > header a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  width: max-content;
}
html body users > header h1,
html body hooks > header h1,
html body channels > header h1,
html body signatures > header h1,
html body text-block > header h1,
html body sticky-notes.--admin > header h1,
html body contact-book > header h1,
html body label-list > header h1,
html body rule-list > header h1 {
  margin: 0;
}
html body users > button,
html body hooks > button,
html body channels > button,
html body signatures > button,
html body text-block > button,
html body sticky-notes.--admin > button,
html body contact-book > button,
html body label-list > button,
html body rule-list > button {
  margin: 0;
  width: fit-content;
  padding-left: 2rem;
  padding-right: 2rem;
}
html body users > table,
html body hooks > table,
html body channels > table,
html body signatures > table,
html body text-block > table,
html body sticky-notes.--admin > table,
html body contact-book > table,
html body label-list > table,
html body rule-list > table {
  border-collapse: collapse;
}
html body users > table tr:first-child,
html body hooks > table tr:first-child,
html body channels > table tr:first-child,
html body signatures > table tr:first-child,
html body text-block > table tr:first-child,
html body sticky-notes.--admin > table tr:first-child,
html body contact-book > table tr:first-child,
html body label-list > table tr:first-child,
html body rule-list > table tr:first-child {
  background: var(--b);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
html body users > table tr th:last-child,
html body hooks > table tr th:last-child,
html body channels > table tr th:last-child,
html body signatures > table tr th:last-child,
html body text-block > table tr th:last-child,
html body sticky-notes.--admin > table tr th:last-child,
html body contact-book > table tr th:last-child,
html body label-list > table tr th:last-child,
html body rule-list > table tr th:last-child {
  position: relative;
}
html body users > table tr th:last-child button,
html body hooks > table tr th:last-child button,
html body channels > table tr th:last-child button,
html body signatures > table tr th:last-child button,
html body text-block > table tr th:last-child button,
html body sticky-notes.--admin > table tr th:last-child button,
html body contact-book > table tr th:last-child button,
html body label-list > table tr th:last-child button,
html body rule-list > table tr th:last-child button {
  position: absolute;
  right: 1rem;
  top: 0;
  width: max-content;
  bottom: 0;
  margin: auto;
  padding: 0.75rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: none;
  font-weight: bold;
  color: var(--color-primary);
}
html body users > table tr th:last-child button i,
html body hooks > table tr th:last-child button i,
html body channels > table tr th:last-child button i,
html body signatures > table tr th:last-child button i,
html body text-block > table tr th:last-child button i,
html body sticky-notes.--admin > table tr th:last-child button i,
html body contact-book > table tr th:last-child button i,
html body label-list > table tr th:last-child button i,
html body rule-list > table tr th:last-child button i {
  color: var(--color-primary);
  font-size: 1rem;
}
html body users > table tr:hover td,
html body hooks > table tr:hover td,
html body channels > table tr:hover td,
html body signatures > table tr:hover td,
html body text-block > table tr:hover td,
html body sticky-notes.--admin > table tr:hover td,
html body contact-book > table tr:hover td,
html body label-list > table tr:hover td,
html body rule-list > table tr:hover td {
  background: color-mix(in srgb, var(--area-color), transparent 50%);
  cursor: pointer;
}
html body users > table th,
html body users > table td,
html body hooks > table th,
html body hooks > table td,
html body channels > table th,
html body channels > table td,
html body signatures > table th,
html body signatures > table td,
html body text-block > table th,
html body text-block > table td,
html body sticky-notes.--admin > table th,
html body sticky-notes.--admin > table td,
html body contact-book > table th,
html body contact-book > table td,
html body label-list > table th,
html body label-list > table td,
html body rule-list > table th,
html body rule-list > table td {
  text-align: left;
  padding: 1rem;
  border-radius: va(--size-border-radius);
  border-bottom: solid 1px var(--area-color);
}
html body users > table th .icon.share-from-square-solid,
html body users > table td .icon.share-from-square-solid,
html body hooks > table th .icon.share-from-square-solid,
html body hooks > table td .icon.share-from-square-solid,
html body channels > table th .icon.share-from-square-solid,
html body channels > table td .icon.share-from-square-solid,
html body signatures > table th .icon.share-from-square-solid,
html body signatures > table td .icon.share-from-square-solid,
html body text-block > table th .icon.share-from-square-solid,
html body text-block > table td .icon.share-from-square-solid,
html body sticky-notes.--admin > table th .icon.share-from-square-solid,
html body sticky-notes.--admin > table td .icon.share-from-square-solid,
html body contact-book > table th .icon.share-from-square-solid,
html body contact-book > table td .icon.share-from-square-solid,
html body label-list > table th .icon.share-from-square-solid,
html body label-list > table td .icon.share-from-square-solid,
html body rule-list > table th .icon.share-from-square-solid,
html body rule-list > table td .icon.share-from-square-solid {
  margin: -0.5rem 0;
  padding: 0.5rem 1rem;
  border: solid 1px var(--area-color);
  border-radius: var(--size-border-radius);
}
html body users > table th .icon.share-from-square-solid:hover,
html body users > table td .icon.share-from-square-solid:hover,
html body hooks > table th .icon.share-from-square-solid:hover,
html body hooks > table td .icon.share-from-square-solid:hover,
html body channels > table th .icon.share-from-square-solid:hover,
html body channels > table td .icon.share-from-square-solid:hover,
html body signatures > table th .icon.share-from-square-solid:hover,
html body signatures > table td .icon.share-from-square-solid:hover,
html body text-block > table th .icon.share-from-square-solid:hover,
html body text-block > table td .icon.share-from-square-solid:hover,
html body sticky-notes.--admin > table th .icon.share-from-square-solid:hover,
html body sticky-notes.--admin > table td .icon.share-from-square-solid:hover,
html body contact-book > table th .icon.share-from-square-solid:hover,
html body contact-book > table td .icon.share-from-square-solid:hover,
html body label-list > table th .icon.share-from-square-solid:hover,
html body label-list > table td .icon.share-from-square-solid:hover,
html body rule-list > table th .icon.share-from-square-solid:hover,
html body rule-list > table td .icon.share-from-square-solid:hover {
  background: var(--area-color);
}
html body users > table th:last-child,
html body users > table td:last-child,
html body hooks > table th:last-child,
html body hooks > table td:last-child,
html body channels > table th:last-child,
html body channels > table td:last-child,
html body signatures > table th:last-child,
html body signatures > table td:last-child,
html body text-block > table th:last-child,
html body text-block > table td:last-child,
html body sticky-notes.--admin > table th:last-child,
html body sticky-notes.--admin > table td:last-child,
html body contact-book > table th:last-child,
html body contact-book > table td:last-child,
html body label-list > table th:last-child,
html body label-list > table td:last-child,
html body rule-list > table th:last-child,
html body rule-list > table td:last-child {
  width: 4ch;
}
html body users > table th.small,
html body users > table td.small,
html body hooks > table th.small,
html body hooks > table td.small,
html body channels > table th.small,
html body channels > table td.small,
html body signatures > table th.small,
html body signatures > table td.small,
html body text-block > table th.small,
html body text-block > table td.small,
html body sticky-notes.--admin > table th.small,
html body sticky-notes.--admin > table td.small,
html body contact-book > table th.small,
html body contact-book > table td.small,
html body label-list > table th.small,
html body label-list > table td.small,
html body rule-list > table th.small,
html body rule-list > table td.small {
  width: 12ch;
}
html body users > table tr:last-child td,
html body hooks > table tr:last-child td,
html body channels > table tr:last-child td,
html body signatures > table tr:last-child td,
html body text-block > table tr:last-child td,
html body sticky-notes.--admin > table tr:last-child td,
html body contact-book > table tr:last-child td,
html body label-list > table tr:last-child td,
html body rule-list > table tr:last-child td {
  border-bottom: none;
}
html body users,
html body hooks,
html body channels,
html body signatures,
html body sticky-notes.--admin,
html body text-block,
html body contact-book,
html body label-list,
html body rule-list {
  margin: var(--size-offset) calc((100% - var(--max-width)) / 2) 4rem calc((100% - var(--max-width)) / 2);
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
  overflow: clip;
}
html body users label:not([label]),
html body hooks label:not([label]),
html body channels label:not([label]),
html body signatures label:not([label]),
html body sticky-notes.--admin label:not([label]),
html body text-block label:not([label]),
html body contact-book label:not([label]),
html body label-list label:not([label]),
html body rule-list label:not([label]) {
  background: none;
  border-radius: 0;
  display: block;
  font-size: 0.75rem;
  margin: 0;
  color: unset;
  padding: 0;
}
html body users input,
html body users select,
html body users hr,
html body users textarea,
html body hooks input,
html body hooks select,
html body hooks hr,
html body hooks textarea,
html body channels input,
html body channels select,
html body channels hr,
html body channels textarea,
html body signatures input,
html body signatures select,
html body signatures hr,
html body signatures textarea,
html body sticky-notes.--admin input,
html body sticky-notes.--admin select,
html body sticky-notes.--admin hr,
html body sticky-notes.--admin textarea,
html body text-block input,
html body text-block select,
html body text-block hr,
html body text-block textarea,
html body contact-book input,
html body contact-book select,
html body contact-book hr,
html body contact-book textarea,
html body label-list input,
html body label-list select,
html body label-list hr,
html body label-list textarea,
html body rule-list input,
html body rule-list select,
html body rule-list hr,
html body rule-list textarea {
  background-color: var(--area-color);
  width: 100%;
}
html body users textarea,
html body hooks textarea,
html body channels textarea,
html body signatures textarea,
html body sticky-notes.--admin textarea,
html body text-block textarea,
html body contact-book textarea,
html body label-list textarea,
html body rule-list textarea {
  resize: none;
}
html body users hr,
html body hooks hr,
html body channels hr,
html body signatures hr,
html body sticky-notes.--admin hr,
html body text-block hr,
html body contact-book hr,
html body label-list hr,
html body rule-list hr {
  display: inline-block;
  border: none;
  height: 1px;
  margin: 1rem 0;
}
html body modal#user label i, html body modal#channels label i, html body modal#import-job label i, html body modal#text-block label i, html body modal#contacts label i, html body modal#labels label i, html body modal#rules label i, html body modal.settings label i, html body modal#group-edit label i, html body modal#hooks label i {
  opacity: 0.75;
  margin-left: 1rem;
  z-index: -1;
  position: relative;
}
html body modal#user h1, html body modal#channels h1, html body modal#import-job h1, html body modal#text-block h1, html body modal#contacts h1, html body modal#labels h1, html body modal#rules h1, html body modal.settings h1, html body modal#group-edit h1, html body modal#hooks h1 {
  padding: 1.5rem;
  margin: 0;
  background: var(--b);
  padding-bottom: 1rem;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 100;
  font-size: 1.5rem;
  height: 4.5rem;
}
html body modal#user h1 i, html body modal#channels h1 i, html body modal#import-job h1 i, html body modal#text-block h1 i, html body modal#contacts h1 i, html body modal#labels h1 i, html body modal#rules h1 i, html body modal.settings h1 i, html body modal#group-edit h1 i, html body modal#hooks h1 i {
  position: absolute;
  padding: 2.5rem;
  right: 0;
  top: 0;
  font-size: 1.5rem;
}
html body modal#user content, html body modal#channels content, html body modal#import-job content, html body modal#text-block content, html body modal#contacts content, html body modal#labels content, html body modal#rules content, html body modal.settings content, html body modal#group-edit content, html body modal#hooks content {
  min-height: auto;
  height: auto;
  max-width: 800px !important;
  padding: 0 !important;
  overflow: clip auto !important;
}
html body modal#user content .channels, html body modal#channels content .channels, html body modal#import-job content .channels, html body modal#text-block content .channels, html body modal#contacts content .channels, html body modal#labels content .channels, html body modal#rules content .channels, html body modal.settings content .channels, html body modal#group-edit content .channels, html body modal#hooks content .channels {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
html body modal#user content .channels .channel-display, html body modal#channels content .channels .channel-display, html body modal#import-job content .channels .channel-display, html body modal#text-block content .channels .channel-display, html body modal#contacts content .channels .channel-display, html body modal#labels content .channels .channel-display, html body modal#rules content .channels .channel-display, html body modal.settings content .channels .channel-display, html body modal#group-edit content .channels .channel-display, html body modal#hooks content .channels .channel-display {
  padding: 0.5rem 0.75rem;
  border-radius: var(--size-border-radius);
  border: solid 1px var(--area-color);
  cursor: pointer;
}
html body modal#user content .channels .channel-display span, html body modal#channels content .channels .channel-display span, html body modal#import-job content .channels .channel-display span, html body modal#text-block content .channels .channel-display span, html body modal#contacts content .channels .channel-display span, html body modal#labels content .channels .channel-display span, html body modal#rules content .channels .channel-display span, html body modal.settings content .channels .channel-display span, html body modal#group-edit content .channels .channel-display span, html body modal#hooks content .channels .channel-display span {
  font-size: 0.75rem;
}
html body modal#user content .channels .channel-display i, html body modal#channels content .channels .channel-display i, html body modal#import-job content .channels .channel-display i, html body modal#text-block content .channels .channel-display i, html body modal#contacts content .channels .channel-display i, html body modal#labels content .channels .channel-display i, html body modal#rules content .channels .channel-display i, html body modal.settings content .channels .channel-display i, html body modal#group-edit content .channels .channel-display i, html body modal#hooks content .channels .channel-display i {
  font-size: 1rem;
}
html body modal#user content .channels .channel-display.--active, html body modal#channels content .channels .channel-display.--active, html body modal#import-job content .channels .channel-display.--active, html body modal#text-block content .channels .channel-display.--active, html body modal#contacts content .channels .channel-display.--active, html body modal#labels content .channels .channel-display.--active, html body modal#rules content .channels .channel-display.--active, html body modal.settings content .channels .channel-display.--active, html body modal#group-edit content .channels .channel-display.--active, html body modal#hooks content .channels .channel-display.--active {
  background: black;
  border-color: transparent;
}
html body modal#user content .channels .channel-display.--active, html body modal#user content .channels .channel-display.--active *, html body modal#channels content .channels .channel-display.--active, html body modal#channels content .channels .channel-display.--active *, html body modal#import-job content .channels .channel-display.--active, html body modal#import-job content .channels .channel-display.--active *, html body modal#text-block content .channels .channel-display.--active, html body modal#text-block content .channels .channel-display.--active *, html body modal#contacts content .channels .channel-display.--active, html body modal#contacts content .channels .channel-display.--active *, html body modal#labels content .channels .channel-display.--active, html body modal#labels content .channels .channel-display.--active *, html body modal#rules content .channels .channel-display.--active, html body modal#rules content .channels .channel-display.--active *, html body modal.settings content .channels .channel-display.--active, html body modal.settings content .channels .channel-display.--active *, html body modal#group-edit content .channels .channel-display.--active, html body modal#group-edit content .channels .channel-display.--active *, html body modal#hooks content .channels .channel-display.--active, html body modal#hooks content .channels .channel-display.--active * {
  color: white;
}
html body modal#user content div.help, html body modal#channels content div.help, html body modal#import-job content div.help, html body modal#text-block content div.help, html body modal#contacts content div.help, html body modal#labels content div.help, html body modal#rules content div.help, html body modal.settings content div.help, html body modal#group-edit content div.help, html body modal#hooks content div.help {
  margin: 2rem;
}
html body modal#user content form .help, html body modal#channels content form .help, html body modal#import-job content form .help, html body modal#text-block content form .help, html body modal#contacts content form .help, html body modal#labels content form .help, html body modal#rules content form .help, html body modal.settings content form .help, html body modal#group-edit content form .help, html body modal#hooks content form .help {
  margin: 0 0 2rem 0;
}
html body modal#user content form input:has(+ .help), html body modal#user content form select:has(+ .help), html body modal#user content form textarea:has(+ .help), html body modal#channels content form input:has(+ .help), html body modal#channels content form select:has(+ .help), html body modal#channels content form textarea:has(+ .help), html body modal#import-job content form input:has(+ .help), html body modal#import-job content form select:has(+ .help), html body modal#import-job content form textarea:has(+ .help), html body modal#text-block content form input:has(+ .help), html body modal#text-block content form select:has(+ .help), html body modal#text-block content form textarea:has(+ .help), html body modal#contacts content form input:has(+ .help), html body modal#contacts content form select:has(+ .help), html body modal#contacts content form textarea:has(+ .help), html body modal#labels content form input:has(+ .help), html body modal#labels content form select:has(+ .help), html body modal#labels content form textarea:has(+ .help), html body modal#rules content form input:has(+ .help), html body modal#rules content form select:has(+ .help), html body modal#rules content form textarea:has(+ .help), html body modal.settings content form input:has(+ .help), html body modal.settings content form select:has(+ .help), html body modal.settings content form textarea:has(+ .help), html body modal#group-edit content form input:has(+ .help), html body modal#group-edit content form select:has(+ .help), html body modal#group-edit content form textarea:has(+ .help), html body modal#hooks content form input:has(+ .help), html body modal#hooks content form select:has(+ .help), html body modal#hooks content form textarea:has(+ .help) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
html body modal#user content form input:has(+ .help) + .help, html body modal#user content form select:has(+ .help) + .help, html body modal#user content form textarea:has(+ .help) + .help, html body modal#channels content form input:has(+ .help) + .help, html body modal#channels content form select:has(+ .help) + .help, html body modal#channels content form textarea:has(+ .help) + .help, html body modal#import-job content form input:has(+ .help) + .help, html body modal#import-job content form select:has(+ .help) + .help, html body modal#import-job content form textarea:has(+ .help) + .help, html body modal#text-block content form input:has(+ .help) + .help, html body modal#text-block content form select:has(+ .help) + .help, html body modal#text-block content form textarea:has(+ .help) + .help, html body modal#contacts content form input:has(+ .help) + .help, html body modal#contacts content form select:has(+ .help) + .help, html body modal#contacts content form textarea:has(+ .help) + .help, html body modal#labels content form input:has(+ .help) + .help, html body modal#labels content form select:has(+ .help) + .help, html body modal#labels content form textarea:has(+ .help) + .help, html body modal#rules content form input:has(+ .help) + .help, html body modal#rules content form select:has(+ .help) + .help, html body modal#rules content form textarea:has(+ .help) + .help, html body modal.settings content form input:has(+ .help) + .help, html body modal.settings content form select:has(+ .help) + .help, html body modal.settings content form textarea:has(+ .help) + .help, html body modal#group-edit content form input:has(+ .help) + .help, html body modal#group-edit content form select:has(+ .help) + .help, html body modal#group-edit content form textarea:has(+ .help) + .help, html body modal#hooks content form input:has(+ .help) + .help, html body modal#hooks content form select:has(+ .help) + .help, html body modal#hooks content form textarea:has(+ .help) + .help {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
html body modal#user content label, html body modal#channels content label, html body modal#import-job content label, html body modal#text-block content label, html body modal#contacts content label, html body modal#labels content label, html body modal#rules content label, html body modal.settings content label, html body modal#group-edit content label, html body modal#hooks content label {
  background: none;
  border-radius: 0;
  display: block;
  font-size: 0.75rem;
  margin: 0;
  color: unset;
  padding: 0;
}
html body modal#user content input,
html body modal#user content select,
html body modal#user content hr,
html body modal#user content textarea, html body modal#channels content input,
html body modal#channels content select,
html body modal#channels content hr,
html body modal#channels content textarea, html body modal#import-job content input,
html body modal#import-job content select,
html body modal#import-job content hr,
html body modal#import-job content textarea, html body modal#text-block content input,
html body modal#text-block content select,
html body modal#text-block content hr,
html body modal#text-block content textarea, html body modal#contacts content input,
html body modal#contacts content select,
html body modal#contacts content hr,
html body modal#contacts content textarea, html body modal#labels content input,
html body modal#labels content select,
html body modal#labels content hr,
html body modal#labels content textarea, html body modal#rules content input,
html body modal#rules content select,
html body modal#rules content hr,
html body modal#rules content textarea, html body modal.settings content input,
html body modal.settings content select,
html body modal.settings content hr,
html body modal.settings content textarea, html body modal#group-edit content input,
html body modal#group-edit content select,
html body modal#group-edit content hr,
html body modal#group-edit content textarea, html body modal#hooks content input,
html body modal#hooks content select,
html body modal#hooks content hr,
html body modal#hooks content textarea {
  background-color: var(--area-color);
  width: 100%;
  margin-bottom: 2rem;
}
html body modal#user content textarea, html body modal#channels content textarea, html body modal#import-job content textarea, html body modal#text-block content textarea, html body modal#contacts content textarea, html body modal#labels content textarea, html body modal#rules content textarea, html body modal.settings content textarea, html body modal#group-edit content textarea, html body modal#hooks content textarea {
  min-height: 16.2rem;
  padding: 0.75rem 1rem;
  resize: none;
}
html body modal#user content hr, html body modal#channels content hr, html body modal#import-job content hr, html body modal#text-block content hr, html body modal#contacts content hr, html body modal#labels content hr, html body modal#rules content hr, html body modal.settings content hr, html body modal#group-edit content hr, html body modal#hooks content hr {
  display: inline-block;
  border: none;
  height: 1px;
  margin: 1rem 0;
}
html body modal#user h1 + form, html body modal#channels h1 + form, html body modal#import-job h1 + form, html body modal#text-block h1 + form, html body modal#contacts h1 + form, html body modal#labels h1 + form, html body modal#rules h1 + form, html body modal.settings h1 + form, html body modal#group-edit h1 + form, html body modal#hooks h1 + form {
  margin-top: 2rem;
}
html body modal#user form, html body modal#channels form, html body modal#import-job form, html body modal#text-block form, html body modal#contacts form, html body modal#labels form, html body modal#rules form, html body modal.settings form, html body modal#group-edit form, html body modal#hooks form {
  padding: 0 1.5rem;
}
html body modal#user form label:has(i), html body modal#channels form label:has(i), html body modal#import-job form label:has(i), html body modal#text-block form label:has(i), html body modal#contacts form label:has(i), html body modal#labels form label:has(i), html body modal#rules form label:has(i), html body modal.settings form label:has(i), html body modal#group-edit form label:has(i), html body modal#hooks form label:has(i) {
  display: flex;
  align-items: start;
}
html body modal#user h2 i, html body modal#user form label i, html body modal#channels h2 i, html body modal#channels form label i, html body modal#import-job h2 i, html body modal#import-job form label i, html body modal#text-block h2 i, html body modal#text-block form label i, html body modal#contacts h2 i, html body modal#contacts form label i, html body modal#labels h2 i, html body modal#labels form label i, html body modal#rules h2 i, html body modal#rules form label i, html body modal.settings h2 i, html body modal.settings form label i, html body modal#group-edit h2 i, html body modal#group-edit form label i, html body modal#hooks h2 i, html body modal#hooks form label i {
  font-size: 0.75rem;
  opacity: 0.5;
  flex: 1;
  text-align: right;
  font-style: normal;
  z-index: 1;
}
html body modal#user h2,
html body modal#user div.buttons, html body modal#channels h2,
html body modal#channels div.buttons, html body modal#import-job h2,
html body modal#import-job div.buttons, html body modal#text-block h2,
html body modal#text-block div.buttons, html body modal#contacts h2,
html body modal#contacts div.buttons, html body modal#labels h2,
html body modal#labels div.buttons, html body modal#rules h2,
html body modal#rules div.buttons, html body modal.settings h2,
html body modal.settings div.buttons, html body modal#group-edit h2,
html body modal#group-edit div.buttons, html body modal#hooks h2,
html body modal#hooks div.buttons {
  margin: 0;
  position: sticky;
  position: -webkit-sticky;
  top: 4.5rem;
  padding: 1rem 1.5rem;
  background: var(--b);
  margin: 0 -1.5rem;
  z-index: 1;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
  line-height: 1;
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
html body modal#user h2 .error,
html body modal#user div.buttons .error, html body modal#channels h2 .error,
html body modal#channels div.buttons .error, html body modal#import-job h2 .error,
html body modal#import-job div.buttons .error, html body modal#text-block h2 .error,
html body modal#text-block div.buttons .error, html body modal#contacts h2 .error,
html body modal#contacts div.buttons .error, html body modal#labels h2 .error,
html body modal#labels div.buttons .error, html body modal#rules h2 .error,
html body modal#rules div.buttons .error, html body modal.settings h2 .error,
html body modal.settings div.buttons .error, html body modal#group-edit h2 .error,
html body modal#group-edit div.buttons .error, html body modal#hooks h2 .error,
html body modal#hooks div.buttons .error {
  padding: 0.5rem 1rem;
  animation: hint 2s ease 1 forwards;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex: 1;
  line-height: 1;
}
html body modal#user h2 .error,
html body modal#user h2 .error *,
html body modal#user div.buttons .error,
html body modal#user div.buttons .error *, html body modal#channels h2 .error,
html body modal#channels h2 .error *,
html body modal#channels div.buttons .error,
html body modal#channels div.buttons .error *, html body modal#import-job h2 .error,
html body modal#import-job h2 .error *,
html body modal#import-job div.buttons .error,
html body modal#import-job div.buttons .error *, html body modal#text-block h2 .error,
html body modal#text-block h2 .error *,
html body modal#text-block div.buttons .error,
html body modal#text-block div.buttons .error *, html body modal#contacts h2 .error,
html body modal#contacts h2 .error *,
html body modal#contacts div.buttons .error,
html body modal#contacts div.buttons .error *, html body modal#labels h2 .error,
html body modal#labels h2 .error *,
html body modal#labels div.buttons .error,
html body modal#labels div.buttons .error *, html body modal#rules h2 .error,
html body modal#rules h2 .error *,
html body modal#rules div.buttons .error,
html body modal#rules div.buttons .error *, html body modal.settings h2 .error,
html body modal.settings h2 .error *,
html body modal.settings div.buttons .error,
html body modal.settings div.buttons .error *, html body modal#group-edit h2 .error,
html body modal#group-edit h2 .error *,
html body modal#group-edit div.buttons .error,
html body modal#group-edit div.buttons .error *, html body modal#hooks h2 .error,
html body modal#hooks h2 .error *,
html body modal#hooks div.buttons .error,
html body modal#hooks div.buttons .error * {
  color: red;
}
html body modal#user h2.buttons,
html body modal#user div.buttons.buttons, html body modal#channels h2.buttons,
html body modal#channels div.buttons.buttons, html body modal#import-job h2.buttons,
html body modal#import-job div.buttons.buttons, html body modal#text-block h2.buttons,
html body modal#text-block div.buttons.buttons, html body modal#contacts h2.buttons,
html body modal#contacts div.buttons.buttons, html body modal#labels h2.buttons,
html body modal#labels div.buttons.buttons, html body modal#rules h2.buttons,
html body modal#rules div.buttons.buttons, html body modal.settings h2.buttons,
html body modal.settings div.buttons.buttons, html body modal#group-edit h2.buttons,
html body modal#group-edit div.buttons.buttons, html body modal#hooks h2.buttons,
html body modal#hooks div.buttons.buttons {
  top: unset;
  bottom: 0;
  margin: 2rem 0 0 0;
  border-top: solid 1px rgba(0, 0, 0, 0.05);
  border-bottom: none;
  justify-content: end;
  width: unset;
  padding: 1.5rem;
}
html body modal#user h2.buttons button.--delete,
html body modal#user div.buttons.buttons button.--delete, html body modal#channels h2.buttons button.--delete,
html body modal#channels div.buttons.buttons button.--delete, html body modal#import-job h2.buttons button.--delete,
html body modal#import-job div.buttons.buttons button.--delete, html body modal#text-block h2.buttons button.--delete,
html body modal#text-block div.buttons.buttons button.--delete, html body modal#contacts h2.buttons button.--delete,
html body modal#contacts div.buttons.buttons button.--delete, html body modal#labels h2.buttons button.--delete,
html body modal#labels div.buttons.buttons button.--delete, html body modal#rules h2.buttons button.--delete,
html body modal#rules div.buttons.buttons button.--delete, html body modal.settings h2.buttons button.--delete,
html body modal.settings div.buttons.buttons button.--delete, html body modal#group-edit h2.buttons button.--delete,
html body modal#group-edit div.buttons.buttons button.--delete, html body modal#hooks h2.buttons button.--delete,
html body modal#hooks div.buttons.buttons button.--delete {
  border-radius: var(--size-border-radius);
}
html body modal#user input[type=checkbox], html body modal#channels input[type=checkbox], html body modal#import-job input[type=checkbox], html body modal#text-block input[type=checkbox], html body modal#contacts input[type=checkbox], html body modal#labels input[type=checkbox], html body modal#rules input[type=checkbox], html body modal.settings input[type=checkbox], html body modal#group-edit input[type=checkbox], html body modal#hooks input[type=checkbox] {
  --_size: 1.5rem;
  padding: 0 !important;
  width: var(--_size);
  height: var(--_size);
  min-width: var(--_size);
  min-height: var(--_size);
  max-width: var(--_size);
  max-height: var(--_size);
  accent-color: var(--color-primary);
  appearance: auto;
  -webkit-appearance: auto;
}
html body modal#user div.checkbox, html body modal#channels div.checkbox, html body modal#import-job div.checkbox, html body modal#text-block div.checkbox, html body modal#contacts div.checkbox, html body modal#labels div.checkbox, html body modal#rules div.checkbox, html body modal.settings div.checkbox, html body modal#group-edit div.checkbox, html body modal#hooks div.checkbox {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  cursor: pointer;
}
html body modal#user div.checkbox input, html body modal#channels div.checkbox input, html body modal#import-job div.checkbox input, html body modal#text-block div.checkbox input, html body modal#contacts div.checkbox input, html body modal#labels div.checkbox input, html body modal#rules div.checkbox input, html body modal.settings div.checkbox input, html body modal#group-edit div.checkbox input, html body modal#hooks div.checkbox input {
  margin: 0;
}
html body modal#user div.checkbox label, html body modal#channels div.checkbox label, html body modal#import-job div.checkbox label, html body modal#text-block div.checkbox label, html body modal#contacts div.checkbox label, html body modal#labels div.checkbox label, html body modal#rules div.checkbox label, html body modal.settings div.checkbox label, html body modal#group-edit div.checkbox label, html body modal#hooks div.checkbox label {
  display: flex;
  justify-content: flex-start;
  flex: 1;
}
html body modal#user table, html body modal#channels table, html body modal#import-job table, html body modal#text-block table, html body modal#contacts table, html body modal#labels table, html body modal#rules table, html body modal.settings table, html body modal#group-edit table, html body modal#hooks table {
  border-collapse: collapse;
  width: 100%;
}
html body modal#user table th,
html body modal#user table td, html body modal#channels table th,
html body modal#channels table td, html body modal#import-job table th,
html body modal#import-job table td, html body modal#text-block table th,
html body modal#text-block table td, html body modal#contacts table th,
html body modal#contacts table td, html body modal#labels table th,
html body modal#labels table td, html body modal#rules table th,
html body modal#rules table td, html body modal.settings table th,
html body modal.settings table td, html body modal#group-edit table th,
html body modal#group-edit table td, html body modal#hooks table th,
html body modal#hooks table td {
  text-align: left;
  padding: 0.5rem 1rem;
}
html body modal#user table th:first-child,
html body modal#user table td:first-child, html body modal#channels table th:first-child,
html body modal#channels table td:first-child, html body modal#import-job table th:first-child,
html body modal#import-job table td:first-child, html body modal#text-block table th:first-child,
html body modal#text-block table td:first-child, html body modal#contacts table th:first-child,
html body modal#contacts table td:first-child, html body modal#labels table th:first-child,
html body modal#labels table td:first-child, html body modal#rules table th:first-child,
html body modal#rules table td:first-child, html body modal.settings table th:first-child,
html body modal.settings table td:first-child, html body modal#group-edit table th:first-child,
html body modal#group-edit table td:first-child, html body modal#hooks table th:first-child,
html body modal#hooks table td:first-child {
  width: 100%;
  padding-left: 0;
}
html body modal#user table th:last-child,
html body modal#user table td:last-child, html body modal#channels table th:last-child,
html body modal#channels table td:last-child, html body modal#import-job table th:last-child,
html body modal#import-job table td:last-child, html body modal#text-block table th:last-child,
html body modal#text-block table td:last-child, html body modal#contacts table th:last-child,
html body modal#contacts table td:last-child, html body modal#labels table th:last-child,
html body modal#labels table td:last-child, html body modal#rules table th:last-child,
html body modal#rules table td:last-child, html body modal.settings table th:last-child,
html body modal.settings table td:last-child, html body modal#group-edit table th:last-child,
html body modal#group-edit table td:last-child, html body modal#hooks table th:last-child,
html body modal#hooks table td:last-child {
  padding-right: 0;
}
html body modal#user button, html body modal#channels button, html body modal#import-job button, html body modal#text-block button, html body modal#contacts button, html body modal#labels button, html body modal#rules button, html body modal.settings button, html body modal#group-edit button, html body modal#hooks button {
  margin: 0;
  min-width: 16ch;
  padding: 1rem 1.5rem;
}

.--delete {
  display: flex;
  align-items: center;
  border: solid 1px currentColor;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  text-transform: uppercase;
  font-size: 0.675rem;
  height: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  color: red;
  border-color: red;
  width: max-content;
  gap: 0.5rem;
  background: none;
}
.--delete i {
  font-size: 0.75rem;
  color: red;
}

.help {
  padding: 1rem;
  color: var(--color-info);
  padding-left: 2.5rem;
  position: relative;
  margin: 1rem 0;
  white-space: pre-wrap;
  background: color-mix(in srgb, currentColor, transparent 90%);
  border-radius: var(--size-border-radius);
  line-height: 1.65;
}
.help strong,
.help pre,
.help i {
  color: currentColor;
}
.help i.icon.circle-info {
  top: 1rem;
  left: 1rem;
  font-size: 1.5em;
  transform: translateY(7%);
  position: absolute;
}
.help pre {
  display: inline-flex;
  gap: 0.25rem;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  margin: 0 5px;
  font-size: 0.875em;
  cursor: pointer;
  position: relative;
  font-weight: bold;
  margin: 2px;
  align-items: center;
}
.help pre::after {
  display: inline-block;
  position: absolute;
  content: "Kopiert!";
  bottom: 100%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 5px;
  width: 60px;
  text-align: center;
  background: black;
  color: white;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
  transition: all 0.5s 1s;
}
.help pre:active::after {
  opacity: 1;
  transition: all 0.1s 0s;
}

.ct.ct--top *,
.ct.ct--bottom * {
  color: white !important;
  transition: none;
}

@keyframes hint {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  25% {
    transform: translateY(0%);
    opacity: 1;
  }
  75% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(50%);
    opacity: 0;
  }
}
html body .selectable {
  position: relative;
  isolation: isolate;
}
html body .selectable > select {
  cursor: pointer;
  position: absolute;
  padding: 0;
  height: unset;
  min-height: unset;
  background: none;
  border: none;
  color: transparent;
  inset: 0;
}
html body .selectable.--editable select {
  height: 2rem;
  width: calc(100% + 3rem);
  transform: translate(-0.75rem, calc(-0.5rem + 1px));
}
html body .selectable.--editable::after {
  opacity: 0;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  height: 2rem;
  width: calc(100% + 3rem);
  transform: translate(-0.75rem, calc(-0.5rem + 1px));
  background: var(--c05) url("/asset/icons/pen-circle.svg") no-repeat calc(100% - 0.5rem) center/auto 1.25rem;
  transition: opacity 0.25s;
  z-index: -1;
}
html body .selectable.--editable:hover::after {
  opacity: 1;
}

async-comment {
  opacity: 0;
  transition: opacity 0.5s;
  display: block;
}

async-comment.--loaded {
  opacity: 1;
}

.day-row, item-dialog, modal content {
  background: var(--background-page);
}

.--deletable {
  position: relative;
  overflow: clip;
  transition-duration: 0;
}
.--deletable:hover::after {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  content: "(remove)";
  background: color-mix(in srgb, var(--b), transparent 15%) !important;
  backdrop-filter: blur(5px);
  border: solid 1px var(--b) !important;
  cursor: pointer;
  color: var(--font-color) !important;
  inset: 1px !important;
  border-radius: 1rem !important;
}
@media screen and (prefers-color-scheme: dark) {
  .--deletable:hover::after {
    color: white !important;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --a: rgba(0, 0, 0, 0.2);
    --b: rgb(48, 48, 48);
    --c05: rgba(255, 255, 255, 0.05);
  }

  html {
    color: white;
  }
  html, html body, html .day-row, html item-dialog, html modal content, html ticket-edit .overlay::before {
    background: color-mix(in srgb, var(--background-page), black 85%) !important;
  }
  html body * {
    color: white;
  }
}
select option {
  color: #202020 !important;
}

html body .blink {
  animation: shadow-blink 1s ease-in-out 4;
  /* blink 4 times */
}

@keyframes shadow-blink {
  0%, 100% {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-info) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-info) 75%, transparent);
  }
}
.toast {
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  right: 4rem;
  margin: auto;
  width: max-content;
  background: var(--color-info);
  color: white;
  padding: 1rem;
  border-radius: var(--size-border-radius);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
  display: flex;
  gap: 2rem;
  align-items: center;
  transform: translateY(calc(100% + 8rem));
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
  z-index: 100;
}
.toast.--shown {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: visibility 0s 0s, opacity 0.5s, transform 0.5s;
}
.toast * {
  color: inherit;
}

#deferred-send span:first-child {
  display: block;
  width: 2rem;
  height: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#deferred-send span:first-child::after {
  content: "";
  display: block;
  border-radius: 50%;
  border-top: solid 2px currentColor;
  border-bottom: solid 2px currentColor;
  border-left: solid 2px transparent;
  border-right: solid 2px transparent;
  position: absolute;
  inset: 0;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#deferred-send span:last-child {
  padding: 0.5rem 1rem;
  border: solid 1px currentColor;
  cursor: pointer;
  border-radius: var(--size-border-radius);
}

.channel-display {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  text-transform: uppercase;
}
.channel-display span {
  font-weight: bold;
}
.channel-display i.--L {
  font-size: 1.5rem;
}

input[type=color] {
  background-color: var(--color, var(--area-color)) !important;
  transition: none !important;
}
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type=color]::-webkit-color-swatch {
  border: 0;
  border-radius: 0;
}
input[type=color]::-moz-color-swatch, input[type=color]::-moz-focus-inner {
  border: 0;
}
input[type=color]::-moz-focus-inner {
  padding: 0;
}

:root {
  --font-family: "Open Sans";
  --font-size: 0.8125rem;
  --font-color: #323232;
  --size-border-radius: 0.25rem;
  --button-border: none;
  --input-border: solid 0px transparent;
  --background-page: #fafafa;
  --b: white;
  --size-block: 2.5rem;
  --shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.05);
  --time-animation: 1s;
  --size-offset: 1rem;
  --transition-time: 0.25s;
  --button-primary: var(--color-primary);
  --max-width: 1200px;
  --comment-color: rgba(255, 228, 145, 0.5);
  --c05: color-mix(in srgb, var(--font-color), transparent 95%);
  --c10: color-mix(in srgb, var(--font-color), transparent 90%);
  --p05: color-mix(in srgb, var(--color-primary), transparent 95%);
  --b: white;
  --a: color-mix(in srgb, var(--font-color), transparent 95%);
  --area-color: var(--a);
  --background-block: var(--b);
  --color-info: #145988;
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-info: #2e8dcd;
  }
}
@media screen and (max-width: 1500px) {
  :root {
    --font-size: 0.75rem;
  }
}

@font-face {
  font-family: "LG Smart";
  src: url("/font/lg-smart.regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "LG Smart";
  src: url("/font/lg-smart.bold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "LG Smart";
  src: url("/font/lg-smart.light.woff") format("woff");
  font-style: normal;
  font-weight: lighter;
}
@font-face {
  font-family: "Open Sans";
  src: url("/font/open-sans.regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("/font/open-sans.bold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "Open Sans";
  src: url("/font/open-sans.light.woff") format("woff");
  font-style: normal;
  font-weight: lighter;
}
html, ticket-edit .overlay::before {
  background: var(--background-page);
}

html body {
  overflow: unset !important;
  /* TODO: THIS IS A PROBLEM ? */
  /** ADMIN **/
}
html body .card {
  background: var(--b);
  border-radius: var(--size-border-radius);
  border: solid 1px var(--a);
}
@media screen and (prefers-color-scheme: dark) {
  html body .card {
    border-color: rgba(255, 255, 255, 0.1);
  }
}
html body[data-loading], html body[data-loading] * {
  cursor: progress !important;
}
html body > [page="/"] {
  overflow: clip;
}
html body .toggle-select {
  display: inline-block;
  min-height: 20px;
  height: 20px;
  width: 45px;
  border-radius: 10px;
  background: var(--area-color);
  position: relative;
}
html body .toggle-select::after {
  content: "";
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  top: 4px;
  transition: all var(--time-transition);
}
html body .toggle-select.--active {
  background: var(--color-primary, var(--area-color));
}
html body .toggle-select.--active::after {
  left: 29px;
}
html body button {
  justify-content: center;
  align-items: center;
  transition: all var(--time-transition);
}
html body button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid white 2px;
  border-color: white transparent white transparent;
  animation: rotate 1.2s linear infinite;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transition: all var(--time-transition);
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
html body button[in-action] {
  color: transparent;
}
html body button[in-action]::before {
  opacity: 1;
}
html body label {
  font-size: 0.75em;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  background: black;
  border: solid black 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  min-width: 60px;
  white-space: nowrap;
}
html body label.add {
  text-transform: uppercase;
  background: none;
  border: solid 1px currentColor;
  color: unset;
  background: none;
  cursor: pointer;
  position: relative;
}
html body label.add i {
  margin-right: 0.5rem;
}
html body label:has(i) > span, html body label::before {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
html body label i {
  font-size: 0.75rem !important;
}
html body label i.close.close {
  color: white;
  position: unset;
  height: unset;
  width: unset;
  margin-left: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
html body label.--folder {
  height: 1.5rem;
  display: flex;
  align-items: center;
  grid-gap: 0.5rem;
  border: dotted 1px currentColor;
  color: unset;
  background: none;
}
html body label.--folder.add {
  text-transform: uppercase;
  border: solid 1px currentColor;
}
html body label.--folder.add i {
  margin-right: 0;
}
html body label.--folder span {
  margin: 0 !important;
}
html body label.--folder * {
  color: currentColor;
}
html body label.--folder i {
  padding: 0 !important;
  min-width: unset !important;
}
html body label[label]::before, html body label[channel]::before, html body label[status]::before, html body label[flag]::before {
  display: inline-block;
}
html body label[channel] {
  background: var(--color-primary) !important;
}
html body label span,
html body label strong,
html body label input {
  color: white;
  font-size: calc(var(--font-size) - 4px);
}
html body label.--alternate {
  border-color: var(--font-color);
  background: color-mix(in srgb, var(--area-color), transparent 90%);
  color: var(--font-color);
  border-width: 1px;
}
html body label.--alternate span,
html body label.--alternate strong,
html body label.--alternate input {
  color: var(--font-color);
}
@media screen and (prefers-color-scheme: dark) {
  html body label.--alternate {
    color: white;
    border-color: currentColor;
  }
}
html body label.--user {
  background: white;
  border: solid 1px var(--font-color);
  color: var(--font-color) !important;
}
html body label::before {
  display: inline-block !important;
}
html body label input {
  max-height: 20px;
  height: 20px;
  min-height: unset;
  background: transparent;
  text-align: center;
  width: 60px;
}
html body label input[type=date] {
  width: unset;
}
html body label input::-webkit-inner-spin-button, html body label input::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
html body label.count {
  position: relative;
  padding-left: 50px;
  overflow: hidden;
}
html body label.count > span.count {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  width: 40px;
  display: flex;
  place-content: center;
  place-items: center;
  border-radius: 2px;
}
html body label.count.large {
  padding-left: 70px;
}
html body label.count.large > span.count {
  width: 60px;
}
html body modal content {
  padding: 1.5rem !important;
  border-radius: var(--size-border-radius) !important;
  max-width: min(1800px, calc(100vw - 40px)) !important;
  height: calc(100% - 2 * var(--size-offset));
  min-height: calc(100% - 2 * var(--size-offset));
  max-height: calc(100% - 2 * var(--size-offset));
  overflow: hidden !important;
  width: 100% !important;
}
html body modal content h1 {
  margin-bottom: 1em;
  line-height: 1;
}
html body modal content > i.close.close {
  top: -1px;
  right: 0px;
  font-size: 20px;
  z-index: 3;
  padding: 1.5rem;
  height: unset;
  width: unset;
}
html body modal#item-dialog content {
  padding: 0 !important;
}
html body modal#feedback content {
  display: flex;
  flex-direction: column;
}
html body button {
  margin: 0 var(--size-offset);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all var(--time-transition);
  font-weight: normal;
}
html body button:hover {
  opacity: 0.9;
}
html body button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: solid white 2px;
  border-color: white transparent white transparent;
  animation: rotate 1.2s linear infinite;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  transition: all var(--time-transition);
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
html body button[in-action] {
  color: transparent;
}
html body button[in-action]::before {
  opacity: 1;
}
html body input,
html body select {
  padding: 0 var(--size-offset) 0 var(--size-offset) !important;
  -webkit-appearance: none;
}
html body select {
  background: var(--b) url("/icon/chevron-down.svg") no-repeat right var(--size-offset) center/auto 50%;
}
html body button,
html body input,
html body textarea,
html body select {
  box-shadow: none;
}
html body [page][load-in] {
  animation: come-in var(--time-animation) ease;
}
@keyframes come-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
html body [page][load-out] {
  animation: come-out var(--time-animation) ease;
}
@keyframes come-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
html body users > footer,
html body hooks > footer,
html body channels > footer,
html body signatures > footer,
html body text-block > footer,
html body sticky-notes.--admin > footer,
html body contact-book > footer,
html body label-list > footer,
html body rule-list > footer {
  background: var(--b);
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  padding: 1rem 1.5rem;
  margin: 4rem -1.5rem -1.5rem -1.5rem;
  border-top: solid 1px var(--area-color);
}
html body users > footer > div.search,
html body hooks > footer > div.search,
html body channels > footer > div.search,
html body signatures > footer > div.search,
html body text-block > footer > div.search,
html body sticky-notes.--admin > footer > div.search,
html body contact-book > footer > div.search,
html body label-list > footer > div.search,
html body rule-list > footer > div.search {
  position: relative;
  border-radius: var(--size-border-radius);
}
html body users > footer > div.search i,
html body hooks > footer > div.search i,
html body channels > footer > div.search i,
html body signatures > footer > div.search i,
html body text-block > footer > div.search i,
html body sticky-notes.--admin > footer > div.search i,
html body contact-book > footer > div.search i,
html body label-list > footer > div.search i,
html body rule-list > footer > div.search i {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  display: flex;
  align-items: center;
  font-size: 1rem;
  padding: 0 1rem;
}
html body users > footer > div.search input,
html body hooks > footer > div.search input,
html body channels > footer > div.search input,
html body signatures > footer > div.search input,
html body text-block > footer > div.search input,
html body sticky-notes.--admin > footer > div.search input,
html body contact-book > footer > div.search input,
html body label-list > footer > div.search input,
html body rule-list > footer > div.search input {
  background: none;
  padding-left: 2.5rem !important;
  color: var(--color-primary);
  font-weight: bold;
}
html body users > header,
html body hooks > header,
html body channels > header,
html body signatures > header,
html body text-block > header,
html body sticky-notes.--admin > header,
html body contact-book > header,
html body label-list > header,
html body rule-list > header {
  display: grid;
  gap: 1rem;
}
html body users > header a,
html body hooks > header a,
html body channels > header a,
html body signatures > header a,
html body text-block > header a,
html body sticky-notes.--admin > header a,
html body contact-book > header a,
html body label-list > header a,
html body rule-list > header a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  width: max-content;
}
html body users > header h1,
html body hooks > header h1,
html body channels > header h1,
html body signatures > header h1,
html body text-block > header h1,
html body sticky-notes.--admin > header h1,
html body contact-book > header h1,
html body label-list > header h1,
html body rule-list > header h1 {
  margin: 0;
}
html body users > button,
html body hooks > button,
html body channels > button,
html body signatures > button,
html body text-block > button,
html body sticky-notes.--admin > button,
html body contact-book > button,
html body label-list > button,
html body rule-list > button {
  margin: 0;
  width: fit-content;
  padding-left: 2rem;
  padding-right: 2rem;
}
html body users > table,
html body hooks > table,
html body channels > table,
html body signatures > table,
html body text-block > table,
html body sticky-notes.--admin > table,
html body contact-book > table,
html body label-list > table,
html body rule-list > table {
  border-collapse: collapse;
}
html body users > table tr:first-child,
html body hooks > table tr:first-child,
html body channels > table tr:first-child,
html body signatures > table tr:first-child,
html body text-block > table tr:first-child,
html body sticky-notes.--admin > table tr:first-child,
html body contact-book > table tr:first-child,
html body label-list > table tr:first-child,
html body rule-list > table tr:first-child {
  background: var(--b);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}
html body users > table tr th:last-child,
html body hooks > table tr th:last-child,
html body channels > table tr th:last-child,
html body signatures > table tr th:last-child,
html body text-block > table tr th:last-child,
html body sticky-notes.--admin > table tr th:last-child,
html body contact-book > table tr th:last-child,
html body label-list > table tr th:last-child,
html body rule-list > table tr th:last-child {
  position: relative;
}
html body users > table tr th:last-child button,
html body hooks > table tr th:last-child button,
html body channels > table tr th:last-child button,
html body signatures > table tr th:last-child button,
html body text-block > table tr th:last-child button,
html body sticky-notes.--admin > table tr th:last-child button,
html body contact-book > table tr th:last-child button,
html body label-list > table tr th:last-child button,
html body rule-list > table tr th:last-child button {
  position: absolute;
  right: 1rem;
  top: 0;
  width: max-content;
  bottom: 0;
  margin: auto;
  padding: 0.75rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: none;
  font-weight: bold;
  color: var(--color-primary);
}
html body users > table tr th:last-child button i,
html body hooks > table tr th:last-child button i,
html body channels > table tr th:last-child button i,
html body signatures > table tr th:last-child button i,
html body text-block > table tr th:last-child button i,
html body sticky-notes.--admin > table tr th:last-child button i,
html body contact-book > table tr th:last-child button i,
html body label-list > table tr th:last-child button i,
html body rule-list > table tr th:last-child button i {
  color: var(--color-primary);
  font-size: 1rem;
}
html body users > table tr:hover td,
html body hooks > table tr:hover td,
html body channels > table tr:hover td,
html body signatures > table tr:hover td,
html body text-block > table tr:hover td,
html body sticky-notes.--admin > table tr:hover td,
html body contact-book > table tr:hover td,
html body label-list > table tr:hover td,
html body rule-list > table tr:hover td {
  background: color-mix(in srgb, var(--area-color), transparent 50%);
  cursor: pointer;
}
html body users > table th,
html body users > table td,
html body hooks > table th,
html body hooks > table td,
html body channels > table th,
html body channels > table td,
html body signatures > table th,
html body signatures > table td,
html body text-block > table th,
html body text-block > table td,
html body sticky-notes.--admin > table th,
html body sticky-notes.--admin > table td,
html body contact-book > table th,
html body contact-book > table td,
html body label-list > table th,
html body label-list > table td,
html body rule-list > table th,
html body rule-list > table td {
  text-align: left;
  padding: 1rem;
  border-radius: va(--size-border-radius);
  border-bottom: solid 1px var(--area-color);
}
html body users > table th .icon.share-from-square-solid,
html body users > table td .icon.share-from-square-solid,
html body hooks > table th .icon.share-from-square-solid,
html body hooks > table td .icon.share-from-square-solid,
html body channels > table th .icon.share-from-square-solid,
html body channels > table td .icon.share-from-square-solid,
html body signatures > table th .icon.share-from-square-solid,
html body signatures > table td .icon.share-from-square-solid,
html body text-block > table th .icon.share-from-square-solid,
html body text-block > table td .icon.share-from-square-solid,
html body sticky-notes.--admin > table th .icon.share-from-square-solid,
html body sticky-notes.--admin > table td .icon.share-from-square-solid,
html body contact-book > table th .icon.share-from-square-solid,
html body contact-book > table td .icon.share-from-square-solid,
html body label-list > table th .icon.share-from-square-solid,
html body label-list > table td .icon.share-from-square-solid,
html body rule-list > table th .icon.share-from-square-solid,
html body rule-list > table td .icon.share-from-square-solid {
  margin: -0.5rem 0;
  padding: 0.5rem 1rem;
  border: solid 1px var(--area-color);
  border-radius: var(--size-border-radius);
}
html body users > table th .icon.share-from-square-solid:hover,
html body users > table td .icon.share-from-square-solid:hover,
html body hooks > table th .icon.share-from-square-solid:hover,
html body hooks > table td .icon.share-from-square-solid:hover,
html body channels > table th .icon.share-from-square-solid:hover,
html body channels > table td .icon.share-from-square-solid:hover,
html body signatures > table th .icon.share-from-square-solid:hover,
html body signatures > table td .icon.share-from-square-solid:hover,
html body text-block > table th .icon.share-from-square-solid:hover,
html body text-block > table td .icon.share-from-square-solid:hover,
html body sticky-notes.--admin > table th .icon.share-from-square-solid:hover,
html body sticky-notes.--admin > table td .icon.share-from-square-solid:hover,
html body contact-book > table th .icon.share-from-square-solid:hover,
html body contact-book > table td .icon.share-from-square-solid:hover,
html body label-list > table th .icon.share-from-square-solid:hover,
html body label-list > table td .icon.share-from-square-solid:hover,
html body rule-list > table th .icon.share-from-square-solid:hover,
html body rule-list > table td .icon.share-from-square-solid:hover {
  background: var(--area-color);
}
html body users > table th:last-child,
html body users > table td:last-child,
html body hooks > table th:last-child,
html body hooks > table td:last-child,
html body channels > table th:last-child,
html body channels > table td:last-child,
html body signatures > table th:last-child,
html body signatures > table td:last-child,
html body text-block > table th:last-child,
html body text-block > table td:last-child,
html body sticky-notes.--admin > table th:last-child,
html body sticky-notes.--admin > table td:last-child,
html body contact-book > table th:last-child,
html body contact-book > table td:last-child,
html body label-list > table th:last-child,
html body label-list > table td:last-child,
html body rule-list > table th:last-child,
html body rule-list > table td:last-child {
  width: 4ch;
}
html body users > table th.small,
html body users > table td.small,
html body hooks > table th.small,
html body hooks > table td.small,
html body channels > table th.small,
html body channels > table td.small,
html body signatures > table th.small,
html body signatures > table td.small,
html body text-block > table th.small,
html body text-block > table td.small,
html body sticky-notes.--admin > table th.small,
html body sticky-notes.--admin > table td.small,
html body contact-book > table th.small,
html body contact-book > table td.small,
html body label-list > table th.small,
html body label-list > table td.small,
html body rule-list > table th.small,
html body rule-list > table td.small {
  width: 12ch;
}
html body users > table tr:last-child td,
html body hooks > table tr:last-child td,
html body channels > table tr:last-child td,
html body signatures > table tr:last-child td,
html body text-block > table tr:last-child td,
html body sticky-notes.--admin > table tr:last-child td,
html body contact-book > table tr:last-child td,
html body label-list > table tr:last-child td,
html body rule-list > table tr:last-child td {
  border-bottom: none;
}
html body users,
html body hooks,
html body channels,
html body signatures,
html body sticky-notes.--admin,
html body text-block,
html body contact-book,
html body label-list,
html body rule-list {
  margin: var(--size-offset) calc((100% - var(--max-width)) / 2) 4rem calc((100% - var(--max-width)) / 2);
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
  overflow: clip;
}
html body users label:not([label]),
html body hooks label:not([label]),
html body channels label:not([label]),
html body signatures label:not([label]),
html body sticky-notes.--admin label:not([label]),
html body text-block label:not([label]),
html body contact-book label:not([label]),
html body label-list label:not([label]),
html body rule-list label:not([label]) {
  background: none;
  border-radius: 0;
  display: block;
  font-size: 0.75rem;
  margin: 0;
  color: unset;
  padding: 0;
}
html body users input,
html body users select,
html body users hr,
html body users textarea,
html body hooks input,
html body hooks select,
html body hooks hr,
html body hooks textarea,
html body channels input,
html body channels select,
html body channels hr,
html body channels textarea,
html body signatures input,
html body signatures select,
html body signatures hr,
html body signatures textarea,
html body sticky-notes.--admin input,
html body sticky-notes.--admin select,
html body sticky-notes.--admin hr,
html body sticky-notes.--admin textarea,
html body text-block input,
html body text-block select,
html body text-block hr,
html body text-block textarea,
html body contact-book input,
html body contact-book select,
html body contact-book hr,
html body contact-book textarea,
html body label-list input,
html body label-list select,
html body label-list hr,
html body label-list textarea,
html body rule-list input,
html body rule-list select,
html body rule-list hr,
html body rule-list textarea {
  background-color: var(--area-color);
  width: 100%;
}
html body users textarea,
html body hooks textarea,
html body channels textarea,
html body signatures textarea,
html body sticky-notes.--admin textarea,
html body text-block textarea,
html body contact-book textarea,
html body label-list textarea,
html body rule-list textarea {
  resize: none;
}
html body users hr,
html body hooks hr,
html body channels hr,
html body signatures hr,
html body sticky-notes.--admin hr,
html body text-block hr,
html body contact-book hr,
html body label-list hr,
html body rule-list hr {
  display: inline-block;
  border: none;
  height: 1px;
  margin: 1rem 0;
}
html body modal#user label i, html body modal#channels label i, html body modal#import-job label i, html body modal#text-block label i, html body modal#contacts label i, html body modal#labels label i, html body modal#rules label i, html body modal.settings label i, html body modal#group-edit label i, html body modal#hooks label i {
  opacity: 0.75;
  margin-left: 1rem;
  z-index: -1;
  position: relative;
}
html body modal#user h1, html body modal#channels h1, html body modal#import-job h1, html body modal#text-block h1, html body modal#contacts h1, html body modal#labels h1, html body modal#rules h1, html body modal.settings h1, html body modal#group-edit h1, html body modal#hooks h1 {
  padding: 1.5rem;
  margin: 0;
  background: var(--b);
  padding-bottom: 1rem;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 100;
  font-size: 1.5rem;
  height: 4.5rem;
}
html body modal#user h1 i, html body modal#channels h1 i, html body modal#import-job h1 i, html body modal#text-block h1 i, html body modal#contacts h1 i, html body modal#labels h1 i, html body modal#rules h1 i, html body modal.settings h1 i, html body modal#group-edit h1 i, html body modal#hooks h1 i {
  position: absolute;
  padding: 2.5rem;
  right: 0;
  top: 0;
  font-size: 1.5rem;
}
html body modal#user content, html body modal#channels content, html body modal#import-job content, html body modal#text-block content, html body modal#contacts content, html body modal#labels content, html body modal#rules content, html body modal.settings content, html body modal#group-edit content, html body modal#hooks content {
  min-height: auto;
  height: auto;
  max-width: 800px !important;
  padding: 0 !important;
  overflow: clip auto !important;
}
html body modal#user content .channels, html body modal#channels content .channels, html body modal#import-job content .channels, html body modal#text-block content .channels, html body modal#contacts content .channels, html body modal#labels content .channels, html body modal#rules content .channels, html body modal.settings content .channels, html body modal#group-edit content .channels, html body modal#hooks content .channels {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
html body modal#user content .channels .channel-display, html body modal#channels content .channels .channel-display, html body modal#import-job content .channels .channel-display, html body modal#text-block content .channels .channel-display, html body modal#contacts content .channels .channel-display, html body modal#labels content .channels .channel-display, html body modal#rules content .channels .channel-display, html body modal.settings content .channels .channel-display, html body modal#group-edit content .channels .channel-display, html body modal#hooks content .channels .channel-display {
  padding: 0.5rem 0.75rem;
  border-radius: var(--size-border-radius);
  border: solid 1px var(--area-color);
  cursor: pointer;
}
html body modal#user content .channels .channel-display span, html body modal#channels content .channels .channel-display span, html body modal#import-job content .channels .channel-display span, html body modal#text-block content .channels .channel-display span, html body modal#contacts content .channels .channel-display span, html body modal#labels content .channels .channel-display span, html body modal#rules content .channels .channel-display span, html body modal.settings content .channels .channel-display span, html body modal#group-edit content .channels .channel-display span, html body modal#hooks content .channels .channel-display span {
  font-size: 0.75rem;
}
html body modal#user content .channels .channel-display i, html body modal#channels content .channels .channel-display i, html body modal#import-job content .channels .channel-display i, html body modal#text-block content .channels .channel-display i, html body modal#contacts content .channels .channel-display i, html body modal#labels content .channels .channel-display i, html body modal#rules content .channels .channel-display i, html body modal.settings content .channels .channel-display i, html body modal#group-edit content .channels .channel-display i, html body modal#hooks content .channels .channel-display i {
  font-size: 1rem;
}
html body modal#user content .channels .channel-display.--active, html body modal#channels content .channels .channel-display.--active, html body modal#import-job content .channels .channel-display.--active, html body modal#text-block content .channels .channel-display.--active, html body modal#contacts content .channels .channel-display.--active, html body modal#labels content .channels .channel-display.--active, html body modal#rules content .channels .channel-display.--active, html body modal.settings content .channels .channel-display.--active, html body modal#group-edit content .channels .channel-display.--active, html body modal#hooks content .channels .channel-display.--active {
  background: black;
  border-color: transparent;
}
html body modal#user content .channels .channel-display.--active, html body modal#user content .channels .channel-display.--active *, html body modal#channels content .channels .channel-display.--active, html body modal#channels content .channels .channel-display.--active *, html body modal#import-job content .channels .channel-display.--active, html body modal#import-job content .channels .channel-display.--active *, html body modal#text-block content .channels .channel-display.--active, html body modal#text-block content .channels .channel-display.--active *, html body modal#contacts content .channels .channel-display.--active, html body modal#contacts content .channels .channel-display.--active *, html body modal#labels content .channels .channel-display.--active, html body modal#labels content .channels .channel-display.--active *, html body modal#rules content .channels .channel-display.--active, html body modal#rules content .channels .channel-display.--active *, html body modal.settings content .channels .channel-display.--active, html body modal.settings content .channels .channel-display.--active *, html body modal#group-edit content .channels .channel-display.--active, html body modal#group-edit content .channels .channel-display.--active *, html body modal#hooks content .channels .channel-display.--active, html body modal#hooks content .channels .channel-display.--active * {
  color: white;
}
html body modal#user content div.help, html body modal#channels content div.help, html body modal#import-job content div.help, html body modal#text-block content div.help, html body modal#contacts content div.help, html body modal#labels content div.help, html body modal#rules content div.help, html body modal.settings content div.help, html body modal#group-edit content div.help, html body modal#hooks content div.help {
  margin: 2rem;
}
html body modal#user content form .help, html body modal#channels content form .help, html body modal#import-job content form .help, html body modal#text-block content form .help, html body modal#contacts content form .help, html body modal#labels content form .help, html body modal#rules content form .help, html body modal.settings content form .help, html body modal#group-edit content form .help, html body modal#hooks content form .help {
  margin: 0 0 2rem 0;
}
html body modal#user content form input:has(+ .help), html body modal#user content form select:has(+ .help), html body modal#user content form textarea:has(+ .help), html body modal#channels content form input:has(+ .help), html body modal#channels content form select:has(+ .help), html body modal#channels content form textarea:has(+ .help), html body modal#import-job content form input:has(+ .help), html body modal#import-job content form select:has(+ .help), html body modal#import-job content form textarea:has(+ .help), html body modal#text-block content form input:has(+ .help), html body modal#text-block content form select:has(+ .help), html body modal#text-block content form textarea:has(+ .help), html body modal#contacts content form input:has(+ .help), html body modal#contacts content form select:has(+ .help), html body modal#contacts content form textarea:has(+ .help), html body modal#labels content form input:has(+ .help), html body modal#labels content form select:has(+ .help), html body modal#labels content form textarea:has(+ .help), html body modal#rules content form input:has(+ .help), html body modal#rules content form select:has(+ .help), html body modal#rules content form textarea:has(+ .help), html body modal.settings content form input:has(+ .help), html body modal.settings content form select:has(+ .help), html body modal.settings content form textarea:has(+ .help), html body modal#group-edit content form input:has(+ .help), html body modal#group-edit content form select:has(+ .help), html body modal#group-edit content form textarea:has(+ .help), html body modal#hooks content form input:has(+ .help), html body modal#hooks content form select:has(+ .help), html body modal#hooks content form textarea:has(+ .help) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
html body modal#user content form input:has(+ .help) + .help, html body modal#user content form select:has(+ .help) + .help, html body modal#user content form textarea:has(+ .help) + .help, html body modal#channels content form input:has(+ .help) + .help, html body modal#channels content form select:has(+ .help) + .help, html body modal#channels content form textarea:has(+ .help) + .help, html body modal#import-job content form input:has(+ .help) + .help, html body modal#import-job content form select:has(+ .help) + .help, html body modal#import-job content form textarea:has(+ .help) + .help, html body modal#text-block content form input:has(+ .help) + .help, html body modal#text-block content form select:has(+ .help) + .help, html body modal#text-block content form textarea:has(+ .help) + .help, html body modal#contacts content form input:has(+ .help) + .help, html body modal#contacts content form select:has(+ .help) + .help, html body modal#contacts content form textarea:has(+ .help) + .help, html body modal#labels content form input:has(+ .help) + .help, html body modal#labels content form select:has(+ .help) + .help, html body modal#labels content form textarea:has(+ .help) + .help, html body modal#rules content form input:has(+ .help) + .help, html body modal#rules content form select:has(+ .help) + .help, html body modal#rules content form textarea:has(+ .help) + .help, html body modal.settings content form input:has(+ .help) + .help, html body modal.settings content form select:has(+ .help) + .help, html body modal.settings content form textarea:has(+ .help) + .help, html body modal#group-edit content form input:has(+ .help) + .help, html body modal#group-edit content form select:has(+ .help) + .help, html body modal#group-edit content form textarea:has(+ .help) + .help, html body modal#hooks content form input:has(+ .help) + .help, html body modal#hooks content form select:has(+ .help) + .help, html body modal#hooks content form textarea:has(+ .help) + .help {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
html body modal#user content label, html body modal#channels content label, html body modal#import-job content label, html body modal#text-block content label, html body modal#contacts content label, html body modal#labels content label, html body modal#rules content label, html body modal.settings content label, html body modal#group-edit content label, html body modal#hooks content label {
  background: none;
  border-radius: 0;
  display: block;
  font-size: 0.75rem;
  margin: 0;
  color: unset;
  padding: 0;
}
html body modal#user content input,
html body modal#user content select,
html body modal#user content hr,
html body modal#user content textarea, html body modal#channels content input,
html body modal#channels content select,
html body modal#channels content hr,
html body modal#channels content textarea, html body modal#import-job content input,
html body modal#import-job content select,
html body modal#import-job content hr,
html body modal#import-job content textarea, html body modal#text-block content input,
html body modal#text-block content select,
html body modal#text-block content hr,
html body modal#text-block content textarea, html body modal#contacts content input,
html body modal#contacts content select,
html body modal#contacts content hr,
html body modal#contacts content textarea, html body modal#labels content input,
html body modal#labels content select,
html body modal#labels content hr,
html body modal#labels content textarea, html body modal#rules content input,
html body modal#rules content select,
html body modal#rules content hr,
html body modal#rules content textarea, html body modal.settings content input,
html body modal.settings content select,
html body modal.settings content hr,
html body modal.settings content textarea, html body modal#group-edit content input,
html body modal#group-edit content select,
html body modal#group-edit content hr,
html body modal#group-edit content textarea, html body modal#hooks content input,
html body modal#hooks content select,
html body modal#hooks content hr,
html body modal#hooks content textarea {
  background-color: var(--area-color);
  width: 100%;
  margin-bottom: 2rem;
}
html body modal#user content textarea, html body modal#channels content textarea, html body modal#import-job content textarea, html body modal#text-block content textarea, html body modal#contacts content textarea, html body modal#labels content textarea, html body modal#rules content textarea, html body modal.settings content textarea, html body modal#group-edit content textarea, html body modal#hooks content textarea {
  min-height: 16.2rem;
  padding: 0.75rem 1rem;
  resize: none;
}
html body modal#user content hr, html body modal#channels content hr, html body modal#import-job content hr, html body modal#text-block content hr, html body modal#contacts content hr, html body modal#labels content hr, html body modal#rules content hr, html body modal.settings content hr, html body modal#group-edit content hr, html body modal#hooks content hr {
  display: inline-block;
  border: none;
  height: 1px;
  margin: 1rem 0;
}
html body modal#user h1 + form, html body modal#channels h1 + form, html body modal#import-job h1 + form, html body modal#text-block h1 + form, html body modal#contacts h1 + form, html body modal#labels h1 + form, html body modal#rules h1 + form, html body modal.settings h1 + form, html body modal#group-edit h1 + form, html body modal#hooks h1 + form {
  margin-top: 2rem;
}
html body modal#user form, html body modal#channels form, html body modal#import-job form, html body modal#text-block form, html body modal#contacts form, html body modal#labels form, html body modal#rules form, html body modal.settings form, html body modal#group-edit form, html body modal#hooks form {
  padding: 0 1.5rem;
}
html body modal#user form label:has(i), html body modal#channels form label:has(i), html body modal#import-job form label:has(i), html body modal#text-block form label:has(i), html body modal#contacts form label:has(i), html body modal#labels form label:has(i), html body modal#rules form label:has(i), html body modal.settings form label:has(i), html body modal#group-edit form label:has(i), html body modal#hooks form label:has(i) {
  display: flex;
  align-items: start;
}
html body modal#user h2 i, html body modal#user form label i, html body modal#channels h2 i, html body modal#channels form label i, html body modal#import-job h2 i, html body modal#import-job form label i, html body modal#text-block h2 i, html body modal#text-block form label i, html body modal#contacts h2 i, html body modal#contacts form label i, html body modal#labels h2 i, html body modal#labels form label i, html body modal#rules h2 i, html body modal#rules form label i, html body modal.settings h2 i, html body modal.settings form label i, html body modal#group-edit h2 i, html body modal#group-edit form label i, html body modal#hooks h2 i, html body modal#hooks form label i {
  font-size: 0.75rem;
  opacity: 0.5;
  flex: 1;
  text-align: right;
  font-style: normal;
  z-index: 1;
}
html body modal#user h2,
html body modal#user div.buttons, html body modal#channels h2,
html body modal#channels div.buttons, html body modal#import-job h2,
html body modal#import-job div.buttons, html body modal#text-block h2,
html body modal#text-block div.buttons, html body modal#contacts h2,
html body modal#contacts div.buttons, html body modal#labels h2,
html body modal#labels div.buttons, html body modal#rules h2,
html body modal#rules div.buttons, html body modal.settings h2,
html body modal.settings div.buttons, html body modal#group-edit h2,
html body modal#group-edit div.buttons, html body modal#hooks h2,
html body modal#hooks div.buttons {
  margin: 0;
  position: sticky;
  position: -webkit-sticky;
  top: 4.5rem;
  padding: 1rem 1.5rem;
  background: var(--b);
  margin: 0 -1.5rem;
  z-index: 1;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
  line-height: 1;
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
html body modal#user h2 .error,
html body modal#user div.buttons .error, html body modal#channels h2 .error,
html body modal#channels div.buttons .error, html body modal#import-job h2 .error,
html body modal#import-job div.buttons .error, html body modal#text-block h2 .error,
html body modal#text-block div.buttons .error, html body modal#contacts h2 .error,
html body modal#contacts div.buttons .error, html body modal#labels h2 .error,
html body modal#labels div.buttons .error, html body modal#rules h2 .error,
html body modal#rules div.buttons .error, html body modal.settings h2 .error,
html body modal.settings div.buttons .error, html body modal#group-edit h2 .error,
html body modal#group-edit div.buttons .error, html body modal#hooks h2 .error,
html body modal#hooks div.buttons .error {
  padding: 0.5rem 1rem;
  animation: hint 2s ease 1 forwards;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex: 1;
  line-height: 1;
}
html body modal#user h2 .error,
html body modal#user h2 .error *,
html body modal#user div.buttons .error,
html body modal#user div.buttons .error *, html body modal#channels h2 .error,
html body modal#channels h2 .error *,
html body modal#channels div.buttons .error,
html body modal#channels div.buttons .error *, html body modal#import-job h2 .error,
html body modal#import-job h2 .error *,
html body modal#import-job div.buttons .error,
html body modal#import-job div.buttons .error *, html body modal#text-block h2 .error,
html body modal#text-block h2 .error *,
html body modal#text-block div.buttons .error,
html body modal#text-block div.buttons .error *, html body modal#contacts h2 .error,
html body modal#contacts h2 .error *,
html body modal#contacts div.buttons .error,
html body modal#contacts div.buttons .error *, html body modal#labels h2 .error,
html body modal#labels h2 .error *,
html body modal#labels div.buttons .error,
html body modal#labels div.buttons .error *, html body modal#rules h2 .error,
html body modal#rules h2 .error *,
html body modal#rules div.buttons .error,
html body modal#rules div.buttons .error *, html body modal.settings h2 .error,
html body modal.settings h2 .error *,
html body modal.settings div.buttons .error,
html body modal.settings div.buttons .error *, html body modal#group-edit h2 .error,
html body modal#group-edit h2 .error *,
html body modal#group-edit div.buttons .error,
html body modal#group-edit div.buttons .error *, html body modal#hooks h2 .error,
html body modal#hooks h2 .error *,
html body modal#hooks div.buttons .error,
html body modal#hooks div.buttons .error * {
  color: red;
}
html body modal#user h2.buttons,
html body modal#user div.buttons.buttons, html body modal#channels h2.buttons,
html body modal#channels div.buttons.buttons, html body modal#import-job h2.buttons,
html body modal#import-job div.buttons.buttons, html body modal#text-block h2.buttons,
html body modal#text-block div.buttons.buttons, html body modal#contacts h2.buttons,
html body modal#contacts div.buttons.buttons, html body modal#labels h2.buttons,
html body modal#labels div.buttons.buttons, html body modal#rules h2.buttons,
html body modal#rules div.buttons.buttons, html body modal.settings h2.buttons,
html body modal.settings div.buttons.buttons, html body modal#group-edit h2.buttons,
html body modal#group-edit div.buttons.buttons, html body modal#hooks h2.buttons,
html body modal#hooks div.buttons.buttons {
  top: unset;
  bottom: 0;
  margin: 2rem 0 0 0;
  border-top: solid 1px rgba(0, 0, 0, 0.05);
  border-bottom: none;
  justify-content: end;
  width: unset;
  padding: 1.5rem;
}
html body modal#user h2.buttons button.--delete,
html body modal#user div.buttons.buttons button.--delete, html body modal#channels h2.buttons button.--delete,
html body modal#channels div.buttons.buttons button.--delete, html body modal#import-job h2.buttons button.--delete,
html body modal#import-job div.buttons.buttons button.--delete, html body modal#text-block h2.buttons button.--delete,
html body modal#text-block div.buttons.buttons button.--delete, html body modal#contacts h2.buttons button.--delete,
html body modal#contacts div.buttons.buttons button.--delete, html body modal#labels h2.buttons button.--delete,
html body modal#labels div.buttons.buttons button.--delete, html body modal#rules h2.buttons button.--delete,
html body modal#rules div.buttons.buttons button.--delete, html body modal.settings h2.buttons button.--delete,
html body modal.settings div.buttons.buttons button.--delete, html body modal#group-edit h2.buttons button.--delete,
html body modal#group-edit div.buttons.buttons button.--delete, html body modal#hooks h2.buttons button.--delete,
html body modal#hooks div.buttons.buttons button.--delete {
  border-radius: var(--size-border-radius);
}
html body modal#user input[type=checkbox], html body modal#channels input[type=checkbox], html body modal#import-job input[type=checkbox], html body modal#text-block input[type=checkbox], html body modal#contacts input[type=checkbox], html body modal#labels input[type=checkbox], html body modal#rules input[type=checkbox], html body modal.settings input[type=checkbox], html body modal#group-edit input[type=checkbox], html body modal#hooks input[type=checkbox] {
  --_size: 1.5rem;
  padding: 0 !important;
  width: var(--_size);
  height: var(--_size);
  min-width: var(--_size);
  min-height: var(--_size);
  max-width: var(--_size);
  max-height: var(--_size);
  accent-color: var(--color-primary);
  appearance: auto;
  -webkit-appearance: auto;
}
html body modal#user div.checkbox, html body modal#channels div.checkbox, html body modal#import-job div.checkbox, html body modal#text-block div.checkbox, html body modal#contacts div.checkbox, html body modal#labels div.checkbox, html body modal#rules div.checkbox, html body modal.settings div.checkbox, html body modal#group-edit div.checkbox, html body modal#hooks div.checkbox {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  cursor: pointer;
}
html body modal#user div.checkbox input, html body modal#channels div.checkbox input, html body modal#import-job div.checkbox input, html body modal#text-block div.checkbox input, html body modal#contacts div.checkbox input, html body modal#labels div.checkbox input, html body modal#rules div.checkbox input, html body modal.settings div.checkbox input, html body modal#group-edit div.checkbox input, html body modal#hooks div.checkbox input {
  margin: 0;
}
html body modal#user div.checkbox label, html body modal#channels div.checkbox label, html body modal#import-job div.checkbox label, html body modal#text-block div.checkbox label, html body modal#contacts div.checkbox label, html body modal#labels div.checkbox label, html body modal#rules div.checkbox label, html body modal.settings div.checkbox label, html body modal#group-edit div.checkbox label, html body modal#hooks div.checkbox label {
  display: flex;
  justify-content: flex-start;
  flex: 1;
}
html body modal#user table, html body modal#channels table, html body modal#import-job table, html body modal#text-block table, html body modal#contacts table, html body modal#labels table, html body modal#rules table, html body modal.settings table, html body modal#group-edit table, html body modal#hooks table {
  border-collapse: collapse;
  width: 100%;
}
html body modal#user table th,
html body modal#user table td, html body modal#channels table th,
html body modal#channels table td, html body modal#import-job table th,
html body modal#import-job table td, html body modal#text-block table th,
html body modal#text-block table td, html body modal#contacts table th,
html body modal#contacts table td, html body modal#labels table th,
html body modal#labels table td, html body modal#rules table th,
html body modal#rules table td, html body modal.settings table th,
html body modal.settings table td, html body modal#group-edit table th,
html body modal#group-edit table td, html body modal#hooks table th,
html body modal#hooks table td {
  text-align: left;
  padding: 0.5rem 1rem;
}
html body modal#user table th:first-child,
html body modal#user table td:first-child, html body modal#channels table th:first-child,
html body modal#channels table td:first-child, html body modal#import-job table th:first-child,
html body modal#import-job table td:first-child, html body modal#text-block table th:first-child,
html body modal#text-block table td:first-child, html body modal#contacts table th:first-child,
html body modal#contacts table td:first-child, html body modal#labels table th:first-child,
html body modal#labels table td:first-child, html body modal#rules table th:first-child,
html body modal#rules table td:first-child, html body modal.settings table th:first-child,
html body modal.settings table td:first-child, html body modal#group-edit table th:first-child,
html body modal#group-edit table td:first-child, html body modal#hooks table th:first-child,
html body modal#hooks table td:first-child {
  width: 100%;
  padding-left: 0;
}
html body modal#user table th:last-child,
html body modal#user table td:last-child, html body modal#channels table th:last-child,
html body modal#channels table td:last-child, html body modal#import-job table th:last-child,
html body modal#import-job table td:last-child, html body modal#text-block table th:last-child,
html body modal#text-block table td:last-child, html body modal#contacts table th:last-child,
html body modal#contacts table td:last-child, html body modal#labels table th:last-child,
html body modal#labels table td:last-child, html body modal#rules table th:last-child,
html body modal#rules table td:last-child, html body modal.settings table th:last-child,
html body modal.settings table td:last-child, html body modal#group-edit table th:last-child,
html body modal#group-edit table td:last-child, html body modal#hooks table th:last-child,
html body modal#hooks table td:last-child {
  padding-right: 0;
}
html body modal#user button, html body modal#channels button, html body modal#import-job button, html body modal#text-block button, html body modal#contacts button, html body modal#labels button, html body modal#rules button, html body modal.settings button, html body modal#group-edit button, html body modal#hooks button {
  margin: 0;
  min-width: 16ch;
  padding: 1rem 1.5rem;
}

.--delete {
  display: flex;
  align-items: center;
  border: solid 1px currentColor;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  text-transform: uppercase;
  font-size: 0.675rem;
  height: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  color: red;
  border-color: red;
  width: max-content;
  gap: 0.5rem;
  background: none;
}
.--delete i {
  font-size: 0.75rem;
  color: red;
}

.help {
  padding: 1rem;
  color: var(--color-info);
  padding-left: 2.5rem;
  position: relative;
  margin: 1rem 0;
  white-space: pre-wrap;
  background: color-mix(in srgb, currentColor, transparent 90%);
  border-radius: var(--size-border-radius);
  line-height: 1.65;
}
.help strong,
.help pre,
.help i {
  color: currentColor;
}
.help i.icon.circle-info {
  top: 1rem;
  left: 1rem;
  font-size: 1.5em;
  transform: translateY(7%);
  position: absolute;
}
.help pre {
  display: inline-flex;
  gap: 0.25rem;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  margin: 0 5px;
  font-size: 0.875em;
  cursor: pointer;
  position: relative;
  font-weight: bold;
  margin: 2px;
  align-items: center;
}
.help pre::after {
  display: inline-block;
  position: absolute;
  content: "Kopiert!";
  bottom: 100%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 5px;
  width: 60px;
  text-align: center;
  background: black;
  color: white;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
  transition: all 0.5s 1s;
}
.help pre:active::after {
  opacity: 1;
  transition: all 0.1s 0s;
}

.ct.ct--top *,
.ct.ct--bottom * {
  color: white !important;
  transition: none;
}

@keyframes hint {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }
  25% {
    transform: translateY(0%);
    opacity: 1;
  }
  75% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(50%);
    opacity: 0;
  }
}
html body .selectable {
  position: relative;
  isolation: isolate;
}
html body .selectable > select {
  cursor: pointer;
  position: absolute;
  padding: 0;
  height: unset;
  min-height: unset;
  background: none;
  border: none;
  color: transparent;
  inset: 0;
}
html body .selectable.--editable select {
  height: 2rem;
  width: calc(100% + 3rem);
  transform: translate(-0.75rem, calc(-0.5rem + 1px));
}
html body .selectable.--editable::after {
  opacity: 0;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  height: 2rem;
  width: calc(100% + 3rem);
  transform: translate(-0.75rem, calc(-0.5rem + 1px));
  background: var(--c05) url("/asset/icons/pen-circle.svg") no-repeat calc(100% - 0.5rem) center/auto 1.25rem;
  transition: opacity 0.25s;
  z-index: -1;
}
html body .selectable.--editable:hover::after {
  opacity: 1;
}

async-comment {
  opacity: 0;
  transition: opacity 0.5s;
  display: block;
}

async-comment.--loaded {
  opacity: 1;
}

.day-row, item-dialog, modal content {
  background: var(--background-page);
}

.--deletable {
  position: relative;
  overflow: clip;
  transition-duration: 0;
}
.--deletable:hover::after {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  content: "(remove)";
  background: color-mix(in srgb, var(--b), transparent 15%) !important;
  backdrop-filter: blur(5px);
  border: solid 1px var(--b) !important;
  cursor: pointer;
  color: var(--font-color) !important;
  inset: 1px !important;
  border-radius: 1rem !important;
}
@media screen and (prefers-color-scheme: dark) {
  .--deletable:hover::after {
    color: white !important;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --a: rgba(0, 0, 0, 0.2);
    --b: rgb(48, 48, 48);
    --c05: rgba(255, 255, 255, 0.05);
  }

  html {
    color: white;
  }
  html, html body, html .day-row, html item-dialog, html modal content, html ticket-edit .overlay::before {
    background: color-mix(in srgb, var(--background-page), black 85%) !important;
  }
  html body * {
    color: white;
  }
}
select option {
  color: #202020 !important;
}

html body .blink {
  animation: shadow-blink 1s ease-in-out 4;
  /* blink 4 times */
}

@keyframes shadow-blink {
  0%, 100% {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-info) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-info) 75%, transparent);
  }
}
.toast {
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  right: 4rem;
  margin: auto;
  width: max-content;
  background: var(--color-info);
  color: white;
  padding: 1rem;
  border-radius: var(--size-border-radius);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
  display: flex;
  gap: 2rem;
  align-items: center;
  transform: translateY(calc(100% + 8rem));
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
  z-index: 100;
}
.toast.--shown {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: visibility 0s 0s, opacity 0.5s, transform 0.5s;
}
.toast * {
  color: inherit;
}

#deferred-send span:first-child {
  display: block;
  width: 2rem;
  height: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#deferred-send span:first-child::after {
  content: "";
  display: block;
  border-radius: 50%;
  border-top: solid 2px currentColor;
  border-bottom: solid 2px currentColor;
  border-left: solid 2px transparent;
  border-right: solid 2px transparent;
  position: absolute;
  inset: 0;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#deferred-send span:last-child {
  padding: 0.5rem 1rem;
  border: solid 1px currentColor;
  cursor: pointer;
  border-radius: var(--size-border-radius);
}

.channel-display {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  text-transform: uppercase;
}
.channel-display span {
  font-weight: bold;
}
.channel-display i.--L {
  font-size: 1.5rem;
}

input[type=color] {
  background-color: var(--color, var(--area-color)) !important;
  transition: none !important;
}
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type=color]::-webkit-color-swatch {
  border: 0;
  border-radius: 0;
}
input[type=color]::-moz-color-swatch, input[type=color]::-moz-focus-inner {
  border: 0;
}
input[type=color]::-moz-focus-inner {
  padding: 0;
}

html body login {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: grid;
  place-content: center;
  place-items: center;
  background: var(--login-background, url("/asset/background_login.png")) no-repeat 30rem center/cover;
}
html body login *[hidden] {
  display: block !important;
  visibility: hidden !important;
}
html body login > div.--login-area {
  align-items: center;
  padding: 1.5rem;
  background: var(--b);
  width: 32vw;
  min-width: 600px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 0;
  align-items: center;
  display: grid;
  align-content: center;
}
html body login > div.--login-area h1 {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
html body login > div.--login-area h1 img {
  width: auto;
  height: 50px;
}
html body login > div.--login-area input {
  display: block;
  width: 32ch;
  background: var(--area-color);
  margin: 0 auto 1rem auto;
}
html body login > div.--login-area input.--error {
  outline: solid 1px red !important;
}
html body login > div.--login-area button {
  justify-self: center;
  padding: calc(var(--size-offset) / 2) calc(var(--size-offset) * 2);
  min-width: 22ch;
  margin: 1rem auto;
}
html body login > div.--login-area button.--error {
  animation: no 0.25s linear 2;
}
@keyframes no {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2ch);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(2ch);
  }
  100% {
    transform: translateX(0);
  }
}
html body login > div.--login-area .footer {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
}
html body login > div.--login-area > a {
  display: block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-align: center;
}
html body login > div.--login-area > span.info {
  padding: 0.5rem 1rem;
  transition-duration: 0s;
  border-radius: var(--size-border-radius);
  animation: hint 2s ease 1 forwards;
  height: 2rem;
  margin: 2rem auto;
  display: block;
  text-align: center;
  width: fit-content;
}
html body login > div.--login-area > span.info:empty {
  visibility: hidden;
  animation: none;
}
html body login > div.--login-area > span.info.--error {
  background: rgba(255, 0, 0, 0.75);
  color: white;
}