.lynked-rewards--btn {
  background: rgb(0, 13, 70);
  min-width: 60px;
  height: 60px;
  border-radius: 50px;
  border: none;
  text-align: center;
  padding: 15px;
  font-size: 14px;
}


.lynked-point-logo-wrapper {
  display: flex;
  justify-content: space-between;
}

.lynked-point-logo-wrapper img {
  width: 30px;
  height: 30px;
}

.lynked-reward--btn {
  display: inline-flex;
  align-items: center;
}

.lynked-rewards--btn span {
  margin-left: 15px;
  font-size: 14px;
  color: white;
  font-family: "SUSE", serif;
}

.lynked-reward--btn img {
  width: 28px;
}

.header--lynked {
  margin: auto;
}

.lynked-download--wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.lynked-download--wrapper img {
  width: 170px;
}

.lynked-openCloseReward {
  cursor: pointer;
}

.lynked-reward-inside-block {
  display: flex;
  flex-direction: column;
  position: relative;
}

.lynked-reward-content {
  padding: 24px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 150px);
}

.lynked-reward-content::-webkit-scrollbar {
  background-color: transparent;
  width: 0;
}

.lynked-reward-content .lynked-title, .lynked-reward-content--wrapper .lynked-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
  color: #41A9FC;
  margin-bottom: 8px;
  margin-top: 15px;
  text-align: center;
}

.lynked-reward-content .lynked-card-description {
  line-height: 150%;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 14px;
  text-align: center;
  color: #3c464e;
  margin: 0;
}

.lynked-card-description a {
  color: #3fb1ff;
  margin-left: 5px;
  text-decoration: none;
}

.lynked-joinNow {
  text-decoration: none;
  color: black;
  background: #3fb1ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 25px;
  margin: 16px auto;
  font-size: 14px;
  width: 100%;
}

