@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  /* Theme */
  --primary-color-theme: #faf8f6;
  --secondary-color-theme: #fff2f2;

  /* Font Color */
  --primary-color-contrast: #1b1b1b;

  /* Font Sizes */
  --font-size-xxxl: clamp(2.75rem, calc(3vw + 1rem), 3.25rem);
  --font-size-xxl: clamp(2.25rem, calc(2vw + 1rem), 2.8rem);
  --font-size-xl: clamp(1.75rem, calc(2vw + 1rem), 2.5rem);
  --font-size-lg: clamp(1.5rem, calc(2vw + 1rem), 2rem);
  --font-size-md: clamp(1.2rem, calc(2vw + 1rem), 1.4rem);
  --font-size-regular-2: clamp(1rem, calc(2vw + 1rem), 1.25rem);
  --font-size-regular: clamp(.9rem, calc(1.75vw + 1rem), 1rem);
  --font-size-sm: clamp(0.7rem, calc(1.75vw + .5rem), 0.8rem);
  --font-size-xs: clamp(0.5rem, calc(1.75vw + .5rem), 0.6rem);
  --font-size-btn: clamp(1rem, calc(1.75vw + 1rem), 1.2rem);

  /* Primary Color */
  --primary-color-light-2: #e3f0ec;
  --primary-color-light: #d5ebe6;
  --primary-color: #22ae95;
  --primary-color-dark: #092d27;


  /* Secondary Color */
  --secondary-color-light: #fbe9e3;
  --secondary-color-light-2: #ffc1b3;
  --secondary-color: #ff6340;
  --secondary-color-dark: #d4573b;
  --font-size-inputs: 1.5rem;

}

/* @media (prefers-color-scheme: dark) {
    :root {
        --primary-color-theme: #303031;
    }
} */

/* Reset Styles */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  border: 1px solid #000;
  border: none;
  outline: none;
  box-sizing: border-box;


  /* background: rgba(0, 100, 0, 0.02); */
  /* outline: 0.5px solid limegreen !important; */


}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

dl, ol, ul {
  margin-bottom: 0;
}

a:hover {
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

html :is(body, select)::-webkit-scrollbar {
  width: 0px;
}

body {
  font-family: 'Poppins', sans-serif;
  min-height: 100dvh;
  background: var(--primary-color-theme);
}

hr {
  max-width: 150px;
  border: 4px solid var(--primary-color);
  margin-bottom: 2.25rem;
  border-radius: 10px;
}

p:empty {
  display: none;
}

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

img {
  width: 100%;
}

body :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 0;
}

p {
  font-size: clamp(1rem, calc(2vw + 1rem), 1.1rem);
}

label {
  margin-bottom: 0;
}

/* Generator https://doodlenerd.com/html-control/css-checkbox-generator*/
.control {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 5px;
  padding-block: 3px;
  cursor: pointer;
  font-size: 0.75rem;
  width: fit-content;
  margin: 0.5rem auto;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control_indicator {
  position: absolute;
  top: 1.5px;
  left: 0;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
  border: 0px solid #000000;
  border-radius: 5px;
}

.control:hover input~.control_indicator,
.control input:focus~.control_indicator {
  background: #cccccc;
}

.control input:checked~.control_indicator {
  background: var(--secondary-color);
}

.control:hover input:not([disabled]):checked~.control_indicator,
.control input:checked:focus~.control_indicator {
  background: #0e6647;
}

.control input:disabled~.control_indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.control_indicator:after {
  box-sizing: unset;
  content: '';
  position: absolute;
  display: none;
}

.control input:checked~.control_indicator:after {
  display: block;
}

.control-checkbox .control_indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.control-checkbox input:disabled~.control_indicator:after {
  border-color: #7b7b7b;
}

.control-checkbox .control_indicator::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  margin-left: -0.925rem;
  margin-top: -0.925rem;
  background: var(--secondary-color);
  border-radius: 3rem;
  opacity: 0.4;
  z-index: 99999;
  transform: scale(0);
}

.control-checkbox input+.control_indicator::before {
  animation: s-ripple 250ms ease-out;
}

.control-checkbox input:checked+.control_indicator::before {
  animation-name: s-ripple-dup;
}

