@import url(dhtmlx-dhx-icons.css);

.dhx_547239261_alert {
   width: 440px
}

   .dhx_547239261_alert .dhx_alert__header {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-direction: column;
      flex-direction: column
   }

   .dhx_547239261_alert .dhx_alert__header--icon {
      width: 80px;
      height: 80px;
      fill: #ff5252;
      -ms-flex-item-align: center;
      align-self: center;
      margin-bottom: 16px
   }

   .dhx_547239261_alert .dhx_alert__header--text {
      font-size: 18px;
      line-height: 24px;
      text-align: center
   }

   .dhx_547239261_alert .dhx_alert__content {
      font-weight: 800;
      line-height: 20px
   }

.dhx_638523928_message.dhx_message.dhx_widget {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column;
   width: 400px;
   background-color: #ff5252
}

   .dhx_638523928_message.dhx_message.dhx_widget .dhx_message__icon, .dhx_638523928_message.dhx_message.dhx_widget .dhx_message__text {
      color: #fff
   }

:root, [data-dhx-theme] {
   --dhx-step-size: 4px;
   --dhx-color-white: #fff;
   --dhx-color-gray-100: #e6e6e6;
   --dhx-color-gray-200: #ccc;
   --dhx-color-gray-300: #b3b3b3;
   --dhx-color-gray-400: #999;
   --dhx-color-gray-500: grey;
   --dhx-color-gray-600: #666;
   --dhx-color-gray-700: #4d4d4d;
   --dhx-color-gray-800: #333;
   --dhx-color-gray-900: #1a1a1a;
   --dhx-color-black: #000;
   --dhx-font-family: "Roboto",Arial,Tahoma,Verdana,sans-serif;
   --dhx-font-weight-regular: 400;
   --dhx-font-weight-medium: 500;
   --dhx-font-weight-bold: 700;
   --dhx-font-size-small: calc(var(--dhx-step-size)*3);
   --dhx-font-size-normal: calc(var(--dhx-step-size)*3.5);
   --dhx-font-size-large: calc(var(--dhx-step-size)*4);
   --dhx-line-height-small: calc(var(--dhx-step-size)*4);
   --dhx-line-height-normal: calc(var(--dhx-step-size)*5);
   --dhx-line-height-large: calc(var(--dhx-step-size)*6);
   --dhx-font-color-primary: rgba(0,0,0,.7);
   --dhx-font-color-secondary: rgba(0,0,0,.5);
   --dhx-font-color-additional: rgba(0,0,0,.3);
   --dhx-font-color-disabled: rgba(0,0,0,.3);
   --dhx-font-color-contrast: var(--dhx-color-white);
   --dhx-font-color-contrast-disabled: var(--dhx-color-white);
   --dhx-icon-size-small: calc(var(--dhx-step-size)*4);
   --dhx-icon-size-normal: calc(var(--dhx-step-size)*5);
   --dhx-icon-size-large: calc(var(--dhx-step-size)*6);
   --dhx-border-width: 1px;
   --dhx-border-radius: 2px;
   --dhx-border-color: rgba(0,0,0,.1);
   --dhx-border-color-focused: rgba(0,0,0,.2);
   --dhx-border: var(--dhx-border-width) solid var(--dhx-border-color);
   --dhx-border-shadow-small: 0 2px 4px rgba(0,0,0,.15);
   --dhx-border-shadow-normal: 0 2px 5px rgba(0,0,0,.3);
   --dhx-border-shadow-large: 0px 1px 6px rgba(0,0,0,.1),0px 10px 20px rgba(0,0,0,.1);
   --dhx-shadow-input-size: inset 0px 0px 0px var(--dhx-border-width);
   --dhx-transition-time: 0.2s;
   --dhx-transition-in: ease-in;
   --dhx-transition-out: ease-out;
   --dhx-z-index-up: 1;
   --dhx-z-index-force-up: 10;
   --dhx-z-index-overlay: 999;
   --dhx-z-index-overlay-total: 10000000;
   --dhx-l-contrast-offset: 0%;
   --dhx-l-h-offset: 10%;
   --dhx-s-d-offset: 30%;
   --dhx-l-d: 70%;
   --dhx-a-l-h: .15;
   --dhx-a-l-a: .3;
   --dhx-h-primary: 200;
   --dhx-s-primary: 98%;
   --dhx-l-primary: 40%;
   --dhx-h-secondary: 0;
   --dhx-s-secondary: 0%;
   --dhx-l-secondary: 30%;
   --dhx-h-danger: 0;
   --dhx-s-danger: 100%;
   --dhx-l-danger: 60%;
   --dhx-h-success: 154;
   --dhx-s-success: 89%;
   --dhx-l-success: 37%;
   --dhx-h-background: 0;
   --dhx-s-background: 0%;
   --dhx-l-background: 100%;
   --dhx-a-background: 0.5;
   --dhx-background-primary: hsl(var(--dhx-h-background),var(--dhx-s-background),var(--dhx-l-background));
   --dhx-background-secondary: hsl(var(--dhx-h-background),var(--dhx-s-background),calc(var(--dhx-l-background) - 3%));
   --dhx-background-additional: hsl(var(--dhx-h-background),var(--dhx-s-background),calc(var(--dhx-l-background) - 10%));
   --dhx-background-overlay: hsla(var(--dhx-h-background),var(--dhx-s-background),calc(var(--dhx-l-background)*-1),var(--dhx-a-background));
   --dhx-background-overlay-light: hsla(0,0%,100%,.5);
   --dhx-tooltip-background-dark: var(--dhx-color-gray-800);
   --dhx-tooltip-background-light: var(--dhx-color-white);
   --dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10),var(--dhx-s-primary),var(--dhx-l-primary));
   --dhx-color-primary: hsl(var(--dhx-h-primary),var(--dhx-s-primary),calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)));
   --dhx-color-primary-hover: hsl(var(--dhx-h-primary),var(--dhx-s-primary),calc(var(--dhx-l-primary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset)));
   --dhx-color-primary-active: var(--dhx-color-primary);
   --dhx-color-primary-disabled: hsl(var(--dhx-h-primary),calc(var(--dhx-s-primary) - var(--dhx-s-d-offset)),var(--dhx-l-d));
   --dhx-color-primary-light-hover: hsla(var(--dhx-h-primary),var(--dhx-s-primary),calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)),var(--dhx-a-l-h));
   --dhx-color-primary-light-active: hsla(var(--dhx-h-primary),var(--dhx-s-primary),calc(var(--dhx-l-primary) - var(--dhx-l-contrast-offset)),var(--dhx-a-l-a));
   --dhx-color-secondary: hsl(var(--dhx-h-secondary),var(--dhx-s-secondary),calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)));
   --dhx-color-secondary-hover: hsl(var(--dhx-h-secondary),var(--dhx-s-secondary),calc(var(--dhx-l-secondary) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset)));
   --dhx-color-secondary-active: var(--dhx-color-secondary);
   --dhx-color-secondary-disabled: hsl(var(--dhx-h-secondary),calc(var(--dhx-s-secondary) - var(--dhx-s-d-offset)),var(--dhx-l-d));
   --dhx-color-secondary-light-hover: hsla(var(--dhx-h-secondary),var(--dhx-s-secondary),calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)),var(--dhx-a-l-h));
   --dhx-color-secondary-light-active: hsla(var(--dhx-h-secondary),var(--dhx-s-secondary),calc(var(--dhx-l-secondary) - var(--dhx-l-contrast-offset)),var(--dhx-a-l-a));
   --dhx-color-danger: hsl(var(--dhx-h-danger),var(--dhx-s-danger),calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)));
   --dhx-color-danger-hover: hsl(var(--dhx-h-danger),var(--dhx-s-danger),calc(var(--dhx-l-danger) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset)));
   --dhx-color-danger-active: var(--dhx-color-danger);
   --dhx-color-danger-disabled: hsl(var(--dhx-h-danger),calc(var(--dhx-s-danger) - var(--dhx-s-d-offset)),var(--dhx-l-d));
   --dhx-color-danger-light-hover: hsla(var(--dhx-h-danger),var(--dhx-s-danger),calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)),var(--dhx-a-l-h));
   --dhx-color-danger-light-active: hsla(var(--dhx-h-danger),var(--dhx-s-danger),calc(var(--dhx-l-danger) - var(--dhx-l-contrast-offset)),var(--dhx-a-l-a));
   --dhx-color-success: hsl(var(--dhx-h-success),var(--dhx-s-success),calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)));
   --dhx-color-success-hover: hsl(var(--dhx-h-success),var(--dhx-s-success),calc(var(--dhx-l-success) + var(--dhx-l-h-offset) - var(--dhx-l-contrast-offset)));
   --dhx-color-success-active: var(--dhx-color-success);
   --dhx-color-success-disabled: hsl(var(--dhx-h-success),calc(var(--dhx-s-success) - var(--dhx-s-d-offset)),var(--dhx-l-d));
   --dhx-color-success-light-hover: hsla(var(--dhx-h-success),var(--dhx-s-success),calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)),var(--dhx-a-l-h));
   --dhx-color-success-light-active: hsla(var(--dhx-h-success),var(--dhx-s-success),calc(var(--dhx-l-success) - var(--dhx-l-contrast-offset)),var(--dhx-a-l-a));
   --dhx-s-toolbar-background: var(--dhx-background-primary);
   --dhx-s-toolbar-button-background-hover: rgba(0,0,0,.07);
   --dhx-s-toolbar-button-background-active: rgba(0,0,0,.15);
   --dhx-s-grid-header-background: var(--dhx-background-secondary);
   --dhx-s-grid-selection-background: var(--dhx-color-gray-700);
   --dhx-s-calendar-muffled: .6;
   --dhx-s-tick-font-size: calc(var(--dhx-font-size-small)/1.2)
}

.dhx_checkbox__input, .dhx_radiobutton__input, .dhx_simplevault__input, .dhx_visually-hidden {
   position: absolute;
   overflow: hidden;
   clip: rect(0 0 0 0);
   height: 1px;
   width: 1px;
   margin: -1px;
   padding: 0;
   border: 0
}

.dhx_no-select {
   -webkit-user-select: none;
   user-select: none
}

   .dhx_no-select:not(.dhx_no-select--resize):not(.dhx_no-select--pointer) * {
      cursor: move !important
   }

.dhx_no-select--pointer {
   cursor: pointer
}

.dhx_drop-area--not-allowed, .dhx_no-select--pointer {
   -webkit-user-select: none;
   user-select: none
}

   .dhx_drop-area--not-allowed, .dhx_drop-area--not-allowed:not(.dhx_no-select--resize):not(.dhx_no-select--pointer) * {
      cursor: not-allowed !important
   }

.dhx_no-select--resize {
   -webkit-user-select: none;
   user-select: none
}

   .dhx_no-select--resize iframe {
      pointer-events: none !important
   }

.dhx-resize-observer {
   position: absolute;
   left: 0;
   top: -100%;
   width: 100%;
   height: 100%;
   margin: 1px 0 0;
   border: none;
   opacity: 0;
   visibility: hidden;
   pointer-events: none
}

.dhx_widget, .dhx_widget * {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "liga"
}

   .dhx_widget, .dhx_widget *, .dhx_widget:after, .dhx_widget :after, .dhx_widget:before, .dhx_widget :before {
      box-sizing: border-box
   }

      .dhx_widget * :not(output):-moz-ui-invalid, .dhx_widget :not(output):-moz-ui-invalid {
         box-shadow: none
      }

.dhx_widget {
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-regular);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary)
}

.dhx_widget--bordered {
   border: var(--dhx-border)
}

.dhx_widget--border_top {
   border-top: var(--dhx-border)
}

.dhx_widget--border_bottom {
   border-bottom: var(--dhx-border)
}

.dhx_widget--border_left {
   border-left: var(--dhx-border)
}

.dhx_widget--border_right {
   border-right: var(--dhx-border)
}

.dhx_widget--border-shadow {
   border: 0;
   box-shadow: var(--dhx-border-shadow-small)
}

.dhx_widget--no-border {
   border: 0
}

.dhx_widget--no-border_top {
   border-top: 0
}

.dhx_widget--no-border_bottom {
   border-bottom: 0
}

.dhx_widget--no-border_left {
   border-left: 0
}

.dhx_widget--no-border_right {
   border-right: 0
}

.dhx_widget.dhx_widget--bg_white {
   background-color: var(--dhx-color-white)
}

.dhx_widget.dhx_widget--bg_gray {
   background-color: #f7f7f7
}

.dhx_drag-ghost {
   position: absolute;
   -webkit-user-select: none;
   user-select: none;
   pointer-events: none;
   z-index: calc(var(--dhx-z-index-overlay-total) + 1);
   opacity: .6
}

   .dhx_drag-ghost * {
      box-sizing: border-box
   }

   .dhx_drag-ghost .dhx_list-item {
      list-style-type: none;
      color: var(--dhx-font-color-primary)
   }

   .dhx_drag-ghost .dhx_list-item--selected {
      background-color: var(--dhx-background-primary);
      box-shadow: inset 0 0 0 0 var(--dhx-color-primary)
   }

      .dhx_drag-ghost .dhx_list-item--focus, .dhx_drag-ghost .dhx_list-item--selected:hover, .dhx_drag-ghost .dhx_list-item:hover {
         background-color: var(--dhx-background-additional);
         transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
      }

   .dhx_drag-ghost .dhx_dataview-item {
      color: var(--dhx-font-color-primary)
   }

   .dhx_drag-ghost .dhx_tree-list-item__icon {
      position: relative;
      display: inline;
      vertical-align: middle;
      color: var(--dhx-font-color-additional);
      font-size: var(--dhx-icon-size-normal);
      top: 2px
   }

   .dhx_drag-ghost .dhx_tree-list-item__text {
      font-family: var(--dhx-font-family);
      font-size: var(--dhx-font-size-normal);
      vertical-align: middle;
      line-height: var(--dhx-line-height-normal);
      color: var(--dhx-font-color-primary)
   }

   .dhx_drag-ghost .dhx_dataview-item, .dhx_drag-ghost .dhx_grid-cell, .dhx_drag-ghost .dhx_list-item {
      background-color: var(--dhx-background-primary);
      border: var(--dhx-border) !important
   }

@font-face {
   font-family: Roboto;
   src: url(dhtmlx-roboto-regular-webfont.woff2) format("woff2"),url(dhtmlx-roboto-regular-webfont.woff) format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: fallback
}

@font-face {
   font-family: Roboto;
   src: url(dhtmlx-roboto-medium-webfont.woff2) format("woff2"),url(dhtmlx-roboto-medium-webfont.woff) format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: fallback
}

@font-face {
   font-family: Roboto;
   src: url(dhtmlx-roboto-bold-webfont.woff2) format("woff2"),url(dhtmlx-roboto-bold-webfont.woff) format("woff");
   font-weight: 700;
   font-style: normal;
   font-display: fallback
}

.dxi {
   display: inline-block;
   text-rendering: auto;
   line-height: 0;
   font-size: 0
}

   .dxi:before {
      font-size: var(--dhx-icon-size-normal)
   }

.dxi--small:before {
   font-size: var(--dhx-icon-size-small)
}

.dxi--medium:before {
   font-size: var(--dhx-icon-size-normal)
}

.dxi--large:before {
   font-size: var(--dhx-icon-size-large)
}

@keyframes button-loading {
   0% {
      transform: rotate(0deg);
      transform-origin: center center
   }

   to {
      transform: rotate(1439deg);
      transform-origin: center center
   }
}

.scroll-view-wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative
}

   .scroll-view-wrapper:hover .scroll-runner {
      opacity: 1 !important
   }

   .scroll-view-wrapper .scroll-view {
      width: 100%;
      height: 100%;
      overflow: scroll;
      -ms-overflow-style: scrollbar
   }

   .scroll-view-wrapper .scroll-view--overlay {
      scrollbar-width: none
   }

   .scroll-view-wrapper .x-scroll, .scroll-view-wrapper .y-scroll {
      z-index: 1000;
      background-color: transparent;
      transition: all .3s
   }

      .scroll-view-wrapper .x-scroll .scroll-runner, .scroll-view-wrapper .y-scroll .scroll-runner {
         position: absolute;
         background: #999;
         border-radius: 6px;
         z-index: 1
      }

      .scroll-view-wrapper .x-scroll:hover {
         transition: height .5s;
         height: 10px !important
      }

      .scroll-view-wrapper .x-scroll .scroll-runner {
         height: 100%
      }

      .scroll-view-wrapper .y-scroll:hover {
         transition: width .5s;
         width: 10px !important
      }

      .scroll-view-wrapper .y-scroll .scroll-runner {
         width: 100%
      }

.dhx_button {
   overflow: visible;
   position: relative;
   text-decoration: none;
   background-image: none;
   border: 0;
   touch-action: manipulation;
   -webkit-user-select: none;
   user-select: none;
   white-space: nowrap;
   cursor: pointer
}

   .dhx_button:active, .dhx_button:focus-visible {
      outline: none
   }

.dhx_button__icon, .dhx_button__text {
   pointer-events: none
}

.dhx_button__icon {
   line-height: 0
}

   .dhx_button__icon:before {
      display: inline-block
   }

   .dhx_button__icon + .dhx_button__text {
      margin-left: var(--dhx-step-size)
   }

.dhx_button__loading {
   display: none;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   justify-content: center;
   align-items: center
}

.dhx_button__loading-icon {
   animation: button-loading 3s linear infinite
}

.dhx_button--width_full {
   width: 100%
}

.dhx_button--justify_between {
   justify-content: space-between
}

.dhx_button--circle.dhx_button--size_small {
   border-radius: calc(var(--dhx-line-height-normal) + var(--dhx-step-size)*2)
}

.dhx_button--circle.dhx_button--size_medium {
   border-radius: calc(var(--dhx-line-height-normal) + var(--dhx-step-size)*3)
}

.dhx_button--disabled, .dhx_button:disabled {
   pointer-events: none
}

.dhx_button--icon.dhx_button--circle:not(.dhx_button--width_full) {
   border-radius: 50%
}

   .dhx_button--icon.dhx_button--circle:not(.dhx_button--width_full).dhx_button--size_medium {
      padding-left: calc(var(--dhx-step-size)*1.5);
      padding-right: calc(var(--dhx-step-size)*1.5)
   }

   .dhx_button--icon.dhx_button--circle:not(.dhx_button--width_full).dhx_button--size_small {
      padding-left: var(--dhx-step-size);
      padding-right: var(--dhx-step-size)
   }

.dhx_button--loading {
   position: relative
}

   .dhx_button--loading .dhx_button__loading {
      display: flex
   }

   .dhx_button--loading .dhx_button__icon, .dhx_button--loading .dhx_button__text {
      visibility: hidden
   }

.dhx_button--size_small {
   padding: var(--dhx-step-size) calc(var(--dhx-step-size)*3);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal)
}

   .dhx_button--size_small .dhx_button__icon:before {
      font-size: var(--dhx-icon-size-small);
      line-height: var(--dhx-line-height-small)
   }

   .dhx_button--size_small.dhx_button--loading-icon:before {
      font-size: var(--dhx-icon-size-small);
      margin-top: calc(var(--dhx-icon-size-small)/2*-1);
      margin-left: calc(var(--dhx-icon-size-small)/2*-1)
   }

.dhx_button--size_medium {
   padding: calc(var(--dhx-step-size)*1.5) calc(var(--dhx-step-size)*4);
   text-transform: uppercase;
   line-height: var(--dhx-line-height-normal)
}

   .dhx_button--size_medium .dhx_button__icon:before {
      font-size: var(--dhx-icon-size-normal);
      line-height: var(--dhx-line-height-normal)
   }

   .dhx_button--size_medium.dhx_button--loading-icon:before {
      font-size: var(--dhx-line-height-normal);
      margin-top: calc(var(--dhx-line-height-normal)/2*-1);
      margin-left: calc(var(--dhx-line-height-normal)/2*-1)
   }

.dhx_button--view_flat {
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-medium);
   line-height: var(--dhx-line-height-normal);
   text-align: center;
   color: var(--dhx-font-color-contrast);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-in),color var(--dhx-transition-time) var(--dhx-transition-in),box-shadow var(--dhx-transition-time) var(--dhx-transition-in)
}

   .dhx_button--view_flat:focus, .dhx_button--view_flat:hover {
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-out),color var(--dhx-transition-time) var(--dhx-transition-out),box-shadow var(--dhx-transition-time) var(--dhx-transition-out)
   }

   .dhx_button--view_flat.dhx_button--color_primary {
      background-color: var(--dhx-color-primary);
      outline-width: 0
   }

      .dhx_button--view_flat.dhx_button--color_primary.dhx_button--active, .dhx_button--view_flat.dhx_button--color_primary:focus, .dhx_button--view_flat.dhx_button--color_primary:hover {
         background-color: var(--dhx-color-primary-hover)
      }

      .dhx_button--view_flat.dhx_button--color_primary:active {
         background-color: var(--dhx-color-primary);
         box-shadow: none
      }

      .dhx_button--view_flat.dhx_button--color_primary.dhx_button--disabled, .dhx_button--view_flat.dhx_button--color_primary:disabled {
         color: var(--dhx-font-color-contrast-disabled);
         background-color: var(--dhx-color-primary-disabled)
      }

   .dhx_button--view_flat.dhx_button--color_secondary {
      background-color: var(--dhx-color-secondary);
      outline-width: 0
   }

      .dhx_button--view_flat.dhx_button--color_secondary.dhx_button--active, .dhx_button--view_flat.dhx_button--color_secondary:focus, .dhx_button--view_flat.dhx_button--color_secondary:hover {
         background-color: var(--dhx-color-secondary-hover)
      }

      .dhx_button--view_flat.dhx_button--color_secondary:active {
         background-color: var(--dhx-color-secondary);
         box-shadow: none
      }

      .dhx_button--view_flat.dhx_button--color_secondary.dhx_button--disabled, .dhx_button--view_flat.dhx_button--color_secondary:disabled {
         color: var(--dhx-font-color-contrast-disabled);
         background-color: var(--dhx-color-secondary-disabled)
      }

   .dhx_button--view_flat.dhx_button--color_danger {
      background-color: var(--dhx-color-danger);
      outline-width: 0
   }

      .dhx_button--view_flat.dhx_button--color_danger.dhx_button--active, .dhx_button--view_flat.dhx_button--color_danger:focus, .dhx_button--view_flat.dhx_button--color_danger:hover {
         background-color: var(--dhx-color-danger-hover)
      }

      .dhx_button--view_flat.dhx_button--color_danger:active {
         background-color: var(--dhx-color-danger);
         box-shadow: none
      }

      .dhx_button--view_flat.dhx_button--color_danger.dhx_button--disabled, .dhx_button--view_flat.dhx_button--color_danger:disabled {
         color: var(--dhx-font-color-contrast-disabled);
         background-color: var(--dhx-color-danger-disabled)
      }

   .dhx_button--view_flat.dhx_button--color_success {
      background-color: var(--dhx-color-success);
      outline-width: 0
   }

      .dhx_button--view_flat.dhx_button--color_success.dhx_button--active, .dhx_button--view_flat.dhx_button--color_success:focus, .dhx_button--view_flat.dhx_button--color_success:hover {
         background-color: var(--dhx-color-success-hover)
      }

      .dhx_button--view_flat.dhx_button--color_success:active {
         background-color: var(--dhx-color-success);
         box-shadow: none
      }

      .dhx_button--view_flat.dhx_button--color_success.dhx_button--disabled, .dhx_button--view_flat.dhx_button--color_success:disabled {
         color: var(--dhx-font-color-contrast-disabled);
         background-color: var(--dhx-color-success-disabled)
      }

