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

body,
html {
  font-family: "Poppins", sans-serif;
}
.form_class p,
.form_class .form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.form_class p label,
.form_class .form-group label {
  width: 100%;
  margin-bottom: 5px;
  font-weight: 400;
  color: rgb(36, 35, 35);
}

.form_class p input,
.form_class .form-group input,
.form_class p select,
.form_class .form-group select {
  width: 100%;
  border: 0.5px rgb(218, 215, 215) solid;
  border-radius: 5px;
  padding: 10px 10px;
  font-size: 14px;
}

.form_class p input:focus,
.form_class .form-group input:focus,
.form_class p select:focus,
.form_class .form-group select:focus {
  border: 0.5px grey solid;
  outline: none;
}

.form_class p input::placeholder,
.form_class .form-group input::placeholder,
.form_class p select::placeholder,
.form_class .form-group select::placeholder {
  color: gray;
  font-size: 14px;
}

.form_heading {
  background-color: #1c98ed;
  border-radius: 12px 12px 0 0;
}

.login-content {
  background-color: #fff;
  color: #000;
  padding: 40px;
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 8px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 5px;
}

input[type="submit"] {
  background-color: #1c98ed;
  border: none;
  padding: 10px 20px;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
}

input,
select,
button,
label,
.submit-row,
.module {
  font-family: "Poppins", sans-serif !important;
}

/* #home_suggestions {
  margin-top: 80px;
  height: fit-content;
  width: 100%;
  padding: 5px;
  overflow: scroll;
} */

#home_suggestions {
  margin-top: 80px;
  height: 150px; /* fixed height to enable scrolling */
  width: 100%;
  padding: 5px;
  overflow-y: auto; /* scroll vertically if content exceeds height */
  border: 1px solid #ccc; /* optional: border to visually separate */
  background: white; /* optional: background color */
  position: absolute; /* if you want suggestions to overlay content */
  z-index: 10; /* to make sure it’s above other elements */
}

#home_suggestions li {
  border-bottom: 1px solid rgb(223, 221, 221);
  margin-bottom: 2px;
}

.autocomplete-suggestions {
  background: white;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 1000;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
}

.autocomplete-suggestion {
  padding: 6px;
  cursor: pointer;
}

.autocomplete-suggestion:hover {
  background: #f0f0f0;
}

.helptext {
  font-size: 12px;
  color: #69707e; /* Tailwind: text-gray-500 */
  margin-top: 10px;
  display: block;
}