/* Variables */
:host {
  --track-width: 4;
  --thumb-size: calc(
    (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 0.5 -
      var(--design-unit)
  );
  --handle-width: calc(var(--thumb-size) * 1px);
  --handle-height: calc(var(--thumb-size) * 1px);
  --slider-size: calc(var(--track-width) * 1px);
  --bar-height: 16px;
  --control-corner-radius: calc(var(--corner-radius) * 1.5);
  --border-radius: calc(var(--corner-radius) * 1px);
  --base-font: var(--body-font);
  --font-size: var(--type-ramp-base-font-size);
  --switch-size: 12px;
  --container-background: var(--panel-surface-color);
  color: var(--neutral-foreground-rest);

  --panel-primary-color: var(--accent-foreground-rest);
  --panel-on-primary-color: var(--foreground-on-accent-rest);
}
/* Anchor */
a {
  color: var(--accent-fill-rest);
}
a:hover {
  color: var(--accent-fill-hover);
}

/* Track */

::-webkit-scrollbar-button {
  background-color: var(--neutral-fill-rest);
}

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

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

::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: var(--neutral-fill-rest);
  border-radius: var(--corner-radius);
}

::-webkit-scrollbar-corner {
  background-color: var(--neutral-fill-rest);
}

::-webkit-resizer {
  background-color: var(--neutral-fill-rest);
}

/* Separator */

hr {
  color: var(--neutral-stroke-divider-rest);
  border-color: var(--neutral-stroke-divider-rest);
  background: var(--neutral-stroke-divider-rest);
  border-style: solid;
  border-radius: calc(var(--corner-radius) * 1px);
}

/* Loading */

