body {
  margin: 0.5em;
}

/* Textarea */
div.error {
  background-color: #ffcc99;
  border: 1px solid #ff0000;
  padding: 0.4em;
}

/* Menu */
.custom-restricted-width {
  /* To limit the menu width to the content of the menu: */
  display: inline-block;
  /* Or set the width explicitly: */
  /* width: 10em; */
}

/* pre-code-blocks */
pre.stdout {
  border: 1px solid grey;
  font-size: x-small;
  padding: 0.25em;
}

.drop-space-box {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid rgba(0, 0, 0, .2);
  position: relative;
  top: .38em;
  background-color: darkorange;
}

.color-box {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid rgba(0, 0, 0, .2);
}

.beaker-color-box {
  display: inline-block;
  width: 2em;
  height: 1.2em;
  border: 1px solid rgba(0, 0, 0, .2);
  position: relative;
  top: .3em;
}

.save-bar-color-box {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border: 1px solid rgba(0, 0, 0, .2);
  position: relative;
  top: -0.15em;
  background-color: white;
}

.color-box-left {
  display: inline-block;
  width: 0.4em;
  height: 0.8em;
  border-top: 1px solid rgba(0, 0, 0, .2);
  border-left: 1px solid rgba(0, 0, 0, .2);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.color-box-left-plus {
  /*float: left;*/
  display: inline-block;
  width: 0.4em;
  height: 0.8em;
  /* margin-right: 0.2em; */
  border-top: 1px solid rgba(0, 0, 0, .2);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.color-box-left-plus-end {
  /*float: left;*/
  display: inline-block;
  width: 0.4em;
  height: 0.8em;
  /* margin-right: 0.2em; */
  border-top: 1px solid rgba(0, 0, 0, .2);
  border-right: 1px solid rgba(0, 0, 0, .2);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.roll-const-container {
  display: inline-block;
  position: relative;
  padding: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
}

.roll-const-number {
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  font-size: 0.6em;
  font-weight: bold;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.roll-number {
  position: absolute;
  top: 50%;
  left: 50%;
  color: black;
  font-size: 0.6em;
  font-weight: bold;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.roll-ci {
  float: right;
  top: 0.3em;
  position: relative;
}

.beaker-number-container {
  display: inline-block;
  position: relative;
  padding: 0;
  margin: 0;
  text-align: center;
}

.beaker-number {
  position: absolute;
  top: 1.6em;
  left: 50%;
  color: white;
  font-size: 0.6em;
  font-weight: bold;
  transform: translate(-50%, -50%);
}

.red {
  background: red;
}
.tomato {
  background: tomato;
}
.green {
  background: green;
}
.online-green {
  background: #7EE63D;
}
.yellow {
  background: yellow;
}
.white {
  background: white;
}

#channel-box, #media-box {
  color: #FFA500;
  background: #4D4D4D;
  border: 3px solid #000000;
  position: relative;
  vertical-align: middle;
  padding: 5px;
  font-family: monospace;
  font-size: 100%;
}

img.channel-box {
  position: relative;
  top: -1px;
  vertical-align: middle;
}

img.command {
  position: relative;
  top: 2px;
}

img.after-button {
  position: relative;
  top: 4px;
}

#volumeBarCanvas {
  border: 2px solid black;
}

img.favorites-star {
  position: relative;
  top: 3px;
}

img.dir-play {
  position: relative;
  top: 4px;
}

hr.setup {
  border-top: 1px dotted #8c8b8b;
}

h3.credits {
  margin-bottom: 0.2em;
}

p.credits-top, p.credits {
  margin: 0 0 0.4em 0;
  font-size: small;
}

img.dice-chooser {
  width: 32px;
  height: auto;
  cursor: pointer;
  /*
  position: relative;
  top: 0.5em;
  */
}

img.r-menu {
  position: relative;
  top: .1em;
}

div.d-hidden {
  visibility: hidden;
}

div.d-visible {
  visibility: visible;
}

div.page {
  margin: 0;
  padding: 0;
}

div.page-visible {
  display: block;
}

div.page-hidden {
  display: none;
}

td.p-right {
  text-align: right;
}

/* ----------------------------------------------------------------------
 *   Spectrum.css Modifications.
 * ---------------------------------------------------------------------- */

.panel .panel-header {
  padding-top: 0;
  padding-bottom: 0;
}

.panel-header {
  background: #1A196E;
}

.panel-title {
  color: white;
}

.pad-04 {
  padding: 0.4em !important;
  line-height: 1 !important;
}

span.admin-name-color {
  color: #E95E0D;
}

img.avatar-bg-color {
  background-color: #CADAF3;
}

img.avatar-admin-bg-color {
  background-color: #CADAF3;
}

img.avatar-online-bg-color {
  background-color: #7EE63D;
}

img.avatar-offline-bg-color {
  background-color: red;
}

img.avatar-no-bg {
  background-color: #FFF6DB;
}

div.active-dice-table {
  background-color: #730039;
}

img.roll-dice {
  width: 32px;
  height: auto;
  cursor: pointer;
}

.tab {
  margin-bottom: 0;
}

.tab-item-pseudo-right {
  flex: auto 0 0 !important;
  padding-left: 0.5em;
}

.tab-item-pseudo-right-no-pad {
  flex: auto 0 0 !important;
  padding-left: 0.25rem;
}

.tab-item-pseudo-left-no-pad {
  flex: auto 0 0 !important;
  padding-right: 0.25rem;
}

/*----------*/

.tab-flipped {
  align-items: center;
  border-top: .05rem solid #dadee4;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: .15rem 0 .2rem 0;
}

.tab-flipped .tab-item {
  margin-bottom: 0;
}

.tab-flipped .tab-item a {
  border-top: .1rem solid transparent;
  color: inherit;
  display: block;
  margin: 0 .4rem 0 0;
  padding: .1rem .2rem .4rem .2rem;
  text-decoration: none;
}

.tab-flipped .tab-item a:focus,
.tab-flipped .tab-item a:hover {
  color: #5755d9;
}

.tab-flipped .tab-item.active a,
.tab-flipped .tab-item a.active {
  border-top-color: #5755d9;
  color: #5755d9;
}

.tab-flipped .tab-item.tab-action {
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  text-align: right;
}

.tab-flipped .tab-item .btn-clear {
  margin-bottom: -.2rem;
}

.tab-flipped.tab-block .tab-item {
  -ms-flex: 1 0 0;
  flex: 1 0 0;
  text-align: center;
	margin-top: .15rem;
}

.tab-flipped.tab-block .tab-item a {
  margin: 0;
}

.tab-flipped.tab-block .tab-item .badge[data-badge]::after {
  position: absolute;
  right: .1rem;
  top: .1rem;
  transform: translate(0, 0);
}

.tab-flipped:not(.tab-block) .badge {
  padding-right: 0;
}

/*----------*/
/* Other stuff. */

.input-inline {
  display: inline-block;
}

.btn:focus {
  box-shadow: 0 0 0 0;
}

.no-box-shadow-on-focus:focus {
  box-shadow: 0 0 0 0 !important;
}

.c-pointer {
  cursor: pointer;
}

.c-rumor {
  position: relative;
  top: .2em;
}

.avatar-container {
  position: relative;
}

.avatar-attribute {
  position: absolute;
  top: -10px;
  left: 6px;
  visibility: hidden;
}

.chip-gm-icon {
  padding-left: 0.4em;
}

.panel-error-message {
  color: #610023;
  background-color: #FF714E;
  padding-left: .35em;
  padding-right: .35em;
}

.chip-name-container {
  display: inline-block;
  position: relative;
}

.chip-name-time {
  position: relative;
  font-size: 70%;
  color: darkgreen;
  top: -.1em;
}

.rumors-in {
  position: relative;
  top: -1px;
}

.connection-indicator {
  position: relative;
  top: -1px;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

input.visually-hidden:focus+label {
  outline: thin dotted;
}

.drop-zone {
  border: 2px dotted rgba(0, 0, 0, .7);
  background-color: rgba(0, 0, 0, .2);
}

.preformatted {
  font-family: monospace;
  white-space: pre;
}

.beaker-input-container {
  min-width:11em;
  padding-bottom:4px;
  white-space:nowrap;
}

.beaker-font-resize {
  font-size: 2.1vmin !important;
}

input.field-read-only {
  user-select: none;
}

.table-horizontal-scroll-bar {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table.tresponsive {
  width: 100%;
  margin: 0px auto;
  table-layout: auto;
}

.fixed {
  table-layout: fixed;
}

table.tresponsive,
td.tresponsive,
th.tresponsive {
  border-collapse: collapse;
}

th.tresponsive,
td.tresponsive {
  padding: 0 0.2rem 0 0;
  border: none;
  text-align: left;
}

div.is-success {
  color: #32b643;
}

div.is-error {
  color: #e85600;
}