#form-preview {
  padding: 15px;
}

.conditional2:not(.item-show):not(.skip-item) {
  display: none;
}

.dng-form {
  --form-FormWidth: auto;
  --form-LabelWidth: 200px;
  --form-RequiredText: "*";
  --form-RequiredColor: rgba(255, 0, 0, 1);
  --form-VerticalSpacing: 25px;
  --form-ButtonPosition: space-between;
  width: var(--form-FormWidth);
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.35;
  position: relative;
}

.dng-form svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.dng-form.form-loading {
  pointer-events: none;
}

.dng-form.form-loading::before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.dng-form.form-loading::after {
  content: "";
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 5px solid #e3e3e3;
  border-top-color: #555;
  border-left-color: #555;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px;
  -webkit-animation: loading-rotate 0.7s infinite;
  -moz-animation: loading-rotate 0.7s infinite;
  animation: loading-rotate 0.7s infinite;
  z-index: 101;
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.dng-form .form-element > button svg {
  fill: currentColor;
  vertical-align: middle;
}

.dng-form .form-element .icon {
  margin-inline-end: 8px;
  vertical-align: middle;
}

.dng-form .form-element .i-right.icon {
  margin-inline-start: 8px;
  margin-inline-end: 0;
}

.dng-form .form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.dng-form .form-col {
  padding-right: 15px;
  padding-left: 15px;
}

.dng-form .form-group {
  padding: var(--form-FieldPaddingV) var(--form-FieldPaddingH);
  border-radius: 5px;
  color: var(--form-FieldColor);
  border: 1px solid var(--form-FieldBorderColor);
  margin-bottom: 1.5em;
}

.dng-form .form-group fieldset:not(.border-circle) {
  border: 1px solid #999999;
  border-radius: 5px;
  padding: 15px;
  margin: 0 0 30px;
}

.dng-form .form-group legend {
  padding: 0 5px;
  margin-inline-start: -5px;
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  display: inline-block;
  width: auto;
  float: none;
}

.dng-form .form-group > .form-desc {
  margin-bottom: 2em;
  color: var(--form-DescriptionColor);
  font-size: var(--form-DescriptionSize);
}

.dng-form .form-group.style-title,
.dng-form .form-group.style-hidden,
.dng-form .form-group.style-line {
  padding: 0;
  border: none;
  margin: 0;
  border-radius: 0;
}

.dng-form .form-group.style-title legend {
  margin-bottom: 20px;
}
.dng-form .form-group.style-line legend {
  border-bottom: 1px solid var(--form-FieldBorderColor);
  display: block;
  width: 100%;
  padding: 12px 0;
  margin: 0 0 var(--form-VerticalSpacing);
}

.dng-form .form-pages-main .form-page {
  display: none;
}

.dng-form .form-pages-main .form-page.active {
  display: block;
}

.dng-form .form-input {
  position: relative;
}

.dng-form .form-input .field-left-icon,
.dng-form .form-input .field-right-icon {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  font-size: 1.2em;
}

.dng-form textarea {
  font-family: inherit;
}

.dng-form .form-textarea .field-left-icon,
.dng-form .form-textarea .field-right-icon {
  height: auto;
  padding: 14px 0;
}

.dng-form .form-input .field-left-icon {
  left: 0;
}

.dng-form .form-input .field-right-icon {
  right: 0;
}

.dng-form .form-input .field-left-icon ~ .style-input {
  padding-left: 40px;
}

.dng-form .form-input .field-right-icon ~ .style-input {
  padding-right: 40px;
}

.dng-form .form-header {
  margin-bottom: 30px;
}

.dng-form .form-title {
  text-align: center;
}

.dng-form .form-description {
  text-align: center;
}

.dng-form .form-desc {
  margin: 0 0 10px;
}

.dng-form .form-desc-after {
  margin-top: 10px;
}

.dng-form .form-required::before {
  content: var(--form-RequiredText);
  color: var(--form-RequiredColor);
  margin-inline-start: 5px;
}

.dng-form .label-left {
  display: grid;
  grid-template-columns: 150px auto;
}

.dng-form .label-left .form-label {
  margin: 10px 0;
  padding-right: 10px;
  grid-row: 1/10;
}

.dng-form .form-label,
.dng-form .form-group legend,
.dng-form .border-circle {
  font-weight: 600;
}

.dng-form.label-500 .form-label,
.dng-form.label-500 .form-group legend,
.dng-form.label-500 .border-circle {
  font-weight: 500;
}

.dng-form.label-700 .form-label,
.dng-form.label-700 .form-group legend,
.dng-form.label-700 .border-circle {
  font-weight: 700;
}

.dng-form .label-inside .form-input {
  position: relative;
}

@media (max-width: 479px) {
  .responsive-columns-479
    .form-row:not(.mobile-off):not(.mobile-sm):not([class*="mobile-custom-"])
    > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .responsive-columns-767
    .form-row:not(.mobile-off):not(.mobile-sm):not([class*="mobile-custom-"])
    > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .responsive-columns-1024
    .form-row:not(.mobile-off):not(.mobile-sm):not([class*="mobile-custom-"])
    > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 479px) {
  .dng-form .form-row.mobile-sm > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .dng-form .form-row.mobile-md > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .dng-form .form-row.mobile-xl > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.dng-form .form-control::placeholder {
  color: currentColor;
  opacity: 0.8;
}

.dng-form .form-control,
.dng-form .form-control:focus {
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

.dng-form .form-control[type="time"] {
  line-height: calc(1.45em - 2px);
}

.dng-form label,
.dng-form legend {
  font-weight: normal;
  margin: 0;
  float: none;
}

.dng-form .checkbox-list .option-item,
.dng-form .radio-list .option-item {
  margin-inline-end: 15px;
  margin-bottom: 10px;
  display: inline-flex;
  vertical-align: middle;
}

.dng-form .checkbox-list .option-item label,
.dng-form .radio-list .option-item label {
  cursor: pointer;
  font-size: 1em;
  color: currentColor;
}

.dng-form .checkbox-list .option-item.hide-input input,
.dng-form .radio-list .option-item.hide-input input {
  display: none;
}

.dng-form .checkbox-list .option-item.hide-input input:checked + label img,
.dng-form .radio-list .option-item.hide-input input:checked + label img {
  box-shadow: 0 0 0 1px var(--form-FieldBorderFocusColor);
}

.dng-form .checkbox-list input[type="checkbox"],
.dng-form .radio-list input[type="radio"] {
  appearance: none;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  border: 2px solid var(--form-FieldBorderColor, currentColor);
  background: transparent;
  border-radius: 3px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  font-size: 1em;
  flex: 0 0 calc(1em + 2px);
  margin-top: 1px;
}

.dng-form .checkbox-list input[type="checkbox"]:checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" fill="%23ffffff" ></path></svg>');
  background-color: var(--form-FieldBorderFocusColor);
  border-color: var(--form-FieldBorderFocusColor);
  outline: none;
}

.dng-form .radio-list input[type="radio"] {
  border-radius: 50%;
}

.dng-form .radio-list input[type="radio"]:checked {
  background-clip: content-box;
  padding: 2px;
  background-color: var(--form-FieldBorderFocusColor);
  border-color: var(--form-FieldBorderFocusColor);
  outline: none;
}

.is-light-text .dng-form .checkbox-list input[type="checkbox"]:checked,
.is-light-text .dng-form .radio-list input[type="radio"]:checked {
  background-color: var(--accent-color, --form-FieldBorderFocusColor);
  border-color: var(--accent-color, --form-FieldBorderFocusColor);
}

.dng-form
  .form-element:not(.fields-type-images)
  .checkbox-list
  .option-item
  input
  + label,
.dng-form
  .form-element:not(.fields-type-images)
  .radio-list
  .option-item
  input
  + label {
  padding-inline-start: 8px;
}

.dng-form .fields-columns {
  --form-FieldsWidth: 1;
}

.dng-form .fields-columns .checkbox-list,
.dng-form .fields-columns .radio-list {
  display: grid;
  grid-template-columns: repeat(var(--form-FieldsWidth), 1fr);
}

@media (max-width: 479px) {
  .dng-form .fields-columns.responsive-columns-479 .checkbox-list,
  .dng-form .fields-columns.responsive-columns-479 .radio-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 767px) {
  .dng-form .fields-columns.responsive-columns-767 .checkbox-list,
  .dng-form .fields-columns.responsive-columns-767 .radio-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 1024px) {
  .dng-form .fields-columns.responsive-columns-1024 .checkbox-list,
  .dng-form .fields-columns.responsive-columns-1024 .radio-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.dng-form .fields-type-images {
  --form-FieldsImagesWidth: auto;
  --form-FieldsImagesHieghtRatio: 1;
}

.dng-form .form-element:not(.fields-images-responsive) .option-imgbox {
  margin-bottom: 10px;
  display: block;
}

.dng-form .fields-images-responsive .option-imgbox {
  position: relative;
  width: auto;
  height: 0;
  padding-bottom: calc(var(--form-FieldsImagesHieghtRatio) * 100%);
  display: block;
}

.dng-form .fields-images-responsive .option-imageselected,
.dng-form .fields-images-responsive .option-image {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.dng-form .fields-images-responsive .checkbox-list label,
.dng-form .fields-images-responsive .radio-list label {
  display: block;
  width: 100%;
  max-width: var(--form-FieldsImagesWidth);
}

.dng-form .option-imageselected,
.dng-form .option-image {
  max-width: 100%;
  width: var(--form-FieldsImagesWidth);
  object-fit: Contain;
}

.dng-form .fields-images-cover .option-imageselected,
.dng-form .fields-images-cover .option-image {
  object-fit: cover;
}

.dng-form .fields-type-images input {
  display: none;
}

.dng-form .option-imageselected,
.dng-form input:checked + label .option-imageselected + .option-image {
  display: none;
}

.dng-form input:checked + label .option-imageselected {
  display: inline-block;
}

.dng-form input:checked + label .option-imageselected,
.dng-form input:checked + label .option-image {
  box-shadow: 0 0 0 2px var(--form-FieldBorderFocusColor);
}

.dng-form select.form-control:not([multiple]) option {
  color: #333;
}

.dng-form .checkbox-list .formError2,
.dng-form .radio-list .formError2 {
  grid-column: 1/-1;
}

.dng-form input.file-filepond {
  display: none;
}

.file-filepond-box {
  position: relative;
}

.file-filepond-box > input[type="text"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  width: 0;
  height: 0;
}

.file-filepond-box .filepond--drop-label,
.file-filepond-box .filepond--label-action {
  color: #4f4f4f !important;
}

.image-recaptcha-box {
  display: inline-flex;
  align-items: center;
}

.image-recaptcha-box img {
  vertical-align: middle;
  cursor: pointer;
}

.image-recaptcha-box .recaptcha-image {
  margin-right: 8px;
  position: relative;
}

.image-recaptcha-box input {
  background-color: var(--form-FieldBgHoverColor);
  border: 1px solid var(--form-FieldBorderHoverColor);
  color: var(--form-FieldHoverColor);
  height: 40px;
  border-radius: 4px;
  width: 70px;
  padding: 0 10px;
  outline: none;
  box-shadow: none;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-right: 5px;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.image-recaptcha-box input:hover {
  background-color: var(--form-FieldBgHoverColor);
  border-color: var(--form-FieldBorderHoverColor);
  color: var(--form-FieldHoverColor);
}

.image-recaptcha-box input:focus {
  background-color: var(--form-FieldBgFocusColor);
  border-color: var(--form-FieldBorderFocusColor);
  color: var(--form-FieldFocusColor);
}

.image-recaptcha-box .sign {
  font-size: 26px;
  margin-right: 10px;
  line-height: 0;
  padding-bottom: 2px;
}

.image-recaptcha-box button {
  width: 40px;
  height: 40px;
  appearance: none;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.image-recaptcha-box .recaptcha-image::after {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M500 8h-27.711c-6.739 0-12.157 5.548-11.997 12.286l2.347 98.568C418.075 51.834 341.788 7.73 255.207 8.001 118.82 8.428 7.787 120.009 8 256.396 8.214 393.181 119.165 504 256 504c63.926 0 122.202-24.187 166.178-63.908 5.113-4.618 5.354-12.561.482-17.433l-19.738-19.738c-4.498-4.498-11.753-4.785-16.501-.552C351.787 433.246 306.105 452 256 452c-108.322 0-196-87.662-196-196 0-108.322 87.662-196 196-196 79.545 0 147.941 47.282 178.675 115.302l-126.389-3.009c-6.737-.16-12.286 5.257-12.286 11.997V212c0 6.627 5.373 12 12 12h192c6.627 0 12-5.373 12-12V20c0-6.627-5.373-12-12-12z" fill="%2333333" ></path></svg>');
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-size: 18px 18px;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.8);
  pointer-events: none;
  opacity: 0;
  transition: all ease-in 150ms;
}

.image-recaptcha-box .recaptcha-image:not(.active):hover:after {
  opacity: 1;
}

.datepick-popup {
  width: auto !important;
  height: auto !important;
}

.form-pages-main {
  position: relative;
}

.dng-form .message {
  padding: 5px 15px;
  margin-top: 5px;
  z-index: 100;
  text-align: left;
  position: absolute;
  top: 100%;
  color: #000 !important;
}

/* .dng-form .message.position-above{
    margin-bottom: 20px;
} */

.dng-form .message.error {
  background-color: #f2dede;
  color: #b94a48 !important;
  border-left: 5px solid #c73412;
}

.dng-form .message.valid {
  background-color: #efffe6;
  border-left: 5px solid #51bc1a;
  color: #000 !important;
}

.dng-form .message.warning {
  background-color: #fff3e1;
  border-left: 5px solid #ff9800;
  color: #000 !important;
}

.dng-form .message p {
  color: currentColor !important;
}

.dng-form .message p:last-child {
  margin: 0;
}

.form-message-alert {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-message-alert .message-content {
  padding: 35px 26px;
  background-color: #fff;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  width: 420px;
  max-width: 95vw;
  color: #3f4254;
  transform: scale(0);
}

.form-message-alert.animate .message-content {
  animation: message-show 0.3s;
  transform: scale(1);
}

.form-message-alert .description {
  margin-bottom: 15px;
}

.form-message-alert .description p:last-child {
  margin: 0;
}

.form-message-alert .icon {
  border: 3px solid rgba(165, 220, 134, 0.3);
  border-radius: 50%;
  width: 72px;
  height: 72px;
  margin: 10px auto 25px;
  position: relative;
}

.form-message-alert:not(.error) .icon::after {
  content: "";
  width: 55%;
  height: 32%;
  position: absolute;
  left: 25%;
  top: 26%;
  border-bottom: 4px solid #50cd89;
  border-left: 4px solid #50cd89;
  transform: rotate(-45deg);
  border-radius: 3px;
}

.form-message-alert.error .icon::after {
  content: "";
}

.form-message-alert.error .icon {
  border-color: #f1416c;
}

.form-message-alert.error .icon::after,
.form-message-alert.error .icon::before {
  content: "";
  width: 60%;
  border-bottom: 4px solid #f1416c;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -30%;
  border-radius: 2px;
}

.form-message-alert.error .icon::after {
  transform: rotate(45deg);
}

.form-message-alert.error .icon::before {
  transform: rotate(-45deg);
}

.form-message-alert .btn-confirm {
  height: 42px;
  border-radius: 4px;
  background: #50cd89;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 0;
  color: #fff;
  font-size: 14px;
  padding: 0px 15px;
  min-width: 110px;
  transition: all ease-in 200ms;
}

.form-message-alert .btn-confirm:hover {
  background-color: #47be7d;
}

.form-message-alert.error .btn-confirm {
  background-color: #f1416c;
}

.form-message-alert.error .btn-confirm:hover {
  background-color: #d9214e;
}

@keyframes message-show {
  0% {
    transform: scale(0.7);
  }

  45% {
    transform: scale(1.05);
  }

  80% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/*label*/

.dng-form.label-horizontal
  .form-element:not(.inside-element):not(.label-vertical),
.dng-form .form-element.label-horizontal {
  display: grid;
  grid-template-columns: var(--form-LabelWidth) 1fr;
  align-items: start;
}

.dng-form.label-horizontal
  .form-element:not(.inside-element):not(.label-vertical)
  .form-label,
.dng-form .form-element.label-horizontal .form-label {
  grid-row: 1/100;
  margin-inline-end: var(--form-FieldPaddingH);
  display: flex;
  align-items: center;
}

.dng-form.labelalign-right .form-element:not(.label-vertical) .form-label,
.dng-form .form-element.label-horizontal.label-right .form-label {
  justify-content: end;
  text-align: end;
}

.dng-form.label-horizontal
  .form-element.basic-element:not(.inside-element):not(.label-vertical)
  .form-label,
.dng-form
  .form-element.basic-element:not(.inside-element).label-horizontal
  .form-label {
  min-height: calc(
    var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2
  );
}

.dng-form .form-pages-main .form-element.basic-element.label-hidden {
  grid-template-columns: 1fr;
}

@media (max-width: 767px) {
  .dng-form.label-horizontal
    .form-element:not(.inside-element):not(.label-vertical),
  .dng-form .form-element.label-horizontal {
    grid-template-columns: 1fr;
  }

  .dng-form.label-horizontal
    .form-element.basic-element:not(.inside-element):not(.label-vertical)
    .form-label,
  .dng-form
    .form-element.basic-element:not(.inside-element).label-horizontal
    .form-label {
    min-height: auto;
  }
}

/*select*/

.dng-form select.form-control[multiple]::-webkit-scrollbar {
  width: 4px;
  border-radius: 10px;
}

.dng-form select.form-control[multiple]::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.1);
}

.dng-form select.form-control[multiple]::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}

/******FormLayout******/

.layout-default {
  --form-LabelColor: rgba(76, 78, 100, 0.68);
  --form-FieldColor: rgba(76, 78, 100, 0.87);
  --form-FieldHoverColor: var(--form-FieldColor);
  --form-FieldFocusColor: var(--form-FieldHoverColor);
  --form-FieldBorderColor: rgba(76, 78, 100, 0.22);
  --form-FieldBorderHoverColor: rgba(76, 78, 100, 0.42);
  --form-FieldBorderFocusColor: rgb(102, 108, 255);
  --form-FieldBgColor: rgba(255, 255, 255, 0);
  --form-FieldBgHoverColor: var(--form-FieldBgColor);
  --form-FieldBgFocusColor: var(--form-FieldBgHoverColor);
  --form-DescriptionColor: rgba(76, 78, 100, 0.68);

  --form-Size: 16px;
  --form-LabelSize: 16px;
  --form-FieldSize: 16px;
  --form-FieldPaddingH: 15px;
  --form-FieldPaddingV: 16px;
  --form-DescriptionSize: 13px;
}

.layout-default.size-slim {
  --form-Size: 14px;
  --form-LabelSize: 14px;
  --form-FieldSize: 14px;
  --form-FieldPaddingH: 12px;
  --form-FieldPaddingV: 12px;
  --form-DescriptionSize: 12px;
}

.layout-default .form-element {
  margin-bottom: var(--form-VerticalSpacing);
  font-size: var(--form-Size);
  color: var(--form-FieldColor);
}

.layout-default .form-control {
  width: 100%;
  padding: var(--form-FieldPaddingV) var(--form-FieldPaddingH);
  line-height: 1.45;
  font-size: var(--form-FieldSize);
  background: transparent;
  border: none;
  outline: none;
  height: auto;
  appearance: none;
  border-radius: 5px;
  color: var(--form-FieldColor);
  border: 1px solid var(--form-FieldBorderColor);
  background-color: var(--form-FieldBgColor);
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-default .form-control[type="time"] {
  line-height: calc(1.45em - 2px);
}

.layout-default .form-input .form-control:hover {
  background-color: var(--form-FieldBgHoverColor);
  border-color: var(--form-FieldBorderHoverColor);
  color: var(--form-FieldHoverColor);
}

.layout-default .form-input .form-control:focus {
  background-color: var(--form-FieldBgFocusColor);
  border-color: var(--form-FieldBorderFocusColor);
  color: var(--form-FieldFocusColor);
}

.layout-default .form-control::placeholder {
  opacity: 0.8;
}

.layout-default select.form-control:not([multiple]) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z" fill="%23333333" ></path></svg>');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) 50%;
  padding-right: 45px;
}

.layout-default
  .form-element:not(.icon-left)
  .form-icon
  + select.form-control:not([multiple]),
.layout-default
  .form-element.icon-right
  .form-icon
  + select.form-control:not([multiple]) {
  background-image: none;
}

.layout-default .form-input {
  position: relative;
}

.layout-default .form-icon {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  font-size: 1.5em;
  color: var(--form-FieldColor);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
}

.layout-default:not(.icon-right) .form-element:not(.icon-right) .form-icon,
.layout-default.icon-right .form-element.icon-left .form-icon {
  inset-inline-start: 0;
}

.layout-default:not(.icon-right)
  .form-element:not(.icon-right)
  .form-icon
  + .form-control,
.layout-default.icon-right .form-element.icon-left .form-icon + .form-control {
  padding-inline-start: calc(2.5em + var(--form-FieldPaddingH));
}

.layout-default.icon-right .form-element:not(.icon-left) .form-icon,
.layout-default .form-element.icon-right .form-icon {
  inset-inline-end: 0;
}

.layout-default.icon-right
  .form-element:not(.icon-left)
  .form-icon
  + .form-control,
.layout-default .form-element.icon-right .form-icon + .form-control {
  padding-inline-end: calc(2.5em + var(--form-FieldPaddingH));
}

.layout-default .form-desc {
  color: var(--form-DescriptionColor);
  font-size: var(--form-DescriptionSize);
  line-height: 1.25;
  margin: 3px 0 0;
}

/* .layout-default .basic-element .form-desc {
    margin-inline-start: var(--form-FieldPaddingH);
}
 */
.layout-default .form-element .form-label {
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  margin: 0 0 10px;
  display: inline-block;
}

.layout-default .formErrorContent2 {
  font-size: 12px;
  color: rgb(255, 77, 73);
  margin-top: 3px;
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.layout-default .error-element .form-control {
  border-color: rgb(255, 77, 73) !important;
}

.validation-position-absolute .formError2 {
  width: 100%;
}

div.validation-position-absolute .formErrorContent2 {
  margin-top: 0;
  padding: 12px 15px 6px;
  padding-inline-end: 35px;
  margin: 0 0 0;
  color: #b94a48;
  line-height: 1.5;
  position: absolute;
  z-index: 3;
  top: initial;
  left: initial;
  width: auto;
  max-width: 100%;
}

.validation-position-absolute .formErrorContent2::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  bottom: 0;
  left: 0;
  border-left: 5px solid #c73412;
  background-color: #f2dede;
  z-index: -1;
}

.validation-position-absolute .formErrorContent2::before {
  content: "";
  border: 5px solid transparent;
  border-bottom-color: #f2dede;
  position: absolute;
  top: -4px;
  inset-inline-start: 15px;
}

.validation-position-absolute .formErrorContent2 .info-close {
  position: absolute;
  width: 25px;
  height: 30px;
  cursor: pointer;
  inset-inline-end: 0;
  top: 6px;
  padding-top: 6px;
}

.validation-position-absolute .formErrorContent2 .info-close::after,
.validation-position-absolute .formErrorContent2 .info-close::before {
  content: "";
  width: 10px;
  border-bottom: 1px solid #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5px;
}

.validation-position-absolute .formErrorContent2 .info-close::after {
  transform: rotate(45deg);
}

.validation-position-absolute .formErrorContent2 .info-close::before {
  transform: rotate(-45deg);
}

/* .layout-default .basic-element .formErrorContent2 {
    margin-inline-start: var(--form-FieldPaddingH);
} */

.layout-outlined {
  --form-LabelColor: rgba(76, 78, 100, 0.68);
  --form-FieldColor: rgba(76, 78, 100, 0.87);
  --form-FieldHoverColor: var(--form-FieldColor);
  --form-FieldFocusColor: var(--form-FieldHoverColor);
  --form-FieldBorderColor: rgba(76, 78, 100, 0.22);
  --form-FieldBorderHoverColor: rgba(76, 78, 100, 0.42);
  --form-FieldBorderFocusColor: rgb(102, 108, 255);
  --form-FieldBgColor: rgba(255, 255, 255, 0);
  --form-FieldBgHoverColor: rgba(255, 255, 255, 0);
  --form-FieldBgFocusColor: rgba(255, 255, 255, 0);
  --form-DescriptionColor: rgba(76, 78, 100, 0.68);

  --form-Size: 16px;
  --form-LabelSize: 16px;
  --form-FieldSize: 16px;
  --form-FieldPaddingH: 15px;
  --form-FieldPaddingV: 16px;
  --form-DescriptionSize: 13px;
}

.layout-outlined.size-slim {
  --form-Size: 14px;
  --form-LabelSize: 14px;
  --form-FieldSize: 14px;
  --form-FieldPaddingH: 12px;
  --form-FieldPaddingV: 12px;
  --form-DescriptionSize: 12px;
}

.layout-outlined .form-element {
  margin-bottom: var(--form-VerticalSpacing);
  font-size: var(--form-Size);
  color: var(--form-FieldColor);
}

.layout-outlined .inside-element {
  position: relative;
}

.layout-outlined .inside-element .form-label {
  position: absolute;
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
  display: flex;
  align-items: center;
  margin-inline-start: var(--form-FieldPaddingH);
  z-index: 2;
  pointer-events: none;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-outlined .inside-element.valid .form-label {
  height: 0;
  font-size: 12px;
}

.layout-outlined .inside-element:focus-within .form-label {
  color: var(--form-FieldBorderFocusColor);
}

.layout-outlined .inside-element .border-circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--form-FieldBorderColor);
  pointer-events: none;
  border-radius: 5px;
  transition:
    color 200ms cubic-bezier(0, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-outlined .form-input:hover .border-circle {
  border-color: var(--form-FieldBorderHoverColor);
}

.layout-outlined .inside-element:focus-within .border-circle {
  border-color: var(--form-FieldBorderFocusColor);
  border-width: 2px;
}

.layout-outlined .inside-element .border-circle legend {
  opacity: 0;
  height: 0;
  overflow: hidden;
  padding: 0px;
  max-width: 0;
  font-size: var(--form-LabelSize);
  margin-inline-start: calc(var(--form-FieldPaddingH) - 5px);
  width: auto;
  display: inline-block;
}

.layout-outlined .inside-element.valid .border-circle legend {
  max-width: 100%;
  padding-inline-start: 5px;
  padding-inline-end: 5px;
}

.layout-outlined .inside-element.valid .border-circle .text {
  font-size: 12px;
}

.layout-outlined
  .inside-element
  .form-label
  + .form-input
  .form-control::placeholder {
  opacity: 0;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-outlined .inside-element.valid .form-control::placeholder {
  opacity: 0.8;
}

.layout-outlined .inside-element .form-control {
  width: 100%;
  padding: var(--form-FieldPaddingV) var(--form-FieldPaddingH);
  line-height: 1.45;
  color: var(--form-FieldColor);
  font-size: var(--form-FieldSize);
  font-family: inherit;
  background: transparent;
  border: none;
  outline: none;
  height: auto;
  appearance: none;
  border-radius: 5px;
}

.layout-outlined .inside-element .form-control[type="time"] {
  line-height: calc(1.45em - 2px);
}

.layout-outlined .form-input:hover .form-control {
  color: var(--form-FieldHoverColor);
}

.layout-outlined .inside-element:focus-within .form-control {
  color: var(--form-FieldFocusColor);
}

.layout-outlined .inside-element select.form-control:not([multiple]) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z" fill="%23333333" ></path></svg>');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) 50%;
  padding-right: 45px;
}

.layout-outlined
  .form-element:not(.icon-left)
  .form-icon
  + select.form-control:not([multiple]),
.layout-outlined
  .form-element.icon-right
  .form-icon
  + select.form-control:not([multiple]) {
  background-image: none;
}

.layout-outlined .inside-element .form-input {
  position: relative;
}

.layout-outlined .inside-element .form-icon {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  font-size: 1.5em;
  color: var(--form-FieldColor);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
}

.layout-outlined .inside-element .form-icon + .form-control {
  padding-inline-end: calc(2.5rem + var(--form-FieldPaddingH));
}

.layout-outlined .form-desc {
  color: var(--form-DescriptionColor);
  font-size: var(--form-DescriptionSize);
  line-height: 1.25;
  margin: 3px 0 0;
}

.layout-outlined .inside-element .form-desc {
  margin-inline-start: var(--form-FieldPaddingH);
}

.layout-outlined .form-element:not(.inside-element) .form-label {
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  margin-bottom: 10px;
  display: inline-block;
}

.layout-outlined .formErrorContent2 {
  font-size: 12px;
  color: rgb(255, 77, 73);
  margin-top: 3px;
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* .layout-outlined .inside-element .formErrorContent2 {
    margin-inline-start: var(--form-FieldPaddingH);
}
 */
.layout-outlined .error-element.inside-element .border-circle {
  border-color: rgb(255, 77, 73);
}

/* .layout-outlined .error-element.inside-element .form-label {
    color: rgb(255, 77, 73);
}
 */

.layout-underline {
  --form-LabelColor: rgba(76, 78, 100, 0.68);
  --form-FieldColor: rgba(76, 78, 100, 0.87);
  --form-FieldHoverColor: var(--form-FieldColor);
  --form-FieldFocusColor: var(--form-FieldHoverColor);
  --form-FieldBorderColor: rgba(76, 78, 100, 0.22);
  --form-FieldBorderHoverColor: rgba(76, 78, 100, 0.42);
  --form-FieldBorderFocusColor: rgb(102, 108, 255);
  --form-FieldBgColor: rgba(255, 255, 255, 0);
  --form-FieldBgHoverColor: rgba(255, 255, 255, 0);
  --form-FieldBgFocusColor: rgba(255, 255, 255, 0);
  --form-DescriptionColor: rgba(76, 78, 100, 0.68);

  --form-Size: 16px;
  --form-LabelSize: 16px;
  --form-FieldSize: 16px;
  --form-FieldPaddingH: 0;
  --form-FieldPaddingV: 16px;
  --form-DescriptionSize: 13px;
}

.layout-underline.size-slim {
  --form-Size: 14px;
  --form-LabelSize: 14px;
  --form-FieldSize: 14px;
  --form-FieldPaddingH: 0;
  --form-FieldPaddingV: 12px;
  --form-DescriptionSize: 12px;
}

.layout-underline .form-group {
  padding: var(--form-FieldPaddingV) 15px;
}

.layout-underline .form-element {
  margin-bottom: var(--form-VerticalSpacing);
  font-size: var(--form-Size);
  color: var(--form-FieldColor);
}

.layout-underline .inside-element {
  position: relative;
}

.layout-underline .inside-element .form-label {
  position: absolute;
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
  display: flex;
  align-items: center;
  margin-inline-start: var(--form-FieldPaddingH);
  z-index: 2;
  pointer-events: none;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-underline .inside-element.valid .form-label {
  height: 0;
  font-size: 12px;
}

.layout-underline .inside-element:focus-within .form-label {
  color: var(--form-FieldColor);
}

.layout-underline .inside-element .form-input,
.layout-underline .block-element .form-input {
  position: relative;
  border-bottom: 1px solid var(--form-FieldBorderColor);
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-underline .inside-element .form-input:hover,
.layout-underline .block-element .form-input:hover {
  border-color: var(--form-FieldBorderHoverColor);
}

.layout-underline .inside-element .form-input::before,
.layout-underline .block-element .form-input::before {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  border-bottom: 2px solid var(--form-FieldBorderFocusColor);
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-underline .inside-element:focus-within .form-input::before,
.layout-underline .block-element:focus-within .form-input::before {
  right: 0;
}

.layout-underline .inside-element .border-circle legend {
  opacity: 0;
  height: 0;
  overflow: hidden;
  padding: 0px;
  max-width: 0;
  font-size: var(--form-LabelSize);
  margin-inline-start: calc(var(--form-FieldPaddingH) - 5px);
  width: auto;
  display: inline-block;
}

.layout-underline .inside-element.valid .border-circle legend {
  max-width: 100%;
  padding-inline-start: 5px;
  padding-inline-end: 5px;
}

.layout-underline .inside-element.valid .border-circle .text {
  font-size: 12px;
}

.layout-underline
  .inside-element
  .form-label
  + .form-input
  .form-control::placeholder,
.layout-underline
  .block-element
  .form-label
  + .form-input
  .form-control::placeholder {
  opacity: 0;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-underline .inside-element.valid .form-control::placeholder,
.layout-underline .block-element.valid .form-control::placeholder {
  opacity: 0.8;
}

.layout-underline .inside-element .form-control,
.layout-underline .block-element .form-control {
  width: 100%;
  padding: var(--form-FieldPaddingV) var(--form-FieldPaddingH);
  line-height: 1.45;
  color: var(--form-FieldColor);
  font-size: var(--form-FieldSize);
  background: transparent;
  border: none;
  outline: none;
  height: auto;
  appearance: none;
  border-radius: 5px;
}

.layout-underline .inside-element .form-control[type="time"],
.layout-underline .block-element .form-control[type="time"] {
  line-height: calc(1.45em - 2px);
}

.layout-underline .form-input:hover .form-control,
.layout-underline .block-input:hover .form-control {
  color: var(--form-FieldHoverColor);
}

.layout-underline .inside-element:focus-within .form-control,
.layout-underline .block-element:focus-within .form-control {
  color: var(--form-FieldFocusColor);
}

.layout-underline .inside-element select.form-control:not([multiple]) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z" fill="%23333333" ></path></svg>');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) 50%;
  padding-right: 45px;
}

.layout-underline
  .form-element:not(.icon-left)
  .form-icon
  + select.form-control:not([multiple]),
.layout-underline
  .form-element.icon-right
  .form-icon
  + select.form-control:not([multiple]) {
  background-image: none;
}

.layout-underline .inside-element .form-input {
  position: relative;
}

.layout-underline .inside-element .form-icon {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  font-size: 1.5em;
  color: var(--form-FieldColor);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
}

.layout-underline .inside-element .form-icon + .form-control,
.layout-underline .block-element .form-icon + .form-control {
  padding-inline-end: calc(2.5rem + var(--form-FieldPaddingH));
}

.layout-underline .form-desc {
  color: var(--form-DescriptionColor);
  font-size: var(--form-DescriptionSize);
  line-height: 1.25;
  margin: 3px 0 0;
  margin-inline-start: var(--form-FieldPaddingH);
}

.layout-underline .form-element:not(.inside-element) .form-label {
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  margin: 0 0 10px;
  display: inline-block;
}

.layout-underline .formErrorContent2 {
  font-size: 12px;
  color: rgb(255, 77, 73);
  margin-top: 3px;
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* .layout-underline .inside-element .formErrorContent2 {
    margin-inline-start: var(--form-FieldPaddingH);
} */

.layout-underline .error-element.inside-element .border-circle {
  border-color: rgb(255, 77, 73);
}

/* .layout-underline .error-element.inside-element .form-label {
    color: rgb(255, 77, 73);
} */

/*step nav*/

.nav-default {
  --form-NavTitleColor: rgba(76, 78, 100, 0.87);
  --form-NavDescriptionColor: rgba(76, 78, 100, 0.68);
  --form-NavLineColor: rgba(102, 108, 255, 0.12);
  --form-NavAccentColor: rgb(102, 108, 255);
}

.nav-default .step-nav {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}

.nav-default .step-nav > li {
  list-style: none;
  text-align: center;
  flex: 1;
  position: relative;
  margin: 0px 0px 15px;
}

.nav-default .step-nav .form-page-title {
  font-weight: 500;
  font-size: var(--form-NavTitleSize, 14px);
  color: var(--form-NavTitleColor);
  margin: 0 0 5px;
}

.nav-default .step-nav .form-page-description {
  color: var(--form-NavDescriptionColor);
  font-size: var(--form-NavDescriptionSize, 12px);
  line-height: 1.2;
}

.nav-default .step-nav .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--form-NavLineColor);
  margin: 0 auto 15px;
}

.nav-default .step-nav > li::after,
.nav-default .step-nav > li::before {
  content: "";
  position: absolute;
  border-bottom: 2px solid var(--form-NavLineColor);
  top: 9px;
}

.nav-default .step-nav > li::after {
  inset-inline-start: calc(50% + 15px);
  inset-inline-end: 0;
}

.nav-default .step-nav > li::before {
  inset-inline-start: 0;
  inset-inline-end: calc(50% + 15px);
}

.nav-default .step-nav > li:first-child::before {
  content: none;
}

.nav-default .step-nav > li:last-child::after {
  content: none;
}

.nav-default .step-nav .current .dot {
  border-color: var(--form-NavAccentColor);
}

.nav-default .step-nav .active .dot {
  border-color: var(--form-NavAccentColor);
  background-color: var(--form-NavAccentColor);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" fill="%23ffffff" ></path></svg>');
}

.nav-default .step-nav > li.active::after,
.nav-default .step-nav > li.active::before,
.nav-default .step-nav > li.current::before {
  border-color: var(--form-NavAccentColor);
}

/**button**/
.dng-form .form-element > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  height: 42px;
  padding: 0 25px;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: none;
  border-radius: 5px;
  transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
  appearance: none;
}

.dng-form .form-pages-main .form-page .form-element.form-buttons-group {
  display: flex;
  justify-content: var(--form-ButtonPosition);
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 15px;
}

.dng-form {
  --form-ButtonColor: rgb(109, 120, 141);
  --form-ButtonHoverColor: rgb(102, 108, 255);
  --form-NextButtonColor: rgb(109, 120, 141);
  --form-NextButtonHoverColor: rgb(102, 108, 255);
  --form-PrevButtonColor: rgb(109, 120, 141);
  --form-PrevButtonHoverColor: rgb(102, 108, 255);
}

.dng-form .form-element .btn-submit {
}

.dng-form .form-element .btn-next {
  --form-ButtonColor: var(--form-NextButtonColor);
  --form-ButtonHoverColor: var(--form-NextButtonHoverColor);
}

.dng-form .form-element .btn-prev {
  --form-ButtonColor: var(--form-PrevButtonColor);
  --form-ButtonHoverColor: var(--form-PrevButtonHoverColor);
}

.dng-form .form-element .btn-plain {
  background: transparent;
  color: var(--form-ButtonColor);
  border: 1px solid var(--form-ButtonColor);
}

.dng-form .form-element .btn-plain:hover {
  background: transparent;
  color: var(--form-ButtonHoverColor);
  border: 1px solid var(--form-ButtonHoverColor);
}

.dng-form .form-element .btn-default {
  background: var(--form-ButtonColor);
  color: #fff;
  border: none;
}

.dng-form .form-element .btn-default:hover {
  background: var(--form-ButtonHoverColor);
  color: #fff;
  border: none;
}

.easepick-wrapper {
  z-index: 100000;
}

body .popup-form-btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: none;
  padding: 7px 12px;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 4px;
  transition: filter 300ms ease-in;
  color: #fff;
  background-color: #007bff;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  cursor: pointer;
}

body .popup-form-btn:hover {
  filter: brightness(110%);
}

body .popup-form-btn.btn-position-fixright {
  transform: rotate(90deg) translateX(100%);
  transform-origin: right top;
  border-radius: 0 0 3px 3px;
  position: fixed;
  right: 0;
  top: 25%;
  z-index: 9998;
}

body .popup-form-btn.btn-position-fixleft {
  transform: rotate(90deg) translateY(-100%);
  transform-origin: left top;
  border-radius: 3px 3px 0 0;
  position: fixed;
  top: 25%;
  left: 0;
  z-index: 9998;
}

.form-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  overflow-y: auto;
  z-index: 9999;
  display: none;
}

.form-lightbox .form-lightbox-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.form-lightbox .form-close {
  position: absolute;
  right: 11px;
  top: 17px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 2;
  background: #6d788d;
  border-radius: 50%;
  color: #fff;
  transition: filter 0.3s cubic-bezier(0.42, 0, 1, 1);
}

.form-lightbox .form-close::before,
.form-lightbox .form-close::after {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
}

.form-lightbox .form-close::before {
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.form-lightbox .form-close::after {
  transform: translate3d(-50%, -50%, 0) rotate(135deg);
}

.form-lightbox .form-close:hover {
  filter: brightness(110%);
}

.form-lightbox .form-lightbox-message {
  margin-bottom: 30px;
}

.lightbox-style-1 .form-lightbox-content {
  background-color: #fff;
  display: flex;
  width: 800px;
  max-width: 100%;
  position: relative;
}

.lightbox-style-1 .form-lightbox-content .form-imgae-box {
  flex: 0 0 50%;
  background-color: #e3e3e3;
  background-position: center center;
  background-size: cover;
}

.lightbox-style-1 .form-lightbox-content .form-content-box {
  flex: 1;
  padding: 30px;
}

@media (max-width: 767px) {
  .lightbox-style-1 .form-lightbox-content {
    flex-direction: column;
  }

  .lightbox-style-1 .form-lightbox-content .form-imgae-box {
    padding-bottom: 56%;
  }
}

/*  ezweb.ir */
.message-license {
  display: none;
}

#form-preview {
  padding: 15px;
}

.conditional2:not(.item-show):not(.skip-item) {
  display: none;
}

.dng-form {
  --form-FormWidth: auto;
  --form-LabelWidth: 200px;
  --form-RequiredText: "*";
  --form-RequiredColor: rgba(255, 0, 0, 1);
  --form-VerticalSpacing: 25px;
  --form-ButtonPosition: space-between;
  width: var(--form-FormWidth);
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.35;
  position: relative;
}

.dng-form svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.dng-form.form-loading {
  pointer-events: none;
}

.dng-form.form-loading::before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.dng-form.form-loading::after {
  content: "";
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 5px solid #e3e3e3;
  border-top-color: #555;
  border-left-color: #555;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px;
  -webkit-animation: loading-rotate 0.7s infinite;
  -moz-animation: loading-rotate 0.7s infinite;
  animation: loading-rotate 0.7s infinite;
  z-index: 101;
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.dng-form .form-element > button svg {
  fill: currentColor;
  vertical-align: middle;
}

.dng-form .form-element .icon {
  margin-inline-end: 8px;
  vertical-align: middle;
}

.dng-form .form-element .i-right.icon {
  margin-inline-start: 8px;
  margin-inline-end: 0;
}

.dng-form .form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.dng-form .form-col {
  padding-right: 15px;
  padding-left: 15px;
}

.dng-form .form-group {
  padding: var(--form-FieldPaddingV) var(--form-FieldPaddingH);
  border-radius: 5px;
  color: var(--form-FieldColor);
  border: 1px solid var(--form-FieldBorderColor);
  margin-bottom: 1.5em;
}

.dng-form .form-group fieldset:not(.border-circle) {
  border: 1px solid #999999;
  border-radius: 5px;
  padding: 15px;
  margin: 0 0 30px;
}

.dng-form .form-group legend {
  padding: 0 5px;
  margin-inline-start: -5px;
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  display: inline-block;
  width: auto;
  float: none;
}

.dng-form .form-group > .form-desc {
  margin-bottom: 2em;
  color: var(--form-DescriptionColor);
  font-size: var(--form-DescriptionSize);
}

.dng-form .form-group.style-title,
.dng-form .form-group.style-hidden {
  padding: 0;
  border: none;
  margin: 0;
  border-radius: 0;
}

.dng-form .form-group.style-title legend {
  margin-bottom: 20px;
}

.dng-form .form-pages-main .form-page {
  display: none;
}

.dng-form .form-pages-main .form-page.active {
  display: block;
}

.dng-form .form-input {
  position: relative;
}

.dng-form .form-input .field-left-icon,
.dng-form .form-input .field-right-icon {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  font-size: 1.2em;
}

.dng-form textarea {
  font-family: inherit;
}

.dng-form .form-textarea .field-left-icon,
.dng-form .form-textarea .field-right-icon {
  height: auto;
  padding: 14px 0;
}

.dng-form .form-input .field-left-icon {
  left: 0;
}

.dng-form .form-input .field-right-icon {
  right: 0;
}

.dng-form .form-input .field-left-icon ~ .style-input {
  padding-left: 40px;
}

.dng-form .form-input .field-right-icon ~ .style-input {
  padding-right: 40px;
}

.dng-form .form-header {
  margin-bottom: 30px;
}

.dng-form .form-title {
  text-align: center;
}

.dng-form .form-description {
  text-align: center;
}

.dng-form .form-desc {
  margin: 0 0 10px;
}

.dng-form .form-desc-after {
  margin-top: 10px;
}

.dng-form .form-required::before {
  content: var(--form-RequiredText);
  color: var(--form-RequiredColor);
  margin-inline-start: 5px;
}

.dng-form .label-left {
  display: grid;
  grid-template-columns: 150px auto;
}

.dng-form .label-left .form-label {
  margin: 10px 0;
  padding-right: 10px;
  grid-row: 1/10;
}

.dng-form .form-label,
.dng-form .form-group legend,
.dng-form .border-circle {
  font-weight: 600;
}

.dng-form.label-500 .form-label,
.dng-form.label-500 .form-group legend,
.dng-form.label-500 .border-circle {
  font-weight: 500;
}

.dng-form.label-700 .form-label,
.dng-form.label-700 .form-group legend,
.dng-form.label-700 .border-circle {
  font-weight: 700;
}

.dng-form .label-inside .form-input {
  position: relative;
}

@media (max-width: 479px) {
  .responsive-columns-479
    .form-row:not(.mobile-off):not(.mobile-sm):not([class*="mobile-custom-"])
    > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .responsive-columns-767
    .form-row:not(.mobile-off):not(.mobile-sm):not([class*="mobile-custom-"])
    > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .responsive-columns-1024
    .form-row:not(.mobile-off):not(.mobile-sm):not([class*="mobile-custom-"])
    > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 479px) {
  .dng-form .form-row.mobile-sm > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .dng-form .form-row.mobile-md > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .dng-form .form-row.mobile-xl > .form-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.dng-form .form-control::placeholder {
  color: currentColor;
  opacity: 0.8;
}

.dng-form .form-control,
.dng-form .form-control:focus {
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

.dng-form .form-control[type="time"] {
  line-height: calc(1.45em - 2px);
}

.dng-form label,
.dng-form legend {
  font-weight: normal;
  margin: 0;
  float: none;
}

.dng-form .checkbox-list .option-item,
.dng-form .radio-list .option-item {
  margin-inline-end: 15px;
  margin-bottom: 10px;
  display: inline-flex;
  vertical-align: middle;
}

.dng-form .checkbox-list .option-item label,
.dng-form .radio-list .option-item label {
  cursor: pointer;
  font-size: 1em;
  color: currentColor;
}

.dng-form .checkbox-list .option-item.hide-input input,
.dng-form .radio-list .option-item.hide-input input {
  display: none;
}

.dng-form .checkbox-list .option-item.hide-input input:checked + label img,
.dng-form .radio-list .option-item.hide-input input:checked + label img {
  box-shadow: 0 0 0 1px var(--form-FieldBorderFocusColor);
}

.dng-form .checkbox-list input[type="checkbox"],
.dng-form .radio-list input[type="radio"] {
  appearance: none;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  border: 2px solid var(--form-FieldBorderColor, currentColor);
  background: transparent;
  border-radius: 3px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  font-size: 1em;
  flex: 0 0 calc(1em + 2px);
  margin-top: 1px;
}

.dng-form .checkbox-list input[type="checkbox"]:checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" fill="%23ffffff" ></path></svg>');
  background-color: var(--form-FieldBorderFocusColor);
  border-color: var(--form-FieldBorderFocusColor);
  outline: none;
}

.dng-form .radio-list input[type="radio"] {
  border-radius: 50%;
}

.dng-form .radio-list input[type="radio"]:checked {
  background-clip: content-box;
  padding: 2px;
  background-color: var(--form-FieldBorderFocusColor);
  border-color: var(--form-FieldBorderFocusColor);
  outline: none;
}

.is-light-text .dng-form .checkbox-list input[type="checkbox"]:checked,
.is-light-text .dng-form .radio-list input[type="radio"]:checked {
  background-color: var(--accent-color, --form-FieldBorderFocusColor);
  border-color: var(--accent-color, --form-FieldBorderFocusColor);
}

.dng-form
  .form-element:not(.fields-type-images)
  .checkbox-list
  .option-item
  input
  + label,
.dng-form
  .form-element:not(.fields-type-images)
  .radio-list
  .option-item
  input
  + label {
  padding-inline-start: 8px;
}

.dng-form .fields-columns {
  --form-FieldsWidth: 1;
}

.dng-form .fields-columns .checkbox-list,
.dng-form .fields-columns .radio-list {
  display: grid;
  grid-template-columns: repeat(var(--form-FieldsWidth), 1fr);
}

@media (max-width: 479px) {
  .dng-form .fields-columns.responsive-columns-479 .checkbox-list,
  .dng-form .fields-columns.responsive-columns-479 .radio-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 767px) {
  .dng-form .fields-columns.responsive-columns-767 .checkbox-list,
  .dng-form .fields-columns.responsive-columns-767 .radio-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 1024px) {
  .dng-form .fields-columns.responsive-columns-1024 .checkbox-list,
  .dng-form .fields-columns.responsive-columns-1024 .radio-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.dng-form .fields-type-images {
  --form-FieldsImagesWidth: auto;
  --form-FieldsImagesHieghtRatio: 1;
}

.dng-form .form-element:not(.fields-images-responsive) .option-imgbox {
  margin-bottom: 10px;
  display: block;
}

.dng-form .fields-images-responsive .option-imgbox {
  position: relative;
  width: auto;
  height: 0;
  padding-bottom: calc(var(--form-FieldsImagesHieghtRatio) * 100%);
  display: block;
}

.dng-form .fields-images-responsive .option-imageselected,
.dng-form .fields-images-responsive .option-image {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.dng-form .fields-images-responsive .checkbox-list label,
.dng-form .fields-images-responsive .radio-list label {
  display: block;
  width: 100%;
  max-width: var(--form-FieldsImagesWidth);
}

.dng-form .option-imageselected,
.dng-form .option-image {
  max-width: 100%;
  width: var(--form-FieldsImagesWidth);
  object-fit: Contain;
}

.dng-form .fields-images-cover .option-imageselected,
.dng-form .fields-images-cover .option-image {
  object-fit: cover;
}

.dng-form .fields-type-images input {
  display: none;
}

.dng-form .option-imageselected,
.dng-form input:checked + label .option-imageselected + .option-image {
  display: none;
}

.dng-form input:checked + label .option-imageselected {
  display: inline-block;
}

.dng-form input:checked + label .option-imageselected,
.dng-form input:checked + label .option-image {
  box-shadow: 0 0 0 2px var(--form-FieldBorderFocusColor);
}

.dng-form select.form-control:not([multiple]) option {
  color: #333;
}

.dng-form .checkbox-list .formError2,
.dng-form .radio-list .formError2 {
  grid-column: 1/-1;
}

.dng-form input.file-filepond {
  display: none;
}

.file-filepond-box {
  position: relative;
}

.file-filepond-box > input[type="text"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  width: 0;
  height: 0;
}

.file-filepond-box .filepond--drop-label,
.file-filepond-box .filepond--label-action {
  color: #4f4f4f !important;
}

.image-recaptcha-box {
  display: inline-flex;
  align-items: center;
}

.image-recaptcha-box img {
  vertical-align: middle;
  cursor: pointer;
}

.image-recaptcha-box .recaptcha-image {
  margin-right: 8px;
  position: relative;
}

.image-recaptcha-box input {
  background-color: var(--form-FieldBgHoverColor);
  border: 1px solid var(--form-FieldBorderHoverColor);
  color: var(--form-FieldHoverColor);
  height: 40px;
  border-radius: 4px;
  width: 70px;
  padding: 0 10px;
  outline: none;
  box-shadow: none;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-right: 5px;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.image-recaptcha-box input:hover {
  background-color: var(--form-FieldBgHoverColor);
  border-color: var(--form-FieldBorderHoverColor);
  color: var(--form-FieldHoverColor);
}

.image-recaptcha-box input:focus {
  background-color: var(--form-FieldBgFocusColor);
  border-color: var(--form-FieldBorderFocusColor);
  color: var(--form-FieldFocusColor);
}

.image-recaptcha-box .sign {
  font-size: 26px;
  margin-right: 10px;
  line-height: 0;
  padding-bottom: 2px;
}

.image-recaptcha-box button {
  width: 40px;
  height: 40px;
  appearance: none;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.image-recaptcha-box .recaptcha-image::after {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M500 8h-27.711c-6.739 0-12.157 5.548-11.997 12.286l2.347 98.568C418.075 51.834 341.788 7.73 255.207 8.001 118.82 8.428 7.787 120.009 8 256.396 8.214 393.181 119.165 504 256 504c63.926 0 122.202-24.187 166.178-63.908 5.113-4.618 5.354-12.561.482-17.433l-19.738-19.738c-4.498-4.498-11.753-4.785-16.501-.552C351.787 433.246 306.105 452 256 452c-108.322 0-196-87.662-196-196 0-108.322 87.662-196 196-196 79.545 0 147.941 47.282 178.675 115.302l-126.389-3.009c-6.737-.16-12.286 5.257-12.286 11.997V212c0 6.627 5.373 12 12 12h192c6.627 0 12-5.373 12-12V20c0-6.627-5.373-12-12-12z" fill="%2333333" ></path></svg>');
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-size: 18px 18px;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.8);
  pointer-events: none;
  opacity: 0;
  transition: all ease-in 150ms;
}

.image-recaptcha-box .recaptcha-image:not(.active):hover:after {
  opacity: 1;
}

.datepick-popup {
  width: auto !important;
  height: auto !important;
}

.form-pages-main {
  position: relative;
}

.dng-form .message {
  padding: 5px 15px;
  margin-top: 5px;
  z-index: 100;
  text-align: left;
  position: absolute;
  top: 100%;
  color: #000 !important;
}

/* .dng-form .message.position-above{
    margin-bottom: 20px;
} */

.dng-form .message.error {
  background-color: #f2dede;
  color: #b94a48 !important;
  border-left: 5px solid #c73412;
}

.dng-form .message.valid {
  background-color: #efffe6;
  border-left: 5px solid #51bc1a;
  color: #000 !important;
}

.dng-form .message.warning {
  background-color: #fff3e1;
  border-left: 5px solid #ff9800;
  color: #000 !important;
}

.dng-form .message p {
  color: currentColor !important;
}

.dng-form .message p:last-child {
  margin: 0;
}

.form-message-alert {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-message-alert .message-content {
  padding: 35px 26px;
  background-color: #fff;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  width: 420px;
  max-width: 95vw;
  color: #3f4254;
  transform: scale(0);
}

.form-message-alert.animate .message-content {
  animation: message-show 0.3s;
  transform: scale(1);
}

.form-message-alert .description {
  margin-bottom: 15px;
}

.form-message-alert .description p:last-child {
  margin: 0;
}

.form-message-alert .icon {
  border: 3px solid rgba(165, 220, 134, 0.3);
  border-radius: 50%;
  width: 72px;
  height: 72px;
  margin: 10px auto 25px;
  position: relative;
}

.form-message-alert:not(.error) .icon::after {
  content: "";
  width: 55%;
  height: 32%;
  position: absolute;
  left: 25%;
  top: 26%;
  border-bottom: 4px solid #50cd89;
  border-left: 4px solid #50cd89;
  transform: rotate(-45deg);
  border-radius: 3px;
}

.form-message-alert.error .icon::after {
  content: "";
}

.form-message-alert.error .icon {
  border-color: #f1416c;
}

.form-message-alert.error .icon::after,
.form-message-alert.error .icon::before {
  content: "";
  width: 60%;
  border-bottom: 4px solid #f1416c;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -30%;
  border-radius: 2px;
}

.form-message-alert.error .icon::after {
  transform: rotate(45deg);
}

.form-message-alert.error .icon::before {
  transform: rotate(-45deg);
}

.form-message-alert .btn-confirm {
  height: 42px;
  border-radius: 4px;
  background: #50cd89;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 0;
  color: #fff;
  font-size: 14px;
  padding: 0px 15px;
  min-width: 110px;
  transition: all ease-in 200ms;
}

.form-message-alert .btn-confirm:hover {
  background-color: #47be7d;
}

.form-message-alert.error .btn-confirm {
  background-color: #f1416c;
}

.form-message-alert.error .btn-confirm:hover {
  background-color: #d9214e;
}

@keyframes message-show {
  0% {
    transform: scale(0.7);
  }

  45% {
    transform: scale(1.05);
  }

  80% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

/*label*/

.dng-form.label-horizontal
  .form-element:not(.inside-element):not(.label-vertical),
.dng-form .form-element.label-horizontal {
  display: grid;
  grid-template-columns: var(--form-LabelWidth) 1fr;
  align-items: start;
}

.dng-form.label-horizontal
  .form-element:not(.inside-element):not(.label-vertical)
  .form-label,
.dng-form .form-element.label-horizontal .form-label {
  grid-row: 1/100;
  margin-inline-end: var(--form-FieldPaddingH);
  display: flex;
  align-items: center;
}

.dng-form.labelalign-right .form-element:not(.label-vertical) .form-label,
.dng-form .form-element.label-horizontal.label-right .form-label {
  justify-content: end;
  text-align: end;
}

.dng-form.label-horizontal
  .form-element.basic-element:not(.inside-element):not(.label-vertical)
  .form-label,
.dng-form
  .form-element.basic-element:not(.inside-element).label-horizontal
  .form-label {
  min-height: calc(
    var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2
  );
}

.dng-form .form-pages-main .form-element.basic-element.label-hidden {
  grid-template-columns: 1fr;
}

@media (max-width: 767px) {
  .dng-form.label-horizontal
    .form-element:not(.inside-element):not(.label-vertical),
  .dng-form .form-element.label-horizontal {
    grid-template-columns: 1fr;
  }

  .dng-form.label-horizontal
    .form-element.basic-element:not(.inside-element):not(.label-vertical)
    .form-label,
  .dng-form
    .form-element.basic-element:not(.inside-element).label-horizontal
    .form-label {
    min-height: auto;
  }
}

/*select*/

.dng-form select.form-control[multiple]::-webkit-scrollbar {
  width: 4px;
  border-radius: 10px;
}

.dng-form select.form-control[multiple]::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.1);
}

.dng-form select.form-control[multiple]::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}

/******FormLayout******/

.layout-default {
  --form-LabelColor: rgba(76, 78, 100, 0.68);
  --form-FieldColor: rgba(76, 78, 100, 0.87);
  --form-FieldHoverColor: var(--form-FieldColor);
  --form-FieldFocusColor: var(--form-FieldHoverColor);
  --form-FieldBorderColor: rgba(76, 78, 100, 0.22);
  --form-FieldBorderHoverColor: rgba(76, 78, 100, 0.42);
  --form-FieldBorderFocusColor: rgb(102, 108, 255);
  --form-FieldBgColor: rgba(255, 255, 255, 0);
  --form-FieldBgHoverColor: var(--form-FieldBgColor);
  --form-FieldBgFocusColor: var(--form-FieldBgHoverColor);
  --form-DescriptionColor: rgba(76, 78, 100, 0.68);

  --form-Size: 16px;
  --form-LabelSize: 16px;
  --form-FieldSize: 16px;
  --form-FieldPaddingH: 15px;
  --form-FieldPaddingV: 16px;
  --form-DescriptionSize: 13px;
}

.layout-default.size-slim {
  --form-Size: 14px;
  --form-LabelSize: 14px;
  --form-FieldSize: 14px;
  --form-FieldPaddingH: 12px;
  --form-FieldPaddingV: 12px;
  --form-DescriptionSize: 12px;
}

.layout-default .form-element {
  margin-bottom: var(--form-VerticalSpacing);
  font-size: var(--form-Size);
  color: var(--form-FieldColor);
}

.layout-default .form-control {
  width: 100%;
  padding: var(--form-FieldPaddingV) var(--form-FieldPaddingH);
  line-height: 1.45;
  font-size: var(--form-FieldSize);
  background: transparent;
  border: none;
  outline: none;
  height: auto;
  appearance: none;
  border-radius: 5px;
  color: var(--form-FieldColor);
  border: 1px solid var(--form-FieldBorderColor);
  background-color: var(--form-FieldBgColor);
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-default .form-control[type="time"] {
  line-height: calc(1.45em - 2px);
}

.layout-default .form-input .form-control:hover {
  background-color: var(--form-FieldBgHoverColor);
  border-color: var(--form-FieldBorderHoverColor);
  color: var(--form-FieldHoverColor);
}

.layout-default .form-input .form-control:focus {
  background-color: var(--form-FieldBgFocusColor);
  border-color: var(--form-FieldBorderFocusColor);
  color: var(--form-FieldFocusColor);
}

.layout-default .form-control::placeholder {
  opacity: 0.8;
}

.layout-default select.form-control:not([multiple]) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z" fill="%23333333" ></path></svg>');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) 50%;
  padding-right: 45px;
}

.layout-default
  .form-element:not(.icon-left)
  .form-icon
  + select.form-control:not([multiple]),
.layout-default
  .form-element.icon-right
  .form-icon
  + select.form-control:not([multiple]) {
  background-image: none;
}

.layout-default .form-input {
  position: relative;
}

.layout-default .form-icon {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  font-size: 1.5em;
  color: var(--form-FieldColor);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
}

.layout-default:not(.icon-right) .form-element:not(.icon-right) .form-icon,
.layout-default.icon-right .form-element.icon-left .form-icon {
  inset-inline-start: 0;
}

.layout-default:not(.icon-right)
  .form-element:not(.icon-right)
  .form-icon
  + .form-control,
.layout-default.icon-right .form-element.icon-left .form-icon + .form-control {
  padding-inline-start: calc(2.5em + var(--form-FieldPaddingH));
}

.layout-default.icon-right .form-element:not(.icon-left) .form-icon,
.layout-default .form-element.icon-right .form-icon {
  inset-inline-end: 0;
}

.layout-default.icon-right
  .form-element:not(.icon-left)
  .form-icon
  + .form-control,
.layout-default .form-element.icon-right .form-icon + .form-control {
  padding-inline-end: calc(2.5em + var(--form-FieldPaddingH));
}

.layout-default .form-desc {
  color: var(--form-DescriptionColor);
  font-size: var(--form-DescriptionSize);
  line-height: 1.25;
  margin: 3px 0 0;
}

/* .layout-default .basic-element .form-desc {
    margin-inline-start: var(--form-FieldPaddingH);
}
 */
.layout-default .form-element .form-label {
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  margin: 0 0 10px;
  display: inline-block;
}

.layout-default .formErrorContent2 {
  font-size: 12px;
  color: rgb(255, 77, 73);
  margin-top: 3px;
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.layout-default .error-element .form-control {
  border-color: rgb(255, 77, 73);
}

.validation-position-absolute .formError2 {
  width: 100%;
}

div.validation-position-absolute .formErrorContent2 {
  margin-top: 0;
  padding: 12px 15px 6px;
  padding-inline-end: 35px;
  margin: 0 0 0;
  color: #b94a48;
  line-height: 1.5;
  position: absolute;
  z-index: 3;
  top: initial;
  left: initial;
  width: auto;
  max-width: 100%;
}

.validation-position-absolute .formErrorContent2::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  bottom: 0;
  left: 0;
  border-left: 5px solid #c73412;
  background-color: #f2dede;
  z-index: -1;
}

.validation-position-absolute .formErrorContent2::before {
  content: "";
  border: 5px solid transparent;
  border-bottom-color: #c73412;
  position: absolute;
  top: -4px;
  inset-inline-start: 15px;
}

.validation-position-absolute .formErrorContent2 .info-close {
  position: absolute;
  width: 25px;
  height: 30px;
  cursor: pointer;
  inset-inline-end: 0;
  top: 6px;
  padding-top: 6px;
}

.validation-position-absolute .formErrorContent2 .info-close::after,
.validation-position-absolute .formErrorContent2 .info-close::before {
  content: "";
  width: 10px;
  border-bottom: 1px solid #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5px;
}

.validation-position-absolute .formErrorContent2 .info-close::after {
  transform: rotate(45deg);
}

.validation-position-absolute .formErrorContent2 .info-close::before {
  transform: rotate(-45deg);
}

/* .layout-default .basic-element .formErrorContent2 {
    margin-inline-start: var(--form-FieldPaddingH);
} */

.layout-outlined {
  --form-LabelColor: rgba(76, 78, 100, 0.68);
  --form-FieldColor: rgba(76, 78, 100, 0.87);
  --form-FieldHoverColor: var(--form-FieldColor);
  --form-FieldFocusColor: var(--form-FieldHoverColor);
  --form-FieldBorderColor: rgba(76, 78, 100, 0.22);
  --form-FieldBorderHoverColor: rgba(76, 78, 100, 0.42);
  --form-FieldBorderFocusColor: rgb(102, 108, 255);
  --form-FieldBgColor: rgba(255, 255, 255, 0);
  --form-FieldBgHoverColor: rgba(255, 255, 255, 0);
  --form-FieldBgFocusColor: rgba(255, 255, 255, 0);
  --form-DescriptionColor: rgba(76, 78, 100, 0.68);

  --form-Size: 16px;
  --form-LabelSize: 16px;
  --form-FieldSize: 16px;
  --form-FieldPaddingH: 15px;
  --form-FieldPaddingV: 16px;
  --form-DescriptionSize: 13px;
}

.layout-outlined.size-slim {
  --form-Size: 14px;
  --form-LabelSize: 14px;
  --form-FieldSize: 14px;
  --form-FieldPaddingH: 12px;
  --form-FieldPaddingV: 12px;
  --form-DescriptionSize: 12px;
}

.layout-outlined .form-element {
  margin-bottom: var(--form-VerticalSpacing);
  font-size: var(--form-Size);
  color: var(--form-FieldColor);
}

.layout-outlined .inside-element {
  position: relative;
}

.layout-outlined .inside-element .form-label {
  position: absolute;
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
  display: flex;
  align-items: center;
  margin-inline-start: var(--form-FieldPaddingH);
  z-index: 2;
  pointer-events: none;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-outlined .inside-element.valid .form-label {
  height: 0;
  font-size: 12px;
}

.layout-outlined .inside-element:focus-within .form-label {
  color: var(--form-FieldBorderFocusColor);
}

.layout-outlined .inside-element .border-circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--form-FieldBorderColor);
  pointer-events: none;
  border-radius: 5px;
  transition:
    color 200ms cubic-bezier(0, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-outlined .form-input:hover .border-circle {
  border-color: var(--form-FieldBorderHoverColor);
}

.layout-outlined .inside-element:focus-within .border-circle {
  border-color: var(--form-FieldBorderFocusColor);
  border-width: 2px;
}

.layout-outlined .inside-element .border-circle legend {
  opacity: 0;
  height: 0;
  overflow: hidden;
  padding: 0px;
  max-width: 0;
  font-size: var(--form-LabelSize);
  margin-inline-start: calc(var(--form-FieldPaddingH) - 5px);
  width: auto;
  display: inline-block;
}

.layout-outlined .inside-element.valid .border-circle legend {
  max-width: 100%;
  padding-inline-start: 5px;
  padding-inline-end: 5px;
}

.layout-outlined .inside-element.valid .border-circle .text {
  font-size: 12px;
}

.layout-outlined
  .inside-element
  .form-label
  + .form-input
  .form-control::placeholder {
  opacity: 0;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-outlined .inside-element.valid .form-control::placeholder {
  opacity: 0.8;
}

.layout-outlined .inside-element .form-control {
  width: 100%;
  padding: var(--form-FieldPaddingV) var(--form-FieldPaddingH);
  line-height: 1.45;
  color: var(--form-FieldColor);
  font-size: var(--form-FieldSize);
  font-family: inherit;
  background: transparent;
  border: none;
  outline: none;
  height: auto;
  appearance: none;
  border-radius: 5px;
}

.layout-outlined .inside-element .form-control[type="time"] {
  line-height: calc(1.45em - 2px);
}

.layout-outlined .form-input:hover .form-control {
  color: var(--form-FieldHoverColor);
}

.layout-outlined .inside-element:focus-within .form-control {
  color: var(--form-FieldFocusColor);
}

.layout-outlined .inside-element select.form-control:not([multiple]) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z" fill="%23333333" ></path></svg>');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) 50%;
  padding-right: 45px;
}

.layout-outlined
  .form-element:not(.icon-left)
  .form-icon
  + select.form-control:not([multiple]),
.layout-outlined
  .form-element.icon-right
  .form-icon
  + select.form-control:not([multiple]) {
  background-image: none;
}

.layout-outlined .inside-element .form-input {
  position: relative;
}

.layout-outlined .inside-element .form-icon {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  font-size: 1.5em;
  color: var(--form-FieldColor);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
}

.layout-outlined .inside-element .form-icon + .form-control {
  padding-inline-end: calc(2.5rem + var(--form-FieldPaddingH));
}

.layout-outlined .form-desc {
  color: var(--form-DescriptionColor);
  font-size: var(--form-DescriptionSize);
  line-height: 1.25;
  margin: 3px 0 0;
}

.layout-outlined .inside-element .form-desc {
  margin-inline-start: var(--form-FieldPaddingH);
}

.layout-outlined .form-element:not(.inside-element) .form-label {
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  margin-bottom: 10px;
  display: inline-block;
}

.layout-outlined .formErrorContent2 {
  font-size: 12px;
  color: rgb(255, 77, 73);
  margin-top: 3px;
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* .layout-outlined .inside-element .formErrorContent2 {
    margin-inline-start: var(--form-FieldPaddingH);
}
 */
.layout-outlined .error-element.inside-element .border-circle {
  border-color: rgb(255, 77, 73);
}

/* .layout-outlined .error-element.inside-element .form-label {
    color: rgb(255, 77, 73);
}
 */

.layout-underline {
  --form-LabelColor: rgba(76, 78, 100, 0.68);
  --form-FieldColor: rgba(76, 78, 100, 0.87);
  --form-FieldHoverColor: var(--form-FieldColor);
  --form-FieldFocusColor: var(--form-FieldHoverColor);
  --form-FieldBorderColor: rgba(76, 78, 100, 0.22);
  --form-FieldBorderHoverColor: rgba(76, 78, 100, 0.42);
  --form-FieldBorderFocusColor: rgb(102, 108, 255);
  --form-FieldBgColor: rgba(255, 255, 255, 0);
  --form-FieldBgHoverColor: rgba(255, 255, 255, 0);
  --form-FieldBgFocusColor: rgba(255, 255, 255, 0);
  --form-DescriptionColor: rgba(76, 78, 100, 0.68);

  --form-Size: 16px;
  --form-LabelSize: 16px;
  --form-FieldSize: 16px;
  --form-FieldPaddingH: 0;
  --form-FieldPaddingV: 16px;
  --form-DescriptionSize: 13px;
}

.layout-underline.size-slim {
  --form-Size: 14px;
  --form-LabelSize: 14px;
  --form-FieldSize: 14px;
  --form-FieldPaddingH: 0;
  --form-FieldPaddingV: 12px;
  --form-DescriptionSize: 12px;
}

.layout-underline .form-group {
  padding: var(--form-FieldPaddingV) 15px;
}

.layout-underline .form-element {
  margin-bottom: var(--form-VerticalSpacing);
  font-size: var(--form-Size);
  color: var(--form-FieldColor);
}

.layout-underline .inside-element {
  position: relative;
}

.layout-underline .inside-element .form-label {
  position: absolute;
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
  display: flex;
  align-items: center;
  margin-inline-start: var(--form-FieldPaddingH);
  z-index: 2;
  pointer-events: none;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-underline .inside-element.valid .form-label {
  height: 0;
  font-size: 12px;
}

.layout-underline .inside-element:focus-within .form-label {
  color: var(--form-FieldColor);
}

.layout-underline .inside-element .form-input,
.layout-underline .block-element .form-input {
  position: relative;
  border-bottom: 1px solid var(--form-FieldBorderColor);
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-underline .inside-element .form-input:hover,
.layout-underline .block-element .form-input:hover {
  border-color: var(--form-FieldBorderHoverColor);
}

.layout-underline .inside-element .form-input::before,
.layout-underline .block-element .form-input::before {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  border-bottom: 2px solid var(--form-FieldBorderFocusColor);
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-underline .inside-element:focus-within .form-input::before,
.layout-underline .block-element:focus-within .form-input::before {
  right: 0;
}

.layout-underline .inside-element .border-circle legend {
  opacity: 0;
  height: 0;
  overflow: hidden;
  padding: 0px;
  max-width: 0;
  font-size: var(--form-LabelSize);
  margin-inline-start: calc(var(--form-FieldPaddingH) - 5px);
  width: auto;
  display: inline-block;
}

.layout-underline .inside-element.valid .border-circle legend {
  max-width: 100%;
  padding-inline-start: 5px;
  padding-inline-end: 5px;
}

.layout-underline .inside-element.valid .border-circle .text {
  font-size: 12px;
}

.layout-underline
  .inside-element
  .form-label
  + .form-input
  .form-control::placeholder,
.layout-underline
  .block-element
  .form-label
  + .form-input
  .form-control::placeholder {
  opacity: 0;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
}

.layout-underline .inside-element.valid .form-control::placeholder,
.layout-underline .block-element.valid .form-control::placeholder {
  opacity: 0.8;
}

.layout-underline .inside-element .form-control,
.layout-underline .block-element .form-control {
  width: 100%;
  padding: var(--form-FieldPaddingV) var(--form-FieldPaddingH);
  line-height: 1.45;
  color: var(--form-FieldColor);
  font-size: var(--form-FieldSize);
  background: transparent;
  border: none;
  outline: none;
  height: auto;
  appearance: none;
  border-radius: 5px;
}

.layout-underline .inside-element .form-control[type="time"],
.layout-underline .block-element .form-control[type="time"] {
  line-height: calc(1.45em - 2px);
}

.layout-underline .form-input:hover .form-control,
.layout-underline .block-input:hover .form-control {
  color: var(--form-FieldHoverColor);
}

.layout-underline .inside-element:focus-within .form-control,
.layout-underline .block-element:focus-within .form-control {
  color: var(--form-FieldFocusColor);
}

.layout-underline .inside-element select.form-control:not([multiple]) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z" fill="%23333333" ></path></svg>');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) 50%;
  padding-right: 45px;
}

.layout-underline
  .form-element:not(.icon-left)
  .form-icon
  + select.form-control:not([multiple]),
.layout-underline
  .form-element.icon-right
  .form-icon
  + select.form-control:not([multiple]) {
  background-image: none;
}

.layout-underline .inside-element .form-input {
  position: relative;
}

.layout-underline .inside-element .form-icon {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  font-size: 1.5em;
  color: var(--form-FieldColor);
  height: calc(var(--form-FieldSize) * 1.45 + var(--form-FieldPaddingV) * 2);
}

.layout-underline .inside-element .form-icon + .form-control,
.layout-underline .block-element .form-icon + .form-control {
  padding-inline-end: calc(2.5rem + var(--form-FieldPaddingH));
}

.layout-underline .form-desc {
  color: var(--form-DescriptionColor);
  font-size: var(--form-DescriptionSize);
  line-height: 1.25;
  margin: 3px 0 0;
  margin-inline-start: var(--form-FieldPaddingH);
}

.layout-underline .form-element:not(.inside-element) .form-label {
  color: var(--form-LabelColor);
  font-size: var(--form-LabelSize);
  margin: 0 0 10px;
  display: inline-block;
}

.layout-underline .formErrorContent2 {
  font-size: 12px;
  color: rgb(255, 77, 73);
  margin-top: 3px;
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* .layout-underline .inside-element .formErrorContent2 {
    margin-inline-start: var(--form-FieldPaddingH);
} */

.layout-underline .error-element.inside-element .border-circle {
  border-color: rgb(255, 77, 73);
}

/* .layout-underline .error-element.inside-element .form-label {
    color: rgb(255, 77, 73);
} */

/*step nav*/

.nav-default {
  --form-NavTitleColor: rgba(76, 78, 100, 0.87);
  --form-NavDescriptionColor: rgba(76, 78, 100, 0.68);
  --form-NavLineColor: rgba(102, 108, 255, 0.12);
  --form-NavAccentColor: rgb(102, 108, 255);
}

.nav-default .step-nav {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}

.nav-default .step-nav > li {
  list-style: none;
  text-align: center;
  flex: 1;
  position: relative;
  margin: 0px 0px 15px;
}

.nav-default .step-nav .form-page-title {
  font-weight: 500;
  font-size: var(--form-NavTitleSize, 14px);
  color: var(--form-NavTitleColor);
  margin: 0 0 5px;
}

.nav-default .step-nav .form-page-description {
  color: var(--form-NavDescriptionColor);
  font-size: var(--form-NavDescriptionSize, 12px);
  line-height: 1.2;
}

.nav-default .step-nav .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--form-NavLineColor);
  margin: 0 auto 15px;
}

.nav-default .step-nav > li::after,
.nav-default .step-nav > li::before {
  content: "";
  position: absolute;
  border-bottom: 2px solid var(--form-NavLineColor);
  top: 9px;
}

.nav-default .step-nav > li::after {
  inset-inline-start: calc(50% + 15px);
  inset-inline-end: 0;
}

.nav-default .step-nav > li::before {
  inset-inline-start: 0;
  inset-inline-end: calc(50% + 15px);
}

.nav-default .step-nav > li:first-child::before {
  content: none;
}

.nav-default .step-nav > li:last-child::after {
  content: none;
}

.nav-default .step-nav .current .dot {
  border-color: var(--form-NavAccentColor);
}

.nav-default .step-nav .active .dot {
  border-color: var(--form-NavAccentColor);
  background-color: var(--form-NavAccentColor);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" fill="%23ffffff" ></path></svg>');
}

.nav-default .step-nav > li.active::after,
.nav-default .step-nav > li.active::before,
.nav-default .step-nav > li.current::before {
  border-color: var(--form-NavAccentColor);
}

/**button**/
.dng-form .form-element > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  height: 42px;
  padding: 0 25px;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: none;
  border-radius: 5px;
  transition: all 0.3s cubic-bezier(0.42, 0, 1, 1);
  appearance: none;
}

.dng-form .form-pages-main .form-page .form-element.form-buttons-group {
  display: flex;
  justify-content: var(--form-ButtonPosition);
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 15px;
}

.dng-form {
  --form-ButtonColor: rgb(109, 120, 141);
  --form-ButtonHoverColor: rgb(102, 108, 255);
  --form-NextButtonColor: rgb(109, 120, 141);
  --form-NextButtonHoverColor: rgb(102, 108, 255);
  --form-PrevButtonColor: rgb(109, 120, 141);
  --form-PrevButtonHoverColor: rgb(102, 108, 255);
}

.dng-form .form-element .btn-submit {
}

.dng-form .form-element .btn-next {
  --form-ButtonColor: var(--form-NextButtonColor);
  --form-ButtonHoverColor: var(--form-NextButtonHoverColor);
}

.dng-form .form-element .btn-prev {
  --form-ButtonColor: var(--form-PrevButtonColor);
  --form-ButtonHoverColor: var(--form-PrevButtonHoverColor);
}

.dng-form .form-element .btn-plain {
  background: transparent;
  color: var(--form-ButtonColor);
  border: 1px solid var(--form-ButtonColor);
}

.dng-form .form-element .btn-plain:hover {
  background: transparent;
  color: var(--form-ButtonHoverColor);
  border: 1px solid var(--form-ButtonHoverColor);
}

.dng-form .form-element .btn-default {
  background: var(--form-ButtonColor);
  color: #fff;
  border: none;
}

.dng-form .form-element .btn-default:hover {
  background: var(--form-ButtonHoverColor);
  color: #fff;
  border: none;
}

.easepick-wrapper {
  z-index: 100000;
}

body .popup-form-btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: none;
  padding: 7px 12px;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 4px;
  transition: filter 300ms ease-in;
  color: #fff;
  background-color: #007bff;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  cursor: pointer;
}

body .popup-form-btn:hover {
  filter: brightness(110%);
}

body .popup-form-btn.btn-position-fixright {
  transform: rotate(90deg) translateX(100%);
  transform-origin: right top;
  border-radius: 0 0 3px 3px;
  position: fixed;
  right: 0;
  top: 25%;
  z-index: 9998;
}

body .popup-form-btn.btn-position-fixleft {
  transform: rotate(90deg) translateY(-100%);
  transform-origin: left top;
  border-radius: 3px 3px 0 0;
  position: fixed;
  top: 25%;
  left: 0;
  z-index: 9998;
}

.form-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  overflow-y: auto;
  z-index: 9999;
  display: none;
}

.form-lightbox .form-lightbox-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.form-lightbox .form-close {
  position: absolute;
  right: 11px;
  top: 17px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 2;
  background: #6d788d;
  border-radius: 50%;
  color: #fff;
  transition: filter 0.3s cubic-bezier(0.42, 0, 1, 1);
}

.form-lightbox .form-close::before,
.form-lightbox .form-close::after {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
}

.form-lightbox .form-close::before {
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.form-lightbox .form-close::after {
  transform: translate3d(-50%, -50%, 0) rotate(135deg);
}

.form-lightbox .form-close:hover {
  filter: brightness(110%);
}

.form-lightbox .form-lightbox-message {
  margin-bottom: 30px;
}

.lightbox-style-1 .form-lightbox-content {
  background-color: #fff;
  display: flex;
  width: 800px;
  max-width: 100%;
  position: relative;
}

.lightbox-style-1 .form-lightbox-content .form-imgae-box {
  flex: 0 0 50%;
  background-color: #e3e3e3;
  background-position: center center;
  background-size: cover;
}

.lightbox-style-1 .form-lightbox-content .form-content-box {
  flex: 1;
  padding: 30px;
}

@media (max-width: 767px) {
  .lightbox-style-1 .form-lightbox-content {
    flex-direction: column;
  }

  .lightbox-style-1 .form-lightbox-content .form-imgae-box {
    padding-bottom: 56%;
  }
}

/*  ezweb.ir */
.message-license {
  display: none;
}