:root {
  --color-primary: #262626;
  --color-background: #171717;
  --color-font: #e5e5e5;
}

/* Main */

body {
  background-color: var(--color-background);
  color: var(--color-font);
  min-height: 100vh;
}

header {
  background-color: var(--color-background);
  color: var(--color-font);
}

#page-title {
  flex-grow: 0;
  min-width: 3em;
  min-height: 3em;
  background: url(/custom-webui/themes/buttonbox-rinkhals/icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  pointer-events: none;
}

#page-title * {
  display: none;
}

#page-title a:first-child {
  opacity: 0;
  width: 0;
  display: block;
}

main {
  margin-top: auto;
  margin-bottom: auto;
}

/* Disable toggler if using topbar */
.has-topbar  #sidebar-toggler-button {
  display: none;
}

.has-topbar header {
  padding-left: 0.5em;
  padding-right: 0.5em;
  width: calc(100vw - 1em);
}

.has-topbar main {
  padding-top: 5em;
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: #0a0a0a;
  border-radius: 0.3rem;
}

::-webkit-scrollbar-thumb:hover {
  opacity: 80%;
}

/* Buttons */

action-button button {
  background-color: var(--color-primary);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: none;
  color: var(--color-font);
}

action-button button:hover {
  opacity: 80%;
  box-shadow: none;
}

action-button button:active {
  outline: none;
}

action-button button:focus {
  outline: none;
}

action-button button span.icon {
  margin-bottom: 0.5rem;
}

button {
  background-color: var(--color-primary);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: none;
  color: var(--color-font);
}

button:hover {
  opacity: 80%;
  box-shadow: none;
}

button:active {
  outline: none;
}

button:focus {
  outline: none;
}

.display {
  padding: 1em;
}

/* Sidebar */

#sidebar-toggler-button {
  border: none;
  box-shadow: none;
  background-color: transparent;
  outline: none;
}

#sidebar-toggler-button:hover {
  opacity: 80%;
}

#sidebar-toggler-button:active {
  background-color: transparent;
}

#sidebar-toggler-button:focus {
  background-color: transparent;
}

nav.sidebar {
  box-shadow: 15px 0px 15px rgb(0 0 0 / 0.1);
  background-color: var(--color-background);
  color: var(--color-font);
  border: none;
  border-radius: 0.25rem;
}

nav.sidebar ul li {
  border: none;
}

nav.sidebar ul li a:hover {
  border-radius: 0.1rem;
  background-color: #666666;
  color: var(--color-font);
}

nav.sidebar ul li a:focus {
  outline: none;
  background-color: #666666;
  color: var(--color-font);
}

/* Topbar */

nav.topbar {
  place-content: center;
}

nav.topbar, nav.topbar ul {
  display: flex;
  gap: 0.5em;
}

nav.topbar #navigation-links {
  flex-grow: 1;
}

.userinfo {
  display: none;
}

li[title="Diagnostics"] {
  display: none !important;
}

/* Logs */

div.toolbar {
  border: none;
  background-color: var(--color-primary);
  color: var(--color-font);
  display: flex;
  justify-content: center;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

#logSearchBox {
  border-radius: 0.25rem;
  border: none;
  background-color: var(--color-background);
  color: var(--color-font);
  height: 1.5rem;
  width: 10rem;
}

#logSearchBox:focus {
  outline: none;
}

#searchLogsClear {
  border-radius: 0.25rem;
  color: var(--color-font);
  background-color: #0a0a0a;
  height: 2.5rem;
  width: 2.5rem;
}

table {
  border: none;
  background-color: var(--color-primary);
  color: var(--color-font);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  outline: none;
  border-collapse: separate;
  border-radius: 0.25rem;
}

td,
th {
  background-color: transparent;
  border: none;
  color: var(--color-font);
  box-shadow: none;
  text-align: center;
}

tr:hover td {
  background-color: #666666;
}

/* Execution Dialog  */

#execution-results-popup {
  background-color: var(--color-background);
  color: var(--color-font);
  border: none;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-radius: 0.375rem;
}

#execution-dialog-status {
  padding: 0.25rem;
  border-radius: 0.25rem;
}

#execution-dialog-toggle-size {
  border-radius: 0.25rem;
}

#execution-dialog-kill-action {
  border-radius: 0.25rem;
}

form button {
  border-radius: 0.25rem;
}

/* Arguments */

#argument-popup {
  color: var(--color-font);
  background-color: var(--color-background);
  border: none;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-radius: 0.375rem;
}

form div.wrapper {
  background-color: var(--color-background);
}

button[name="cancel"]:hover {
  background-color: var(--color-primary);
  color: var(--color-font);
  opacity: 80%;
}

input[name="start"] {
  background-color: var(--color-primary);
  color: var(--color-font);
  border: none;
  border-radius: 0.25rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

input[name="start"]:disabled {
  cursor: not-allowed;
  background-color: var(--color-primary);
  color: var(--color-font);
}

input[name="start"]:hover {
  background-color: var(--color-primary);
  color: var(--color-font);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  opacity: 80%;
}

input[name="start"]:active {
  outline: none;
}

select {
  width: 10rem;
  height: 1.5rem;
  background-color: var(--color-primary);
  color: var(--color-font);
  border: none;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-radius: 0.25rem;
}

select:active {
  outline: none;
}

select:focus {
  outline: none;
}

input {
  background-color: var(--color-primary);
  color: var(--color-font);
  border: none;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border-radius: 0.25rem;
}

input:focus {
  outline: none;
}

input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
}

/* Displays */
div.display {
  background-color: var(--color-primary);
  color: var(--color-font);
  border: none;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Misc */

span.error {
  padding: 0.2rem;
  border-radius: 0.1rem;
}

dialog#big-error {
  border: none;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  background-color: var(--color-primary);
  color: var(--color-font);
  border-radius: 0.375rem;
}

#contentDiagnostics, #contentLogs {
  background-color: transparent;
  box-shadow: none;
}

/* Links */

a {
  color: var(--color-font)
}

a:active {
  color: var(--color-font);
  background-color: transparent;
  outline: none;
}

a:focus {
  color: var(--color-font);
  background-color: transparent;
  outline: none;
}

a:hover {
  opacity: 80%;
}

/* Toggle enabled actions */
.if-enabled-false {
  display: none;
}

.if-disabled-true {
  display: none;
}

/* Firmware update */
fieldset[title='Firmware update'] {
  display: flex !important;
}

.firmware-update {
  width: fit-content;
}

.firmware-update .info, .firmware-update .changes {
  text-align: left;
}

/* ACE */

fieldset[title^="ACE"] {
  grid-template-columns: repeat(2, 180px);
  grid-auto-rows: auto !important;
}

.ace-info {
  display: grid !important;
  grid-template: repeat(2, auto) / repeat(4,1fr);
  gap: 1em;
  align-items: start !important;
  grid-area: 1 / 1 / 1 / 3;
}

.ace-info .ace-status {
  grid-area: 2 / 1 / 2 / 5;
}