.dhx_button--view_link {
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-medium);
   line-height: var(--dhx-line-height-normal);
   text-align: center;
   border-radius: var(--dhx-border-radius);
   background: transparent;
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-in),box-shadow var(--dhx-transition-time) var(--dhx-transition-in)
}

   .dhx_button--view_link:focus, .dhx_button--view_link:hover {
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-out),box-shadow var(--dhx-transition-time) var(--dhx-transition-out)
   }

   .dhx_button--view_link.dhx_button--color_primary {
      color: var(--dhx-color-primary);
      outline-width: 0
   }

      .dhx_button--view_link.dhx_button--color_primary:focus, .dhx_button--view_link.dhx_button--color_primary:hover {
         background-color: var(--dhx-color-primary-light-hover)
      }

      .dhx_button--view_link.dhx_button--color_primary.dhx_button--active, .dhx_button--view_link.dhx_button--color_primary:active {
         background-color: var(--dhx-color-primary-light-active)
      }

      .dhx_button--view_link.dhx_button--color_primary.dhx_button--disabled, .dhx_button--view_link.dhx_button--color_primary:disabled {
         color: var(--dhx-color-primary-disabled)
      }

   .dhx_button--view_link.dhx_button--color_secondary {
      color: var(--dhx-color-secondary);
      outline-width: 0
   }

      .dhx_button--view_link.dhx_button--color_secondary:focus, .dhx_button--view_link.dhx_button--color_secondary:hover {
         background-color: var(--dhx-color-secondary-light-hover)
      }

      .dhx_button--view_link.dhx_button--color_secondary.dhx_button--active, .dhx_button--view_link.dhx_button--color_secondary:active {
         background-color: var(--dhx-color-secondary-light-active)
      }

      .dhx_button--view_link.dhx_button--color_secondary.dhx_button--disabled, .dhx_button--view_link.dhx_button--color_secondary:disabled {
         color: var(--dhx-color-secondary-disabled)
      }

   .dhx_button--view_link.dhx_button--color_danger {
      color: var(--dhx-color-danger);
      outline-width: 0
   }

      .dhx_button--view_link.dhx_button--color_danger:focus, .dhx_button--view_link.dhx_button--color_danger:hover {
         background-color: var(--dhx-color-danger-light-hover)
      }

      .dhx_button--view_link.dhx_button--color_danger.dhx_button--active, .dhx_button--view_link.dhx_button--color_danger:active {
         background-color: var(--dhx-color-danger-light-active)
      }

      .dhx_button--view_link.dhx_button--color_danger.dhx_button--disabled, .dhx_button--view_link.dhx_button--color_danger:disabled {
         color: var(--dhx-color-danger-disabled)
      }

   .dhx_button--view_link.dhx_button--color_success {
      color: var(--dhx-color-success);
      outline-width: 0
   }

      .dhx_button--view_link.dhx_button--color_success:focus, .dhx_button--view_link.dhx_button--color_success:hover {
         background-color: var(--dhx-color-success-light-hover)
      }

      .dhx_button--view_link.dhx_button--color_success.dhx_button--active, .dhx_button--view_link.dhx_button--color_success:active {
         background-color: var(--dhx-color-success-light-active)
      }

      .dhx_button--view_link.dhx_button--color_success.dhx_button--disabled, .dhx_button--view_link.dhx_button--color_success:disabled {
         color: var(--dhx-color-success-disabled)
      }

.dhx_button--sidebar .dhx_button__icon + .dhx_button__text {
   margin-left: calc(var(--dhx-step-size)*2);
   margin-right: auto
}

.utilityfocus .dhx_button:focus-visible {
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -1px
}

.dhx_widget .dhx_button__icon {
   line-height: 0
}

   .dhx_widget .dhx_button__icon:before {
      font-size: var(--dhx-icon-size-normal);
      line-height: var(--dhx-icon-size-normal)
   }

.dhx_widget .dhx_button--size_small .dhx_button__icon:before {
   font-size: var(--dhx-icon-size-small);
   line-height: var(--dhx-icon-size-small)
}

.dhx_form-group {
   position: relative;
   display: block;
   text-align: left;
   margin-bottom: var(--dhx-line-height-small)
}

.dhx_form-group--simplevault {
   line-height: 0;
   height: 100%
}

   .dhx_form-group--simplevault .dhx_label {
      padding: 0
   }

.dhx_form-group--textarea {
   display: flex;
   flex-direction: column;
   height: calc(100% - 16px)
}

   .dhx_form-group--textarea .dhx_input--textarea, .dhx_form-group--textarea .dhx_input__wrapper {
      height: 100%
   }

   .dhx_form-group--textarea .dhx_label {
      min-height: var(--dhx-line-height-normal);
      line-height: var(--dhx-line-height-normal)
   }

.dhx_form-group--inline {
   display: flex;
   flex-direction: row;
   width: 100%;
   align-items: center;
   position: relative
}

   .dhx_form-group--inline .dhx_label {
      position: relative;
      flex: 0 0 auto;
      max-height: calc(var(--dhx-line-height-normal)*2);
      margin-right: 16px;
      margin-bottom: 0;
      padding: 0;
      text-align: right;
      margin-top: 6px;
      align-self: flex-start;
      max-width: 30%;
      justify-content: flex-end
   }

   .dhx_form-group--inline .dhx_input__wrapper {
      flex: 0 1 auto;
      width: 300%;
      height: 100%
   }

   .dhx_form-group--inline .dhx_label--with-help {
      justify-content: flex-end
   }

   .dhx_form-group--inline .dhx_checkbox, .dhx_form-group--inline .dhx_radiobutton {
      margin-bottom: 12px
   }

.dhx_form-group--required:not(.dhx_form-group--label_sr) .dhx_label:not(.dhx_label--with-help) {
   position: relative
}

   .dhx_form-group--required:not(.dhx_form-group--label_sr) .dhx_label:not(.dhx_label--with-help):after {
      content: "*";
      display: inline-block;
      padding-left: 4px;
      color: var(--dhx-font-color-additional)
   }

.dhx_form-group--required:not(.dhx_form-group--label_sr) .dhx_label__holder {
   position: relative;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis
}

   .dhx_form-group--required:not(.dhx_form-group--label_sr) .dhx_label__holder:after {
      content: "*";
      display: inline-block;
      padding-left: 4px;
      color: var(--dhx-font-color-additional)
   }

.dhx_form-group--no-message-holder {
   margin-bottom: 0
}

.dhx_form-group--disabled {
   opacity: .6;
   pointer-events: none;
   cursor: default
}

.dhx_form-group--checkbox-group .dhx_label, .dhx_form-group--checkbox .dhx_label, .dhx_form-group--radio-group .dhx_label {
   margin-top: 0;
   margin-bottom: 12px
}

.dhx_form-group--checkbox-group > .dhx_label, .dhx_form-group--checkbox > .dhx_label, .dhx_form-group--radio-group > .dhx_label {
   display: flex
}

.dhx_form-group--hidden {
   display: none
}

.dhx_form-group--state_error .dhx_input__caption, .dhx_form-group--state_error .dhx_label, .dhx_form-group--state_error .dhx_text {
   color: var(--dhx-color-danger)
}

.dhx_form-group--state_error .dhx_combobox-input-box, .dhx_form-group--state_error .dhx_combobox-input-box:focus, .dhx_form-group--state_error .dhx_input, .dhx_form-group--state_error .dhx_input:focus {
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-color-danger-disabled)
}

.dhx_form-group--state_error .dhx_simplevault-files, .dhx_form-group--state_error .dhx_simplevault-files:focus, .dhx_form-group--state_error .dhx_simplevault__drop-area, .dhx_form-group--state_error .dhx_simplevault__drop-area:focus {
   border-color: var(--dhx-color-danger-disabled)
}

.dhx_form-group--state_success .dhx_input__caption, .dhx_form-group--state_success .dhx_label, .dhx_form-group--state_success .dhx_text {
   color: var(--dhx-color-success)
}

.dhx_form-group--state_success .dhx_combobox-input-box, .dhx_form-group--state_success .dhx_combobox-input-box:focus, .dhx_form-group--state_success .dhx_input, .dhx_form-group--state_success .dhx_input:focus {
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-color-success-disabled)
}

.dhx_form-group--state_success .dhx_simplevault__drop-area, .dhx_form-group--state_success .dhx_simplevault__drop-area:focus {
   border-top-color: var(--dhx-color-success-disabled);
   border-left-color: var(--dhx-color-success-disabled);
   border-right-color: var(--dhx-color-success-disabled)
}

.dhx_form-group--state_success .dhx_simplevault-files, .dhx_form-group--state_success .dhx_simplevault-files:focus {
   border-right-color: var(--dhx-color-success-disabled);
   border-left-color: var(--dhx-color-success-disabled);
   border-bottom-color: var(--dhx-color-success-disabled)
}

.dhx_form-group--label_sr .dhx_label, .dhx_form-group--label_sr .dhx_text {
   visibility: hidden;
   position: absolute;
   padding: 0;
   overflow: hidden;
   clip: rect(0,0,0,0);
   white-space: nowrap;
   border: 0
}

.dhx_form-group .dhx_combobox {
   margin: 0
}

.dhx_form-group .dhx_slider {
   padding-bottom: 0
}

.dhx_form-group .dhx_text {
   position: relative;
   flex: 0 1 auto;
   max-height: calc(var(--dhx-line-height-normal)*2);
   margin-right: 16px;
   margin-bottom: 0;
   text-align: right;
   width: 100%;
   margin-top: 6px;
   align-self: flex-start
}

.dhx_input {
   -webkit-appearance: none;
   appearance: none;
   display: block;
   width: 100%;
   height: auto;
   padding: 6px 8px;
   margin: 0;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   background-color: var(--dhx-background-secondary);
   background-clip: padding-box;
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-border-color);
   border: 0;
   border-radius: var(--dhx-border-radius);
   outline: 0;
   transition: border-color var(--dhx-transition-time) var(--dhx-transition-in),box-shadow var(--dhx-transition-time) var(--dhx-transition-in)
}

   .dhx_input::placeholder {
      color: var(--dhx-font-color-secondary)
   }

   .dhx_input--focus, .dhx_input:focus {
      box-shadow: var(--dhx-shadow-input-size) var(--dhx-color-primary-active)
   }

.dhx_input--icon-padding {
   padding-right: 26px
}

.dhx_input--textarea {
   max-width: 100%
}

.dhx_input--textinput {
   box-shadow: none;
   background: none;
   padding-left: 0
}

   .dhx_input--textinput:focus {
      box-shadow: none
   }

.dhx_input__wrapper {
   width: 100%;
   display: flex;
   flex-direction: column;
   position: relative
}

   .dhx_input__wrapper:before {
      color: var(--dhx-font-color-secondary);
      pointer-events: none;
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%)
   }

.dhx_input__container {
   width: 100%;
   display: inline-block;
   position: relative
}

.dhx_input__caption {
   left: 0;
   bottom: 0;
   max-width: 100%;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-small);
   font-weight: var(--dhx-font-weight-regular);
   line-height: var(--dhx-line-height-small);
   white-space: wrap;
   overflow: inherit;
   text-overflow: ellipsis;
   cursor: default
}

.dhx_input__caption, .dhx_input__icon {
   color: var(--dhx-font-color-secondary)
}

.dhx_input__icon {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 6px;
   z-index: 1;
   pointer-events: none
}

.dhx_input__icon--color-selected {
   border-radius: var(--dhx-border-radius)
}

   .dhx_input__icon--color-selected:after, .dhx_input__icon--color-selected:before {
      opacity: 0
   }

.dhx_widget .dhx_input__icon {
   line-height: 0
}

   .dhx_widget .dhx_input__icon:before {
      font-size: var(--dhx-icon-size-normal);
      line-height: var(--dhx-icon-size-normal)
   }

.dhx_label, .dhx_text {
   display: inline-block;
   vertical-align: middle;
   margin-bottom: 6px;
   padding: 0;
   width: auto;
   flex: 0 1 auto;
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-medium);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   white-space: nowrap;
   text-overflow: ellipsis;
   cursor: pointer;
   transition: color var(--dhx-transition-time) var(--dhx-transition-in),opacity var(--dhx-transition-time) var(--dhx-transition-in)
}

   .dhx_label:hover, .dhx_text:hover {
      opacity: .8;
      transition: color var(--dhx-transition-time) var(--dhx-transition-out),opacity var(--dhx-transition-time) var(--dhx-transition-out)
   }

.dhx_label__holder, .dhx_text__holder {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-right: 4px
}

.dhx_label--with-help, .dhx_text--with-help {
   display: flex;
   align-items: center
}

.dhx_label-help {
   color: var(--dhx-color-primary);
   text-align: center;
   -webkit-user-select: none;
   user-select: none;
   cursor: pointer
}

.utilityfocus .dhx_label-help:focus-visible {
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -1px
}

.dhx_text {
   font-weight: var(--dhx-font-weight-regular)
}

.dhx_checkbox {
   position: relative;
   display: inline-block;
   width: auto;
   padding-top: 0;
   cursor: pointer
}

.dhx_checkbox__holder {
   display: flex;
   align-items: center;
   white-space: nowrap
}

.dhx_checkbox__visual-input {
   display: block;
   border: 2px solid var(--dhx-font-color-secondary);
   min-width: var(--dhx-line-height-normal);
   min-height: var(--dhx-line-height-normal);
   max-width: var(--dhx-line-height-normal);
   max-height: var(--dhx-line-height-normal);
   background-color: var(--dhx-background-primary);
   border-radius: var(--dhx-border-radius);
   cursor: pointer
}

.dhx_checkbox .dhx_text {
   padding-left: 6px
}

.dhx_checkbox.dhx_form-group--inline .dhx_label, .dhx_checkbox .dhx_text {
   margin-bottom: 0;
   width: auto;
   cursor: pointer;
   margin-top: 0;
   justify-content: flex-end
}

.dhx_checkbox .dhx_input__caption {
   position: static;
   display: block;
   transform: none
}

.dhx_checkbox.dhx_form-group--inline {
   display: flex;
   align-items: center;
   white-space: nowrap
}

   .dhx_checkbox.dhx_form-group--inline .dhx_label {
      margin-top: 0
   }

.dhx_checkbox.dhx_form-group--hidden {
   display: none
}

.dhx_checkbox__input:disabled + * + .dhx_label, .dhx_checkbox__input:disabled + * + .dhx_text, .dhx_checkbox__input:disabled + .dhx_checkbox__visual-input {
   opacity: .6
}

.utilityfocus .dhx_checkbox__input:focus-visible + .dhx_checkbox__visual-input {
   border-color: var(--dhx-color-primary);
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -1px
}

.dhx_checkbox__input:checked + .dhx_checkbox__visual-input, .dhx_checkbox__input[data-dhx-checked=true] + .dhx_checkbox__visual-input {
   background-color: var(--dhx-color-primary);
   background-position: 50%;
   background-size: cover;
   border-color: var(--dhx-color-primary);
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIxIDdMOSAxOWwtNS41LTUuNSAxLjQxLTEuNDFMOSAxNi4xNyAxOS41OSA1LjU5IDIxIDd6Ii8+PC9zdmc+);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
}

.dhx_radiobutton {
   position: relative;
   display: flex;
   width: auto;
   padding-top: 0;
   cursor: pointer;
   white-space: nowrap;
   align-items: center
}

.dhx_radiobutton__visual-input {
   display: block;
   border: 2px solid var(--dhx-font-color-secondary);
   bottom: 4px;
   left: 0;
   min-width: var(--dhx-line-height-normal);
   min-height: var(--dhx-line-height-normal);
   max-width: var(--dhx-line-height-normal);
   max-height: var(--dhx-line-height-normal);
   background-color: var(--dhx-background-primary);
   border-radius: 50%
}

.dhx_radiobutton .dhx_text {
   padding-left: 6px
}

.dhx_radiobutton .dhx_label, .dhx_radiobutton .dhx_text {
   margin-bottom: 0;
   width: auto;
   cursor: pointer;
   margin-top: 0
}

.dhx_radiobutton .dhx_input__caption {
   position: static;
   display: block
}

.dhx_radiobutton__input:disabled + * + .dhx_label, .dhx_radiobutton__input:disabled + * + .dhx_text, .dhx_radiobutton__input:disabled + .dhx_radiobutton__visual-input {
   opacity: .6
}

.utilityfocus .dhx_radiobutton__input:focus-visible + .dhx_radiobutton__visual-input {
   border-color: var(--dhx-color-primary);
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -1px
}

.dhx_radiobutton__input:checked + .dhx_radiobutton__visual-input {
   background-color: var(--dhx-color-primary);
   border-color: var(--dhx-color-primary);
   box-shadow: inset 0 0 0 4px var(--dhx-background-primary)
}

.dhx_select {
   -webkit-appearance: none;
   appearance: none
}

   .dhx_select::-ms-expand {
      display: none
   }

.dhx_select__placeholder {
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary)
}

.dhx_select:focus + .dhx_select__placeholder {
   opacity: 0
}

.dhx_simplevault {
   border: none;
   border-radius: var(--dhx-border-radius);
   font-family: var(--dhx-font-family);
   line-height: var(--dhx-line-height-normal);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-regular);
   text-align: center;
   overflow: hidden;
   position: relative
}

.dhx_simplevault__drop-area {
   background-color: var(--dhx-background-secondary);
   border: var(--dhx-border);
   transition: all var(--dhx-transition-time) var(--dhx-transition-in);
   display: flex;
   height: 115px;
   width: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0 20px
}

.dhx_simplevault__drop-area--on-drag {
   border-style: dashed;
   transition: border var(--dhx-transition-time) var(--dhx-transition-out)
}

.dhx_simplevault__icon:before {
   font-size: 40px;
   color: var(--dhx-font-color-additional);
   transition: color var(--dhx-transition-time) var(--dhx-transition-in)
}

.dhx_simplevault__title {
   max-width: 100%
}

.dhx_simplevault__label {
   color: var(--dhx-color-primary);
   cursor: pointer
}

.dhx_simplevault--on-drag .dhx_simplevault-loader {
   opacity: 1;
   transform: translateY(0);
   transition: opacity var(--dhx-transition-time) var(--dhx-transition-in),transform var(--dhx-transition-time) var(--dhx-transition-in)
}

.dhx_simplevault-files {
   background-color: var(--dhx-background-secondary);
   border: var(--dhx-border);
   border-top: none;
   transition: all var(--dhx-transition-time) var(--dhx-transition-in);
   width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   max-height: calc(100% - 115px);
   height: calc(100% - 115px);
   overflow-y: auto
}

.dhx_simplevault-files__fixed {
   max-height: 276px
}

.dhx_simplevault-files__item {
   position: relative;
   font-family: var(--dhx-font-family);
   line-height: var(--dhx-line-height-normal);
   font-size: var(--dhx-font-size-normal);
   text-align: left;
   color: var(--dhx-font-color-primary);
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 8px 40px 8px 8px
}

   .dhx_simplevault-files__item:not(:last-child) {
      border-bottom: var(--dhx-border)
   }

.dhx_simplevault-files__item-name {
   word-break: break-word
}

.dhx_simplevault-files__delete {
   position: absolute;
   right: 4px;
   top: 50%;
   transform: translateY(-50%)
}

   .dhx_simplevault-files__delete .dxi {
      color: var(--dhx-font-color-secondary)
   }

.dhx_simplevault-loader {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   left: 1px;
   right: 1px;
   top: 1px;
   bottom: 1px;
   background-color: var(--dhx-background-additional);
   transform: translateY(100%);
   opacity: 0;
   will-change: transform;
   transition: 0ms;
   z-index: var(--dhx-z-index-up)
}

.utilityfocus .dhx_simplevault:focus-within {
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -1px
}

.dhx_avatar {
   position: relative;
   width: fit-content;
   height: fit-content;
   border: var(--dhx-border);
   border-radius: var(--dhx-border-radius);
   background-color: var(--dhx-background-secondary)
}

.dhx_avatar, .dhx_avatar__preview {
   display: flex;
   align-items: center;
   justify-content: center
}

.dhx_avatar__preview {
   width: 100%;
   height: 100%;
   flex-direction: column;
   color: var(--dhx-font-color-secondary);
   background-repeat: no-repeat;
   background-position: 50%;
   background-size: contain
}

   .dhx_avatar__preview-icon:before, .dhx_avatar__preview .dxi:before {
      color: var(--dhx-font-color-additional)
   }

.dhx_avatar__preview-placeholder {
   width: 100%;
   padding: 0 8px;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-small);
   line-height: var(--dhx-line-height-small);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center
}

.dhx_avatar__image {
   background-color: #000;
   -o-object-fit: contain;
   object-fit: contain;
   width: 100%;
   height: 100%
}

.dhx_avatar__cover {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   height: 100%;
   width: 100%;
   opacity: 0;
   background-color: var(--dhx-background-overlay);
   transition: all var(--dhx-transition-time) var(--dhx-transition-in)
}

.dhx_avatar__cover-icon {
   cursor: pointer;
   color: var(--dhx-color-gray-100)
}

.dhx_avatar__cover-upload {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   width: 100%
}

   .dhx_avatar__cover-upload .dhx_avatar__cover-icon:before {
      font-size: 32px
   }

.dhx_avatar__cover-remove {
   position: absolute;
   right: 2px;
   top: 2px;
   height: 32px;
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center
}

   .dhx_avatar__cover-remove:hover {
      background: var(--dhx-background-overlay-light);
      border-radius: 50%
   }

   .dhx_avatar__cover-remove .dhx_avatar__cover-icon {
      color: var(--dhx-color-danger)
   }

.dhx_avatar__cover-input {
   border: none;
   outline: none;
   width: 1px;
   height: 1px
}

.dhx_avatar:hover .dhx_avatar__cover {
   cursor: pointer;
   opacity: 1
}

.dhx_avatar-size--small {
   width: 60px;
   height: 60px
}

   .dhx_avatar-size--small .dhx_avatar__cover-icon:before, .dhx_avatar-size--small .dhx_avatar__preview-icon.dxi:before, .dhx_avatar-size--small .dhx_avatar__preview-icon:before {
      font-size: 20px
   }

   .dhx_avatar-size--small .dhx_avatar__cover-remove {
      height: 20px;
      width: 20px
   }

.dhx_avatar-size--medium {
   width: 90px;
   height: 90px
}

   .dhx_avatar-size--medium .dhx_avatar__preview-icon.dxi:before, .dhx_avatar-size--medium .dhx_avatar__preview-icon:before {
      font-size: 40px
   }

.dhx_avatar-size--large {
   width: 120px;
   height: 120px
}

   .dhx_avatar-size--large .dhx_avatar__preview-icon.dxi:before, .dhx_avatar-size--large .dhx_avatar__preview-icon:before {
      font-size: 40px
   }

   .dhx_avatar-size--large .dhx_avatar__preview-placeholder {
      font-size: var(--dhx-font-size-normal);
      line-height: var(--dhx-line-height-normal)
   }

.dhx_avatar--circle, .dhx_avatar--circle .dhx_avatar__cover, .dhx_avatar--circle .dhx_avatar__image, .dhx_avatar--circle .dhx_avatar__preview {
   border-radius: 50%
}

.dhx_avatar--on-drag .dhx_avatar__cover {
   opacity: 1
}

.dhx_avatar--on-drag .dhx_avatar__cover-remove {
   display: none
}

.utilityfocus .dhx_avatar:focus-within {
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -1px
}

.dhx_form-group--state_success .dhx_avatar {
   border-color: var(--dhx-color-success)
}

.dhx_form-group--state_error .dhx_avatar {
   border-color: var(--dhx-color-danger)
}

.dhx_toggle {
   cursor: pointer;
   padding: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-medium);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   background-color: var(--dhx-background-primary);
   border: var(--dhx-border);
   border-radius: var(--dhx-border-radius);
   outline: none;
   -webkit-user-select: none;
   user-select: none;
   white-space: nowrap
}

.dhx_toggle__icon, .dhx_toggle__text {
   touch-action: none;
   pointer-events: none
}

   .dhx_toggle__icon + .dhx_toggle__text {
      margin-left: 4px
   }

.dhx_toggle--selected {
   background-color: var(--dhx-background-additional);
   border-color: var(--dhx-background-additional)
}

.dhx_toggle--disabled {
   touch-action: none;
   pointer-events: none;
   color: var(--dhx-font-color-disabled)
}

.dhx_toggle--full {
   width: 100%
}

.dhx_toggle:hover {
   background-color: var(--dhx-background-secondary)
}

   .dhx_toggle:hover.dhx_toggle--selected {
      background-color: var(--dhx-background-additional)
   }

.utilityfocus .dhx_toggle:focus-visible {
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -1px
}

