@import '~scss/variables';

.sync_info {
  margin-bottom: 12px;
  h3 {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 8px;
  }

  .wrapper {
    display: flex;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    & > div {
      flex: 1 1;
      h4 {
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        color: #242e42;
      }
      p {
        color: #79879c;
        font-size: 12px;
        line-height: 20px;
      }
    }

    .wrapper_icon,
    .wrapper_gray {
      display: flex;
      & > div {
        margin-left: 12px;
      }
    }

    .wrapper_gray {
      background: #f9fbfd;
      border-radius: 4px;
      padding: 12px;
      margin-right: 12px;

      &:last-child {
        margin-right: 0;
      }
    }

    .wrapper_icon {
      .syncStatus {
        position: relative;
        margin-left: 0;
        .syncStatus_icon {
          background: #fff;
          border-radius: 50%;
          position: absolute;
          bottom: 0;
          right: -2px;
          & > span > span {
            margin-right: 0 !important;
          }
        }
      }
    }
  }

  .info_card {
    background: #fff;
    padding: 12px;
    border-radius: 4px;
  }
}

.sync_result {
  h3 {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 8px;
  }
}

.statusTip {
  p {
    color: $light-color03 !important;
  }
}
