logos-storage-marketplace-ui/src/components/HealthChecks/HealthChecks.css

.health-checks {
  .address {
    display: flex;
    position: relative;
    gap: 16px;
    flex-direction: column;
    align-items: flex-start;

    @media (min-width: 1000px) {
      & {
        flex-direction: row;
        align-items: center;
      }
    }

    > div {
      position: relative;

      @media (max-width: 999px) {
        &:not(.refresh) {
          width: 100%;
        }
      }
    }

    svg {
      position: absolute;
      top: 68px;
      bottom: 0;
      right: 18px;
    }

    .refresh {
      position: relative;
      cursor: pointer;
      cursor: pointer;

      @media (max-width: 999px) {
        & {
          top: 0px;
          left: 0;
          transform: scale(1.5);
          right: 0;
          margin: auto;
        }
      }

      @media (min-width: 1000px) {
        & {
          top: 18px;
        }
      }

      svg {
        position: initial;
      }

      &.address--fetching .refresh svg {
        animation: rotate 2s linear infinite;
      }
    }

    input[type="number"] {
      width: 150px;
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type="number"] {
      -moz-appearance: textfield;
    }

    @media (max-width: 999px) {
      input[type="number"],
      input {
        width: 100%;
      }
    }
  }

  p {
    font-family: Azeret Mono;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: rgb(130, 130, 130);
    padding-left: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 3rem;
  }

  ul {
    margin-bottom: 32px;

    li {
      display: flex;
      align-items: center;
      padding: 16px 0;
      gap: 16px;
      border-top: 1px solid rgba(150, 150, 150, 0.2);
      border-bottom: 1px solid rgba(150, 150, 150, 0.2);

      &:first-child {
        font-family: Inter;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.011em;
      }

      span {
        display: flex;
        align-items: center;
        width: 20px;
        height: 20px;
        justify-content: center;
      }
    }
  }
}