/* 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);
}

/* Track */

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Separator */

hr {
    color: var(--neutral-divider-rest);
    border-color: var(--neutral-divider-rest);
    background: var(--neutral-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.50);
    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,.05);
    box-shadow: inset 0 1px 1px rgba(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 {
    background-color: var(--neutral-fill-rest);
    border: unset;
    box-shadow: unset;
    color: var(--neutral-foreground-rest);
    height: unset;
}

.card-margin {
    margin: 1em;
}

.card-header > .card-header-row {
    margin-left: 15px;
}

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

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

/* Input widgets */

.bk-input {
    background-color: var(--background-color);
    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 {
    background: var(--accent-fill-hover) -webkit-linear-gradient(bottom, var(--accent-fill-hover) 0%, var(--accent-fill-hover) 100%);
}

.bk-input option:hover, .bk-input:focus option:hover {
    background: var(--accent-fill-hover) -webkit-linear-gradient(bottom, var(--accent-fill-hover) 0%, var(--accent-fill-hover) 100%);
}

/* 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.bk-btn-default {
    background-color:  var(--neutral-fill-rest);
    color: var(--neutral-foreground-rest);
}

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

.bk-btn.bk-btn-default.bk-active {
    box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%);
    filter: brightness(0.9);
}

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

/* 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-cut-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: 0.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-cut-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);
}

/* 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-cut-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 {
    background: var(--neutral-fill-active);
    padding-top: 1px;
    padding-bottom: 1px;
    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-cut-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-cut-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-cut-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);
}