@keyframes s-ripple {
  0% {
    transform: scale(0);
  }

  20% {
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes s-ripple-dup {
  0% {
    transform: scale(0);
  }

  30% {
    transform: scale(1);
  }

  60% {
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* End Generator */

/* Elements */
.btn {
  padding: 0.75rem 1.5rem;
}

.navbar-collapse {
  text-align: right;
}

.text-secondary {
  color: #727272 !important;
}


.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
  opacity: .75;
  outline: none;
  color: #c80000;
}


/* Custom Elements */
.formbad {
  border: 1px solid #ffc1c1 !important;
  box-shadow: 0 0 1px 1px #ffa2a2;
  background: #fff6f6;
  border-radius: 5px;
}

.linkFooter {
  color: var(--primary-color-theme);
  opacity: .75;
  font-weight: 300;
  letter-spacing: 0.54px;
  display: block;
}

.linkFooter:hover {
  color: var(--primary-color-theme);
  opacity: 1;
}

.section-information {
  color: #198754;
  color: var(--secondary-color-dark);
}

.collapseBtn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.collapseBtn:hover,
.collapseBtn:focus {
  color: #fff;
  box-shadow: none;
}

.btn-go-back {
  max-width: 250px;
  margin-inline: auto;
}

/* Primary Btn */
.primaryBtn {
  background: var(--primary-color);
  outline: 2px solid var(--primary-color);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  min-height: 50px;
  max-width: 400px;
  margin-inline: auto;
  border: none;
}

.primaryBtn:is(:hover, :active, :focus, :focus-visible, :disabled) {
  background: #fff !important;
  color: var(--primary-color) !important;
  outline: 2px solid var(--primary-color) !important;
  box-shadow: none;
  border: none;
}

/* Outline */
.primaryBtn-outline {
  background: transparent;
  color: var(--primary-color);
  outline: 2px solid var(--primary-color);
  font-size: 1rem;
  font-weight: 600;
  min-height: 50px;
  border: none;
}

.primaryBtn-outline:hover {
  background: var(--primary-color);
  color: var(--primary-color-theme);
  border: none;
}

.primaryBtn-outline:focus {
  box-shadow: none;
  border: none;
}

/* Secondary Btn */
.secondaryBtn {
  background: var(--secondary-color);
  outline: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  min-height: 50px;
  border: none;
}

.secondaryBtn:is(:hover, :active, :focus, :focus-visible, :disabled) {
  background: var(--secondary-color-dark) !important;
  outline: none !important;
  color: #fff !important;
  border: none;
}

.secondaryBtn:focus {
  box-shadow: none;
  border: none;
}

/* Outline */
.secondaryBtn-outline {
  background: transparent;
  color: var(--secondary-color);
  outline: 2px solid var(--secondary-color);
  font-size: 1rem;
  font-weight: 600;
  min-height: 50px;
  border: none;
}

.headerName:has(.add-cart) {
  text-align: center;
  margin-bottom: 1rem !important;
}

.secondaryBtn-outline:hover {
  background: var(--secondary-color);
  color: var(--primary-color-theme);
  border: none;
}

.secondaryBtn-outline:focus {
  box-shadow: none;
  border: none;
}

.btn-selected {
  filter: saturate(0.5);
}

.btn-selected::before {
  content: '\2713';
  display: inline-block;
  padding: 0 6px 0 0;
}

/* Texts Colors */
.primaryText {
  color: var(--primary-color);
}

.secondaryText {
  color: var(--secondary-color);
}

.constrastText {
  color: var(--primary-color-contrast);
}

.text-bold {
  font-weight: 700 !important;
}

/* End  Custom Elements */

/* End Elements */

/* Pipeline 3.0 */
.container-form {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 3px 3px 6px rgb(0 0 0 / 16%);
  padding: 2rem 1rem;
  background-color: #fff;
}

.container-form .container-img img {
  max-width: 160px;
  margin-bottom: 1rem;
}

.container-form .progress-text {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-md);
  line-height: 1;
  font-weight: 500;
}

.container-form .progress {
  margin-bottom: 2rem;
}

.container-form .progress-bar {
  background-color: var(--primary-color);
}

.container-form .headers-titles {
  display: flex;
  gap: .5rem;
  flex-direction: column;
  margin-bottom: 1rem;
}

.container-form .headers-titles p {
  margin-bottom: 0;
  font-weight: 600;
}

.container-form .questions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
}

.container-form .questions .container-btn {
  flex: 1 1 100%;
}

.container-form .questions .container-btn .btn {
  width: min(100%, 300px);
  font-size: var(--font-size-md);
  line-height: 1;
  font-weight: 500;
}

.input-height {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.input-weight {
  width: 100%;
}

.input-container,
.input-gender {
  flex: 1 1 50%;
}

.input-container .container-btn {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

.headerName {
  font-weight: 600;
}

.stateselect,
.years-label,
.months-label,
.days-label,
.gender-label {
  width: 100%;
}

select.form-control {
  appearance: none;
}

img.medicareId {
  margin-top: 1rem;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12);
  display: none;
}

#genders {
  width: 100%;
}

.input-birthday {
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-birthday>div {
  flex: 1 1 33%;
}

#agreeText {
  font-size: 0.7rem;
  text-align: justify;
  background: #fff;
  padding: 0.5rem 1rem;
  color: #999;
  border-radius: 5px;
  margin-top: 0.25rem;
  border: 1px solid #ced4da;
  height: 100px;
  overflow-y: scroll;
}

#agreeText::-webkit-scrollbar {
  width: 0;
}

