:host,
:root {
  background-color: var(--background-color-box);
}

/** body for Options in Tab **/
/*
body {
  padding: 28px 40px;
  width: 800px;
  background-color: var(--in-content-box-background);
  color: var(--in-content-page-color);
}
*/

/** body for Options inline **/
body {
  padding-top: 1.5em;
  background-color: var(--background-color-box);
}
/* Nicht notwendig, wenn common.css vorhanden ist */
/*
.subcategory:not([hidden]) ~ .subcategory {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(211, 211, 211, 0.5);
}
*/

.flex-container {
  display: flex;
  flex-direction: row;
}
.flex-container > .flex-item {
  flex: auto;
}
.flex-container > .raw-item {
}

button {
  min-height: 32px;
/*  margin-top: 1ex; */
/*  margin-bottom: 1ex; */
  margin-left: 6px;
  min-width: 7em;
  text-align: center;
/*  float: right; */
}


input[type="text"] {
}

input[type="checkbox"]:not(.position-null),
input[type="radio"]:not(.position-null) {
  position: relative;
}
input[type="radio"]:not(.position-null) {
  /* top: 4px; */
  left: 5px;
}
input[type="checkbox"]:not(.position-null) {
  /* top: 4px; */
  left: 5px;
}
input[type="checkbox"].position-null {
  margin-inline: 0;
}

input[type="select"],
select {
  padding-top: 0;
  padding-bottom: 0;
}

/* Nicht notwendig, wenn common.css vorhanden ist */
/*
select, input[type="select"] {
  padding-top: 5px;
  padding-bottom: 5px;
  min-height: 32px;
}
*/

/* tweak the buggy background for select options */
/* the "option" itself doesn't work, so the whole select hover has to be tweaked */
@media (prefers-color-scheme: dark) {
  select:hover,
  option:hover {
    background-color: rgb(65, 95, 126) !important;
  }
}
@media (prefers-color-scheme: light) {
  select:hover,
  option:hover {
    background-color: rgba(140, 197, 255, 0.6) !important;
  }
}

@media (prefers-color-scheme: dark) {
  .subcategory_infotext:not(h1) {
    color: var(--text-color-deemphasized);
  }
}
.subcategory_infotext {
  margin-bottom: 0.6em;
}

@media (prefers-color-scheme: dark) {
  .warning {
    background: #42381F !important;
    color: #FCE2A1 !important;
  }
  /*
  .cmd_warning {
    background: #4B2F36 !important;
    color: #FFB3D2 !important;
  }
  */
}
.warning {
  background: #ffea00;
  border-radius: 2px;
  margin: 0.5em 0;
  padding: 0.5em 1em;
  font-size: 85%;
}
.cmd_warning {
  background: #ff7878;
  border-radius: 2px;
  margin: 0.5em 0;
  padding: 0.5em 1em;
  font-size: 85%;
}

.hidden {
  display: none;
}

.disabled {
  opacity: 0.4;
}

.indent {
  margin-left: 30px;
}

.indent > label:first-child {
  margin-left: 6px;
}

.center {
  text-align: center;
}

.flexbox {
  display: flex;
}

#box_defaultHtml {
  width: 50%;
  margin-right: 1em;
  /*  border-right: 1px; */
}

#box_buttonHtml {
  width: 50%;
  margin-left: 1em;
}