: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);
}

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

.color-button {
  min-width: 0px;
  margin: 1px;
  padding-inline: 0px;
  position: relative;
  top: 3px;
}
.color-button-inline {
  position: relative;
  top: 4px;
}

button.color-button > hbox.box-inherit.button-box {
  display: none;
}

input[type="text"] {
  margin-left: 1em !important;
}

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

input[type="select"],
select {
  font-weight: 400 !important;
  /* Add 1em space between text and down-arrow */
  padding-inline-end: calc(15px + 12px + 14px + 1em) !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-thindouble {
    background: #42381F !important;
    color: #FCE2A1 !important;
  }
}
.warning-thindouble {
  background: #ffea00;
  margin: 0.5em 0;
  border-radius: 2px;
  padding: 0.5em 1em;
  font-size: 90%;
}

@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;
}

.invisible {
  color: transparent;
}

.pickercolumn {
  width: 7em;
}
.modecolumn {
  padding-left: 2em;
}
.labelcolumn {
}

.flexbox {
  display: flex;
}

#levelcolorsbox, 
#dm_levelcolorsbox {
  margin-right: 2em;
}

#previewbox, 
#dm_previewbox {
  width: 50%;
}

#previewboxcontent {
  height: 19em;
  font-family: monospace;
  overflow: auto;
  padding: 5px;
  border: 1px solid grey;
  overflow: hidden;
}

#dm_previewboxcontent {
  height: 19em;
  font-family: monospace;
  overflow: auto;
  padding: 5px;
  border: 1px solid grey;
  overflow: hidden;
}

#blocklevel1, 
#dm_blocklevel1 {
  margin-block: 1ex; padding: 0.4ex 1ex !important;
/*  padding: 0.5em 1em 0.5em 1em; */
}

#blocklevel2, #blocklevel3, #blocklevel4, #blocklevel5, 
#dm_blocklevel2, #dm_blocklevel3, #dm_blocklevel4, #dm_blocklevel5 {
  margin-block: 1ex; padding: 0.4ex 1ex !important;
/*  padding: 0.5em 1em 0.5em 1em; */
/*  margin: 0.5em 0em 0em 0em; */
}

#qchar1, #qchar2, #qchar3, #qchar4, #qchar5, 
#dm_qchar1, #dm_qchar2, #dm_qchar3, #dm_qchar4, #dm_qchar5 {
  display: none;
}
