.sticky-header {
  .el-row,
  .actions {
    position: fixed;
    -webkit-box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
    box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
    background: #fff;
    z-index: 101;
    margin-left: -50px !important;
    padding: 0px 40px;
    // color: white;
    // background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%);
  }

  .actions {
    top: 100px;
    padding: 0px 60px 20px 60px;
    margin-left: -70px !important;
    box-shadow: 0px 2px 0px 0px rgba(69, 65, 78, 0.1) !important;
  }

  .el-row {
    z-index: 8;
    overflow-x: auto;
  }

  &:not(.bottom) {
    .el-row {
      top: 84px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 20%);
    }
  }

  &.bottom {
    .el-row {
      bottom: 0px;
      margin-bottom: 0px !important;
      box-shadow: 0 2px 12px 12px rgb(0 0 0 / 10%);
    }
  }

  .el-col:first-child {
    padding-left: 20px !important;
  }

  .el-col:last-child {
    padding-right: 20px !important;
  }

  &.no-tag-view {
    &:not(.bottom) {
      .el-row {
        top: 50px !important;
      }
    }
  }
}

.sticky-header .sub-navbar {
  position: fixed;
  -webkit-box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
  box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
  z-index: 101;
  top: 84px;
}

@media only screen and (max-width: 600px) {
  .sticky-header {
    .el-row {
      margin-left: -20px !important;
    }
    .actions {
      margin-left: -42px !important;
    }
  }
}