/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-fuchsia-50: oklch(97.7% 0.017 320.058);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --transitions-duration: 0.2s;
    --z-header: 10;
    --z-sidebar-backdrop: 15;
    --z-sidebar: 20;
    --z-dropdown: 30;
    --z-modal-backdrop: 40;
    --color-deep-back: #eaf3fb;
    --color-panel-back: #f8fafc;
    --color-component-fore: #000000;
    --color-component-back: #ffffff;
    --color-component-border: #c2c2c2;
    --color-link-fore: var(--color-blue-600);
    --color-link-hover: var(--color-orange-600);
    --color-primary-fore: var(--color-blue-600);
    --color-secondary-fore: var(--color-indigo-500);
    --color-success-fore: var(--color-green-600);
    --color-warning-fore: var(--color-amber-500);
    --color-warning2-fore: var(--color-orange-500);
    --color-danger-fore: var(--color-rose-600);
    --color-error-fore: var(--color-red-600);
    --color-info-fore: var(--color-slate-400);
    --color-primary-back: #2285e1;
    --component-hover-back: #f7f7f7;
    --component-hover-border: #89b0d4;
    --component-focused-back: #eaf3fb;
    --component-focused-border: #89b0d4;
    --component-active-back: #e6e6e6;
    --component-disabled-back: #dedede;
    --component-disabled-border: #cecece;
    --btn-borderless-hover-back: #e0e0e0;
    --btn-borderless-focused-back: #cccccc;
    --btn-borderless-active-back: #d9d9d9;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0;
  }
  .top-full {
    top: 100%;
  }
  .right-0 {
    right: 0;
  }
  .isolate {
    isolation: isolate;
  }
  .z-\(--z-dropdown\) {
    z-index: var(--z-dropdown);
  }
  .z-\(--z-modal-backdrop\) {
    z-index: var(--z-modal-backdrop);
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }
  .my-10 {
    margin-block: calc(var(--spacing) * 10);
  }
  .mt-0 {
    margin-top: 0;
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mr-0 {
    margin-right: 0;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .ml-auto {
    margin-left: auto;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing)) calc(var(--spacing));
    outline: none;
    border-radius: 2px;
    border-width: 1px;
    color: var(--color-component-fore);
    background-color: var(--color-component-back);
    border-color: var(--color-component-border);
    cursor: pointer;
    &:hover {
      background-color: var(--component-hover-back);
      border-color: var(--component-hover-border);
    }
    &:focus {
      background-color: var(--component-focused-back);
      border-color: var(--component-focused-border);
    }
    &:active {
      background-color: var(--component-active-back);
    }
    &:disabled {
      background-color: var(--component-disabled-back);
      border-color: var(--component-disabled-border);
      cursor: default;
    }
    &:has(span) {
      padding: calc(var(--spacing)) calc(var(--spacing) * 3);
    }
    &.btn-borderless {
      border-width: 0px;
      border-color: var(--color-component-back);
      &:hover {
        background-color: var(--btn-borderless-hover-back);
      }
      &:focus {
        background-color: var(--btn-borderless-focused-back);
        border-color: var(--component-focused-border);
      }
      &:active {
        background-color: var(--btn-borderless-active-back);
        border-color: var(--component-focused-border);
      }
    }
    &.btn-primary {
      background-color: var(--color-primary-back);
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-\[50px\] {
    height: 50px;
  }
  .h-full {
    height: 100%;
  }
  .max-h-\[50vh\] {
    max-height: 50vh;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-25 {
    width: calc(var(--spacing) * 25);
  }
  .w-100 {
    width: calc(var(--spacing) * 100);
  }
  .w-\[48px\] {
    width: 48px;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .w-sm {
    width: var(--container-sm);
  }
  .max-w-100 {
    max-width: calc(var(--spacing) * 100);
  }
  .min-w-\[100vw\] {
    min-width: 100vw;
  }
  .min-w-full {
    min-width: 100%;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-\[0\.5rem\] {
    gap: 0.5rem;
  }
  .gap-x-1 {
    column-gap: var(--spacing);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  .justify-self-end {
    justify-self: flex-end;
  }
  .justify-self-start {
    justify-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .overflow-y-scroll {
    overflow-y: scroll;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-\[50\%\] {
    border-radius: 50%;
  }
  .rounded-\[53px\] {
    border-radius: 53px;
  }
  .rounded-\[56px\] {
    border-radius: 56px;
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }
  .border-component-border {
    border-color: var(--color-component-border);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .bg-deep-back {
    background-color: var(--color-deep-back);
  }
  .bg-panel-back {
    background-color: var(--color-panel-back);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .p-0 {
    padding: 0;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-478 {
    padding: calc(var(--spacing) * 478);
  }
  .p-479 {
    padding: calc(var(--spacing) * 479);
  }
  .p-496 {
    padding: calc(var(--spacing) * 496);
  }
  .p-509 {
    padding: calc(var(--spacing) * 509);
  }
  .p-845 {
    padding: calc(var(--spacing) * 845);
  }
  .p-1120 {
    padding: calc(var(--spacing) * 1120);
  }
  .p-\[0\.3rem\] {
    padding: 0.3rem;
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-\[0\.5rem\] {
    padding-inline: 0.5rem;
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .py-\[0\.75rem\] {
    padding-block: 0.75rem;
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .text-left {
    text-align: left;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .lnk {
    color: var(--color-link-fore);
    &:focus {
      color: var(--color-link-hover);
    }
    &:hover {
      color: var(--color-link-hover);
    }
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-danger-fore {
    color: var(--color-danger-fore);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-success-fore {
    color: var(--color-success-fore);
  }
  .text-warning-fore {
    color: var(--color-warning-fore);
  }
  .text-warning2-fore {
    color: var(--color-warning2-fore);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .opacity-30 {
    opacity: 30%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-red-500 {
    --tw-ring-color: var(--color-red-500);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .outline-transparent {
    outline-color: transparent;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .sm\:mt-10 {
    @media (width >= 40rem) {
      margin-top: calc(var(--spacing) * 10);
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:w-100 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 100);
    }
  }
  .sm\:px-20 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
  .md\:static {
    @media (width >= 48rem) {
      position: static;
    }
  }
  .md\:mx-10 {
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 10);
    }
  }
  .md\:my-12 {
    @media (width >= 48rem) {
      margin-block: calc(var(--spacing) * 12);
    }
  }
  .md\:mt-0 {
    @media (width >= 48rem) {
      margin-top: 0;
    }
  }
  .md\:mt-20 {
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 20);
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:w-1\/2 {
    @media (width >= 48rem) {
      width: calc(1 / 2 * 100%);
    }
  }
  .md\:w-35 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 35);
    }
  }
  .md\:w-110 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 110);
    }
  }
  .md\:w-150 {
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 150);
    }
  }
  .md\:w-\[30rem\] {
    @media (width >= 48rem) {
      width: 30rem;
    }
  }
  .md\:w-\[123px\] {
    @media (width >= 48rem) {
      width: 123px;
    }
  }
  .md\:w-md {
    @media (width >= 48rem) {
      width: var(--container-md);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:gap-x-4 {
    @media (width >= 48rem) {
      column-gap: calc(var(--spacing) * 4);
    }
  }
  .md\:border-0 {
    @media (width >= 48rem) {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .md\:bg-transparent {
    @media (width >= 48rem) {
      background-color: transparent;
    }
  }
  .md\:p-0 {
    @media (width >= 48rem) {
      padding: 0;
    }
  }
  .md\:px-4 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .md\:text-6xl {
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .lg\:my-14 {
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 14);
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:w-1\/3 {
    @media (width >= 64rem) {
      width: calc(1 / 3 * 100%);
    }
  }
  .lg\:w-100 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 100);
    }
  }
  .lg\:w-lg {
    @media (width >= 64rem) {
      width: var(--container-lg);
    }
  }
}
body {
  &:where(.dark, .dark *) {
    --color-deep-back: #303234;
    --color-panel-back: #3c3f41;
    --color-component-fore: #bbbbbb;
    --color-component-back: #3c3f41;
    --color-component-border: #606263;
    --color-link-fore: var(--color-blue-400);
    --color-link-hover: var(--color-orange-300);
    --color-primary-fore: var(--color-blue-400);
    --color-secondary-fofore: var(--color-indigo-300);
    --color-success-fore: var(--color-green-400);
    --color-warning-fore: var(--color-amber-300);
    --color-warning2-fore: var(--color-orange-300);
    --color-danger-fore: var(--color-rose-400);
    --color-error-fore: var(--color-red-400);
    --color-info-fore: var(--color-slate-200);
    --color-primary-back: #446e9e;
    --color-secondary-back: var(--color-indigo-900);
    --color-success-back: #11412e;
    --color-warning-back: #b87608;
    --color-warning2-back: #a34b0e;
    --color-danger-back: #b33333;
    --color-error-back: #ab1e1e;
    --color-info-back: #6f7a8a;
    --component-hover-back: #55585a;
    --component-hover-border: #446e9e;
    --component-focused-back: #3c3f41;
    --component-focused-border: #446e9e;
    --component-active-back: #5d5f62;
    --component-disabled-back: #55585a;
    --component-disabled-border: #606263;
    --btn-borderless-hover-back: #505355;
    --btn-borderless-focused-back: #3c3f41;
    --btn-borderless-active-back: #585a5c;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
    }
  }
}


@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.animate-fadein {
  animation: fadein 0.15s linear;
}

.desktop-header {
  position: fixed;
  height: 4rem;
  left: 0;
  top: 0;
  width: 100%;
  background-color: var(--color-panel-back);
  transition: left var(--transitions-duration);
  z-index: var(--z-header);
  
  &.testing {
    border-width: 1px;
    border-color: var(--color-red-500);
    background-color: var(--color-red-50);
    
    .dark & {
      /*background-color: color-mix(in srgb, var(--color-red-900) 78%, black);*/
      background-color: var(--color-red-950);
      border-color: var(--color-red-700);
    }
  }
}

.desktop-sidebar {
  position: fixed;
  top: 4.5rem;
  left: 0.5rem;
  width: 16rem;
  height: calc(100vh - 5rem);
  z-index: var(--z-sidebar);
  overflow-y: auto;
  user-select: none;
  margin: 0rem;
  padding: 0.5rem;
  border-radius: 1rem;
  background-color: var(--color-panel-back);
  transition:
    transform var(--transitions-duration),
    left var(--transitions-duration);
}

.desktop-sidebar-item-link {
  display: inline-flex;
  align-items: center;
  outline: none;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  width: 100%;
  border-radius: 6px;
  border-width: 0px;
  background-color: transparent;
  cursor: pointer;
  transition: background 0.3s ease-in-out;

  &:hover {
    background-color: var(--btn-borderless-hover-back);
  }
}

.desktop-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
  padding: 4.5rem 0.5rem 0.5rem 17rem;
  transition: padding-left var(--transitions-duration);
}

.desktop-main-content {
  height: calc(100vh - 5rem);
  padding: 0.5rem;
  border-radius: 1rem;
  background-color: var(--color-panel-back);
}

.message-primary {
  /*background-color: var(--color-blue-50);*/
  color: var(--color-primary-fore);
  border-color: var(--color-primary-fore);
}

.message-secondary {
  color: var(--color-secondary-fore);
  border-color: var(--color-secondary-fore);
}

.message-success {
  /*background-color: var(--color-green-50);*/
  color: var(--color-success-fore);
  border-color: var(--color-success-fore);
}

.message-warning {
  /*background-color: var(--color-yellow-50);*/
  color: var(--color-warning-fore);
  border-color: var(--color-warning-fore);
}

.message-warning2 {
  /*background-color: var(--color-orange-50);*/
  color: var(--color-warning2-fore);
  border-color: var(--color-warning2-fore);
}

.message-danger {
  /*background-color: var(--color-fuchsia-50);*/
  color: var(--color-danger-fore);
  border-color: var(--color-danger-fore);
}

.message-error {
  /*background-color: var(--color-red-50);*/
  color: var(--color-error-fore);
  border-color: var(--color-error-fore);
}

.message-info {
  color: var(--color-info-fore);
  border-color: var(--color-info-fore);
}

/* message transitions */
.message-enter-active {
  transition: opacity 0.3s;
}

.message-leave-from {
  max-height: 1000px;
}

.message-leave-to {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

.message-leave-active {
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.3s;
}

.message-leave-active {
  opacity: 0;
}

.message-close-button {
  transition: background 0.3s ease-in-out;
  
  &:hover {
    background-color: var(--btn-borderless-hover-back);
  }
}

/* Selectable component */
.selectable-container {
  position: relative;
}
  
.selectable-container > .selectable-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  width: 100%;
  border-width: 1px;
  border-radius: 4px;
  padding: 0.45rem 0.65rem;
  background-color: var(--color-component-back);
  border-color: var(--color-component-border);
  cursor: pointer;

  &:focus {
    background-color: var(--component-focused-back);
    border-color: var(--component-focused-border);
  }
  &:disabled {
    background-color: var(--component-disabled-back);
    border-color: var(--component-disabled-border);
  }
  &:focus-visible {
    outline-style: none;
  }
}
.selectable-button > .arrow { 
  font-size: 1rem;
  transition: transform 0.2s;
}
.selectable-button > .arrow.open { 
  transform: rotate(180deg);
}

.selectable-container > .options-list {
  position: absolute;
  left: 0;
  background-color: var(--color-component-back);
  border-color: var(--color-component-border);
  border-width: 1px;
  border-radius: 4px;
  list-style: none;
  padding: 2px;
  margin: 0;
  margin-top: 0.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.options-list-enter-active, .options-list-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.options-list-enter-from, .options-list-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}
.options-list > .option-item {
  padding: 10px;
  cursor: pointer;
  
  &:hover {
    background-color: var(--btn-borderless-hover-back);
  }
}

/* Componente principal donde van las vistas */
.desktop-wrapper {
  min-height: 100vh;
  background-color: var(--color-deep-back);
}

html {
    height: 100%;
    font-size: 87.5%;
}

body {
    font-family: 'Lato', sans-serif;
    color: var(--color-component-fore);
    background-color: var(--color-component-back);
    margin: 0;
    padding: 0;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input {
  border-width: 1px;
  border-radius: 4px;
  padding: 0.45rem 0.65rem;
  background-color: var(--color-component-back);
  border-color: var(--color-component-border);

  &:focus {
    background-color: var(--component-focused-back);
    border-color: var(--component-focused-border);
  }
  &:disabled {
    background-color: var(--component-disabled-back);
    border-color: var(--component-disabled-border);
  }
  &:focus-visible {
    outline-style: none;
  }
}

input[type="checkbox"] {
  accent-color: var(--color-component-back);
  &:hover {
    accent-color: var(--component-focused-back);
  }
}

select {
  line-height: 1.5;
  border-width: 1px;
  border-radius: 4px;
  padding: 0.45rem 0.65rem;
  background-color: var(--color-component-back);
  border-color: var(--color-component-border);

  &:focus {
    background-color: var(--component-focused-back);
    border-color: var(--component-focused-border);
  }
  &:disabled {
    background-color: var(--component-disabled-back);
    border-color: var(--component-disabled-border);
  }
  &:focus-visible {
    outline-style: none;
  }
}



/* Los limites de 1024 pixeles son para el tamaño responsivo lg de tailwind */
@media (min-width: 1025px) {
  .desktop-wrapper {
    &.desktop-static-inactive {
      .desktop-sidebar {
        transform: translateX(-100%);
        left: 0;
      }

      .desktop-main {
        padding-left: 0.5rem;
      }
    }
            
    .desktop-mask {
      display: none;
    }
  }
}

@media (max-width: 1024px) {
  .desktop-wrapper {
    .desktop-main {
      padding-left: 0.5rem;
    }

    .desktop-sidebar {
      transform: translateX(-100%);
      left: 0;
      top: 0;
      height: 100vh;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      transition:
        transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
        left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
    }

    .desktop-mask {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--z-sidebar-backdrop);
      width: 100%;
      height: 100%;
      background-color: rgb(0 0 0 / 0.6);
    }

    &.desktop-mobile-active {
      .desktop-sidebar {
        transform: translateX(0);
      }

      .desktop-mask {
        display: block;
      }
    }
  }
}


/* Variables */
.tabulator {
 /* Main Theme Variables */
  --tabulator-backgroundcolor: var(--color-component-back);
  --tabulator-bordercolor: var(--color-component-border);
  --tabulator-textsize: 1rem;
  
  /* header theming */
  --tabulator-headerbackgroundcolor: var(--color-component-back);
  --tabulator-headertextcolor: var(--color-component-fore);
  --tabulator-headerbordercolor: var(--color-component-border);
  --tabulator-headerseparatorcolor: var(--color-component-border);
  --tabulator-headermargin: 0.3rem;
  
  /* TODO column header arrows */
  --tabulator-sortarrowhover: #555;
  --tabulator-sortarrowactive: #666;
  --tabulator-sortarrowinactive: #bbb;
  --tabulator-tickcolor: #2dc214;
  --tabulator-crosscolor: #ce1515;
  
  --tabulator-columnresizeguidecolor: #999;
  
  /* row theming */
  --tabulator-rowbackgroundcolor: #e0e7ff;
  --tabulator-rowaltbackgroundcolor: var(--color-component-back);
  --tabulator-rowbordercolor: var(--color-component-border);
  --tabulator-rowtextcolor: var(--color-component-fore);
  --tabulator-rowhoverbackground: var(--btn-borderless-hover-back);
  
  --tabulator-rowselectedbackground: var(--component-focused-border);
  --tabulator-rowselectedbackgroundhover: #769bcc;
  
  --tabulator-editboxcolor: #1d68cd;
  --tabulator-errorcolor: #dd0000;
  
  /* TODO footer theming */
  --tabulator-footerbackgroundcolor: #e6e6e6;
  --tabulator-footertextcolor: #555;
  --tabulator-footerbordercolor: #aaa;
  --tabulator-footerseparatorcolor: #999;
  --tabulator-footeractivecolor: #d00;
  
  --tabulator-spreadsheetactivetabcolor: #fff;
  
  /* TODO range selection */
  --tabulator-rangebordercolor: #2975dd;
  --tabulator-rangehandlecolor: #2975dd;
  --tabulator-rangeheaderselectedbackground: #3876ca;
  --tabulator-rangeheaderselectedtextcolor: #ffffff;
  --tabulator-rangeheaderhighlightbackground: #d6d6d6;
  --tabulator-rangeheadertexthighlightbackground: #000000;
}

.dark .tabulator {
  --tabulator-backgroundcolor: #2d2f31;
  
  --tabulator-rowbackgroundcolor: #2d2f31;
  --tabulator-rowaltbackgroundcolor: #46494b;
  --tabulator-rowselectedbackgroundhover: #2E4B6B;
}

.tabulator {
  position: relative;
  border: 1px solid var(--tabulator-bordercolor);
  background-color: var(--tabulator-backgroundcolor);
  
  font-size: var(--tabulator-textsize);
  text-align: left;
  overflow: hidden;
  
  transform: translateZ(0);
  
  &[tabulator-layout="fitDataFill"] {
    .tabulator-tableholder {
      .tabulator-table {
        min-width: 100%;
      }
    }
  }
  
  &[tabulator-layout="fitDataTable"] {
    display: inline-block;
  }
  
  &.tabulator-block-select {
    user-select: none;
  }
  
  &.tabulator-ranges {
    .tabulator-cell:not(.tabulator-editing) {
      user-select: none;
    }
  }
  
  .tabulator-header {
    position: relative;
    box-sizing: border-box;
    
    width: 100%;
    
    border-bottom: 1px solid var(--tabulator-headerseparatorcolor);
    background-color: var(--tabulator-headerbackgroundcolor);
    color: var(--tabulator-headertextcolor);
    font-weight: bold;
    
    white-space: nowrap;
    overflow: hidden;
    
    outline: none;
    
    &.tabulator-header-hidden {
      display: none;
    }
    
    .tabulator-header-contents {
      position: relative;
      overflow: hidden;
      
      .tabulator-headers {
        display: inline-block;
      }
    }
    
    .tabulator-col {
      display: inline-flex;
      position: relative;
      box-sizing: border-box;
      
      flex-direction: column;
      justify-content: flex-start;
      
      border-right: 1px solid var(--tabulator-headerbordercolor);
      background: var(--tabulator-headerbackgroundcolor);
      
      text-align: left;
      vertical-align: bottom;
      overflow: hidden;
      
      &.tabulator-moving {
        position: absolute;
        border: 1px solid var(--tabulator-headerseparatorcolor);
        background: color-mix(in srgb, var(--tabulator-headerbackgroundcolor) 90%, black);
        pointer-events: none;
      }
      
      &.tabulator-range-highlight {
        background-color: var(--tabulator-rangeheaderhighlightbackground);
        color: var(--tabulator-rangeheadertexthighlightbackground);
      }
      
      &.tabulator-range-selected {
        background-color: var(--tabulator-rangeheaderselectedbackground);
        color: var(--tabulator-rangeheaderselectedtextcolor);
      }
      
      .tabulator-col-content {
        box-sizing: border-box;
        position: relative;
        padding: 4px;
        
        .tabulator-header-popup-button {
          padding: 0 8px;
          
          &:hover {
            cursor: pointer;
            opacity: .6;
          }
        }
        
        .tabulator-col-title-holder {
          position: relative;
        }
        
        .tabulator-col-title {
          box-sizing: border-box;
          width: 100%;
          
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: bottom;
          
          &.tabulator-col-title-wrap {
            white-space: normal;
            text-overflow: initial;
          }
          
          .tabulator-title-editor {
            box-sizing: border-box;
            width: 100%;
            
            border: 1px solid #999;
            
            padding: 1px;
            
            background: #fff;
          }
          
          .tabulator-header-popup-button + .tabulator-title-editor {
            width: calc(100% - 22px);
          }
        }
        
        .tabulator-col-sorter {
          display: flex;
          align-items: center;
          
          position: absolute;
          top: 0;
          bottom: 0;
          right: 4px;
          
          .tabulator-arrow {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid var(--tabulator-sortarrowinactive);
          }
        }
      }
      
      &.tabulator-col-group {
        .tabulator-col-group-cols {
          position: relative;
          display: flex;
          
          border-top: 1px solid var(--tabulator-headerbordercolor);
          overflow: hidden;
          
          margin-right: -1px;
        }
      }
      
      .tabulator-header-filter {
        position: relative;
        box-sizing: border-box;
        margin-top: 2px;
        width: 100%;
        text-align: center;
        
        textarea {
          height: auto !important;
        }
        
        svg {
          margin-top: 3px;
        }
        
        input {
          &::-ms-clear {
            width: 0;
            height: 0;
          }
        }
      }
      
      &.tabulator-sortable {
        .tabulator-col-title {
          padding-right: 25px;
        }
        
        @media (hover: hover) and (pointer: fine) {
          &.tabulator-col-sorter-element:hover {
            cursor: pointer;
            background-color: color-mix(in srgb, var(--tabulator-headerbackgroundcolor) 90%, black);
          }
        }
        
        &[aria-sort="none"] {
          .tabulator-col-content .tabulator-col-sorter {
            color: var(--tabulator-sortarrowinactive);
            
            @media (hover: hover) and (pointer: fine) {
              &.tabulator-col-sorter-element .tabulator-arrow:hover {
                cursor: pointer;
                border-bottom: 6px solid var(--tabulator-sortarrowhover);
              }
            }
            
            .tabulator-arrow {
              border-top: none;
              border-bottom: 6px solid var(--tabulator-sortarrowinactive);
            }
          }
        }
        
        &[aria-sort="ascending"] {
          .tabulator-col-content .tabulator-col-sorter {
            color: var(--tabulator-sortarrowactive);
            
            @media (hover: hover) and (pointer: fine) {
              &.tabulator-col-sorter-element .tabulator-arrow:hover {
                cursor: pointer;
                border-bottom: 6px solid var(--tabulator-sortarrowhover);
              }
            }
            
            .tabulator-arrow {
              border-top: none;
              border-bottom: 6px solid var(--tabulator-sortarrowactive);
            }
          }
        }
        
        &[aria-sort="descending"] {
          .tabulator-col-content .tabulator-col-sorter {
            color: var(--tabulator-sortarrowactive);
            
            @media (hover: hover) and (pointer: fine) {
              &.tabulator-col-sorter-element .tabulator-arrow:hover {
                cursor: pointer;
                border-top: 6px solid var(--tabulator-sortarrowhover);
              }
            }
            
            .tabulator-arrow {
              border-bottom: none;
              border-top: 6px solid var(--tabulator-sortarrowactive);
              color: var(--tabulator-sortarrowactive);
            }
          }
        }
      }
      
      &.tabulator-col-vertical {
        .tabulator-col-content {
          .tabulator-col-title {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        
        &.tabulator-col-vertical-flip {
          .tabulator-col-title {
            transform: rotate(180deg);
          }
        }
        
        &.tabulator-sortable {
          .tabulator-col-title {
            padding-right: 0;
            padding-top: 20px;
          }
          
          &.tabulator-col-vertical-flip {
            .tabulator-col-title {
              padding-right: 0;
              padding-bottom: 20px;
            }
          }
          
          .tabulator-col-sorter {
            justify-content: center;
            left: 0;
            right: 0;
            top: 4px;
            bottom: auto;
          }
        }
      }
    }
    
    .tabulator-frozen {
      position: sticky;
      left: 0;
      z-index: 11;
      
      &.tabulator-frozen-left {
        border-right: 2px solid var(--tabulator-rowbordercolor);
      }
      
      &.tabulator-frozen-right {
        border-left: 2px solid var(--tabulator-rowbordercolor);
      }
    }
    
    .tabulator-calcs-holder {
      box-sizing: border-box;
      display: inline-block;
      
      background: color-mix(in srgb, var(--tabulator-headerbackgroundcolor) 95%, white) !important;
      
      border-top: 1px solid var(--tabulator-rowbordercolor);
      border-bottom: 1px solid var(--tabulator-headerbordercolor);
      
      .tabulator-row {
        background: color-mix(in srgb, var(--tabulator-headerbackgroundcolor) 95%, white) !important;
        
        .tabulator-col-resize-handle {
          display: none;
        }
      }
    }
    
    .tabulator-frozen-rows-holder { 
      padding-top: 1em;
      display: inline-block;  
      &:empty {
        display: none;
      }
    }
  }
  
  .tabulator-tableholder {
    position: relative;
    width: 100%;
    white-space: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    
    &:focus {
      outline: none;
    }
    
    .tabulator-placeholder {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      
      min-width: 100%;
      width: 100%;
      
      &[tabulator-render-mode="virtual"] {
        min-height: 100%;
      }
      
      .tabulator-placeholder-contents {
        display: inline-block;
        text-align: center;
        
        padding: 10px;
        
        color: #ccc;
        font-weight: bold;
        font-size: 20px;
        
        white-space: normal;
      }
    }
    
    .tabulator-table {
      position: relative;
      display: inline-block;
      background-color: var(--tabulator-rowbackgroundcolor);
      white-space: nowrap;
      overflow: visible;
      color: var(--tabulator-rowtextcolor);
      
      .tabulator-row {
        &.tabulator-calcs {
          font-weight: bold;
          background: color-mix(in srgb, var(--tabulator-rowaltbackgroundcolor) 95%, black) !important;
          
          &.tabulator-calcs-top {
            border-bottom: 2px solid var(--tabulator-rowbordercolor);
          }
          
          &.tabulator-calcs-bottom {
            border-top: 2px solid var(--tabulator-rowbordercolor);
          }
        }
      }
    }
    
    .tabulator-range-overlay {
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: none;
      
      .tabulator-range {
        position: absolute;
        box-sizing: border-box;
        border: 1px solid var(--tabulator-rangebordercolor);
        
        &.tabulator-range-active::after {
          content: '';
          position: absolute;
          right: -3px;
          bottom: -3px;
          width: 6px;
          height: 6px;
          background-color: var(--tabulator-rangehandlecolor);
          border-radius: 999px;
        }
      }
      
      .tabulator-range-cell-active {
        position: absolute;
        box-sizing: border-box;
        border: 2px solid var(--tabulator-rangebordercolor);
      }
    }
  }
  
  .tabulator-footer {
    border-top: 1px solid var(--tabulator-footerseparatorcolor);
    background-color: var(--tabulator-footerbackgroundcolor);
    
    color: var(--tabulator-footertextcolor);
    font-weight: bold;
    white-space: nowrap;
    user-select: none;
    
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    
    .tabulator-footer-contents {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      
      padding: 5px 10px;
      
      &:empty {
        display: none;
      }
    }
    
    .tabulator-spreadsheet-tabs {
      margin-top: -5px;
      overflow-x: auto;
      
      .tabulator-spreadsheet-tab {
        display: inline-block;
        padding: 5px;
        
        border: var(--tabulator-bordercolor) 1px solid;
        border-top: none;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        
        font-size: .9em;
        
        &:hover {
          cursor: pointer;
          opacity: .7;
        }
        
        &.tabulator-spreadsheet-tab-active {
          background: var(--tabulator-spreadsheetactivetabcolor);
        }
      }
    }
    
    .tabulator-calcs-holder {
      box-sizing: border-box;
      width: 100%;
      
      text-align: left;
      
      background: color-mix(in srgb, var(--tabulator-footerbackgroundcolor) 95%, white) !important;
      border-bottom: 1px solid var(--tabulator-rowbordercolor);
      border-top: 1px solid var(--tabulator-rowbordercolor);
      
      overflow: hidden;
      
      .tabulator-row {
        display: inline-block;
        background: color-mix(in srgb, var(--tabulator-footerbackgroundcolor) 95%, white) !important;
        
        .tabulator-col-resize-handle {
          display: none;
        }
      }
      
      &:only-child {
        margin-bottom: -5px;
        border-bottom: none;
      }
    }
    
    &>*+.tabulator-page-counter {
      margin-left: 10px;
    }
    
    .tabulator-page-counter {
      font-weight: normal;
    }
    
    .tabulator-paginator {
      flex: 1;
      
      text-align: right;
      
      color: var(--tabulator-footertextcolor);
      font-family: inherit;
      font-weight: inherit;
      font-size: inherit;
    }
    
    .tabulator-page-size {
      display: inline-block;
      
      margin: 0 5px;
      padding: 2px 5px;
      
      border: 1px solid var(--tabulator-footerbordercolor);
      border-radius: 3px;
    }
    
    .tabulator-pages {
      margin: 0 7px;
    }
    
    .tabulator-page {
      display: inline-block;
      
      margin: 0 2px;
      padding: 2px 5px;
      
      border: 1px solid var(--tabulator-footerbordercolor);
      border-radius: 3px;
      
      background: rgba(255, 255, 255, .2);
      
      &.active {
        color: var(--tabulator-footeractivecolor);
      }
      
      &:disabled {
        opacity: .5;
      }
      
      &:not(disabled) {
        @media (hover: hover) and (pointer: fine) {
          &:hover {
            cursor: pointer;
            background: rgba(0, 0, 0, .2);
            color: #fff;
          }
        }
      }
    }
  }
  
  .tabulator-col-resize-handle {
    position: relative;
    display: inline-block;
    width: 6px;
    
    margin-left: -3px;
    margin-right: -3px;
    
    z-index: 11;
    vertical-align: middle;
    
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        cursor: ew-resize;
      }
    }
    
    &:last-of-type {
      width: 3px;
      margin-right: 0;
    }
  }
  
  .tabulator-col-resize-guide {
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    margin-left: -0.5px;
    background-color: var(--tabulator-columnresizeguidecolor);
    opacity: .5;
  }
  
  .tabulator-row-resize-guide {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    margin-top: -0.5px;
    background-color: var(--tabulator-columnresizeguidecolor);
    opacity: .5;
  }
  
  .tabulator-alert {
    position: absolute;
    display: flex;
    align-items: center;
    
    top: 0;
    left: 0;
    z-index: 100;
    
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .4);
    text-align: center;
    
    .tabulator-alert-msg {
      display: inline-block;
      
      margin: 0 auto;
      padding: 10px 20px;
      
      border-radius: 10px;
      
      background: #fff;
      font-weight: bold;
      font-size: 16px;
      
      &.tabulator-alert-state-msg {
        border: 4px solid #333;
        color: #000;
      }
      
      &.tabulator-alert-state-error {
        border: 4px solid #d00;
        color: #590000;
      }
    }
  }
}

.tabulator-row {
  position: relative;
  box-sizing: border-box;
  min-height: calc(var(--tabulator-textsize) + (var(--tabulator-headermargin) * 2));
  background-color: var(--tabulator-rowbackgroundcolor);
  
  &.tabulator-row-even {
    background-color: var(--tabulator-rowaltbackgroundcolor);
  }
  
  @media (hover: hover) and (pointer: fine) {
    &.tabulator-selectable:hover {
      background-color: var(--tabulator-rowhoverbackground);
      cursor: pointer;
    }
  }
  
  &.tabulator-selected {
    background-color: var(--tabulator-rowselectedbackground);
  }
  
  @media (hover: hover) and (pointer: fine) {
    &.tabulator-selected:hover {
      background-color: var(--tabulator-rowselectedbackgroundhover);
      cursor: pointer;
    }
  }
  
  &.tabulator-row-moving {
    border: 1px solid #000;
    background: #fff;
  }
  
  &.tabulator-moving {
    position: absolute;
    
    border-top: 1px solid var(--tabulator-rowbordercolor);
    border-bottom: 1px solid var(--tabulator-rowbordercolor);
    
    pointer-events: none;
    z-index: 15;
  }
  
  &.tabulator-range-highlight {
    .tabulator-cell.tabulator-range-row-header {
      background-color: var(--tabulator-rangeheaderhighlightbackground);
      color: var(--tabulator-rangeheadertexthighlightbackground);
    }
    
    &.tabulator-range-selected {
      .tabulator-cell.tabulator-range-row-header {
        background-color: var(--tabulator-rangeheaderselectedbackground);
        color: var(--tabulator-rangeheaderselectedtextcolor);
      } 
    }
  }
  
  &.tabulator-range-selected {
    .tabulator-cell.tabulator-range-row-header {
      background-color: var(--tabulator-rangeheaderselectedbackground);
      color: var(--tabulator-rangeheaderselectedtextcolor);
    }
  }
  
  .tabulator-row-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    
    &.prev {
      top: 0;
      bottom: auto;
    }
    
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        cursor: ns-resize;
      }
    }
  }
  
  .tabulator-responsive-collapse {
    box-sizing: border-box;
    
    padding: 5px;
    
    border-top: 1px solid var(--tabulator-rowbordercolor);
    border-bottom: 1px solid var(--tabulator-rowbordercolor);
    
    &:empty {
      display: none;
    }
    
    table {
      font-size: var(--tabulator-textsize);
      
      tr {
        td {
          position: relative;
          
          &:first-of-type {
            padding-right: 10px;
          }
        }
      }
    }
  }
  
  .tabulator-cell {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding: 4px;
    border-right: 1px solid var(--tabulator-rowbordercolor);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;

    .tabulator-tick {
      fill: var(--tabulator-tickcolor);
    }

    .tabulator-cross {
      fill: var(--tabulator-crosscolor);
    }
    
    &.tabulator-row-header {
      border-right: 1px solid var(--tabulator-bordercolor);
      border-bottom: 1px solid var(--tabulator-rowbordercolor);
      background: var(--tabulator-headerbackgroundcolor);
    }
    
    &.tabulator-frozen {
      display: inline-block;
      position: sticky;
      
      left: 0;
      
      background-color: inherit;
      
      z-index: 11;
      
      &.tabulator-frozen-left {
        border-right: 2px solid var(--tabulator-rowbordercolor);
      }
      
      &.tabulator-frozen-right {
        border-left: 2px solid var(--tabulator-rowbordercolor);
      }
    }
    
    &.tabulator-editing {
      border: 1px solid var(--tabulator-editboxcolor);
      outline: none;
      
      padding: 0;
      
      input, select {
        border: 1px;
        background: transparent;
        outline: none;
      }
    }
    
    &.tabulator-validation-fail {
      border: 1px solid var(--tabulator-errorcolor);
      
      input, select {
        border: 1px;
        background: transparent;
        
        color: var(--tabulator-errorcolor);
      }
    }
    
    &.tabulator-row-handle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      
      .tabulator-row-handle-box {
        width: 80%;
        
        .tabulator-row-handle-bar {
          width: 100%;
          height: 3px;
          margin-top: 2px;
          background: #666;
        }
      }
    }
    
    &.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header) {
      background-color: var(--tabulator-rowselectedbackground);
    }
    
    .tabulator-data-tree-branch-empty {
      display: inline-block;
      width: 7px;
    }
    
    .tabulator-data-tree-branch {
      display: inline-block;
      vertical-align: middle;
      
      height: 9px;
      width: 7px;
      
      margin-top: -9px;
      margin-right: 5px;
      
      border-bottom-left-radius: 1px;
      
      border-left: 2px solid var(--tabulator-rowbordercolor);
      border-bottom: 2px solid var(--tabulator-rowbordercolor);
    }
    
    .tabulator-data-tree-control {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      vertical-align: middle;
      
      height: 11px;
      width: 11px;
      
      margin-right: 5px;
      
      border: 1px solid var(--tabulator-rowtextcolor);
      border-radius: 2px;
      background: rgba(0, 0, 0, .1);
      
      overflow: hidden;
      
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          cursor: pointer;
          background: rgba(0, 0, 0, .2);
        }
      }
      
      .tabulator-data-tree-control-collapse {
        display: inline-block;
        position: relative;
        
        height: 7px;
        width: 1px;
        
        background: transparent;
        
        &:after {
          position: absolute;
          content: "";
          left: -3px;
          top: 3px;
          
          height: 1px;
          width: 7px;
          
          background: var(--tabulator-rowtextcolor);
        }
      }
      
      .tabulator-data-tree-control-expand {
        display: inline-block;
        position: relative;
        
        height: 7px;
        width: 1px;
        
        background: var(--tabulator-rowtextcolor);
        
        &:after {
          position: absolute;
          content: "";
          left: -3px;
          top: 3px;
          
          height: 1px;
          width: 7px;
          
          background: var(--tabulator-rowtextcolor);
        }
      }
    }
    
    .tabulator-responsive-collapse-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      
      height: 15px;
      width: 15px;
      
      border-radius: 20px;
      background: #666;
      
      color: var(--tabulator-rowbackgroundcolor);
      font-weight: bold;
      font-size: 1.1em;
      
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          opacity: .7;
          cursor: pointer;
        }
      }
      
      &.open {
        .tabulator-responsive-collapse-toggle-close {
          display: initial;
        }
        
        .tabulator-responsive-collapse-toggle-open {
          display: none;
        }
      }
      
      svg {
        stroke: var(--tabulator-rowbackgroundcolor);
      }
      
      .tabulator-responsive-collapse-toggle-close {
        display: none;
      }
    }
    
    .tabulator-traffic-light {
      display: inline-block;
      height: 14px;
      width: 14px;
      
      border-radius: 14px;
    }
  }
  
  &.tabulator-group {
    box-sizing: border-box;
    border-bottom: 1px solid #999;
    border-right: 1px solid var(--tabulator-rowbordercolor);
    border-top: 1px solid #999;
    padding: 5px;
    padding-left: 10px;
    background: #ccc;
    font-weight: bold;
    
    min-width: 100%;
    
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, .1);
      }
    }
    
    &.tabulator-group-visible {
      .tabulator-arrow {
        margin-right: 10px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--tabulator-sortarrowactive);
        border-bottom: 0;
      }
    }
    
    &.tabulator-group-level-1 {
      padding-left: 30px;
    }
    
    &.tabulator-group-level-2 {
      padding-left: 50px;
    }
    
    &.tabulator-group-level-3 {
      padding-left: 70px;
    }
    
    &.tabulator-group-level-4 {
      padding-left: 90px;
    }
    
    &.tabulator-group-level-5 {
      padding-left: 110px;
    }
    
    .tabulator-group-toggle {
      display: inline-block;
    }
    
    .tabulator-arrow {
      display: inline-block;
      width: 0;
      height: 0;
      margin-right: 16px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 0;
      border-left: 6px solid var(--tabulator-sortarrowactive);
      vertical-align: middle;
    }
    
    span {
      margin-left: 10px;
      color: #d00;
    }
  }
}

