.network-overview-apps {
  height: 100%;

  .line-select-metric {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    &>span {
      font-size: 12px;
      color: #575757;
      font-weight: 400;
      margin-right: 3px;
    }
    .line-select__operation {
      height: 24px;
      margin-left: 3px;
      box-shadow: none;
      border-radius: 2px;
      .el-input__inner {
        width: 100px;
        height: 24px;
        padding-left: 4px;
        line-height: 24px;
        font-size: 12px;
        color: #2C72C6;
        font-weight: 400;
      }
      .el-input__suffix {
        display: flex;
        .el-input__suffix-inner {
          line-height: 24px;
          .el-select__caret {
            line-height: 24px;
            width: 16px;
            color: #575757;
          }
        }
      }
    }
  }


  .app-cards {
    display: grid;
    grid-template-rows: repeat(auto-fill, 100px);
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-gap: 20px;
    width: 100%;
    padding-top: 10px;
    height: calc(100% - 24px);

    .app-card {
      border: 1px solid #E2E5EC;
      border-radius: 4px;
      display: flex;
      height: 100px;
      flex-direction: column;

      &.app-card--create {
        background-color: #F7F7F7;
        justify-content: center;
        align-items: center;

        .cn-icon {
          padding-bottom: 2px;
          font-size: 17px;
          color: #38ACD2;
          cursor: pointer;
        }
        span {
          font-size: 12px;
          color: #353636;
          cursor: pointer;
        }
      }
      .app-card-title {
        display: flex;
        padding: 0 12px;
        margin-top: 10px;
        justify-content: space-between;
        .app-card-title-name {
          span {
            font-size: 16px;
            color: #046ECA;
          }
          i {
            color: #38ACD2;
            font-size: 16px;
            padding-right: 4px;
          }
        }
        .app-card-title-more {
          position: relative;
          .app-card-title-more-delete {
            z-index: 1;
            font-family: Helvetica-Bold;
            position: absolute;
            min-width: 96px;
            line-height: 32px;
            height: 32px;
            top: 14px;
            left: -68px;
            background: #FFFFFF;
            border: 1px solid #C5C5C5;
            box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
            border-radius: 2px;
            font-size: 12px;
            padding-left: 6.8px;
            color: #353636;
            font-weight: 400;
            i {
              margin-right: 5.67px;
              font-size: 12px;
              color: #575757;
            }
          }
          .app-card-title-more-delete:hover {
            background: #EBF1F4;
            border: 1px solid rgba(0,0,0,0.15);
          }
          .app-card-title-more-delete:active {
            background: #E0E7EA;
            border: 1px solid rgba(0,0,0,0.15);
          }
        }
      }
      .app-card__bodys {
        display: flex;
        margin-top: 4px;
        flex: 1;
      }
      .app-card__body {
        flex: 1;
        padding-left: 12px;
        display: flex;
        flex-direction: column;
      }
      .app-card__body-content {
        display: flex;
        margin-bottom: 6px;
        .app-card__body-content-value {
          display: flex;
          .app-card__body-content-number {
            font-size: 14px;
            color: #353636;
            font-weight: 700;
            margin-right: 6px;
          }
        }
        .app-card__body-content-percent {
          font-size: 12px;
          font-weight: 500;
          height: 20px;
          width: 68px;
          line-height: 20px;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          position: relative;
          top: 50%;
          color: #fff;
          margin-top: -10px;
        }
        .app-card__body-content-percent.red {
          background-color: rgb(226, 97, 84);
        }
        .app-card__body-content-percent.green {
          background-color: rgb(126, 159, 84);
        }
      }
      .app-card__body-previous {
        display: flex;
        font-size: 12px;
        color: #353636;
        font-weight: 400;
        div:nth-of-type(1) {
          margin-right: 5px;
        }
      }
      .chart__drawing {
        flex: 1;
      }
    }
  }
  .add-app-drawer {
    height: 526px !important;

    .add-app {
      display: flex;
      flex-direction: column;
      height: 100%;

      .add-app__header {
        display: flex;
        justify-content: space-between;
        height: 46px;
        background-color: white;

        .header__title {
          padding-left: 20px;
          font-size: 16px;
          font-weight: bold;
          line-height: 46px;
          color: #353636;
        }
        .header__operations {
          display: flex;
          align-items: center;

          .header__operation {
            width: 80px;
            height: 30px;
            margin-right: 20px;
            line-height: 30px;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;

            &.header__operation--cancel {
              border: 1px solid rgba(0,0,0,0.15);
              color: #333;
            }
            &.header__operation--save {
              background-color: #38ACD2;
              color: white;
            }

          }
        }
      }
      .add-app__body {
        position: relative;
        flex: 1;
        background-color: #EBF1F4;
        .el-tabs__item.is-top {
          height: 32px;
        }
        .el-tabs__item.is-top:nth-child(2) {
          padding: 0;
        }
        .body__searcher {
          position: absolute;
          right: 28px;
          top: 9px;
          width: 280px;
          .el-input.el-input--mini {
            .el-input__inner {
              background: #FFFFFF;
              border: 1px solid #DEDEDE;
              box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
              border-radius: 14px;
            }
            &.el-input--prefix {
              i {
                color: #575757;
                font-size: 16px;
                font-weight: 600;
              }
            }
          }
        }
        .el-tabs__nav-wrap::after {
          height: 0;
        }
        .el-tabs__header {
          padding-left: 20px;
        }
        .body__apps {
          height: 420px;
          padding: 0 20px;
          overflow: auto;
          display: grid;
          grid-template-rows: repeat(auto-fill, 120px);
          grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
          grid-gap: 20px;

          &::-webkit-scrollbar-thumb {
            background-color: #c5c5c5;
            border-radius: 5px;
          }
          &::-webkit-scrollbar-thumb:hover {
            background-color: #a0a0a0;
            border-radius: 5px;
          }
          .body__app.app-show,
          .body__app.provide-show {
            background: #FFFFFF;
            border: 1px solid #C5C5C5;
            box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
            border-radius: 4px;
            .body__app-content .body__app-left .body__app-left-title {
              color: #046ECA;
            }
          }
          .body__app {
            height: 120px;
            background: #FFFFFF;
            border: 1px solid #E2E5EC;
            border-radius: 4px;
            padding: 18px 16px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            .body__app-content {
              display: flex;
              justify-content: space-between;
              .body__app-left {
                display: flex;
                .body__app-left-title {
                  font-family: Helvetica-Bold;
                  font-size: 16px;
                  color: #353636;
                  font-weight: 700;
                  margin-bottom: 6px;
                }

                span {
                  i {
                    color: green;
                    margin-right: 2px;
                    font-size: 16px;
                  }
                }
              }
              .body__app-content-right {
                span {
                  i {
                    color: #046ECA;
                    margin-right: 2px;
                    font-size: 16px;
                  }
                }
              }
            }
            .body__app-value {
              font-size: 12px;
              color: #717171;
              line-height: 18px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}
.el-select__popper.app-metric {
  top: 27px !important;
  .el-popper__arrow {
    display: none;
  }
}
.app-dropdown.el-popper.is-pure {
  .el-scrollbar {
    .el-scrollbar__wrap {
      .el-scrollbar__view.el-dropdown__list {
        padding: 0;
        margin: 0;
        .el-dropdown-menu {
          padding: 0;
          .el-dropdown-menu__item {
            padding-left: 5px;
            max-height: 25px;
            min-width: 80px;
            line-height: 25px;
            font-size: 12px;
            font-family: Helvetica-Bold;
            color: #353636;
            font-weight: 400;
            i {
              color: #353636;
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  .el-popper__arrow {
    display: none;
  }
}