@import '_functions';


input[type=number] {
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

.smart-grid-footer {
  background: var(--smart-surface);
  color: var(--smart-surface-color);
  border-color: var(--smart-border);
  height: var(--smart-grid-footer-height);
  border-top-width: 1px;
  border-top-style: solid;
}

.smart-grid-group-header {
  min-height: var(--smart-grid-group-header-height);
  height: var(--smart-grid-group-header-height);
  overflow: hidden;
  position: relative;
  z-index: 99;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--smart-border);
  background: var(--smart-surface);
  display: flex;
  align-items: center;

  .smart-breadcrumb {
    background: transparent;
    border: none;
    width: 100%;
    --smart-breadcrumb-item-height: 35px;
    margin-top: 1px;
    padding: 0px;
    padding-left: 5px;

    .smart-template-container {
      .smart-breadcrumb-items {
        .smart-breadcrumb-item {
          border-radius: var(--smart-border-radius);
          margin-top: 0px;
        }
      }
    }
  }

  .smart-breadcrumb-item-label {
    display: flex;
    justify-content: center;
    align-content: center;

    .smart-grid-icon {
      font-weight: bold;
      font-size: 16px;
      margin-right: -10px;
    }
  }
}

.smart-grid-column-header {
  &.smart-columns-sticky {
    border-top: 1px solid var(--smart-border);
    border-bottom: 1px solid var(--smart-border);
    margin-top: -2px;
  }

  .smart-arrow-down {
    &.smart-animate {
      transform: rotate(90deg);
      transition: transform 0.2s ease-out;

      &:after {
        content: var(--smart-icon-arrow-down);
      }
    }
  }

  .top-right-corner {
    overflow: hidden;
    right: 0px;
    top: 0px;
    width: calc(1px + var(--smart-scroll-bar-size));
    position: absolute;
    border-left: 1px solid inherit;
    z-index: 1;

    &:first-child {
      left: -1px;
      z-index: 2;
    }
  }

}

.smart-grid-column-header-cell-container {
  position: relative;
  z-index: 1;
  height: 100%;

  &:hover {
    smart-grid-column[freeze][checkbox][auto-show] {
      .smart-input {
        opacity: 1;
        border-color: var(--smart-border);
      }
    }
  }

  &.near,
  &.far {
    position: absolute;
    z-index: 6;
    box-sizing: content-box;

  }

  &.near {
    border-right: var(--smart-grid-freeze-splitter-size) solid var(--smart-border);
  }

  &.far {
    right: 0px;
    top: 0px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: inherit;
    border-left: var(--smart-grid-freeze-splitter-size) solid var(--smart-border);


    &.vscroll {
      right: var(--smart-scroll-bar-size);
    }
  }

  &.border-collapse {
    &.near {
      box-sizing: border-box;
      border-right: none;
    }

    &.far {
      box-sizing: border-box;
      border-left: none;
    }
  }
}

.smart-grid-column-group {
  color: var(--smart-surface-color);
  background: var(--smart-surface);
  white-space: nowrap;
  border-width: 0px;
  border-style: solid;
  overflow: hidden;
  height: 100%;
  position: absolute;
  text-overflow: ellipsis;

  font-size: var(--smart-grid-column-font-size, inherit);
  font-weight: var(--smart-grid-column-font-weight, inherit);

  &.smart-grid-column-border {
    border-width: var(--smart-border-width);
    border-top-color: var(--smart-border);
    border-top-width: 0px;
    border-bottom-color: var(--smart-border);
    border-left-color: var(--smart-border);
    border-right-color: var(--smart-border);
  }

  &:not(.smart-grid-column-border) {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: var(--smart-border-width);
      background: var(--smart-grid-column-horizontal-border, var(--smart-border));
    }

    &:not(.smart-grid-column-border-collapse)::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: var(--smart-border-width);
      height: 100%;
      background: var(--smart-grid-column-vertical-border, var(--smart-border));
    }
  }

}

.smart-grid-column-menu {
  position: absolute;
  background: var(--smart-surface);
  width: var(--smart-grid-column-menu-width);
  height: var(--smart-grid-column-menu-height);
  z-index: 9999;
  box-shadow: var(--smart-elevation-8);
  min-height: 40px;
  overflow: hidden;

  //background: transparent;

  smart-menu {
    border: none;
  }

  &.smart-animate {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0);
    opacity: 0;
    transform-origin: top left;

    &.smart-open-right {
      transform-origin: top right;
    }

    &.smart-grid-download-menu {
      width: auto;
      transform: scaleY(0);
    }
  }

  smart-menu[mode="vertical"] {
    height: 100%;
  }

  &.open.smart-animate {
    transform: scale(1);
    opacity: 1;
  }

  .smart-grid-icon {
    display: inline-block;
  }

  .smart-filter-container {
    width: 100%;
    height: auto;
    background: var(--smart-background);

    smart-filter-panel {
      width: 100%;
      border: none;
      background: transparent;
    }
  }


  .smart-filter-container .smart-filter-panel smart-tree,
  .smart-filter-panel smart-filter-builder {
    height: 250px;
  }
}

.smart-grid-filter-footer {
  height: var(--smart-grid-filter-footer-height);
}


.smart-grid-icon {
  height: 100%;
  font-family: var(--smart-font-family-icon);
  font-style: normal;
  font-weight: normal;
  color: inherit;
  font-size: 14px;
  text-decoration: inherit;
  font-variant: normal;
  text-transform: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: var(--smart-grid-column-buttons-width);
  min-width: 0px;
  display: none;

  &.visible {
    display: inline-block !important;
    width: 20px;
  }

  &.show {
    display: flex !important;
  }

  &.smart-icon-link:before {
    content: var(--smart-icon-link);
  }

  &.smart-icon-ai:before {
    content: 'AI';
    font-family: var(--smart-font-family);
    font-weight: 700;
    font-size: 12px;
  }

  &.smart-icon-cloud:before {
    content: var(--smart-icon-cloud);
  }

  &.smart-icon-mail:before {
    content: var(--smart-icon-mail);
  }

  &.smart-icon-math:before {
    content: var(--smart-icon-math);
  }

  &.smart-icon-user:before {
    content: var(--smart-icon-user);
  }

  &.smart-icon-list-ordered:before {
    content: var(--smart-icon-list-ordered);
  }

  &.smart-icon-list-unordered:before {
    content: var(--smart-icon-list-unordered);
  }


  &.smart-icon-plus:before {
    content: var(--smart-icon-plus);
  }

  &.smart-icon-image:before {
    content: var(--smart-icon-image);
  }

  &.smart-icon-plus-circled:before {
    content: var(--smart-icon-plus-circled);
  }

  &.smart-icon-docs:before {
    content: var(--smart-icon-docs);
  }

  &.smart-icon-pdf:before {
    content: var(--smart-icon-pdf);
    color: #E50012;
  }

  &.smart-icon-word::before {
    content: var(--smart-icon-word);
    color: #185ABD;
  }

  &.smart-icon-music::before {
    content: var(--smart-icon-music);
    color: #C5C33C;
  }

  &.smart-icon-video::before {
    content: var(--smart-icon-video);
    color: #D94775;
  }


  &.smart-icon-excel:before {
    content: var(--smart-icon-excel);
    color: #107C41;
  }

  &.smart-icon-archive:before {
    content: var(--smart-icon-archive);
    color: #EDC949;
  }

  &.smart-icon-file:before {
    content: var(--smart-icon-file);
    color: var(--smart-primary);
  }

  &.smart-icon-powerpoint:before {
    content: var(--smart-icon-powerpoint);
    color: #C43E1C;
  }

  &.smart-icon-text:before {
    content: var(--smart-icon-text);
  }

  &.smart-icon-minus:before {
    content: var(--smart-icon-minus);
  }

  &.smart-icon-resize-full:before {
    content: var(--smart-icon-resize-full);
  }

  &.smart-icon-resize-small:before {
    content: var(--smart-icon-resize-small);
  }

  &.smart-icon-window-restore:before {
    content: var(--smart-icon-window-restore);
  }

  &.smart-icon-window-maximize:before {
    content: var(--smart-icon-window-maximize);
  }

  &.smart-icon-align-left:before {
    content: var(--smart-icon-align-left);
  }

  &.smart-icon-align-right:before {
    content: var(--smart-icon-align-right);
  }

  &.smart-icon-align-center:before {
    content: var(--smart-icon-align-center);
  }

  &.smart-icon-cancel:before {
    content: var(--smart-icon-cancel);
  }

  &.smart-icon-cancel-circled:before {
    content: var(--smart-icon-cancel-circled);
  }

  &.smart-icon-edit:before {
    content: var(--smart-icon-edit);
  }

  &.smart-icon-mode-edit:before {
    content: var(--smart-icon-mode-edit);
  }

  &.smart-icon-sort:before {
    content: var(--smart-icon-sort);
  }

  &.smart-icon-delete:before {
    content: var(--smart-icon-delete);
  }

  &.smart-icon-close:before {
    content: var(--smart-icon-close);
  }

  &.smart-icon-download:before {
    content: var(--smart-icon-download-alt);
  }


  &.smart-icon-search:before {
    content: var(--smart-icon-search);
  }

  &.smart-icon-history:before {
    content: var(--smart-icon-history);
  }

  &.smart-icon-settings:before {
    content: var(--smart-icon-settings);
  }

  &.smart-icon-visibility-off:before {
    content: var(--smart-icon-visibility-off);
  }

  &.smart-icon-visibility-on:before {
    content: var(--smart-icon-visibility);
  }

  &.smart-icon-add-filter:before {
    content: var(--smart-icon-add-filter);
  }

  &.smart-icon-duplicate:before {
    content: var(--smart-icon-duplicate);
  }

  &.smart-icon-check-empty:before {
    content: var(--smart-icon-check-empty);
  }

  &.smart-icon-check-squared:before {
    content: var(--smart-icon-check-squared);
  }

  &.smart-icon-check:before {
    content: var(--smart-icon-check);
  }

  &.smart-icon-number:before {
    content: '#';
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: var(--smart-font-family);
    -webkit-font-smoothing: antialiased;
    padding-left: 2px;
  }

  &.smart-icon-filter:before {
    content: var(--smart-icon-filter);
  }

  &.smart-icon-phone:before {
    content: var(--smart-icon-phone);
  }

  &.smart-icon-lock:before {
    content: var(--smart-icon-lock);
  }

  &.smart-icon-lock-open:before {
    content: var(--smart-icon-lock-open);
  }

  &.smart-icon-tasks:before {
    content: var(--smart-icon-tasks);
  }

  &.smart-icon-table-alt:before {
    content: var(--smart-icon-table-alt);
  }

  &.smart-icon-grid-alt:before {
    content: var(--smart-icon-grid-alt);
  }

  &.smart-icon-kanban:before {
    content: var(--smart-icon-kanban);
  }

  &.smart-icon-timeline:before {
    content: var(--smart-icon-timeline);
  }

  &.smart-icon-scheduler:before {
    content: var(--smart-icon-scheduler);
  }

  &.smart-icon-like:before {
    content: var(--smart-icon-like);
  }

  &.smart-icon-heart:before {
    content: var(--smart-icon-heart);
  }

  &.smart-icon-flag:before {
    content: var(--smart-icon-flag);
  }

  &.smart-icon-card:before {
    content: var(--smart-icon-card);
  }

  &.smart-icon-kanban-alt:before {
    content: var(--smart-icon-kanban-alt);
  }

  &.smart-icon-card-alt:before {
    content: var(--smart-icon-card-alt);
  }

  &.smart-icon-clock:before {
    content: var(--smart-icon-clock);
  }

  &.smart-icon-font:before {
    content: var(--smart-icon-font);
  }

  &.smart-icon-fontsize:before {
    content: var(--smart-icon-fontsize);
  }

  &.smart-icon-menu:before {
    content: var(--smart-icon-menu);
  }

  &.smart-icon-sort-down:before {
    content: var(--smart-icon-arrow-down);
  }

  &.smart-icon-sort-up:before {
    content: var(--smart-icon-arrow-up);
  }

  &.smart-icon-ellipsis:before {
    content: var(--smart-icon-ellipsis);
  }

  &.smart-icon-ellipsis-vert:before {
    content: var(--smart-icon-ellipsis);
    transform: rotate(90deg);
  }

  &.smart-icon-minus-squared:before {
    content: var(--smart-icon-minus-squared);
  }

  &.smart-icon-ok-squared:before {
    content: var(--smart-icon-ok-squared);
  }

  &.smart-icon-sort-name-up:before {
    content: var(--smart-icon-sort-name-up);
  }

  &.smart-icon-sort-name-down:before {
    content: var(--smart-icon-sort-name-down);
  }

  &.smart-icon-sort-alt-up:before {
    content: var(--smart-icon-sort-alt-up);
  }

  &.smart-icon-sort-alt-down:before {
    content: var(--smart-icon-sort-alt-down);
  }

  &.smart-icon-sort-number-up:before {
    content: var(--smart-icon-sort-number-up);
  }

  &.smart-icon-sort-number-down:before {
    content: var(--smart-icon-sort-number-down);
  }

  &.smart-icon-group:before {
    content: var(--smart-icon-group);
  }

  &.smart-icon-ungroup:before {
    content: var(--smart-icon-ungroup);
  }

  &.smart-icon-reload:before {
    content: var(--smart-icon-reload);
  }

  &.smart-icon-contains:before {
    content: var(--smart-icon-contains);
  }


  &.smart-icon-copy-record:before {
    content: var(--smart-icon-copy-record);
  }

  &.smart-icon-cut:before {
    content: var(--smart-icon-cut);
  }

  &.smart-icon-paste:before {
    content: var(--smart-icon-paste);
  }

  &.smart-icon-starts-with:before {
    content: var(--smart-icon-starts_with);
  }

  &.smart-icon-ends-with:before {
    content: var(--smart-icon-ends_with);
  }

  &.smart-icon-does-not-contain:before {
    content: var(--smart-icon-does_not_contain);
  }

  &.smart-icon-equals:before {
    content: var(--smart-icon-equals);
  }

  &.smart-icon-greater-than:before {
    content: var(--smart-icon-greater-than);
  }

  &.smart-icon-greater-than-equal:before {
    content: var(--smart-icon-greater-than-equal);
  }

  &.smart-icon-less-than:before {
    content: var(--smart-icon-less-than);
  }

  &.smart-icon-less-than-equal:before {
    content: var(--smart-icon-less-than-equal);
  }

  &.smart-icon-not-equal:before {
    content: var(--smart-icon-not-equal);
  }

  &.smart-icon-percentage:before {
    content: var(--smart-icon-percentage);
  }

  &.smart-icon-grip-vertical:before {
    content: var(--smart-icon-grip-vertical);
  }

  &.smart-icon-between:before {
    content: var(--smart-icon-between);
  }

  &.smart-icon-bold:before {
    content: var(--smart-icon-bold);
  }

  &.smart-icon-italic:before {
    content: var(--smart-icon-italic);
  }

  &.smart-icon-underline:before {
    content: var(--smart-icon-underline);
  }

  &.smart-icon-color-background:before {
    content: var(--smart-icon-color-background);
  }

  &.smart-icon-calendar:before {
    content: var(--smart-icon-calendar);
  }

  &.smart-icon-comment:before {
    content: var(--smart-icon-comment);
  }

  &.smart-icon-attention:before {
    content: var(--smart-icon-attention);
  }


  &.smart-icon-help-circled:before {
    content: var(--smart-icon-help-circled);
  }

  &.smart-icon-star:before {
    content: var(--smart-icon-star);
  }

  &.smart-icon-attention-circled:before {
    content: var(--smart-icon-attention-circled);
  }

  &.smart-icon-chart:before {
    content: var(--smart-icon-chart);
  }

  &.smart-icon-bell:before {
    content: var(--smart-icon-bell);
  }

  &.smart-icon-circle:before {
    content: var(--smart-icon-circle);
  }

  &.smart-icon-circle-empty:before {
    content: var(--smart-icon-circle-empty);
  }

  &.smart-icon-toggle-on:before {
    content: var(--smart-icon-toggle-on);
  }

  &.smart-icon-toggle-off:before {
    content: var(--smart-icon-toggle-off);
  }

  &.smart-icon-up:before {
    content: var(--smart-icon-up);
  }

  &.smart-icon-down:before {
    content: var(--smart-icon-up);
    transform: rotate(180deg);
  }

  &.smart-icon-right:before {
    content: var(--smart-icon-arrow-right);
  }

  &.smart-icon-left:before {
    content: var(--smart-icon-arrow-left);
  }
}


