fleet/frontend/pages/queries/ManageQueriesPage/_styles.scss

.manage-queries-page {
  &__header-wrap {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__header {
    display: flex;
    align-items: center;

    .form-field {
      margin-bottom: 0;
    }
  }

  &__text {
    margin-right: $pad-large;
  }

  &__title {
    font-size: $large;

    .fleeticon {
      color: $core-fleet-blue;
      margin-right: 15px;
    }

    .fleeticon-success-check {
      color: $ui-success;
    }

    .fleeticon-offline {
      color: $ui-error;
    }
  }

  &__description {
    margin: 0 0 $pad-xxlarge;

    h2 {
      text-transform: uppercase;
      color: $core-fleet-black;
      font-weight: $regular;
      font-size: $small;
    }

    p {
      color: $ui-fleet-black-75;
      margin: 0;
      font-size: $x-small;
      font-style: italic;
    }
  }

  &__action-button-container {
    display: flex;
    align-items: flex-start;
  }

  .form-field--dropdown {
    margin: 0;
  }

  .queries-table {
    &__platform-dropdown {
      width: 159px;

      .Select-menu-outer {
        width: 364px;
        max-height: 380px;

        .Select-menu {
          max-height: none;
        }
      }
      .Select-value {
        padding-left: $pad-medium;
        padding-right: $pad-medium;

        &::before {
          display: inline-block;
          position: absolute;
          padding: 5px 0 0 0; // centers spin
          content: url(../assets/images/icon-filter-black-16x16@2x.png);
          transform: scale(0.5);
          height: 26px;
          left: 2px;
        }
      }
      .Select-value-label {
        padding-left: $pad-medium;
      }
    }

    .data-table-block {
      .data-table__table {
        thead {
          .name__header {
            width: auto;
          }
          .platforms__header {
            width: $col-sm;
          }
          .author_name__header {
            display: none;
            width: 0;
          }
          .updated_at__header {
            display: none;
            width: 0;
          }
          @media (min-width: $break-990) {
            .author_name__header {
              display: table-cell;
              width: auto;
            }
          }
          @media (min-width: $break-1400) {
            .author_name__header {
              width: $col-md;
            }
            .updated_at__header {
              display: table-cell;
              width: auto;
            }
          }
        }
        tbody {
          .name__cell {
            max-width: $col-lg;

            .children-wrapper {
              display: flex;
              gap: $pad-xsmall;

              .observer-can-run-tooltip {
                font-weight: $regular;
              }
            }
          }

          @media (max-width: $break-990) {
            .name__cell {
              .w400 {
                max-width: calc(400px - 81px);
              }
            }
          }
          .platforms__cell {
            max-width: $col-md;
          }
          .author_name__cell {
            display: none;
            max-width: $col-md;
            img,
            div,
            span {
              display: flex;
              align-items: center;
            }
            div {
              padding-right: $pad-small;
            }
            .author-name {
              display: block;
            }
          }
          .updated_at__cell {
            display: none;
            max-width: $col-md;
          }
          @media (min-width: $break-990) {
            .author_name__cell {
              display: table-cell;
            }
          }
          @media (min-width: $break-1400) {
            .updated_at__cell {
              display: table-cell;
            }
          }
        }
      }
    }

    .query-icon {
      position: relative;
      top: 2px;
    }
  }
}