.dhx_toggle-group {
   display: flex;
   flex-wrap: nowrap
}

   .dhx_toggle-group:not(.dhx_toggle-group--segmented) .dhx_toggle {
      border-radius: 0
   }

      .dhx_toggle-group:not(.dhx_toggle-group--segmented) .dhx_toggle:not(.dhx_toggle--last) {
         border-right: 0
      }

   .dhx_toggle-group:not(.dhx_toggle-group--segmented) .dhx_toggle--first {
      border-top-left-radius: var(--dhx-border-radius);
      border-bottom-left-radius: var(--dhx-border-radius)
   }

   .dhx_toggle-group:not(.dhx_toggle-group--segmented) .dhx_toggle--last {
      border-top-right-radius: var(--dhx-border-radius);
      border-bottom-right-radius: var(--dhx-border-radius)
   }

.dhx_toggle-group--full .dhx_toggle {
   flex: 1 0 0
}

.dhx_form-group.dhx_form-group--toggle, .dhx_form-group.dhx_form-group--toggle-group, .dhx_slider {
   display: flex
}

.dhx_slider {
   position: relative;
   flex-direction: column;
   padding-bottom: 16px
}

.dhx_slider--label-inline {
   flex-direction: row;
   align-items: center
}

   .dhx_slider--label-inline .dhx_slider__label {
      text-align: right;
      flex: 0 0 auto;
      margin-right: 16px;
      margin-bottom: 0;
      max-width: 30%
   }

   .dhx_slider--label-inline .dhx_label--with-help {
      justify-content: flex-end
   }

   .dhx_slider--label-inline .dhx_slider__track-holder {
      width: 300%;
      flex: 0 1 auto
   }

.dhx_slider--label_sr .dhx_label {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0,0,0,0);
   white-space: nowrap;
   border: 0
}

.dhx_slider--mode_vertical {
   height: 100%;
   display: inline-flex
}

   .dhx_slider--mode_vertical .dhx_label, .dhx_slider--mode_vertical .dhx_text {
      display: inline-flex
   }

   .dhx_slider--mode_vertical .dhx_slider__label {
      align-self: flex-start
   }

   .dhx_slider--mode_vertical .dhx_slider__track-holder {
      height: 100%;
      display: flex;
      padding: 8px 0
   }

   .dhx_slider--mode_vertical .dhx_slider__track {
      align-self: stretch;
      padding: 0 8px
   }

      .dhx_slider--mode_vertical .dhx_slider__track:before {
         width: 2px;
         height: 100%
      }

   .dhx_slider--mode_vertical .dhx_slider__range {
      width: 2px;
      left: 50%;
      transform: translate(-50%)
   }

   .dhx_slider--mode_vertical .dhx_slider__thumb {
      left: 50%
   }

   .dhx_slider--mode_vertical .dhx_slider__tick {
      height: 1px;
      width: 4px
   }

      .dhx_slider--mode_vertical .dhx_slider__tick:not(:first-child) {
         transform: translateY(-.5px)
      }

   .dhx_slider--mode_vertical .dhx_slider__tick--major {
      width: 8px
   }

   .dhx_slider--mode_vertical .dhx_slider__tick-label {
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      padding-left: 2px
   }

.dhx_slider--disabled {
   opacity: .6;
   pointer-events: none;
   cursor: default
}

.dhx_slider--ticks .dhx_slider__ticks-holder {
   height: 4px
}

.dhx_slider--ticks.dhx_slider--mode_vertical .dhx_slider__ticks-holder {
   height: 100%;
   width: 4px
}

.dhx_slider__track-holder {
   position: relative;
   flex-grow: 1
}

.dhx_slider__track {
   position: relative;
   padding-top: 8px;
   padding-bottom: 8px;
   cursor: pointer;
   z-index: var(--dhx-z-index-up)
}

   .dhx_slider__track:before {
      content: "";
      display: block;
      height: 2px;
      background-color: var(--dhx-color-gray-300)
   }

.dhx_slider__thumb {
   position: absolute;
   top: 50%;
   transform: translate(-50%,-50%);
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: var(--dhx-color-primary);
   transition: transform .1s var(--dhx-transition-out),border-color .2s var(--dhx-transition-out),background-color .2s var(--dhx-transition-out);
   will-change: transform;
   cursor: pointer
}

   .dhx_slider__thumb:after, .dhx_slider__thumb:before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%) scale(0);
      border-radius: 50%;
      will-change: transform
   }

   .dhx_slider__thumb:before {
      width: 28px;
      height: 28px;
      opacity: .3
   }

   .dhx_slider__thumb:after, .dhx_slider__thumb:before {
      background-color: var(--dhx-color-primary);
      transition: transform .2s var(--dhx-transition-out),background-color .2s var(--dhx-transition-out)
   }

   .dhx_slider__thumb:after {
      width: 16px;
      height: 16px
   }

   .dhx_slider__thumb:focus, .dhx_slider__thumb:hover {
      outline: none
   }

      .dhx_slider__thumb:focus:before, .dhx_slider__thumb:hover:before {
         transform: translate(-50%,-50%) scale(1);
         transition: transform .2s var(--dhx-transition-in),background-color .2s var(--dhx-transition-in)
      }

   .dhx_slider__thumb--active, .dhx_slider__thumb:active {
      z-index: var(--dhx-z-index-up)
   }

      .dhx_slider__thumb--active:after, .dhx_slider__thumb:active:after {
         transform: translate(-50%,-50%) scale(1);
         transition: transform .2s var(--dhx-transition-in),background-color .2s var(--dhx-transition-in)
      }

.dhx_slider__thumb--nullable {
   background-color: var(--dhx-color-gray-300)
}

   .dhx_slider__thumb--nullable:after {
      width: 8px;
      height: 8px;
      transform: translate(-50%,-50%) scale(1);
      background: var(--dhx-background-primary)
   }

   .dhx_slider__thumb--nullable:before {
      background-color: var(--dhx-color-gray-300)
   }

.dhx_slider__thumb--disabled {
   background-color: var(--dhx-color-gray-500);
   border: 2px solid var(--dhx-color-white)
}

   .dhx_slider__thumb--disabled:after, .dhx_slider__thumb--disabled:before {
      display: none
   }

.dhx_slider__thumb-label {
   position: absolute;
   padding: 6px 12px;
   transform: translate(-50%,-50%);
   border-radius: var(--dhx-border-radius);
   background-color: var(--dhx-tooltip-background-dark);
   box-shadow: var(--dhx-border-shadow-normal);
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-regular);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-color-white);
   transition: opacity transform .01s var(--dhx-transition-in);
   pointer-events: none;
   z-index: var(--dhx-z-index-up)
}

.dhx_slider__thumb-label--active {
   z-index: var(--dhx-z-index-overlay-total)
}

.dhx_slider__range {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   height: 2px;
   background-color: var(--dhx-color-primary);
   pointer-events: none
}

.dhx_slider__ticks-holder {
   position: relative;
   -webkit-user-select: none;
   user-select: none
}

.dhx_slider__tick {
   position: absolute;
   top: 0;
   width: 1px;
   height: 4px;
   background-color: var(--dhx-color-gray-300)
}

   .dhx_slider__tick:not(:first-child) {
      transform: translateX(-.5px)
   }

.dhx_slider__tick--major {
   height: 8px
}

.dhx_slider__tick-label {
   position: absolute;
   top: 10px;
   transform: translateX(-50%);
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-s-tick-font-size);
   color: var(--dhx-font-color-primary);
   line-height: 1
}

.dhx_message-container {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   position: absolute;
   padding: 20px;
   max-height: 100%;
   overscroll-behavior: contain;
   width: auto;
   overflow: hidden;
   border: 2px solid transparent;
   z-index: var(--dhx-z-index-overlay-total)
}

   .dhx_message-container * {
      box-sizing: border-box
   }

.dhx_message-container--top-left {
   top: 0;
   left: 0
}

.dhx_message-container--top-right {
   top: 0;
   right: 0
}

.dhx_message-container--bottom-left {
   align-items: flex-start;
   bottom: 0;
   left: 0
}

.dhx_message-container--bottom-right {
   align-items: flex-start;
   bottom: 0;
   right: 0
}

.dhx_message-container--in-body {
   position: fixed
}

.dhx_message {
   display: flex;
   justify-content: space-between;
   width: 240px;
   flex-shrink: 0;
   padding: 12px;
   margin-bottom: 4px;
   margin-top: 4px;
   border-radius: var(--dhx-border-radius);
   box-shadow: var(--dhx-border-shadow-large);
   background-color: var(--dhx-background-primary);
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none
}

.dhx_message, .dhx_message__text {
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-medium);
   line-height: var(--dhx-line-height-normal);
   font-size: var(--dhx-font-size-normal);
   color: var(--dhx-font-color-primary)
}

.dhx_message__text {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word
}

.dhx_message__icon {
   align-self: center;
   padding-left: 8px;
   color: var(--dhx-font-color-secondary)
}

.dhx_message--error .dhx_message__icon, .dhx_message--error .dhx_message__text, .dhx_message--success .dhx_message__icon, .dhx_message--success .dhx_message__text {
   color: var(--dhx-font-color-contrast)
}

.dhx_message--error {
   background-color: var(--dhx-color-danger)
}

.dhx_message--success {
   background-color: var(--dhx-color-success)
}

.dhx_alert {
   display: flex;
   flex-direction: column;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 600px;
   max-width: 100%;
   padding: 24px;
   background: var(--dhx-background-primary);
   border-radius: var(--dhx-border-radius);
   box-shadow: var(--dhx-border-shadow-normal);
   will-change: transform;
   z-index: var(--dhx-z-index-overlay-total)
}

.dhx_alert__overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--dhx-background-overlay);
   z-index: calc(var(--dhx-z-index-overlay-total) - 1)
}

.dhx_alert__overlay-confirm {
   z-index: var(--dhx-z-index-overlay-total)
}

.dhx_alert__header {
   position: relative;
   margin-bottom: 20px;
   font-weight: var(--dhx-font-weight-medium);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary)
}

.dhx_alert__content, .dhx_alert__header {
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal)
}

.dhx_alert__content {
   height: 100%;
   font-weight: var(--dhx-font-weight-regular);
   color: var(--dhx-font-color-secondary);
   line-height: 1.3;
   overflow-y: auto;
   overflow-wrap: break-word;
   word-wrap: break-word
}

.dhx_alert__footer {
   margin-top: 20px;
   display: flex;
   justify-content: flex-start
}

.dhx_alert__footer--center {
   justify-content: center
}

.dhx_alert__footer--right {
   justify-content: flex-end
}

.dhx_alert__footer .dhx_button:not(:last-child) {
   margin-right: calc(var(--dhx-step-size)*4)
}

.dhx_tooltip {
   pointer-events: none;
   border-radius: var(--dhx-border-radius);
   background-color: var(--dhx-tooltip-background-dark);
   box-shadow: var(--dhx-border-shadow-normal);
   padding: 6px 12px;
   transition: opacity .01s ease,transform .01s ease;
   opacity: 0;
   z-index: var(--dhx-z-index-overlay);
   font-family: var(--dhx-font-family)
}

.dhx_tooltip--animate {
   opacity: 1;
   transition: opacity .15s ease-out
}

.dhx_tooltip--forced {
   opacity: 1
}

.dhx_tooltip--light {
   background-color: var(--dhx-tooltip-background-light)
}

   .dhx_tooltip--light .dhx_tooltip__text {
      color: var(--dhx-color-gray-700)
   }

.dhx_widget--fullscreen .dhx_tooltip {
   z-index: var(--dhx-z-index-overlay-total)
}

.dhx_tooltip__text {
   color: var(--dhx-color-white);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-medium);
   line-height: var(--dhx-line-height-normal)
}

.dhx_progress-bar {
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
   background-color: var(--dhx-background-overlay-light)
}

.dhx_progress-bar, .dhx_spinner {
   position: absolute;
   z-index: var(--dhx-z-index-overlay-total)
}

.dhx_spinner {
   top: 50%;
   left: 50%;
   width: 50px;
   height: 50px;
   transform: translate(-50%,-50%);
   transform-origin: center center;
   animation: rotate 2s linear infinite
}

   .dhx_spinner .path {
      fill: none;
      stroke: var(--dhx-color-primary);
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke-dasharray: 1,200;
      stroke-dashoffset: 0;
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite
   }

@keyframes rotate {
   to {
      transform: translate(-50%,-50%) rotate(1turn)
   }
}

@keyframes dash {
   0% {
      stroke-dasharray: 1,150;
      stroke-dashoffset: 0
   }

   50% {
      stroke-dasharray: 90,150;
      stroke-dashoffset: -35
   }

   to {
      stroke-dasharray: 90,150;
      stroke-dashoffset: -124
   }
}

.dhx_layout {
   position: relative;
   max-width: 100%;
   max-height: 100%;
   width: 100%;
   height: 100%;
   background-color: var(--dhx-background-primary)
}

.dhx_layout-columns {
   display: flex;
   flex-direction: row;
   overflow: hidden
}

.dhx_layout-rows {
   display: flex;
   flex-direction: column;
   overflow: hidden
}

.dhx_layout-cell--resizable:not(.scroll-view) > .dhx_layout-cell-content, .dhx_layout-cell--resizable:not(.scroll-view) > .dhx_layout-cell-content > .dhx_layout-cell-inner_html, .dhx_layout-cell--resizable div:not(.scroll-view) > .dhx_layout-cell-content, .dhx_layout-cell--resizable div:not(.scroll-view) > .dhx_layout-cell-content > .dhx_layout-cell-inner_html {
   overflow: auto
}

.dhx_layout-cell--start, .dhx_layout-columns--start, .dhx_layout-rows--start {
   justify-content: flex-start
}

.dhx_layout-cell--center, .dhx_layout-columns--center, .dhx_layout-rows--center {
   justify-content: center
}

.dhx_layout-cell--end, .dhx_layout-columns--end, .dhx_layout-rows--end {
   justify-content: flex-end
}

.dhx_layout-cell--between, .dhx_layout-columns--between, .dhx_layout-rows--between {
   justify-content: space-between
}

.dhx_layout-cell--around, .dhx_layout-columns--around, .dhx_layout-rows--around {
   justify-content: space-around
}

.dhx_layout-cell--evenly, .dhx_layout-columns--evenly, .dhx_layout-rows--evenly {
   justify-content: space-evenly
}

.dhx_layout-cell {
   position: relative;
   overflow: hidden;
   background-color: var(--dhx-background-primary);
   flex-grow: 0;
   flex-shrink: 0
}

.dhx_layout-cell--bordered {
   border: var(--dhx-border)
}

.dhx_layout-cell--border_top {
   border-top: var(--dhx-border)
}

.dhx_layout-cell--border_bottom {
   border-bottom: var(--dhx-border)
}

.dhx_layout-cell--border_left {
   border-left: var(--dhx-border)
}

.dhx_layout-cell--border_right {
   border-right: var(--dhx-border)
}

.dhx_layout-cell--border-shadow {
   border: 0;
   box-shadow: var(--dhx-border-shadow-small)
}

.dhx_layout-cell--no-border {
   border: 0
}

.dhx_layout-cell--no-border_top {
   border-top: 0
}

.dhx_layout-cell--no-border_bottom {
   border-bottom: 0
}

.dhx_layout-cell--no-border_left {
   border-left: 0
}

.dhx_layout-cell--no-border_right {
   border-right: 0
}

.dhx_layout-cell--flex {
   display: flex
}

.dhx_layout-cell--accordion > .dhx_layout-cell--collapsed {
   border-bottom: 0
}

.dhx_layout-cell--collapsed {
   overflow: hidden;
   background-color: var(--dhx-background-primary)
}

.dhx_layout-cell-content, .dhx_layout-cell-inner_html {
   height: 100%
}

.dhx_layout-cell-header {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   border-bottom: var(--dhx-border);
   padding: 8px 12px;
   background-color: var(--dhx-background-primary)
}

.dhx_layout-cell-header__title {
   margin: 0;
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   font-weight: var(--dhx-font-weight-medium);
   color: var(--dhx-font-color-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
   transition: color var(--dhx-transition-time) var(--dhx-transition-in)
}

.dhx_layout-cell-header__icon {
   margin-right: 16px
}

.dhx_layout-cell-header__image-wrapper {
   position: relative;
   width: 20px;
   height: 20px;
   margin-right: 8px
}

.dhx_layout-cell-header__image {
   position: absolute;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   -o-object-position: center center;
   object-position: center center;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   border-radius: 50%
}

.dhx_layout-cell-header__collapse-icon {
   margin-left: auto;
   color: var(--dhx-font-color-primary);
   transition: transform var(--dhx-transition-time) var(--dhx-transition-in),color var(--dhx-transition-time) var(--dhx-transition-in)
}

.dhx_layout-cell-header--collapseble {
   cursor: pointer
}

   .dhx_layout-cell-header--collapseble:focus-visible .dhx_layout-cell-header__collapse-icon, .dhx_layout-cell-header--collapseble:focus-visible .dhx_layout-cell-header__title, .dhx_layout-cell-header--collapseble:hover .dhx_layout-cell-header__collapse-icon, .dhx_layout-cell-header--collapseble:hover .dhx_layout-cell-header__title {
      color: var(--dhx-color-primary);
      transition: color var(--dhx-transition-time) var(--dhx-transition-out)
   }

   .dhx_layout-cell-header--collapseble:focus-visible, .dhx_layout-cell-header:focus {
      outline-width: 0
   }

.dhx_layout-cell-header--collapsed.dhx_layout-cell-header--col {
   border-bottom: 0;
   position: relative
}

   .dhx_layout-cell-header--collapsed.dhx_layout-cell-header--col .dhx_layout-cell-header__title {
      position: absolute;
      transform-origin: left;
      transform: rotate(90deg);
      bottom: -12px;
      left: 50%;
      padding-left: 8px
   }

.dhx_layout-resizer {
   position: relative;
   overflow: visible;
   text-align: center
}

   .dhx_layout-resizer .dhx_layout-resizer__icon {
      position: relative;
      z-index: var(--dhx-z-index-up)
   }

.dhx_layout-resizer--x {
   width: 0
}

   .dhx_layout-resizer--x .dhx_layout-resizer__icon {
      width: 0;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      color: var(--dhx-font-color-secondary);
      cursor: ew-resize
   }

      .dhx_layout-resizer--x .dhx_layout-resizer__icon:before {
         font-size: 16px
      }

.dhx_layout-resizer--y {
   height: 0
}

   .dhx_layout-resizer--y .dhx_layout-resizer__icon {
      width: 100%;
      height: 0;
      display: flex;
      justify-content: center;
      flex-direction: row;
      align-items: center;
      color: var(--dhx-font-color-secondary);
      cursor: ns-resize
   }

      .dhx_layout-resizer--y .dhx_layout-resizer__icon:before {
         font-size: 16px
      }

.dhx_layout-space {
   background: var(--dhx-background-secondary);
   border: none
}

   .dhx_layout-space.dhx_layout-columns > .dhx_layout-cell {
      margin-top: 12px;
      margin-left: 12px;
      margin-bottom: 12px;
      border: var(--dhx-border)
   }

      .dhx_layout-space.dhx_layout-columns > .dhx_layout-cell:last-of-type {
         margin-right: 12px
      }

   .dhx_layout-space.dhx_layout-rows > .dhx_layout-cell {
      margin-top: 12px;
      margin-left: 12px;
      margin-right: 12px;
      border: var(--dhx-border)
   }

      .dhx_layout-space.dhx_layout-rows > .dhx_layout-cell:last-of-type {
         margin-bottom: 12px
      }

   .dhx_layout-space > .dhx_layout-resizer--x .dhx_layout-resizer__icon {
      right: 1px
   }

   .dhx_layout-space > .dhx_layout-resizer--y .dhx_layout-resizer__icon {
      bottom: 1px
   }

.dhx_layout-wide {
   background: var(--dhx-background-secondary);
   border: none !important
}

   .dhx_layout-wide.dhx_layout-columns > .dhx_layout-cell {
      margin-right: 12px;
      border: var(--dhx-border)
   }

      .dhx_layout-wide.dhx_layout-columns > .dhx_layout-cell:last-of-type {
         margin-right: 0
      }

   .dhx_layout-wide.dhx_layout-rows > .dhx_layout-cell {
      margin-bottom: 12px;
      border: var(--dhx-border)
   }

      .dhx_layout-wide.dhx_layout-rows > .dhx_layout-cell:last-of-type {
         margin-bottom: 0
      }

   .dhx_layout-wide > .dhx_layout-resizer--x .dhx_layout-resizer__icon {
      right: 13px
   }

   .dhx_layout-wide > .dhx_layout-resizer--y .dhx_layout-resizer__icon {
      bottom: 13px
   }

.dhx_layout-line.dhx_layout-columns > .dhx_layout-cell {
   border-right: var(--dhx-border)
}

   .dhx_layout-line.dhx_layout-columns > .dhx_layout-cell:last-of-type {
      border-right: none
   }

.dhx_layout-line.dhx_layout-columns > .dhx_layout-wide {
   margin-left: -1px
}

   .dhx_layout-line.dhx_layout-columns > .dhx_layout-wide > .dhx_layout-cell:first-child {
      border-top: none
   }

   .dhx_layout-line.dhx_layout-columns > .dhx_layout-wide > .dhx_layout-cell:last-of-type {
      border-bottom: none
   }

.dhx_layout-line.dhx_layout-rows > .dhx_layout-cell {
   border-bottom: var(--dhx-border)
}

   .dhx_layout-line.dhx_layout-rows > .dhx_layout-cell:last-of-type {
      border-bottom: none
   }

.dhx_layout-line.dhx_layout-rows > .dhx_layout-wide {
   margin-top: -1px
}

   .dhx_layout-line.dhx_layout-rows > .dhx_layout-wide > .dhx_layout-cell:first-child {
      border-left: none
   }

   .dhx_layout-line.dhx_layout-rows > .dhx_layout-wide > .dhx_layout-cell:last-of-type {
      border-right: none
   }

.dhx_navbar-count {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-small);
   line-height: var(--dhx-line-height-large);
   color: var(--dhx-font-color-contrast);
   text-align: center;
   z-index: var(--dhx-z-index-up)
}

.dhx_navbar-count--absolute {
   margin-left: 0;
   position: absolute;
   top: -4px;
   top: -10px;
   right: -10px
}

.dhx_navbar-count--button-inline {
   margin-top: -4px;
   margin-bottom: -4px;
   margin-left: 12px
}

.dhx_navbar-count--overlimit {
   width: auto;
   border-radius: 22px;
   padding: 0 8px
}

.dhx_navbar-count--color_success {
   background-color: var(--dhx-color-success)
}

.dhx_navbar-count--color_danger {
   background-color: var(--dhx-color-danger)
}

.dhx_navbar-count--color_primary {
   background-color: var(--dhx-color-primary)
}

.dhx_navbar-count--color_secondary {
   background-color: var(--dhx-color-secondary)
}

.dhx_navbar {
   display: flex;
   flex-wrap: nowrap;
   margin: 0;
   padding: 0;
   width: 100%;
   list-style: none
}

   .dhx_navbar:focus {
      outline: none
   }

.dhx_navbar--horizontal {
   flex-direction: row;
   align-items: center
}

.dhx_navbar--vertical {
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: auto
}

.dhx_navbar .dhx_button--color_secondary.dhx_button--view_link .dhx_button__icon {
   color: var(--dhx-font-color-secondary)
}

.dhx_navbar-title {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   font-weight: var(--dhx-font-weight-medium)
}

.dhx_navbar-title--sidebar {
   display: block;
   padding: 12px
}

.dhx_navbar-title--ribbon {
   display: flex;
   align-items: center;
   min-height: 100%
}

.dhx_timepicker {
   width: 100%;
   padding-top: 30px;
   padding-bottom: 30px;
   min-width: 248px;
   background-color: var(--dhx-background-primary)
}

.dhx_timepicker--with-controls {
   padding-top: 4px;
   padding-bottom: 0
}

.dhx_timepicker > .dhx_layout-cell {
   padding-right: 20px;
   padding-left: 20px
}

.dhx_timepicker__inputs {
   text-align: center;
   margin-bottom: 16px;
   margin-top: 8px
}

.dhx_timepicker__close {
   min-height: 32px;
   display: flex;
   justify-content: flex-end;
   margin-bottom: 6px
}

.dhx_timepicker__button-close {
   text-transform: uppercase;
   transform: translateX(16px)
}

.dhx_timepicker__save {
   padding-bottom: 20px;
   min-height: 84px;
   display: flex;
   justify-content: center;
   align-items: center
}