.smart-grid-pager {
  smart-pager {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin-left: 2px;
    margin-top: 5px;
    border: none;
  }
}

.smart-grid-aggregate-footer {
  position: absolute;
  bottom: 0px;
  z-index: 99;
  height: var(--smart-grid-aggregate-footer-height);
  width: 100%;
  border-top-style: solid;
  border-top-color: inherit;
  border-top-width: 1px;
}

.smart-grid-loader {
  margin: inherit;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  text-align: left;
  border: 6px solid rgba(43, 51, 63, 0.1);
  box-sizing: border-box;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  border-radius: 50%;
  width: calc(var(--smart-loader-size) + 10px);
  height: calc(var(--smart-loader-size) + 10px);

  &:after,
  &:before {
    content: "";
    position: absolute;
    margin: -6px;
    box-sizing: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: 1;
    border-style: inherit;
    border-color: inherit;
    border-top-color: inherit;
    border-width: 6px;
    animation-delay: 0.44s;
    animation: smart-loader-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, smart-loader-spin-fade 1.1s linear infinite;
  }

  &[loading-indicator-position="top"] {
    width: var(--smart-loader-size);
    height: var(--smart-loader-size);

    .smart-loader-container {
      top: 0;
      position: absolute;
      animation: smart-loader-container-pop-up-top 0.3s linear;
    }
  }

  &[loading-indicator-position="bottom"] {
    .smart-loader-container {
      top: -10%;
    }
  }

  &[loading-indicator-position="top"],
  &[loading-indicator-position="bottom"] {
    .smart-loader-container {
      display: block;
      position: relative;
      width: 100%;
      height: 10%;
      background-color: var(--smart-background);
      overflow: hidden;
      animation: smart-loader-container-pop-up-down 0.3s linear;
      left: 20%;
    }

    .smart-loader-label {
      position: absolute;
      display: block;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 60%;
      font-family: inherit;
      font-size: inherit;
      vertical-align: middle;
      white-space: nowrap;
    }
  }
}

.smart-grid-placeholder {
  user-select: none;
  text-align: center;
  display: flex;
  height: 100%;
  min-height: 50px;
  justify-content: center;
  align-items: center;
  background: var(--smart-background);
}

.smart-grid-content.auto-height {
  .smart-grid-placeholder {
    height: initial;
  }

  smart-grid-cell[addNewRow] {
    border-right: none;
  }
}

.smart-grid-special-cells-container {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}

.smart-grid-sort-animation {
  transition-timing-function: ease-in-out;
  transition-delay: 0;
}

smart-grid-row[edit] {
  .smart-grid-cell-container {

    &.near,
    &.far {
      z-index: 99;
    }
  }
}

.smart-grid-cell-container {
  height: 100%;
  position: relative;

  &.near,
  &.far {
    position: absolute;
    z-index: 6;
    box-sizing: content-box;
  }

  &.near {
    /* border-right: var(--smart-grid-freeze-splitter-size) solid var(--smart-border);*/
  }

  &.far {
    right: 0px;
    top: 0px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: var(--smart-border);
    border-left: var(--smart-grid-freeze-splitter-size) solid var(--smart-border);

    &.vscroll {
      right: var(--smart-scroll-bar-size);
    }
  }

  &.border-collapse {
    &.near {
      box-sizing: border-box;
      border-right: none;
    }

    &.far {
      box-sizing: border-box;
      border-left: none;
    }
  }
}

.smart-grid-cell-editor {
  >* {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
    margin: 0;
    outline: none;
    background: inherit;
    color: inherit;
    border-radius: 0px;
    --smart-border-top-left-radius: 0px;
    --smart-border-top-right-radius: 0px;
    --smart-border-bottom-left-radius: 0px;
    --smart-border-bottom-right-radius: 0px;
  }

  &.smart-grid-passowrd-input-cell-editor,
  &.smart-grid-phone-input-cell-editor,
  &.smart-grid-date-time-picker-cell-editor {
    border-radius: 0;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    background: inherit;
    color: inherit;
  }

  &.smart-grid-number-input-cell-editor {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    background: inherit;
    color: inherit;
    display: flex;

    .nav {
      padding: 0px;
      display: flex;
      width: var(--smart-editor-addon-width);
      height: 100%;
      flex-direction: column;
      color: var(--smart-surface-color);
      border-left: 1px solid var(--smart-border);
      background: var(--smart-surface);

      .up,
      .down {
        display: flex;
        height: 50%;
        overflow: hidden;
        cursor: pointer;
        font-family: var(--smart-font-family-icon);
        justify-content: center;
        align-items: center;
        outline: none;

        &:hover {
          background: var(--smart-ui-state-hover);
          color: var(--smart-ui-state-color-hover);
        }

        &:active,
        &[active] {
          background: var(--smart-ui-state-active);
          color: var(--smart-ui-state-color-active);
        }
      }

      .up {
        border-bottom: 1px solid var(--smart-border);

        &:after {
          content: var(--smart-icon-arrow-up);
        }
      }

      .down {
        &:after {
          content: var(--smart-icon-arrow-down);
        }
      }
    }
  }

  &.smart-grid-text-area-cell-editor {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    background: inherit;
    color: inherit;
    font-family: inherit;
  }


  &.smart-grid-input-cell-editor {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    background: inherit;
    color: inherit;
  }

  &.smart-grid-auto-complete-cell-editor {
    width: 100%;
    height: 100% !important;
    margin: 0;
    border-radius: 0;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    background: inherit;
    color: inherit;

    div,
    input {
      border-radius: 0;
    }
  }

  >input[type="checkbox"] {
    border: none;
    min-width: 16px;
    height: 16px;
    top: 6px;
    position: relative;
  }
}

.smart-grid-cell-content-popup {
  background: var(--smart-primary) !important;
  color: var(--smart-primary-color) !important;
  border: 1px solid var(--smart-primary) !important;
  z-index: 19 !important;
}

.smart-grid-cell-content-popup-content {
  padding-left: 6px;
  padding-right: 2px;
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: none !important;
}

.smart-grid-row-container {
  position: relative;

  &.near,
  &.far {
    z-index: 7;
    position: absolute;
    width: 100%;
  }

  &.near {
    border-bottom: var(--smart-grid-freeze-splitter-size) solid var(--smart-border);
    box-sizing: content-box;
  }

  &.far {
    border-top: var(--smart-grid-freeze-splitter-size) solid var(--smart-border);
    box-sizing: content-box;
    z-index: 11;
  }
}

.smart-grid-row-drag-feedback {
  height: auto !important;
  flex-direction: column;

  div {
    padding-top: 3px;
  }

  >div {
    display: flex;
    align-items: flex-start;
    padding: 3px;
    white-space: nowrap;
    font-family: var(--smart-font-family);
    font-size: 8px;
    background-color: var(--smart-background);
    color: var(--smart-background-color);
    flex-direction: column;
    max-height: 200px;
    overflow: hidden;
  }
}

.smart-grid-scroll-view {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .smart-grid-row-container {
    &.far {
      bottom: -2px;
    }
  }

  &.has-vscroll {
    smart-grid-row[data-id="9999999"] {
      box-shadow: none !important;
      --smart-grid-cell-header-horizontal-border: transparent;
      --smart-grid-cell-horizontal-border: transparent;
    }
  }

  &.vscroll {
    width: calc(100% - var(--smart-scroll-bar-size));

    .smart-grid-row-container {

      &.near,
      &.far {
        width: calc(100% - var(--smart-scroll-bar-size));
      }
    }
  }

  &.hscroll {
    .smart-grid-row-container {
      &.far {
        bottom: calc(-2px + var(--smart-scroll-bar-size));
      }
    }
  }
}