.pn-loading:before {
  position: absolute;
  height: 100%;
  width: 100%;
  content: '';
  z-index: 1000;
  background-color: rgb(255, 255, 255, 0.5);
  border-color: lightgray;
  background-image: url('https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-assets/e6cb56375bb1c436975e09739a231fb31e628a63/spinners/default.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 50%;
  border-width: 1px;
}

.pn-loading:hover:before {
  cursor: progress;
}

/* Bokeh */

canvas,
img {
  border-radius: calc(var(--corner-radius) * 1px);
}

/* Toolbar */

.bk-toolbar.bk-above .bk-toolbar-button.bk-active {
  border-bottom-color: var(--accent-foreground-active);
}

.bk-toolbar.bk-below .bk-toolbar-button.bk-active {
  border-top-color: var(--accent-foreground-active);
}

.bk-toolbar.bk-right .bk-toolbar-button.bk-active {
  border-left-color: var(--accent-foreground-active);
}

.bk-toolbar.bk-left .bk-toolbar-button.bk-active {
  border-right-color: var(--accent-foreground-active);
}

/* Tooltips */

.bk-tooltip {
  font-weight: 300;
  font-size: calc(var(--type-ramp-minus-1-font-size) * 1px);
  position: absolute;
  padding: 5px;
  border: none;
  border-radius: calc(var(--corner-radius) * 1px);
  color: var(--neutral-foreground-rest);
  background-color: var(--container-background);
  pointer-events: none;
  opacity: 0.95;
  z-index: 100;
}

.bk-tooltip > div:not(:first-child) {
  /* gives space when multiple elements are being hovered over */
  margin-top: 5px;
  border-top: #e5e5e5 1px dashed;
}

.bk-tooltip-row-label {
  text-align: right;
  color: var(--accent-foreground-rest);
  /* blue from toolbar highlighting */
}

/* Context menu */

.bk-context-menu {
  border-radius: calc(var(--corner-radius) * 1px);
}
.bk-context-menu > :not(.bk-divider).bk-active {
  border-color: var(--accent-foreground-active);
}

/* Widget box */

.panel-widget-box {
  min-height: 20px;
  background-color: var(--neutral-fill-card-rest);
  border: none;
  border-radius: calc(var(--corner-radius) * 1px);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Card */

:host(.accordion),
:host(.card) {
  background-color: var(--neutral-fill-layer-rest);
}

.card-header,
.accordion-header {
  align-items: center;
  background-color: var(--neutral-fill-rest);
  box-shadow: unset;
  color: var(--neutral-foreground-rest);
  display: flex;
  height: unset;
  outline: unset;
}

.card-margin {
  margin: 1em;
}

.card-button {
  display: block;
  margin-left: 0.5em;
}

:host(.card-title) h1,
:host(.card-title) h2,
:host(.card-title) h3,
:host(.card-title) h4,
:host(.card-title) h5,
:host(.card-title) h6 {
  margin-block-end: 0.2em;
  margin-block-start: 0.2em;
}

/* Tabs */

.bk-header .bk-tab {
  border: 1px solid transparent;
  border-radius: unset;
  height: calc(
    (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px
  );
}

.bk-header .bk-tab:hover {
  color: var(--neutral-foreground-hover);
}

.bk-header .bk-tab.bk-active {
  color: var(--accent-foreground-rest);
  background-color: var(--neutral-fill-rest);
  border-color: var(--accent-foreground-rest);
}

.bk-header .bk-tab.bk-active:hover {
  color: var(--accent-foreground-hover);
}

.bk-header {
  --pn-tab-padding-x: 1rem;
  --pn-tab-padding-y: 0.5rem;
  --pn-tabs-border-width: 1px;
  --pn-tabs-border-width: 1px;
  --pn-tab-color: var(--neutral-fill-rest);
  --pn-tab-active-color: var(--accent-foreground-rest);
}

:host(.bk-above) .bk-header {
  border-bottom: var(--pn-tabs-border-width) solid var(--pn-tab-color);
}

:host(.bk-left) .bk-header {
  border-right: var(--pn-tabs-border-width) solid var(--pn-tab-color);
}

:host(.bk-right) .bk-header {
  border-left: var(--pn-tabs-border-width) solid var(--pn-tab-color);
}

:host(.bk-below) .bk-header {
  border-top: var(--pn-tabs-border-width) solid var(--pn-tab-color);
}

:host(.bk-above) .bk-header .bk-tab,
:host(.bk-left) .bk-header .bk-tab,
:host(.bk-right) .bk-header .bk-tab,
:host(.bk-below) .bk-header .bk-tab {
  background: transparent;
  border: none;
  padding: var(--pn-tab-padding-y) var(--pn-tab-padding-x);
  border-style: solid;
  border-width: 0;
}

:host(.bk-above) .bk-header .bk-tab {
  margin-bottom: calc(-1 * var(--pn-tabs-border-width));
  border-bottom-width: 2px;
}

:host(.bk-left) .bk-header .bk-tab {
  margin-right: calc(-1 * var(--pn-tabs-border-width));
  border-right-width: 2px;
}

:host(.bk-right) .bk-header .bk-tab {
  margin-left: calc(-1 * var(--pn-tabs-border-width));
  border-left-width: 2px;
}

:host(.bk-below) .bk-header .bk-tab {
  margin-top: calc(-1 * var(--pn-tabs-border-width));
  border-top-width: 2px;
}

/* DataFrame */

table.panel-df {
  color: var(--neutral-foreground-rest);
}

.panel-df tbody tr:nth-child(odd) {
  background: var(--neutral-fill-active);
}

.panel-df thead {
  border-bottom: 1px solid var(--neutral-divider-rest);
}

.panel-df tr:hover {
  background: var(--accent-fill-hover) !important;
  color: var(--accent-foreground-rest);
  cursor: pointer;
}

/* Slider Widgets */

.noUi-target {
  background: var(--neutral-stroke-rest);
  border-color: var(--neutral-stroke-rest);
  box-shadow: unset;
}

.noUi-base {
  border-radius: calc(var(--corner-radius) * 1px);
}

.noUi-handle {
  background: var(--neutral-foreground-rest);
  border-radius: calc(var(--corner-radius) * 1px);
  box-shadow: unset;
}

/* Help Icon */

.bk-description > .bk-icon {
  background-color: var(--neutral-foreground-rest);
  opacity: 0.4;
}

/* Input widgets */

.bk-input {
  background-color: var(--neutral-fill-input-rest);
  border: 1px solid var(--accent-fill-rest);
  border-radius: calc(var(--control-corner-radius) * 1px);
  color: var(--neutral-foreground-rest);
  font-size: var(--type-ramp-base-font-size);
  height: calc(
    (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px
  );
  line-height: var(--type-ramp-base-line-height);
  padding: 0 calc(var(--design-unit) * 2px + 1px);
}

.bk-input:focus {
  border: 1px solid var(--neutral-stroke-active);
  box-shadow: 0 0 0 1px var(--neutral-stroke-active) inset;
}

.bk-input[disabled],
.bk-input[disabled]:hover {
  cursor: not-allowed;
  background-color: transparent;
  border-color: var(--accent-fill-rest);
  opacity: var(--disabled-opacity);
}

/* TextArea widget */

textarea.bk-input {
  padding: calc(var(--design-unit) * 2px + 1px);
}

/* Select widget */

.bk-input:focus option:checked,
.bk-input:focus option:checked,
.bk-input option:active,
.bk-input option:hover,
.bk-input:focus option:hover {
  background-color: var(--accent-fill-hover);
  color: var(--foreground-on-accent-rest);
}

select:-internal-list-box option:checked {
  color: var(--neutral-foreground-rest);
}

/* Choices widget */

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background: unset;
  opacity: var(--disabled-opacity);
}

.choices[data-type*='select-one'] .choices__input {
  display: block;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid var(--accent-fill-rest);
  background-color: transparent;
  margin: 0;
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: transparent;
  padding: 7.5px 7.5px 3.75px;
  border: 1px solid var(--accent-fill-rest);
  border-radius: calc(var(--corner-radius) * 1px);
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
  min-height: unset;
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border-color: var(--accent-fill-active);
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: var(--neutral-fill-rest);
  border: 1px solid var(--accent-fill-rest);
}

.choices__list--dropdown {
  border: 1px solid var(--accent-fill-rest);
}

.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
  border-color: var(--accent-fill-rest);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--accent-fill-rest);
}

.choices__inner .choices__item.solid {
  background-color: var(--accent-fill-rest);
  border-radius: calc(var(--corner-radius) * 1px);
}

.choices__inner .choices__item.solid .is-highlighted {
  background-color: var(--accent-fill-active);
}

.choices[data-type*='select-multiple'] .choices__button.solid {
  border-left: 1px solid var(--accent-fill-rest);
}

.choices[data-type*='select-multiple'] .choices__button.solid:hover {
  background: var(--accent-fill-hover);
  border-left: 1px solid var(--accent-fill-hover);
  border-radius: calc(var(--corner-radius) * 1px);
}

/* FileInput */

input[type='file'] {
  background: transparent;
  width: 100%;
  height: 50px;
  border: 3px dashed var(--neutral-stroke-rest);
  border-radius: calc(var(--corner-radius) * 1px);
  text-align: center;
  margin: auto;
}

input[type='file'][disabled]:hover {
  cursor: not-allowed;
  border-color: var(--neutral-stroke-rest);
}

input[type='file']:hover {
  border-color: var(--neutral-stroke-hover);
}

input[type='file']:active {
  border: 3px dashed var(--neutral-stroke-active);
}

/* Buttons */

.bk-btn {
  border-radius: calc(var(--control-corner-radius) * 1px);
  line-height: var(--type-ramp-base-line-height);
  min-width: calc(
    (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px
  );
}
.bk-btn-default:focus,
.bk-btn-default:active,
.bk-btn-primary:focus,
.bk-btn-primary:active,
.bk-btn-success:focus,
.bk-btn-success:active,
.bk-btn-warning:focus,
.bk-btn-warning:active,
.bk-btn-danger:focus,
.bk-btn-danger:active,
.bk-btn-light:focus,
.bk-btn-light:active {
  outline: none;
}
.bk-btn:active {
  transform: none;
}

:host(.solid) .bk-btn-group .bk-btn.bk-btn-default.bk-active,
:host(.solid) .bk-btn-group .bk-btn.bk-btn-primary.bk-active,
.bk-btn:active,
::file-selector-button:active,
.bk-active.bk-btn,
.bk-active::file-selector-button {
  box-shadow: none;
}
.bk-btn a {
  text-decoration: none;
  color: inherit;
  background-color: inherit;
}

:host(.solid) .bk-btn.bk-btn-default a,
:host(.outline) .bk-btn.bk-btn-default a {
  background-color: inherit;
}

:host(.solid) .bk-btn.bk-btn-default {
  background-color: var(--neutral-fill-rest);
  color: var(--neutral-foreground-rest);
}

:host(.solid) .bk-btn.bk-btn-default:hover {
  background-color: var(--neutral-fill-hover);
  color: var(--neutral-foreground-hover);
}

:host(.solid) .bk-btn.bk-btn-default:active,
:host(.solid) .bk-btn.bk-btn-default.bk-active {
  background-color: var(--neutral-fill-active);
  color: var(--neutral-foreground-active);
}

:host(.outline) .bk-btn.bk-btn-default {
  background-color: transparent;
  border: 1px solid var(--neutral-stroke-rest);
  color: var(--neutral-fill-strong-rest);
}

:host(.outline) .bk-btn.bk-btn-default:hover {
  border-color: var(--neutral-stroke-hover);
  color: var(--neutral-fill-strong-hover);
}

:host(.outline) .bk-btn.bk-btn-default:active {
  border-color: var(--neutral-stroke-active);
  color: var(--neutral-fill-strong-active);
}

:host(.outline) .bk-btn.bk-btn-default.bk-active {
  color: var(--neutral-foreground-rest);
  box-shadow: none;
}

:host(.outline) .bk-btn-group .bk-btn-default.bk-active {
  background-color: var(--neutral-fill-active);
  color: var(--neutral-foreground-rest);
}

:host(.outline) .bk-btn-group .bk-btn-primary.bk-active,
:host(.solid) .bk-btn.bk-btn-primary,
:host(.solid) .bk-btn.bk-btn-primary[disabled],
:host(.solid) .bk-btn.bk-btn-primary[disabled]:hover {
  background-color: var(--accent-fill-rest);
  border-color: var(--accent-fill-rest);
  color: var(--foreground-on-accent-rest);
}
:host(.solid) .bk-btn.bk-btn-primary:hover {
  background-color: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: var(--foreground-on-accent-hover);
}
:host(.solid) .bk-btn.bk-btn-primary.bk-active,
:host(.solid) .bk-btn.bk-btn-primary:active,
:host(.solid) .bk-btn.bk-btn-primary.bk-active[disabled],
:host(.solid) .bk-btn.bk-btn-primary.bk-active[disabled]:hover {
  background-color: var(--accent-fill-active);
  border-color: var(--accent-fill-active);
  color: var(--foreground-on-accent-active);
}
:host(.outline) .bk-btn-group .bk-btn-primary.bk-active:hover,
:host(.solid) .bk-btn.bk-btn-primary.bk-active:hover {
  background-color: var(--accent-fill-hover);
  color: var(--foreground-on-accent-hover);
}
:host(.solid) .bk-btn.bk-btn-primary[disabled],
:host(.solid) .bk-btn.bk-btn-primary[disabled]:hover,
:host(.solid) .bk-btn.bk-btn-primary[disabled]:focus,
:host(.solid) .bk-btn.bk-btn-primary[disabled].bk-active {
  pointer-events: none !important;
  cursor: not-allowed;
  opacity: var(--disabled-opacity);
}
:host(.outline) .bk-btn.bk-btn-primary.bk-active:hover,
:host(.outline) .bk-btn.bk-btn-primary:hover {
  border-color: var(--accent-fill-hover);
  color: var(--neutral-foreground-hover);
}
:host(.outline) .bk-btn.bk-btn-primary.bk-active,
:host(.outline) .bk-btn.bk-btn-primary:active {
  border-color: var(--accent-fill-active);
  color: var(--neutral-foreground-active);
}
:host(.outline) .bk-btn.bk-btn-primary {
  border-color: var(--accent-fill-rest);
  color: var(--neutral-foreground-rest);
}

:host(.outline) .bk-btn-success.bk-active,
:host(.outline) .bk-btn-success:hover {
  color: var(--neutral-foreground-rest);
}

:host(.outline) .bk-btn-warning.bk-active,
:host(.outline) .bk-btn-warning:hover {
  color: var(--neutral-foreground-rest);
}

:host(.outline) .bk-btn-danger.bk-active,
:host(.outline) .bk-btn-danger:hover {
  color: var(--neutral-foreground-rest);
}

:host(.outline) .bk-btn-light {
  border-color: var(--light-bg-color);
  color: var(--neutral-foreground-rest);
}

.bk-btn[disabled],
.bk-btn[disabled]:hover,
.bk-btn[disabled]:focus,
.bk-btn[disabled]:active,
.bk-btn[disabled].bk-active {
  cursor: not-allowed;
  pointer-events: none !important;
}

.bk-menu {
  background-color: var(--neutral-fill-rest);
  color: var(--neutral-foreground-rest);
  border: unset;
  border-radius: calc(var(--control-corner-radius) * 1px);
}

.bk-menu > .bk-divider {
  background-color: var(--neutral-focus);
}

.bk-menu > :not(.bk-divider):hover,
.bk-menu > :not(.bk-divider).bk-active {
  background-color: var(--accent-fill-hover);
  color: var(--foreground-on-accent-hover);
}

/* Select */

select:not([type='file']).bk-input {
  margin: 0;
}
select:not([multiple]).bk-input,
select:not([size]).bk-input {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" viewBox="0 0 25 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 25,0 12.5,20 Z" fill="darkgrey"/></svg>');
}

/* Checkbox/Radio */

.bk-input-group input[type='checkbox'],
.bk-input-group input[type='radio'] {
  width: 15px;
  height: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
  outline: none;
  background-color: var(--neutral-fill-input-rest);
  cursor: pointer;
  margin-right: 0.25em;
}

.bk-input-group input[type='checkbox'] {
  border-radius: calc(var(--corner-radius) * 1px);
}

.bk-input-group input[type='checkbox']:hover,
.bk-input-group input[type='radio']:hover {
  background: var(--neutral-fill-input-hover);
  border-color: var(--neutral-stroke-hover);
}

.bk-input-group input[type='checkbox']:active,
.bk-input-group input[type='radio']:active {
  background: var(--accent-fill-active);
  border: calc(var(--outline-width) * 1px) solid var(--accent-fill-active);
}

.bk-input-group input[type='checkbox']:checked:hover {
  background: var(--accent-fill-hover);
}

.bk-input-group input[type='radio']:checked:hover {
  border-color: var(--accent-fill-hover);
}

.bk-input-group input[type='checkbox']:checked {
  background: var(--accent-fill-active);
  border: calc(var(--outline-width) * 1px) solid var(--accent-fill-active);
}

.bk-input-group input[type='radio']:checked {
  background: var(--accent-foreground-rest);
  border: calc(var(--outline-width) * 4px) solid var(--accent-fill-rest);
}

.bk-input-group input[type='checkbox']:checked::before {
  content: '\2713';
  display: block;
  text-align: center;
  color: var(--neutral-foreground-rest);
  position: relative;
  left: 0rem;
  bottom: 0.25rem;
}

.bk-input-group input[type='checkbox']:disabled,
.bk-input-group input[type='checkbox']:disabled:hover {
  cursor: not-allowed;
  pointer-events: none !important;
  opacity: var(--disabled-opacity);
}

.bk-input-group input[type='checkbox']:disabled {
  border-color: var(--neutral-outline-rest);
}

.bk-input-group input[type='radio']:disabled:checked,
.bk-input-group input[type='radio']:disabled:checked:hover {
  background: var(--accent-foreground-rest);
  border: calc(var(--outline-width) * 4px) solid var(--accent-fill-rest);
}

.bk-input-group input[type='radio']:disabled,
.bk-input-group input[type='radio']:disabled:hover {
  cursor: not-allowed;
  pointer-events: none !important;
  opacity: var(--disabled-opacity);
}

.bk-input-group > .bk-spin-wrapper > .bk-spin-btn.bk-spin-btn-down:before {
  border-top: 5px solid var(--accent-fill-rest);
}

.bk-input-group > .bk-spin-wrapper > .bk-spin-btn.bk-spin-btn-up:before {
  border-bottom: 5px solid var(--accent-fill-rest);
}

/* Switch */

:host(.bk-Switch) .body {
  height: calc(
    (
        (var(--base-height-multiplier) + var(--density)) * var(--design-unit) /
          2 + var(--design-unit)
      ) * 1px
  );
}

.body > .knob {
  background-color: var(--neutral-foreground-rest);
  border-radius: calc(var(--control-corner-radius) * 1px);
  top: 6px;
  bottom: 6px;
  left: 5px;
  transition: all 0.2s ease-in-out 0s;
}

.body > .bar {
  background: var(--neutral-fill-input-rest);
  border: 1px solid var(--neutral-stroke-rest);
  border-radius: calc(var(--control-corner-radius) * 1px);
  height: calc(
    (
        (var(--base-height-multiplier) + var(--density)) * var(--design-unit) /
          2 + var(--design-unit)
      ) * 1px
  );
  top: 0;
  width: calc(
    (var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px
  );
}

.body > .bar:hover {
  border-color: var(--neutral-stroke-hover);
}

:host(.active) .bar {
  background: var(--accent-fill-rest);
  border-color: var(--accent-fill-rest);
}

:host(.active) .knob {
  background-color: var(--accent-foreground-rest);
  border-radius: calc(var(--control-corner-radius) * 1px);
  left: calc(100% - var(--switch-size) / 2 - 2px);
}

/* TextEditor */

.ql-container.ql-snow {
  border: 1px solid #ccc;
}

/* Progress Indicator */

progress {
  border-radius: calc(var(--corner-radius) * 1px);
  height: 5px;
  margin: 0 0 0.5em;
}

progress[value]::-moz-progress-bar {
  border-radius: calc(var(--corner-radius) * 1px);
}

progress:not([value])::-moz-progress-bar {
  border-radius: calc(var(--corner-radius) * 1px);
}

progress[value]::-webkit-progress-value {
  border-radius: calc(var(--corner-radius) * 1px);
}

progress[value]::-webkit-progress-bar {
  border-radius: calc(var(--corner-radius) * 1px);
}

progress:not([value])::-webkit-progress-bar {
  border-radius: calc(var(--corner-radius) * 1px);
}

progress:not([value])::before {
  border-radius: calc(var(--corner-radius) * 1px);
  height: 5px;
}

/* Panes */

video {
  max-height: 100% !important;
  max-width: 100% !important;
  min-width: auto !important;
  min-height: auto !important;
  border-radius: calc(var(--corner-radius) * 1px);
}

canvas {
  border-radius: calc(var(--corner-radius) * 1px);
}

iframe {
  border-radius: calc(var(--corner-radius) * 1px);
}

/* Markdown */

.markdown {
  padding: 0.5em;
}

.markdown a img {
  text-decoration: none;
}

.markdown img {
  border-radius: calc(var(--corner-radius) * 1px);
  max-width: 100%;
  margin: 1em;
}

.codehilite {
  padding-left: 1em;
  padding-right: 1em;
  border-radius: calc(var(--corner-radius) * 1px);
}

/* Alert */

.alert {
  padding-left: 1em;
  padding-right: 1em;
}

/* DataFrame */

table.panel-df {
  color: var(--neutral-foreground-rest);
}

.panel-df tbody tr:nth-child(odd) {
  background: var(--neutral-fill-active);
}

.panel-df thead {
  border-bottom: 1px solid var(--neutral-divider-rest);
}

.panel-df tr:hover {
  background: var(--accent-fill-hover) !important;
  color: var(--accent-foreground-rest);
  cursor: pointer;
}

/* Tabulator */

.pnx-tabulator.tabulator {
  max-width: 100%;
  overflow-x:;
}

/* SlickGrid */

/* fast_bokeh_slickgrid.css */
.slick-header-column.ui-state-default {
  border-right: 1px solid var(--neutral-focus);
}

.slick-sort-indicator-numbered {
  color: #6190cd;
}

.slick-sortable-placeholder {
  background: var(--neutral-focus);
}

.slick-cell,
.slick-headerrow-column,
.slick-footerrow-column {
  border: 1px solid transparent;
  border-right: 1px dotted var(--neutral-focus);
  border-bottom-color: var(--neutral-focus);
}

.slick-cell,
.slick-headerrow-column {
  border-bottom: none;
}

.slick-footerrow-column {
  border-top-color: var(--neutral-focus);
}

.slick-cell.highlighted {
  background: lightskyblue;
  background: rgba(0, 0, 255, 0.2);
}

.slick-cell.flashing {
  border: 1px solid red !important;
}

.slick-cell.editable {
  background: white;
  border-color: black;
  border-style: solid;
}

.slick-cell.bk-cell-index {
  background: transparent;
}

.slick-reorder-proxy {
  background: blue;
  opacity: 0.15;
}

.slick-reorder-guide {
  background: blue;
  opacity: 0.7;
}

.slick-selection {
  border: 2px dashed black;
}

.slick-header-columns {
  border-bottom: 1px solid var(--accent-fill-rest);
}

.slick-header-column {
  border-right: 1px solid var(--neutral-focus);
  background: transparent;
  font-weight: 500px;
}

.slick-header-column:hover {
  filter: brightness(0.98);
}

.slick-header-column-active {
  filter: brightness(0.95);
}

.slick-headerrow {
  background: #fafafa;
}

.slick-headerrow-column {
  background: #fafafa;
}

.slick-row.ui-state-active {
  background: #f5f7d7;
}

.slick-row {
  background: transparent;
}

.slick-row.selected {
  background: var(--accent-fill-active);
}

.slick-row:hover,
.slick-row.odd:hover {
  background-color: var(--accent-fill-hover);
  color: var(--accent-foreground-rest);
}

.slick-group {
  border-bottom: 2px solid var(--neutral-focus);
}

.slick-group-totals {
  color: gray;
  background: white;
}

.slick-cell.selected {
  background-color: var(--accent-fill-rest);
  color: var(--accent-foreground-rest);
}

.slick-cell.active {
  background-color: var(--accent-fill-active);
  border: none;
  border-bottom: 1px solid var(--accent-fill-active);
}

.slick-sortable-placeholder {
  background: var(--neutral-focus) !important;
}

.slick-row.odd {
  background: var(--neutral-fill-active);
}

.slick-row.ui-state-active {
  background: #f5f7d7;
}

.slick-row.loading {
  opacity: 0.5;
}

.slick-cell.invalid {
  border-color: red;
}

@-moz-keyframes slickgrid-invalid-hilite {
  from {
    box-shadow: 0 0 6px red;
  }
  to {
    box-shadow: none;
  }
}

@-webkit-keyframes slickgrid-invalid-hilite {
  from {
    box-shadow: 0 0 6px red;
  }
  to {
    box-shadow: none;
  }
}

.slick-header-menuitem-disabled {
  color: var(--neutral-focus);
}

.slick-columnpicker {
  background: #f0f0f0;
}

.slick-columnpicker li {
  background: none;
}

.slick-columnpicker li a:hover {
  background: white;
}

.slick-pager .ui-icon-container {
  border-color: gray;
}

.bk-cell-special-defaults {
  border-right-color: var(--neutral-focus);
  border-right-style: solid;
  background: #f5f5f5;
}

.bk-cell-select {
  border-right-color: var(--neutral-focus);
  border-right-style: solid;
  background: #f5f5f5;
}

.bk-cell-index {
  border-right-color: var(--neutral-focus);
  border-right-style: solid;
  background: #f5f5f5;
  color: gray;
}

/* Quill editor */

.ql-editor {
  color: var(--neutral-foreground-rest);
}

.ql-editor.ql-blank::before {
  color: var(--neutral-foreground-rest);
}

/* Float panel */

.jsPanel .jsPanel-content {
  background-color: var(--background-color);
  color: var(--neutral-foreground-rest);
}