.dhx_popup .dhx_timepicker {
   box-shadow: var(--dhx-border-shadow-normal);
   border: none
}

.dhx_timepicker-inputs {
   position: relative;
   display: inline-block
}

.dhx_timepicker-input {
   width: 48px;
   height: 38px;
   font-size: 30px;
   padding-bottom: 4px;
   color: var(--dhx-font-color-primary);
   line-height: 30px;
   text-align: center;
   outline: none;
   border: none;
   border-bottom: var(--dhx-border);
   transition: border-color var(--dhx-transition-time) var(--dhx-transition-in);
   background-color: transparent
}

   .dhx_timepicker-input:focus {
      border-bottom: 1px solid var(--dhx-color-primary);
      transition-timing-function: var(--dhx-transition-out)
   }

.dhx_timepicker-ampm {
   position: absolute;
   right: -32px;
   bottom: 8px;
   font-family: var(--dhx-font-family);
   color: var(--dhx-font-color-secondary);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-small);
   -webkit-user-select: none;
   user-select: none
}

.dhx_timepicker-delimer {
   position: relative;
   top: -2px;
   height: 30px;
   width: 8px;
   color: var(--dhx-font-color-primary);
   line-height: 30px;
   font-size: 30px
}

.dhx_timepicker .dhx_layout-cell {
   background-color: inherit
}

.dhx_calendar {
   display: flex;
   justify-content: flex-end;
   min-height: 258px;
   min-width: 248px;
   padding: 12px;
   background-color: var(--dhx-background-primary)
}

.dhx_calendar--with_timepicker {
   min-height: 310px
}

.dhx_calendar__wrapper {
   position: relative;
   z-index: var(--dhx-z-index-up);
   width: 100%;
   min-height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between
}

.dhx_calendar__dates-wrapper {
   position: relative;
   padding-left: 40px
}

.dhx_calendar__navigation {
   display: flex;
   align-self: stretch;
   justify-content: space-between;
   text-align: center;
   align-items: center;
   margin: -4px 2px 4px
}

.dhx_calendar__timepicker-button {
   margin-top: 8px
}

.dhx_calendar__actions {
   display: flex;
   justify-content: center
}

.dhx_calendar__week-numbers {
   position: absolute;
   left: 0;
   top: -4px;
   width: 32px;
   padding: 4px 0;
   background-color: var(--dhx-background-additional)
}

   .dhx_calendar__week-numbers:before {
      content: "#";
      display: block;
      margin-bottom: 8px;
      font-family: var(--dhx-font-family);
      font-size: var(--dhx-font-size-small);
      line-height: var(--dhx-line-height-small);
      color: var(--dhx-font-color-secondary);
      text-align: center
   }

.dhx_calendar__weekdays {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 0 0 8px
}

.dhx_calendar__days, .dhx_calendar__months {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between
}

.dhx_calendar__months, .dhx_calendar__years {
   margin-top: auto;
   margin-bottom: auto
}

.dhx_calendar__years {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between
}

.dhx_popup .dhx_calendar {
   box-shadow: var(--dhx-border-shadow-normal);
   border: none
}

.dhx_calendar-weekday {
   flex: 1 0 14%;
   font-size: var(--dhx-font-size-small);
   line-height: var(--dhx-line-height-small)
}

.dhx_calendar-week-number, .dhx_calendar-weekday {
   font-family: var(--dhx-font-family);
   color: var(--dhx-font-color-secondary);
   text-align: center
}

.dhx_calendar-week-number {
   margin-bottom: 12px;
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal)
}

   .dhx_calendar-week-number:last-child {
      margin-bottom: 0
   }

.dhx_calendar-week-number--hidden {
   opacity: 0;
   pointer-events: none
}

.dhx_calendar-day {
   position: relative;
   flex: 1 0 14%;
   margin-bottom: 12px;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   text-align: center;
   cursor: pointer
}

   .dhx_calendar-day:nth-last-child(-n+7) {
      margin-bottom: 0
   }

   .dhx_calendar-day:after, .dhx_calendar-day:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 28px;
      height: 28px;
      transform: translate(-50%,-50%);
      background-color: var(--dhx-background-additional);
      border-radius: 50%;
      opacity: 0;
      z-index: -1
   }

   .dhx_calendar-day:active, .dhx_calendar-day:focus {
      outline: none
   }

      .dhx_calendar-day:active:before, .dhx_calendar-day:focus:before, .dhx_calendar-day:hover:before {
         opacity: 1;
         transition: opacity var(--dhx-transition-time) var(--dhx-transition-out)
      }

.dhx_calendar-day--weekend {
   color: var(--dhx-color-primary)
}

.dhx_calendar-day--hidden {
   opacity: 0;
   pointer-events: none
}

.dhx_calendar-day--muffled {
   opacity: var(--dhx-s-calendar-muffled)
}

.dhx_calendar-day--disabled {
   color: var(--dhx-font-color-disabled);
   pointer-events: none
}

.dhx_calendar-day--weekend-disabled {
   pointer-events: none;
   color: var(--dhx-color-primary-disabled)
}

.dhx_calendar-day--in-range:after {
   opacity: 1;
   background-color: var(--dhx-color-primary-light-hover);
   border-radius: 0;
   width: 100%;
   z-index: -3
}

.dhx_calendar-day--selected {
   color: var(--dhx-color-white);
   position: relative;
   z-index: var(--dhx-z-index-up)
}

   .dhx_calendar-day--selected:before {
      opacity: 1;
      background-color: var(--dhx-color-primary)
   }

.dhx_calendar-day--selected-first:after {
   border-radius: 14px 0 0 14px
}

.dhx_calendar-day--selected-last:after {
   border-radius: 0 14px 14px 0
}

.dhx_calendar-day--first-date:after {
   width: 100%;
   opacity: 1;
   right: calc(-50% - 2px);
   border-radius: 0;
   border-top-left-radius: 32px;
   border-bottom-left-radius: 32px
}

.dhx_calendar-day--last-date:after {
   width: 100%;
   opacity: 1;
   right: calc(-50% + 2px);
   border-radius: 0;
   border-top-right-radius: 32px;
   border-bottom-right-radius: 32px
}

.dhx_calendar-day:nth-child(7n).dhx_calendar-day--first-date:after {
   width: 30px;
   right: calc(-50% + 1px)
}

.dhx_calendar-day:nth-child(7n+1).dhx_calendar-day--last-date:after {
   width: 30px;
   right: calc(-50% + 3px)
}

.dhx_calendar-month, .dhx_calendar-year {
   position: relative;
   flex: 1 0 25%;
   margin-bottom: 8px;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: 50px;
   color: var(--dhx-font-color-primary);
   text-align: center;
   cursor: pointer
}

   .dhx_calendar-month:nth-last-child(-n+4), .dhx_calendar-year:nth-last-child(-n+4) {
      margin-bottom: 0
   }

   .dhx_calendar-month:before, .dhx_calendar-year:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      display: block;
      width: 50px;
      height: 50px;
      background-color: var(--dhx-background-additional);
      border-radius: 50%;
      opacity: 0;
      transition: opacity var(--dhx-transition-time) var(--dhx-transition-in),background-color var(--dhx-transition-time) var(--dhx-transition-in);
      z-index: -1
   }

   .dhx_calendar-month:active, .dhx_calendar-month:focus, .dhx_calendar-year:active, .dhx_calendar-year:focus {
      outline: none
   }

      .dhx_calendar-month:active:before, .dhx_calendar-month:focus:before, .dhx_calendar-month:hover:before, .dhx_calendar-year:active:before, .dhx_calendar-year:focus:before, .dhx_calendar-year:hover:before {
         opacity: 1;
         transition: opacity var(--dhx-transition-time) var(--dhx-transition-out)
      }

   .dhx_calendar-month:hover:before, .dhx_calendar-year:hover:before {
      z-index: -2
   }

.dhx_calendar-month--selected, .dhx_calendar-year--selected {
   color: var(--dhx-background-primary)
}

   .dhx_calendar-month--selected:before, .dhx_calendar-year--selected:before {
      opacity: 1;
      transition: opacity var(--dhx-transition-time) var(--dhx-transition-in),background-color var(--dhx-transition-time) var(--dhx-transition-in);
      background-color: var(--dhx-color-primary)
   }

.dhx_chart {
   stroke-linecap: square;
   position: relative;
   height: 100%;
   background-color: var(--dhx-background-primary)
}

   .dhx_chart svg {
      vertical-align: top;
      overflow: visible
   }

   .dhx_chart .seria:focus, .dhx_chart circle:focus, .dhx_chart g:focus {
      outline: none
   }

   .dhx_chart .chart {
      transition: all .4s ease
   }

      .dhx_chart .chart:focus {
         outline: none
      }

      .dhx_chart .chart.donut, .dhx_chart .chart.pie, .dhx_chart .chart.pie3d, .dhx_chart .chart.treeMap {
         transition-property: none
      }

      .dhx_chart .chart.dhx_pie-transform-delay {
         transition-property: all
      }

   .dhx_chart.not-animate .chart, .dhx_chart.not-animate .tooltip-text {
      transition: none
   }

   .dhx_chart .figure {
      transition: fill,stroke .3s ease
   }

   .dhx_chart .active-figure {
      visibility: visible;
      transition: all .2s ease
   }

      .dhx_chart .active-figure.point-circle, .dhx_chart .active-figure.point-rect, .dhx_chart .active-figure.point-rhombus, .dhx_chart .active-figure.point-triangle {
         filter: url(#dropshadow);
         transition: all .3s ease
      }

   .dhx_chart .area {
      stroke-linecap: round
   }

   .dhx_chart .dash-line {
      stroke-dasharray: 4,6;
      stroke-linecap: round
   }

   .dhx_chart .hidden-line {
      stroke-opacity: 0
   }

   .dhx_chart .group-text, .dhx_chart .header-text, .dhx_chart .heat-day-text, .dhx_chart .heat-month-text, .dhx_chart .heat-year-text, .dhx_chart .legend-text, .dhx_chart .legend-tick, .dhx_chart .scale-text, .dhx_chart .scale-title {
      font-family: var(--dhx-font-family);
      font-weight: var(--dhx-font-weight-regular);
      font-size: var(--dhx-font-size-normal);
      fill: var(--dhx-font-color-secondary)
   }

   .dhx_chart text {
      text-anchor: middle;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility
   }

   .dhx_chart .start-text {
      text-anchor: start
   }

   .dhx_chart .end-text {
      text-anchor: end
   }

   .dhx_chart .group-text, .dhx_chart .heat-day-text, .dhx_chart .heat-month-text, .dhx_chart .legend-text {
      line-height: 18px
   }

   .dhx_chart .heat-year-text, .dhx_chart .legend-tick {
      line-height: 14px;
      font-size: var(--dhx-font-size-small)
   }

   .dhx_chart .header-text {
      font-weight: var(--dhx-font-weight-medium);
      fill: var(--dhx-font-color-primary)
   }

   .dhx_chart .scale-title {
      fill: var(--dhx-font-color-additional);
      line-height: var(--dhx-line-height-small)
   }

   .dhx_chart .heat-year-text {
      line-height: 16px
   }

   .dhx_chart .heat-month-text {
      line-height: 20px
   }

   .dhx_chart .heat-day-text {
      line-height: 16px
   }

   .dhx_chart .heat-positive {
      fill: var(--dhx-color-primary);
      stop-color: var(--dhx-color-primary)
   }

   .dhx_chart .heat-negative {
      fill: var(--dhx-color-danger);
      stop-color: var(--dhx-color-danger)
   }

   .dhx_chart .heat-neutral {
      fill: var(--dhx-color-gray-100);
      stop-color: var(--dhx-color-gray-100)
   }

   .dhx_chart .treeMap-header {
      fill: var(--dhx-background-secondary)
   }

      .dhx_chart .treeMap-header:hover {
         fill: var(--dhx-background-additional)
      }

   .dhx_chart .grid-line {
      stroke: var(--dhx-color-gray-100)
   }

   .dhx_chart .grid-line__active {
      stroke: var(--dhx-color-gray-300);
      stroke-width: 2px;
      stroke-opacity: 1
   }

   .dhx_chart .main-scale {
      stroke: var(--dhx-color-gray-300);
      stroke-width: 2px
   }

   .dhx_chart .radar-grid {
      stroke-dasharray: 4,6;
      stroke: var(--dhx-color-gray-300);
      stroke-linecap: round
   }

   .dhx_chart .zebra {
      fill-rule: evenodd;
      fill: var(--dhx-color-gray-100)
   }

   .dhx_chart .radar-scale, .dhx_chart .spec-grid-line {
      stroke: var(--dhx-color-gray-300)
   }

   .dhx_chart .spec-grid-line {
      stroke-linecap: round;
      stroke-dasharray: 4,6
   }

   .dhx_chart .bar-text {
      fill: var(--dhx-font-color-contrast);
      font-weight: var(--dhx-font-weight-medium);
      line-height: 14px
   }

   .dhx_chart .bar-text, .dhx_chart .radar-axis-text {
      font-family: var(--dhx-font-family);
      font-size: var(--dhx-font-size-small)
   }

   .dhx_chart .radar-axis-text {
      fill: var(--dhx-font-color-secondary)
   }

   .dhx_chart .legend-item {
      cursor: pointer
   }

      .dhx_chart .legend-item.not-active .figure {
         fill: var(--dhx-font-color-additional);
         fill-opacity: 1;
         stroke: var(--dhx-font-color-additional)
      }

         .dhx_chart .legend-item.not-active .figure.legend-circle, .dhx_chart .legend-item.not-active .figure.legend-rect {
            stroke: none
         }

            .dhx_chart .legend-item.not-active .figure.legend-circle.with-stroke, .dhx_chart .legend-item.not-active .figure.legend-rect.with-stroke {
               stroke: var(--dhx-font-color-additional)
            }

      .dhx_chart .legend-item.not-active .heat-day-text, .dhx_chart .legend-item.not-active .heat-month-text, .dhx_chart .legend-item.not-active .legend-text {
         fill: var(--dhx-font-color-additional)
      }

.dhx_chart_tooltip {
   border-radius: var(--dhx-border-radius);
   background-color: var(--dhx-tooltip-background-dark);
   font-family: var(--dhx-font-family);
   color: var(--dhx-color-white);
   box-shadow: var(--dhx-border-shadow-normal);
   padding: 6px 12px;
   transition: opacity .01s ease,transform .01s ease;
   z-index: var(--dhx-z-index-overlay);
   position: absolute;
   pointer-events: none
}

   .dhx_chart_tooltip svg {
      vertical-align: top;
      overflow: visible
   }

   .dhx_chart_tooltip.tooltip-text {
      font-size: 14px;
      line-height: 14px;
      font-family: var(--dhx-font-family);
      fill: var(--dhx-color-white)
   }

.dhx_chart_tooltip_line {
   display: flex;
   flex-direction: column
}

   .dhx_chart_tooltip_line .line-point {
      display: flex;
      align-items: center;
      padding: 6px
   }

      .dhx_chart_tooltip_line .line-point .dhx_line-point-text {
         margin-left: 12px
      }

.dhx_chart_tooltip__hidden {
   display: none
}

.dhx_chart_tooltip__visible {
   display: flex
}

.dhx_chart.tooltip-container {
   z-index: var(--dhx-z-index-overlay-total)
}

   .dhx_chart.tooltip-container svg {
      width: 4px;
      height: 4px
   }

.dhx_chart .active-tooltip {
   visibility: visible
}

.dhx_chart .pie-value {
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-regular);
   font-size: var(--dhx-font-size-normal);
   fill: var(--dhx-font-color-secondary)
}

.dhx_chart .pie-inner-value, .dhx_chart .treeMap-inner-value {
   fill: var(--dhx-font-color-contrast);
   pointer-events: none;
   font-weight: var(--dhx-font-weight-medium);
   line-height: 14px;
   font-size: var(--dhx-font-size-small);
   font-family: var(--dhx-font-family)
}

.dhx_chart .pie-value-connector {
   stroke: var(--dhx-font-color-additional);
   fill: none
}

.dhx_chart .donut-value-title {
   font-family: var(--dhx-font-family);
   fill: var(--dhx-font-color-secondary);
   font-size: var(--dhx-font-size-normal);
   line-height: 18px
}

.dhx_chart .donut-value {
   font-family: var(--dhx-font-family);
   fill: var(--dhx-font-color-primary);
   font-size: var(--dhx-font-size-small);
   line-height: 14px
}

.utilityfocus .dhx_chart:focus-visible, .utilityfocus .dhx_chart :focus-visible {
   outline: var(--dhx-color-focused) dashed 1px
}

.dhx_popup {
   position: fixed;
   box-sizing: border-box;
   animation: appear .2s ease-in-out forwards;
   background: var(--dhx-background-primary);
   will-change: transform;
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-medium);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary)
}

.dhx_popup, .dhx_popup--window_modal {
   z-index: var(--dhx-z-index-overlay-total)
}

.dhx_popup--window {
   z-index: calc(var(--dhx-z-index-overlay-total) - 1)
}

.dhx_popup--window_active {
   z-index: var(--dhx-z-index-overlay-total)
}

.dhx_popup.hide {
   animation: disappear .2s ease-in-out forwards
}

.dhx_popup:focus {
   outline: none
}

.dhx_popup-content:focus {
   outline: 1px solid var(--dhx-color-focused)
}

.dhx_widget--fullscreen .dhx_popup {
   z-index: var(--dhx-z-index-overlay-total)
}

@keyframes appear {
   0% {
      transform: translateY(20px);
      opacity: 0
   }

   to {
      transform: translateY(0);
      opacity: 1
   }
}

@keyframes disappear {
   0% {
      transform: translateY(0);
      opacity: 1
   }

   to {
      transform: translateY(20px);
      opacity: 0
   }
}

.dhx_colorpicker {
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-medium);
   overflow: hidden;
   border: var(--dhx-border);
   background-color: var(--dhx-background-primary);
   border-radius: var(--dhx-border-radius)
}

   .dhx_colorpicker, .dhx_colorpicker * {
      box-sizing: border-box
   }

.dhx_popup .dhx_colorpicker {
   box-shadow: var(--dhx-border-shadow-normal);
   border: none
}

.dhx_palette {
   overflow: hidden;
   width: 100%;
   height: 100%;
   margin: 0;
   white-space: nowrap;
   padding: 8px
}

.dhx_palette--custom {
   display: flex;
   flex-wrap: wrap;
   max-width: 236px
}

   .dhx_palette--custom.dhx_palette__row .dhx_palette__cell {
      margin-bottom: 0
   }

.dhx_palette__col {
   display: inline-block
}

   .dhx_palette__col:last-child .dhx_palette_cell {
      margin-right: 0
   }

.dhx_palette__row .dhx_palette__cell {
   display: inline-block;
   margin-bottom: 6px
}

   .dhx_palette__row .dhx_palette__cell:last-child {
      margin-right: 0
   }

.dhx_palette__row--last {
   margin-bottom: 0
}

.dhx_palette__cell {
   position: relative;
   width: 20px;
   height: 20px;
   margin: 0 2px 2px 0;
   vertical-align: top;
   border: 2px solid transparent
}

   .dhx_palette__cell, .dhx_palette__cell:after {
      transition: border var(--dhx-transition-time) var(--dhx-transition-in)
   }

      .dhx_palette__cell:after {
         content: "";
         display: block;
         position: absolute;
         top: -2px;
         right: -2px;
         bottom: -2px;
         left: -2px;
         border: 1px solid transparent
      }

      .dhx_palette__cell:last-child {
         margin-bottom: 0
      }

      .dhx_palette__cell--selected, .dhx_palette__cell:hover {
         border: 2px solid hsla(0,0%,100%,.6);
         transition: border var(--dhx-transition-time) var(--dhx-transition-out)
      }

         .dhx_palette__cell--selected:after, .dhx_palette__cell:hover:after {
            border: 1px solid rgba(0,0,0,.6);
            transition: border var(--dhx-transition-time) var(--dhx-transition-out)
         }

.dhx_colorpicker-custom-colors {
   font-size: 14px;
   color: var(--dhx-font-color-secondary)
}

.dhx_colorpicker-custom-colors__header {
   font-size: 14px;
   padding: 9px 0 4px;
   letter-spacing: -.2px;
   position: relative
}

.dhx_colorpicker-custom-colors__picker {
   display: inline-block;
   width: 20px;
   height: 20px;
   cursor: pointer;
   color: var(--dhx-font-color-secondary);
   box-shadow: inset 0 0 0 1px var(--dhx-font-color-secondary)
}

.dhx_colorpicker-picker__palette {
   position: relative;
   width: 100%;
   border-radius: var(--dhx-border-radius);
   overflow: hidden
}

   .dhx_colorpicker-picker__palette:before {
      content: "";
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-image: linear-gradient(0deg,#000,hsla(0,0%,100%,0));
      z-index: 2
   }

   .dhx_colorpicker-picker__palette:after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-image: linear-gradient(90deg,#fff,hsla(20,42%,65%,0));
      z-index: 1
   }

.dhx_colorpicker-picker__buttons {
   display: flex;
   padding: 12px 0 0;
   justify-content: flex-end
}

   .dhx_colorpicker-picker__buttons .dhx_button:first-child {
      margin-right: 4px
   }

.dhx_colorpicker-range {
   position: relative;
   width: 100%;
   height: 16px;
   margin: 4px 0 8px;
   border-radius: var(--dhx-border-radius)
}

.dhx_colorpicker-range--hue {
   background-image: linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)
}

.dhx_colorpicker-range__substrate:after, .dhx_colorpicker-range__substrate:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: var(--dhx-border-radius);
   background-image: repeating-linear-gradient(90deg,#d1d1d6,#d1d1d6 8px,transparent 0,transparent 16px);
   background-clip: content-box;
   background-origin: content-box
}

.dhx_colorpicker-range__substrate:before {
   padding-bottom: 8px;
   padding-left: 8px
}

.dhx_colorpicker-range__substrate:after {
   padding-top: 8px
}

.dhx_colorpicker-range__background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: var(--dhx-border-radius);
   box-shadow: inset 0 0 3px rgba(0,0,0,.3)
}

.dhx_colorpicker-range__grip {
   position: absolute;
   top: 0;
   width: 6px;
   height: 100%;
   border: 1px solid var(--dhx-color-white);
   background: transparent;
   box-shadow: var(--dhx-border-shadow-normal)
}

.dhx_colorpicker-range__grip--hue {
   left: 0
}

.dhx_colorpicker-range__grip--alpha {
   left: calc(100% - 6px)
}

.dhx_palette_grip {
   position: absolute;
   top: 0;
   left: 0;
   width: 10px;
   height: 10px;
   border: 1px solid var(--dhx-color-white);
   border-radius: 50%;
   background: transparent;
   box-shadow: var(--dhx-border-shadow-normal);
   z-index: 10
}

.dhx_colorpicker-value {
   display: flex;
   flex-direction: row;
   height: 32px;
   justify-content: space-between
}

.dhx_colorpicker-value__color {
   width: 100px;
   border: 1px solid transparent;
   border-radius: var(--dhx-border-radius);
   margin-right: 8px
}

.dhx_colorpicker-value__input-wrapper {
   position: relative;
   border: var(--dhx-border)
}

   .dhx_colorpicker-value__input-wrapper:before {
      position: absolute;
      height: 100%;
      line-height: 30px;
      color: var(--dhx-font-color-secondary);
      font-size: 15px
   }

.dhx_colorpicker-value__input-wrapper--hex {
   margin-left: auto
}

   .dhx_colorpicker-value__input-wrapper--hex:before {
      content: "#";
      left: 8px
   }

.dhx_colorpicker-value__input-wrapper--alpha {
   margin-left: 8px
}

   .dhx_colorpicker-value__input-wrapper--alpha:before {
      content: "%";
      right: 8px
   }

.dhx_colorpicker-value__input {
   height: 100%;
   background-color: var(--dhx-background-primary);
   line-height: 20px;
   font-size: 14px;
   color: var(--dhx-font-color-primary);
   border: none;
   border-radius: var(--dhx-border-radius);
   outline: none
}

.dhx_colorpicker-value__input--hex {
   padding: 0 0 0 24px
}

.dhx_colorpicker-value__input--alpha {
   width: 56px;
   padding: 0 24px 0 8px
}

