body {

  font-family: Roboto, sans-serif;

  font-size: 16px;

  background-color: #f3f3fe;

  color: #2c3345;

}



.formContainer {

  background-color: white;

  max-width: 752px;

  width: 100%;

  display: flex;

  flex-direction: column;

  margin: 45px auto;

  color: #2c3338;

}



#formCoverLogo {

  display: flex;

  justify-content: center;

}



#formCoverLogo img {

    width: 460px; /* Default size */

}



@media (max-width: 767px) {

    #formCoverLogo img {

        width: 340px; /* For tablets and larger phones */

    }

}



@media (max-width: 479px) {

    #formCoverLogo img {

        width: 300px; /* For smaller phones */

    }

}



@media (max-width: 319px) {

    #formCoverLogo img {

        width: 260px; /* For very small devices */

    }

}



ul.page-section {

  margin: 0;

  padding: 0 38px;

  list-style: none;

}



div.header-large {

  margin: 0 -38px;

  padding: 2.5em 52px;

}



.header-large {

  border-color: #d7d8e1;

}



.header-large .form-header {

  font-size: 2em;

}



.form-header {

  margin: 0;

  font-weight: 600;

  line-height: 1.45;

}



.form-subHeader {

  font-weight: 500;

  line-height: 1.6;

}



.form-header-group {

  border-bottom: 1px solid;

  border-color: #ededf1;

}



.form-label.form-label-auto {

  display: block;

  float: none;

  text-align: left;

  width: 100%;

}



.form-label-top {

  width: 100%;

  margin-left: 2px;

  margin-bottom: 14px;

}



.form-label {

  font-weight: 500;

  word-break: break-word;

}



.form-line {

  margin-top: 18px;

  margin-bottom: 12px;

  padding-top: 0;

  padding-bottom: 0;

}



.form-line {

  padding: 12px 10px;

  margin: 12px 4px;

  position: relative;

  width: 100%;

  transition: background-color 0.15s;

}



.form-textarea {

  border-radius: 5px;

  border-color: #e6e6e6;

}



.bName {

  border-radius: 5px;

  border-color: #e6e6e6 !important;

  width: 100%;

}



.form-textbox:not(#productSearch-input),

.signature-wrapper {

  font-size: 1em;

  border-radius: 4px;

  border-width: 1px;

  border-style: solid;

  display: block;

  min-width: 100%;

  font-family: inherit;

}



.flatpickr-calendar {

  border: 1px solid #ccc;

  /* Border color */

  border-radius: 5px;

  /* Rounded corners */

}



.flatpickr-day {

  font-family: Arial, sans-serif;

  /* Font */

}



.flatpickr-day.selected,

.flatpickr-day.startRange,

.flatpickr-day.endRange,

.flatpickr-day:focus {

  background-color: #4a90e2;

  /* Background color when selected */

  color: white;

  /* Text color when selected */

}



.flatpickr-months {

  background-color: #f5f5f5;

  /* Background color for the month and year area */

}



.p-2.form-control.input {

/*  width: 310px;*/

}



.form-label {

  display: block;

  font-weight: bold;

  margin-bottom: 5px;

}



.form-input-wide {

  width: 100%;

}



.jfUpload-wrapper {

  border: 2px dashed #cccccc;

  padding: 20px;

  text-align: center;

  background-color: #f9f9f9;

  cursor: pointer;

  position: relative;

}



.jfUpload-button-container {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.jfUpload-button {

  font-size: 16px;

  color: #666666;

  margin-bottom: 10px;

}



.jfUpload-heading {

  color: #999999;

  font-size: 14px;

}



.form-upload-multiple {

  display: none;

}



.uploaded-files {

  margin-top: 15px;

  background-color: white;

  padding: 10px;

  border-radius: 5px;

  list-style-type: none;

}



.uploaded-files li {

  display: flex;

  justify-content: space-between;

  margin-bottom: 10px;

  padding: 8px;

  background-color: #e6edff;

  border-radius: 5px;

}



.uploaded-files li:last-child {

  margin-bottom: 0;

}



.file-name {

  display: flex;

  align-items: center;

}



.file-name img {

  width: 20px;

  height: 20px;

  margin-right: 10px;

}



.remove-file {

  cursor: pointer;

  color: #1abc9c;

  font-size: 18px;

}



.form-submit-button {

  background-color: #003e81;

  color: #ffffff;

  border: none;

  padding: 10px 20px;

  font-size: 16px;

  cursor: pointer;

  border-radius: 5px;

}



.form-submit-button:hover {

  background-color: #003e81;

}



.form-required {

  color: #1abc9c;

  margin-left: 4px;

}



/* Styles for input fields in error state */

.error {

  border: 2px solid red;

}



/* Styles for error messages */

.error-message {

  color: red;

  font-size: 0.875em; /* Adjust as needed */

  display: block;

  margin-top: 5px;

}



input.error:focus {

  outline: none; /* Remove default outline */

  border: 2px solid red; /* Red border for focus state */

}



#error_fileUpload{

  background-color: red;

  color: white;

  border-radius: 10px;

}



.folderErrorText{

  font-size: 14px;

}



.form-dropdown{

    border-radius: 5px;

    border-color: #e6e6e6;

    padding: 10px;

    margin-bottom: 5px;

}