.smart-grid-summary-row-cell {
  background: var(--smart-surface) !important;
  color: var(--smart-surface-color) !important;
  border-color: var(--smart-border) !important;
  opacity: 1 !important;

  button {
    display: none;
  }

  .summary-value {
    font-size: 11px;
    opacity: 0.75;
    height: calc(100% - 2px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;

    .summary-value-part {
      transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.2s;

      &:hover {
        transform: scale(1.2);
      }
    }

    .smart-arrow-down,
    .smart-summary-placeholder {
      opacity: 0;
      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &[has-summary] {

      .smart-arrow-down,
      .smart-summary-placeholder {
        display: inherit;
        opacity: 0.7;
      }
    }

    &.summary-chooser,
    &:hover {

      .smart-arrow-down,
      .smart-summary-placeholder {
        opacity: 1;
      }
    }

    .label {
      margin-top: -3px;
    }
  }

  &::before {
    display: none;
  }
}

.smart-grid-resize-mode {
  overflow: visible;
}

.smart-grid-dialog-editor {
  &.add-column {
    display: flex;
    height: 30px;
    align-items: center;
    margin-bottom: 10px;
  }

  &.radio-group {
    height: auto;
  }
}

.smart-grid-dialog-add-column {
  max-height: 700px;

  .smart-footer {
    background: var(--smart-background) !important;
  }

  .smart-grid-dialog-radio-field {
    width: 100%;

    &:focus {
      outline: none;

      .smart-input {
        background: var(--smart-ui-state-hover);
        color: var(--smart-ui-state-color-hover);
      }
    }

    .smart-input {
      border-radius: 50% !important;
      margin-right: 10px;

      &:after {
        content: '' !important;
      }

      &[checked]:after {
        content: var(--smart-icon-radio) !important;
      }
    }
  }

  .smart-grid-dialog-boolean-field {
    display: flex;
    align-items: center;
    margin-bottom: 5px;

    .smart-grid-dialog-editor {
      margin-bottom: initial;
      margin-right: 10px;
    }
  }
}

.smart-grid-dialog-editor {
  &[template="colorInput"] {
    border: none !important;

    smart-color-input {
      border: 1px solid var(--smart-border)
    }
  }

  &[template="rating"] {
    border: none !important;

    .rating {
      display: flex;

      div {
        color: #DFDFDF;

        &.hover,
        &:hover {
          color: #FFBA05;
          opacity: 0.5;
        }

        &.value {
          visibility: inherit;
          color: #FFBA05 !important;
          opacity: 1 !important;
        }
      }

      &:hover {
        div {
          visibility: inherit;
        }
      }
    }
  }

  .attachments,
  .images {
    display: grid;
    grid-template-columns: 1fr auto auto;
    height: 100%;

    .file-container,
    .container {
      display: flex;
      height: calc(100% - 3px);
      align-items: center;
      padding-left: 5px;
    }

    .smart-drop-image {
      margin-left: -5px;
    }

    .smart-drop-image::after {
      font-family: var(--smart-font-family-icon);
      content: var(--smart-icon-download-alt);
      margin-left: 5px;
    }

    .arrowbtn {
      width: 15px;
      background: var(--smart-surface);

      &:hover {
        cursor: pointer;
        background: var(--smart-primary);
        color: var(--smart-primary-color);
      }
    }

    .attachment,
    img {
      height: 23px;
      width: 23px;
      border: 1px solid var(--smart-border);
      margin-right: 3px;
      border-radius: var(--smart-border-radius);

      &:hover {
        cursor: pointer;
        border-color: var(--smart-primary);
      }
    }
  }
}

.smart-grid-image-dialog {
  width: 500px !important;
  min-height: 400px !important;
  background: var(--smart-background);

  .smart-header {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tabs {
    width: 100%;
    height: 30px;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    margin-bottom: 5px;

    .tab {
      width: 50%;
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      color: var(--smart-background-color);
      cursor: pointer;

      label {
        cursor: pointer;
      }

      &.active {
        color: var(--smart-primary);
        border-bottom: 2px solid var(--smart-primary);
        font-weight: bold;
      }
    }
  }

  .preview {
    margin-top: 10px;

    p {
      font-size: 10px;
      text-align: center;
    }

    .smart-icon-delete {
      margin: 5px;

      &:hover {
        color: var(--smart-primary);
      }
    }

    .list {
      .item {
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 10px;
        color: var(--smart-background-color);
        max-width: 100px;
        margin-right: 10px;
        overflow: hidden;
        min-width: 60px;

        &:after {
          font-family: var(--smart-font-family-icon);
          width: 16px;
          height: 16px;
          content: var(--smart-icon-close);
          cursor: pointer;
        }

        .attachment,
        img {
          width: 50px;
          height: 50px;
          min-height: 50px;
          border: 2px solid transparent;

          &:hover {
            border: 2px solid var(--smart-primary);
            border-radius: var(--smart-border-radius);
            cursor: pointer;
          }
        }

        div {
          text-overflow: ellipsis;
          text-align: center;
        }
      }

      max-height: 100px;
      max-width: 500px;
      overflow: auto;
      display: flex;
      flex-direction: row;
    }
  }

  .url-zone {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 220px;

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

    .url-title {
      margin-top: 10px;
      font-size: 10px;
      color: var(--smart-background-color);
    }

    .smart-input {
      text-align: center;
    }
  }

  .smart-grid-drop-zone,
  .smart-grid-file-zone {
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background: var(--smart-surface);
    height: 220px;
    background: var(--smart-background);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.2s ease-out;
    flex-direction: column;
    outline: none;

    .title {
      cursor: pointer;
      font-size: 20px;
      font-weight: 500;
      height: 50px;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 20px;

      .smart-grid-icon {
        font-size: 24px;
        margin-bottom: 5px;
        color: var(--smart-primary);
      }
    }

    .subtitle {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      color: var(--smart-background-color);
    }

    &.smart-grid-file-zone {
      justify-content: space-between;
    }

    .files {
      overflow: auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      width: 100%;
      padding: 10px;
      font-family: var(--smart-font-family);
      font-size: var(--smart-font-size);

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 24px;
          height: 24px;
        }

        cursor: pointer;
        padding: 2px;

        &.active {
          background: var(--smart-ui-state-selected);
          border: 1px solid var(--smart-ui-state-border-selected);
        }
      }
    }
  }
}

.smart-grid-dialog-overlay {
  z-index: 100;
  background: #333;
  opacity: 0.1;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.smart-grid-overlay {
  z-index: 100;
  background: transparent;
  opacity: 0.1;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.smart-grid-text-area-dialog,
.smart-grid-slider-dialog {
  z-index: 9999;
  position: absolute;
  min-width: 160px;
  min-height: 140px;
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family);
  background: var(--smart-background);
  border: none;
  box-shadow: 0 0 0 3px var(--smart-primary) !important;
  color: var(--smart-background-color);
  box-sizing: border-box;
  border-radius: 1px;
  overflow: visible;
  color: var(--smart-background-color);
  box-sizing: border-box;
  overflow: visible;

  &.open {
    box-shadow: var(--smart-elevation-8) !important;
  }

  &.smart-grid-slider-dialog {
    min-height: 60px;
    max-width: 200px;
    transform: rotate(-90deg);
  }

  .smart-grid-text-area-resizer {
    position: absolute;
    background: var(--smart-primary);
    color: var(--smart-primary-color);
    height: 20px;
    width: 20px;
    font-size: 12px;
    right: -10px;
    top: -15px;
    border-radius: 50%;
    z-index: 9;
  }

  .smart-grid-text-area-container,
  .smart-grid-slider-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .smart-grid-slider-container {
    height: 100%;
    position: absolute;
    display: flex;
    padding: 6px;
    box-sizing: border-box;
  }

  smart-text-area,
  textarea {
    min-height: 180px;
    width: 100%;
    height: 180px;
    box-sizing: border-box;
    border: none;
    background: inherit;
    outline: none;
    resize: none;
    color: inherit;
  }
}

.smart-grid-cell-notification {
  position: absolute;
  background: var(--smart-primary);
  color: var(--smart-primary-color);
  border-radius: var(--smart-border-radius);
  padding: 7px;
  width: auto;
  height: auto;
  z-index: 99;
}

.smart-grid-validation-error {
  position: absolute;
  background: var(--smart-error);
  color: var(--smart-error-color);
  border-radius: var(--smart-border-radius);
  padding: 7px;
  width: auto;
  height: auto;
  z-index: 99;
}

.smart-selection-overlay {
  position: absolute;
  border: 2px solid var(--smart-primary);
  z-index: 10;
}

.smart-selection-overlay-content {
  background: var(--smart-ui-state-selected);
  opacity: 0.2;
  width: 100%;
  height: 100%;

  &:after {
    cursor: move;
    content: '';
    height: 4px;
    width: calc(100% - 10px);
    position: absolute;
    bottom: 0px;
  }
}

.smart-selection-overlay-border-content {
  border: 0px solid var(--smart-background);
  width: 100%;
  height: 100%;

  &.handle {
    &:after {
      border: 1px solid var(--smart-background);
      content: '';
      background: var(--smart-primary);
      width: 4px;
      height: 4px;
      position: absolute;
      right: -4px;
      bottom: -4px;
      cursor: crosshair;
    }
  }
}

.smart-input-overlay {
  background: var(--smart-ui-state-active);
  position: absolute;
  border-radius: 100%;
  opacity: 0;
  transform: scale(0);
  z-index: 9;
  cursor: pointer;

  &.smart-animate {
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
  }
}

.smart-input-overlay-on {
  opacity: 0.3;
  transform: scale(1);
}

.smart-window {
  &.smart-grid-popup {
    transition: opacity 0.2s, transform 0.2s ease-out;
    opacity: 0;
    font-family: var(--smart-font-family);
    font-size: var(--smart-font-size);
    transform: scaleY(0) !important;
    transform-origin: top !important;
    --smart-window-content-padding: 0px;
    --smart-window-header-height: 0px;
    box-shadow: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;

    &.open {
      transform: scale(1) !important;
      opacity: 1;
    }
  }

  &.smart-grid-dialog {
    transition: opacity 0.2s, transform 0.2s ease-out;
    transform: scale(0);
    opacity: 0;
    font-family: var(--smart-font-family);
    font-size: var(--smart-font-size);

    &.maximized {
      box-shadow: none !important;
      cursor: default !important;

      .smart-header-section {
        cursor: default !important;
      }
    }

    .smart-grid-edit-dialog-columns-separator {
      display: grid;
      margin-top: 10px;
      margin-bottom: 10px;
      align-items: center;
      grid-template-columns: 1fr auto 1fr;

      .toggle-button {
        margin-left: 10px;
        margin-right: 10px;
        cursor: pointer;

        &:hover {
          color: var(--smart-primary);
        }
      }

      span:first-child {
        border-bottom: 1px solid var(--smart-border);
      }

      span:last-child {
        border-top: 1px solid var(--smart-border);
      }
    }

    &[mobile] {
      left: 0px !important;
      top: 0px !important;
      width: 100% !important;
      height: 100% !important;
    }

    &.smart-grid-dialog-description,
    &.smart-grid-dialog-add-column {
      transform: scaleY(0) !important;
      transform-origin: top !important;

      &.view {
        transform-origin: unset !important;
        transform: scale(0) !important;
      }

      .smart-header-notes {
        margin-bottom: 10px;
        display: block;
      }

      &.center {
        transform: scale(0);
        transform-origin: unset;
      }
    }

    &.smart-grid-dialog-summary {
      transform: scaleY(0);
      transform-origin: bottom;
      --smart-window-content-padding: 0px;
      box-shadow: none;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      border-top-right-radius: 0px;
      border-top-left-radius: 0px;
    }

    &.smart-grid-dialog.disable-animation {
      transition: none;
    }

    &.smart-grid-side-panel {
      transform-origin: top right !important;
      transform: scaleX(0) !important;
      height: 100% !important;
      &.open {
        transform: scaleX(1) !important;
      }
    }

    &.smart-grid-dialog-expand-row {
      width: 750px !important;
      height: 500px !important;

      @media screen and (min-width: 1128px) {
        width: 1100px !important;
        height: 750px !important;
      }

      &.smart-grid-side-panel {
        transform-origin: top right !important;
        transform: scaleX(0) !important;
        height: calc(100% - 2px) !important;
        &.collapsed {
          width: 450px !important;
        }

        &.open {
          transform: scaleX(1) !important;
        }
      }

      --smart-window-content-padding: 0px;

      .smart-header-section {
        border-bottom: 1px solid var(--smart-border);

        span {
          margin-left: 10px;
        }
      }

      .smart-header-section,
      .smart-footer {
        background: var(--smart-background);
      }

      &[mobile] {
        width: 100% !important;
        height: 100% !important;
      }

      .smart-grid-edit-dialog-column-info {
        display: grid;
        grid-template-columns: 25px 1fr 25px;
        padding: 5px 0px;
        line-height: normal;

        &.header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          font-weight: bold;
          font-size: calc(var(--smart-font-size) + 1px);
        }
      }

      .tabs {
        width: 100%;
        height: 30px;
        overflow: hidden;
        background: var(--smart-background);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        margin-bottom: 10px;

        .tab {
          padding: 4px 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--smart-surface-color);
          cursor: pointer;
          white-space: nowrap;
          position: relative;

          &:hover {
            color: var(--smart-primary);
            border-bottom-color: var(--smart-primary) !important;
          }

          &.active {
            border-bottom: 2px solid var(--smart-surface-color);
          }
        }
      }

      .smart-content-container {
        width: 100%;
      }

      .smart-prev-button {
        &:after {
          content: var(--smart-icon-arrow-up);
        }
      }

      .smart-next-button {
        &:after {
          content: var(--smart-icon-arrow-down);
        }

        margin-right:5px;
      }

      [editor]:not([template="checkBox"]) {
        width: auto;
        max-width: initial;
      }

      &.disable-edit {
        .smart-grid-edit-dialog-layout {
          display: block;
          height: 100%;

          .smart-grid-edit-dialog-activity-container,
          .smart-drop-down-button {
            pointer-events: none;
            cursor: default;
            background: var(--smart-background);
            border: none;

            .smart-drop-down-button-icon,
            .up,
            .down,
            .arrow {
              opacity: 0;
            }
          }

          .smart-grid-dialog-editor {
            background: var(--smart-background);
            --smart-surface: var(--smart-background);
            pointer-events: none;
            border: none;
            border-bottom: 1px solid var(--smart-border);
          }

          .smart-grid-dialog-editor[template="image"] {
            pointer-events: initial;
            height: 100px;
            border: none;
            background: initial;

            .smart-grid-cell-editor>div {
              display: block !important;
            }

            .attachment,
            img {
              width: 95px;
              height: 95px;
            }

            .smart-drop-image,
            .smart-grid-icon.smart-icon-plus {
              display: none !important;
            }
          }
        }
      }

      .smart-grid-edit-dialog-layout {
        display: grid;
        grid-template-columns: 1fr 340px;
        grid-template-areas: "content sidebar"
          "footer sidebar";
        height: 100%;
        grid-template-rows: 1fr 45px;

        &[mobile] {
          display: flex;
          flex-direction: column;

          .smart-grid-edit-dialog-activity-container {
            position: absolute;
            top: 45px;
            width: 90%;
            height: calc(100% - 45px);
            right: 0px;
            box-shadow: var(--smart-elevation-8);
          }

          .smart-grid-edit-dialog-editors-container {
            height: calc(100% - 45px);
          }
        }

        &.hide-activity {
          grid-template-columns: 1fr;

          .smart-grid-edit-dialog-activity-container {
            display: none;
          }
        }

        .smart-footer {
          grid-area: footer;

          display: flex;
          padding-inline-start: 20px;
          padding-inline-end: 10px;
          justify-content: space-between;
          align-items: center;
          flex-direction: row-reverse;

          .smart-button {
            display: flex;
            align-items: center;
            height: 30px;

            &.primary {
              margin-right: 10px;
            }
          }
        }

        .smart-grid-edit-dialog-editors-container {
          padding: 20px;
          overflow: auto;
          grid-area: content;
          display: grid;
          gap: 10px;

          &.many {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 1rem;
          }
        }

        .smart-grid-edit-dialog-activity-container {
          background: var(--smart-surface);
          border-left: 1px solid var(--smart-border);
          overflow: hidden;
          grid-area: sidebar;

          >div {
            height: 100%;
          }

          .smart-grid-edit-dialog-row {
            height: 100%;
            display: grid;
            grid-template-rows: 40px 40px 40px 40px 40px 1fr;
          }

          .smart-user {
            position: relative;
            top: 10px;
            left: -3px;
          }

          .user-icon {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;

            &.image:after {
              content: '';
            }

            &:after {
              content: var(--smart-icon-user);
              font-family: var(--smart-font-family-icon);
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 24px;
            }
          }

          .history-header,
          .comments-header {
            white-space: nowrap;
          }

          .comments-tab {
            height: calc(100% - 35px);
          }

          .history-layout,
          .comments-layout {
            display: grid;
            grid-template-rows: 1fr auto;
            flex-direction: column;
            padding: 3px;
            height: calc(100% - 10px);
            overflow-x: hidden;
            overflow-y: auto;

            .no-comments {
              display: flex;
              position: absolute;
              width: 100%;
              height: 100%;
              align-items: center;
              justify-content: center;

              span {
                text-align: center;
                padding: 20px;
              }
            }

            .history-row,
            .comment {
              display: grid;
              grid-template-columns: 30px 1fr;
              grid-column-gap: var(--smart-data-view-padding);
              margin: var(--smart-data-view-padding);

              .history-header,
              .comment-header {
                display: grid;
                opacity: 0.75;
                grid-template-columns: 1fr auto auto auto;
                grid-column-gap: calc(var(--smart-data-view-padding) / 2);
                margin-bottom: var(--smart-data-view-padding);
              }

              .history-body,
              .comment-body {
                padding: 0.625rem 0.75rem;
                border-radius: var(--smart-border-radius);
                background: var(--smart-background);
                box-shadow: var(--smart-elevation-1);
                overflow: hidden;
                overflow-wrap: break-word;
                display: inline-block;
                margin: 2px;
                max-width: 220px;

                .detail {
                  margin-top: 10px;
                }

                &.edit {
                  min-width: 200px;
                  min-height: 50px;

                  .smart-text-area {
                    width: 100%;
                    height: 100%;
                    border-radius: 0px;
                    background: var(--smart-background);
                    color: var(--smart-background-color);
                    border: none;
                  }

                  box-shadow: none;
                }
              }

              .remove-button,
              .edit-button {
                cursor: pointer;
                opacity: 0;

                &:after {
                  content: var(--smart-icon-delete);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 100%;
                  font-family: var(--smart-font-family-icon);
                  cursor: pointer;
                }

                &.edit-button {
                  &:after {
                    content: var(--smart-icon-mode-edit);
                  }
                }

                &.enabled {
                  visibility: visible;
                }
              }

              &:hover {

                .remove-button,
                .edit-button {
                  opacity: 1;
                }
              }
            }

            .history,
            .comments {
              overflow-y: auto;
              overflow-x: hidden;
              min-height: 180px;
              max-height: 600px;
              position: relative;
            }

            .footer {
              height: 45px;
              display: flex;
              padding: 5px;
              box-sizing: border-box;
              transition: height cubic-bezier(0.4, 0, 0.2, 1) 0.2s;

              &.focus {
                height: 70px;
              }

              smart-text-area {
                width: 100%;
                height: 100%;
                border-radius: 0px;
              }

              smart-button {
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
                width: 100px;
                display: none;
                border-left-color: transparent;
              }
            }
          }

          .format-layout {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            padding: 5px;
            width: 300px;

            .font-family {
              smart-input {
                height: 35px;
                width: 150px !important;
              }
            }

            &.font-group {
              grid-column-gap: 10px;

              .format:first-child {
                grid-column: 1 / 2 span;
              }

              .format:last-child {
                width: 100px;
              }
            }

            &.button-group {
              background: var(--smart-background);
              border: 1px solid var(--smart-border);
              border-radius: var(--smart-border-radius);
              height: calc(7px + var(--smart-editor-height));
              width: 175px;
              padding: 0px;
              display: flex;
              justify-content: space-between;

              .bold,
              .italic,
              .linethrough,
              .underline {
                font-weight: normal;
                display: block;
                height: 100%;
                padding: 10px;
                width: 100%;
                border-bottom: 2px solid transparent;
                transition: border ease-in-out 0.2s;

                &:hover {
                  border-bottom: 2px solid var(--smart-primary)
                }

                &.checked {
                  background: var(--smart-primary);
                  color: var(--smart-primary-color);
                }
              }
            }
          }
        }
      }
    }

    .col-sm-6 {
      padding: 0px;
    }

    >.smart-container .smart-header-section {
      .smart-buttons-container {
        button {
          border-radius: var(--smart-border-radius);

          &:hover {
            background: var(--smart-ui-state-hover);
            color: var(--smart-ui-state-color-hover);
          }

          &.checked {
            background: var(--smart-ui-state-selected);
            color: var(--smart-ui-state-color-selected);
          }
        }
      }
    }

    &.open,
    &.view.open {
      transform: scale(1) !important;
      opacity: 1;
    }

    .smart-field-editor-error-label {
      font-size: 10px;
      color: var(--smart-error);
    }

    [editor]:not([template="checkBox"]) {
      max-width: 150px;
      height: 30px;
      overflow: hidden;
      border: 1px solid var(--smart-border);
      border-radius: var(--smart-border-radius);

      &[template="vote"] {
        border: none;
        width: 200px;
      }

      &[template="textarea"] {
        height: 180px;
        min-height: 120px;

        smart-text-area {
          width: 100% !important;
          height: 100%;

        }

        resize: vertical;
      }
    }

    [editor][focus] {
      border-color: var(--smart-primary);

      .smart-grid-cell-editor {
        border-color: var(--smart-primary);
      }
    }

    [editor][template="checkBox"] {
      height: 30px;
      display: flex;
      align-items: center;

      &:focus {
        outline: none;

        .smart-grid-check-box-cell-editor {
          background: var(--smart-ui-state-hover);
          color: var(--smart-ui-state-color-hover);
        }
      }
    }

    [editor]:not([template="checkBox"]) .smart-grid-cell-editor {
      width: 100%;
      height: 100%;
    }

    >.smart-container>.smart-footer {
      height: auto;
    }

    .column {
      display: flex;
      justify-content: space-between;
      padding: 5px;
      flex-direction: column;
    }

    .column label {
      justify-content: flex-end;
      padding: 5px 0px;
    }

    .smart-footer .smart-stack-layout {
      padding: 0px 10px;
    }

  }
}