.dhx_list {
   margin: 0;
   padding: 0;
   height: 100%;
   list-style: none;
   overflow: auto;
   max-height: 100%;
   background-color: var(--dhx-background-primary)
}

.dhx_list--scroll-view {
   display: flex;
   flex-direction: column;
   overflow: hidden
}

.dhx_list-item {
   overflow: hidden;
   position: relative;
   font-family: var(--dhx-font-family);
   padding: 8px 12px;
   border-bottom: var(--dhx-border);
   outline: none
}

.dhx_list-item--text {
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-regular);
   line-height: var(--dhx-line-height-normal);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-in),box-shadow var(--dhx-transition-time) var(--dhx-transition-in)
}

.dhx_list-item--selected {
   background-color: var(--dhx-background-secondary);
   box-shadow: inset 2px 0 0 0 var(--dhx-color-primary)
}

   .dhx_list-item--focus, .dhx_list-item--selected:hover, .dhx_list-item:hover {
      background-color: var(--dhx-background-additional);
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
   }

.dhx_list-item--drophere:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   background-color: var(--dhx-background-secondary);
   opacity: .6
}

.dhx_list-item--dragtarget {
   opacity: .6
}

.dhx_list-item--drag {
   cursor: grab
}

.dhx_list-item--empty {
   height: 37px
}

.dhx_list-input {
   width: 100%;
   padding-left: 5px
}

.utilityfocus .dhx_list-item:focus-visible, .utilityfocus .dhx_list:focus-visible {
   outline: 1px dashed --dhx-color-focused;
   outline-offset: -1px
}

.dhx_combobox {
   margin-bottom: 16px
}

.dhx_combobox__options {
   margin-top: 2px;
   width: 100%
}

.dhx_combobox--required:not(.dhx_combobox--label_sr) .dhx_label:not(.dhx_label--with-help) {
   position: relative
}

   .dhx_combobox--required:not(.dhx_combobox--label_sr) .dhx_label:not(.dhx_label--with-help):after {
      content: "*";
      display: inline-block;
      padding-left: 4px;
      color: var(--dhx-font-color-additional)
   }

.dhx_combobox--required:not(.dhx_combobox--label_sr) .dhx_label__holder {
   position: relative;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis
}

   .dhx_combobox--required:not(.dhx_combobox--label_sr) .dhx_label__holder:after {
      content: "*";
      display: inline-block;
      padding-left: 4px;
      color: var(--dhx-font-color-additional)
   }

.dhx_combobox--label_sr .dhx_label {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0,0,0,0);
   white-space: nowrap;
   border: 0
}

.dhx_combobox--label-inline {
   display: flex;
   align-items: center;
   width: 100%;
   position: relative
}

   .dhx_combobox--label-inline .dhx_combobox__label {
      flex: 0 0 auto;
      justify-content: flex-end;
      text-align: right;
      margin-right: 16px;
      margin-bottom: 0;
      max-width: 30%
   }

   .dhx_combobox--label-inline .dhx_combobox-input-box {
      flex: 0 1 auto;
      width: 300%
   }

.dhx_combobox--disabled {
   opacity: .6;
   pointer-events: none;
   cursor: default
}

.dhx_combobox .dhx_combobox-input__template + .dhx_combobox-input {
   opacity: 0
}

.dhx_combobox-input-box {
   position: relative;
   flex: 1;
   background-color: var(--dhx-background-secondary);
   background-clip: padding-box;
   border-radius: var(--dhx-border-radius);
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-border-color);
   transition: border-color var(--dhx-transition-time) var(--dhx-transition-out),box-shadow var(--dhx-transition-time) var(--dhx-transition-out)
}

.dhx_combobox-input-box--readonly, .dhx_combobox-input-box--readonly * {
   cursor: pointer
}

.dhx_combobox-input-box--disabled {
   cursor: not-allowed
}

   .dhx_combobox-input-box--disabled * {
      cursor: not-allowed;
      pointer-events: none
   }

.dhx_combobox-input-box--active, .dhx_combobox-input-box:focus-within {
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-color-primary)
}

.dhx_combobox-input-box--state_success {
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-color-success)
}

.dhx_combobox-input-box--state_error {
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-color-danger)
}

.dhx_combobox-input {
   min-height: 30px;
   display: block;
   width: 100%;
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   border: 0;
   -webkit-appearance: none;
   appearance: none;
   background-color: transparent
}

   .dhx_combobox-input::placeholder {
      color: var(--dhx-font-color-secondary)
   }

   .dhx_combobox-input:active, .dhx_combobox-input:focus {
      outline: none
   }

.dhx_combobox-input__wrapper {
   position: static;
   padding-bottom: 0
}

.dhx_combobox-input__icon {
   display: flex;
   align-items: center;
   cursor: pointer;
   flex: 0;
   position: absolute;
   top: 50%;
   right: 4px;
   transform: translateY(-50%);
   font-size: var(--dhx-icon-size-small);
   z-index: var(--dhx-z-index-up);
   color: var(--dhx-font-color-secondary)
}

.dhx_combobox-input__template {
   height: 100%;
   display: flex;
   align-items: center
}

.dhx_combobox-input-list-wrapper {
   height: 100%;
   width: 100%;
   overflow: hidden
}

.dhx_combobox-input-list {
   display: flex;
   flex-wrap: wrap;
   flex-flow: row wrap;
   list-style: none;
   margin: 0;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   min-height: 30px;
   max-height: 96px;
   width: calc(100% - 32px);
   overflow-y: scroll;
   padding: 0 41px 0 8px;
   box-sizing: content-box !important
}

.dhx_combobox-input-list__item {
   flex: 0 1 auto
}

.dhx_combobox-input-list__item--input {
   position: relative;
   flex: 1 0 auto
}

.dhx_combobox-tag {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   padding: 0 8px;
   margin-top: 2px;
   margin-bottom: 2px;
   border: var(--dhx-border);
   border-radius: 15px;
   background-color: var(--dhx-background-primary);
   margin-right: 8px
}

.dhx_combobox-tag__value {
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   white-space: nowrap
}

.dhx_combobox-tag__icon, .dhx_combobox-tag__image {
   margin-right: 4px
}

.dhx_combobox-tag__image {
   width: 16px;
   height: auto;
   -o-object-fit: contain;
   object-fit: contain;
   -o-object-position: center;
   object-position: center
}

.dhx_combobox-tag__action {
   height: 20px;
   margin-left: 4px;
   margin-right: -6px;
   color: var(--dhx-font-color-secondary);
   padding: 0;
   background-color: transparent;
   transition: color var(--dhx-transition-time) var(--dhx-transition-in)
}

   .dhx_combobox-tag__action:hover {
      color: var(--dhx-font-color-primary);
      transition: color var(--dhx-transition-time) var(--dhx-transition-out)
   }

.dhx_combobox-options {
   background-color: var(--dhx-background-secondary);
   border-radius: var(--dhx-border-radius);
   box-shadow: var(--dhx-border-shadow-normal)
}

.dhx_combobox-options-wrapper {
   display: flex;
   align-items: center
}

.dhx_combobox-options__icon {
   margin-right: 8px
}

.dhx_combobox-options__image {
   margin-right: 8px;
   width: 16px;
   height: auto;
   -o-object-fit: contain;
   object-fit: contain;
   -o-object-position: center;
   object-position: center
}

.dhx_combobox-options__item {
   display: flex;
   align-items: center;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   padding: 6px 8px;
   -webkit-user-select: none;
   user-select: none;
   cursor: pointer
}

.dhx_combobox-options__item--select-all {
   color: var(--dhx-color-primary);
   line-height: var(--dhx-line-height-normal);
   border-bottom: var(--dhx-border)
}

.dhx_combobox-options__action-create-option {
   word-break: break-all
}

.dhx_combobox-options .dhx_layout-cell {
   overflow: unset
}

.dhx_dataview {
   position: relative;
   overflow-y: auto;
   height: 100%;
   max-height: 100%;
   background-color: var(--dhx-background-primary)
}

.dhx_dataview--has-scroll .dhx_dataview-row:last-child .dhx_dataview-item:not(.dhx_dataview-item--with-gap) {
   border-bottom: 0
}

.dhx_dataview--scroll-view {
   overflow: hidden
}

.dhx_dataview-row {
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start
}

   .dhx_dataview-row .dhx_dataview-item:not(.dhx_dataview-item--with-gap) {
      border-top: 0
   }

.dhx_dataview-item {
   position: relative;
   flex: 0 1 auto;
   border: var(--dhx-border);
   padding: 8px;
   transition: box-shadow .2s ease-in
}

   .dhx_dataview-item:not(.dhx_dataview-item--with-gap) {
      border-left: 0
   }

.dhx_dataview-item--last-item-in-row:not(.dhx_dataview-item--with-gap) {
   border-right: 0
}

.dhx_dataview-item:focus {
   outline: none
}

.dhx_dataview-item:after {
   content: "";
   display: block;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   z-index: var(--dhx-z-index-up);
   border: 1px solid transparent;
   transition: opacity .2s ease-in-out,background-color .2s ease-in-out;
   pointer-events: none
}

.dhx_dataview-item--focus {
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-border-color-focused);
   transition: box-shadow .2s ease-out
}

.dhx_dataview-item--selected {
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-color-primary);
   transition: box-shadow .2s ease-out
}

.dhx_dataview-item--drophere:after {
   background-color: var(--dhx-background-secondary);
   opacity: .6
}

.dhx_dataview-item--dragtarget {
   opacity: .6
}

.dhx_dataview-item--drag {
   cursor: grab
}

.dhx_dataview-input {
   padding-left: 5px
}

.dhx_widget.dhx_form {
   overflow: auto
}

   .dhx_widget.dhx_form .dhx_layout-cell {
      overflow: unset
   }

   .dhx_widget.dhx_form .dhx_checkbox-group--container .dhx_layout-cell:last-child .dhx_checkbox, .dhx_widget.dhx_form .dhx_radio-group--container .dhx_layout-cell:last-child .dhx_radiobutton {
      margin-bottom: 0
   }

   .dhx_widget.dhx_form .dhx_form-group--disabled {
      opacity: .6;
      -webkit-user-select: none;
      user-select: none;
      pointer-events: none
   }

   .dhx_widget.dhx_form .dhx_form-group--simplevault {
      overflow-y: auto
   }

   .dhx_widget.dhx_form .dhx_form-group--container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: calc(100% - var(--dhx-line-height-small))
   }

      .dhx_widget.dhx_form .dhx_form-group--container .dhx_layout {
         overflow: unset
      }

      .dhx_widget.dhx_form .dhx_form-group--container.dhx_form-group--inline {
         flex-direction: row
      }

   .dhx_widget.dhx_form .dhx_layout-columns .dhx_form-element.dhx_form-element--fit-content {
      flex: 0 1 auto !important
   }

   .dhx_widget.dhx_form .dhx_layout-columns .dhx_button--full-gravity {
      flex: 1 1 auto
   }

   .dhx_widget.dhx_form .dhx_layout-rows .dhx_button--full-gravity {
      flex: 0 1 auto
   }

   .dhx_widget.dhx_form .dhx_checkbox-group--container .dhx_layout-columns label, .dhx_widget.dhx_form .dhx_radio-group--container .dhx_layout-columns label {
      margin-bottom: 0
   }

   .dhx_widget.dhx_form .dhx_form-group-fieldset {
      border: none;
      margin: 0;
      padding: 0
   }

   .dhx_widget.dhx_form .dhx_form-fieldset {
      width: 100%;
      margin: 0 0 16px;
      padding: 0 16px;
      border: var(--dhx-border);
      border-radius: var(--dhx-border-radius)
   }

   .dhx_widget.dhx_form .dhx_form-fieldset--disabled .dhx_form-fieldset-legend {
      color: var(--dhx-font-color-disabled)
   }

   .dhx_widget.dhx_form .dhx_form-fieldset-legend {
      padding: 0 8px;
      margin-bottom: 6px;
      font-family: var(--dhx-font-family);
      font-weight: var(--dhx-font-weight-medium);
      font-size: var(--dhx-font-size-large);
      line-height: var(--dhx-line-height-large);
      color: var(--dhx-font-color-primary)
   }

   .dhx_widget.dhx_form .dhx_form-fieldset-legend--left {
      text-align: left;
      margin-left: -8px
   }

   .dhx_widget.dhx_form .dhx_form-fieldset-legend--right {
      text-align: right;
      margin-right: -8px
   }

   .dhx_widget.dhx_form .dhx_form-fieldset-legend--center {
      text-align: center
   }

.dhx_grid-header-cell-text {
   height: 100%;
   padding: 0;
   width: 100%
}

.dhx_grid-header-cell-text_content {
   display: flex;
   align-items: center;
   height: 100%;
   width: 100%
}

.dhx_grid-header-cell-text_content-auto-height {
   overflow: hidden;
   white-space: pre-wrap;
   word-break: break-word
}

.dhx_header-wrapper.dhx_grid__rows_right--fixed .dhx_grid-footer-cell:not(.dhx_span-cell):last-child, .dhx_header-wrapper.dhx_grid__rows_right--fixed .dhx_grid-header-cell:not(.dhx_span-cell):last-child {
   border-right: var(--dhx-border)
}

.dhx_footer-wrapper, .dhx_header-wrapper {
   position: relative;
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-medium);
   color: var(--dhx-font-color-primary);
   z-index: calc(var(--dhx-z-index-force-up) + 11)
}

   .dhx_footer-wrapper.dhx_compatible-header, .dhx_header-wrapper.dhx_compatible-header {
      border-right: none
   }

   .dhx_footer-wrapper:last-child, .dhx_header-wrapper:last-child {
      border-bottom: none
   }

.dhx_footer-wrapper {
   overflow: hidden
}

.dhx_grid-header {
   position: relative;
   height: 100%;
   white-space: nowrap;
   z-index: var(--dhx-z-index-force-up)
}

   .dhx_grid-header.dhx_grid_fixed_left .dhx_grid-footer-cell, .dhx_grid-header.dhx_grid_fixed_left .dhx_grid-header-cell {
      border-left: var(--dhx-border)
   }

.dhx_grid-footer-cell, .dhx_grid-header-cell {
   position: relative;
   display: inline-flex;
   align-items: center;
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-regular);
   vertical-align: middle;
   height: 100%;
   white-space: nowrap;
   padding: 8px 12px;
   font-weight: var(--dhx-font-weight-medium);
   background-color: var(--dhx-s-grid-header-background);
   border-top: var(--dhx-border);
   border-bottom: var(--dhx-border);
   border-left: none;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: default;
   -webkit-user-select: none;
   user-select: none
}

   .dhx_grid-footer-cell:not(.dhx_cell_first), .dhx_grid-header-cell:not(.dhx_cell_first) {
      border-left: var(--dhx-border)
   }

   .dhx_grid-footer-cell:first-child, .dhx_grid-header-cell:first-child {
      border-left: none
   }

.dhx_grid-header-cell--sortable:hover .dhx_grid-sort-icon {
   opacity: 1
}

.dhx_grid-header-cell--sortable:hover:after, .dhx_grid-header-cell--sorted:after {
   content: "";
   display: block;
   width: 24px;
   position: absolute;
   top: 0;
   bottom: 0;
   background-color: inherit;
   opacity: .8;
   z-index: -1
}

.dhx_grid-header-cell--align_right {
   justify-content: flex-end
}

   .dhx_grid-header-cell--align_right.dhx_grid-header-cell--sortable .dhx_grid-header-cell-text {
      overflow: hidden
   }

   .dhx_grid-header-cell--align_right .dhx_grid-sort-icon {
      left: 4px
   }

   .dhx_grid-header-cell--align_right .dhx_grid-sort-counter {
      left: 18px
   }

   .dhx_grid-header-cell--align_right:after {
      left: 0
   }

   .dhx_grid-header-cell--align_right .dhx_grid-header-cell-text_content {
      justify-content: flex-end
   }

.dhx_grid-header-cell--align_center .dhx_grid-header-cell-text_content {
   justify-content: center
}

.dhx_grid-header-cell--align_center, .dhx_grid-header-cell--align_left {
   justify-content: flex-start
}

   .dhx_grid-header-cell--align_center.dhx_grid-header-cell--sortable .dhx_grid-header-cell-text, .dhx_grid-header-cell--align_left.dhx_grid-header-cell--sortable .dhx_grid-header-cell-text {
      overflow: hidden
   }

   .dhx_grid-header-cell--align_center .dhx_grid-sort-icon, .dhx_grid-header-cell--align_left .dhx_grid-sort-icon {
      right: 4px
   }

   .dhx_grid-header-cell--align_center .dhx_grid-sort-counter, .dhx_grid-header-cell--align_left .dhx_grid-sort-counter {
      right: 18px
   }

   .dhx_grid-header-cell--align_center:after, .dhx_grid-header-cell--align_left:after {
      right: 0
   }

.dhx_grid-footer-cell:last-child, .dhx_grid-header-cell:last-child {
   overflow: hidden
}

.dhx_grid-sort-icon {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
   color: var(--dhx-font-color-secondary);
   z-index: var(--dhx-z-index-up);
   transition: all var(--dhx-transition-time) var(--dhx-transition-in);
   cursor: pointer
}

   .dhx_grid-sort-icon:before {
      font-size: 16px;
      display: inline-block;
      transition: all .2s ease-out;
      transform: scaleY(1)
   }

.dhx_grid-sort-icon--asc, .dhx_grid-sort-icon--desc {
   opacity: 1;
   color: var(--dhx-color-primary);
   transition: color var(--dhx-transition-time) var(--dhx-transition-out)
}

   .dhx_grid-sort-icon--desc:before {
      transform: scaleY(-1)
   }

.dhx_grid-sort-counter {
   position: absolute;
   top: calc(50% - 8px);
   transform: translateY(-50%);
   z-index: calc(var(--dhx-z-index-up) + 1);
   font-size: calc(var(--dhx-font-size-small) - 2px);
   color: var(--dhx-color-primary)
}

.dhx_cell_empty {
   border-top: none
}

.dhx_header-row {
   white-space: nowrap;
   background: var(--dhx-background-secondary)
}

   .dhx_header-row:last-child .dhx_cell-first {
      border-bottom: 1px solid var(--dhx-background-secondary)
   }

   .dhx_header-row:first-child .dhx_grid-footer-cell, .dhx_header-row:first-child .dhx_grid-header-cell {
      border-top: none
   }

   .dhx_header-row:not(:last-child) .dhx_grid-footer-cell, .dhx_header-row:not(:last-child) .dhx_grid-header-cell {
      border-bottom: none
   }

.dhx_grid-custom-content-cell {
   padding: 5px
}

   .dhx_grid-custom-content-cell .dhx_boolean-cell, .dhx_grid-custom-content-cell .dhx_date-cell, .dhx_grid-custom-content-cell .dhx_number-cell, .dhx_grid-custom-content-cell .dhx_percent-cell, .dhx_grid-custom-content-cell .dhx_string-cell {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center
   }

   .dhx_grid-custom-content-cell:has(.dhx_grid-footer-cell-text) {
      padding: 8px 12px
   }

.dhx_footer-spans .dhx_span-cell:focus-visible, .dhx_grid-footer-cell .dhx_grid-custom-content-cell:focus-visible, .dhx_grid-footer-cell:focus-visible, .dhx_grid-header-cell .dhx_grid-custom-content-cell:focus-visible, .dhx_grid-header-cell:focus-visible, .dhx_header-spans .dhx_span-cell:focus-visible {
   outline: 2px solid var(--dhx-color-primary) !important;
   outline-offset: -2px;
   z-index: 1
}

.dhx_header-spans {
   position: absolute;
   top: 0
}

   .dhx_header-spans .dhx_span-cell {
      background: var(--dhx-s-grid-header-background);
      font-weight: var(--dhx-font-weight-medium);
      border-bottom: var(--dhx-border)
   }

.dhx_header-fixed-cols {
   background: var(--dhx-background-secondary);
   z-index: var(--dhx-z-index-overlay)
}

   .dhx_header-fixed-cols.dhx_grid__cols_left--fixed .dhx_last-column-cell {
      border-right: var(--dhx-border)
   }

   .dhx_header-fixed-cols .dhx_grid-footer-cell:first-child, .dhx_header-fixed-cols .dhx_grid-header-cell:first-child {
      border-left: none
   }

   .dhx_header-fixed-cols.dhx_grid__cols_right--fixed .dhx_grid-footer-cell:not(.dhx_grid-footer-cell):first-child, .dhx_header-fixed-cols.dhx_grid__cols_right--fixed .dhx_grid-header-cell:not(.dhx_grid-footer-cell):first-child {
      border-left: var(--dhx-border)
   }

.dhx_resizer_grip {
   position: absolute;
   z-index: 100;
   top: 0;
   display: flex;
   width: 9px;
   height: 100%;
   cursor: col-resize;
   justify-content: center
}

.dhx_resizer_grip--right {
   right: -5px
}

.dhx_resizer_grip--left {
   left: -5px
}

.dhx_resizer_grip:active .dhx_resizer_grip_line, .dhx_resizer_grip:hover .dhx_resizer_grip_line {
   opacity: 1
}

.dhx_resizer_grip:active {
   width: 200px
}

.dhx_resizer_grip--right:active {
   right: -100.5px
}

.dhx_resizer_grip--left:active {
   left: -100.5px
}

.dhx_resizer_grip .dhx_resizer_grip_line {
   z-index: 100;
   background-color: var(--dhx-color-gray-300);
   width: 1px;
   height: 100%;
   transition: all .2s;
   pointer-events: none;
   opacity: 0
}

.dhx_resizer_grip .dhx_header_fixed_cols .dhx_header_row {
   border: none
}

.dhx_grid-header-drop-area {
   position: relative
}

.dhx_grid-header-drop-area--left:before, .dhx_grid-header-drop-area--right:before {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   background-color: var(--dhx-color-primary)
}

.dhx_grid-header-drop-area--left:before {
   left: 0;
   border-left: 1px solid var(--dhx-color-primary)
}

.dhx_grid-header-drop-area--right:before {
   right: 0;
   border-right: 1px solid var(--dhx-color-primary)
}

.dhx_footer-wrapper.dhx_grid__rows_right--fixed .dhx_grid-footer-cell:last-child {
   border-right: var(--dhx-border)
}

.dhx_grid-footer {
   position: relative;
   background-color: var(--dhx-background-secondary)
}

   .dhx_grid-footer.dhx_grid_fixed_left .dhx_grid-footer-cell {
      border-left: var(--dhx-border)
   }

.dhx_grid-footer-cell {
   border-top: var(--dhx-border);
   padding: 8px 12px;
   overflow: hidden
}

   .dhx_grid-footer-cell .dhx_grid-footer-cell-text {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      overflow: hidden
   }

   .dhx_grid-footer-cell:after {
      display: none
   }

   .dhx_grid-footer-cell .dhx_date-cell, .dhx_grid-footer-cell .dhx_date-cell .dhx_grid-footer-cell-text, .dhx_grid-footer-cell .dhx_number-cell, .dhx_grid-footer-cell .dhx_number-cell .dhx_grid-footer-cell-text, .dhx_grid-footer-cell .dhx_percent-cell, .dhx_grid-footer-cell .dhx_percent-cell .dhx_grid-footer-cell-text {
      text-align: right;
      justify-content: flex-end
   }

   .dhx_grid-footer-cell.dhx_string-cell, .dhx_grid-footer-cell.dhx_string-cell .dhx_grid-footer-cell-text {
      text-align: left;
      justify-content: flex-start
   }

   .dhx_grid-footer-cell.dhx_grid-header-cell--align_center .dhx_grid-header-cell-text_content {
      justify-content: center
   }

   .dhx_grid-footer-cell.dhx_align-right .dhx_grid-footer-cell-text {
      justify-content: flex-end
   }

   .dhx_grid-footer-cell.dhx_align-center .dhx_grid-footer-cell-text {
      justify-content: center
   }

   .dhx_grid-footer-cell.dhx_align-left .dhx_grid-footer-cell-text {
      justify-content: flex-start
   }

.dhx_footer-row {
   white-space: nowrap;
   background: var(--dhx-background-secondary)
}

   .dhx_footer-row:last-child .dhx_cell-first {
      border-bottom: 1px solid var(--dhx-background-secondary)
   }

   .dhx_footer-row .dhx_grid-footer-cell {
      border-bottom: none
   }

   .dhx_footer-fixed-cols .dhx_footer-row:last-of-type .dhx_grid-footer-cell, .dhx_footer-row:last-child .dhx_grid-footer-cell {
      border-bottom: var(--dhx-border)
   }

