.Form-Main {
  width: 60%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.Form-Container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  background-image: url("../../../Images/backgroundfreepik2.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;
}

.Form-Warning {
  margin-top: 50px;
  margin-bottom: 20px;
  width: 70%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.Form-Warning .Image {
  background-image: url("../../../Images/Icons/icons8/icons8-warning-96.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100px;
  padding: 50px;
}
.Warning-container {
  padding-left: 20px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.Warning-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.Warning-text-2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.Warning-text a {
  color: red;
  font-weight: 700;
  font-family: Montserrat;
  font-size: 1em;
  text-align: center;
}
.Warning-text .direct-form {
  font-family: Montserrat;
  font-size: 1.2em;
  text-align: center;
  color: #222222;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: none;
  /* border-bottom: 2px solid #222222; */
  background-color: transparent;

  transition: 0.1s ease-in-out;
}

.Warning-text .direct-form:hover {
  /* font-weight: bold; */
  border-bottom: 5px solid #1787ff;
}

.Form-body {
  width: 100%;
  height: 100%;
}
.requesters-information {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
  justify-content: center;
  align-items: flex-start;
}
.Form-body-color {
  width: 90%;
  height: auto;
  padding: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 100px;
  background-color: #fff;
  box-shadow: 0 25.6px 57.6px 0 rgb(0 0 0 / 22%),
    0 4.8px 14.4px 0 rgb(0 0 0 / 18%);
}
.text-CustomerNo {
  width: 100%;
  padding: 10px;
}

.text-Name {
  width: 100%;
}
.body-Name .Account-ID {
  width: 100%;
}

.body-Name .Customer-phone {
  width: 100%;
}
.body-Name .Requester-phone {
  width: 100%;
  gap: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.text-address {
  width: 100%;
  height: 80px;
  padding: 10px;
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-300px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.text-II {
  width: 100%;
  height: 100%;
  margin-top: 40px;
  margin-bottom: 50px;
  padding: 10px;
  column-gap: 30px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
}
.text-II-divider {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.body-text-II .Address-Separate {
  width: 100%;
  height: 100%;

  padding-top: 10px;
  padding-right: 10px;
  /* padding-left: 10px; */
  /* column-gap: 30px; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.text-II-2 {
  width: 100%;
  height: 100%;
  margin-top: 40px;
  margin-bottom: 50px;
  padding: 10px;
  column-gap: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.text-II-3 {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  animation: fadeIn 0.5s ease-in-out;
}
.II-3-Content {
  height: 100%;
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.II-3-radio-flexstart {
  width: 100%;
  display: flex;
  gap: 30px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.II-3-checkbox-flexstart {
  width: 100%;
  display: flex;
  gap: 30px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.product-column {
  height: auto;
  width: 30%;
  gap: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.product-show {
  display: none;
  gap: 30px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.II-3-dropdown {
  height: 100%;
  width: 33%;
}
.II-3-input {
  height: 100%;
  width: auto;
  margin-right: 20px;
}
.II-3-Title {
  margin-bottom: 30px;
}
.II-3-Body {
  display: flex;
  gap: 20px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.text-II-3-container {
  height: 100%;
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.II-3-Content {
  width: 100%;
  display: flex;
  row-gap: 30px;
  padding: 20px;

  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.II-3-column {
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.II-3-column-size {
  width: 100%;
  padding: 20px 0 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.II-3-row-size {
  width: 100%;
  padding: 20px 0 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.text-II-3-text-container {
  height: 10%;
  width: 100%;
}

.text-II-4 {
  width: 100%;
  height: auto;
  margin-top: 40px;
  margin-bottom: 50px;
  padding: 10px;
  column-gap: 10px;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;

  animation: fadeIn 0.5s ease-in-out;
}

.text-supply {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.text-Phone {
  width: 100%;
  padding: 10px;
}

.body-main-address {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.body-main-form {
  width: 100%;
  padding: 10px 0 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.body-main-supply {
  width: 100%;
  padding: 10px;
  gap: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.text-container-supply {
  height: 100%;
  width: 100%;
}
.body-main-CustomerNo {
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.body-main-Name {
  width: 100%;
  /* padding-top: 10px; */

  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.body-title-address {
  width: auto;
  height: 40px;
}
.body-title-form {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 50px 0 50px 0;
}

.body-title-note {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

.body-title-note p {
  font-family: Montserrat;
  font-size: 1.1em;
  font-weight: 500;
  color: #222222;
  text-align: center;
  margin-bottom: 20px;
}
.body-main-form .form {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.body-title-supply {
  width: auto;
  height: 100%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.button-supply {
  width: 100%;
  height: 100%;
}
.body-spacing {
  width: auto;
  height: 10px;
}

.body-CustomerNo {
  width: 100%;
  padding: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: left;
}

.body-address {
  width: 100%;
  height: 80px;
  padding: 10px;
}
.body-form {
  width: 100%;
  height: 80px;
  padding: 10px;
}
.body-supply {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.body-form-II {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.body-text-II {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.body-Name {
  width: 100%;
  /* height: 80px; */
  padding-top: 15px;
  /* padding-left: 10px; */
  padding-right: 10px;
}

.body-Phone {
  width: 50%;
  padding-bottom: 10px;
  padding-right: 10px;
}
.body-main-date {
  width: 50%;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}
.body-Date {
  width: 50%;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}
.body-container-date {
  height: 100%;
  width: 100%;
  gap: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.body-Date-II {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.body-title-date {
  width: auto;
  height: auto;
  margin-top: 10px;
  margin-bottom: 20px;
}
.body-title-Edate {
  width: auto;
  height: auto;
  margin: 10px 0 30px 0;
}
.body-container-Edate {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.body-main-gender {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.body-main-phone {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.body-main-gender {
  width: 100%;
  padding-right: 10px;
  /* padding-left: 10px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.body-Gender {
  width: 100%;
  gap: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.body-title-gender {
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}
.body-Gender-container {
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.body-GenderButton {
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.body-addressButton {
  width: 300px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}
.body-form-Button {
  width: 300px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}
.body-form-Button-show {
  width: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
}

.ORF-text-container {
  height: 100px;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.ORF-text-container-2 {
  height: auto;
  width: 80%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}
.ORF-text-container-3 {
  height: 1000px;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.II-container {
  height: 100%;
  width: 100%;
  padding: 10px 0 10px 0;
  /* padding: 10px; */
}
.hipaaterms {
  margin-top: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.1s ease-in-out;
}
.hipaa-label {
  position:relative;
  padding: 0 0 5px 0;
  transition: 0.1s ease-in-out;
  cursor: pointer;
  /* border-bottom: 1px solid #1787ff; */
}
/* .hipaa-label:hover {
  border-bottom: 3px solid #1787ff;
} */


.hipaa-label::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: #1787ff;
  bottom: 0;
  left: 0;
  transform: scale(0);
  transition: .2s all ease-out;
}

.hipaa-label:hover::after {
  transform: scale(1);
}

/*--------------------------------------------------------BODY-----------------------------------------------------*/

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/
/* .undraw-image-1 {
  background-image: url("../../Images/undraw_Welcoming_re_x0qo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;

  width: 500px;
  height: 500px;
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  z-index: 1;
} */

.undraw-image-2 {
  background-image: url("../../../Images/undraw_Super_thank_you_re_f8bo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;

  width: 500px;
  height: 500px;

  position: absolute;
  top: 25%;
  bottom: 0;
  right: 0;
  left: 75%;

  z-index: 1;
}

.undraw-image-3 {
  background-image: url("../../../Images/undraw_Showing_support_re_5f2v.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: cover;

  width: 500px;
  height: 500px;

  position: absolute;
  top: 50%;
  bottom: 0;
  right: 0;
  left: 0;

  z-index: 1;
}

/*--------------------------------------------------------IMAGE-----------------------------------------------------*/
/*--------------------------------------------------------TEXT-----------------------------------------------------*/
.reddot {
  color: red;
}
.headertext {
  font-family: Montserrat;
  font-size: 1.2em;
  text-align: left;
  /* display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; */
}
.headertextred {
  color: red;
  font-family: Montserrat;
  font-size: 1.4em;
  text-align: center;
}

.II-3-Title {
  font-family: Montserrat;
  font-size: 1em;
}
.Formtext {
  font-family: Montserrat;
  font-size: 1.2em;
  color: white;
  text-align: left;
}
.ORF-text {
  font-family: Montserrat;
  font-size: 2.3em;
  font-weight: 500;
}
.ORF-text-2 {
  text-align: left;
  font-family: Montserrat;
  font-size: 2em;
  font-weight: 500;
}
.ORF-text-3 {
  text-align: center;
  font-family: Montserrat;
  font-size: 2.8em;
  font-weight: 500;
}
.ORF-text-small {
  text-align: left;
  font-family: Montserrat;
  font-size: 1em;
  font-weight: 500;
}
.DOBtitletext {
  font-family: Montserrat;
  font-size: 1em;
  font-weight: bold;
  color: #222222;
  text-align: left;
  margin-bottom: 20px;
}
.genderTitleText {
  font-family: Montserrat;
  font-size: 1em;
  font-weight: bold;
  color: #222222;
  text-align: left;
}
.addressTitleText {
  font-family: Montserrat;
  font-size: 1em;
  font-weight: bold;
  color: #222222;
  text-align: left;
  margin-bottom: 20px;
}

.formTitleText {
  font-family: Montserrat;
  font-size: 1em;
  font-weight: bold;
  color: #222222;
  text-align: center;
  margin-bottom: 20px;
}
.IITitleText {
  font-family: Montserrat;
  font-size: 1.5em;
  font-weight: bolder;
  color: #222222;
  text-align: left;
}

/*--------------------------------------------------------TEXT-----------------------------------------------------*/

/*-------------------------------------------------- Input Box -------------------------------------------------- */

.popup-submit {
  padding: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.popup-submit img {
  margin-top: 50px;
  height: 100px;
  width: 200px;
}

.submit-update {
  height: 50px;
  width: 244px;
  font-family: Montserrat;
  border-radius: 3px;
  font-weight: bold;
  font-size: 1em;
  border: none;
  cursor: pointer;
  color: #fff;
  background-color: #1787ff;
  transition: 0.2s ease-in-out;
}
.submit-update:hover {
  border: 3px solid #1787ff;
  background-color: #fff;
  color: #1787ff;
}
.form-submit {
  width: 100%;
  height: 100px;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.form-submit > button {
  width: 15%;
  margin-bottom: 30px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 15px 20px;
  text-decoration: none;
  text-transform: uppercase;
  border: none;

  color: #222222;
  border: 1px solid #222222;
  letter-spacing: 2px;
  font-family: Montserrat;
  font-size: 1em;
  transition: 0.5s;
}
.form-submit > button:hover {
  color: #222222;
}
.form-submit > button span {
  display: block;
  position: absolute;
  background-color: rgb(0, 242, 254);
}
.form-submit > button span:nth-child(1) {
  left: 0;
  bottom: 0;
  width: 5px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s;
}
.form-submit > button:hover span:nth-child(1) {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.5s;
}

.form-submit > button span:nth-child(2) {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
}
.form-submit > button:hover span:nth-child(2) {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.5s;
}

.form-submit > button span:nth-child(3) {
  right: 0;
  bottom: 0;
  width: 5px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s;
  transition-delay: 0.5s;
}
.form-submit > button:hover span:nth-child(3) {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.5s;
  transition-delay: 0.5s;
}

.form-submit > button span:nth-child(4) {
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
  transition-delay: 0.5s;
}
.form-submit > button:hover span:nth-child(4) {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.5s;
  transition-delay: 0.5s;
}

.wrapper,
.wrapper-two,
.wrapper-date {
  width: 100%;
  height: 50px;
  background: transparent;
}
.wrapper-two {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper-II-3 {
  width: 10%;
}

.wrapper .input-data,
.wrapper-two .input-data-two,
.wrapper-II-3 .input-data-II-3,
.wrapper-date .input-data {
  height: 40px;
  width: 100%;
  position: relative;
}


.wrapper .input-data input,
.wrapper-two .input-data-two input,
.wrapper-II-3 .input-data-II-3 input,
.wrapper-date .input-data input {
  height: 100%;
  width: 100%;
  border: none;
  border-radius: 5px;
  outline: none;
  font-family: Montserrat;
  font-size: 17px;
  border: 1px solid #1787ff5d;
  background-color: #5fc9f31a;
  padding-left: 10px;
  transition: 0.1s ease-in-out;
}

/* .wrapper .input-data input:focus,
.wrapper-two .input-data-two input:focus,
.wrapper-II-3 .input-data-II-3 input:focus,
.wrapper-date .input-data input:focus {
  background-color: #fff;
  box-shadow: 0 8px 10px -5px rgba(0, 255, 255, 0.16),
    0 16px 24px 2px rgba(0, 255, 255, 0.11),
    0 6px 30px 5px rgba(0, 255, 255, 0.1);
} */

.wrapper .input-data input:hover,
.wrapper-two .input-data-two input:hover,
.wrapper-II-3 .input-data-II-3 input:hover,
.wrapper-date .input-data input:hover {
  border: 2px solid #1787ff;
}

.wrapper .input-data input:focus,
.wrapper-two .input-data-two input:focus,
.wrapper-II-3 .input-data-II-3 input:focus,
.wrapper-date .input-data input:focus {
  border: 2px solid #1787ff;
}

.input-data input:focus ~ label,
.input-data input:not(:placeholder-shown) ~ label,
.input-data-two input:focus ~ label,
.input-data-two input:not(:placeholder-shown) ~ label,
.input-data-II-3 input:focus ~ label,
.input-data-II-3 input:not(:placeholder-shown) ~ label,
.wrapper-date .input-data input:focus ~ label,
.wrapper-date .input-data input:not(:placeholder-shown) ~ label {
  transform: translateY(-30px);
  font-size: 15px;
  font-weight: bold;
}

.wrapper .input-data label,
.wrapper-two .input-data-two label,
.wrapper-II-3 .input-data-II-3 label,
.wrapper-date .input-data label {
  position: absolute;
  bottom: 10px;
  left: 0;
  color: #222222;
  font-family: Montserrat;
  pointer-events: none;
  transition: all 0.3s ease;
  margin-left: 10px;
}

/*-------------------------------------------------- Input Box -------------------------------------------------- */

/*-------------------------------------------------- Radio Button -------------------------------------------------- */
.Form-Main .checkmark:hover{
  border: var(--border) solid #1787ff;
  background-origin: content-box;
  background-repeat: no-repeat;
}
.custom-radio-btn {
  --size: 20px;
  min-width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  justify-content: left;
  align-items: center;
  cursor: pointer;
  margin-right: 20px;
  margin-bottom: 10px;
  position: relative;
  padding-left: var(--size);
}

.custom-radio-btn2 {
  --size: 20px;
  min-width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  justify-content: left;
  align-items: center;
  cursor: pointer;
  margin-right: 20px;
  position: relative;
  padding-left: var(--size);
}

.custom-radio-btn2 input,
.custom-radio-btn input {
  display: none;
}
.custom-radio-btn2.left,
.custom-radio-btn.left {
  padding-left: 0;
  padding-right: var(--size);
}

.label {
  font-family: Montserrat;
  font-size: 1em;
  color: #222222;
}

.custom-radio-btn2 .label,
.custom-radio-btn .label {
  margin-left: 5px;
}
.custom-radio-btn2.left .label,
.custom-radio-btn.left .label {
  margin: 0 5px;
}

.custom-radio-btn2[aria-label]::after,
.custom-radio-btn[aria-label]::after {
  content: attr(aria-label);
  display: inline-block;
  margin-left: 5px;
}


.custom-radio-btn2 .checkmark,
.custom-radio-btn .checkmark {
  --gap: 3px;
  --border: 2px;
  --check-color: #1787ff;
  width: var(--size);
  height: var(--size);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease-in-out;
  border: var(--border) solid black;
  padding: var(--gap);
  position: absolute;
  top: 0;
  left: 0;
}
.body-Gender-container input[type="radio"]:invalid + .checkmark::after {
  content: "*";
  color: red;
}
.body-addressButton input[type="radio"]:invalid + .checkmark::after {
  content: "*";
  color: red;
}
.body-form-Button input[type="radio"]:invalid + .checkmark::after {
  content: "*";
  color: red;
}

.custom-radio-btn2.left .checkmark,
.custom-radio-btn.left .checkmark {
  left: auto;
  right: 0;
}

.custom-radio-btn2 input:checked ~ .checkmark,
.custom-radio-btn input:checked ~ .checkmark {
  border: var(--border) solid #1787ff;
  background-origin: content-box;
  background-repeat: no-repeat;
}
.custom-radio-btn2 input:checked ~ .checkmark::before,
.custom-radio-btn2 input:checked ~ .checkmark::after,
.custom-radio-btn input:checked ~ .checkmark::before,
.custom-radio-btn input:checked ~ .checkmark::after {
  content: "";
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 2);
  background-color: var(--check-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.custom-radio-btn2 input:checked ~ .checkmark::after,
.custom-radio-btn input:checked ~ .checkmark::after {
  transform: translate(-50%, -50%);
}

/*-------------------------------------------------- Radio Button -------------------------------------------------- */

/*-------------------------------------------------- Product Selection Dropdown -------------------------------------------------- */

.prodselect-container {
  position: relative;
  max-width: 250px;
  width: 100%;
}

.prodselect-select-btn {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.prodselect-select-btn .prodselect-btn-text {
  font-size: 17px;
  font-family: Montserrat;
  font-weight: 400;
  color: #222222;
}

.prodselect-select-btn .arrow-dwn {
  display: flex;
  height: 21px;
  width: 21px;
  color: #fff;
  font-size: 14px;
  border-radius: 50%;
  background: #1787ff;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.prodselect-select-btn.open .arrow-dwn {
  transform: rotate(-180deg);
}

.prodselect-list-items {
  position: relative;
  margin-top: 15px;
  border-radius: 8px;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  display: none;
}

.prodselect-select-btn.open ~ .prodselect-list-items {
  display: block;
}

.prodselect-list-items .item {
  display: flex;
  align-items: center;
  list-style: none;
  height: 50px;
  cursor: pointer;
  transition: 0.3s;
  padding: 0 15px;
  border-radius: 8px;
}

.prodselect-list-items .item:hover {
  background-color: #e7edfe;
}

.item .item-text {
  font-size: 16px;
  font-family: Montserrat;
  font-weight: 400;
  color: #222222;
}

.item .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  border-radius: 4px;
  margin-right: 12px;
  border: 1.5px solid #c0c0c0;
  transition: all 0.3s ease-in-out;
}

.item.checked .checkbox {
  background-color: #1787ff;
  border-color: #1787ff;
}
.checkbox .check-icon {
  color: #fff;
  font-size: 11px;
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}
.item.checked .check-icon {
  transform: scale(1);
}

.custom-select-container {
  position: relative;
  max-width: 250px;
  width: 100%;
}

.custom-select-btn {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.custom-select-btn .custom-btn-text {
  font-size: 17px;
  font-family: Montserrat;
  font-weight: 400;
  color: #222222;
}

.custom-select-btn .arrow-down {
  display: flex;
  height: 21px;
  width: 21px;
  color: #fff;
  font-size: 14px;
  border-radius: 50%;
  background: #1787ff;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.custom-select-btn.open .arrow-down {
  transform: rotate(-180deg);
}

.custom-list-items {
  position: relative;
  margin-top: 15px;
  border-radius: 8px;
  padding: 16px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  display: none;
}

.custom-select-btn.open ~ .custom-list-items {
  display: block;
}

.custom-list-items .custom-item {
  display: flex;
  align-items: center;
  list-style: none;
  height: 50px;
  cursor: pointer;
  transition: 0.3s;
  padding: 0 15px;
  border-radius: 8px;
}

.custom-list-items .custom-item:hover {
  background-color: #e7edfe;
}

.custom-item .item-text {
  font-size: 16px;
  font-family: Montserrat;
  font-weight: 400;
  color: #222222;
}

.custom-item .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  border-radius: 4px;
  margin-right: 12px;
  border: 1.5px solid #c0c0c0;
  transition: all 0.3s ease-in-out;
}

.custom-item.checked2 .checkbox {
  background-color: #1787ff;
  border-color: #1787ff;
}

.checkbox .check-icon {
  color: #fff;
  font-size: 11px;
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}

.custom-item.checked2 .check-icon {
  transform: scale(1);
}

/*-------------------------------------------------- Product Selection Dropdown -------------------------------------------------- */

/*-------------------------------------------------- InputBox Message Textarea -------------------------------------------------- */

.inputBox {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
  border: none;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
}

.inputBox input {
  width: 100%;
  padding: 10px;
  font-family: Montserrat;
  border: none;
  border-bottom: 2px solid #222222;
  color: #222222;
  background: transparent;
  font-size: 1em;
  transition: 0.3s;
  outline: none;
}
.inputBox textarea {
  height: 100px;
  width: 100%;
  padding: 10px;
  font-family: Montserrat;
  border: 2px solid #1787f1;
  border-radius: 5px;
  color: #222222;
  background: transparent;
  font-size: 1em;
  transition: 0.3s;
  outline: none;
  resize: none;
}
.inputBox span {
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  font-family: Montserrat;
  font-size: 1em;
  color: rgba(128, 128, 128, 0.644);
  text-transform: uppercase;
  transition: 0.3s ease;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span {
  color: #1787ff;
  transform: translateY(-20px);
  font-size: 0.8em;
  padding: 0 10px;
  letter-spacing: 0.2em;
  border: none;
}
.inputBox textarea:valid ~ span,
.inputBox textarea:focus ~ span {
  color: #1787ff;
  transform: translateX(10px) translateY(-50px);
  font-size: 0.8em;
  padding: 0 10px;
  letter-spacing: 0.2em;
  border-left: 2px solid #1787ff;
  border-right: 2px solid #1787ff;
  background: #fff;
}

.inputBox input:valid,
.inputBox input:focus {
  border: none;
  border-bottom: 2px solid #1787ff;
}
.inputBox textarea:valid .inputBox textarea:focus {
  border: 2px solid #1787ff;
  border-bottom: 2px solid #1787ff;
}

.inputBox-or {
  position: relative;
  width: 100%;
  padding: 40px 0 0 0;
  border: none;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
}

.inputBox-or input {
  width: 100%;
  padding: 10px;
  font-family: Montserrat;
  border: none;
  border-bottom: 2px solid #222222;
  color: #222222;
  background: transparent;
  font-size: 1em;
  transition: 0.3s;
  outline: none;
}
.inputBox-or textarea {
  height: 100px;
  width: 100%;
  padding: 10px;
  font-family: Montserrat;
  border: 2px solid #1787f1;
  border-radius: 5px;
  color: #222222;
  background: transparent;
  font-size: 1em;
  transition: 0.3s;
  outline: none;
  resize: none;
}
.inputBox-or span {
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  font-family: Montserrat;
  font-size: 1em;
  color: rgba(128, 128, 128, 0.644);
  text-transform: uppercase;
  transition: 0.3s ease;
}
.inputBox-or input:valid ~ span,
.inputBox-or input:focus ~ span {
  color: #1787ff;
  transform: translateY(-20px);
  font-size: 0.8em;
  padding: 0 10px;
  letter-spacing: 0.2em;
  border: none;
}
.inputBox-or textarea:valid ~ span,
.inputBox-or textarea:focus ~ span {
  color: #1787ff;
  transform: translateX(10px) translateY(-8px);
  font-size: 0.8em;
  padding: 0 10px;
  letter-spacing: 0.2em;
  border-left: 2px solid #1787ff;
  border-right: 2px solid #1787ff;
  background: #fff;
}

.inputBox-orinput:valid,
.inputBox-or input:focus {
  border: none;
  border-bottom: 2px solid #1787ff;
}
.inputBox-or textarea:valid .inputBox-or textarea:focus {
  border: 2px solid #1787ff;
  border-bottom: 2px solid #1787ff;
}

/*-------------------------------------------------- InputBox Message Textarea -------------------------------------------------- */

.OR-button {
  margin-top: 50px;
  height: 20%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.OR-Submit {
  height: 50px;
  width: 200px;
  font-size: 1em;
  font-weight: 500;
  border-radius: 25px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  font-family: Montserrat;
  background: linear-gradient(
    109.6deg,
    rgb(6, 183, 249) 11.2%,
    rgb(25, 74, 236) 91.1%
  );
  border: none;
  transition: 0.2s;
}

.OR-Submit:hover {
  transform: scale(1.1);
}

@media only screen and (max-width: 1440px) {
  .Form-Main {
    width: 90%;
  }

  .Form-Warning {
    width: 90%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

@media only screen and (max-width: 1024px) {
  .Form-Main {
    width: 100%;
  }
  .headertext {
    font-size: 1em;
  }
}
@media (max-width: 820px) {
  .Warning-text {
    margin-bottom: 0;
  }
  .Form-body {
    height: auto;
    width: 100%;
  }
  /* .body-Name .Requester-phone {
    gap: 0;
  } */
  .body-Name .Requester-phone,
  .body-main-Name {
    flex-direction: column;
  }
  .II-3-checkbox-flexstart {
    flex-direction: column;
  }
  .product-column {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .Form-Warning {
    flex-direction: column;
  }
  .Form-body-color {
    padding: 20px;
  }
  .formTitleText {
    text-align: left;
  }
  .headertext {
    text-align:justify;
word-spacing:-2px;
  }
  .Warning-container{
    padding-left:0;
  }
  .Form-Warning .Image{
    display:none;
  }
  .body-title-note p{
    font-size:1em
  }
  .popup-submit img{
    margin-top:20px;
  }
  .hipaa-label{
    font-size: 0.8em;
  }
  .II-3-column-size,
  .II-3-row-size{
    padding: 20px 0 20px 10px; 
  }

  .body-main-form .form{
    align-items: center;
  }
}

@media (max-width: 380px) {
  .IITitleText {
    font-size: 1em;
  }
  .body-title-note p {
    font-size: 0.8em;
  }
  .formTitleText {
    margin-bottom: 0;
  }
  .or-col {
    padding: 20px 0 20px 0;
    align-items: center;
  }
  .body-main-form{
    padding:0;
  }
  
}

.or-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.or-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}