body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: "Poppins", serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(16, 15, 15) !important;
}

.container {
  max-width: 1140px !important;
}

.bg-white {
  background-color: white;
  border: none !important;
  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
}

input {
  border: 2px solid #8080808f !important;
}

.logo-img img {
  width: 200px;
}

.header-section {
  background-color: black;
  color: white;
}

.contact-num {
  font-size: 20px;
}

.icon-size i {
  font-size: 25px;
}

.h1-bg {
  background-color: #ffe4c4;
}

.steps-hdng h6 {
  color: grey !important;
  text-transform: capitalize;
}

.steps-hdng {
  border-bottom: 5px solid white;
}

.bx-sdw {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

a {
  color: white !important;
}

.mr-30 {
  margin-right: 30px;
}

.container-fluid {
  /* background-image: url(../images/detailed-structure-marble-natural-pattern-background-design.jpg); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

label {
  text-transform: capitalize;
}

.lbl-txt {
  font-size: 16px;
  font-weight: 500;
  font-family: "Poppins", serif;
}

.tablinks {
  cursor: pointer;
}

.mr-3 {
  margin-right: 20px;
}

.inpt-styles-new {
  width: 75%;
  border-radius: 6px;
  padding: 9px;
}

.inpt-styles {
  width: 100%;
  border-radius: 6px;
  padding: 9px;
}

.input-styles {
  width: 100%;
  border-radius: 6px;
  padding: 9px;
}

.ln-ht {
  line-height: 25px;
}

.lbl-txt2 {
  font-size: 16px;
  font-weight: 500;
  font-family: "Poppins", serif;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tablinks h6 .active {
  color: #c61313;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.btn-styles {
  background-color: #b3dbe266 !important;
  color: black !important;
  padding: 7px 35px !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  border: none !important;
}

.br-5 {
  border-radius: 5px;
}

/* zuwhdgwcuweghgwewevuwegvwgve */

* {
  margin: 0;
  padding: 0;
}

.w-75 {
  width: 75% !important;
}

html {
  height: 100%;
}

p {
  color: grey;
}

#heading {
  text-transform: uppercase;
  color: #673ab7;
  font-weight: normal;
}

#msform {
  text-align: center;
  position: relative;
  margin-top: 20px;
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-bottom: 20px;
  position: relative;
}

.form-card {
  text-align: left;
}

#msform fieldset:not(:first-of-type) {
  display: none;
}

#msform input,
#msform textarea {
  padding: 8px 15px 8px 15px;
  border: 1px solid #ccc;
  border-radius: 0px;
  margin-bottom: 10px;
  margin-top: 2px;
  width: 100%;
  box-sizing: border-box;
  font-family: "Poppins", serif;
  color: #2c3e50;
  background-color: #eceff1;
  font-size: 16px;
  letter-spacing: 1px;
}

.bg-sky {
  background-color: #eceff1;
}

#msform input:focus,
#msform textarea:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: 1px solid #673ab7;
  outline-width: 0;
}

#msform .action-button {
  width: 100px;
  background: #673ab7;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 25px 10px 5px;
  float: right;
}

#msform .action-button:hover,
#msform .action-button:focus {
  background-color: #311b92;
}

#msform .action-button-previous {
  width: 100px;
  background: #616161;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 0px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px 10px 0px;
  float: right;
}

#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
  background-color: #000000;
}

.card {
  z-index: 0;
  border: none;
  position: relative;
}

.fs-title {
  font-size: 25px;
  color: #673ab7;
  margin-bottom: 15px;
  font-weight: normal;
  text-align: left;
}

.purple-text {
  color: #673ab7;
  font-weight: normal;
}

.steps {
  font-size: 25px;
  color: gray;
  margin-bottom: 10px;
  font-weight: normal;
  text-align: right;
}

.fieldlabels {
  color: gray;
  text-align: left;
}

#progressbar {
  /* margin-bottom: 30px; */
  overflow: hidden;
  color: lightgrey;
}

#progressbar .active {
  color: #673ab7;
}

#progressbar li {
  list-style-type: none;
  font-size: 15px;
  width: 20%;
  float: left;
  position: relative;
  font-weight: 400;
}

#progressbar #health-history:before {
  font-family: FontAwesome;
  content: "\f15c";
  /* Icon: "file-alt" (document icon for forms) */
}

#progressbar #dental-info:before {
  font-family: FontAwesome;
  content: "\f0f1";
  /* Icon: "tooth" (specific for dental information) */
}

#progressbar #medical-info:before {
  font-family: FontAwesome;
  content: "\f0fa";
  /* Icon: "stethoscope" (symbol for medical information) */
}

#progressbar #medical-updates:before {
  font-family: FontAwesome;
  content: "\f0f0";
}

#progressbar #reporting:before {
  font-family: FontAwesome;
  content: "\f200";
  /* Icon: "chart-bar" (for reports and data analysis) */
}

#progressbar #confirm:before {
  font-family: FontAwesome;
  content: "\f00c";
}

#progressbar li:before {
  width: 50px;
  height: 50px;
  line-height: 45px;
  display: block;
  font-size: 20px;
  color: #ffffff;
  background: lightgray;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  padding: 2px;
}