.dhx_footer-spans .dhx_span-row .dhx_span-cell {
   background: var(--dhx-s-grid-header-background);
   font-weight: var(--dhx-font-weight-medium);
   border-top: var(--dhx-border) !important;
   border-right: none !important
}

.dhx_footer-spans .dhx_span-row:last-child .dhx_span-cell {
   border-bottom: none !important
}

.dhx_footer-spans .dhx_grid-header-cell--align_center .dhx_grid-header-cell-text_content {
   justify-content: center
}

.dhx_grid-less-width :not(.dhx_grid__cols_left--fixed) .dhx_footer-spans .dhx_span-cell.dhx_last-column-cell, .dhx_grid__cols_left--fixed .dhx_footer-spans .dhx_span-cell.dhx_last-column-cell, .dhx_grid__contains_cols_right--fixed .dhx_grid-body .dhx_footer-spans .dhx_span-cell.dhx_last-column-cell {
   border-right: var(--dhx-border) !important
}

.dhx_grid__cols_right--fixed .dhx_footer-spans .dhx_span-cell.dhx_first-column-cell {
   border-left: var(--dhx-border)
}

.dhx_footer-fixed-cols {
   background: var(--dhx-background-secondary);
   z-index: var(--dhx-z-index-overlay);
   padding-bottom: var(--dhx-border-width)
}

   .dhx_footer-fixed-cols.dhx_grid__cols_left--fixed .dhx_last-column-cell {
      border-right: var(--dhx-border)
   }

   .dhx_footer-fixed-cols.dhx_grid__cols_right--fixed .dhx_grid-footer-cell:first-child {
      border-left: var(--dhx-border)
   }

.dhx_grid-less-width .dhx_footer-fixed-cols .dhx_footer-row:last-of-type .dhx_grid-footer-cell, .dhx_grid-less-width .dhx_footer-fixed-cols .dhx_footer-row:last-of-type .dhx_grid-footer-cell.dhx_grid-footer-at-bottom, .dhx_grid-less-width .dhx_footer-row:last-child .dhx_grid-footer-cell {
   border-bottom: none
}

.dhx_grid-less-height .dhx_footer-fixed-cols .dhx_footer-row:last-of-type .dhx_grid-footer-cell {
   border-bottom: var(--dhx-border)
}

.dhx_grid_data {
   position: relative;
   top: -1px
}

   .dhx_grid_data.dhx_grid_fixed_left .dhx_grid-cell {
      border-left: var(--dhx-border)
   }

.dhx_grid-row {
   width: 100%;
   white-space: nowrap;
   overflow: hidden
}

.dhx_grid_subrow {
   z-index: calc(var(--dhx-z-index-force-up) + 3);
   border-top: var(--dhx-border)
}

.dhx_grid_subrow__container {
   position: absolute
}

.dhx_grid_subrow__data {
   position: absolute;
   top: -1px;
   left: 0
}

.dhx_grid-cell {
   cursor: default;
   font-size: var(--dhx-font-size-normal);
   color: var(--dhx-font-color-primary);
   position: relative;
   display: inline-flex;
   align-items: center;
   padding: 0 12px;
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-regular);
   vertical-align: middle;
   height: 100%;
   white-space: nowrap;
   border-top: var(--dhx-border);
   border-left: var(--dhx-border);
   overflow: hidden
}

.dhx_grid-cell--draggable {
   opacity: .6;
   background-color: var(--dhx-background-secondary)
}

.dhx_grid-cell--drag {
   cursor: grab
}

.dhx_grid-cell:where(:first-child) {
   border-left: var(--dhx-border-width) solid transparent
}

.dhx_grid-cell--first {
   border-top: none
}

.dhx_grid-cell--title {
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-regular);
   color: var(--dhx-font-color-primary);
   justify-content: flex-start;
   border-bottom: none
}

.dhx_grid-cell--after-title, .dhx_grid-cell--title {
   border-top: var(--dhx-border)
}

.dhx_grid-cell__editable {
   padding-right: 0;
   padding-left: 0
}

.dhx_grid-cell__content_html-enable {
   white-space: pre
}

.dhx_grid-cell__content {
   width: 100%;
   height: 100%;
   overflow: hidden;
   display: flex;
   align-items: center
}

.dhx_grid-cell__content_auto-height {
   overflow: hidden;
   white-space: pre-wrap;
   word-break: break-word
}

.dhx_date-cell, .dhx_date-cell .dhx_grid-cell__content, .dhx_number-cell, .dhx_number-cell .dhx_grid-cell__content, .dhx_percent-cell, .dhx_percent-cell .dhx_grid-cell__content {
   text-align: right;
   justify-content: flex-end
}

.dhx_string-cell, .dhx_string-cell .dhx_grid-cell__content {
   text-align: left;
   justify-content: flex-start
}

.dhx_tree-cell {
   position: relative;
   display: inline-flex;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   color: var(--dhx-font-color-primary);
   font-weight: var(--dhx-font-weight-regular);
   vertical-align: middle;
   height: 100%;
   width: 100%;
   align-items: center;
   white-space: nowrap;
   overflow: hidden;
   padding: 0 12px 0 2px
}

   .dhx_tree-cell:has(.dhx_cell-editor) {
      padding: 0
   }

.dhx_tree-cell_auto-height {
   overflow: hidden;
   white-space: pre-wrap;
   word-break: break-word
}

.dhx_tree-cell_group-title .dhx_tree-cell {
   font-weight: var(--dhx-font-weight-medium)
}

.dhx_tree-cell_group-counter {
   color: var(--dhx-font-color-secondary)
}

.dhx_tree-cell:not(.dhx_grid-expand-cell) .dhx_cell-editor {
   padding-left: 2px
}

.dhx_tree-cell.dhx_grid-expand-cell {
   display: inline-flex;
   padding-left: 0
}

.dhx_tree-cell .dhx_grid-expand-cell-icon {
   display: inline-flex;
   width: auto;
   height: 100%;
   font-size: 14px;
   cursor: pointer
}

   .dhx_tree-cell .dhx_grid-expand-cell-icon:before {
      display: flex;
      justify-content: center;
      flex-direction: column
   }

.dhx_align-left, .dhx_align-left .dhx_grid-cell__content {
   justify-content: flex-start !important;
   text-align: left !important
}

.dhx_align-center, .dhx_align-center .dhx_grid-cell__content {
   justify-content: center !important;
   text-align: center !important
}

.dhx_align-right, .dhx_align-right .dhx_grid-cell__content {
   justify-content: flex-end !important;
   text-align: right !important
}

.dhx_grid-fixed-cols-wrap, .dhx_grid-fixed-data-rows-wrap {
   position: absolute;
   top: 0;
   left: 0;
   background: var(--dhx-background-primary);
   overflow: hidden;
   z-index: calc(var(--dhx-z-index-force-up) + 1)
}

.dhx_grid-fixed-data-rows-wrap {
   border: none;
   margin-top: -1px;
   border-bottom: var(--dhx-border);
   z-index: calc(var(--dhx-z-index-force-up) + 3)
}

.dhx_grid-fixed-cols {
   position: absolute;
   top: 0
}

   .dhx_grid-fixed-cols .dhx_grid-cell__editable:last-child {
      padding-right: 1px
   }

.dhx_grid-less-height .dhx_grid-fixed-cols .dhx_grid-row:last-of-type {
   border-bottom: var(--dhx-border)
}

.dhx_grid-selection {
   position: absolute;
   top: 0;
   left: 0;
   z-index: calc(var(--dhx-z-index-force-up) + 2)
}

.dhx_grid-selected-row {
   background-color: transparent;
   pointer-events: none
}

   .dhx_grid-selected-row:after {
      content: "";
      width: 100%;
      height: 100%;
      background: var(--dhx-s-grid-selection-background);
      opacity: .08
   }

.dhx_grid-selected-cell {
   border: 2px solid var(--dhx-color-primary);
   background-color: transparent;
   pointer-events: none
}

[role=gridcell]:focus-visible {
   outline: none
}

.utilityfocus [role=gridcell]:focus-visible {
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -2px
}

.dhx_grid-resize-line {
   position: absolute;
   width: 1px;
   background: var(--dhx-color-gray-300);
   z-index: var(--dhx-z-index-force-up)
}

.dhx_cell-editor {
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-regular);
   width: 100%;
   height: 100%;
   text-align: inherit;
   color: var(--dhx-font-color-primary);
   border: none;
   border-radius: 0;
   background: transparent;
   outline: none
}

.dhx_cell-editor, .dhx_cell-editor__combobox .dhx_combobox-input-box {
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-color-primary)
}

.dhx_cell-editor__input {
   padding: 0 12px
}

.dhx_cell-editor__input--not-valid {
   color: var(--dhx-color-danger)
}

.dhx_cell-editor__textarea, .dhx_cell-editor__textarea_constant-height {
   overflow: hidden;
   white-space: pre-wrap;
   word-break: break-word;
   resize: none;
   padding: 10px 12px;
   line-height: var(--dhx-line-height-normal)
}

.dhx_cell-editor__textarea_constant-height {
   overflow-y: auto
}

.dhx_cell-editor__select {
   padding: 0 8px
}

.dhx_cell-editor__checkbox {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   cursor: pointer
}

.dhx_grid__cols-border--frozen {
   width: 1px;
   height: 100%
}

.dhx_grid__cols-border--frozen, .dhx_grid__rows-border--frozen {
   position: absolute;
   top: 0;
   background: var(--dhx-border-color);
   z-index: 999999
}

.dhx_grid__rows-border--frozen {
   height: 1px;
   left: 0;
   width: 100%
}

.dhx_grid__rows_bottom--fixed .dhx_grid-cell {
   border-top: none;
   border-bottom: var(--dhx-border)
}

.dhx_grid__contains_cols_right--fixed .dhx_grid_data .dhx_grid-cell:last-child {
   border-right: var(--dhx-border)
}

.dhx_grid__contains_rows_bottom--fixed .dhx_data-wrap {
   margin-bottom: -1px
}

.dhx_grid__contains_rows_bottom--fixed .dhx_grid-fixed-cols .dhx_grid-row:last-of-type, .dhx_grid__contains_rows_bottom--fixed .dhx_grid_data .dhx_grid-row:last-child {
   border-bottom: var(--dhx-border)
}

.dhx_span-cell {
   position: relative;
   display: inline-flex;
   align-items: center;
   padding: 0 12px;
   font-family: var(--dhx-font-family);
   font-weight: var(--dhx-font-weight-regular);
   vertical-align: middle;
   height: 100%;
   white-space: nowrap;
   border-left: var(--dhx-border);
   overflow: hidden;
   position: absolute;
   height: auto;
   font-weight: var(--dhx-font-weight-medium);
   border-top: var(--dhx-border);
   border-bottom: none;
   z-index: var(--dhx-z-index-force-up);
   color: var(--dhx-font-color-primary);
   line-height: normal;
   background: var(--dhx-background-primary)
}

   .dhx_span-cell.dhx_grid__span_bottom--part-fixed {
      border-bottom: var(--dhx-border)
   }

   .dhx_span-cell.dhx_grid__span_bottom--all-fixed {
      border-top: none
   }

.dhx_span-cell--title {
   color: var(--dhx-font-color-secondary)
}

.dhx_span-cell-content {
   width: 100%
}

.dhx_span-cell.dhx_span__editable {
   padding: 0
}

.dhx_span-cell.dhx_grid-footer-cell, .dhx_span-cell.dhx_grid-header-cell {
   padding: 8px 12px
}

.dhx_span-expand-cell {
   display: inline-flex;
   padding-left: 0
}

.dhx_span-expand-cell-icon {
   display: inline-flex;
   width: auto;
   height: 100%;
   font-size: 14px;
   cursor: pointer
}

   .dhx_span-expand-cell-icon:before {
      display: flex;
      justify-content: center;
      flex-direction: column
   }

.dhx_span-row .dhx_first-column-cell {
   border-left: none
}

.dhx_span-row .dhx_span-cell .dhx_grid-footer-cel:not(.dhx_grid-footer-at-bottom), .dhx_span-row:first-child .dhx_span-cell {
   border-top: none
}

.dhx_grid-less-width .dhx_span-row .dhx_last-column-cell, .dhx_grid__rows_right--fixed .dhx_span-row .dhx_last-column-cell {
   border-right: var(--dhx-border)
}

.dhx_span-spans {
   position: absolute;
   top: 0;
   left: 0
}

   .dhx_span-spans .dhx_span-cell {
      font-weight: var(--dhx-font-weight-regular);
      justify-content: flex-start;
      white-space: normal;
      border-right: none
   }

      .dhx_span-spans .dhx_span-cell.dhx_grid__span_right--before-fixed {
         border-right: var(--dhx-border)
      }

      .dhx_span-spans .dhx_span-cell.dhx_span-first-row {
         border-top: none
      }

      .dhx_span-spans .dhx_span-cell.dhx_grid__span_bottom--last-row {
         border-bottom: none
      }

      .dhx_span-spans .dhx_span-cell.dhx_span-first-col {
         border-left: none
      }

      .dhx_span-spans .dhx_span-cell:focus {
         outline: none
      }

   .dhx_span-spans .dhx_span-string-cell {
      justify-content: flex-start
   }

   .dhx_span-spans .dhx_span-number-cell {
      justify-content: flex-end
   }

.dhx_grid {
   display: grid;
   grid-template-areas: "group-panel group-panel" "drag-panel content";
   grid-template-rows: auto 1fr;
   grid-template-columns: auto 1fr;
   position: relative;
   height: 100%;
   width: 100%;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-regular);
   line-height: var(--dhx-line-height-normal);
   background: var(--dhx-background-primary);
   overflow: hidden
}

.dhx_grid_border {
   border-bottom: var(--dhx-border) !important
}

.dhx_grid-content {
   grid-area: content;
   position: relative;
   border: var(--dhx-border);
   background: var(--dhx-background-primary)
}

.dhx_grid-focus-sentinel {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   opacity: 0;
   pointer-events: none
}

.dhx_grid-less-width .dhx_grid-cell:last-child, .dhx_grid_border .dhx_grid-cell:last-child {
   border-right: var(--dhx-border)
}

.dhx_grid-less-width .dhx_grid-fixed-cols.dhx_grid__cols_left--fixed .dhx_grid-cell:last-child, .dhx_grid-less-width .dhx_grid__rows_right--fixed .dhx_grid-cell:last-child, .dhx_grid_border .dhx_grid-fixed-cols.dhx_grid__cols_left--fixed .dhx_grid-cell:last-child, .dhx_grid_border .dhx_grid__rows_right--fixed .dhx_grid-cell:last-child {
   border-right: none
}

.dhx_grid-less-width .dhx_grid-footer-cell:last-child, .dhx_grid-less-width .dhx_grid-header-cell:last-child, .dhx_grid_border .dhx_grid-footer-cell:last-child, .dhx_grid_border .dhx_grid-header-cell:last-child {
   border-right: var(--dhx-border)
}

.dhx_grid-less-width .dhx_grid-header-cell.dhx_span-cell, .dhx_grid-less-width .dhx_span-cell.dhx_grid-footer-cell, .dhx_grid_border .dhx_grid-header-cell.dhx_span-cell, .dhx_grid_border .dhx_span-cell.dhx_grid-footer-cell {
   border-right: none
}

.dhx_grid-less-width .dhx_grid_footer_cell:last-child, .dhx_grid-less-width .dhx_last-column-cell, .dhx_grid-less-width .dhx_last-column-cell.dhx_span-cell, .dhx_grid-less-width .dhx_span-last-col, .dhx_grid_border .dhx_grid_footer_cell:last-child, .dhx_grid_border .dhx_last-column-cell, .dhx_grid_border .dhx_last-column-cell.dhx_span-cell, .dhx_grid_border .dhx_span-last-col {
   border-right: var(--dhx-border)
}

.dhx_grid-less-height.dhx_grid-full-width .dhx_grid-cell:last-child, .dhx_grid-less-height.dhx_grid-full-width .dhx_grid-footer-cell:last-child, .dhx_grid-less-height.dhx_grid-full-width .dhx_grid-header-cell:last-child {
   border-right: none
}

.dhx_grid-less-height .dhx_footer-row:last-child .dhx_grid-footer-cell, .dhx_grid-less-height .dhx_grid-row:last-of-type {
   border-bottom: var(--dhx-border)
}

.dhx_grid-less-height .dhx_footer-row:first-child .dhx_grid-footer-cell:not(.dhx_grid-footer-at-bottom) {
   border-top: none
}

.dhx_grid-less-height .dhx_span-row:last-child .dhx_span-cell {
   border-bottom: var(--dhx-border)
}

.dhx_grid-less-height .dhx_span-row:first-child .dhx_span-cell:not(.dhx_grid-footer-at-bottom) {
   border-top: none !important
}

.dhx_grid-less-height .dhx_data-wrap {
   margin-bottom: 0
}

.dhx_grid-less-width .dhx_footer-row:last-child .dhx_grid-footer-cell.dhx_grid-footer-at-bottom {
   border-bottom: none
}

.dhx_grid-body {
   overflow: auto
}

.dhx_data-wrap, .dhx_grid-body {
   position: relative;
   width: 100%;
   height: 100%
}

.dhx_data-wrap {
   overflow: hidden
}

.dhx_grid-draggable-item {
   position: absolute;
   -webkit-user-select: none;
   user-select: none;
   pointer-events: none;
   z-index: calc(var(--dhx-z-index-overlay-total) + 1);
   border: var(--dhx-border);
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-medium);
   line-height: var(--dhx-line-height-normal);
   box-shadow: var(--dhx-border-shadow-small);
   background: var(--dhx-background-primary);
   padding: 8px 12px
}

   .dhx_grid-draggable-item * {
      box-sizing: border-box
   }

.dhx_drop-area--not-allowed .dhx_grid-draggable-item {
   color: var(--dhx-color-danger)
}

.dhx_grid-filter__label {
   display: block;
   width: 100%;
   height: 100%;
   position: relative
}

   .dhx_grid-filter__label:before {
      color: var(--dhx-font-color-secondary);
      pointer-events: none;
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10
   }

.dhx_grid-filter {
   height: 100%;
   padding: 0 28px 0 4px;
   color: var(--dhx-font-color-primary);
   background: var(--dhx-background-primary);
   border-radius: 2px;
   outline: none;
   position: relative
}

   .dhx_grid-filter::-ms-expand {
      display: none
   }

.dhx_grid-filter-clear {
   cursor: pointer;
   pointer-events: auto
}

.dhx_grid-cell .dhx_combobox-input-box, .dhx_grid-footer-cell .dhx_combobox-input-box, .dhx_grid-header-cell .dhx_combobox-input-box {
   height: 100%;
   padding: 0 12px;
   color: var(--dhx-font-color-primary);
   background: var(--dhx-background-primary);
   border-radius: 2px;
   outline: none;
   position: relative
}

   .dhx_grid-cell .dhx_combobox-input-box::-ms-expand, .dhx_grid-footer-cell .dhx_combobox-input-box::-ms-expand, .dhx_grid-header-cell .dhx_combobox-input-box::-ms-expand {
      display: none
   }

.dhx_grid-cell .dhx_combobox, .dhx_grid-footer-cell .dhx_combobox, .dhx_grid-header-cell .dhx_combobox {
   margin: 0;
   height: 100%;
   width: 100%
}

   .dhx_grid-cell .dhx_combobox .dhx_combobox-input-list, .dhx_grid-footer-cell .dhx_combobox .dhx_combobox-input-list, .dhx_grid-header-cell .dhx_combobox .dhx_combobox-input-list {
      height: 100%;
      min-height: 100%;
      max-height: 100%;
      padding-left: 0;
      padding-right: 24px;
      border: none;
      width: 100%
   }

      .dhx_grid-cell .dhx_combobox .dhx_combobox-input-list .dhx_combobox-input, .dhx_grid-footer-cell .dhx_combobox .dhx_combobox-input-list .dhx_combobox-input, .dhx_grid-header-cell .dhx_combobox .dhx_combobox-input-list .dhx_combobox-input {
         height: 100%;
         min-height: 100%
      }

.dhx_grid-cell .dhx_list-item, .dhx_grid-footer-cell .dhx_list-item, .dhx_grid-header-cell .dhx_list-item {
   padding: 7px 12px
}

.dhx_grid-cell .dhx_combobox .dhx_combobox-input-list-wrapper {
   height: calc(100% - 2px);
   padding-top: 1px;
   padding-bottom: 1px
}

   .dhx_grid-cell .dhx_combobox .dhx_combobox-input-list-wrapper .dhx_combobox-input-list .dhx_combobox-tag {
      margin-top: 4px;
      margin-bottom: 4px;
      height: 30px
   }

.dhx_grid-drop {
   position: absolute;
   z-index: calc(var(--dhx-z-index-force-up) + 5)
}

.dhx_grid-drop, .dhx_grid-drop-line {
   top: 0;
   left: 0;
   -webkit-user-select: none;
   user-select: none;
   pointer-events: none
}

.dhx_grid-drop-line {
   position: relative;
   touch-action: none;
   background-color: var(--dhx-border-color-focused)
}

.dhx_grid_block-selection {
   top: 0;
   left: 0;
   z-index: calc(var(--dhx-z-index-force-up) + 5)
}

.dhx_grid_block-selection, .dhx_grid_block-selection-area {
   position: absolute;
   -webkit-user-select: none;
   user-select: none
}

.dhx_grid_block-selection-area {
   touch-action: none;
   pointer-events: none;
   border: var(--dhx-border-width) solid var(--dhx-color-primary);
   background-color: var(--dhx-color-primary-light-hover)
}

.dhx_grid_block-selection-handle {
   position: absolute;
   width: calc(var(--dhx-step-size)*3);
   height: calc(var(--dhx-step-size)*3);
   border-radius: 50%;
   border: 2px solid var(--dhx-color-primary);
   background-color: var(--dhx-color-primary);
   cursor: crosshair
}

.dhx_grid_block-selection-handle-area {
   position: absolute;
   touch-action: none;
   -webkit-user-select: none;
   user-select: none;
   pointer-events: none;
   border: 1px dashed var(--dhx-color-secondary)
}

.dhx_grid_block-selection-handle-area--top {
   border-bottom: none
}

.dhx_grid_block-selection-handle-area--bottom {
   border-top: none
}

.dhx_grid_block-selection-handle-area--right {
   border-left: none
}

.dhx_grid_block-selection-handle-area--left {
   border-right: none
}

.dhx_grid_block-selection-start-cell {
   position: absolute;
   touch-action: none;
   -webkit-user-select: none;
   user-select: none;
   pointer-events: none;
   border: 2px solid var(--dhx-color-primary);
   background: none
}

.dhx_grid-group_panel {
   grid-area: group-panel;
   padding: 0 12px;
   display: flex;
   align-items: center;
   justify-content: start;
   border: var(--dhx-border);
   border-bottom: none;
   background-color: var(--dhx-s-grid-header-background);
   overflow-x: auto
}

.dhx_grid-group_title {
   min-width: fit-content;
   font-weight: var(--dhx-font-weight-medium)
}

.dhx_grid-group_drop-area {
   padding: 0 8px;
   display: flex;
   align-items: center
}

.dhx_grid-group_drop-area-placeholder, .dhx_grid-group_item {
   color: var(--dhx-font-color-secondary)
}

.dhx_grid-group_item {
   position: relative;
   height: 24px;
   padding: 0 8px 0 12px;
   display: flex;
   align-items: center;
   border-radius: 14px;
   border: var(--dhx-border);
   background-color: var(--dhx-background-primary)
}

.dhx_grid-group_item--drop {
   opacity: .5
}

.dhx_grid-group_item-label {
   padding: 0 4px;
   -webkit-user-select: none;
   user-select: none;
   white-space: nowrap
}

.dhx_grid-group_item-remove {
   cursor: pointer
}

.dhx_grid-group_item-sort {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   opacity: 0;
   color: var(--dhx-font-color-secondary);
   z-index: var(--dhx-z-index-up);
   cursor: pointer
}

   .dhx_grid-group_item-sort:before {
      font-size: 16px;
      display: inline-block;
      transform: scaleY(1)
   }

