.menu {
  position: relative;
}

.menu-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 40px 14px 14px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  background: #000000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.menu-value {
  min-width: 0;
}

.menu-lock {
  width: 14px;
  height: 14px;
  flex: none;
  color: #9a9a9a;
}

.menu-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  background: #111111;
}

.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-item svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: #9a9a9a;
}

.menu-item:hover,
.menu-item:focus-visible,
.menu-item.is-active {
  background: #000000;
  color: #ffcc00;
}

.menu-item.is-locked,
.menu-item.is-locked:hover,
.menu-item.is-locked:focus-visible {
  background: transparent;
  color: #6a6a6a;
  cursor: default;
}

dialog input {
  width: 100%;
  padding: 14px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
  font: inherit;
}

dialog input:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.menu-list.is-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.menu-button[data-tone="green"],
.menu-item[data-tone="green"],
.menu-item[data-tone="green"]:hover,
.menu-item[data-tone="green"]:focus-visible,
.menu-item[data-tone="green"].is-active {
  color: #3dcc6e;
}

.menu-button[data-tone="yellow"],
.menu-item[data-tone="yellow"],
.menu-item[data-tone="yellow"]:hover,
.menu-item[data-tone="yellow"]:focus-visible,
.menu-item[data-tone="yellow"].is-active {
  color: #ffcc00;
}

.menu-button[data-tone="red"],
.menu-item[data-tone="red"],
.menu-item[data-tone="red"]:hover,
.menu-item[data-tone="red"]:focus-visible,
.menu-item[data-tone="red"].is-active {
  color: #ff5c5c;
}

.menu-button[data-tone="blue"],
.menu-item[data-tone="blue"],
.menu-item[data-tone="blue"]:hover,
.menu-item[data-tone="blue"]:focus-visible,
.menu-item[data-tone="blue"].is-active {
  color: #4da3ff;
}

td.is-open {
  color: #3dcc6e;
}

td.is-review {
  color: #ffcc00;
}

td.is-problem {
  color: #ff5c5c;
}

td.is-done {
  color: #4da3ff;
}

dialog .create {
  width: 100%;
  margin-top: 8px;
  padding: 16px 22px;
  font-size: 16px;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
}

.file-pick {
  flex: none;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: #111111;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.file-pick:hover,
.file-pick:focus-visible {
  color: #ffcc00;
}

dialog .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.file-name {
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 400;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

[hidden] {
  display: none !important;
}

html[data-panel="orders"] [data-panel-view="orders"],
html[data-panel="kunden"] [data-panel-view="kunden"],
html[data-panel="detail"] [data-panel-view="detail"] {
  display: flex !important;
}

html[data-panel="kunden"] [data-panel-view="orders"],
html[data-panel="detail"] [data-panel-view="orders"] {
  display: none !important;
}

html[data-panel="kunden"] .tab[data-panel="orders"].is-active,
html[data-settings] .tab.is-active {
  background: transparent;
  color: #9a9a9a;
}

html[data-panel="kunden"] .tab[data-panel="kunden"],
html[data-settings] .tab[data-panel="settings"] {
  background: #111111;
  color: #ffffff;
}