sys-age-verify {
  .hdt-dialog {
    max-width: 50rem !important;
    width: 100%;

    .hdt-dialog-btn__close {
      display: none !important;
    }
  }
  
  .hdt-dialog-modal .hdt-dialog-modal__inner {
    padding: 0px;
  }

  .hdt-heading-age-verify {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1;
  }
  .hdt-logo-age-verify {
    max-width: 200px;
    margin-bottom: 2rem;
    margin-top: 12px;
  }
  .hdt-description-age-verify {
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 2rem;
  }

  .hdt-age-verify-form {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 2rem;

    .hdt-btn-verify,
    .hdt-btn-exit {
      padding: .7rem 3rem;
      font-size: 1.4rem;
      font-weight: 500;
      border-radius: 6rem;
    }

  }

  .hdt-age_date_of_birth {
    flex-wrap: unset;
    width: 100%;
    gap: 10px;
    margin-block-end: 2rem;

    &>* {
      padding-block: 8px;
      padding-inline: 5px;
    }
  }

  select:focus {
    outline: none;
  }
  
}

sys-age-verify .hdt-age-verify_wrap,
sys-age-verify .hdt-dialog {
  background-color: rgb(var(--color-background)) !important;
}

sys-age-verify .hdt-dialog::backdrop{
  pointer-events: none;
  backdrop-filter: blur(var(--backdrop-filter,5px));
  -webkit-backdrop-filter: blur(var(--backdrop-filter,5px));
}

sys-age-verify .hdt-age-verify-form .hdt-btn-verify {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  border: 1px solid rgb(var(--color-button-border));
}

sys-age-verify .hdt-age-verify-form .hdt-btn-exit {
  background-color: rgb(var(--color-button-text));
  color: rgb(var(--color-button));
}

sys-age-verify .hdt-age_date_of_birth .hdt-col-month,
sys-age-verify .hdt-age_date_of_birth .hdt-col-day,
sys-age-verify .hdt-age_date_of_birth .hdt-col-year {
  background-color: rgb(var(--color-background2));
  select{
    background-color: rgb(var(--color-background2));
  }
}

sys-age-verify .hdt-dialog-modal {
  background-color: rgba(var(--color-background), var(--background-opacity)) !important;
  /* position: relative; */
}

sys-age-verify {
  --color-background: var(--color-background, 0, 0, 0);
}

sys-age-verify .hdt-media-wrapper img {
  filter: blur(0px) brightness(calc(1 - var(--background-opacity, 0.5))) contrast(1) !important;
}

sys-age-verify .hdt-media-wrapper::after {
  background-color: rgba(var(--color-background), var(--background-opacity, 1)) !important;
}


@media (max-width: 768px) {
  .hdt-dialog-modal .hdt-dialog-modal__inner {
    padding: 15px !important;
  }

  sys-age-verify .hdt-dialog-modal {
    padding-inline: 15px;
  }
  .hdt-age_date_of_birth {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .hdt-col {
      width: 100%;
    }
  }
  
}