/*smart-grid*/
smart-grid {
  width: var(--smart-grid-default-width);
  height: var(--smart-grid-default-height);
  grid-template-columns: var(--smart-grid-template-columns);
  grid-column-gap: var(--smart-grid-column-gap);
  grid-row-gap: var(--smart-grid-row-gap);
  contain: content;
  visibility: hidden;


  .smart-grid-cell-loading {
    height: 10px;
    position: absolute;
    top: calc(50% - 5px);
    background: var(--smart-surface);
    width: 80%;
    left: 10%;
    border: 1px solid var(--smart-surface);
    border-radius: var(--smart-border-radius);
  }

  .smart-grid-add-column-button,
  .smart-grid-add-row-button {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 12;
    width: 30px;
    background: var(--smart-surface);
    transform: scale(0);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    height: 28px;

    &.insert {
      transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &.float {
      height: 24px;
      width: 24px;
      border-radius: 50%;
      font-size: 14px;
      border: 1px solid var(--smart-primary);
      left: 5px;
      bottom: 5px;
      background: var(--smart-primary);
      color: var(--smart-primary-color);
    }

    &.smart-grid-add-column-button {
      right: 5px;
      left: initial;
      top: 55px;
    }

    &.show {
      transform: scale(1);
      opacity: 1;

      &:active,
      &:hover {
        color: var(--smart-primary-color);
        background: var(--smart-primary);

        &.float {
          transform: scale(1.2);
          box-shadow: var(--smart-elevation-6);
        }
      }
    }
  }

  &.smart-kanban-view {
    background: #fafafa;

    .smart-grid-add-row-button {
      display: none !important;
    }
  }

  &[appearance_hide-column-group-lines] {
    smart-grid-column:not([column-group-first-child]) {
      &[column-group] {
        &:before {
          background: transparent !important;
        }
      }
    }
  }

  &[appearance_allow-hover] {

    smart-grid-cell:not([focus]) {
      &:hover {
        &:not(.smart-add-new-column) {
          background: var(--smart-ui-state-hover);
          color: var(--smart-ui-state-color-hover);

          .smart-label {
            background: var(--smart-ui-state-hover) !important;
            color: var(--smart-ui-state-color-hover) !important;
          }
        }
      }
    }

    &:not([selection_allow-cell-selection]) {
      smart-grid-row:hover {
        smart-grid-cell:not([focus]) {
          background: var(--smart-ui-state-hover);
          color: var(--smart-ui-state-color-hover);

          .smart-label {
            background: var(--smart-ui-state-hover) !important;
            color: var(--smart-ui-state-color-hover) !important;
          }
        }
      }
    }
  }


  &[tree] {
    smart-grid-cell[has-toggle-button]:not([detail]) {
      button[toggle-button] {
        padding-right: 7px;
        padding-right: 14px;
        margin-left: 7px;
        cursor: pointer;
      }
    }
  }

  &.smart-element {
    visibility: inherit;
  }

  &:not([selection_allow-cell-selection]) {
    &[focus] {
      &[appearance_show-selection-on-top] {
        smart-grid-row[focus] {

          smart-grid-cell:not([editor]):not([header]),
          smart-grid-cell:not([editor]):not([header]) .smart-label {
            background: rgba(var(--smart-primary-rgb), 0.7) !important;
            color: var(--smart-primary-color) !important;
            border-color: var(--smart-primary) !important;
          }
        }
      }

      smart-grid-row[focus] {
        >.smart-grid-cell-container {

          smart-grid-cell:not([editor]):not([header]),
          smart-grid-cell:not([editor]):not([header]) .smart-label:not([style]) {
            background: rgba(var(--smart-primary-rgb), 0.7) !important;
            color: var(--smart-primary-color) !important;
            border-color: var(--smart-primary) !important;
          }

          smart-grid-cell:not([editor]):not([header]) {
            &:before {
              background: var(--smart-primary);
            }
          }
        }
      }
    }
  }

  &[selection_allow-cell-selection] {
    smart-grid-row[focus] {
      smart-grid-cell[focus]:not([editor]):not([header]) {
        background: var(--smart-primary);
        color: var(--smart-primary-color);
        border-color: var(--smart-primary);
      }
    }
  }
}

.smart-grid {
  &.smart-container {
    width: var(--smart-grid-default-width);
    height: var(--smart-grid-default-height);
    grid-template-columns: var(--smart-grid-template-columns);
    grid-column-gap: var(--smart-grid-column-gap);
    grid-row-gap: var(--smart-grid-row-gap);
    contain: content;
    visibility: hidden;
  }

  >.smart-container,
  &.smart-container {
    .smart-grid-header {
      background: var(--smart-surface);
      color: var(--smart-surface-color);
      border-color: var(--smart-border);
      height: var(--smart-grid-header-height);
      border-bottom-width: 1px;
      border-bottom-style: solid;
      width: 100%;
    }

    .smart-grid-column-header {
      height: var(--smart-grid-column-header-height);
      min-height: 30px;
      color: var(--smart-surface-color);
      overflow: hidden;
      position: relative;
      z-index: 99;
    }

    .smart-grid-pager {
      height: var(--smart-pager-default-height);
      overflow: hidden;
      z-index: 99;
      border-top-width: 1px;
      border-top-style: solid;
      border-top-color: var(--smart-border);
      width: 100%;
      background: var(--smart-surface);
      color: var(--smart-surface-color);

      &[top] {
        border-top-color: transparent;
        border-bottom: 1px solid var(--smart-border);
      }
    }

    .smart-grid-content {
      width: 100%;
      height: 100%;
      padding: 0;
      overflow: hidden;
      border: none;
      background: var(--smart-surface);
    }

    &.smart-grid-resize-mode {
      overflow: visible;
    }
  }

  &.smart-element {
    visibility: inherit;
  }

  &[sorting_mode="many"] {
    smart-grid-column[sort-index] {
      .smart-label.align-right {
        margin-left: -10px;
      }

      .smart-sort-button[order] {
        width: 40px;
      }

      .smart-sort-button:after {
        content: attr(order);
        font-family: var(--smart-font-family);
        font-size: 11px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: var(--smart-primary);
        color: var(--smart-primary-color);
        padding: 5px;
        margin-left: 5px;
        height: 8px;
        box-sizing: content-box;
      }
    }
  }


  smart-grid-row {
    &[data-id="9999999"] {
      box-shadow: rgba(140, 149, 159, 0.15) 0px 3px 6px 0px;
    }

    .smart-justify-flex-start {
      justify-content: flex-start important;
    }

    .smart-grid-row-detail {
      overflow: hidden;
      width: 100%;
      z-index: 3;
      position: absolute;
      background: var(--smart-background);
      color: var(--smart-background-color);
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: var(--smart-border);
      transform-origin: top;
      transform: scaleY(0);
      display: flex;
      justify-content: flex-start;

      >div {
        width: 100%;
        height: 100%;
        line-height: initial;
        overflow: hidden;
        position: relative;
      }
    }

    &[has-detail] {
      transition: height .25s ease-in-out;

      .smart-grid-row-detail.smart-animate {
        transition: transform .25s ease-in-out, height .25s ease-in-out;
      }
    }

    &[show-detail] {
      .smart-grid-row-detail {
        transform: scaleY(1);
      }
    }

    &[unbound] {
      smart-grid-cell {
        background: var(--smart-grid-cell-background-unbound);
        color: var(--smart-grid-cell-color-unbound);
      }
    }

    smart-grid-cell:not(.smart-grid-column-border) {
      &.smart-grid-horizontal-border-collapse {
        &:after {
          height: 0px;
        }
      }

      &.smart-grid-vertical-border-collapse {
        &:before {
          width: 0px;
        }
      }
    }
  }

  smart-grid-column {
    .smart-grid-command-item {
      padding: 0px;
      align-items: center;
      justify-content: center;
      border-radius: 0px;
      ;
    }

    .smart-add-new-column {
      border-right: 1px solid var(--smart-border);

      &:hover {
        background: var(--smart-ui-state-hover);
        color: var(--smart-ui-state-color-hover);
      }
    }

    &:not(.smart-grid-column-border) {
      &.smart-grid-horizontal-border-collapse {
        &:after {
          height: 0px;
        }
      }

      &.smart-grid-vertical-border-collapse {
        &:before {
          width: 0px;
        }
      }
    }

    &.afterTarget {
      &:last-child:after {
        right: 0px;
      }
    }

    &.dragged {
      background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
      background-size: 3em 3em;
    }
  }

  smart-grid-cell {
    .smart-grid-command-item {
      padding: 0px 3px;
      overflow: hidden;
    }

    &.dragged {
      background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
      background-size: 3em 3em;
    }
  }

  smart-scroll-bar {
    overflow: visible;
    position: absolute;
    bottom: 0;
    height: calc(var(--smart-scroll-bar-size));
    width: 100%;
    z-index: 11;
    touch-action: none;

    &:after {
      position: absolute;
      content: '';
      width: var(--smart-scroll-bar-size);
      height: var(--smart-scroll-bar-size);
      min-width: var(--smart-scroll-bar-far-size);
      background: var(--smart-scroll-bar-background);
      left: 100%;
      top: 0px;
    }

    &:before {
      position: absolute;
      content: '';
      width: var(--smart-scroll-bar-near-size);
      height: var(--smart-scroll-bar-size);
      background: var(--smart-scroll-bar-background);
      left: calc(0px - var(--smart-scroll-bar-near-size));
      top: 0px;
    }

    &.smart-element {
      border: none;
      border-radius: 0;
    }

    &.bottom-corner-visible {
      width: calc(100% - var(--smart-scroll-bar-size));
    }

    &[orientation="vertical"] {
      right: 0;
      top: 0;
      height: 100%;
      width: calc(var(--smart-scroll-bar-size));
      border-left: 1px solid var(--smart-border);

      &:before {
        position: absolute;
        content: '';
        height: var(--smart-scroll-bar-near-size);
        width: var(--smart-scroll-bar-size);
        background: var(--smart-scroll-bar-background);
        left: -1px;
        top: calc(0px - var(--smart-scroll-bar-near-size));
        border-left: 1px solid var(--smart-border);
      }

      &:after {
        position: absolute;
        content: '';
        width: var(--smart-scroll-bar-size);
        height: var(--smart-scroll-bar-size);
        min-height: var(--smart-scroll-bar-far-size);
        background: var(--smart-scroll-bar-background);
        left: 0px;
        bottom: calc(0px - var(--smart-scroll-bar-far-size));
        top: auto;
        min-width: 0;
        z-index: -1;
      }

      &.bottom-corner-visible {
        height: calc(100% - var(--smart-scroll-bar-size));
      }
    }


  }

  .smart-data-view-header-drop-down {
    transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    transform: scaleY(0);

    &.open {
      transform: scaleY(1);
    }
  }

  .smart-breadcrumb-items {

    >.target:before,
    >.afterTarget:last-child:after {
      content: '';
      display: none;
    }
  }

  .smart-grid-command-item {
    display: flex;
    padding: 5px 8px;
    user-select: none;
    min-width: 25px;
    border: 1px solid transparent;
    cursor: pointer;
    border-top-left-radius: var(--smart-item-border-top-left-radius);
    border-top-right-radius: var(--smart-item-border-top-right-radius);
    border-bottom-right-radius: var(--smart-item-border-bottom-right-radius);
    border-bottom-left-radius: var(--smart-item-border-bottom-left-radius);

    &:hover {
      background: var(--smart-ui-state-hover);
      color: var(--smart-ui-state-color-hover);
      border: 1px solid var(--smart-ui-state-border-hover);
    }

    &:active {
      background: var(--smart-ui-state-active);
      color: var(--smart-ui-state-color-active);
      border: 1px solid var(--smart-ui-state-border-active);
    }

    .smart-grid-icon {
      display: flex;
      min-width: 16px;
      width: auto;
    }

    span:last-child:not(:first-child) {
      margin-left: 4px;
    }
  }

  .smart-grid-command-bar {
    display: flex;
    align-items: center;
    padding: 5px;

    .smart-grid-icon {
      display: flex;
    }
  }

  .smart-grid-row:not([leaf]) {
    smart-grid-cell[group]:not([header]) div:not([content]) {
      visibility: hidden;
    }
  }

  .smart-grid-resize-line {
    position: absolute;
    z-index: 99;
    opacity: 0.8;
    width: var(--smart-grid-resize-line-size);
    background: var(--smart-primary);

    &.row {
      height: var(--smart-grid-resize-line-size);
    }
  }

  .smart-grid-resize-tooltip {
    position: absolute;
    bottom: 0px;
    z-index: 99;
    background: var(--smart-primary);
    color: var(--smart-primary-color);
    padding: 5px;
    transition: width .2s ease-out;
  }

  .smart-grid-drag-line {
    position: absolute;
    z-index: 199;
    opacity: 1;
    width: calc(2 * var(--smart-grid-resize-line-size));
    background: var(--smart-primary);
    font-family: var(--smart-font-family-icon);
    transition: opacity cubic-bezier(0.6, 0.2, 0, 0.8) 0.25s;

    &:after {
      content: var(--smart-icon-arrow-up);
      color: var(--smart-primary);
      font-size: 16px;
      position: absolute;
      left: 0px;
      bottom: 0px;
      margin-left: -7px;
      font-weight: bold;
      margin-bottom: -11px;
    }

    &:before {
      content: var(--smart-icon-arrow-down);
      color: var(--smart-primary);
      font-size: 16px;
      position: absolute;
      left: 0px;
      top: 0px;
      margin-left: -7px;
      font-weight: bold;
      margin-top: -7px;
    }

    &.row {
      height: calc(2 * var(--smart-grid-resize-line-size));

      &:after {
        content: var(--smart-icon-arrow-left);
        right: 0px;
        left: initial;
        bottom: 0px;
        margin-right: -7px;
        font-weight: bold;
        margin-bottom: -7px;
      }

      &:before {
        content: var(--smart-icon-arrow-right);
        left: 0px;
      }
    }
  }

  &[tree] {
    smart-grid-row[level] {
      >.smart-grid-cell-container>smart-grid-cell div[content] {
        line-height: initial;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        >div[checkbox]:not(.smart-hidden) {
          margin-right: 7px;
        }
      }
    }
  }

  &[grouped] {
    smart-grid-row[level] {
      >.smart-grid-cell-container>smart-grid-cell div[content] {
        line-height: initial;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        >div[checkbox]:not(.smart-hidden) {
          margin-right: 7px;
        }
      }

      smart-grid-cell[group] {
        border-right: 1px solid var(--smart-border);
        padding-right: 1px;

        div[group-advanced] {
          font-size: 12px;
          grid-template-columns: auto auto auto;
          display: grid;
          grid-column-gap: 5px;
          align-items: center;

          &:hover {
            span[group] {
              span {
                transform: scale(1.1);
                opacity: 1;
                color: var(--smart-primary);
              }
            }
          }

          span[group] {
            span {
              opacity: 0.7;
              font-weight: normal;
              margin-left: -8px;
              transform: scale(0.9);
            }

            display: flex;
            font-weight: bold;
          }

          span[value] {
            font-size: var(--smart-font-size);
            position: relative;
            white-space: nowrap;
            text-overflow: ellipsis;
            user-select: none;
            display: flex;
            align-items: center;
            padding: 2px 6px 2px 6px;
            font-weight: 400;
            border-radius: 20px;
            background-color: var(--smart-primary);
            color: var(--smart-primary-color);
            border: 1px solid var(--smart-primary);
          }

          span[summary] {
            font-weight: 400;
            font-size: 10px;
            opacity: 0.7;
          }

          &:hover {
            span[summary] {
              opacity: 1;
            }
          }
        }
      }
    }
  }

  &[appearance_allow-hover] {
    &:not([selection_allow-cell-selection]) {
      smart-grid-row {
        &:hover {
          smart-grid-cell {
            &:not(.smart-add-new-column) {
              background: var(--smart-ui-state-hover);
              color: var(--smart-ui-state-color-hover);
              cursor: default;
            }
          }
        }
      }
    }
  }

  &[appearance_allow-header-hover] {

    smart-grid-column:not(.top-far-corner):not(.top-near-corner)[header],
    smart-grid-row {
      &:hover {
        smart-grid-cell[header] {
          background: var(--smart-ui-state-hover);
          color: var(--smart-ui-state-color-hover);
          cursor: default;
        }
      }
    }
  }

  &[appearance_show-column-header-drag-icon] {
    &[behavior_allow-column-reorder] {
      smart-grid-column:not([auto-generated]) {
        .smart-drag-handle {
          transition: opacity ease-in-out 0.2s;
          overflow: hidden;
          opacity: 0;
          width: 5px;
          height: 100%;
          position: absolute;
          left: 1px;
          z-index: 9;
          font-family: var(--smart-font-family-icon);
          cursor: move;

          &:before {
            position: relative;
            font-family: var(--smart-font-family-icon);
            content: var(--smart-icon-ellipsis);
            transform: rotate(90deg);
            display: flex;
            justify-content: center;
          }

          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }

  &[appearance_show-row-header-drag-icon] {
    smart-grid-row smart-grid-cell[header]:not([detail]) {
      >.smart-label {
        height: 100%;
        font-family: var(--smart-font-family-icon);
        font-style: normal;
        font-weight: normal;
        color: inherit;
        font-size: 14px;
        text-decoration: inherit;
        font-variant: normal;
        text-transform: none;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        min-width: 0px;

        &:before {
          background: var(--smart-ui-state-hover);
          color: var(--smart-ui-state-color-hover);
          position: absolute;
          left: 0px;
          width: 100%;
          content: var(--smart-icon-ellipsis);
          cursor: move;
          transform: rotate(90deg);
          display: flex;
          align-items: flex-end;
          justify-content: center;
          opacity: 0.25;
        }
      }
    }
  }

  &[appearance_show-row-header-edit-icon] {

    smart-grid-row[edit],
    smart-grid-row[edit][focus] {
      smart-grid-cell[header]:not([detail]) {
        >.smart-label {
          height: 100%;
          font-family: var(--smart-font-family-icon);
          font-style: normal;
          font-weight: normal;
          color: inherit;
          font-size: 14px;
          text-decoration: inherit;
          font-variant: normal;
          text-transform: none;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          min-width: 0px;

          &:before {
            content: var(--smart-icon-mode-edit);
            background: var(--smart-ui-state-hover);
            color: var(--smart-ui-state-color-hover);
            position: absolute;
            left: 0px;
            width: 100%;
          }
        }

        &:last-child {
          >.smart-label {
            height: 100%;
            font-family: var(--smart-font-family-icon);
            font-style: normal;
            font-weight: normal;
            color: inherit;
            font-size: 14px;
            text-decoration: inherit;
            font-variant: normal;
            text-transform: none;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            min-width: 0px;
          }
        }
      }
    }
  }

  &[appearance_show-row-comments],
  &[appearance_show-row-status] {
    smart-grid-row {
      smart-grid-cell[header]:not([detail]) {
        z-index: 9;
      }

      &[focus][selected="indeterminate"],
      &:hover {
        smart-grid-cell[header]:not([detail]):not([group]):not(.smart-add-new-row) {
          width: 25px !important;
        }

        smart-grid-cell[detail][has-toggle-button] {
          &[selected] {
            background: var(--smart-ui-state-hover) !important;
          }

          button.row-detail {
            visibility: inherit !important;

            &:after {
              content: var(--smart-icon-resize-full);
              font-size: 13px;
              color: var(--smart-primary);
            }
          }
        }
      }
    }
  }

  &[appearance_show-row-header-focus-icon] {
    smart-grid-row[focus]:not([edit]) {
      smart-grid-cell[header] {
        &:not([detail]):not(:hover)>.smart-label:before {
          content: var(--smart-icon-arrow-right);
        }

        &:not([detail]),
        &:not([detail]):last-child {
          >.smart-label {
            height: 100%;
            font-family: var(--smart-font-family-icon);
            font-style: normal;
            font-weight: normal;
            color: inherit;
            font-size: 14px;
            text-decoration: inherit;
            font-variant: normal;
            text-transform: none;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            min-width: 0px;
          }
        }

        &:not([detail]) {
          >.smart-label {
            &:before {
              content: var(--smart-icon-check-empty);
              background: var(--smart-ui-state-hover);
              color: var(--smart-ui-state-color-hover);
              position: absolute;
              left: 0px;
              width: 100%;
            }
          }
        }


      }
    }
  }

  &[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] {
    smart-grid-row:hover smart-grid-cell[header]:not([group]) {

      &:not([detail]),
      &:not([detail])[selected] {
        >.smart-label {
          height: 100%;
          font-family: var(--smart-font-family-icon);
          font-style: normal;
          font-weight: normal;
          color: inherit;
          font-size: 14px;
          text-decoration: inherit;
          font-variant: normal;
          text-transform: none;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          min-width: 0px;

          &:before {
            content: var(--smart-icon-check-empty);
            background: var(--smart-surface);
            color: var(--smart-surface-color);
            position: absolute;
            left: 0px;
            width: 100%;
          }
        }

        &:last-child {
          >.smart-label {
            height: 100%;
            font-family: var(--smart-font-family-icon);
            font-style: normal;
            font-weight: normal;
            color: inherit;
            font-size: 14px;
            text-decoration: inherit;
            font-variant: normal;
            text-transform: none;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            min-width: 0px;
          }
        }

        &[selected] {
          >.smart-label:before {
            content: var(--smart-icon-check-squared);
            transform: rotate(0deg);
          }
        }
      }

      &:not([detail])[selected] {
        >.smart-label:before {
          font-family: var(--smart-font-family-icon);
          font-style: normal;
          font-weight: normal;
          content: var(--smart-icon-check-squared);
          transform: rotate(0deg);
        }
      }
    }

    smart-grid-row smart-grid-cell[header]:not([group]) {

      &:not([detail]):hover,
      &:not([detail])[selected] {
        >.smart-label {
          height: 100%;
          font-family: var(--smart-font-family-icon);
          font-style: normal;
          font-weight: normal;
          color: inherit;
          font-size: 14px;
          text-decoration: inherit;
          font-variant: normal;
          text-transform: none;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          min-width: 0px;

          &:before {
            content: var(--smart-icon-check-empty);
            background: var(--smart-ui-state-hover);
            color: var(--smart-ui-state-color-hover);
            position: absolute;
            left: 0px;
            width: 100%;
          }
        }

        &:last-child {
          >.smart-label {
            height: 100%;
            font-family: var(--smart-font-family-icon);
            font-style: normal;
            font-weight: normal;
            color: inherit;
            font-size: 14px;
            text-decoration: inherit;
            font-variant: normal;
            text-transform: none;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            min-width: 0px;
          }
        }

        &[selected] {
          >.smart-label:before {
            content: var(--smart-icon-check-squared);
            transform: rotate(0deg);
          }
        }
      }

      &:not([detail])[selected] {
        >.smart-label:before {
          font-family: var(--smart-font-family-icon);
          font-style: normal;
          font-weight: normal;
          content: var(--smart-icon-check-squared);
          transform: rotate(0deg);
        }
      }
    }
  }
}

smart-grid>.smart-container,
.smart-grid.smart-container {
  height: 100%;
  width: 100%;
  margin-bottom: -3px;
  border-style: solid;
  border-width: 0;
  border-color: transparent;
  position: relative;
  overflow: hidden;
  max-height: inherit;
  padding: 0px;
}

smart-grid-row {
  display: block;
  overflow: visible;
  position: relative;
  padding: 0px;
  height: var(--smart-grid-row-height);
  cursor: default;

  &:hover {
    smart-grid-cell[checkbox][header][auto-show] {
      .smart-input {
        opacity: 1;
        border-color: var(--smart-border);
      }
    }
  }

  &[aria-rowindex="1"] {
    .smart-grid-row-card-container {
      .smart-card-layout-view {
        padding-top: 10px;
      }
    }
  }

  .smart-grid-row-card-container {
    width: 100%;
    height: 100%;

    .smart-card-layout-view {
      min-width: unset;
      min-height: unset;
      width: calc(100% - 20px);
      height: 100%;
      padding: 10px;
      padding-top: 0px;
      background: var(--smart-surface);

      .smart-card-container {
        display: flex;
        justify-content: space-evenly;
        order: none;
        width: 100%;
        height: 100%;
        grid-column-gap: var(--smart-card-view-column-gap, var(--smart-card-view-gap));
        grid-row-gap: var(--smart-card-view-row-gap, var(--smart-card-view-gap));


        .smart-card {
          width: 100% !important;
          display: flex;
          margin: 0;
          border: var(--smart-border-width) solid var(--smart-border);
          width: unset;
          padding: var(--smart-data-view-padding);
          overflow: auto;
          font-family: inherit;
          font-size: inherit;
          background-color: var(--smart-background);
          color: var(--smart-background-color);
          border-top-left-radius: var(--smart-border-top-left-radius);
          border-top-right-radius: var(--smart-border-top-right-radius);
          border-bottom-left-radius: var(--smart-border-bottom-left-radius);
          border-bottom-right-radius: var(--smart-border-bottom-right-radius);
          box-shadow: var(--smart-elevation-2);
          transition: box-shadow ease-in-out 0.2s;
          position: relative;

          &.smart-card-tree-header {
            cursor: pointer;
          }

          &.smart-card-header {
            cursor: pointer;

            .smart-card-view-cell {
              justify-content: center;
            }

            .smart-card-view-value {

              &:after {
                font-family: var(--smart-font-family-icon);
                content: var(--smart-icon-arrow-right);
              }
            }
          }

          &[editable]:not(.smart-card-header) {
            cursor: pointer;

            &[edit] {
              border: 1px solid var(--smart-primary);
            }

            &[edit],
            &:hover {
              &:after {
                content: var(--smart-icon-mode-edit);
                font-family: var(--smart-font-family-icon);
                width: 16px;
                height: 16px;
                right: 3px;
                bottom: 6px;
                position: absolute;
              }
            }
          }

          .smart-card-data-container {
            width: 100%;

            &.col-2 {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));

              .smart-card-view-cell {
                justify-content: flex-start;
                column-gap: 5px;
                flex-direction: column;
                align-items: flex-start;

                .smart-card-view-value {
                  width: 100%;
                }

                &.center {
                  align-items: center;
                }

                &.right {
                  align-items: flex-end;
                }
              }
            }
          }

          &:hover {
            box-shadow: var(--smart-elevation-4);
          }

          .smart-card-view-cell {
            display: grid;
            grid-template-columns: auto auto;
            align-items: center;
            justify-content: space-between;
            min-height: 30px;
            margin-bottom: 0px;
            padding-left: 10px;
            overflow: hidden;

            &.span {
              grid-column: 1 / span 2;
            }

            .smart-arrow-down {
              visibility: hidden;
            }

            &.row-span {
              .smart-card-view-value {
                smart-grid-cell {
                  height: 100%;
                  white-space: normal;

                  .smart-label {
                    white-space: normal;
                  }
                }
              }
            }

            &.smart-card-view-title {
              font-size: 1rem;
              font-weight: bold;
              display: flex !important;
              align-items: center !important;
            }

            &.vertical {
              display: grid;
              grid-template-columns: unset;
              grid-template-rows: 16px 1fr;
              align-items: flex-start;
              grid-row-gap: 0.25rem;
              justify-content: stretch;

              .smart-card-view-label,
              .smart-card-view-value {
                width: 100%;
                height: 100%;
              }
            }

            .smart-card-view-label {
              font-size: 12px;
              opacity: 0.7;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              min-width: 50%;
              position: relative;

              &.icon:after {
                content: "";
                position: absolute;
                left: -5px;
                top: 0;
                width: 30px;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center;
              }
            }

            .smart-card-view-value {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              smart-grid-cell {
                width: 100%;
                height: auto;
                position: static;
                display: block;

                .attachments {
                  display: block;
                }

                &[template="image"] {

                  .file-container {
                    justify-content: center;
                  }

                  img {
                    max-width: 100%;
                    max-height: 100%;
                    width: 100%;
                    height: 100%;
                    display: block;
                  }

                  .images {
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    top: 3px;
                  }

                  .smart-navigation {
                    width: 100%;
                    display: flex;
                    width: 100%;
                    height: 26px;
                    align-items: center;
                    justify-content: center;
                    grid-column-gap: 3px;
                    margin-top: -3px;

                    .smart-navigation-item {
                      width: 12px;
                      height: 12px;
                      border: 2px solid var(--smart-border);

                      &.active,
                      &:hover {
                        width: 14px;
                        height: 14px;
                        border-color: var(--smart-primary);
                      }
                    }
                  }
                }

                .textwrap {
                  display: block;
                }

                &::before,
                &::after {
                  content: '';
                  border: none;
                  width: 0px;
                  height: 0px;
                }

                .smart-label {
                  white-space: nowrap;
                  text-align: unset;
                  padding-left: 0px;
                  padding-right: 0px;
                }
              }
            }
          }
        }
      }
    }
  }


  &[filter-row],
  &[summary-row] {
    background: var(--smart-surface);
  }

  smart-grid-cell[header] {
    &.smart-decorate {
      >.smart-label {
        padding-right: 5px;
      }

      &.row-number:not(.smart-add-new-row) {
        &::before {
          border-radius: 5px;
          width: 5px;
          position: absolute;
          height: 70%;
          right: 4px;
          content: '';
          top: 15%;
          background: var(--smart-decorate-color);
        }
      }
    }

    &[freeze] {
      background: var(--smart-surface);
      color: var(--smart-surface-color);
    }

    .smart-grid-cell-editor.smart-grid-input-cell-editor {
      background: var(--smart-background);
      color: var(--smart-background-color);
      position: absolute;
      z-index: 10;
      left: 1px;
      top: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
      height: calc(100% - 1px);
      box-sizing: border-box;
    }
  }

  .smart-grid-row-sub-container {
    overflow: visible;
    width: 100%;
    z-index: 3;
    position: relative;
    transform-origin: top;

    &.smart-animate {
      transition: transform .25s ease-in-out, height .25s ease-in-out;
    }
  }

  .smart-grid-command-bar {
    z-index: 7;
    height: calc(100% - 1px);
    position: absolute;
    right: 0px;
    top: 0px;
    box-sizing: border-box;
    overflow: hidden;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s ease;
    background: var(--smart-surface);
    color: var(--smart-surface-color);
    border-left: 1px solid var(--smart-border);

    &.show {
      transform: scaleX(1);
    }
  }

  &[edit] {
    smart-grid-cell:not(rowspan):not(colspan)[editor] {
      z-index: 7;
    }

    &[error] {
      z-index: 101;

      smart-grid-cell[editor] {
        border-color: var(--smart-error);
      }
    }
  }

  &[filter="indeterminate"] {
    opacity: 0.75;
  }

  &.smart-animate {
    transition: margin-bottom .25s ease-in-out, height .25s ease-in-out;
  }

  &:not([selected]) {
    smart-grid-cell[selected]:not([selected="indeterminate"]):not([header]):not(.smart-grid-column-border) {
      &:after {
        background: var(--smart-ui-state-color-selected);
        opacity: var(--smart-grid-cell-horizontal-border-opacity-selected, 0.3);
      }
    }
  }

  &[selected] {
    smart-grid-cell[selected]:not([selected="indeterminate"]):not([header]) {
      &:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse) {
        &:before {
          background: var(--smart-ui-state-color-selected);
          opacity: var(--smart-grid-cell-vertical-border-opacity-selected, 0.3);
        }
      }

      &:not(.smart-grid-column-border) {
        &:after {
          background: var(--smart-ui-state-color-selected);
          opacity: var(--smart-grid-cell-horizontal-border-opacity-selected, 0.3);
        }
      }
    }

    smart-grid-cell[header] {
      background: var(--smart-ui-state-hover);
      color: var(--smart-ui-state-color-hover);
    }

    smart-grid-cell[checkbox][header][auto-show] {
      .smart-input {
        opacity: 1;
        border-color: var(--smart-border);
      }
    }

    &:not([selected="indeterminate"]) {
      &:not([selected] + &:not([selected="none"])) {
        smart-grid-cell {
          &[selected] {
            &:not([editor]) {
              &:not([header]) {
                &:not(.smart-add-new-column) {
                  background: var(--smart-ui-state-selected);
                  color: var(--smart-ui-state-color-selected);

                  .smart-label:not([data-field="_addNewColumn"]):not([data-field="_rowDetailColumn"]) {
                    border-top: 1px solid var(--smart-ui-state-selected);
                  }
                }
              }
            }
          }
        }
      }

      &:not([selected="none"]) {

        /*
        &:before {
          height: var(--smart-border-width);
          width: 100%;
          background: var(--smart-ui-state-color-selected);
          content: '';
          position: absolute;
          top: -1px;
          opacity: var(--smart-grid-cell-horizontal-border-opacity-selected, 0.3);
        }

        &:after {
          height: var(--smart-border-width);
          width: 100%;
          background: var(--smart-ui-state-color-selected);
          content: '';
          position: absolute;
          bottom: 0px;
          opacity: var(--smart-grid-cell-horizontal-border-opacity-selected, 0.3);
        }
        */
      }

      smart-grid-cell[selected]:not([selected="indeterminate"]):not([header]):not(.smart-grid-column-border) {
        &:before {
          background: var(--smart-ui-state-color-selected);
          opacity: var(--smart-grid-cell-vertical-border-opacity-selected, 0.3);
        }
      }
    }
  }

  &[selected="none"] {
    smart-grid-cell {
      color: var(--smart-disabled);
    }
  }

  &[selected="indeterminate"] {
    smart-grid-cell {
      &[selected] {
        &:not([editor]) {
          background: var(--smart-ui-state-selected);
          color: var(--smart-ui-state-color-selected);

          &[freeze] {
            background: var(--smart-grid-cell-background-freeze);
          }
        }

        &[focus]:not([editor]):not([rowspan]):not([colspan]) {
          background: rgba(var(--smart-primary-rgb), 0.05);
          color: var(--smart-ui-state-color-selected);
          opacity: 1;
        }
      }
    }
  }

  &[alternation-index="0"],
  &[alternation-index="1"],
  &[alternation-index="3"],
  &[alternation-index="4"] {
    smart-grid-cell[editor]:not([selected]):not([header]):not([highlight]):not([freeze]) {
      >.smart-label {
        padding: 0;
        margin: 0;
        border: 1px solid var(--smart-primary);
        background: var(--smart-background);
        box-sizing: border-box;
        outline: none;
        width: calc(100% - 1px);
        height: calc(100% - 1px);
        position: relative;
        left: 1px;
        user-select: none;
      }
    }
  }

  &[alternation-index="0"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label {
    background-color: var(--smart-background);
    color: var(--smart-background-color);
    border-color: var(--smart-border);
  }

  &[alternation-index="1"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label {
    background-color: var(--smart-alternation-index0-background);
    color: var(--smart-alternation-index0-color);
    border-color: var(--smart-alternation-index0-border);
  }

  &[alternation-index="2"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label {
    background-color: var(--smart-alternation-index1-background);
    color: var(--smart-alternation-index1-color);
    border-color: var(--smart-alternation-index1-border);
  }

  &[alternation-index="3"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label {
    background-color: var(--smart-alternation-index2-background);
    color: var(--smart-alternation-index2-color);
    border-color: var(--smart-alternation-index2-border);
  }

  &[alternation-index="4"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label {
    background-color: var(--smart-alternation-index3-background);
    color: var(--smart-alternation-index3-color);
    border-color: var(--smart-alternation-index3-border);
  }
}


//first
smart-grid-column {
  color: var(--smart-surface-color);
  background: var(--smart-surface);
  white-space: nowrap;
  border-width: 0px;
  border-style: solid;
  overflow: hidden;
  height: 100%;
  position: absolute;
  text-overflow: ellipsis;
  font-size: var(--smart-grid-column-font-size, inherit);
  font-weight: var(--smart-grid-column-font-weight, inherit);
  display: flex;
  cursor: default;
  min-height: 30px;

  &[selected],
  &[aria-controls],
  &[focus] {
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
  }

  &[highlight],
  &[highlight][freeze] {
    background: var(--smart-primary);
    color: var(--smart-primary-color);
  }

  &:hover {
    .smart-action-button {
      border-color: var(--smart-ui-state-border-hover);
      background: var(--smart-ui-state-hover);
      color: var(--smart-ui-state-color-hover);
      cursor: pointer;

      div:before,
      div:after {
        background: var(--smart-ui-state-color-hover);
      }
    }
  }

  .smart-icon {
    display: none;

    &.show {
      display: flex !important;
      width: var(--smart-grid-column-buttons-width);
      height: 100%;
      left: 4px;
      position: relative;

      &.smart-add-new-column {
        left: 0px;
        width: 100%;
        justify-content: center;
      }
    }

    .smart-grid-icon {
      display: flex;
    }
  }

  .smart-label:not(.smart-input) {
    position: relative;
    left: 0px;

    &.smart-animate {
      transition: width 0.25s ease;
    }

    &.one {
      width: calc(100% - var(--smart-grid-column-buttons-width));
      min-width: 30px;
    }

    &.two {
      width: calc(100% - 2 * var(--smart-grid-column-buttons-width));
      min-width: 30px;
    }

    &.three {
      width: calc(100% - 3 * var(--smart-grid-column-buttons-width));
      min-width: 30px;
    }

    &.four {
      width: calc(100% - 4 * var(--smart-grid-column-buttons-width));
      min-width: 30px;
    }

    &.five {
      width: calc(100% - 5 * var(--smart-grid-column-buttons-width));
      min-width: 30px;
    }

    &.six {
      width: calc(100% - 6 * var(--smart-grid-column-buttons-width));
      min-width: 30px;
    }
  }

  .smart-buttons-group {
    height: 100%;
    right: 0px;
    top: 0px;
    display: flex;
    position: absolute;
    transform: translateX(var(--smart-grid-column-buttons-width));

    &.smart-animate {
      transition: transform 0.25s ease;
    }

    &.action {
      transform: translateX(0px);
    }
  }

  .smart-sort-button {

    &.asc,
    &.desc {
      display: flex;

      &:before {
        content: var(--smart-icon-arrow-down);
        position: relative;
      }
    }

    &.asc {
      &:before {
        transform: rotate(180deg);
      }
    }

    &.desc {
      &:before {
        transform: rotate(0deg);
      }
    }

    &.smart-animate:before {
      transition: transform 0.2s ease-out, opacity 0.3s ease-out;
    }
  }

  .smart-filter-button {
    &.smart-animate:before {
      transition: transform 0.2s ease-out, opacity 0.3s ease-out;
    }
  }

  .smart-description-button {
    margin-right: 3px;
  }

  .smart-action-button {
    display: flex;
    border-left: 1px solid var(--smart-border);
    background: var(--smart-surface);
    color: var(--smart-surface-color);

    div {
      width: 14px;
      position: relative;
      display: flex !important;
      background: transparent;
      color: inherit;
      font-size: 0;
      transition: all 0.25s ease-in-out;
      height: 12px;
      align-items: center;
      justify-content: center;
      font-family: var(--smart-font-family-icon);

      &:after {
        content: var(--smart-icon-menu);
        color: var(--smart-surface-color);
        background: transparent !important;
        font-size: var(--smart-font-size);
      }
    }

    &.smart-animate {
      transition: width 0.25s ease;
    }

    &.active {
      &:before {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
      }

      &:after {
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        transform: translate(-50%, -50%) rotate(-45deg);
      }
    }
  }

  .smart-grid-cell-editor.smart-grid-input-cell-editor {
    background: var(--smart-background);
    color: var(--smart-background-color);
    position: absolute;
    z-index: 10;
    left: 1px;
    top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: calc(100% - 1px);
    box-sizing: border-box;
  }

  &[freeze] {
    background: var(--smart-surface);
    color: var(--smart-surface-color);
  }

  &[aria-controls] {
    .smart-action-button {
      border-color: var(--smart-ui-state-border-focus);
      background: var(--smart-ui-state-focus);
      color: var(--smart-ui-state-color-focus);

      div:before,
      div:after {
        background: var(--smart-ui-state-color-focus);
      }
    }
  }

  &.smart-grid-column-border {
    border-width: var(--smart-border-width);
  }

  &.top-far-corner {
    width: var(--smart-scroll-bar-size);
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
  }

  &:not(.smart-grid-column-border) {
    &:after {
      background: var(--smart-grid-column-horizontal-border, var(--smart-border));
    }

    &:not(.smart-grid-column-border-collapse) {
      &:before {
        background: var(--smart-border);
      }
    }
  }

  &:not(.smart-grid-column-border-collapse) {
    &:before {
      background: var(--smart-grid-column-vertical-border, var(--smart-border));
    }
  }
}

smart-grid-row[error] {
  smart-grid-cell {
    &.smart-add-new-column {

      &.smart-add-new-column .smart-label {
        background: #E2E2E2 !important;
      }
    }
  }
}

smart-grid-cell {
  display: block;
  color: var(--smart-background-color);
  background: var(--smart-background);
  white-space: nowrap;
  border-width: 0px;
  border-style: solid;
  overflow: hidden;
  height: 100%;
  position: absolute;
  text-overflow: ellipsis;
  font-size: var(--smart-grid-cell-font-size, inherit);
  font-weight: var(--smart-grid-cell-font-weight, inherit);

  div[load] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--smart-border);
    border-bottom-color: var(--smart-primary) !important;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin-left: 5px;
    position: absolute;
    top: 50%;
    margin-top: -8px;

    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }

  &[role="rowheader"] {
    .smart-label {
      padding-left: 0px;
      padding-right: 0px;
    }
  }


  &.row-comments {
    .smart-label::after {
      content: var(--smart-icon-comment);
      font-family: var(--smart-font-family-icon);
      position: absolute;
      right: 5px;
    }
  }

  &.smart-readonly {}

  smart-color-input {
    .smart-color-box {
      border-radius: 50% !important;
    }
  }

  button[toggle-button] {
    &:after {
      justify-content: flex-start;
    }
  }

  line[highlight] {
    stroke: var(--smart-secondary);
  }

  path[highlight],
  rect[highlight] {
    fill: var(--smart-secondary);
  }

  &[focus] {
    line {
      stroke: var(--smart-primary-color);
    }

    path,
    rect {
      fill: var(--smart-primary-color);
    }
  }

  .wrap {
    white-space: normal;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.5;
  }

  .textwrap {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 3px;
      margin-bottom: 3px;

      &:first-child {
        margin-top: 0px;
      }
    }
  }

  scrollbar-width: auto;
  scrollbar-color: #8b8b8b #ffffff;

  ul,
  ol {
    padding-left: 16px;
    margin: 0px;
  }

  ul[checklist] {
    padding-left: 0px;

    li {
      list-style: none;
      padding-left: 0px;
    }

    li::before {
      border-radius: 3px;
      width: 12px;
      height: 12px;
      display: inline-block;
      content: '';
      margin-right: 5px;
      top: 3px;
      position: relative;
      border: 2px solid rgba(0, 0, 0, 0.25);
    }

    li[checked] {
      &::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' style='shape-rendering: geometricprecision;'%3E%3Cpath fill-rule='evenodd' fill='white' d='M5.944 12.305a1.031 1.031 0 0 0 1.433-.009l5.272-5.181A1.483 1.483 0 0 0 12.661 5a1.468 1.468 0 0 0-2.109.025L7.008 8.701a.465.465 0 0 1-.685-.01l-.587-.641A1.42 1.42 0 0 0 3.661 8a1.473 1.473 0 0 0 .017 2.106l2.266 2.199z'%3E%3C/path%3E%3C/svg%3E");
        background-color: var(--smart-primary);
        border: 2px solid transparent;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }

  .nowrap {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.5;
  }

  &.smart-add-new-row {
    background-color: var(--smart-surface);
    font-style: italic;
    --smart-ui-state-hover: var(--smart-surface);
    --smart-ui-state-color-hover: var(--smart-surface-color);
    cursor: pointer;

    >div {
      display: block !important;
      background-color: var(--smart-surface);
    }


    &[selected] {
      background: var(--smart-background) !important;
      color: var(--smart-background-color) !important;

      &::before,
      &::after {
        color: var(--smart-background-color) !important;
        background: var(--smart-border) !important;
      }
    }

    &:not([header]) {
      z-index: 7;
      background: var(--smart-surface) !important;

      .smart-label {
        background: var(--smart-surface) !important;
      }

      &:before {
        opacity: 0;
      }
    }

    &[has-toggle-button] .row-status,
    &[has-toggle-button] button {
      display: none !important;
    }

    code {
      border: 1px solid var(--smart-border);
      background-color: var(--smart-background);
      padding: 1px 6px;
      border-radius: 6px;
      font-size: 12px;
      font-family: var(--smart-font-family);
    }
  }

  .dropdownlist,
  .list,
  .tokens {
    padding-left: 6px;
    align-items: center;
    height: 100%;

    .smart-multi-combo-input {
      width: calc(100% - var(--smart-editor-addon-width));

      .smart-flex {
        align-items: center;
        row-gap: 5px;
        column-gap: 5px;
      }
    }

    .smart-flex-wrap {
      flex-wrap: wrap;
      padding-right: 5px;
    }

    .smart-flex-auto {
      height: auto;
      display: flex;
    }

    .smart-token {
      line-height: 1.5;
      display: inline-flex;
    }

    .smart-tokens-layout {
      width: 100%;
    }

    .smart-arrow-down {
      width: 0px;
      opacity: 0;
      cursor: pointer;
    }

    &.dropdownlist {
      .smart-arrow-down {
        background: inherit;
      }
    }

    &.dropdownlist,
    &:hover {
      .smart-arrow-down {
        width: var(--smart-editor-addon-width);
        min-width: var(--smart-editor-addon-width);
        opacity: 1;
      }
    }
  }

  &[focus] {

    .list,
    .tokens {
      .smart-arrow-down {
        width: var(--smart-editor-addon-width);
        min-width: var(--smart-editor-addon-width);
        opacity: 1;
      }
    }

    .attachments,
    .images {
      .smart-icon-plus {
        opacity: 1;
        width: 26px;
      }
    }
  }

  .attachments,
  .images {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    height: 100%;

    .smart-icon-plus {
      opacity: 0;
      width: 0px;
    }

    &:hover {
      .smart-icon-plus {
        opacity: 1;
        width: 26px;
      }
    }

    .file-container,
    .container {
      display: flex;
      height: calc(100% - 3px);
      align-items: center;
      overflow: hidden;
      padding-left: 5px;
    }

    .smart-drop-image {
      margin-left: -5px;
    }

    .smart-drop-image::after {
      font-family: var(--smart-font-family-icon);
      content: var(--smart-icon-download-alt);
      margin-left: 5px;
    }

    .arrowbtn {
      width: 15px;
      background: var(--smart-surface);

      &:hover {
        cursor: pointer;
        background: var(--smart-primary);
        color: var(--smart-primary-color);
      }
    }

    .attachment,
    img {
      height: 23px;
      width: 23px;
      border: 1px solid var(--smart-border);
      margin-right: 3px;
      border-radius: var(--smart-border-radius);
      align-content: center;

      &:hover {
        cursor: pointer;
        border-color: var(--smart-primary);
      }
    }
  }

  .smart-grid-cell-editor {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    background: inherit;
    color: inherit;
  }

  &.smart-grid-row-border {
    border-top-width: var(--smart-border-width);
  }

  &.smart-grid-column-border {
    border-bottom-width: var(--smart-border-width);
    border-left-width: var(--smart-border-width);
    border-right-width: var(--smart-border-width);
  }

  &.smart-add-new-column {
    background: var(--smart-surface);
    border-left: 1px solid var(--smart-border);

    &.smart-add-new-column .smart-label {
      background: var(--smart-surface) !important;
    }

    &:before,
    &:after {
      display: none;
    }
  }

  &.smart-grid-filter-row-cell {
    background: var(--smart-surface);
    color: var(--smart-surface-color);
    border-color: var(--smart-surface);
    --smart-grid-cell-horizontal-border: transparent;

    .smart-filter-input-type {
      outline: none;
      background: inherit;
      color: inherit;
      border: none;
      border-radius: 0px;
      width: var(--smart-editor-addon-width);
      font-family: var(--smart-font-family-icon);
      font-style: normal;
      font-weight: normal;
      color: inherit;
      font-size: 14px;
      text-decoration: inherit;
      font-variant: normal;
      text-transform: none;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .smart-filter-input-value {
      border-radius: 0px;
      width: calc(100% - var(--smart-editor-addon-width));
      border: none;
      resize: none;
      border-radius: 0px;
      background: inherit;
      color: inherit;
      outline: none;
      overflow: hidden;

      &.smart-grid-number-input-cell-editor {
        .nav {
          border: 1px solid var(--smart-border);
        }
      }
    }

    .smart-filter-input-container {
      display: flex;
      margin-left: 1px;
      width: calc(100% - 1px) !important;
      height: 100%;
      border: 1px solid transparent;

      &[disabled] {
        .nav {
          pointer-events: none;
          visibility: hidden;
        }

        .smart-filter-input-type {
          pointer-events: none;
          visibility: hidden;
        }

        .smart-grid-icon {
          visibility: hidden;
          pointer-events: none;
        }
      }

      &[focus] {
        border-color: var(--smart-ui-state-border-active);
        border-style: solid;
        border-width: 1px;
        background: var(--smart-background);

        .smart-filter-input-value.smart-grid-number-input-cell-editor {
          .nav {
            background: var(--smart-background);
          }
        }
      }
    }

    &[template="checkBox"] {
      .smart-filter-input-value {
        &.smart-grid-check-box-cell-editor {
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  &:not(.smart-grid-column-border) {
    &:after {
      background: var(--smart-grid-cell-horizontal-border, var(--smart-border));
    }

    &:not(.smart-grid-column-border-collapse) {
      &:before {
        background: var(--smart-grid-cell-vertical-border, var(--smart-border));
      }
    }
  }

  &[has-toggle-button] {
    .smart-label {
      padding: 0px;
      flex-direction: unset;
    }

    .row-status {
      font-size: 16px;
      font-family: var(--smart-font-family-icon);
      width: 20px;
      min-width: 20px;

      &:before {
        color: var(--smart-surface-color);
        content: var(--smart-icon-star-empty);
        transition: opacity 0.2s ease-in-out;
        opacity: 0.3;
      }

      &:hover::before {
        color: var(--smart-primary);
        opacity: 1;
      }

      &.starred::before {
        color: var(--smart-primary);
        content: var(--smart-icon-star);
        opacity: 1;
      }

      &.custom {
        &:hover {
          color: inherit;

          &::before {
            color: inherit;
          }
        }

        &.starred::before {
          color: inherit;
        }
      }

      &.comments::after {
        content: '';
        width: 10px;
        height: 10px;
        background: var(--smart-error);
        position: absolute;
        right: 0;
        transform: rotate(45deg);
        top: -5px;
        right: -5px;
      }
    }

    button[toggle-button] {
      font-family: var(--smart-font-family-icon);
      font-style: normal;
      font-weight: normal;
      color: inherit;
      text-decoration: inherit;
      font-variant: normal;
      text-transform: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      width: 20px;
      padding: 0px;
      min-width: 20px;
      cursor: pointer;
      background: transparent;
      border: none;
      outline: none;
      font-size: 16px;
      flex-direction: column;

      &:after {
        content: var(--smart-icon-arrow-down);
      }

      &[load]::after {
        background-image: url('../images/load.gif') !important;
        background-repeat: no-repeat !important;
        content: '';
        width: 16px;
        height: 16px;
      }

      &.row-detail {
        &.row-comments {
          >div {
            font-size: 11px;
            color: var(--smart-primary);
            font-family: var(--smart-font-family);
            display: flex;
            justify-content: center;
            font-weight: bold;
            color: var(--smart-primary);
          }

          &:before {
            content: '';
            width: 10px;
            height: 10px;
            background: var(--smart-error);
            position: absolute;
            right: 0;
            transform: rotate(45deg);
            top: -5px;
            right: -5px;
          }
        }

        &:hover {
          &:after {
            color: var(--smart-surface-color);
            padding: 3px;
          }
        }
      }

      &[toggled]:after {
        transform: rotate(180deg);
      }

      &.smart-animate {
        &:after {
          transition: transform 0.25s ease-out;
        }
      }
    }

    .smart-indent {
      width: 14px;
      left: 7px;
      height: 100%;
      position: relative;

      &:after {
        height: 50%;
        content: '-';
        color: var(--smart-background-color);
        visibility: hidden;
      }

      &:first-child {
        visibility: hidden;
        border-left: 1px solid var(--smart-border);
      }
    }

    .smart-label,
    div[indent] {
      display: flex;
    }
  }

  &[command] {
    .smart-label {
      display: flex;
      flex-direction: row;
      cursor: pointer;
      justify-content: center;
    }

    .align-center {
      padding: 0px;
    }
  }

  &[header] {
    background: var(--smart-surface);
    color: var(--smart-surface-color);
    border-color: var(--smart-border);

    &:last-child {
      background: var(--smart-surface);
      color: var(--smart-surface-color);
      border-color: var(--smart-border);
    }

    &:not(.smart-grid-column-border) {
      &:after {
        background: var(--smart-grid-cell-header-horizontal-border, var(--smart-grid-cell-horizontal-border, var(--smart-border)));
      }

      &:not(.smart-grid-column-border-collapse) {
        &:before {
          background: var(--smart-grid-cell-header-vertical-border, var(--smart-grid-cell-vertical-border, var(--smart-border)));
        }
      }
    }
  }


  //left & margin-left is related to demos:
  //grid/editing-row
  &[editor] {
    >.smart-label:not(.smart-input) {
      padding: 0;
      margin: 0;
      border: 1px solid var(--smart-primary);
      background: var(--smart-background);
      box-sizing: border-box;
      outline: none;
      width: calc(100% - 1px);
      height: calc(100% - 1px);
      position: relative;
      //left: 1px;
      margin-left: 1px;
      user-select: none;
    }

    &[row-editor] {
      border: 0px solid var(--smart-primary);
      border-top: 1px solid var(--smart-primary);
      border-bottom: 1px solid var(--smart-primary);
      border-left: 1px solid var(--smart-primary);

      .smart-label:not(.smart-input) {
        border: 0px solid var(--smart-primary) !important;
      }

      &:first-child {
        border-left: 1px solid var(--smart-primary) !important;
      }

      &:last-child {
        border-right: 1px solid var(--smart-primary);
      }
    }

    &[row-editor]~smart-grid-cell[editor][row-editor] {
      border-left: 0px solid var(--smart-primary);
    }
  }

  &[editor="dateTimePicker"] {
    --smart-border-radius: 0px;
    --smart-border-top-left-radius: 0px;
    --smart-border-top-right-radius: 0px;
    --smart-border-bottom-left-radius: 0px;
    --smart-border-bottom-right-radius: 0px;
  }

  &[editor="checkBox"] {
    .smart-label {
      padding-bottom: 0px;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }

  &[placeholder]:not([detail]):not([group]):not([editor]):not(.smart-add-new-row) {
    .smart-label {
      font-style: italic;
    }

    &:not([focus]):not([selected]) {
      .smart-label {
        color: #9E9E9E !important;
      }
    }
  }

  &[template] {
    .smart-label {
      padding-left: 0px;
      padding-right: 0px;
    }

    &[template="dropdownGrid"] {
      .smart-label:hover {
        background: var(--smart-ui-state-hover);
        color: var(--smart-ui-state-color-hover);
        cursor: pointer;
      }
    }

    &[template="richText"] {

      &[focus] .smart-label,
      .smart-label:hover {

        &:after {
          color: var(--smart-background-color) !important;
          font-family: var(--smart-font-family-icon);
          content: var(--smart-icon-resize-full);
          background: inherit;
          color: var(--smart-primary);
          position: absolute;
          font-size: 12px;
          right: 5px;
          line-height: 1;
          top: calc(50% - 6px);
          cursor: pointer;
        }
      }

      &[focus] .smart-label:after {
        color: var(--smart-primary) !important;
      }
    }

    &[template="url"],
    &[template="email"] {
      a {
        color: var(--smart-primary);
        font-size: var(--smart-font-size);
      }

      &[selected] a {
        color: inherit;
      }
    }

    &[template="rating"] {
      &[selected] .rating div {
        visibility: inherit;
      }

      .rating {
        display: flex;

        div {
          color: #DFDFDF;

          &.hover {
            color: #FFBA05;
            opacity: 0.5;
          }

          &.value {
            visibility: inherit;
            color: #FFBA05;
            opacity: 1;
          }

          &.down {
            animation: starJump 1s ease-in-out;
          }
        }

        &:hover {
          div {
            visibility: inherit;
          }
        }

        @keyframes starJump {
          from {
            transform: translateY(0) scale(0.67, 0.67);
          }

          20% {
            transform: translateY(0) scale(0.75, 0.5);
          }

          40% {
            transform: translateY(0) scale(1.15, 1.15);
          }

          60% {
            transform: translateY(0) scale(1.1, 0.6);
          }

          80% {
            transform: translateY(0) scale(0.95, 1.1);
          }

          to {
            transform: translateY(0) scale(1, 1);
          }
        }
      }
    }

    &[template="ai"] {
      .smart-icon-reload {
        visibility: hidden !important;
      }

      &:hover {
        .smart-icon-reload {
          visibility: visible !important;
        }
      }
    }


    &[template="url"],
    &[template="email"],
    &[template="modifiedTime"],
    &[template="createdTime"],
    &[template="autoNumber"],
    &[template="phone"],
    &[template="password"] {
      .smart-label {
        padding-left: 4px;
        padding-right: 2px;
      }
    }
  }

  &[template="checkBox"] {

    &:hover {

      .smart-input[icon],
      .smart-input[color] {
        background: var(--smart-background) !important;
        border: 1px solid var(--smart-border) !important;
        color: transparent;
      }
    }

    .smart-input[color] {
      color: transparent;

      &[checked] {
        color: var(--smart-check-template-color);
      }


      &:not([icon]) {
        &[checked] {
          background: var(--smart-check-template-color) !important;
          border-color: var(--smart-check-template-color) !important;
          color: var(--smart-check-template-forecolor) !important;
        }
      }
    }

    .smart-input[icon] {
      background: transparent !important;
      border: none !important;
      font-size: 16px;

      &[icon="heart"] {
        &:after {
          content: var(--smart-icon-heart);
        }
      }

      &[icon="cancel"] {
        &:after {
          content: var(--smart-icon-cancel);
        }
      }

      &[icon="flag"] {
        &:after {
          content: var(--smart-icon-flag);
        }
      }

      &[icon="star"] {
        &:after {
          content: var(--smart-icon-star);
        }
      }

      &[icon="circle"] {
        &:after {
          content: var(--smart-icon-circle);
        }
      }

      &[icon="bell"] {
        &:after {
          content: var(--smart-icon-bell);
        }
      }

      &[icon="like"] {
        &:after {
          content: var(--smart-icon-like);
        }
      }

      &[icon="check"] {
        &:after {
          content: var(--smart-icon-check);
        }
      }
    }

    .smart-label {
      padding-bottom: 0px;
      justify-content: center;
      align-items: center;
      cursor: default;

      .smart-input {
        cursor: pointer;
      }

    }

    &[readonly] {
      .smart-label {
        cursor: default !important;

        &:hover {
          .smart-input {
            --smart-ui-state-hover: var(--smart-background);
          }
        }

        &:after,
        .smart-input:after {
          cursor: default !important;
        }
      }
    }
  }

  &[selected] {
    &:not([editor]) {
      background: var(--smart-ui-state-selected);
      color: var(--smart-ui-state-color-selected);

      &[focus]:not([rowspan]):not([colspan]) {
        background: var(--smart-ui-state-selected);
        color: var(--smart-ui-state-color-selected);
        opacity: 0.8;
      }

      &[freeze]:not([rowspan]):not([colspan]) {
        opacity: 1;

        &[header] {
          background: var(--smart-ui-state-hover);
          color: var(--smart-ui-state-color-hover);
        }
      }
    }
  }

  &[addNewRow] {
    border-right: 1px solid var(--smart-border);

    &:after {
      visibility: hidden;
    }
  }

  &[colspan],
  &[rowspan] {
    background: var(--smart-background);
    color: var(--smart-background-color);
    z-index: 5;
    padding: 0px;

    &[selected]:not([editor]) {
      background: var(--smart-primary) !important;
      color: var(--smart-primary-color) !important;
    }
  }

  &[error] {
    overflow: visible;
    z-index: 9999;

    &:not([row-editor]) {
      >.smart-label {
        padding: 0;
        margin: 0;
        border: 1px solid var(--smart-error) !important;
        box-sizing: border-box;
        outline: none;
        width: calc(100% - 1px);
        height: calc(100% - 1px);
        position: relative;
        left: 1px;
        user-select: none;
      }
    }
  }

  &[sort] {
    background: var(--smart-grid-cell-background-sort);
    color: var(--smart-grid-cell-color-sort);

    &:not([selected]) {
      .smart-label {
        background: var(--smart-grid-cell-background-sort);
        color: var(--smart-grid-cell-color-sort);
      }
    }
  }

  &[filter] {
    background: var(--smart-grid-cell-background-filter);
    color: var(--smart-grid-cell-color-filter);

    &:not([selected]) {
      .smart-label {
        background: var(--smart-grid-cell-background-filter);
        color: var(--smart-grid-cell-color-filter);
      }
    }
  }

  &[update] {
    background: var(--smart-grid-cell-background-update);
    color: var(--smart-grid-cell-color-update);
  }

  &[add] {
    background: var(--smart-grid-cell-background-add);
    color: var(--smart-grid-cell-color-add);
  }

  &[delete] {
    background: var(--smart-grid-cell-background-delete);
    color: var(--smart-grid-cell-color-delete);
  }

  &[editor] {
    background: var(--smart-background);
    color: var(--smart-background-color);
  }

  &[freeze] {
    background: var(--smart-grid-cell-background-freeze);
    color: var(--smart-grid-cell-color-freeze);

    &[selected] {
      background: var(--smart-grid-cell-background-freeze-selected) !important;
    }
  }

  &[highlight] {
    .smart-label {
      background: #FFF1C8 !important;
      color: #333 !important;
    }

    &[highlight-data-field] {
      border-left: 1px solid var(--smart-primary);
      border-right: 1px solid var(--smart-primary);

      &:first-child {
        border-left: 2px solid var(--smart-primary);
      }
    }
  }

  &[group] {
    font-size: var(--smart-font-size);

    span[value],
    span[summary] {
      font-weight: 600;

      &[chip] {
        display: inline-flex;
        min-width: 2em;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        font-size: 0.7em;
        background: var(--smart-primary);
        color: var(--smart-primary-color);
        justify-content: center;
        align-items: center;
        margin-left: 10px;
      }
    }
  }
}

//second
smart-grid-column,
smart-grid-cell {
  >.smart-label:not(.smart-input) {
    width: 100%;
    height: 100%;

    &.comments::after {
      content: '';
      width: 10px;
      height: 10px;
      background: var(--smart-error);
      position: absolute;
      right: 0;
      transform: rotate(45deg);
      top: -5px;
      right: -5px;
    }
  }

  &.rotate {
    line-height: initial;
    display: inline-block;
    left: 0px;
    top: 0px;
    position: absolute;
    transform-origin: 50% 50% 0;
    transform: rotate(0deg);
  }

  .align-left {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding-left: 7px;
    padding-right: 2px;
  }

  .align-top {
    align-items: flex-start;
    display: flex;
    line-height: initial;
  }

  .align-bottom {
    align-items: flex-end;
    display: flex;
    line-height: initial;
  }

  .align-right {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    padding-right: 7px;
    padding-left: 2px;
  }

  .align-right.align-bottom {
    flex-direction: column-reverse;
  }

  .align-right.align-top {
    flex-direction: column;
    align-items: flex-end;
  }

  .align-center {
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    padding-right: 7px;
    padding-left: 7px;
  }

  .align-center.align-bottom {
    margin-left: 50%;
    margin-right: 50%;
    padding-left: 0;
    padding-right: 0;
  }

  .align-center.align-top {
    margin-left: 50%;
    margin-right: 50%;
    padding-left: 0;
    padding-right: 0;
  }

  .align-middle {
    display: flex;
    align-items: center;
  }

  .align-center.align-middle {
    justify-content: center;
  }

  &.smart-grid-column-border {
    border-top-color: var(--smart-border);
    border-bottom-color: var(--smart-border);
    border-left-color: var(--smart-border);
    border-right-color: var(--smart-border);
    border-top-width: 0px;
  }

  &:not(.smart-grid-column-border) {
    &:after {
      height: var(--smart-border-width);
      width: 100%;
      content: '';
      position: absolute;
      bottom: 0px;
      left: 0px;
    }

    &:not(.smart-grid-column-border-collapse) {
      &:before {
        width: var(--smart-border-width);
        height: 100%;
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
      }
    }
  }
}

.smart-grid-add-column-dialog-color-panel {
  width: 100%;

  .smart-sortable {
    width: 100%;
    margin-bottom: 10px;
    overflow: auto;

    .smart-sortable-container {
      overflow: hidden;
    }

    .smart-grid-add-column-dialog-color-item {
      display: flex;
      align-items: center;
      width: calc(100% - 25px);
      margin-left: 5%;
      margin-top: 5px;
      margin-bottom: 2px;

      smart-color-input {
        .smart-color-box {
          border-radius: 50%;
        }
      }
    }
  }
}

.smart-grid-view-bar {

  &[viewbar] {
    left: 0px;
    top: 0px;
    position: absolute;
    background: var(--smart-grid-view-bar-background);
    --smart-background: var(--smart-grid-view-bar-background);
    border-right: 1px solid var(--smart-border);

    &.smart-mobile {
      z-index: 99;
      box-shadow: var(--smart-elevation-4);
    }
  }

  smart-list-item[checked] {
    background: var(--smart-ui-state-selected);
    color: var(--smart-ui-state-color-selected);
  }

  .header {
    padding: 10px;
    display: block;
    font-weight: 500;
    background: var(--smart-surface);
    color: var(--smart-surface-color);
    border-bottom: 1px solid var(--smart-border);
  }

  .smart-grid-view-chooser-container {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;

    .view-label {
      display: flex;
      padding: 10px;
      padding-left: 20px;
      width: 100%;
      font-weight: bold;
      justify-content: space-between;
      padding-right: 16px;
      cursor: pointer;

      .smart-icon-sort-down {
        font-weight: bold;
      }

      &.collapsed {
        .smart-icon-sort-down {
          transform: rotate(180deg);
        }
      }
    }

    .view-button {
      margin-top: 20px;
      color: var(--smart-primary);
      display: flex;
      cursor: pointer;

      &.disabled {
        cursor: default;
        color: var(--smart-disabled);
        pointer-events: none;

        a {
          cursor: default;

          &:hover {
            color: var(--smart-disabled);
          }
        }
      }

      a {
        color: inherit;

        &:hover {
          color: var(--smart-secondary);
        }
      }

      &:hover {
        color: var(--smart-secondary);
      }
    }

    label {
      display: flex;
      justify-content: center;
      height: 100%;
      align-items: center;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 15px;
      font-size: calc(var(--smart-font-size) - 2px);
      font-weight: 600;
      opacity: 0.8;
    }

    .smart-grid-view-storage {
      overflow: hidden;

      smart-list-box .smart-list-item-label-element {
        width: 100%;

        .smart-icon-mode-edit,
        .smart-icon-delete {
          visibility: hidden;
        }

        &:hover {

          .smart-icon-mode-edit,
          .smart-icon-delete {
            visibility: inherit;
          }
        }

        >span {
          display: grid;
          align-items: baseline;
          grid-template-columns: 25px 1fr auto auto;
          width: 100%;
        }
      }
    }

    smart-input {
      width: 100%;
      margin-bottom: 10px;
      background: inherit;
    }

    .new-view {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 0px;
      border-top: 1px solid var(--smart-border);
      background: var(--smart-background);

      .footer {
        display: flex;
        width: 100%;
        flex-direction: column;
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 135px;

        &.collapsed {
          height: 0px;
        }
      }

      smart-button {
        background: transparent;

        &.view {
          text-transform: none;
          border: none;

          button {
            align-items: center;
            color: var(--smart-surface-color);
            display: flex;
            justify-content: space-between;
          }

          &:hover {
            button {
              background: var(--smart-ui-state-hover);
              color: var(--smart-ui-state-color-hover);
            }
          }
        }
      }
    }
  }
}

.smart-grid-view-chooser {
  background: var(--smart-background);
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family);

  .label {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    font-size: calc(var(--smart-font-size) - 2px);
    font-weight: 600;
    opacity: 0.8;
  }

  .smart-list-box {
    padding: 5px;

    smart-list-item {
      border-radius: var(--smart-border-radius);

      .smart-grid-icon {
        font-size: 20px;
        margin-right: 6px;
      }
    }

    smart-list-item[checked] {
      background: var(--smart-ui-state-selected);
      color: var(--smart-ui-state-color-selected);
    }
  }

}

smart-menu {
  &.smart-grid-views-menu {
    height: 100% !important;
    border: none;
  }

  &.smart-grid-column-filter-menu.filter-excel {
    smart-menu-item[level="1"] {
      .smart-menu-item-label-container {
        padding: 0px !important;
        margin: 0px !important;
      }
    }
  }

  &.smart-grid-views-menu[checkboxes][checkable],
  &.smart-grid-column-chooser-menu[checkboxes][checkable] {
    &[disable-auto-check] {
      .smart-menu-item-label-container:after {
        display: none;
      }
    }

    smart-menu-item[level="1"] {
      flex-direction: row-reverse;

      .smart-menu-item-label-container {
        padding-left: 10px;
      }

      &[checked] .smart-menu-item-label-container:after {
        left: initial;
        right: 10px;
      }
    }
  }
}


@keyframes fadeAnimation {
  0% {
    background-color: inherit;
    color: #333;
  }

  20% {
    background-color: #0A85D9;
    color: #fff;
  }

  50% {
    background-color: #0A85D9;
    color: #fff;
  }

  100% {
    background-color: inherit;
    color: inherit;
  }
}

.smart-flash-cell .smart-label {
  background-image: none !important;
  animation: fadeAnimation 1s ease-in-out;
}


.smart-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
}

.smart-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.smart-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--smart-secondary-rgb), 0.5);
  transition: .4s;
}

.smart-switch .slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: var(--smart-background);
  transition: .4s;
}

.smart-switch input:checked+.slider {
  background-color: var(--smart-primary);
}

.smart-switch input:focus+.slider {
  box-shadow: 0 0 1px var(--smart-primary);
}

.smart-switch input:checked+.slider:before {
  transform: translateX(14px);
}

/* Rounded sliders */
.smart-switch .slider.round,
.smart-switch .slider.round:before {
  border-radius: 30px;
}

.smart-grid[view="card"] {
  .smart-grid-column-header {
    display: none;
  }
}

.smart-grid-color-input {
  --smart-input-drop-down-menu-width {
    width: 98px;
  }

  .default-samples-container {
    display: flex;
  }
}

.smart-grid-drop-down-button {
  display: inline-block;
  cursor: pointer;
}

.smart-grid-date-time-picker-cell-editor-drop-down-menu {
  padding: 0px !important;
}

.smart-grid-loading {
  &::before {
    background-image: url('../images/load.gif') !important;
    background-repeat: no-repeat !important;
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    left: 6px;
  }
}

.smart-votes-bar-container {
  position: relative;
  flex: 1 1 auto;
  margin-left: 8px;
  margin-right: 8px;
  height: 30px;
  cursor: pointer;

  .smart-votes-bar,
  .smart-votes-bar-frame {
    background: var(--smart-check-template-color) !important;
    border-color: var(--smart-check-template-color) !important;
    color: var(--smart-check-template-forecolor) !important;
    position: absolute;
    top: 5px;
    bottom: 5px;
  }
}

.smart-votes-cell-component {
  height: 100%;
  cursor: pointer;

  .smart-voters-info {
    height: 30px;
    margin-right: 8px;
    display: flex;
    align-items: center;
  }

  .smart-vote-button {
    margin-left: 8px;
    flex: 0 0 20px;
    height: 20px;
    width: 20px;
    line-height: 20px;
    border-radius: 50%;
    color: var(--smart-check-template-forecolor) !important;
    border: 1px solid var(--smart-check-template-color) !important;

    &.voted {
      background: var(--smart-check-template-color) !important;
    }
  }
}

.smart-votes-bar-animate .smart-votes-bar,
.smart-votes-bar-animate .smart-votes-bar-frame {
  transition: all .2s ease-in-out;
}

.smart-reaction-tooltip {
  display: flex;
  gap: 4px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: var(--smart-surface);
  color: var(--smart-surface-color);
  z-index: 10;
  padding: 5px;
  pointer-events: none;
}

.smart-reaction-tooltip.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  /* Allows interaction when visible */
  transform: translateY(0);
  /* Smoother appearance */
}

.smart-reaction-tooltip span {
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s;
}

/* Pulsing effect on hover */
.smart-reaction-tooltip span:hover {
  animation: pulse .7s infinite ease-in-out;
  /* Pulsing effect on hover */
}

/* Pulsing keyframes */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.smart-reaction-bubble {
  padding: 3px 5px;
  font-size: 14px;
  display: flex;
  font-size: var(--smart-font-size);
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  transition: opacity 0.3s ease;
}

.smart-reactions-display {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Hover effect to display reactions */
.smart-message {
  position: relative;
}

smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] {

  smart-grid-cell[data-type="string"][template="tags"]:not([editor]):not(.smart-grid-summary-row-cell):not(.smart-add-new-row):not([readonly]):not(.smart-readonly),
  smart-grid-cell[data-type="string"][template="collaborator"]:not([editor]):not(.smart-grid-summary-row-cell):not(.smart-add-new-row):not([readonly]):not(.smart-readonly),
  {

  &:hover,
  &[focus] {
    .smart-label {
      padding-right: 30px;
    }

    .smart-label:after {
      content: var(--smart-icon-arrow-down);
      position: absolute;
      right: 7px;
      top: calc(50% - 8px);
      line-height: 1;
      font-style: normal;
      font-family: var(--smart-font-family-icon);
      cursor: pointer;
    }
  }

}
}

smart-grid[editing_enabled][editing_allow-dynamic-buttons][selection_allow-cell-selection][selection_enabled] {
  smart-grid-cell[data-type="date"]:not([editor]):not(.smart-grid-summary-row-cell):not(.smart-add-new-row):not([readonly]):not(.smart-readonly) {

    &:hover,
    &[focus] {
      .smart-label.align-right {
        padding-right: 30px;
      }

      .smart-label:after {
        content: var(--smart-icon-calendar);
        position: absolute;
        right: 7px;
        top: calc(50% - 8px);
        line-height: 1;
        font-style: normal;
        font-family: var(--smart-font-family-icon);
        cursor: pointer;
      }
    }
  }
}

smart-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][editing_allow-dynamic-buttons] {
  smart-grid-cell[data-type="number"]:not([editor]):not([template]):not(.smart-grid-summary-row-cell):not(.smart-add-new-row):not([readonly]):not(.smart-readonly) {

    &:hover,
    &[focus] {
      .smart-label.align-right {
        padding-right: 30px;
      }

      .smart-label:after {
        content: var(--smart-icon-arrow-down);
        position: absolute;
        right: 7px;
        top: calc(75% - 8px);
        line-height: 1;
        font-style: normal;
        font-family: var(--smart-font-family-icon);
        font-size: 14px;
        cursor: pointer;
      }

      .smart-label:before {
        content: var(--smart-icon-arrow-up);
        position: absolute;
        right: 7px;
        top: calc(25% - 8px);
        line-height: 1;
        font-style: normal;
        font-size: 14px;
        font-family: var(--smart-font-family-icon);
        cursor: pointer;
      }
    }
  }
}

.marching-ants {}

.marching-ants::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.0) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0) 50%);
  background-position: top, left, right, bottom;
  background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
  background-size: 10px 2px, 2px 10px, 2px 10px, 10px 2px;
  animation: marqueeAnimate var(--duration, 12s) linear infinite;
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  box-sizing: border-box;
  border: 2px solid transparent;
}

