#popup-manual-sync-device-approved {
  width: 240px;
  height: 300px;
  padding-top: 40px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .popup-title {
    margin-bottom: 40px;
  }
    
  .linking-devices-icons {
    width: 117px;
    margin: 0 auto;
    display: flex;
    font-size: 35px;
    color: rgba($color: #afb0b5, $alpha: 0.5);
    justify-content: space-between;
    margin-bottom: 30px;

    .linking-dots {
      display: flex;
      margin-top: 15px;
      .dot {
        height: 5px;
        width: 5px;
        background-color: rgba($color: #afb0b5, $alpha: 0.5);
        border-radius: 50%;
        display: inline-block;
        margin: 0px 3px;
      }
    }
  }
    
  .bar {
    width: 224px;
    height: 10px;
    border-radius: 5px;
    background-color: rgba(0, 145, 255, 0.25);
    margin-bottom: 0px;
    
    > .content {
      padding: 5px;
      opacity: 1;
      border-radius: 5px;
      max-width: 95%;
      transition: width 1.5s;
      background-image:
        repeating-linear-gradient(
          -45deg,
        #0091ff,
        #0091ff 11px,
        #50b0f9 10px,
        #50b0f9 20px
        );
      background-size: 28px 28px;
      animation: move 1s linear infinite;
    }
    @keyframes move {
      0% { background-position: 0 0; }
      100% { background-position: 28px 0; }
    }
  }

  .percent {
    width: 46px;
    height: 22px;
    margin-bottom: 15px;
    > .content {
      border-radius: 50px;
      background-color: #373a45;
      span {
        font-size: 13px;
        color: #fff;
      }
    }

    &::before{
      content: "";
      position: relative;
      top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent #373a45 transparent;
    }
  }

  :nth-child(5) {
    p {
      font-weight: bold;
      margin: 0px;
    }
  }
  :nth-child(6) {
    margin: 3px 0px 30px 0px;
    p {
      margin: 0px;
    }
  }
}