.lynked-pointWays {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 48px;
  cursor: pointer;
  margin-bottom: 8px;

  &:hover {
    background-color: transparent;
    opacity: 0.5;
  }
  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .lynked-arrow-right {
    pointer-events: none;
  }
  .lynked-pointsWays-item{
    padding: 4px 11px 4px 4px;
    border-radius: 28px;
    .lynked-pointsWays-icon{
      width: 20px;
      height: 20px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin: 0;
    }
  }

  .lynked-pointsWays-item-menu{
    .lynked-list-item-title{
      margin-left: 12px;
      font-size: 14px;
    }
  }
  .lynked-pointsWays-arrow{
    width: 28px;
    height: 28px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.lynked-voucher--wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 12px;
  position: relative;
  border-radius: 16px;
  background:  #2E4B4E;
  box-shadow: 4px 4px 4px 0px rgba(108, 166, 170, 0.15);
  margin-bottom: 7px;

  .lynked-pointWays {
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 8px;

    &:hover {
      background-color: transparent;
      opacity: 0.5;
    }
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    &>svg{
      margin-right: 8px;
    }

    .lynked-arrow-right {
      pointer-events: none;
    }

    .lynked-pointsWays-item-menu{
      .lynked-list-item-title{
        margin-left: 12px;
        font-size: 14px;
      }
    }
    .lynked-pointsWays-arrow{
      width: 28px;
      height: 28px;
      border-radius: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.lynked-pointsWays-item {
  display: flex;
  align-items: center;
  pointer-events: none;
}

.lynked-pointsWays-item .lynked-card-description {
  margin-left: 12px;
}

//.pointsWays-item svg {
//  width: 30px;
//  height: 30px;
//}


.lynked-reward-inside-block .lynked-title {
  color: black;
}

.lynked-pointWays--wrapper {
  margin-top: 5px;
}

.lynked-arrow-right {
  transform: rotate(180deg);
}

.lynked-displayCentre {
  display: flex;
  align-items: center;
}

.lynked-reward-footer {
  position: absolute;
  bottom: 0;
  z-index: 5;
  width: 100%;
  background: white;
  border-bottom-right-radius: 32px;
  border-bottom-left-radius: 32px;
  padding: 19px 0;
  box-sizing: border-box;
  height: 56px;
  text-align: center;
  font-size: 13px;
  box-shadow: 0 -5px 12px -8px rgba(0, 0, 0, 0.33);
}

.lynked-reward-footer .lynked-card-description {
  margin: 8px;
}

.lynked-point-back--wrapper {
  display: flex;
  align-items: center;
}

.lynked-point-back--wrapper h4 {
  margin: 0 10px 0;
  font-size: 14px;
}

.lynked-reward-content--wrapper {
  padding: 24px;
  height: calc(100% - 140px);
}

.lynked-reward-content--wrapper .lynked-title {
  text-align: left;
  margin-bottom: 20px;
}

.lynked-reward-content--wrapper .lynked-info--wrapper {
  font-size: 14px;
}

.lynked-reward-content--wrapper .lynked-info--wrapper .lynked-order-info {
  line-height: 1;
  color: #41A9FC;
  font-weight: bold;
}

.lynked-reward-content--wrapper .lynked-info--wrapper .lynked-points {
  color: #637381;
  font-size: 13px;
  font-weight: 400;
  padding-right: 6px;
  padding-bottom: 6px;
}

.lynked-reward-content--wrapper .lynked-waysToEarn .lynked-balance-block {
  text-align: center;
  margin-top: 20px;
}

.lynked-waysToEarn{
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 2px;
    background: transparent;
  }
  box-shadow: 4px 4px 4px 0px rgba(108, 166, 170, 0.15);
  .lynked-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 700;
    font-family: "SUSE", serif;
  }
  .lynked-reward-content-description-wrapper {
    position: relative;
    width: 100%;
    height: auto;

    .lynked-info--wrapper{
      padding: 12px 0;
      border-top: 1px solid rgba(46, 75, 78, 0.20);
      &-last{
        border-bottom: 1px solid rgba(46, 75, 78, 0.20);
      }
      .lynked-order-info{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .lynked-order-info-number{
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 8px;
          justify-content: center;
          align-items: center;
          display: flex;
        }
        .lynked-order-info-title{
          font-size: 12px;
          font-weight: 700;
          margin: 0;
          font-family: "SUSE", serif;
        }
      }
      .lynked-points{
        margin: 12px 0 0 0;
        font-size: 12px;
        font-weight: 400;
        font-family: "SUSE", serif;
      }
    }

  }
}
.lynked-points-activity{
  border-radius: 16px;
  padding: 24px;
  height:100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 2px;
    background: transparent;
  }
  box-shadow: 4px 4px 4px 0px rgba(108, 166, 170, 0.15);
  .lynked-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 700;
    font-family: "SUSE", serif;
  }
  .lynked-balance-block {
    text-align: left;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    font-family: "SUSE", serif;
    background-color: transparent;
    padding: 0;
  }
  .lynked-points-list{
    height: auto;
    overflow: hidden;
    max-height: unset;
    .lynked-point-item{
      padding: 16px;
      margin-bottom: 8px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: unset;

      &:last-child {
        margin-bottom: 0;
      }
      .lynked-activity-info{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        .lynked-pointCount-item{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          height: 100%;
          .lynked-order-info{
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 4px;
            font-family: "SUSE", serif;
          }
          .lynked-points-add{
            display: inline-flex;
            height: 24px;
            padding: 8px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            border-radius: 4px;
            font-family: "SUSE", serif;
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          }
        }
        .lynked-point-item-date{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-end;
          height: 100%;
          gap: 7px;
          .lynked-time{
            margin: 0;
            text-align: right;
            font-family: 'SUSE', serif;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
            opacity: 0.6;
          }
          .lynked-date{
            margin: 0;
            text-align: right;
            font-family: 'SUSE', serif;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
          }
        }
      }
      .lynked-used-voucher{
        margin-bottom: 5px;
        font-weight: 700;
        font-size: 12px;
        font-family: "SUSE", serif;
      }


    }
  }
}
.lynked-waysToRedeem{
  border-radius: 16px;
  padding: 24px;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 2px;
    background: transparent;
  }
  box-shadow: 4px 4px 4px 0px rgba(108, 166, 170, 0.15);
  .lynked-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 700;
    font-family: "SUSE", serif;
  }
  .lynked-reward-content-description-wrapper {
    position: relative;
    width: 100%;
    height: auto;

    .lynked-info--wrapper{

      .lynked-points{
        margin: 0 0 18px 0;
        padding: 0;
        font-size: 12px;
        font-weight: 400;
        font-family: "SUSE", serif;
      }
    }
    .lynked-redeem-rewards-info{
      height: 57px;
      display: flex;
      padding: 0 16px;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      font-family: "SUSE", serif;
    }

  }
}
.lynked-vouchers {
  border-radius: 16px;
  padding: 24px;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 2px;
    background: transparent;
  }
  box-shadow: 4px 4px 4px 0px rgba(108, 166, 170, 0.15);
  .lynked-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 700;
    font-family: "SUSE", serif;
  }
  .lynked-reward-content-description-wrapper {
    position: relative;
    width: 100%;
    height: auto;

    .lynked-info--wrapper{

      .lynked-points{
        margin: 0 0 18px 0;
        padding: 0;
        font-size: 12px;
        font-weight: 400;
        font-family: "SUSE", serif;
      }
    }
    .lynked-redeem-rewards-info{
      height: 57px;
      display: flex;
      padding: 0 16px;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      font-family: "SUSE", serif;
    }

  }
}
.lynked-voucher-inside {
  border-radius: 16px;
  padding: 24px;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 2px;
    background: transparent;
  }

  box-shadow: 4px 4px 4px 0px rgba(108, 166, 170, 0.15);
  .lynked-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 700;
    font-family: "SUSE", serif;
  }
  .lynked-reward-content-description-wrapper {
    position: relative;
    width: 100%;
    height: auto;

    .lynked-pointWays{
      margin-bottom: 24px;
      .lynked-pointsWays-item{
        margin-bottom: 0;
      }
    }
    .lynked-discount-expl{
      font-size: 18px;
      font-weight: 700;
    }
  }
}



