.formRegistration{
  position: relative;
  max-width: 650px;
  width: 100%;
  margin: 0 auto;
}
.innerFormRegistration{
  --swatch--warm-white: #fff4e6;
  --swatch--grey: #505050;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: transparent;
  padding: 10px;
}

.formStep{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.labelInput{
  margin-bottom: 5px;
  display: block;
  font-size: 18px;
  line-height: 20px;
  padding-left: 5px;
}

.innerFormRegistration .inputFormRegistration{
  font-size: 18px;
  line-height: 20px;
  background-color: var(--swatch--warm-white);
  border: 1px solid #ced4da;
  border-radius: 1.5rem;
  width: 100%;
  padding: .75rem 1.25rem; 
  color: #505050;
  box-sizing: border-box;
  transition: all .2s;
}

.inputFormRegistration:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(34, 73, 87, .2);
}

.inputFormRegistration#delivery_time{
  flex-basis: min-content;
}

.innerCheckbox{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: -5px;
}

.checkboxLabel{
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  margin: 0;
}

.checkboxLabel a{
  text-decoration: underline;
}

.innerTimeInputs{
  display: flex;
  align-items: center;
  width: 100%; 
  gap: 15px;
}

.buttonSubsciption{
  font-size: 18px;
  line-height: 20px;
  display: block;
  text-align: center;
  border: 1px solid transparent;
  background-color: #425b76;
  color: #fff;
  text-align: center;
  padding: .75rem 2rem;
  width: 100%;
  font-weight: 400;
  cursor: pointer;
  transition: all .4s ease-in-out, color .2s ease-in-out, .2s ease-in-out;
}

.buttonSubsciption:hover,
.buttonSubsciption:active,
.buttonSubsciption:focus,
.buttonSubsciption:focus-visible{
  background-color: #425b76;
  opacity: .9;
  font-weight: 400;
  border: 1px solid transparent;
}

.buttonSubsciption:disabled{
  opacity: .6;
  cursor: not-allowed;
}

.buttonAddSectionCoupon{
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  padding: 0px;
  background-color: transparent;
  color: #000000;
  display: block;
  max-width: fit-content;
  margin-left: auto;
  text-decoration: underline; 
  border: none; 
}

.buttonAddSectionCoupon:before,
.buttonAddSectionCoupon:after{
  background: transparent;
}

.buttonAddSectionCoupon:hover,
.buttonAddSectionCoupon:active,
.buttonAddSectionCoupon:focus,
.buttonAddSectionCoupon:focus-visible{
  background-color: transparent;
  color: #000000;
  text-decoration: underline;
  border: none;
  font-weight: 400;
}

.innerFieldCouponCode{
  position: relative;
}

.buttonRemoveCoupon{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: red;
  cursor: pointer
}

.innerSuccessPage .title{
  font-size: 22px;
  line-height: 24px;
  font-weight: 500;
  margin: 0;
  text-align: center;
}

.innerSuccessPage .suptitle{
  font-size: 16px;
  line-height: 18px;
  margin: 0;
  text-align: center;
}

.buttonViewProfile{
  max-width: fit-content;
  display: block;
  margin: 0 auto;
}

.subscriptionInfo{
  margin: 0;
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
}

.innerLoader{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
  z-index: 10;
}

.d-flex{
  display: flex;
}

.d-none{
  display: none;
}

.w-100{
  width: 100%;
}

@media(max-width: 991px){
  .buttonSubsciption {
    font-size: 16px;
    line-height: 18px;
  }
  .inputFormRegistration{
    font-size: 16px;
    line-height: 18px;
  }
  .checkboxLabel{
    font-size: 14px;
    line-height: 16px;
  }
  .labelInput{
    font-size: 16px;
    line-height: 18px;
  }
}

@media(max-width: 479px){
  .innerFormRegistration{
    gap: .75rem;
  }
  .formStep{
    gap: .75rem;
  }
  .innerTimeInputs{
    flex-direction: column;
    gap: .75rem;
  }
}