.dhx_grid-group_item-sort--asc, .dhx_grid-group_item-sort--desc {
   opacity: 1;
   color: var(--dhx-color-primary)
}

   .dhx_grid-group_item-sort--desc:before {
      transform: scaleY(-1)
   }

.dhx_grid-group_item-unsorted {
   opacity: 1
}

.dhx_grid-group_item .dhx_grid-sort-counter {
   left: 8px;
   top: 50%
}

.dhx_grid-group_chain {
   display: flex;
   align-items: center;
   width: var(--dhx-icon-size-normal);
   height: var(--dhx-icon-size-normal);
   color: var(--dhx-font-color-secondary)
}

.dhx_grid-drag-panel {
   grid-area: drag-panel;
   overflow: hidden;
   z-index: var(--dhx-z-index-overlay);
   border-top: var(--dhx-border);
   border-bottom: var(--dhx-border);
   border-left: var(--dhx-border)
}

.dhx_grid-drag-panel_header {
   border-bottom: var(--dhx-border);
   background: var(--dhx-s-grid-header-background)
}

.dhx_grid-drag-panel_footer {
   position: sticky;
   bottom: 0;
   background: var(--dhx-s-grid-header-background);
   border-top: var(--dhx-border)
}

.dhx_grid-drag-panel_footer--at-bottom {
   position: absolute;
   border-top: var(--dhx-border);
   border-bottom: var(--dhx-border);
   border-right: var(--dhx-border);
   z-index: calc(var(--dhx-z-index-overlay) + 3)
}

.dhx_grid-drag-panel_main {
   overflow: hidden
}

.dhx_grid-drag-panel_item {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   border-bottom: var(--dhx-border)
}

   .dhx_grid-drag-panel_item:last-child {
      border-bottom: none
   }

.dhx_grid-drag-panel_content {
   position: relative;
   background: var(--dhx-background-primary)
}

.dhx_grid-drag-panel_content--fixed {
   position: absolute;
   z-index: calc(var(--dhx-z-index-overlay) + 2)
}

.dhx_grid-drag-panel--less-height .dhx_grid-drag-panel_footer:not(.dhx_grid-drag-panel_footer--at-bottom) {
   border-top: none;
   border-bottom: var(--dhx-border)
}

.dhx_grid-drag-panel--less-height .dhx_grid-drag-panel_item:last-child {
   border-bottom: var(--dhx-border)
}

.dhx_grid-drag-panel--drag-not-allowed .dhx_grid-drag-panel_item {
   cursor: not-allowed
}

.dhx_grid-drag-panel .dhx_grid-drag-panel_content--fixed .dhx_grid-drag-panel_item {
   border-bottom: var(--dhx-border);
   border-right: var(--dhx-border)
}

   .dhx_grid-drag-panel .dhx_grid-drag-panel_content--fixed .dhx_grid-drag-panel_item:first-child {
      border-top: var(--dhx-border)
   }

.dhx_menu-nav {
   display: flex;
   flex-wrap: nowrap;
   margin: 0;
   padding: 0;
   width: 100%;
   list-style: none;
   overflow-x: auto;
   background-color: var(--dhx-background-primary)
}

.dhx_menu-nav__item--separator {
   pointer-events: none;
   width: 1px;
   min-width: 1px;
   background-color: var(--dhx-border-color);
   margin-top: 8px;
   margin-bottom: 8px
}

.dhx_menu-nav__item--spacer {
   pointer-events: none;
   flex: 1 0 auto
}

.dhx_nav-menu-button {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 8px 12px;
   font-weight: var(--dhx-font-weight-medium);
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   background-color: transparent;
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-in)
}

   .dhx_nav-menu-button--active:not(:disabled), .dhx_nav-menu-button:active:not(:disabled), .dhx_nav-menu-button:hover:not(:disabled) {
      background-color: var(--dhx-background-additional);
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
   }

   .dhx_nav-menu-button--disabled, .dhx_nav-menu-button:disabled {
      opacity: .8;
      pointer-events: auto;
      cursor: default
   }

      .dhx_nav-menu-button--disabled *, .dhx_nav-menu-button:disabled * {
         color: var(--dhx-font-color-disabled)
      }

.dhx_menu {
   padding: 0;
   margin: 0;
   background: var(--dhx-background-primary);
   list-style: none;
   border-radius: var(--dhx-border-radius);
   box-shadow: var(--dhx-border-shadow-normal);
   overflow: hidden;
   z-index: calc(var(--dhx-z-index-overlay-total) - 1)
}

   .dhx_menu:focus {
      outline: none
   }

.dhx_menu-item {
   min-width: 180px
}

.dhx_menu-item--separator {
   pointer-events: none;
   align-self: stretch;
   height: 1px;
   min-height: 1px;
   margin: 2px 8px;
   background-color: var(--dhx-border-color)
}

.dhx_menu-item--spacer {
   pointer-events: none;
   height: 16px
}

.dhx_menu-item--left-gap .dhx_menu-button {
   padding-left: 38px
}

.dhx_menu-button {
   display: flex;
   width: 100%;
   justify-content: space-between;
   padding: 8px;
   text-align: left;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-regular);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   background-color: transparent;
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-in)
}

   .dhx_menu-button--active:not(:disabled), .dhx_menu-button:active:not(:disabled), .dhx_menu-button:focus:not(:disabled), .dhx_menu-button:hover:not(:disabled) {
      background-color: var(--dhx-background-additional);
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
   }

   .dhx_menu-button--disabled, .dhx_menu-button:disabled {
      opacity: .8;
      pointer-events: auto;
      cursor: default
   }

      .dhx_menu-button--disabled *, .dhx_menu-button:disabled * {
         color: var(--dhx-font-color-disabled)
      }

.dhx_menu-button__icon {
   color: var(--dhx-font-color-secondary)
}

.dhx_widget .dhx_menu-button__icon {
   line-height: 0
}

   .dhx_widget .dhx_menu-button__icon:before {
      font-size: var(--dhx-icon-size-normal);
      line-height: var(--dhx-icon-size-normal)
   }

.dhx_menu-button__icon + .dhx_menu-button__text {
   margin-left: 8px
}

.dhx_menu-button__block {
   display: flex;
   align-items: center
}

.dhx_menu-button__block--left {
   justify-content: flex-start
}

.dhx_menu-button__block--right {
   justify-content: flex-end
}

.dhx_menu-button__count {
   margin-left: 8px;
   margin-top: -2px;
   margin-bottom: -2px
}

.dhx_menu-button__hotkey {
   margin-left: 8px;
   color: var(--dhx-font-color-additional)
}

.dhx_menu-button__caret {
   margin-left: 8px;
   color: var(--dhx-font-color-secondary)
}

.dhx_widget--fullscreen .dhx_menu {
   z-index: var(--dhx-z-index-overlay-total)
}

.dhx_ribbon {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0;
   padding: 10px;
   list-style: none;
   background-color: var(--dhx-background-secondary)
}

   .dhx_ribbon:focus {
      outline: none
   }

   .dhx_ribbon .scroll-view-wrapper {
      height: auto
   }

.dhx_ribbon__item {
   margin: 2px
}

.dhx_ribbon__item--auto, .dhx_ribbon__item--medium {
   flex: 1 0 auto;
   min-width: 68px;
   min-height: 68px
}

.dhx_ribbon__item--icon, .dhx_ribbon__item--spacer {
   flex: 1 0 auto
}

.dhx_ribbon__item--separator {
   align-self: stretch;
   width: 1px;
   min-width: 1px;
   margin: 8px 4px;
   background-color: var(--dhx-border-color)
}

.dhx_ribbon-button__icon + .dhx_ribbon-button__text {
   margin-left: 4px
}

.dhx_widget .dhx_ribbon-button__icon {
   line-height: 0
}

   .dhx_widget .dhx_ribbon-button__icon:before {
      font-size: var(--dhx-icon-size-normal);
      line-height: var(--dhx-line-height-normal)
   }

.dhx_ribbon-button, .dhx_ribbon-button-image {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
   padding: 6px 12px;
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-border-color);
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   font-weight: var(--dhx-font-weight-regular);
   color: var(--dhx-font-color-secondary);
   background-color: transparent;
   border-radius: var(--dhx-border-radius);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-in),box-shadow var(--dhx-transition-time) var(--dhx-transition-in)
}

.dhx_ribbon-button-image__icon, .dhx_ribbon-button__icon {
   color: var(--dhx-font-color-secondary);
   line-height: 0
}

.dhx_ribbon-button-image__count, .dhx_ribbon-button__count {
   margin-left: 4px;
   margin-top: -10px;
   margin-bottom: -10px
}

.dhx_ribbon-button--auto, .dhx_ribbon-button--medium, .dhx_ribbon-button-image--auto, .dhx_ribbon-button-image--medium {
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-width: 68px;
   min-height: 68px;
   height: 100%
}

   .dhx_ribbon-button--auto .dhx_ribbon-button-image__count, .dhx_ribbon-button--auto .dhx_ribbon-button__count, .dhx_ribbon-button--medium .dhx_ribbon-button-image__count, .dhx_ribbon-button--medium .dhx_ribbon-button__count, .dhx_ribbon-button-image--auto .dhx_ribbon-button-image__count, .dhx_ribbon-button-image--auto .dhx_ribbon-button__count, .dhx_ribbon-button-image--medium .dhx_ribbon-button-image__count, .dhx_ribbon-button-image--medium .dhx_ribbon-button__count {
      margin-left: 0;
      position: absolute;
      top: 4px;
      right: 4px
   }

   .dhx_ribbon-button--auto .dhx_ribbon-button__icon + .dhx_ribbon-button__text, .dhx_ribbon-button--medium .dhx_ribbon-button__icon + .dhx_ribbon-button__text, .dhx_ribbon-button-image--auto .dhx_ribbon-button__icon + .dhx_ribbon-button__text, .dhx_ribbon-button-image--medium .dhx_ribbon-button__icon + .dhx_ribbon-button__text {
      margin-left: 0;
      margin-top: 2px
   }

.dhx_ribbon-button--icon, .dhx_ribbon-button-image--icon {
   flex: 1 0 auto;
   justify-content: center
}

.dhx_ribbon-button--select, .dhx_ribbon-button-image--select {
   padding-right: 8px
}

   .dhx_ribbon-button--select .dhx_ribbon-button__text, .dhx_ribbon-button-image--select .dhx_ribbon-button__text {
      margin-right: 8px
   }

.dhx_ribbon-button-image:hover, .dhx_ribbon-button:hover {
   background-color: var(--dhx-background-additional);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
}

.dhx_ribbon-button--active, .dhx_ribbon-button-image--active, .dhx_ribbon-button-image:active, .dhx_ribbon-button:active {
   background-color: var(--dhx-color-primary-light-hover);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-out),box-shadow var(--dhx-transition-time) var(--dhx-transition-out);
   box-shadow: var(--dhx-shadow-input-size) var(--dhx-color-primary-light-active)
}

.dhx_ribbon-button--disabled, .dhx_ribbon-button-image--disabled, .dhx_ribbon-button-image:disabled, .dhx_ribbon-button:disabled {
   opacity: .8;
   pointer-events: auto;
   cursor: default
}

   .dhx_ribbon-button--disabled:hover, .dhx_ribbon-button-image--disabled:hover, .dhx_ribbon-button-image:disabled:hover, .dhx_ribbon-button:disabled:hover {
      background-color: transparent
   }

   .dhx_ribbon-button--disabled *, .dhx_ribbon-button-image--disabled *, .dhx_ribbon-button-image:disabled *, .dhx_ribbon-button:disabled * {
      color: var(--dhx-font-color-disabled)
   }

.dhx_ribbon-button-image__text + .dhx_ribbon-button-image__image {
   margin-right: 4px
}

.dhx_ribbon-button-image {
   flex-flow: row-reverse;
   justify-content: flex-end
}

.dhx_ribbon-button-image__count {
   order: -1
}

.dhx_ribbon-button-image__image {
   width: 20px;
   height: 20px;
   background-size: cover;
   background-position: 50%;
   background-repeat: no-repeat
}

.dhx_ribbon-button-image--icon {
   justify-content: center
}

.dhx_ribbon-button-image__count {
   margin-left: 8px
}

.dhx_ribbon-button-image--auto .dhx_ribbon-button__count, .dhx_ribbon-button-image--medium .dhx_ribbon-button__count {
   margin-left: 0;
   position: absolute;
   top: 4px;
   right: 4px
}

.dhx_ribbon-button-image--auto, .dhx_ribbon-button-image--medium {
   flex-flow: column-reverse;
   justify-content: center;
   min-width: 68px;
   min-height: 68px;
   height: 100%
}

   .dhx_ribbon-button-image--auto .dhx_ribbon-button-image__image, .dhx_ribbon-button-image--medium .dhx_ribbon-button-image__image {
      margin-right: 0;
      width: 32px;
      height: 32px
   }

.dhx_ribbon-button-image__caret, .dhx_ribbon-button__caret {
   margin-left: auto;
   color: var(--dhx-font-color-secondary);
   transform: rotate(90deg)
}

.dhx_ribbon-block {
   display: flex;
   text-align: center
}

.dhx_ribbon-block--root {
   width: 100%;
   height: 100%
}

.dhx_ribbon-block--title {
   position: relative
}

.dhx_ribbon-block--indented {
   margin-right: 4px;
   margin-left: 4px
}

   .dhx_ribbon-block--indented:first-child {
      margin-left: 0
   }

   .dhx_ribbon-block--indented:last-child {
      margin-right: 0
   }

.dhx_ribbon-block--col > .dhx_ribbon-content {
   flex-direction: column
}

.dhx_ribbon-block--row > .dhx_ribbon-content {
   flex-direction: row
}

.dhx_ribbon-block--row .dhx_ribbon-button--auto, .dhx_ribbon-block--row .dhx_ribbon-button-image--auto {
   flex-direction: column;
   justify-content: center
}

.dhx_ribbon-content {
   flex: 1 0 auto;
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex
}

.dhx_ribbon-content-label-wrapper {
   display: block;
   position: absolute;
   bottom: -24px;
   left: 0;
   right: 0;
   overflow: hidden
}

.dhx_ribbon-content-label {
   position: relative;
   display: inline;
   font-family: Roboto;
   font-style: var(--dhx-font-weight-medium);
   font-weight: var(--dhx-font-weight-regular);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-small);
   text-align: center;
   color: var(--dhx-font-color-additional)
}

   .dhx_ribbon-content-label:after, .dhx_ribbon-content-label:before {
      content: "";
      position: absolute;
      top: 50%;
      display: block;
      height: 1px;
      background: var(--dhx-font-color-additional);
      opacity: .6;
      width: 1000%
   }

   .dhx_ribbon-content-label:before {
      left: calc(100% + 4px)
   }

   .dhx_ribbon-content-label:after {
      right: calc(100% + 4px)
   }

.dhx_sidebar {
   height: 100%;
   position: relative;
   background-color: var(--dhx-background-primary);
   z-index: var(--dhx-z-index-up)
}

   .dhx_sidebar:focus {
      outline: none
   }

.dhx_sidebar__item .dhx_custom-button {
   overflow: hidden
}

.dhx_sidebar__item--spacer {
   flex: 1 0 auto
}

.dhx_sidebar__item--separator {
   height: 1px;
   min-height: 1px;
   width: 100%;
   background-color: var(--dhx-border-color);
   margin: 2px 0
}

.dhx_sidebar--minimized .dhx_navbar-title {
   opacity: 0;
   pointer-events: none
}

.dhx_sidebar--minimized .dhx_sidebar-button__icon {
   margin-left: auto;
   margin-right: auto
}

.dhx_sidebar--minimized .dhx_sidebar-button--select {
   padding-right: 12px
}

.dhx_sidebar--minimized .dhx_sidebar-button__count {
   position: absolute;
   max-width: 24px;
   overflow: hidden;
   top: -4px;
   right: 4px
}

.dhx_sidebar--minimized .dhx_sidebar-button--select .dhx_sidebar-button__count {
   margin-right: 0
}

.dhx_sidebar--minimized .dhx_sidebar-button__caret, .dhx_sidebar--minimized .dhx_sidebar-button__text {
   display: none
}

.dhx_sidebar .scroll-view .dhx_navbar {
   overflow: unset
}

.dhx_sidebar-button__icon + .dhx_sidebar-button__text {
   margin-left: 12px
}

.dhx_sidebar-button {
   position: relative;
   display: flex;
   width: 100%;
   justify-content: flex-start;
   align-items: center;
   padding: 12px;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   font-weight: var(--dhx-font-weight-regular);
   color: var(--dhx-font-color-primary);
   background-color: transparent;
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-in)
}

.dhx_sidebar-button--select {
   padding-right: 8px
}

   .dhx_sidebar-button--select .dhx_sidebar-button__count {
      margin-right: 8px
   }

.dhx_sidebar-button--icon {
   padding-right: 12px
}

.dhx_sidebar-button:active, .dhx_sidebar-button:hover {
   background-color: var(--dhx-background-additional);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
}

.dhx_sidebar-button--active {
   background-color: var(--dhx-background-secondary);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-out);
   box-shadow: inset 2px 0 0 0 var(--dhx-color-primary)
}

.dhx_sidebar-button--disabled, .dhx_sidebar-button:disabled {
   opacity: .8;
   pointer-events: auto;
   cursor: default
}

   .dhx_sidebar-button--disabled:hover, .dhx_sidebar-button:disabled:hover {
      background-color: transparent
   }

   .dhx_sidebar-button--disabled *, .dhx_sidebar-button:disabled * {
      color: var(--dhx-font-color-disabled)
   }

.utilityfocus .dhx_sidebar-button:focus-visible {
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -1px
}

.dhx_sidebar-button__icon {
   color: var(--dhx-font-color-secondary)
}

.dhx_widget .dhx_sidebar-button__icon {
   line-height: 0
}

   .dhx_widget .dhx_sidebar-button__icon:before {
      font-size: var(--dhx-icon-size-normal);
      line-height: var(--dhx-line-height-normal)
   }

.dhx_sidebar-button__html, .dhx_sidebar-button__text {
   width: 100%;
   text-align: left
}

.dhx_sidebar-button__count + .dhx_sidebar-button__caret {
   margin-left: 0
}

.dhx_sidebar-button__count {
   min-width: 24px;
   flex: 1 0 auto;
   width: auto;
   margin: -4px 0 -4px auto
}

.dhx_sidebar-button__caret {
   margin-right: 0;
   margin-left: auto
}

.dhx_sidebar--popup-menu .dhx_menu-button {
   padding: 12px 8px
}

.dhx_toolbar {
   min-height: 44px;
   display: flex;
   margin: 0;
   -webkit-user-select: none;
   user-select: none;
   background-color: var(--dhx-s-toolbar-background)
}

.dhx_toolbar__item--spacer {
   flex: 1 0 auto
}

.dhx_toolbar__item--separator {
   width: 1px;
   min-width: 1px;
   height: 100%;
   background-color: var(--dhx-border-color);
   margin: 0 2px;
   height: 28px
}

.dhx_toolbar__item:first-child .dhx_form-group, .dhx_toolbar__item:first-child .dhx_navbar-title, .dhx_toolbar__item:first-child button:not(.dhx_toolbar-button) {
   margin-left: 12px
}

.dhx_toolbar__item:first-child button.dhx_button--view_link:not(.dhx_button--count), .dhx_toolbar__item:not(:first-child) .dhx_form-group, .dhx_toolbar__item:not(:first-child) .dhx_navbar-title, .dhx_toolbar__item:not(:first-child) button:not(.dhx_toolbar-button) {
   margin-left: 4px
}

.dhx_toolbar__item:last-child .dhx_form-group, .dhx_toolbar__item:last-child .dhx_navbar-title, .dhx_toolbar__item:last-child button:not(.dhx_toolbar-button) {
   margin-right: 12px
}

.dhx_toolbar__item:last-child button.dhx_button--view_link:not(.dhx_button--count), .dhx_toolbar__item:not(:last-child) .dhx_form-group, .dhx_toolbar__item:not(:last-child) .dhx_navbar-title, .dhx_toolbar__item:not(:last-child) button:not(.dhx_toolbar-button) {
   margin-right: 4px
}

.dhx_toolbar__input {
   height: 32px
}

@supports (display:block) {
   .dhx_toolbar__input {
      height: unset
   }
}

.dhx_toolbar__input .dhx_input {
   height: 32px
}

@supports (display:block) {
   .dhx_toolbar__input .dhx_input {
      height: unset
   }
}

.dhx_toolbar .dhx_navbar {
   padding: 12px 0;
   height: 100%
}

.dhx_toolbar .dhx_button__icon--menu {
   transform: rotate(90deg)
}

.dhx_toolbar-button {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 6px 12px;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   font-weight: var(--dhx-font-weight-medium);
   color: var(--dhx-font-color-primary);
   background-color: transparent;
   border-radius: var(--dhx-border-radius);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-in)
}

.dhx_toolbar-button--select {
   padding-right: 8px
}

.dhx_toolbar-button--icon {
   padding-right: 12px
}

.dhx_toolbar-button--circle {
   border-radius: calc(var(--dhx-line-height-normal) + 12px)
}

   .dhx_toolbar-button--circle.dhx_toolbar-button--icon {
      padding-left: 6px;
      padding-right: 6px
   }

.dhx_toolbar-button:hover {
   background-color: var(--dhx-s-toolbar-button-background-hover);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
}

.dhx_toolbar-button--active, .dhx_toolbar-button:active {
   background-color: var(--dhx-s-toolbar-button-background-active);
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
}

.dhx_toolbar-button--disabled, .dhx_toolbar-button:disabled {
   opacity: .8;
   pointer-events: auto;
   cursor: default
}

   .dhx_toolbar-button--disabled:hover, .dhx_toolbar-button:disabled:hover {
      background-color: transparent
   }

   .dhx_toolbar-button--disabled *, .dhx_toolbar-button:disabled * {
      color: var(--dhx-font-color-disabled)
   }

.dhx_toolbar-button__icon {
   color: var(--dhx-font-color-primary)
}

.dhx_widget .dhx_toolbar-button__icon {
   line-height: 0
}

   .dhx_widget .dhx_toolbar-button__icon:before {
      font-size: var(--dhx-icon-size-normal);
      line-height: var(--dhx-icon-size-normal)
   }

.dhx_toolbar-button__icon + .dhx_toolbar-button__text {
   margin-left: 8px
}

.dhx_toolbar-button__count {
   position: absolute;
   top: -10px;
   right: -10px
}

.dhx_toolbar-button__caret {
   margin-left: 8px;
   color: var(--dhx-font-color-secondary);
   transform: rotate(90deg)
}

.dhx_toolbar-button-image {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 44px;
   height: 44px;
   padding: 0;
   margin-top: -8px;
   margin-bottom: -8px;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: var(--dhx-line-height-normal);
   color: var(--dhx-font-color-primary);
   border-radius: 50%;
   transition: opacity var(--dhx-transition-time) var(--dhx-transition-in)
}

   .dhx_toolbar-button-image:hover {
      opacity: .8;
      transition: opacity var(--dhx-transition-time) var(--dhx-transition-out)
   }

.dhx_toolbar-button-image__image {
   position: absolute;
   border-radius: 50%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-size: cover;
   background-position: 50%;
   background-repeat: no-repeat;
   z-index: var(--dhx-z-index-up)
}

