search-agg-table {
  display: block;

  sharp-pagination {
    margin-bottom: 0;
  }

  .btn-pill {
    padding: 0 8px;
  }

  .field-config {
    margin-bottom: 12px;
    width: 90px;

    dl, label {
      margin-bottom: 0;
    }

    &-header {
      .icomoon-column-setting {
        position: relative;
        top: 1px;
      }
    }

    &:not(.open) {
      .field-config-body {
        display: none;
      }
    }

    &.open {
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
      position: relative;
      z-index: 1;

      .field-config-header {
        border-radius: 3px 3px 0 0;
        position: relative;
        z-index: 101;
        border-bottom: 0;
        padding-bottom: 6px;
      }
    }
  }
}

.field-config-body {
  background: #FFFFFF;
  border-radius: 0 3px 3px 3px;
  width: 310px;

  .field-config-fields {
    border: 1px solid #E2E2E2;
    border-radius: 3px;
    padding: 12px;
    max-height: 172px;
    overflow-y: auto;

    label {
      display: flex;
    }

    dd {
      margin-top: 4px;

      label {
        font-weight: normal;
      }

      &:nth-child(even) span {
        background: #EDEDED;
        border-radius: 1px;
      }
    }

    input {
      margin-right: 8px;
    }

    span {
      padding: 1px 4px 2px;
      flex: 1;
    }
  }

  .field-config-colors {
    margin-top: 15px;

    dt, dd {
      display: flex;
      align-items: center;
    }

    dt {
      justify-content: space-between;
    }

    dd {
      margin-top: 6px;
    }

    .label-value {
      width: 86px;
      text-align: center;
    }

    label {
      width: 52px;
      height: 18px;
      background: #98E3E0;
      border-radius: 1px;
    }

    .placeholder {
      flex: 1;
    }

    input {
      width: 86px;
      margin-left: 5px;
    }

    select {
      width: 56px;
    }
  }
}