@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) {
    &:after {
      height: var(--smart-border-width);
      width: 100%;
      content: '';
      position: absolute;
      bottom: 0px;
      background: var(--smart-grid-column-horizontal-border, var(--smart-border));

      &:not(.smart-grid-column-border-collapse) {
        &:before {
          width: var(--smart-border-width);
          height: 100%;
          content: '';
          position: absolute;
          top: 0px;
          left: 0px;
          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: 60px;
  overflow: hidden;

  //background: transparent;

  smart-menu {
    border: none;
  }

  &.smart-animate {
    transition: opacity 0.2s, transform 0.2s ease-out;
    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-mail:before {
    content: var(--smart-icon-mail);
  }

  &.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-minus:before {
    content: var(--smart-icon-minus);
  }

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

  &.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-search:before {
    content: var(--smart-icon-search);
  }

  &.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-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-tasks:before {
    content: var(--smart-icon-tasks);
  }

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

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

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


  &.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-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-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-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: inherit;
    border-color: transparent;
    border-top-color: transparent;
    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-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%;

    .smart-arrow-down,
    .smart-summary-placeholder {
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
    }

    &[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 {
  .smart-grid-dialog-radio-field {
    width: 100%;

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

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

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

    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 ease-in-out;
    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;
        }

        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 {
    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-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: 99999;
  position: absolute;
  min-width: 150px;
  min-height: 120px;
  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;

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

  .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-scroll-bar[orientation="vertical"] {
    height: 100%;
    right: 0px;
    top: 0px;
    position: absolute;
    width: var(--smart-scroll-bar-size);
  }

  textarea {
    padding: 3px;
    min-height: 120px;
    width: calc(100% + var(--smart-scroll-bar-size));
    overflow-x: hidden;
    height: 120px;
    box-sizing: border-box;
    border: none;
    background: inherit;
    outline: none;
    resize: none;
    padding-right: 20px;
    color: inherit;
  }
}

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

    &[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-dialog-expand-row {
      width: 750px !important;

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

        &.format {
          grid-template-columns: 25px 1fr;
          padding: 0px;
        }

        &.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: 35px;
        overflow: hidden;
        background: var(--smart-background);
        transition: all 0.2s ease-in-out;
        display: flex;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--smart-border);

        .tab {
          padding: 8px 22px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-transform: uppercase;
          color: var(--smart-background-color);
          cursor: pointer;
          white-space: nowrap;

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

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

      .smart-prev-button,
      .smart-next-button {
        &:after {
          font-size: calc(100% - 2px);
        }
      }

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

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

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

      &.disable-edit {
        .smart-grid-edit-dialog-layout {
          display: block;
          .smart-grid-edit-dialog-activity-container, .smart-drop-down-button {
            display: none !important;
          }
          .smart-grid-dialog-editor {
            background:var(--smart-surface);
            pointer-events: none;
          }
          .smart-grid-dialog-editor[template="image"]{
            pointer-events: initial;
            height: 100px;
            border: none;
            background: initial;
            
            .smart-grid-cell-editor > div {
              display: block !important;
            }

            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 350px;
        column-gap: 20px;

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

        .smart-grid-edit-dialog-editors-container {
          &.many {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 1rem;
          }
        }

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

          >div {
            height: 100%;
          }

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

          .history-row {
            padding: 5px;
          }

          .history-layout {
            max-height: 500px;
            overflow: auto;
          }

          .history-user {
            display: grid;
            grid-template-columns: 35px 1fr 1fr;
            align-items: center;
          }

          .history-action {
            display: grid;
            padding-left: 35px;
            grid-template-columns: 50% 50%;
            align-items: center;
            opacity: 0.8;

            .detail {
              white-space: initial;
            }
          }

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

          .user-name {
            font-weight: bold;
          }

          .time {
            opacity: 0.8;
          }

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

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

          .comments-layout {
            display: grid;
            grid-template-rows: 1fr auto;
            flex-direction: column;
            padding: 3px;
            height: calc(100% - 55px);

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

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

              .remove-button {
                transform: rotate(90deg);
                width: 16px;
                cursor: pointer;

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

                &.enabled {
                  visibility: visible;
                }
              }
            }

            .comments {
              overflow: auto;
              min-height: 180px;
              max-height: 350px;
            }

            .footer {
              height: 45px;
              display: flex;
              padding: 5px;
              box-sizing: border-box;
              transition: height ease-in-out 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;
                border-left-color: transparent;
              }
            }
          }

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

            &.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: var(--smart-editor-height);
              width: 100px;
              padding: 0px;
              display: flex;
              justify-content: space-between;

              .bold,
              .italic,
              .underline {
                font-weight: normal;
                display: block;
                height: 100%;
                padding: 5px;
                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 {
      cursor: default;
    }

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

    [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;
    }

    [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 ease-in-out;
    height: 28px;

    &.float {
      height: 30px;
      border-radius: 50%;
      border: 1px solid var(--smart-primary);
      left: 5px;
      bottom: 5px;
      background: var(--smart-primary);
      color: var(--smart-primary-color);
      box-shadow: var(--smart-elevation-4);
    }

    &.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_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;
      }
    }
  }

  &.smart-element {
    visibility: inherit;
  }

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

      smart-grid-cell:not([editor]):not([header]),
      smart-grid-cell:not([editor]):not([header]) .smart-label {
        background: var(--smart-primary) !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-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);
    }

    &: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 ease-in-out 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;

          span[group] {
            font-size: var(--smart-font-size);
            font-weight: bold;
          }

          span[value] {
            position: relative;
            white-space: nowrap;
            text-overflow: ellipsis;
            user-select: none;
            display: flex;
            align-items: center;
            padding: 4px 12px;
            font-weight: 400;
            border-radius: 4px;
            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;
          }
        }
      }
    }
  }

  &[appearance_allow-hover] {
    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-cell[header] {
      &:hover {
        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-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 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);
      }
    }
  }

  smart-grid-cell[header] {
    .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] {
    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);
        }

        &[focus]:not([editor]):not([rowspan]):not([colspan]) {
          background: var(--smart-ui-state-active);
          color: var(--smart-ui-state-color-active);
          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;
      border-top: 2px solid;
      border-bottom: 2px solid;
      color: inherit;
      font-size: 0;
      transition: all 0.25s ease-in-out;
      height: 12px;

      &:before,
      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        position: absolute;
        top: 50%;
        left: 50%;
        background: var(--smart-surface-color);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        transition: transform 0.25s ease-in-out;
      }
    }

    &.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-surface-color);
  background: var(--smart-surface);
  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);

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

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

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

    >div {
      display: block !important;
    }

    &[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;

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

    .smart-token {
      line-height: 1.5;
      display: inline-flex;
      margin-bottom: var(--smart-editor-label-padding);
    }

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

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

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

    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-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;

      &[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;
          }
        }

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

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

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

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

      &[selected] a {
        color: var(--smart-primary-color);
      }
    }

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

  &[template="checkBox"] {
    .smart-label {
      padding-bottom: 0px;
      justify-content: center;
      align-items: center;
      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);
  }

  &[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;
    }
  }
}

//second
smart-grid-column,
smart-grid-cell {
  >.smart-label:not(.smart-input) {
    width: 100%;
    height: 100%;
  }

  &.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%;
    max-height: 200px;
    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: 10px;

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

smart-menu {
  &.smart-grid-column-chooser-menu[checkboxes][checkable] {
    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; }
  20% { background-color: #99FF99; }
  50% { background-color: #99FF99; }
  100% { background-color: inherit; }
}

.smart-flash-cell .smart-label {
    background-image: none !important;
    animation: fadeAnimation 2s ease-in-out;
}

@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);