.tabulator-toggle {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
  background: #dcdcdc;

  &.tabulator-toggle-on {
    background: #1c6cc2;
  }
  
  .tabulator-toggle-switch {
    box-sizing: border-box;
    border: 1px solid #ccc;
    background: #fff;
  }
}

.tabulator-popup-container {
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  
  background: var(--tabulator-rowbackgroundcolor);
  border: 1px solid var(--tabulator-rowbordercolor);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
  
  font-size: var(--tabulator-textsize);
  
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
  z-index: 10000;
}

.tabulator-popup {
  padding: 5px;
  border-radius: 3px;
}

.tabulator-tooltip {
  max-width: Min(500px, 100%);
  padding: 3px 5px;
  border-radius: 2px;
  box-shadow: none;
  font-size: 12px;
  pointer-events: none;
}

.tabulator-menu {
  .tabulator-menu-item {
    position: relative;
    box-sizing: border-box;
    padding: 5px 10px;
    user-select: none;
    
    &.tabulator-menu-item-disabled {
      opacity: .5;
    }
    
    @media (hover: hover) and (pointer: fine) {
      &:not(.tabulator-menu-item-disabled):hover {
        cursor: pointer;
        background: var(--tabulator-rowaltbackgroundcolor);
      }
    }
    
    &.tabulator-menu-item-submenu {
      padding-right: 25px;
      
      &::after {
        display: inline-block;
        position: absolute;
        
        top: calc(5px + .4em);
        right: 10px;
        height: 7px;
        width: 7px;
        
        content: '';
        
        border-width: 1px 1px 0 0;
        border-style: solid;
        border-color: var(--tabulator-rowbordercolor);
        vertical-align: top;
        
        transform: rotate(45deg);
      }
    }
  }
  
  .tabulator-menu-separator {
    border-top: 1px solid var(--tabulator-rowbordercolor);
  }
}