.marching-ants::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--smart-primary-rgb), 0.6) 50%);
  background-position: top, left, right, bottom;
  background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;
  background-size: 10px 2px, 2px 10px, 2px 10px, 10px 2px;
  animation: marqueeAnimate var(--alt-duration, 12s) linear infinite;
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  box-sizing: border-box;
  border: 2px solid transparent;
}

.smart-grid-column-group-collapse-button span {
  font-size: 16px;
}

@keyframes marqueeAnimate {
  0% {
    background-position: 0 0, 0 0, 100% 0, 0 100%;
  }

  100% {
    background-position: 100% 0, 0 -100%, 100% 100%, -100% 100%;
  }
}

@keyframes ants {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 4px 0;
  }
}

.smart-grid-mobile-scroll-content {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.smart-token-max-width {
  max-width: attr(data-max-width px);
}

.smart-drop-down-list-selection-image[data-image] {
  background-image: attr(data-image url) !important;
}

.smart-align-center {
  align-items: center;
}

.smart-justify-content-start {
  justify-content: flex-start;
}


@import 'grid/_checkbox';
@import 'grid/_slider';
@import 'rtl/_grid';
//Use the Scheduler SASS placeholder for the ColorInput styling
@import 'scheduler/color_input';
@include color-input-mixin(grid);