/*--------------------LOGIN-------------------------*/
/*--------------------This css can and will eb used where there is use of form-------------------------*/

input {
	outline: none;
	border: none;
}

textarea {
  outline: none;
  border: none;
}

/* Clear floats after the login-button */
.wrap-form::after {
  content: "";
  display: table;
  clear: both;
}

/* Ensure the small text paragraphs are styled properly */
.wrap-form p {
  font-size: 14px; /* Adjust font size if needed */
  color: #43383e; /* Match color with form titles */
  text-align: center; /* Center the text */
  margin-top: 10px; /* Space above the text */
  line-height: 1.5; /* Adjust line height for readability */
}

.wrap-form p small {
  display: block;
  margin-top: 11px;
}

.newContainer {
	max-width: 1200px;
}

.form-title{
	display: block;
  font-size: 30px;
  color: #43383e;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 15px;
}

.form-sub-title{
  display: block;
  font-size: 20px;
  color: #43383e;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 35px;
}

.form-notice{
  display: block;
  font-size: 15px;
  color: #E84D3B;
  line-height: 1.2;
  text-align: left;
  padding-top: 55px;
  padding-bottom: 35px;
}
.newContainer-form {
  width: 100%;  
  min-height: 82vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: #e6e6e6; 
}

.form {
  width: 100%;
}

.wrap-form {
  width: 450px;
  background: transparent;
  padding: 30px 0 80px 0;
}

<!-- .wrap-input {
  width: 100%;
  position: relative;
  background-color: #fff;
  margin-bottom: 17px;
}

.wrap-notice {
  width: 100%;
  position: relative;
  margin-bottom: 17px;
}

.input {
  display: block;
  width: 100%;
  background: transparent;
  font-size: 17px;
  color: #000000;
  line-height: 1.2;
  padding: 0 5px;
  border: 0px;
}

.label-input {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 62px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  font-size: 18px;
  color: #999999;
  font-weight: bold;
}

input.input {
  height: 62px;
  padding: 0 20px 0 58px;
}


textarea.input {
  min-height: 199px;
  padding: 19px 20px 0 23px;
} -->

/* Wrapper for input fields */
.wrap-input {
  width: 100%;
  position: relative;
  background-color: #fff;
  margin-bottom: 17px;
}

/* Icon inside the input field */
.label-input {
  position: absolute;
  top: 50%;
  left: 1px;
  transform: translateY(-50%); /* Centers the icon vertically */
  font-size: 18px;
  color: #999999;
  font-weight: bold;
  pointer-events: none; /* Ensures the icon doesn't block input interaction */
}

/* Styles for the input field */
input.input {
  display: block;
  width: 100%;
  background: transparent;
  font-size: 17px;
  color: #000000;
  line-height: 1.2;
  padding-left: 50px; /* Leaves space for the icon */
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 40px;
}

/* Customizing the placeholder text */
input.input::placeholder {
  color: #aaa; /* Customize placeholder color */
  font-weight: normal;
}

/* Styling for the select dropdown */
.wrap-notice {
  width: 100%;
  position: relative;
  margin-bottom: 17px;
  display: flex;
  align-items: center; /* Aligns items in a row */
}

.label-input {
  font-size: 18px;
  color: #999999;
  font-weight: bold;
  margin-right: 10px; /* Adds space between label and select */
}

select {
  display: block;
  width: 200px;
  min-height: 40px;
  background: #F5F5F5;
  font-size: 16px;
  color: #000000;
  line-height: 1.2;
  border: 1px solid #F5F5F5;
  border-radius: 4px;
  padding: 4px;
  height: 40px; /* Matching height with input field */
}

/* Styling for textarea */
textarea.input {
  min-height: 199px;
  padding: 19px 20px 0 23px;
}


<!-- .login-button{
  display: inline-block;
  background: #E47D8A;
  color: #ffff !important;
  border-color: #E47D8A !important;
  border: 1px solid;
  border-radius: 4px;
  padding: 4px 4px !important;
  width: 110px;
  text-align: center;
  float: right;
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 5px;
  min-height: 40px;
}

.login-button:hover {
  /*opacity: 0.5;*/
  background: #E84D3B;
  border-color: #E84D3B !important;
  text-decoration: none
} -->

.login-button {
  display: inline-block;
  background: #28a745; /* Green background */
  color: #ffffff !important; /* White text for better contrast */
  border-color: #28a745 !important; /* Matching green border */
  border: 1px solid;
  border-radius: 4px;
  padding: 4px 4px !important;
  width: 110px;
  text-align: center;
  float: right;
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 5px;
  min-height: 40px;
}

.login-button:hover {
  background: #218838; /* Darker green on hover */
  border-color: #218838 !important; /* Darker green border on hover */
  text-decoration: none;
}

select {
  display: block;
  width: 200px;
  min-height: 40px;
  background: #F5F5F5;
  font-size: 16px;
  color: #000000;
  line-height: 1.2;
  border-color: #28a745 !important;  /* Matching green border */
  border: 1px solid;
  border-radius: 4px;
  padding: 4px 4px !important;
  font-family: Arial, sans-serif; /* Set a web-safe font family */
}

select:focus {
  border-color: #218838;  /* Darker green border on focus */
  outline: none;  /* Remove default outline */
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5); /* Add a soft glow to the focused select */
}

<!-- select {
  display: block;
  width: 200px;
  min-height: 40px;
  background: #F5F5F5;
  font-size: 16px;
  color: #000000;
  line-height: 1.2;
  border-color: #F5F5F5 !important;
  border: 1px solid;
  border-radius: 4px;
  padding: 4px 4px !important;
} -->

.info-text {
  background-color: #ffffff; /* Ensure a light background */
  color: #333333; /* Dark gray text for better contrast */
}

.info-text a {
  color: #007bff; /* Ensure links are a contrasting blue */
  text-decoration: none;
}

.info-text a:hover {
  color: #0056b3; /* Darker blue for better contrast when hovering */
}

.info-text p {
  font-size: 14px; /* Ensure the text size is large enough */
}

/* Mobile-first corrections for modern devices */
@media (max-width: 767px) {
  .newContainer-form {
    width: 100% !important;
    padding: 15px !important;
    min-height: 90vh !important; /* Better mobile height */
  }

  .wrap-form {
    width: 80% !important;
    max-width: 400px !important; /* Prevent over-stretching */
    padding: 30px 20px 40px 20px !important;
    margin: 0 auto !important; /* Center alignment insurance */
  }

  /* iPhone 14 Pro Max fix */
  @media (device-width: 430px) and (device-height: 932px) {
    .wrap-form {
      width: 85% !important;
    }
  }

  /* Samsung Galaxy S8 fix */
  @media (device-width: 360px) and (device-height: 740px) {
    .wrap-form {
      padding: 25px 15px 35px 15px !important;
    }
  }

  /* Pixel 7 fix */
  @media (device-width: 393px) and (device-height: 851px) {
    .wrap-form {
      width: 82% !important;
    }
  }
}

/* Galaxy Fold specific fix */
@media (max-width: 280px) {
  .wrap-form {
    width: 90% !important;
    padding: 20px 10px 30px 10px !important;
  }
}

/* Adjust font size for mobile devices */
@media screen and (max-width: 600px) {
  .info-text p {
    font-size: 12.5px; /* Slightly smaller font size for mobile screens */
  }
} 



/*--------------------END-------------------------*/