.tabulator-edit-list {
  max-height: 200px;
  font-size: var(--tabulator-textsize);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
  .tabulator-edit-list-item {
    padding: 4px;
    color: var(--tabulator-rowtextcolor);
    outline: none;
    
    &.active {
      color: var(--tabulator-rowbackgroundcolor);
      background: var(--tabulator-editboxcolor);
      
      &.focused {
        outline: 1px solid rgba(var(--tabulator-rowbackgroundcolor), .5);
      }
    }
    
    &.focused {
      outline: 1px solid var(--tabulator-editboxcolor);
    }
    
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        cursor: pointer;
        color: var(--tabulator-rowbackgroundcolor);
        background: var(--tabulator-editboxcolor);
      }
    }
  }
  
  .tabulator-edit-list-placeholder {
    padding: 4px;
    color: var(--tabulator-rowtextcolor);
    text-align: center;
  }
  
  .tabulator-edit-list-group {
    border-bottom: 1px solid var(--tabulator-rowbordercolor);
    padding: 4px;
    padding-top: 6px;
    color: var(--tabulator-rowtextcolor);
    font-weight: bold;
  }
  
  .tabulator-edit-list-item, .tabulator-edit-list-group {
    &.tabulator-edit-list-group-level-2 {
      padding-left: 12px;
    }
    
    &.tabulator-edit-list-group-level-3 {
      padding-left: 20px;
    }
    
    &.tabulator-edit-list-group-level-4 {
      padding-left: 28px;
    }
    
    &.tabulator-edit-list-group-level-5 {
      padding-left: 36px;
    }
  }
}