.lynked-reward-detail-block {
  .lynked-reward--header {
    padding: 15px;

    h4 {
      margin: 0;
    }
  }

  .lynked-reward-footer {
    right: 0;
  }
}

.lynked-card-description .lynked-discount-expl {
  font-size: 18px;
  font-weight: 700;
}

.lynked-info--footer {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  padding: 24px;
  right: 0;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  align-items: center;
  background-color: #ffffff;
}

.lynked-info--footer .lynked-joinNow {
  text-align: center;
  margin: 0 0 16px 0;
  padding: 16px 0;
  border-radius: 8px;
  font-size: 14px;
  font-family: "SUSE", serif;
  font-weight: 600;
}

.lynked-info--footer .lynked-card-description, .lynked-download .lynked-card-description {
  color: #3c464e;
  font-size: 14px;
}

.lynked-download{
  height: 100%;
  border-radius: 16px;
  padding: 24px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 2px;
    background: transparent;
  }
  box-shadow: 4px 4px 4px 0px rgba(108, 166, 170, 0.15);

  &-isLogin{
    height: 100%;
  }

  .lynked-card-description {
    padding-right: 5px;
    font-size: 13px;
    font-weight: 400;
    color: #3c464e;
    margin: 0;
  }
  .lynked-title {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 700;
    font-family: "SUSE", serif;
  }
  .lynked-reward-content-description-wrapper{
    position: relative;
    width: 100%;
    height: auto;

    .lynked-download--wrapper{
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      a{
        width: 48%;
        height: 37px;

        img{
          height: 37px;
          width: 100%;
        }
      }
    }
    .lynked-card-description{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 12px 0;
      border-top: 1px solid rgba(46, 75, 78, 0.20);
      &-last{
        border-bottom: 1px solid rgba(46, 75, 78, 0.20);
      }
      .lynked-card-description-number{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 8px;
        justify-content: center;
        align-items: center;
        display: flex;
      }
      .lynked-card-description-text{
        margin: 6px 0 0 0;
        width: 90%;
        font-size: 12px;
        font-family: "SUSE", serif;
        font-weight: 400;

      }
    }
  }
}

.lynked-card-description.lynked-downloadApp {
  margin-top: 10px;
  pointer-events: none;
}

.lynked-points-list {
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

.lynked-point-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  font-size: 14px;
  color: #637381;
}