#progressbar li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: lightgray;
  position: absolute;
  left: 0;
  top: 25px;
  z-index: -1;
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #673ab7;
}

.progress {
  height: 20px;
}

.progress-bar {
  background-color: #673ab7;
}

.fit-image {
  width: 100%;
  object-fit: cover;
}

.gap-20 {
  gap: 100px;
}

.gp-res {
  gap: 30px;
}

ul {
  padding-left: 0px !important;
  list-style-type: none;
}

.pb-num {
  margin-bottom: 30px;
}

.cursor-pointer {
  cursor: pointer;
}

input {
  border-radius: 5px !important;
}

.d-n-flx {
  display: flex;
}

/* responsiveness */

@media (max-width: 1024px) {
  h6 {
    font-size: 13px !important;
  }

  .lbl-txt2 {
    font-size: 13px !important;
    font-weight: 500;
    font-family: "Poppins", serif;
  }

  .lbl-txt {
    font-size: 13px;
    font-weight: 500;
    font-family: "Poppins", serif;
  }

  #msform input {
    font-size: 13px;
  }

  .w-75 {
    width: 90% !important;
  }
}

@media (max-width: 769px) {
  .logo-img img {
    width: 142px;
  }

  .contact-num {
    font-size: 15px;
  }

  .icon-size i {
    font-size: 14px;
  }

  .gp-res {
    gap: 15px;
  }

  .tab-nne {
    display: none !important;
  }

  #progressbar li:before {
    width: 40px;
    height: 40px;
    line-height: 35px;

    font-size: 13px;
  }

  #progressbar li {
    list-style-type: none;
    font-size: 12px;
  }

  h1 {
    font-size: 22px !important;
  }
}

@media (max-width: 450px) {
  .w-2 {
    width: 25% !important;
  }

  .w-5 {
    width: 50% !important;
  }

  .lbl-txt2 {
    line-height: 16px;
  }

  .lbl-txt {
    line-height: 16px;
  }

  .lne-hgt-10 {
    line-height: 10px !important;
  }

  h1 {
    font-size: 18px !important;
  }

  .purple-text {
    color: #673ab7;
    font-weight: normal;
    font-size: 13px;
  }

  .logo-img img {
    width: 100px;
  }

  .contact-num {
    font-size: 11px;
  }

  .icon-size i {
    font-size: 11px;
  }

  .gp-res {
    gap: 10px;
  }

  #progressbar li {
    font-size: 8px;
  }

  #progressbar {
    margin-bottom: 0px !important;
  }

  h6 {
    font-size: 11px !important;
  }

  .lbl-txt2 {
    font-size: 11px !important;
    font-weight: 500;
    font-family: "Poppins", serif;
  }

  .lbl-txt {
    font-size: 11px;
    font-weight: 500;
    font-family: "Poppins", serif;
  }

  #msform input {
    font-size: 11px;
  }

  .pb-res {
    padding-bottom: 0px !important;
  }

  .gap-20 h6 {
    font-size: 9px !important;
  }

  .gap-20 {
    gap: 3px;
  }

  #msform input,
  #msform textarea {
    margin-bottom: 10px;
  }

  .ln-10 {
    line-height: 10px;
  }
}

@media (max-width: 390px) {
  .gap-20 h6 {
    font-size: 8px !important;
  }
}

.w-90 {
  width: 90% !important;
}

.inpt-styles.error {
  border: 1px solid red !important;
}

.error-message {
  color: red;
  font-size: 12px;
  display: none;
}

.inpt-styles.error + .error-message {
  display: block;
}

.invalid {
  border-color: red;
}

.invalidbutton {
  margin-top: 10px;
}

#progressbar {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#progressbar li {
  width: 20%;
  text-align: center;
  color: gray;
}

#progressbar li.active {
  color: green;
}

input[type="radio"]:invalid {
  border: 2px solid red;
}

input[type="radio"]:required:invalid {
  background-color: #f8d7da;
}

input[type="radio"]:required:invalid + .error-message {
  display: block;
}

.selectdropdown {
  padding: 8px 15px 8px 15px;
  border: 2px solid #8080808f;
  border-radius: 5px !important;
  margin-bottom: 10px;
  margin-top: 2px;
  width: 100%;
  box-sizing: border-box;
  font-family: "Poppins", serif;
  color: #2c3e50;
  background-color: #eceff1;
  font-size: 16px;
  letter-spacing: 1px;
}

.dktext {
  color: #0f18ed;
  font-weight: 800;
}

.requiredindicator {
  color: red;
}

.dkdescription {
  color: #0f18ed !important;
  font-weight: 600;
}

.commenttext {
  height: 46px;
  border-radius: 5px !important;
  border: 2px solid rgba(128, 128, 128, 0.56) !important;
}
#report-container.pdf-mode {
  box-shadow: none !important;
  padding: 10px !important;
  margin: 10px !important;
  width: 100% !important;
  background: white !important;
}
#report-container {
  background: #fff;
  margin: 10px !important;
  padding: 10px !important;
  box-shadow: none !important;
}