@import 'scss/styles.scss';
.my-note-popover {
  margin-right: 4px;

  box-shadow: none !important;
  background-color: transparent;

  &::after {
    display: none !important;
  }

  &.editor {
    &::after {
      display: none !important;
    }
  }
}

.closed_main_holder {
  position: relative;
}

.all_note_holder {
  .note_inner_text {
    display: -webkit-box;
    font-size: 11px;
    color: $grey-2;

    overflow: hidden;

    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    user-select: none;
  }

  &.opened_main_all_holder {
    height: 100%;

    .note_inner_text {
      flex: 1;
    }
  }

  .note_button_hold {
    height: 26px;
    width: 26px;
    padding: 4px;
    border-radius: 2px;

    &:hover {
      background-color: $grey-8;

      svg {
        path {
          fill: $black;
        }
      }
    }

    .note-btn {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    svg-icon {
      svg {
        display: flex;
      }
    }

    &.note-all-expanded {
      background-color: $black !important;

      svg {
        path {
          fill: $white-4 !important;
        }
      }
    }
  }

  .spinner {
    width: 18px;
    height: 18px;
  }
}

.note-normal-icon,
.note-note-empty,
.note-all-expanded {
  width: 16px;
  height: 18px;
  background-repeat: no-repeat;
}

.note_holder_span {
  width: 100%;

  .kendo-editor-note-wrapper {
    position: relative;

    .k-editor {
      width: 100%;
    }

    .custom_editor {
      min-width: 100%;

      .editor {
        width: 100%;
        text-align: left;

        &:after {
          display: none;
        }

        &.not_expanded {
          box-shadow: none !important;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      &.expanded {
        z-index: 100;
      }
    }
  }
}

.kendo-editor-note-wrapper {
  .save-note-check {
    width: 22px;
    height: 22px;
    right: 28px;
    bottom: 2px;
    border-radius: 2px;

    svg-icon {
      display: flex;
      height: 22px;
      justify-content: center;
      align-items: center;

      path {
        fill: $grey-9;
      }
    }

    &:hover {
      background-color: $white;

      svg-icon {
        path {
          fill: $white-2;
        }
      }
    }

    &.close_note {
      right: 2px;
    }
  }

  .custom_editor {
    position: relative;
    display: block;
    line-height: 1.5;
    height: auto;
    min-width: 159px;
    background-color: $black-9;

    &.expanded {
      box-shadow: 0 0 4px 0 $box-shadow !important;
    }

    .editor {
      min-height: 34px;
      max-height: 64px;
      width: 250px;
      border-radius: 3px;
      background-color: $black-9;
      white-space: break-spaces;
      overflow: auto;
      outline: none;
      color: $white;
      font-size: 11px;
      margin: 0 0 0 auto;
      line-height: 14px;
      padding: 3px 6px;
      font-weight: 500;

      &::-moz-selection {
        color: $grey-2;
        background: $black-10;
      }

      &::selection {
        color: $grey-2;
        background: $black-10;
      }

      span,
      div,
      b {
        &::-moz-selection {
          color: $grey-2;
          background: $black-10;
        }

        &::selection {
          color: $grey-2;
          background: $black-10;
        }
      }

      font[color='#{$grey}'],
      font[color='#{$black}'] {
        color: $white;
        &::-moz-selection {
          color: $grey-10 !important;
          background: $grey-11 !important;
        }

        &::selection {
          color: $grey-10 !important;
          background: $grey-11 !important;
        }
      }

      font[color='#{$blue-8}'],
      font[color='#{$blue-11}'] {
        color: $blue-8;
        &::-moz-selection {
          color: $blue-6 !important;
          background: $blue-7 !important;
        }

        &::selection {
          color: $blue-6 !important;
          background: $blue-7 !important;
        }
      }

      font[color='#{$green-6}'],
      font[color='#{$green-7}'] {
        color: $green-6;
        &::-moz-selection {
          color: $green-4 !important;
          background: $green-5 !important;
        }

        &::selection {
          color: $green-4 !important;
          background: $green-5 !important;
        }
      }

      font[color='#{$red-7}'],
      font[color='#{$red-9}'] {
        color: $red-7;
        &::-moz-selection {
          color: $red-5 !important;
          background: $red-6 !important;
        }

        &::selection {
          color: $red-5 !important;
          background: $red-6 !important;
        }
      }

      font[color='#{$yellow-3}'],
      font[color='#{$yellow-4}'] {
        color: $yellow-3;
        &::-moz-selection {
          color: $yellow !important;
          background: $yellow-2 !important;
        }

        &::selection {
          color: $yellow !important;
          background: $yellow-2 !important;
        }
      }

      font[color='#{$purple-3}'],
      font[color='#{$purple-4}'] {
        color: $purple-3;
        &::-moz-selection {
          color: $purple !important;
          background: $purple-2 !important;
        }

        &::selection {
          color: $purple !important;
          background: $purple-2 !important;
        }
      }

      &.opened_all_editor {
        width: 100%;
      }

      &.not_expanded {
        height: 32px;
        border-radius: 3px;
        box-shadow: 0 0 4px 0 $box-shadow !important;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;

        &.openedAll {
          &:after {
            border-left: 5px solid $grey-2;
          }
        }
      }

      &.parking_text_hold {
        max-height: 124px;
      }
    }

    .spinner {
      position: absolute;
      right: 2px;
      bottom: 6px;

      width: 18px;
      height: 18px;
    }

    .container_separate {
      padding: 0 4px;
      .container_separate_inner {
        height: 1px;

        border-radius: 1px;
        background-color: $black;
      }
    }

    .note_container {
      &:first-child {
        flex: 1;
      }
      width: 100%;
      padding: 4px 4px 4px 2px;

      svg-icon {
        height: 14px;
        width: 14px;
        cursor: pointer;

        svg {
          display: flex;
        }

        &:hover {
          svg {
            path {
              fill: $red-8;
            }
          }
        }
      }
    }
  }

  &.opened_all_hold {
    position: absolute;
    top: 0px;
    left: -2px;

    width: 100%;
    z-index: 1;

    .custom_editor {
      .editor {
        &::-moz-selection {
          color: $grey-2;
          background: $black-10;
        }

        &::selection {
          color: $grey-2;
          background: $black-10;
        }

        span {
          &::-moz-selection {
            color: $grey-2 !important;
            background: $black-10 !important;
          }

          &::selection {
            color: $grey-2 !important;
            background: $black-10 !important;
          }
        }
      }
    }
  }

  &.dispatch {
    left: 2px;
  }

  &.closed_note_hold {
    position: relative;
    top: -8px;
  }
}
// ScrollBar

/* width */
::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: $black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: $grey;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: $grey;
}