.lynked-point-item:not(:last-child) {
  border-bottom: 1px solid #eaeaea;
}

.lynked-background--wrapper {
  opacity: 1;
  box-shadow: none;
}

.lynked-pointCount-item {
  display: flex;
  flex-direction: column;
}

.lynked-point-item .lynked-order-info {
  color: #41A9FC;
}

.lynked-close-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 60px;
  height: 60px;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.lynked-openBlock .lynked-reward--btn {
  -webkit-animation: fadeOutNoDisplay .2s ease;
  animation: fadeOutNoDisplay .2s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.lynked-openBlock .lynked-reward--btn span {
  opacity: 0;
}

.lynked-openBlock .lynked-close-btn, .lynked-closeBlock .lynked-reward--btn {
  -webkit-animation: fadeIn .2s ease;
  animation: fadeIn .2s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.lynked-points-list::-webkit-scrollbar, .lynked-reward-content-description-wrapper::-webkit-scrollbar {
  width: 2px;
  background: transparent;
}

.lynked-points-list::-webkit-scrollbar-thumb, .lynked-reward-content-description-wrapper::-webkit-scrollbar-thumb {
  background-color: #e7e7e7;
}

.lynked-reward-content-description-wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 180px);
  position: absolute;
  width: calc(100% - 48px);
}

ol {
  padding-left: 25px;
  margin-bottom: 0;
}

.lynked-isLogin .lynked-reward-content-description-wrapper {
  height: calc(100% - 180px);
}

.lynked-redeem-rewards-info {
  color: rgb(0, 13, 70);
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  margin-top: 15px;
}


[data-way="download"] {
  display: flex;
  flex-direction: column;
}

.lynked-download-item--wrapper {
  pointer-events: none;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

[data-way="vouchers"] .lynked-list-item-title, [data-way="vouchers"] .lynked-card-description {
  margin-left: 0;
  padding-left: 0;
}

.lynked-vouchers-action-wrapper {
  pointer-events: none;
}

.lynked-vouchers-action-wrapper .lynked-list-item-title {
  color: #41A9FC;
  font-weight: 700;
}


.lynked-voucher-inside .lynked-pointsWays-item {
  margin-bottom: 10px;
}

.lynked-voucher-inside .lynked-pointsWays-item .lynked-card-description, .lynked-vouchers .lynked-pointsWays-item .lynked-card-description {
  font-size: 14px;
}

.lynked-system-btn {
  background-color: transparent!important;
  border: none;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  line-height: inherit;
  font: inherit;
  height: 36px;
  padding: 8px!important;
  position: absolute;
  text-align: left;
  width: 36px;
  right: 5px;
}

.lynked-apply-voucher--btn {
  width: 100%;
  padding: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: "SUSE", serif;
  color: white;
  background: rgb(0, 13, 70);
  margin-top: 20px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
}

.lynked-inactive-voucher {
  cursor: default;
  background: #bfbfbf;
}

.lynked-apply-voucher--btn svg {
  width: 24px;
}

.lynked-vouchers .lynked-title {
  margin-bottom: 16px;
}

.lynked-lds-ring {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
}

.lynked-lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 2px;
  border: 2px solid;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lynked-lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lynked-lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lynked-lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@media screen and (max-width: 450px) {
  .lynked-download {
    height: auto;
    max-height: calc(100vh - 230px);
  }
  .lynked-download-isLogin{
    max-height: calc(100vh - 165px);
  }
  .lynked-info--footer{
    border-radius: 0;
  }
  .lynked-points-activity{
    height: auto;
    max-height: calc(100vh - 165px);
  }
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@keyframes fadeIn {
  0% {
    opacity: 0;
    width: 0;
  }

  25% {
    width: 20px;
  }

  50% {
    width: 50px;
  }

  75% {
    width: 75px;
  }

  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    width: fit-content;
  }
}

@keyframes fadeOutNoDisplay {
  0% {
    opacity: 1;
    width: fit-content;
  }

  25% {
    width: 75px;
  }

  50% {
    width: 50px;
  }

  75% {
    width: 20px;
  }

  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    width: 0;
  }
}