.dhx_toolbar-button-image__text {
   text-align: center;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.dhx_toolbar-button-image__count {
   position: absolute;
   top: -4px;
   right: -4px
}

.dhx_tabbar {
   display: flex;
   max-height: 100%;
   height: 100%;
   max-width: 100%;
   background-color: var(--dhx-background-primary);
   position: relative
}

.dhx_tabbar--top {
   flex-direction: column
}

   .dhx_tabbar--top > .dhx_tabbar-header__wrapper {
      border-bottom: var(--dhx-border);
      flex-direction: row
   }

      .dhx_tabbar--top > .dhx_tabbar-header__wrapper .dhx_tabbar-header {
         flex-direction: row
      }

      .dhx_tabbar--top > .dhx_tabbar-header__wrapper .dhx_tabbar-header-active {
         bottom: 0
      }

      .dhx_tabbar--top > .dhx_tabbar-header__wrapper .dhx_tabbar-tab {
         flex: 0 0 auto
      }

      .dhx_tabbar--top > .dhx_tabbar-header__wrapper .dhx_tabbar-tab-button {
         text-align: center
      }

   .dhx_tabbar--top > .dhx_layout-cell {
      height: 100%;
      overflow: hidden;
      flex: 1 1 auto
   }

.dhx_tabbar--bottom {
   flex-direction: column-reverse
}

   .dhx_tabbar--bottom > .dhx_tabbar-header__wrapper {
      border-top: var(--dhx-border);
      flex-direction: row
   }

      .dhx_tabbar--bottom > .dhx_tabbar-header__wrapper .dhx_tabbar-header {
         flex-direction: row
      }

      .dhx_tabbar--bottom > .dhx_tabbar-header__wrapper .dhx_tabbar-header-active {
         top: 0
      }

      .dhx_tabbar--bottom > .dhx_tabbar-header__wrapper .dhx_tabbar-tab {
         flex: 0 0 auto
      }

      .dhx_tabbar--bottom > .dhx_tabbar-header__wrapper .dhx_tabbar-tab-button {
         text-align: center
      }

   .dhx_tabbar--bottom > .dhx_layout-cell {
      height: 100%;
      overflow: hidden;
      flex: 1 1 auto
   }

.dhx_tabbar--left {
   flex-direction: row
}

   .dhx_tabbar--left > .dhx_tabbar-header__wrapper {
      border-right: var(--dhx-border);
      flex-direction: column
   }

      .dhx_tabbar--left > .dhx_tabbar-header__wrapper .dhx_tabbar-header {
         flex-direction: column
      }

      .dhx_tabbar--left > .dhx_tabbar-header__wrapper .dhx_tabbar-header-active {
         right: 0
      }

      .dhx_tabbar--left > .dhx_tabbar-header__wrapper .dhx_tabbar-tab {
         flex: 1 1 auto
      }

      .dhx_tabbar--left > .dhx_tabbar-header__wrapper .dhx_tabbar-tab-button {
         text-align: right
      }

   .dhx_tabbar--left > .dhx_layout-cell {
      height: 100%;
      overflow: hidden;
      flex: 1 1 auto
   }

.dhx_tabbar--right {
   flex-direction: row-reverse
}

   .dhx_tabbar--right > .dhx_tabbar-header__wrapper {
      border-left: var(--dhx-border);
      flex-direction: column
   }

      .dhx_tabbar--right > .dhx_tabbar-header__wrapper .dhx_tabbar-header {
         flex-direction: column
      }

      .dhx_tabbar--right > .dhx_tabbar-header__wrapper .dhx_tabbar-header-active {
         left: 0
      }

      .dhx_tabbar--right > .dhx_tabbar-header__wrapper .dhx_tabbar-tab {
         flex: 1 1 auto
      }

      .dhx_tabbar--right > .dhx_tabbar-header__wrapper .dhx_tabbar-tab-button {
         text-align: left
      }

   .dhx_tabbar--right > .dhx_layout-cell {
      height: 100%;
      overflow: hidden;
      flex: 1 1 auto
   }

.dhx_tabbar .dhx_layout-cell--content {
   flex: 1 0 auto;
   overflow: auto
}

.dhx_tabbar-content--disabled {
   cursor: not-allowed;
   pointer-events: none;
   -webkit-user-select: none;
   user-select: none;
   opacity: .7
}

.dhx_tabbar-header {
   display: flex;
   margin: 0;
   padding: 0;
   list-style: none;
   position: relative
}

.dhx_tabbar-header__wrapper {
   display: flex;
   position: relative;
   overflow: hidden;
   flex: 0 0 auto
}

.dhx_tabbar-header__wrapper-left, .dhx_tabbar-header__wrapper-start {
   justify-content: flex-start
}

.dhx_tabbar-header__wrapper-center, .dhx_tabbar-header__wrapper-middle {
   justify-content: center
}

.dhx_tabbar-header__wrapper-end, .dhx_tabbar-header__wrapper-right {
   justify-content: flex-end
}

.dhx_tabbar-header-active {
   position: absolute;
   background-color: var(--dhx-color-primary);
   z-index: var(--dhx-z-index-up)
}

.dhx_tabbar-tab {
   position: relative
}

.dhx_tabbar-tab__close {
   position: absolute;
   top: 50%;
   right: 8px;
   transform: translateY(-50%);
   z-index: var(--dhx-z-index-up);
   opacity: .7;
   color: var(--dhx-color-primary);
   cursor: pointer
}

   .dhx_tabbar-tab__close:hover {
      opacity: 1
   }

   .dhx_tabbar-tab__close:focus {
      outline: none
   }

.dhx_tabbar-tab-button {
   width: 100%;
   height: 100%;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-medium);
   line-height: var(--dhx-line-height-normal);
   position: relative;
   padding: 12px 24px;
   border-radius: 0;
   color: var(--dhx-color-primary);
   text-transform: uppercase;
   background-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-in)
}

   .dhx_tabbar-tab-button .dhx_button__text {
      opacity: .7
   }

   .dhx_tabbar-tab-button:active, .dhx_tabbar-tab-button:hover, .dhx_tabbar-tab-button:hover:active {
      background-color: var(--dhx-background-additional);
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
   }

.dhx_tabbar-tab-button--active .dhx_button__text {
   opacity: 1
}

.dhx_tabbar-tab-button--disabled {
   cursor: not-allowed
}

   .dhx_tabbar-tab-button--disabled * {
      cursor: not-allowed;
      pointer-events: none
   }

   .dhx_tabbar-tab-button--disabled .dhx_button__text {
      color: var(--dhx-font-color-disabled)
   }

.utilityfocus .dhx_tabbar-tab-button:focus-visible {
   outline: var(--dhx-color-focused) dashed 1px;
   outline-offset: -1px
}

.dhx_tabbar_scroll {
   position: absolute;
   display: flex;
   justify-content: center;
   cursor: pointer;
   color: var(--dhx-color-primary)
}

   .dhx_tabbar_scroll.arrow-left, .dhx_tabbar_scroll.arrow-right {
      width: 38px;
      padding: 0 8px;
      flex-direction: column
   }

   .dhx_tabbar_scroll.arrow-left {
      right: calc(100% - 38px);
      background: linear-gradient(270deg,hsla(0,0%,100%,0),var(--dhx-background-primary) 75%)
   }

      .dhx_tabbar_scroll.arrow-left:hover {
         background: linear-gradient(270deg,hsla(0,0%,100%,0),var(--dhx-background-additional) 75%)
      }

   .dhx_tabbar_scroll.arrow-right {
      right: 0;
      background: linear-gradient(90deg,hsla(0,0%,100%,0),var(--dhx-background-primary) 75%)
   }

      .dhx_tabbar_scroll.arrow-right:hover {
         background: linear-gradient(90deg,hsla(0,0%,100%,0),var(--dhx-background-additional) 75%)
      }

   .dhx_tabbar_scroll.arrow-down, .dhx_tabbar_scroll.arrow-up {
      height: 38px;
      padding: 8px 0
   }

   .dhx_tabbar_scroll.arrow-down {
      bottom: 0;
      background: linear-gradient(180deg,hsla(0,0%,100%,0),var(--dhx-background-primary) 75%)
   }

      .dhx_tabbar_scroll.arrow-down:hover {
         background: linear-gradient(180deg,hsla(0,0%,100%,0),var(--dhx-background-additional) 75%)
      }

   .dhx_tabbar_scroll.arrow-up {
      top: 0;
      background: linear-gradient(0deg,hsla(0,0%,100%,0),var(--dhx-background-primary) 75%)
   }

      .dhx_tabbar_scroll.arrow-up:hover {
         background: linear-gradient(0deg,hsla(0,0%,100%,0),var(--dhx-background-additional) 75%)
      }

   .dhx_tabbar_scroll:hover {
      color: var(--dhx-color-primary-hover);
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
   }

.dhx_tree {
   width: 100%;
   height: 100%;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   z-index: var(--dhx-z-index-up);
   overflow: auto;
   background-color: var(--dhx-background-primary)
}

.dhx_tree--no-selection {
   -webkit-user-select: none;
   user-select: none
}

   .dhx_tree--no-selection .dhx_tree-folder:hover:before, .dhx_tree--no-selection .dhx_tree-list-item:hover:before {
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-out);
      background-color: transparent
   }

.dhx_tree:focus-visible {
   outline: none
}

.utilityfocus .dhx_tree:focus-visible {
   outline: var(--dhx-color-focused) dashed 1px
}

.dhx_tree-list {
   list-style: none;
   margin: 0;
   padding: 0;
   padding-left: var(--dhx-icon-size-normal)
}

.dhx_tree-folder {
   display: flex;
   align-items: center;
   padding-top: 2px;
   padding-bottom: 2px;
   width: 100%
}

   .dhx_tree-folder .dhx_tree-list-item__content {
      padding-left: 20px
   }

   .dhx_tree-folder .dhx_tree-toggle-button + .dhx_tree-list-item__content {
      padding-left: 0
   }

.dhx_tree-list-item {
   display: flex;
   align-items: center;
   cursor: pointer;
   padding-top: 2px;
   padding-bottom: 2px;
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-out)
}

.dhx_tree-list-item__content {
   width: 100%;
   display: flex;
   align-items: center;
   padding-left: var(--dhx-icon-size-normal);
   position: relative
}

   .dhx_tree-list-item__content:before {
      content: "";
      display: block;
      position: absolute;
      top: -1.5px;
      bottom: -1.5px;
      right: inherit;
      left: inherit;
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-in);
      z-index: -1
   }

.dhx_tree-list-item__text {
   padding-left: 4px;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: calc(var(--dhx-line-height-normal) - 1px);
   color: var(--dhx-font-color-primary);
   overflow: hidden;
   white-space: pre-wrap;
   word-break: break-word
}

.dhx_tree-list-item__icon {
   color: var(--dhx-font-color-additional);
   line-height: 1;
   font-size: 0
}

   .dhx_tree-list-item__icon:before {
      font-size: var(--dhx-icon-size-normal);
      line-height: 1
   }

.dhx_tree-list-item--parent {
   display: block;
   padding-top: 0;
   padding-bottom: 0
}

.dhx_tree-list-item .dhx_widget .dhx_tree-list-item__icon {
   line-height: 0
}

   .dhx_tree-list-item .dhx_widget .dhx_tree-list-item__icon:before {
      font-size: var(--dhx-icon-size-normal);
      line-height: var(--dhx-line-height-normal)
   }

.dhx_tree-folder, .dhx_tree-list-item {
   position: relative;
   width: 100%
}

   .dhx_tree-folder:before, .dhx_tree-list-item:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: inherit;
      left: inherit;
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-in);
      z-index: -1
   }

   .dhx_tree-folder--focused:before, .dhx_tree-folder:hover:before, .dhx_tree-list-item--focused:before, .dhx_tree-list-item:hover:before {
      transition: background-color var(--dhx-transition-time) var(--dhx-transition-out);
      background-color: var(--dhx-background-additional)
   }

.dhx_tree-folder--selected:before, .dhx_tree-list-item--selected:before {
   transition: background-color var(--dhx-transition-time) var(--dhx-transition-out);
   box-shadow: inset 2px 0 0 0 var(--dhx-color-primary);
   background-color: var(--dhx-background-secondary)
}

.dhx_tree-toggle-button {
   cursor: pointer;
   color: var(--dhx-font-color-secondary)
}

   .dhx_tree-toggle-button + .dhx_tree-list-item__content {
      margin-left: 0
   }

.dhx_tree-checkbox {
   padding-right: 4px;
   color: var(--dhx-color-primary)
}

   .dhx_tree-checkbox.dxi-checkbox-blank-outline {
      color: var(--dhx-font-color-secondary)
   }

.dhx_tree-input {
   height: var(--dhx-line-height-normal);
   width: 100%;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   color: var(--dhx-font-color-primary);
   padding: 0;
   margin: 0 4px;
   background-color: var(--dhx-background-secondary);
   border: none
}

   .dhx_tree-input:focus {
      outline: none
   }

.dhx_tree-folder.dhx_tree-drop--top .dhx_tree-list-item__content:before {
   left: -20px;
   right: 0;
   box-shadow: 0 -1px 0 0 var(--dhx-color-primary)
}

.dhx_tree-folder.dhx_tree-drop--top:hover:before {
   background-color: transparent
}

.dhx_tree-folder.dhx_tree-drop--bottom .dhx_tree-list-item__content:before {
   left: -20px;
   right: 0;
   box-shadow: 0 1px 0 0 var(--dhx-color-primary)
}

.dhx_tree-folder.dhx_tree-drop--bottom:hover:before {
   background-color: transparent
}

.dhx_tree-folder.dhx_tree-drop--in-folder .dhx_tree-list-item__content:before {
   left: -20px;
   right: 0;
   box-shadow: 0 1px 0 0 var(--dhx-color-primary),0 -1px 0 0 var(--dhx-color-primary)
}

.dhx_tree-folder.dhx_tree-drop--in-folder:hover:before {
   background-color: transparent
}

.dhx_tree-list-item.dhx_tree-drop--top .dhx_tree-list-item__content:before {
   left: 20px;
   right: 0;
   box-shadow: 0 -1px 0 0 var(--dhx-color-primary)
}

.dhx_tree-list-item.dhx_tree-drop--top:hover:before {
   background-color: transparent
}

.dhx_tree-list-item.dhx_tree-drop--bottom .dhx_tree-list-item__content:before {
   left: 20px;
   right: 0;
   box-shadow: 0 1px 0 0 var(--dhx-color-primary)
}

.dhx_tree-list-item.dhx_tree-drop--bottom:hover:before {
   background-color: transparent
}

.dhx_tree-list-item.dhx_tree-drop--in-folder .dhx_tree-list-item__content:before {
   left: 20px;
   right: 0;
   box-shadow: 0 1px 0 0 var(--dhx-color-primary),0 -1px 0 0 var(--dhx-color-primary)
}

.dhx_tree-list-item.dhx_tree-drop--in-folder:hover:before {
   background-color: transparent
}

.dhx_tree-template__wrapper {
   width: 100%
}

.dhx_tree-editor {
   outline: 0;
   height: 100%;
   width: 100%;
   padding: 0 4px;
   cursor: text;
   overflow: hidden;
   white-space: pre-wrap;
   word-break: break-word;
   text-align: left;
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   line-height: calc(var(--dhx-line-height-normal) - 1px);
   color: inherit;
   background-color: inherit
}

.dhx_window {
   border-radius: var(--dhx-border-radius);
   box-shadow: var(--dhx-border-shadow-normal);
   will-change: transform;
   overflow: visible
}

.dhx_window--stop_selection {
   -webkit-user-select: none;
   user-select: none
}

.dhx_window__overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--dhx-background-overlay);
   z-index: var(--dhx-z-index-overlay-total)
}

.dhx_window .scroll-view .dhx_layout-cell-content {
   max-height: 100%;
   height: auto
}

.dhx_window .dhx_toolbar {
   background-color: var(--dhx-background-primary)
}

.dhx_window-header {
   padding-bottom: 20px
}

.dhx_window-header--movable {
   cursor: all-scroll
}

.dhx_window-header .title_max {
   max-width: 90%;
   overflow: hidden;
   text-overflow: ellipsis
}

.dhx_window-header .dhx_navbar-title {
   margin-left: 0 !important;
   font-size: calc(var(--dhx-font-size-small)*1.5)
}

.dhx_window-content, .dhx_window-content-without-header {
   font-family: var(--dhx-font-family);
   font-size: var(--dhx-font-size-normal);
   font-weight: var(--dhx-font-weight-regular);
   color: var(--dhx-font-color-secondary);
   line-height: 1.3;
   overflow-wrap: break-word;
   word-wrap: break-word
}

   .dhx_window-content-without-header:not(.scroll-view) > .dhx_layout-cell-content, .dhx_window-content-without-header:not(.scroll-view) > .dhx_layout-cell-content > .dhx_layout-cell-inner_html, .dhx_window-content:not(.scroll-view) > .dhx_layout-cell-content, .dhx_window-content:not(.scroll-view) > .dhx_layout-cell-content > .dhx_layout-cell-inner_html {
      position: relative;
      overflow-y: auto
   }

   .dhx_window-content-without-header .dhx_layout-rows:first-of-type, .dhx_window-content .dhx_layout-rows:first-of-type {
      overflow-y: auto
   }

.dhx_window-content {
   padding-left: 28px;
   padding-right: 28px;
   padding-bottom: 28px
}

.dhx_window-content-without-header {
   padding: 28px;
   overflow-y: auto
}

.dhx_window-footer {
   padding-top: 20px
}

body.dhx_window--no-scroll {
   width: 100vw;
   height: 100vh
}

.dhx_window--no-scroll {
   overflow: hidden
}

.dhx_window .dhx_cell_content, .dhx_window .dhx_toolbar {
   width: 100%
}

.dhx_window .dhx_toolbar {
   height: unset
}

.dhx_window .dhx_toolbar__list {
   min-height: auto
}

.dhx_window .dhx_window-header .dhx_toolbar .dhx_navbar {
   padding: 28px 16px 0 28px
}

.dhx_window .dhx_window-footer .dhx_toolbar .dhx_navbar {
   padding: 0 28px 28px
}

.dhx_window .dhx_cell_content {
   height: 100%;
   display: flex;
   flex-direction: column
}

.dhx_layout-cell.resizers {
   position: static
}

.dhx_window-resizer {
   position: absolute;
   background: transparent
}

.dhx_window-resizer--left {
   left: -6px;
   top: 0;
   height: 100%;
   width: 12px
}

   .dhx_window-resizer--left:hover {
      cursor: ew-resize
   }

.dhx_window-resizer--right {
   right: -6px;
   top: 0;
   height: 100%;
   width: 12px
}

   .dhx_window-resizer--right:hover {
      cursor: ew-resize
   }

.dhx_window-resizer--top {
   left: 0;
   top: -6px;
   height: 12px;
   width: 100%
}

   .dhx_window-resizer--top:hover {
      cursor: ns-resize
   }

.dhx_window-resizer--bottom {
   left: 0;
   bottom: -6px;
   height: 12px;
   width: 100%
}

   .dhx_window-resizer--bottom:hover {
      cursor: ns-resize
   }

.dhx_window-resizer--top_right {
   right: -6px;
   top: -6px;
   width: 12px;
   height: 12px
}

   .dhx_window-resizer--top_right:hover {
      cursor: nesw-resize
   }

.dhx_window-resizer--top_left {
   left: -6px;
   top: -6px;
   width: 12px;
   height: 12px
}

   .dhx_window-resizer--top_left:hover {
      cursor: nwse-resize
   }

.dhx_window-resizer--bottom_right {
   right: -6px;
   bottom: -6px;
   width: 12px;
   height: 12px
}

   .dhx_window-resizer--bottom_right:hover {
      cursor: nwse-resize
   }

.dhx_window-resizer--bottom_left {
   left: -6px;
   bottom: -6px;
   width: 12px;
   height: 12px
}

   .dhx_window-resizer--bottom_left:hover {
      cursor: nesw-resize
   }

.dhx_window-resizer--active {
   width: 100%;
   height: 100%
}

.dhx_window-body-pointer--left, .dhx_window-body-pointer--right {
   cursor: ew-resize
}

.dhx_window-body-pointer--bottom, .dhx_window-body-pointer--top {
   cursor: ns-resize
}

.dhx_window-body-pointer--top_right {
   cursor: nesw-resize
}

.dhx_window-body-pointer--bottom_right, .dhx_window-body-pointer--top_left {
   cursor: nwse-resize
}

.dhx_window-body-pointer--bottom_left {
   cursor: nesw-resize
}

.dhx_pagination .dhx_toolbar {
   background-color: var(--dhx-background-primary);
   height: 44px !important;
   padding-top: 6px;
   padding-bottom: 6px
}

   .dhx_pagination .dhx_toolbar .dhx_navbar {
      display: flex;
      justify-content: center
   }

      .dhx_pagination .dhx_toolbar .dhx_navbar .dhx_input {
         text-align: center
      }

[data-dhx-theme=contrast-dark] {
   --dhx-font-size-normal: calc(var(--dhx-step-size)*4);
   --dhx-font-size-small: var(--dhx-font-size-normal);
   --dhx-font-color-primary: var(--dhx-color-white);
   --dhx-font-color-secondary: hsla(0,0%,100%,.86);
   --dhx-font-color-additional: var(--dhx-font-color-secondary);
   --dhx-font-color-disabled: hsla(0,0%,100%,.5);
   --dhx-font-color-contrast: var(--dhx-color-black);
   --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled);
   --dhx-border-color: hsla(0,0%,100%,.5);
   --dhx-border-color-focused: hsla(0,0%,100%,.7);
   --dhx-l-contrast-offset: -12%;
   --dhx-l-secondary: 60%;
   --dhx-h-background: 226;
   --dhx-s-background: 12%;
   --dhx-l-background: 20%;
   --dhx-background-primary: hsl(var(--dhx-h-background),var(--dhx-s-background),var(--dhx-l-background));
   --dhx-background-secondary: hsl(var(--dhx-h-background),var(--dhx-s-background),calc(var(--dhx-l-background) + 8%));
   --dhx-background-additional: hsl(var(--dhx-h-background),var(--dhx-s-background),calc(var(--dhx-l-background) + 12%));
   --dhx-s-toolbar-background: var(--dhx-color-black);
   --dhx-s-toolbar-button-background-hover: hsla(0,0%,100%,.07);
   --dhx-s-toolbar-button-background-active: hsla(0,0%,100%,.15);
   --dhx-s-grid-header-background: #212329;
   --dhx-s-grid-selection-background: var(--dhx-color-gray-100);
   --dhx-s-calendar-muffled: .8;
   --dhx-s-tick-font-size: var(--dhx-font-size-small)
}

[data-dhx-theme=contrast-light] {
   --dhx-font-size-normal: calc(var(--dhx-step-size)*4);
   --dhx-font-size-small: var(--dhx-font-size-normal);
   --dhx-font-color-secondary: rgba(0,0,0,.66);
   --dhx-font-color-additional: var(--dhx-font-color-secondary);
   --dhx-border-color: rgba(0,0,0,.4);
   --dhx-l-contrast-offset: 14%;
   --dhx-s-toolbar-background: var(--dhx-background-primary);
   --dhx-s-toolbar-button-background-hover: rgba(0,0,0,.07);
   --dhx-s-toolbar-button-background-active: rgba(0,0,0,.15);
   --dhx-s-grid-header-background: var(--dhx-background-secondary);
   --dhx-s-grid-selection-background: var(--dhx-color-gray-700);
   --dhx-s-calendar-muffled: .8;
   --dhx-s-tick-font-size: var(--dhx-font-size-small)
}

[data-dhx-theme=dark] {
   --dhx-font-color-primary: var(--dhx-color-white);
   --dhx-font-color-secondary: hsla(0,0%,100%,.7);
   --dhx-font-color-additional: hsla(0,0%,100%,.5);
   --dhx-font-color-disabled: hsla(0,0%,100%,.5);
   --dhx-font-color-contrast: var(--dhx-color-white);
   --dhx-font-color-contrast-disabled: var(--dhx-font-color-disabled);
   --dhx-border-color: hsla(0,0%,100%,.3);
   --dhx-border-color-focused: hsla(0,0%,100%,.5);
   --dhx-l-secondary: 60%;
   --dhx-h-background: 226;
   --dhx-s-background: 12%;
   --dhx-l-background: 20%;
   --dhx-background-primary: hsl(var(--dhx-h-background),var(--dhx-s-background),var(--dhx-l-background));
   --dhx-background-secondary: hsl(var(--dhx-h-background),var(--dhx-s-background),calc(var(--dhx-l-background) + 8%));
   --dhx-background-additional: hsl(var(--dhx-h-background),var(--dhx-s-background),calc(var(--dhx-l-background) + 12%));
   --dhx-s-toolbar-background: var(--dhx-color-black);
   --dhx-s-toolbar-button-background-hover: hsla(0,0%,100%,.07);
   --dhx-s-toolbar-button-background-active: hsla(0,0%,100%,.15);
   --dhx-s-grid-header-background: #212329;
   --dhx-s-grid-selection-background: var(--dhx-color-gray-100);
   --dhx-s-calendar-muffled: .6;
   --dhx-s-tick-font-size: calc(var(--dhx-font-size-small)/1.2)
}