.ciffc-custom-form .star {
  color: #F5333F;
}

.ciffc-custom-form .form-element {
  position: relative;
}

.ciffc-custom-form .message.error {
  color: #F5333F;
  position: absolute;
  bottom: -25px;
}

.ciffc-custom-form .btn {
  width: fit-content;
}

.ciffc-custom-form input, .ciffc-custom-form textarea {
  border: none;
  font-size: 16px;
  line-height: 17px;
  padding: 0;
  margin: 0;
}

.ciffc-custom-form input:focus, .ciffc-custom-form textarea:focus {
  outline: none;
}

.ciffc-custom-form .form-element:not(.textarea-input) {
  background: #FFFFFF;
}

.ciffc-custom-form .form-element.lock:not(.textarea-input),
.ciffc-custom-form .form-element.date-input.lock,
.ciffc-custom-form .form-element.lock .dropdown-field {
  /*background-color: #F3F3F3;*/
  background-color: #cccccc;
}

.ciffc-custom-form .form-element.lock:has(.dropdown-field) {
  background-color: initial;
}

.ciffc-custom-form label {
  font-size: 16px;
  line-height: 17px;
  letter-spacing: 0px;
  color: #1A1A1A;
  z-index: 1;
  margin-bottom: 0;
}

/* text input start */
.ciffc-custom-form .text-input {
  border: 1px solid #D3D3D3;
  border-radius: 10px;
  padding: 0 14px;
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
}

.ciffc-custom-form .text-input:has(input:focus) label, .ciffc-custom-form .text-input.has-content label {
  font-size: 12px;
  line-height: 14px;
  font-weight: bold;
  position: absolute;
  top: 8px;
  left: 14px;
}

.ciffc-custom-form .text-input input {
  position: absolute;
  top: 25px;
  width: calc(100% - 28px);
  background-color: transparent;
}

.ciffc-custom-form .text-input.lock input {
  color: #54565A;
}
/* text input end */

/* textarea start */
.ciffc-custom-form  .textarea-input label {
  font-size: 16px;
  line-height: 17px;
  font-weight: bold;
  letter-spacing: -0.16px;
  color: #000000;
}

.ciffc-custom-form .textarea-input textarea {
  background: #FFFFFF;
  border: 1px solid #D3D3D3;
  border-radius: 10px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.08px;
  color: #54565A;
  padding: 23px 20px 30px;
  margin-top: 10px;
  resize: none;
  font-family: Archivo;
}
/* textarea end */

/* dropdown start */
.ciffc-custom-form .dropdown-input {
  position: relative;
  cursor: pointer;
}

.ciffc-custom-form .dropdown-input .dropdown-field {
  border: 1px solid #D3D3D3;
  border-radius: 10px;
  padding: 0 14px;
  height: 52px;
  font-size: 16px;
  line-height: 17px;
}

.ciffc-custom-form .dropdown-input .dropdown-field .text {
  position: absolute;
  top: 25px;
  left: 14px;
  color: #54565A;
}

.ciffc-custom-form .dropdown-input.active .dropdown-field {
  border-color: #F5333F;
}

.ciffc-custom-form .dropdown-input label {
  position: absolute;
  top: 17px;
  left: 14px;
  cursor: pointer;
}

.ciffc-custom-form .dropdown-input.has-content label {
  top: 8px;
}

.ciffc-custom-form .dropdown-input .dropdown-box {
  background-color: #ffffff;
  box-shadow: 0px 5px 10px #00000029;
  border-radius: 10px;
  max-height: 229px;
  min-width: 270px;
  margin-top: 7px;
  overflow-y: scroll;
  position: absolute;
  display: none;
  z-index: 99999;
}

.ciffc-custom-form .dropdown-input.active .dropdown-box {
  display: block;
}

.ciffc-custom-form .dropdown-input .dropdown-box .option {
  padding: 19px 14px;
  color: #707070;
}

.ciffc-custom-form .dropdown-input .dropdown-box .option.selected,
.ciffc-custom-form .dropdown-input .dropdown-box .option:hover {
  background-color: #FFD9DC;
  color: #1A1A1A;
}

.ciffc-custom-form .dropdown-input .chevron {
  width: fit-content;
  position: absolute;
  right: 10px;
  top: 12px;
}

.ciffc-custom-form .dropdown-input.active .chevron {
  transform: rotate(180deg);
}
/* dropdown end */

/* editable dropdown */
.ciffc-custom-form .dropdown-input.editable label {
  z-index: 0;
}