.tabulator.tabulator-ltr {
  direction: ltr;
}

.tabulator.tabulator-rtl {
  text-align: initial;
  direction: rtl;
  
  .tabulator-header {
    .tabulator-col {
      text-align: initial;
      border-left: 1px solid var(--tabulator-headerbordercolor);
      border-right: initial;
      
      &.tabulator-col-group {
        .tabulator-col-group-cols {
          margin-right: initial;
          margin-left: -1px;
        }
      }
      
      &.tabulator-sortable {
        .tabulator-col-title {
          padding-right: 0;
          padding-left: 25px;
        }
      }
      
      .tabulator-col-content {
        .tabulator-col-sorter {
          left: 8px;
          right: initial;
        }
      }
    }
  }
  
  .tabulator-tableholder {
    .tabulator-range-overlay {
      .tabulator-range {
        &.tabulator-range-active::after {
          content: '';
          position: absolute;
          left: -3px;
          right: initial;
          bottom: -3px;
          width: 6px;
          height: 6px;
          background-color: var(--tabulator-rangehandlecolor);
          border-radius: 999px;
        }
      }
    }
  }
  
  .tabulator-row {
    .tabulator-cell {
      border-right: initial;
      border-left: 1px solid var(--tabulator-rowbordercolor);
      
      .tabulator-data-tree-branch {
        margin-right: initial;
        margin-left: 5px;
        
        border-bottom-left-radius: initial;
        border-bottom-right-radius: 1px;
        
        border-left: initial;
        border-right: 2px solid var(--tabulator-rowbordercolor);
      }
      
      .tabulator-data-tree-control {
        margin-right: initial;
        margin-left: 5px;
      }
      
      &.tabulator-frozen {
        &.tabulator-frozen-left {
          border-left: 2px solid var(--tabulator-rowbordercolor);
        }
        
        &.tabulator-frozen-right {
          border-right: 2px solid var(--tabulator-rowbordercolor);
        }
      }
    }
    
    .tabulator-col-resize-handle {
      &:last-of-type {
        width: 3px;
        margin-left: 0;
        margin-right: -3px;
      }
    }
  }
  
  .tabulator-footer {
    .tabulator-calcs-holder {
      text-align: initial;
    }
  }
}

.tabulator-print-fullscreen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

body.tabulator-print-fullscreen-hide>*:not(.tabulator-print-fullscreen) {
  display: none !important;
}