/* Payout Container */
.payout-container {
  margin-top: -1rem;
}

/* Message */
.payout_tool-message {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--primary-color);
  border-radius: 20px;
  margin-bottom: 2rem;
}

.tool-message_icon {
  display: grid;
  place-content: center;
}

.tool-message_content p {
  font-size: var(--font-size-sm);
  line-height: 1.2;
}

/* Card Info */
.payout_card-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
}

.payout_card-info .d-flex {
  gap: 1rem;
  width: 100%;
}

.payout_card-info .d-flex>div {
  flex: 1 1 50%;
}

/* Product Info */
.payout_product-info {
  margin-bottom: 2rem;
}

.payout_product-info>p>a {
  width: 100%;
  border-radius: 100vmax;
  border: 1px solid #d6d6d6;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #727272;
  box-shadow: 0px 6px 10px -6px rgba(0, 0, 0, 0.25);
}

.payout_product-info>p>a:focus {
  box-shadow: 0px 6px 10px -6px rgba(0, 0, 0, 0.25);
}

.payout_product-info>p>a>.secondaryBtn {
  border-radius: 100vmax;
  min-height: initial;
}

/* End Pipeline 3.0 */

@media screen and (max-width: 992px) {
  p {
    margin-bottom: .5rem;
  }
  .position-relative:has(#expiration-credit-card){
    margin-bottom: 1rem;
}
}

@media screen and (max-width: 768px) {
  button {
    max-width: initial !important;
  }

  .secondaryBtn {
    width: 100%;
  }

  .input-birthday {
    flex-direction: column;
  }

  .input-birthday>div {
    flex: auto;
    width: 100%;
  }

  /* Primary Btn */
  .primaryBtn:is(:hover, :active, :focus, :focus-visible, :disabled) {
    background: var(--primary-color) !important;
    outline: 2px solid var(--primary-color) !important;
    color: #fff !important;
    box-shadow: none;
    border: none;
  }

  /* Outline */
  .primaryBtn-outline:is(:hover, :active, :focus, :focus-visible, :disabled) {
    background: transparent !important;
    color: var(--primary-color) !important;
    outline: 2px solid var(--primary-color) !important;
    box-shadow: none;
    border: none;
  }

  /* Secondary Btn */
  .secondaryBtn:is(:hover, :active, :focus, :focus-visible, :disabled) {
    background: var(--secondary-color) !important;
    outline: none !important;
    color: #fff !important;
    box-shadow: none;
    border: none;
  }

  /* Outline */
  .secondaryBtn-outline:is(:hover, :active, :focus, :focus-visible, :disabled) {
    background: transparent !important;
    color: var(--secondary-color) !important;
    outline: 2px solid var(--secondary-color) !important;
    box-shadow: none;
    border: none;
  }

}