.ciffc-custom-form .dropdown-input.editable input {
  width: calc(100% - 50px);
  background-color: initial;
}
/* editable dropdown end */ 

/* draggable file input */
.ciffc-custom-form .draggable-file-input {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px dashed #D3D3D3;
  border-radius: 10px;
  max-width: 624px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  color: #1A1A1A;
}

.ciffc-custom-form .draggable-file-input .icon {
  margin-right: 30px;
}

.ciffc-custom-form .draggable-file-input .icon .file,
.ciffc-custom-form .draggable-file-input.uploaded .upload,
.ciffc-custom-form .draggable-file-input.has-content .upload {
  display: none;
}

.ciffc-custom-form .draggable-file-input.uploaded .file,
.ciffc-custom-form .draggable-file-input.has-content .file {
  display: initial;
}

.ciffc-custom-form .draggable-file-input .prompt,
.ciffc-custom-form .draggable-file-input .thumb {
  flex: 1;
}

.ciffc-custom-form .draggable-file-input .prompt .limit,
.ciffc-custom-form .draggable-file-input .thumb .file-size {
  font: normal normal normal 14px/15px Archivo;
  letter-spacing: -0.07px;
  color: #707070;
}

.ciffc-custom-form .draggable-file-input input,
.ciffc-custom-form .draggable-file-input .thumb,
.ciffc-custom-form .draggable-file-input.uploaded .prompt,
.ciffc-custom-form .draggable-file-input.has-content .prompt,
.ciffc-custom-form .draggable-file-input.uploaded .file-selector,
.ciffc-custom-form .draggable-file-input.has-content .file-selector,
.ciffc-custom-form .draggable-file-input .btn-after-upload {
  display: none;
}

.ciffc-custom-form .draggable-file-input.uploaded .thumb,
.ciffc-custom-form .draggable-file-input.has-content .thumb {
  display: block;
}

.ciffc-custom-form .draggable-file-input.uploaded .btn-after-upload,
.ciffc-custom-form .draggable-file-input.has-content .btn-after-upload {
  display: flex;
  align-items: center;
}

.ciffc-custom-form .draggable-file-input.uploaded .btn-after-upload .separator,
.ciffc-custom-form .draggable-file-input.has-content .btn-after-upload .separator {
  width: 1px;
  background-color: #BEBEBE;
  margin-left: 13px;
  margin-right: 13px;
  height: 15px;
}

.ciffc-custom-form .draggable-file-input.uploaded .btn-after-upload .btn .hover,
.ciffc-custom-form .draggable-file-input.uploaded .btn-after-upload .btn:hover .normal,
.ciffc-custom-form .draggable-file-input.has-content .btn-after-upload .btn .hover,
.ciffc-custom-form .draggable-file-input.has-content .btn-after-upload .btn:hover .normal {
  display: none;
}

.ciffc-custom-form .draggable-file-input.uploaded .btn-after-upload .btn:hover .hover,
.ciffc-custom-form .draggable-file-input.has-content .btn-after-upload .btn:hover .hover {
  display: initial;
}

.ciffc-custom-form .draggable-file-input.over,
.ciffc-custom-form .draggable-file-input.uploaded,
.ciffc-custom-form .draggable-file-input.has-content {
  border-style: solid;
}
/* draggable file input end */

/* date time input */
.ciffc-custom-form .form-element.datetime-input,
.ciffc-custom-form .form-element.date-input {
  background-color: #FFFFFF;
  border: 1px solid #D3D3D3;
  border-radius: 10px;
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 14px;
}

.ciffc-custom-form .form-element.datetime-input:has(input:focus) label, 
.ciffc-custom-form .form-element.datetime-input.has-content label,
.ciffc-custom-form .form-element.date-input:has(input:focus) label, 
.ciffc-custom-form .form-element.date-input.has-content label {
  font-size: 12px;
  line-height: 14px;
  font-weight: bold;
  position: absolute;
  top: 8px;
  left: 14px;
}

.ciffc-custom-form .form-element.datetime-input input,
.ciffc-custom-form .form-element.date-input input {
  position: absolute;
  top: 25px;
  width: calc(100% - 28px);
  background-color: transparent;
}

.ciffc-custom-form .form-element.datetime-input .icon-wrapper,
.ciffc-custom-form .form-element.date-input .icon-wrapper {
  position: absolute;
  top: 12px;
  right: 14px;
  cursor: pointer;
  z-index: 1;
}
/* date time input end */