.subscription-logo{
  display: flex;
  justify-content: center;
  margin: 0 auto 3.063rem;
  img,
  svg{
    width: 107px;
    height: 31px;
  }
}
.name-email-wrapper{
  h1{
    font-size: 1.125rem;
    font-weight: 700;
  }
  p{
    color: var(--#{$variable-prefix}light-text-color);
  }
}

.form-title{
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--#{$variable-prefix}dark-text-color);
}

.subscription-form{
  .inputgroup-floatinglabel{
    button{
      color: #c3c3c7;
    }
  }
}

.product-plan{
  width: 150px;
  font-size: 12px;
  font-weight: 600;
  color: var(--#{$variable-prefix}eerie-black);
  svg{
    color: #a6a8ac;
  }
  span{
    flex: 1;
  }
}

.btn-light-blue{
  color: #13171f;
  background-color: #f2f4f7;
  svg{
    color: #454b93;
  }
}

.separator-fade{
  background-color: var(--#{$variable-prefix}separtor-bg);
  opacity: 1;
}

.subscription-time-wrapper{
  h2{
    margin-bottom: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--#{$variable-prefix}offcanvas-back-btn);
    span{
      font-weight: 700;
      color: var(--#{$variable-prefix}subscription-alert-color);
    }
  }
  p{
    margin-bottom: 0;
    color: var(--#{$variable-prefix}subscription-desc-color);
  }
}

.subscription-list-row{
  > * {
    width: 400px;
    max-width: 400px;
  }
}

.general-product-wrapper{
  .product-desc{
    h2{
      font-size: .875rem;
    }
  }
  p{
    color: var(--#{$variable-prefix}light-text-color);
  }
}

.install-actions{
  .btn-loader{
    color: #1b1c21;
    opacity: .7;
    .spinner-border-vsm{
      color: #99dbc1;
    }
  }
}

.scroll-mysubscription-wrapper {
  min-height: calc(100vh - 235px);
  max-height: calc(100vh - 235px);
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    display: none;
  }
}

// Address
.address-wrapper{
  min-height: 270px;
  background-color: var(--#{$variable-prefix}accordion-body-bg);
  &:hover{
    border-color: var(--#{$variable-prefix}toolbox-blue);
  }
  .btn-add-address{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    text-align: center;
    cursor: pointer;
    background-color: #f7f8fa;
    border-radius: 50px;
  }
  .address-details-wrapper{
    position: absolute;
    bottom: 0;
    .address-icon{
      color: var(--#{$variable-prefix}toolbox-blue);
      opacity: .5;
    }
    h1{
      font-size: .75rem;
      font-weight: 700;
      color: var(--#{$variable-prefix}toolbox-blue);
    }
    p{
      font-size: .625rem;
      font-weight: 700;
      color: var(--#{$variable-prefix}light-text-color);
    }
  }
}

.custom-checkbox{
  label{
    position: relative;
    padding-right: 20px;
    font-size: .625rem;
    color: var(--#{$variable-prefix}toolbox-blue);
    &::before{
      position: absolute;
      top: calc(50% - 4px);
      right: 0;
      width: 20px;
      height: 20px;
      content: "";
      border: 1px solid #707070;
      border-radius: 10px;
      transform: translateY(-50%);
    }
    svg{
      position: absolute;
      right: 4px;
      width: 13px;
      opacity: 0;
    }
    span{
      padding-right: 8px;
      opacity: 0;
    }
  }
  .form-check-input:checked ~ label{
    &::before{
      background-color: #99dbc1;
      border: 1px solid #99dbc1;
    }
    svg{
      opacity: 1;
    }
    span{
      opacity: 1;
    }
  }
}

// Billing Method
.billing-card-wrapper{
  min-height: 202px;
  background-color: var(--#{$variable-prefix}accordion-body-bg);
  &:hover{
    border-color: var(--#{$variable-prefix}toolbox-blue);
  }
  .btn-add-billing-card{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    text-align: center;
    cursor: pointer;
    background-color: #f7f8fa;
    border-radius: 50px;
  }
  .billing-card-details-wrapper{
    position: absolute;
    bottom: 0;
    .billing-card-icon{
      width: 40px;
      height: 24px;
      color: var(--#{$variable-prefix}toolbox-blue);
      opacity: 1;
      svg{
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: left;
      }
    }
    h1{
      font-size: .75rem;
      font-weight: 700;
      color: var(--#{$variable-prefix}toolbox-blue);
    }
    p{
      font-size: .625rem;
      font-weight: 700;
      color: var(--#{$variable-prefix}light-text-color);
    }
  }
}

.btn-add-custom {
  align-self: baseline;
  padding: 5px 10px;
  border-radius: 15px;
}

.custom-separator {
  background: var(--bs-light-gray-background);
  background-color: var(--bs-light-gray-background);
}