.license-model-overview {
  .overview-top-section {
    .overview-title{
      @extend .heading-1;
      @extend .text-uppercase !optional;
      margin-bottom: 20px;
      color: $blue;
    }
    .license-model-overview-top {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      padding-bottom: 10px;
      min-height: 155px;
      .separator {
        width: 1px;
        border-right: 1px solid $tlv-light-gray;
        margin-left: 20px;
      }
      .vendor-data-view {
        @extend .flex-column;
        background-color: $tlv-gray;
        padding: 20px 30px;
        border: 1px solid $tlv-light-gray;
        @include border-shadow();
        .vendor-title {
          margin-top:5px;
        }
        .vendor-name {
          @extend .heading-3-medium;
          text-transform: none;
          padding-bottom: 15px;
          border-bottom: 1px solid $tlv-light-gray;
        }
        .vendor-description {
          @extend .flex;
          @extend .body-1;
          justify-content: space-between;
          margin-top: 10px;
          overflow: hidden;
          border: 1px solid transparent;
          position: relative;
          left: -6px;
          width: 101%;

          &:hover {
            border: 1px solid $tlv-light-gray;
            background-position: 99% 12%;
            background-size: 15px;
            padding-right: 20px;
            background-image: url($pencil-icon);
            background-repeat: no-repeat;
            cursor: pointer;
          }
          &.read-only {
            border: none;
          }
					.description-data {
						@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
					}
        }

        .vendor-description-readonly {
          @extend .flex;
          @extend .body-1;
          justify-content: space-between;
          margin-top: 10px;
          overflow: hidden;
          border: none;
          height: 49px;
          margin-bottom: 15px;
          padding: 6px;
          position: relative;
          left:-6px;
        }

        .vendor-description-edit {
          @extend .flex;
          flex-direction: column;
          border: none;
          margin-top: 10px;
          position: relative;
          left: -6px;
          width: 101%;
          textarea {
            padding-left: 6px;
          }
          .buttons-row {
            @extend .flex;
            justify-content: flex-end;
            flex-direction: row;
            margin-top: -25px;
            .buttons-wrapper {
              @extend .flex;
              @extend .body-3;
              border: 1px solid $light-gray;
              width: 95px;
              height: 19px;
              background-color: $tlv-light-gray;
              border-radius: 2px;
              position: relative;
              flex: 0 1 auto;
              text-align: center;
              .description-button {
                cursor: pointer;
                flex: 1;
                &:hover {
                  background-color: $white;
                }
              }
              .description-save {
                cursor: pointer;
                flex: 1;
                color:$blue;
                &:hover {
                  background-color: $white;
                }
              }
            }
          }
          .description-edit-textarea {
            height:67px;
            border: 1px solid $tlv-light-gray;
            resize: none;
            position: relative;
            left: -12px;
          }
        }
      }
      .summary-count-list {
        @extend .flex-column;
        flex: 0.6;
        margin-left: 20px;
        justify-content: space-between;
        border: 1px solid $tlv-light-gray;
        @include border-shadow();
        background-color: $tlv-gray;
        .summary-count-item {
          @extend .flex;
          @extend .heading-4-medium;
          padding-top: 5px;
          padding-left: 45px;
          padding-right: 45px;
          border-bottom: 1px solid $tlv-light-gray;
          &:last-child { border-bottom: none; }
          .item-count {
            flex-grow: 2;
            margin-left: 5px;
          }
          .add-button {
            cursor: pointer;
            font-size: larger;
            background-image: url($vlm-summary-plus);
            background-size: 20px;
            background-repeat: no-repeat;
            width:20px;
            height:20px;
            margin-top: 3px;
            margin-left: auto;
            &:hover {
              cursor: pointer;
              background-image: url($vlm-summary-plus-blue);
            }
          }

          .summary-name-and-count {
            &:hover {
              cursor: pointer;
              color: $blue;
            }
          }


        }
      }
      .plus-icon {
        font-size: $icon-font-size;
        border-radius: 50%;
        border: 1px solid $black;
        color: $black;
        height: 16px;
        width: 16px;
        padding: 2px 2px 2px 3px;
      }
    }
  }
  .vlm-list-tab-panel
  {
    @extend .flex;
    .section-title {
      flex: 1;
    }
    .overview-buttons-section {
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      .button-vlm-list-view {
        height: 32px;
        width: 34px;
        margin-left:10px;
        cursor: pointer;
      }
      .vlm-list-icon {
        background-size: 32px;
        background-repeat: no-repeat;
        background-image: url($vlm-summary-used);
        &.selected {
          background-image: url($vlm-summary-used-blue);
        }
      }
      .entities-list-icon {
        background-size: 32px;
        background-repeat: no-repeat;
        background-image: url($vlm-summary-orphans);
        &.selected {
          background-image: url($vlm-summary-orphans-blue);
        }
      }

    }
  }

  .overview-list-section {
    @extend .flex-column;
    margin-top: 35px;
    .section-title {
      @extend .heading-2;
      padding-top: 20px;
      margin-bottom: 15px;
      padding-bottom: 0px;
    }
    &.overview-list-orphans {
      .chevron::before
      {
        display: none;
      }
      .vlm-list-view {
        .vlm-list {
          .vlm-list-item {
            @include border-shadow();
            .list-item-icon-col {
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-left: 5px;
            }
            &.vlm-list-item-la {
              margin-left: 0;
              .list-item-icon-col {
                padding-left: 22px;

              }
              .la-icon {
                background-color: $gray;
                border-color: $gray;
              }
              .list-item-section {
                &:first-child {
                  background-color: gray;
                }
              }
            }
            &.vlm-list-item-fg {
              cursor: default;
              margin-left: 0;
              border-left: 10px solid $gray;
              .list-item-arrow-col {
                margin-left: 0px;
              }
              .list-item-icon-col {
                padding-left: 22px;
              }
              .fg-icon {
                background-color: $gray;
                border-color: $gray;
              }
            }
            &.vlm-list-item-ep {
              margin-left: 0;
              border-left: 10px solid $gray;
              .list-item-icon-col {
                padding-left: 22px;
              }
              .ep-icon {
                background-color: $gray;
                border-color: $gray;
              }
              .list-item-section {
                &:first-child {
                  display: flex;
                  color: $white;
                  min-width: 34px;
                }
              }
            }
            &.vlm-list-item-lkg {
              margin-left: 0;
              border-left: 10px solid $gray;
              .list-item-icon-col {
                padding-left: 22px;
              }
              .lkg-icon {
                background-color: $gray;
                border-color: $gray;
              }
              .list-item-section {
                &:first-child {
                  display: flex;
                  color: $white;
                  min-width: 34px;
                }
              }
            }
          }
        }
      }
    }
    .vlm-list-view {
      flex: 1;
      .vlm-list {
        @extend .flex;
        flex-direction: column;
        .vlm-list-item {
          @include border-shadow();
          min-height: 90px;
          height: 90px;
          background-color: $tlv-gray;
          @extend .flex;
          border: 1px solid $tlv-light-gray;
          margin-bottom: 0px;
          cursor: pointer;
          .list-item-icon-col {
            display: flex;
            flex-direction: column;
            justify-content: center;

          }
          .list-item-section {
            padding: 10px;
            .children-count {
              @extend .body-1;
              line-height: 20px;
              color: $gray;
              padding-left: 5px;
              .count-value {
                padding: 0 5px;
              }
            }
            .additional-data {
              padding-left: 50px;
              .additional-data-name {
                @extend .body-1-medium;
              }
            }
            .additional-data-col-border {
              border-left: 1px solid $tlv-light-gray;
              min-height: 100%;
              height: 100%;
            }
          }
          .list-item-additional-data-col {
            @extend .body-1;
            @extend .flex;
            align-items: center;
            flex: 0.8;
          }
          .arrow-icon {
            align-self: center;
          }
          .vlm-item-info {
            flex: 1;
          }
          .vlm-list-item-title {
            @extend .flex;
            .item-name {
              @extend .heading-5-medium;
              flex: 0 1 auto;
              margin-bottom: 4px;
            }
          }
          .vlm-list-item-description {
            @extend .body-1;
            overflow: hidden;
            max-height: 38px;
          }
          &.vlm-list-item-la {
            margin-top: 10px;
            border-left: 10px solid $dark-blue;
            .la-icon {
              @include create-circle($circle-icon-size,$dark-blue,'LA');
              color: $white;
            }
            .list-item-section {

              &:first-child {
                display: flex;
                color: $dark-blue;
                min-width: 34px;
              }
            }
            .list-item-arrow-col {
              flex: 0.01;
              margin-left: 14px;
            }
            .list-item-icon-col {
              padding-left: 14px;
              padding-right: 30px;
              align-items: center;
            }

          }
          &.vlm-list-item-fg {
            border-left: 10px solid $blue;
            margin-left: 20px;
            margin-top: 10px;
            .fg-icon {
              @include create-circle($circle-icon-size,$blue,'FG');
              color: $white;
            }
            .list-item-section {
              &:first-child {
                display: flex;
                color: $blue;
                min-width: 34px;

              }
            }
            .list-item-arrow-col {
              flex: 0.01;
              margin-left: 26px;
            }
            .list-item-icon-col {
              padding-left: 22px;
              padding-right: 30px;
              align-items: center;
            }
          }
          &.vlm-list-item-ep {
            margin-left: 40px;
            margin-top: 10px;
            border-left: 10px solid $light-blue;
            cursor: default;
            .ep-icon {
              @include create-circle($circle-icon-size,$light-blue,'EP');
              color: $white;
            }
            .list-item-icon-col {
              padding-left: 72px;
              padding-right: 30px;
              align-items: center;
            }
            .list-item-section {
              &:first-child {
                display: none;
              }
            }
            .list-item-additional-data-col {
              margin-right: 20px;
            }
          }
          &.vlm-list-item-lkg {
            margin-top: 10px;
            margin-left: 40px;
            border-left: 10px solid $light-blue;
            cursor: default;
            .lkg-icon {
              @include create-circle($circle-icon-size,$light-blue,'KG');
              color: $white;
            }
            .list-item-icon-col {
              padding-left: 72px;
              padding-right: 30px;
              align-items: center;
            }
            .list-item-section {
              &:first-child {
                display: none;
              }

            }
            .list-item-additional-data-col {
              margin-right: 20px;
            }
          }
        }

      }
    }
  }

}