.tabulator-print-table {
  border-collapse: collapse;
  
  .tabulator-data-tree-branch {
    display: inline-block;
    vertical-align: middle;
    
    height: 9px;
    width: 7px;
    
    margin-top: -9px;
    margin-right: 5px;
    
    border-bottom-left-radius: 1px;
    
    border-left: 2px solid var(--tabulator-rowbordercolor);
    border-bottom: 2px solid var(--tabulator-rowbordercolor);
  }
  
  .tabulator-print-table-group {
    box-sizing: border-box;
    border-bottom: 1px solid #999;
    border-right: 1px solid var(--tabulator-rowbordercolor);
    border-top: 1px solid #999;
    padding: 5px;
    padding-left: 10px;
    background: #ccc;
    font-weight: bold;
    
    min-width: 100%;
    
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, .1);
      }
    }
    
    &.tabulator-group-visible {
      .tabulator-arrow {
        margin-right: 10px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--tabulator-sortarrowactive);
        border-bottom: 0;
      }
    }
    
    &.tabulator-group-level-1 {
      td {
        padding-left: 30px !important;
      }
    }
    
    &.tabulator-group-level-2 {
      td {
        padding-left: 50px !important;
      }
    }
    
    &.tabulator-group-level-3 {
      td {
        padding-left: 70px !important;
      }
    }
    
    &.tabulator-group-level-4 {
      td {
        padding-left: 90px !important;
      }
    }
    
    &.tabulator-group-level-5 {
      td {
        padding-left: 110px !important;
      }
    }
    
    .tabulator-group-toggle {
      display: inline-block;
    }
    
    .tabulator-arrow {
      display: inline-block;
      width: 0;
      height: 0;
      margin-right: 16px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 0;
      border-left: 6px solid var(--tabulator-sortarrowactive);
      vertical-align: middle;
    }
    
    span {
      margin-left: 10px;
      color: #d00;
    }
  }
  
  .tabulator-data-tree-control {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    
    height: 11px;
    width: 11px;
    
    margin-right: 5px;
    
    border: 1px solid var(--tabulator-rowtextcolor);
    border-radius: 2px;
    background: rgba(0, 0, 0, .1);
    
    overflow: hidden;
    
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        cursor: pointer;
        background: rgba(0, 0, 0, .2);
      }
    }
    
    .tabulator-data-tree-control-collapse {
      display: inline-block;
      position: relative;
      
      height: 7px;
      width: 1px;
      
      background: transparent;
      
      &:after {
        position: absolute;
        content: "";
        left: -3px;
        top: 3px;
        
        height: 1px;
        width: 7px;
        
        background: var(--tabulator-rowtextcolor);
      }
    }
    
    .tabulator-data-tree-control-expand {
      display: inline-block;
      position: relative;
      
      height: 7px;
      width: 1px;
      
      background: var(--tabulator-rowtextcolor);
      
      &:after {
        position: absolute;
        content: "";
        left: -3px;
        top: 3px;
        
        height: 1px;
        width: 7px;
        
        background: var(--tabulator-rowtextcolor);
      }
    }
  }
}
/* sass-plugin-1:/Users/maronato/Developer/vue-toastification/src/scss/index.scss */
.Vue-Toastification__container {
  z-index: 9999;
  position: fixed;
  padding: 4px;
  width: 600px;
  box-sizing: border-box;
  display: flex;
  min-height: 100%;
  color: #fff;
  flex-direction: column;
  pointer-events: none;
}
@media only screen and (min-width : 600px) {
  .Vue-Toastification__container.top-left,
  .Vue-Toastification__container.top-right,
  .Vue-Toastification__container.top-center {
    top: 1em;
  }
  .Vue-Toastification__container.bottom-left,
  .Vue-Toastification__container.bottom-right,
  .Vue-Toastification__container.bottom-center {
    bottom: 1em;
    flex-direction: column-reverse;
  }
  .Vue-Toastification__container.top-left,
  .Vue-Toastification__container.bottom-left {
    left: 1em;
  }
  .Vue-Toastification__container.top-left .Vue-Toastification__toast,
  .Vue-Toastification__container.bottom-left .Vue-Toastification__toast {
    margin-right: auto;
  }
  @supports not (-moz-appearance: none) {
    .Vue-Toastification__container.top-left .Vue-Toastification__toast--rtl,
    .Vue-Toastification__container.bottom-left .Vue-Toastification__toast--rtl {
      margin-right: unset;
      margin-left: auto;
    }
  }
  .Vue-Toastification__container.top-right,
  .Vue-Toastification__container.bottom-right {
    right: 1em;
  }
  .Vue-Toastification__container.top-right .Vue-Toastification__toast,
  .Vue-Toastification__container.bottom-right .Vue-Toastification__toast {
    margin-left: auto;
  }
  @supports not (-moz-appearance: none) {
    .Vue-Toastification__container.top-right .Vue-Toastification__toast--rtl,
    .Vue-Toastification__container.bottom-right .Vue-Toastification__toast--rtl {
      margin-left: unset;
      margin-right: auto;
    }
  }
  .Vue-Toastification__container.top-center,
  .Vue-Toastification__container.bottom-center {
    left: 50%;
    margin-left: -300px;
  }
  .Vue-Toastification__container.top-center .Vue-Toastification__toast,
  .Vue-Toastification__container.bottom-center .Vue-Toastification__toast {
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width : 600px) {
  .Vue-Toastification__container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
  }
  .Vue-Toastification__container .Vue-Toastification__toast {
    width: 100%;
  }
  .Vue-Toastification__container.top-left,
  .Vue-Toastification__container.top-right,
  .Vue-Toastification__container.top-center {
    top: 0;
  }
  .Vue-Toastification__container.bottom-left,
  .Vue-Toastification__container.bottom-right,
  .Vue-Toastification__container.bottom-center {
    bottom: 0;
    flex-direction: column-reverse;
  }
}
.Vue-Toastification__toast {
  display: inline-flex;
  position: relative;
  max-height: 800px;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 22px 24px;
  border-radius: 8px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  justify-content: space-between;
  font-family:
    "Lato",
    Helvetica,
    "Roboto",
    Arial,
    sans-serif;
  max-width: 600px;
  min-width: 326px;
  pointer-events: auto;
  overflow: hidden;
  transform: translateZ(0);
  direction: ltr;
}
.Vue-Toastification__toast--rtl {
  direction: rtl;
}
.Vue-Toastification__toast--default {
  background-color: #1976d2;
  color: #fff;
}
.Vue-Toastification__toast--info {
  background-color: #2196f3;
  color: #fff;
}
.Vue-Toastification__toast--success {
  background-color: #4caf50;
  color: #fff;
}
.Vue-Toastification__toast--error {
  background-color: #ff5252;
  color: #fff;
}
.Vue-Toastification__toast--warning {
  background-color: #ffc107;
  color: #fff;
}
@media only screen and (max-width : 600px) {
  .Vue-Toastification__toast {
    border-radius: 0px;
    margin-bottom: 0.5rem;
  }
}
.Vue-Toastification__toast-body {
  flex: 1;
  line-height: 24px;
  font-size: 16px;
  word-break: break-word;
  white-space: pre-wrap;
}
.Vue-Toastification__toast-component-body {
  flex: 1;
}
.Vue-Toastification__toast.disable-transition {
  animation: none !important;
}
.Vue-Toastification__close-button {
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  padding-left: 10px;
  cursor: pointer;
  transition: 0.3s ease;
  align-items: center;
  color: #fff;
  opacity: 0.3;
  transition: visibility 0s, opacity 0.2s linear;
}
.Vue-Toastification__close-button:hover,
.Vue-Toastification__close-button:focus {
  opacity: 1;
}
.Vue-Toastification__toast:not(:hover) .Vue-Toastification__close-button.show-on-hover {
  opacity: 0;
}
.Vue-Toastification__toast--rtl .Vue-Toastification__close-button {
  padding-left: unset;
  padding-right: 10px;
}
@keyframes scale-x-frames {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Vue-Toastification__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 10000;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: left;
  animation: scale-x-frames linear 1 forwards;
}
.Vue-Toastification__toast--rtl .Vue-Toastification__progress-bar {
  right: 0;
  left: unset;
  transform-origin: right;
}
.Vue-Toastification__icon {
  margin: auto 18px auto 0px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  transition: 0.3s ease;
  align-items: center;
  width: 20px;
  height: 100%;
}
.Vue-Toastification__toast--rtl .Vue-Toastification__icon {
  margin: auto 0px auto 18px;
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes bounceOutRight {
  40% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(1000px, 0, 0);
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Vue-Toastification__bounce-enter-active.top-left,
.Vue-Toastification__bounce-enter-active.bottom-left {
  animation-name: bounceInLeft;
}
.Vue-Toastification__bounce-enter-active.top-right,
.Vue-Toastification__bounce-enter-active.bottom-right {
  animation-name: bounceInRight;
}
.Vue-Toastification__bounce-enter-active.top-center {
  animation-name: bounceInDown;
}
.Vue-Toastification__bounce-enter-active.bottom-center {
  animation-name: bounceInUp;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).top-left,
.Vue-Toastification__bounce-leave-active:not(.disable-transition).bottom-left {
  animation-name: bounceOutLeft;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).top-right,
.Vue-Toastification__bounce-leave-active:not(.disable-transition).bottom-right {
  animation-name: bounceOutRight;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).top-center {
  animation-name: bounceOutUp;
}
.Vue-Toastification__bounce-leave-active:not(.disable-transition).bottom-center {
  animation-name: bounceOutDown;
}
.Vue-Toastification__bounce-leave-active,
.Vue-Toastification__bounce-enter-active {
  animation-duration: 750ms;
  animation-fill-mode: both;
}
.Vue-Toastification__bounce-move {
  transition-timing-function: ease-in-out;
  transition-property: all;
  transition-duration: 400ms;
}
@keyframes fadeOutTop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}
@keyframes fadeOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50px);
    opacity: 0;
  }
}
@keyframes fadeOutBottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
  }
}
@keyframes fadeOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(50px);
    opacity: 0;
  }
}
@keyframes fadeInLeft {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadeInRight {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadeInTop {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeInBottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.Vue-Toastification__fade-enter-active.top-left,
.Vue-Toastification__fade-enter-active.bottom-left {
  animation-name: fadeInLeft;
}
.Vue-Toastification__fade-enter-active.top-right,
.Vue-Toastification__fade-enter-active.bottom-right {
  animation-name: fadeInRight;
}
.Vue-Toastification__fade-enter-active.top-center {
  animation-name: fadeInTop;
}
.Vue-Toastification__fade-enter-active.bottom-center {
  animation-name: fadeInBottom;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).top-left,
.Vue-Toastification__fade-leave-active:not(.disable-transition).bottom-left {
  animation-name: fadeOutLeft;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).top-right,
.Vue-Toastification__fade-leave-active:not(.disable-transition).bottom-right {
  animation-name: fadeOutRight;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).top-center {
  animation-name: fadeOutTop;
}
.Vue-Toastification__fade-leave-active:not(.disable-transition).bottom-center {
  animation-name: fadeOutBottom;
}
.Vue-Toastification__fade-leave-active,
.Vue-Toastification__fade-enter-active {
  animation-duration: 750ms;
  animation-fill-mode: both;
}
.Vue-Toastification__fade-move {
  transition-timing-function: ease-in-out;
  transition-property: all;
  transition-duration: 400ms;
}
@keyframes slideInBlurredLeft {
  0% {
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform-origin: 100% 50%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideInBlurredTop {
  0% {
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(240px);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideInBlurredRight {
  0% {
    transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
    transform-origin: 0% 50%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideInBlurredBottom {
  0% {
    transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(240px);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideOutBlurredTop {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 0%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) scaleY(2) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(240px);
    opacity: 0;
  }
}
@keyframes slideOutBlurredBottom {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1000px) scaleY(2) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(240px);
    opacity: 0;
  }
}
@keyframes slideOutBlurredLeft {
  0% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-1000px) scaleX(2) scaleY(0.2);
    transform-origin: 100% 50%;
    filter: blur(40px);
    opacity: 0;
  }
}
@keyframes slideOutBlurredRight {
  0% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateX(1000px) scaleX(2) scaleY(0.2);
    transform-origin: 0% 50%;
    filter: blur(40px);
    opacity: 0;
  }
}
.Vue-Toastification__slideBlurred-enter-active.top-left,
.Vue-Toastification__slideBlurred-enter-active.bottom-left {
  animation-name: slideInBlurredLeft;
}
.Vue-Toastification__slideBlurred-enter-active.top-right,
.Vue-Toastification__slideBlurred-enter-active.bottom-right {
  animation-name: slideInBlurredRight;
}
.Vue-Toastification__slideBlurred-enter-active.top-center {
  animation-name: slideInBlurredTop;
}
.Vue-Toastification__slideBlurred-enter-active.bottom-center {
  animation-name: slideInBlurredBottom;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).top-left,
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).bottom-left {
  animation-name: slideOutBlurredLeft;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).top-right,
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).bottom-right {
  animation-name: slideOutBlurredRight;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).top-center {
  animation-name: slideOutBlurredTop;
}
.Vue-Toastification__slideBlurred-leave-active:not(.disable-transition).bottom-center {
  animation-name: slideOutBlurredBottom;
}
.Vue-Toastification__slideBlurred-leave-active,
.Vue-Toastification__slideBlurred-enter-active {
  animation-duration: 750ms;
  animation-fill-mode: both;
}
.Vue-Toastification__slideBlurred-move {
  transition-timing-function: ease-in-out;
  transition-property: all;
  transition-duration: 400ms;
}

/* variables */
.dp--main {
  --dp-common-transition:all .1s ease-in;
  --dp-menu-padding:6px 8px;
  --dp-animation-duration:.1s;
  --dp-menu-appear-transition-timing:cubic-bezier(.4, 0, 1, 1);
  --dp-transition-timing:ease-out;
  --dp-action-row-transition:all .2s ease-in;
  --dp-font-family:-apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --dp-border-radius:4px;
  --dp-cell-border-radius:4px;
  --dp-transition-length:22px;
  --dp-transition-timing-general:.1s;
  --dp-button-height:35px;
  --dp-month-year-row-height:35px;
  --dp-month-year-row-button-size:25px;
  --dp-button-icon-height:20px;
  --dp-calendar-wrap-padding:0 5px;
  --dp-cell-size:35px;
  --dp-cell-padding:5px;
  --dp-common-padding:10px;
  --dp-input-icon-padding:35px;
  --dp-input-padding:6px 30px 6px 12px;
  --dp-input-not-clearable-padding:12px;
  --dp-menu-min-width:260px;
  --dp-action-buttons-padding:1px 6px;
  --dp-row-margin:5px 0;
  --dp-calendar-header-cell-padding:8px;
  --dp-multi-calendars-spacing:10px;
  --dp-overlay-col-padding:3px;
  --dp-time-inc-dec-button-size:32px;
  --dp-font-size:1rem;
  --dp-preview-font-size:.8rem;
  --dp-time-font-size:2rem;
  --dp-action-button-height:22px;
  --dp-action-row-padding:8px;
  --dp-direction:ltr;
  
  /*Colors*/
  --dp-background-color: var(--color-component-back);
  --dp-text-color: var(--color-component-fore);
  --dp-hover-color: var(--btn-borderless-hover-back);
  --dp-hover-text-color: var(--color-component-fore);
  --dp-hover-icon-color: var(--color-component-fore);
  
  --dp-primary-color: var(--color-primary-back);
  --dp-primary-disabled-color: var(--component-disabled-back);
  --dp-primary-text-color: var(--color-component-fore);
  
  --dp-secondary-color:#c0c4cc;
  --dp-border-color: var(--color-component-border);
  --dp-menu-border-color: var(--color-component-border);
  --dp-border-color-hover: var(--component-hover-border);
  --dp-border-color-focus: var(--component-focused-border);
  --dp-disabled-color: var(--component-disabled-back);
  --dp-scroll-bar-background:#f3f3f3;
  --dp-scroll-bar-color:#959595;
  --dp-success-color:#76d275;
  --dp-success-color-disabled:#a3d9b1;
  --dp-icon-color:#959595;
  --dp-danger-color:#ff6f60;
  --dp-marker-color:#ff6f60;
  --dp-tooltip-color:#fafafa;
  --dp-disabled-color-text:#8e8e8e;
  --dp-highlight-color:#1976d21a;
  --dp-range-between-dates-background-color:var(--dp-hover-color,#f3f3f3);
  --dp-range-between-dates-text-color:var(--dp-hover-text-color, var(--color-component-fore));
  --dp-range-between-border-color:var(--dp-hover-color,#f3f3f3);
  --dp-loader:5px solid #1976d2
}

.dp--btn-base{
    font:inherit;
    transition:var(--dp-common-transition);
    border:none;
    line-height:normal
}
.dp--bg-none{
    background:0 0
}
.dp--active{
    background:var(--dp-primary-color);
    color:var(--dp-primary-text-color)
}
.dp--flex{
    align-items:center;
    display:flex
}
.dp--pointer{
    cursor:pointer
}
.dp--icon{
    stroke:currentColor;
    fill:currentColor
}
.dp--button{
    text-align:center;
    width:100%;
    color:var(--dp-icon-color);
    cursor:pointer;
    padding:var(--dp-common-padding);
    box-sizing:border-box;
    height:var(--dp-button-height);
    place-content:center;
    align-items:center;
    display:flex
}
.dp--button.dp--overlay-action{
    position:absolute;
    bottom:0
}
.dp--button .dp--main{
    font-family:var(--dp-font-family);
    -webkit-user-select:none;
    user-select:none;
    box-sizing:border-box;
    width:100%;
    position:relative
}
.dp--button .dp--main *{
    direction:var(--dp-direction,ltr)
}
.dp--button:hover{
    background:var(--dp-hover-color);
    color:var(--dp-hover-icon-color)
}
.dp--button svg{
    height:var(--dp-button-icon-height);
    width:auto
}
.dp--button-bottom{
    border-bottom-left-radius:var(--dp-border-radius);
    border-bottom-right-radius:var(--dp-border-radius)
}
.dp--flex-display{
    display:flex
}
.dp--relative{
    position:relative
}
.dp--highlighted{
    background-color:var(--dp-highlight-color)
}
.dp--hidden-el{
    visibility:hidden
}
.dp--centered{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.dp--action-row{
    width:100%;
    padding:var(--dp-action-row-padding);
    box-sizing:border-box;
    color:var(--dp-text-color);
    flex-flow:row;
    align-items:center;
    display:flex
}
.dp--action-row svg{
    height:var(--dp-button-icon-height);
    width:auto
}
.dp--selection-preview{
    color:var(--dp-text-color);
    font-size:var(--dp-preview-font-size);
    white-space:nowrap;
    text-overflow:ellipsis;
    display:block;
    overflow:hidden
}
.dp--action-buttons{
    white-space:nowrap;
    flex:0;
    justify-content:flex-end;
    align-items:center;
    margin-inline-start:auto;
    display:flex
}
.dp--action-button{
    padding:var(--dp-action-buttons-padding);
    line-height:var(--dp-action-button-height);
    height:var(--dp-action-button-height);
    cursor:pointer;
    border-radius:var(--dp-border-radius);
    font-size:var(--dp-preview-font-size);
    font-family:var(--dp-font-family);
    background:0 0;
    border:1px solid #0000;
    align-items:center;
    margin-inline-start:3px;
    display:inline-flex
}
.dp--action-cancel{
    color:var(--dp-text-color);
    border:1px solid var(--dp-border-color)
}
.dp--action-cancel:hover{
    border-color:var(--dp-primary-color);
    transition:var(--dp-action-row-transition)
}
.dp--action-buttons .dp--action-select{
    background:var(--dp-primary-color);
    color:var(--dp-primary-text-color)
}
.dp--action-buttons .dp--action-select:hover{
    background:var(--dp-primary-color);
    transition:var(--dp-action-row-transition)
}
.dp--action-buttons .dp--action-select:disabled{
    background:var(--dp-primary-disabled-color);
    cursor:not-allowed
}
.dp--calendar-header{
    color:var(--dp-text-color);
    white-space:nowrap;
    justify-content:center;
    align-items:center;
    font-weight:700;
    display:flex;
    position:relative
}
.dp--calendar-header-item{
    text-align:center;
    height:var(--dp-cell-size);
    padding:var(--dp-cell-padding);
    width:var(--dp-cell-size);
    box-sizing:border-box;
    flex-grow:1
}
.dp--calendar-row{
    margin:var(--dp-row-margin);
    justify-content:center;
    align-items:center;
    display:flex
}
.dp--calendar-item{
    text-align:center;
    box-sizing:border-box;
    color:var(--dp-text-color);
    flex-grow:1
}
.dp--calendar{
    position:relative
}
.dp--calendar-header-cell{
    border-bottom:thin solid var(--dp-border-color);
    padding:var(--dp-calendar-header-cell-padding)
}
.dp--cell-inner{
    text-align:center;
    border-radius:var(--dp-cell-border-radius);
    height:var(--dp-cell-size);
    padding:var(--dp-cell-padding);
    width:var(--dp-cell-size);
    box-sizing:border-box;
    border:1px solid #0000;
    justify-content:center;
    align-items:center;
    display:flex;
    position:relative
}
.dp--cell-inner:hover{
    transition:all .2s
}
.dp--range-border-start{
    border-start-end-radius:0;
    border-end-end-radius:0
}
.dp--range-border-end{
    border-start-start-radius:0;
    border-end-start-radius:0
}
.dp--range-preview{
    border-top:1px dashed var(--dp-primary-color);
    border-bottom:1px dashed var(--dp-primary-color)
}
.dp--cell-offset{
    color:var(--dp-secondary-color)
}
.dp--cell-disabled{
    color:var(--dp-secondary-color);
    cursor:not-allowed
}
.dp--date-hoverable:hover{
    background:var(--dp-hover-color);
    color:var(--dp-hover-text-color)
}
.dp--date-hoverable-start:hover{
    border-start-end-radius:0;
    border-end-end-radius:0
}
.dp--date-hoverable-end:hover{
    border-start-start-radius:0;
    border-end-start-radius:0
}
.dp--range-between{
    background:var(--dp-range-between-dates-background-color);
    color:var(--dp-range-between-dates-text-color);
    border:1px solid var(--dp-range-between-border-color);
    border-radius:0
}
.dp--range-between-week{
    background:var(--dp-primary-color);
    color:var(--dp-primary-text-color);
    border-radius:0
}
.dp--today{
    border:1px solid var(--dp-primary-color)
}
.dp--week-num{
    color:var(--dp-secondary-color);
    text-align:center
}
.dp--cell-auto-range{
    border-radius:0
}
.dp--cell-auto-range-start{
    border-inline-start:1px dashed var(--dp-primary-color);
    border-start-start-radius:var(--dp-cell-border-radius);
    border-end-start-radius:var(--dp-cell-border-radius)
}
.dp--cell-auto-range-end{
    border-inline-end:1px dashed var(--dp-primary-color);
    border-start-end-radius:var(--dp-cell-border-radius);
    border-end-end-radius:var(--dp-cell-border-radius)
}
.dp--calendar-header-separator{
    background:var(--dp-border-color);
    width:100%;
    height:1px
}
.dp--calendar-next{
    margin-inline-start:var(--dp-multi-calendars-spacing)
}
.dp--marker-base{
    background-color:var(--dp-marker-color);
    height:5px;
    position:absolute;
    bottom:0
}
.dp--marker-dot{
    border-radius:50%;
    width:5px;
    left:50%;
    transform:translate(-50%)
}
.dp--marker-line{
    width:100%;
    left:0
}
.dp--marker-tooltip{
    border-radius:var(--dp-border-radius);
    background-color:var(--dp-tooltip-color);
    border:1px solid var(--dp-border-color);
    z-index:99999;
    box-sizing:border-box;
    cursor:default;
    padding:5px;
    position:absolute
}
.dp--tooltip-content{
    white-space:nowrap
}
.dp--tooltip-text{
    color:var(--dp-text-color);
    flex-flow:row;
    align-items:center;
    display:flex
}
.dp--tooltip-mark{
    background-color:var(--dp-text-color);
    width:5px;
    height:5px;
    color:var(--dp-text-color);
    border-radius:50%;
    margin-inline-end:5px
}
.dp--arrow-bottom-tp{
    background-color:var(--dp-tooltip-color);
    border-inline-end:1px solid var(--dp-border-color);
    border-bottom:1px solid var(--dp-border-color);
    width:8px;
    height:8px;
    position:absolute;
    bottom:0;
    transform:translate(-50%,50%)rotate(45deg)
}
.dp--instance-calendar{
    width:100%;
    position:relative
}
.dp--flex-display[data-dp-mobile]{
    flex-direction:column
}
.dp--flex-display-collapsed{
    flex-direction:column
}
.dp--cell-highlight{
    background-color:var(--dp-highlight-color)
}
.dp--input-wrap{
    width:100%;
    box-sizing:unset;
    position:relative
}
.dp--input-wrap:focus{
    border-color:var(--dp-border-color-hover);
    outline:none
}
.dp--input-valid{
    box-shadow:0 0 var(--dp-border-radius) var(--dp-success-color);
    border-color:var(--dp-success-color)
}
.dp--input-valid:hover{
    border-color:var(--dp-success-color)
}
.dp--input-invalid{
    box-shadow:0 0 var(--dp-border-radius) var(--dp-danger-color);
    border-color:var(--dp-danger-color)
}
.dp--input-invalid:hover{
    border-color:var(--dp-danger-color)
}
.dp--input{
    background-color:var(--dp-background-color);
    border-radius:var(--dp-border-radius);
    font-family:var(--dp-font-family);
    border:1px solid var(--dp-border-color);
    width:100%;
    font-size:var(--dp-font-size);
    line-height:calc(var(--dp-font-size) * 1.5);
    padding:var(--dp-input-padding);
    color:var(--dp-text-color);
    box-sizing:border-box;
    outline:none;
    transition:border-color .2s cubic-bezier(.645,.045,.355,1)
}
.dp--input::placeholder{
    opacity:.7
}
.dp--input:hover:not(.dp--input-focus){
    border-color:var(--dp-border-color-hover)
}
.dp--input-not-clearable{
    padding-inline-end:var(--dp-input-not-clearable-padding)!important
}
.dp--input-reg{
    caret-color:#0000
}
.dp--input-focus{
    border-color:var(--dp-border-color-focus)
}
.dp--disabled{
    background:var(--dp-disabled-color)
}
.dp--disabled::placeholder{
    color:var(--dp-disabled-color-text)
}
.dp--input-icons{
    width:var(--dp-font-size);
    height:var(--dp-font-size);
    stroke-width:0;
    font-size:var(--dp-font-size);
    line-height:calc(var(--dp-font-size) * 1.5);
    color:var(--dp-icon-color);
    box-sizing:content-box;
    padding:6px 12px;
    display:inline-block
}
.dp--input-icon{
    cursor:pointer;
    top:50%;
    color:var(--dp-icon-color);
    position:absolute;
    inset-inline-start:0;
    transform:translateY(-50%)
}
.dp--clear-btn{
    top:50%;
    cursor:pointer;
    color:var(--dp-icon-color);
    background:0 0;
    border:none;
    align-items:center;
    margin:0;
    padding:0;
    display:inline-flex;
    position:absolute;
    inset-inline-end:0;
    transform:translateY(-50%)
}
.dp--input-icon-pad{
    padding-inline-start:var(--dp-input-icon-padding)
}
.dp--menu{
    background:var(--dp-background-color);
    border-radius:var(--dp-border-radius);
    min-width:var(--dp-menu-min-width);
    font-family:var(--dp-font-family);
    font-size:var(--dp-font-size);
    -webkit-user-select:none;
    user-select:none;
    border:1px solid var(--dp-menu-border-color);
    box-sizing:border-box
}
.dp--menu:after,.dp--menu:before{
    box-sizing:border-box
}
.dp--menu:focus{
    border:1px solid var(--dp-menu-border-color);
    outline:none
}
.dp--menu-wrapper{
    z-index:99999;
    position:absolute
}
.dp--menu-inner{
    padding:var(--dp-menu-padding)
}
.dp--menu--inner-stretched{
    padding:6px 0
}
.dp--menu-index{
    z-index:99999
}
.dp--menu-unclickable{
    z-index:999999;
    position:absolute;
    inset:0
}
.dp--menu-disabled{
    cursor:not-allowed;
    background:#ffffff80
}
.dp--menu-readonly{
    cursor:default;
    background:0 0
}
.dp-menu-loading{
    cursor:default;
    background:#ffffff80
}
.dp--menu-load-container{
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    display:flex
}
.dp--menu-loader{
    border:var(--dp-loader);
    box-sizing:border-box;
    border-bottom-color:#0000;
    border-radius:50%;
    width:48px;
    height:48px;
    animation:1s linear infinite dp-load-rotation;
    display:inline-block;
    position:absolute
}
@keyframes dp-load-rotation{
    0%{
        transform:rotate(0)
    }
    to{
        transform:rotate(360deg)
    }
}
.dp--arrow-top{
    background-color:var(--dp-background-color);
    border-inline-end:1px solid var(--dp-menu-border-color);
    border-top:1px solid var(--dp-menu-border-color);
    width:12px;
    height:12px;
    position:absolute;
    transform:translateY(-50%)rotate(-45deg)
}
.dp--arrow-bottom{
    left:var(--dp-arrow-left);
    background-color:var(--dp-background-color);
    border-inline-end:1px solid var(--dp-menu-border-color);
    border-bottom:1px solid var(--dp-menu-border-color);
    width:12px;
    height:12px;
    position:absolute;
    bottom:0;
    transform:translate(-50%,50%)rotate(45deg)
}
.dp--action-extra{
    text-align:center;
    padding:2px 0
}
.dp--preset-dates{
    border-inline-end:1px solid var(--dp-border-color);
    padding:5px
}
.dp--preset-dates[data-dp-mobile]{
    max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding) * 2);
    border:none;
    align-self:center;
    display:flex;
    overflow-x:auto
}
.dp--preset-dates-collapsed{
    max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding) * 2);
    border:none;
    align-self:center;
    display:flex;
    overflow-x:auto
}
.dp--sidebar-left{
    border-inline-end:1px solid var(--dp-border-color);
    padding:5px
}
.dp--sidebar-right{
    margin-inline-end:1px solid var(--dp-border-color);
    padding:5px
}
.dp--preset-range{
    text-align:left;
    white-space:nowrap;
    width:100%;
    color:var(--dp-text-color);
    border-radius:var(--dp-border-radius);
    transition:var(--dp-common-transition);
    padding:5px;
    display:block
}
.dp--preset-range:hover{
    background-color:var(--dp-hover-color);
    color:var(--dp-hover-text-color);
    cursor:pointer
}
.dp--preset-range[data-dp-mobile]{
    border:1px solid var(--dp-border-color);
    margin:0 3px
}
.dp--preset-range[data-dp-mobile]:first-child{
    margin-left:0
}
.dp--preset-range[data-dp-mobile]:last-child{
    margin-right:0
}
.dp--preset-range-collapsed{
    border:1px solid var(--dp-border-color);
    margin:0 3px
}
.dp--preset-range-collapsed:first-child{
    margin-left:0
}
.dp--preset-range-collapsed:last-child{
    margin-right:0
}
.dp--menu-content-wrapper{
    display:flex
}
.dp--menu-content-wrapper[data-dp-mobile]{
    flex-direction:column-reverse
}
.dp--menu-content-wrapper-collapsed{
    flex-direction:column-reverse
}
.dp--month-year-row{
    height:var(--dp-month-year-row-height);
    color:var(--dp-text-color);
    box-sizing:border-box;
    align-items:center;
    display:flex
}
.dp--inner-nav{
    cursor:pointer;
    height:var(--dp-month-year-row-button-size);
    width:var(--dp-month-year-row-button-size);
    color:var(--dp-icon-color);
    text-align:center;
    border-radius:50%;
    justify-content:center;
    align-items:center;
    display:flex
}
.dp--inner-nav svg{
    height:var(--dp-button-icon-height);
    width:var(--dp-button-icon-height)
}
.dp--inner-nav:hover{
    background:var(--dp-hover-color);
    color:var(--dp-hover-icon-color)
}
[dir=rtl] .dp--inner-nav{
    transform:rotate(180deg)
}
.dp--inner-nav-disabled{
    background:var(--dp-disabled-color);
    color:var(--dp-disabled-color-text);
    cursor:not-allowed
}
.dp--inner-nav-disabled:hover{
    background:var(--dp-disabled-color);
    color:var(--dp-disabled-color-text);
    cursor:not-allowed
}
.dp--month-year-select-base{
    text-align:center;
    cursor:pointer;
    height:var(--dp-month-year-row-height);
    border-radius:var(--dp-border-radius);
    box-sizing:border-box;
    color:var(--dp-text-color);
    justify-content:center;
    align-items:center;
    display:flex
}
.dp--month-year-select-base:hover{
    background:var(--dp-hover-color);
    color:var(--dp-hover-text-color);
    transition:var(--dp-common-transition)
}
.dp--month-year-select{
    width:50%
}
.dp--year-select{
    width:100%
}
.dp--month-year-wrap{
    flex-direction:row;
    align-items:center;
    width:100%;
    display:flex
}
.dp--year-disable-select{
    justify-content:space-around
}
.dp--header-wrap{
    flex-direction:column;
    width:100%;
    display:flex
}
.dp--year-mode-picker{
    width:100%;
    height:var(--dp-cell-size);
    justify-content:space-between;
    align-items:center;
    display:flex
}
.dp--arrow-btn-nav{
    transition:var(--dp-common-transition);
    height:100%
}
.dp-quarter-picker-wrap{
    height:100%;
    min-width:var(--dp-menu-min-width);
    flex-direction:column;
    display:flex
}
.dp--qr-btn-disabled{
    cursor:not-allowed;
    background:var(--dp-disabled-color)
}
.dp--qr-btn-disabled:hover{
    background:var(--dp-disabled-color)
}
.dp--qr-btn{
    width:100%;
    padding:var(--dp-common-padding)
}
.dp--qr-btn:not(.dp--highlighted,.dp--active,.dp--qr-btn-disabled,.dp--qr-btn-between){
    background:0 0
}
.dp--qr-btn:hover:not(.dp--active,.dp--qr-btn-disabled){
    background:var(--dp-hover-color);
    color:var(--dp-hover-text-color);
    transition:var(--dp-common-transition)
}
.dp--quarter-items{
    flex-direction:column;
    flex:1;
    justify-content:space-evenly;
    width:100%;
    height:100%;
    display:flex
}
.dp--qr-btn-between{
    background:var(--dp-hover-color);
    color:var(--dp-hover-text-color)
}
.dp--overlay{
    background:var(--dp-background-color);
    z-index:99999;
    width:100%;
    font-family:var(--dp-font-family);
    color:var(--dp-text-color);
    box-sizing:border-box;
    transition:opacity 1s ease-out
}
.dp--overlay-absolute{
    height:100%;
    position:absolute;
    top:0;
    left:0
}
.dp--overlay-relative{
    position:relative
}
.dp--overlay-container::-webkit-scrollbar-track{
    box-shadow:var(--dp-scroll-bar-background);
    background-color:var(--dp-scroll-bar-background)
}
.dp--overlay-container::-webkit-scrollbar{
    background-color:var(--dp-scroll-bar-background);
    width:5px
}
.dp--overlay-container::-webkit-scrollbar-thumb{
    background-color:var(--dp-scroll-bar-color);
    border-radius:10px
}
.dp--overlay:focus{
    border:none;
    outline:none
}
.dp--container-flex{
    display:flex
}
.dp--container-block{
    display:block
}
.dp--overlay-container{
    height:var(--dp-overlay-height);
    flex-direction:column;
    overflow-y:auto
}
.dp--time-picker-overlay-container{
    height:100%
}
.dp--overlay-row{
    box-sizing:border-box;
    flex-wrap:wrap;
    align-items:center;
    width:100%;
    max-width:100%;
    margin-inline:auto;
    padding:0;
    display:flex
}
.dp--flex-row{
    flex:1
}
.dp--overlay-col{
    box-sizing:border-box;
    width:33%;
    padding:var(--dp-overlay-col-padding);
    white-space:nowrap
}
.dp--overlay-cell-pad{
    padding:var(--dp-common-padding) 0
}
.dp--overlay-cell-active{
    cursor:pointer;
    border-radius:var(--dp-border-radius);
    text-align:center
}
.dp--overlay-cell{
    cursor:pointer;
    border-radius:var(--dp-border-radius);
    text-align:center
}
.dp--overlay-cell:hover{
    background:var(--dp-hover-color);
    color:var(--dp-hover-text-color);
    transition:var(--dp-common-transition)
}
.dp--cell-in-between{
    background:var(--dp-hover-color);
    color:var(--dp-hover-text-color)
}
.dp--over-action-scroll{
    box-sizing:border-box;
    right:5px
}
.dp--overlay-cell-disabled{
    cursor:not-allowed;
    background:var(--dp-disabled-color)
}
.dp--overlay-cell-disabled:hover{
    background:var(--dp-disabled-color)
}
.dp--overlay-cell-active-disabled{
    cursor:not-allowed;
    background:var(--dp-primary-disabled-color)
}
.dp--overlay-cell-active-disabled:hover{
    background:var(--dp-primary-disabled-color)
}
.dp--tp-wrap{
    width:100%
}
.dp--tp-wrap[data-dp-mobile]{
    max-width:100%
}
.dp--time-input{
    -webkit-user-select:none;
    user-select:none;
    width:100%;
    font-family:var(--dp-font-family);
    color:var(--dp-text-color);
    justify-content:center;
    align-items:center;
    display:flex
}
.dp--time-col-reg-block{
    padding:0 20px
}
.dp--time-col-reg-inline{
    padding:0 10px
}
.dp--time-col-reg-with-button{
    padding:0 15px
}
.dp--time-col-reg-with-button[data-compact~=true]{
    padding:0 5px
}
.dp--time-col-sec{
    padding:0 10px
}
.dp--time-col-sec-with-button{
    padding:0 5px
}
.dp--time-col-sec-with-button[data-collapsed~=true]{
    padding:0
}
.dp--time-col{
    text-align:center;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    display:flex
}
.dp--time-col-block{
    font-size:var(--dp-time-font-size)
}
.dp--inc-dec-button-disabled{
    background:var(--dp-disabled-color);
    color:var(--dp-disabled-color-text);
    cursor:not-allowed
}
.dp--inc-dec-button-disabled:hover{
    background:var(--dp-disabled-color);
    color:var(--dp-disabled-color-text);
    cursor:not-allowed
}
.dp--time-display-block{
    padding:0 3px
}
.dp--time-display-inline{
    padding:5px
}
.dp--time-picker-inline-container{
    justify-content:center;
    width:100%;
    display:flex
}
.dp--inc-dec-button{
    height:var(--dp-time-inc-dec-button-size);
    width:var(--dp-time-inc-dec-button-size);
    cursor:pointer;
    color:var(--dp-icon-color);
    box-sizing:border-box;
    border-radius:50%;
    justify-content:center;
    align-items:center;
    margin:0;
    padding:5px;
    display:flex
}
.dp--inc-dec-button svg{
    height:var(--dp-time-inc-dec-button-size);
    width:var(--dp-time-inc-dec-button-size)
}
.dp--inc-dec-button:hover{
    background:var(--dp-hover-color);
    color:var(--dp-hover-icon-color)
}
.dp--time-display{
    cursor:pointer;
    color:var(--dp-text-color);
    border-radius:var(--dp-border-radius);
    justify-content:center;
    align-items:center;
    display:flex
}
.dp--time-display:hover:enabled{
    background:var(--dp-hover-color);
    color:var(--dp-hover-text-color)
}
.dp--inc-dec-button-inline{
    cursor:pointer;
    align-items:center;
    width:100%;
    height:8px;
    padding:0;
    display:flex
}
.dp--pm-am-button{
    background:var(--dp-primary-color);
    color:var(--dp-primary-text-color);
    padding:var(--dp-common-padding);
    border-radius:var(--dp-border-radius);
    cursor:pointer;
    border:none
}
.dp--pm-am-button[data-compact~=true]{
    padding:7px
}
.dp--tp-inline-btn-bar{
    background-color:var(--dp-secondary-color);
    width:100%;
    height:4px;
    transition:var(--dp-common-transition);
    border-collapse:collapse
}
.dp--tp-inline-btn-top:hover .dp--tp-btn-in-r{
    background-color:var(--dp-primary-color);
    transform:rotate(12deg)scale(1.15)translateY(-2px)
}
.dp--tp-inline-btn-top:hover .dp--tp-btn-in-l{
    background-color:var(--dp-primary-color);
    transform:rotate(-12deg)scale(1.15)translateY(-2px)
}
.dp--tp-inline-btn-bottom:hover .dp--tp-btn-in-r{
    background-color:var(--dp-primary-color);
    transform:rotate(-12deg)scale(1.15)translateY(-2px)
}
.dp--tp-inline-btn-bottom:hover .dp--tp-btn-in-l{
    background-color:var(--dp-primary-color);
    transform:rotate(12deg)scale(1.15)translateY(-2px)
}
.dp--time-overlay-btn{
    background:0 0
}
.dp--time-invalid{
    background-color:var(--dp-disabled-color)
}
/*
:root{
    --dp-common-transition:all .1s ease-in;
    --dp-menu-padding:6px 8px;
    --dp-animation-duration:.1s;
    --dp-menu-appear-transition-timing:cubic-bezier(.4, 0, 1, 1);
    --dp-transition-timing:ease-out;
    --dp-action-row-transition:all .2s ease-in;
    --dp-font-family:-apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --dp-border-radius:4px;
    --dp-cell-border-radius:4px;
    --dp-transition-length:22px;
    --dp-transition-timing-general:.1s;
    --dp-button-height:35px;
    --dp-month-year-row-height:35px;
    --dp-month-year-row-button-size:25px;
    --dp-button-icon-height:20px;
    --dp-calendar-wrap-padding:0 5px;
    --dp-cell-size:35px;
    --dp-cell-padding:5px;
    --dp-common-padding:10px;
    --dp-input-icon-padding:35px;
    --dp-input-padding:6px 30px 6px 12px;
    --dp-input-not-clearable-padding:12px;
    --dp-menu-min-width:260px;
    --dp-action-buttons-padding:1px 6px;
    --dp-row-margin:5px 0;
    --dp-calendar-header-cell-padding:8px;
    --dp-multi-calendars-spacing:10px;
    --dp-overlay-col-padding:3px;
    --dp-time-inc-dec-button-size:32px;
    --dp-font-size:1rem;
    --dp-preview-font-size:.8rem;
    --dp-time-font-size:2rem;
    --dp-action-button-height:22px;
    --dp-action-row-padding:8px;
    --dp-direction:ltr
}
.dp--theme-dark{
    --dp-background-color:#212121;
    --dp-text-color:#fff;
    --dp-hover-color:#484848;
    --dp-hover-text-color:#fff;
    --dp-hover-icon-color:#959595;
    --dp-primary-color:#005cb2;
    --dp-primary-disabled-color:#61a8ea;
    --dp-primary-text-color:#fff;
    --dp-secondary-color:#a9a9a9;
    --dp-border-color:#2d2d2d;
    --dp-menu-border-color:#2d2d2d;
    --dp-border-color-hover:#aaaeb7;
    --dp-border-color-focus:#aaaeb7;
    --dp-disabled-color:#737373;
    --dp-disabled-color-text:#d0d0d0;
    --dp-scroll-bar-background:#212121;
    --dp-scroll-bar-color:#484848;
    --dp-success-color:#00701a;
    --dp-success-color-disabled:#428f59;
    --dp-icon-color:#959595;
    --dp-danger-color:#e53935;
    --dp-marker-color:#e53935;
    --dp-tooltip-color:#3e3e3e;
    --dp-highlight-color:#005cb233;
    --dp-range-between-dates-background-color:var(--dp-hover-color,#484848);
    --dp-range-between-dates-text-color:var(--dp-hover-text-color,#fff);
    --dp-range-between-border-color:var(--dp-hover-color,#fff);
    --dp-loader:5px solid #005cb2
}
.dp--theme-light{
    --dp-background-color:#fff;
    --dp-text-color:#212121;
    --dp-hover-color:#f3f3f3;
    --dp-hover-text-color:#212121;
    --dp-hover-icon-color:#959595;
    --dp-primary-color:#1976d2;
    --dp-primary-disabled-color:#6bacea;
    --dp-primary-text-color:#fff;
    --dp-secondary-color:#c0c4cc;
    --dp-border-color:#ddd;
    --dp-menu-border-color:#ddd;
    --dp-border-color-hover:#aaaeb7;
    --dp-border-color-focus:#aaaeb7;
    --dp-disabled-color:#f6f6f6;
    --dp-scroll-bar-background:#f3f3f3;
    --dp-scroll-bar-color:#959595;
    --dp-success-color:#76d275;
    --dp-success-color-disabled:#a3d9b1;
    --dp-icon-color:#959595;
    --dp-danger-color:#ff6f60;
    --dp-marker-color:#ff6f60;
    --dp-tooltip-color:#fafafa;
    --dp-disabled-color-text:#8e8e8e;
    --dp-highlight-color:#1976d21a;
    --dp-range-between-dates-background-color:var(--dp-hover-color,#f3f3f3);
    --dp-range-between-dates-text-color:var(--dp-hover-text-color,#212121);
    --dp-range-between-border-color:var(--dp-hover-color,#f3f3f3);
    --dp-loader:5px solid #1976d2
}
*/
.calendar-next-enter-active,.calendar-next-leave-active,.calendar-prev-enter-active,.calendar-prev-leave-active{
    transition:all var(--dp-transition-timing-general) ease-out
}
.calendar-next-enter-from{
    opacity:0;
    transform:translateX(var(--dp-transition-length))
}
.calendar-next-leave-to,.calendar-prev-enter-from{
    opacity:0;
    transform:translateX(calc(var(--dp-transition-length) * -1))
}
.calendar-prev-leave-to{
    opacity:0;
    transform:translateX(var(--dp-transition-length))
}
.dp-menu-appear-bottom-enter-active,.dp-menu-appear-bottom-leave-active,.dp-menu-appear-top-enter-active,.dp-menu-appear-top-leave-active,.dp-slide-up-enter-active,.dp-slide-up-leave-active,.dp-slide-down-enter-active,.dp-slide-down-leave-active{
    transition:all var(--dp-animation-duration) var(--dp-transition-timing)
}
.dp-menu-appear-top-enter-from,.dp-menu-appear-top-leave-to,.dp-slide-down-leave-to,.dp-slide-up-enter-from{
    opacity:0;
    transform:translateY(var(--dp-transition-length))
}
.dp-menu-appear-bottom-enter-from,.dp-menu-appear-bottom-leave-to,.dp-slide-down-enter-from,.dp-slide-up-leave-to{
    opacity:0;
    transform:translateY(calc(var(--dp-transition-length) * -1))
}
.dp--flex-display-with-input{
    flex-direction:column;
    align-items:flex-start
}