@keyframes color {
  100%,
  0%,
  24% {
    stroke: #b5e7d0;
  }

  25%,
  49% {
    stroke: #b5e7d0;
  }

  50%,
  74% {
    stroke: #b5e7d0;
  }

  75%,
  99% {
    stroke: #b5e7d0;
  }
}

@-webkit-keyframes color {
  100%,
  0%,
  24% {
    stroke: #b5e7d0;
  }

  25%,
  49% {
    stroke: #b5e7d0;
  }

  50%,
  74% {
    stroke: #b5e7d0;
  }

  75%,
  99% {
    stroke: #b5e7d0;
  }
}

@-o-keyframes color {
  100%,
  0%,
  24% {
    stroke: #b5e7d0;
  }

  25%,
  49% {
    stroke: #b5e7d0;
  }

  50%,
  74% {
    stroke: #b5e7d0;
  }

  75%,
  99% {
    stroke: #b5e7d0;
  }
}

@-moz-keyframes color {
  100%,
  0%,
  24% {
    stroke: #b5e7d0;
  }

  25%,
  49% {
    stroke: #b5e7d0;
  }

  50%,
  74% {
    stroke: #b5e7d0;
  }

  75%,
  99% {
    stroke: #b5e7d0;
  }
}
.fn-loading .rotator > .path {
  animation: stroke 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  -moz-animation: stroke 1.5s ease-in-out infinite,
    color 6s ease-in-out infinite;
  -webkit-animation: stroke 1.5s ease-in-out infinite,
    color 6s ease-in-out infinite;
  -o-animation: stroke 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
}
.fn-loading > p {
  color: #b5e7d0;
}
.fn-modal-loading .modal-dialog.modal-fullscreen > .modal-content {
  opacity: 0.98;
  background-color: rgba(29, 29, 29, 0.98);
}
/* Page E Form */
body {
  background-color: var(--tone-7-black-1);
  color: var(--bg-2-beige-100);
}

.intro-page {
  padding: 42px 0;
  background: url(/content/images/eform/background-banner-contactus-01-mobile-dark.svg)
      no-repeat top left,
    url(/content/images/eform/background-banner-contactus-02-mobile-dark.svg)
      no-repeat bottom right,
    var(--tone-7-black-1) no-repeat;
  position: relative;
}

.intro-page h1 {
  margin-bottom: 0;
  font-size: 26px;
}

.form-page {
  background-color: #1d1d1d;
}
.form-page h6 {
    line-height: normal;
}
.form-page h6 a {
    color: var(--bg-2-beige-100);
}
.form-page h6 a:hover {
    color: #fff;
}

#footer-section {
  display: none;
}

.footer-page a:hover {
  color: #fff;
}

@media (min-width: 992px) {
  .intro-page {
    padding: 130px 0 62px;
    background: url(/content/images/eform/background-banner-contactus-01-desktop-dark.svg)
        no-repeat top left,
      url(/content/images/eform/background-banner-contactus-02-desktop-dark.svg)
        no-repeat bottom right,
      var(--tone-7-black-1) no-repeat;
  }
  .intro-page h1 {
    font-size: 36px;
    line-height: 48px;
  }
}
/* E Form */
.form-heygoody .rounded-start-0 {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.form-heygoody .rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.form-heygoody .col-titleName {
    width: 116px;
}
.form-heygoody .col-name {
    width: calc(100% - 118px);
}

.form-heygoody ::placeholder {
  color: var(--tone-7-black-4);
}

.form-heygoody .fn-form-content .fn-form-select {
  background: transparent;
}

.form-heygoody .fn-form-content .form-select,
.form-heygoody .fn-form-content .form-control {
  border: none;
  color: var(--bg-2-beige-100);
  background-color: #2e2e2e;
}

.form-heygoody .fn-form-content .fn-form-select .form-select.empty {
  color: var(--tone-7-black-4);
}

.form-heygoody .fn-form-content .fn-form-select::after {
  background-image: url(/content/Images/icon-24-white-down-small.svg);
  z-index: 999;
}

.form-heygoody .fn-form-content .form-email > label {
  display: none;
}

.form-heygoody .dropdownemail {
  color: var(--bg-2-beige-100);
  background-color: #2e2e2e;
  border: none;
}

.form-heygoody .dropdownemail > li:hover,
.form-heygoody .dropdownemail > li[aria-selected="true"] {
  background-color: #2e2e2e;
  color: var(--bg-2-beige-100);
}

.form-heygoody .errorempty .form-select:focus,
.form-heygoody .errorempty .form-control:focus {
  box-shadow: inset 0 0 0 2px var(--line-3-error);
}

.form-heygoody textarea.form-control {
  min-height: 229px;
}
.fn-btn-dark-theme {
    background-color: transparent;
}
/* Validate Input Files */
.errorempty .fn-file-empty {
    display: block !important;
}
.errorvalid .fn-file-empty {
  display: none !important;
}
.errorempty .fn-valid-type {
  display: none !important;
}
.errorvalid .fn-valid-type {
  display: block !important;
}

/* Layout */
.wrap-listImg {
  font-size: 14px;
  color: var(--bg-2-beige-100);
}

.wrap-listImg .listsImg-items {
  border-radius: 8px;
  background-color: #2e2e2e;
  margin-bottom: 8px;
}

.wrap-listImg .listsImg-items:last-child {
  margin-bottom: 16px;
}

.wrap-listImg .listsImg-items .shrinkImg {
  background-color: var(--tone-7-black-3);
  width: 56px;
  height: 56px;
}

.wrap-listImg .listsImg-items .shrinkImg img {
  cursor: pointer;
  max-height: 56px;
  max-width: 56px;
  width: auto;
}
.wrap-listImg .listsImg-items .shrinkImg + div {
    width: calc(100% - 56px);
}

.wrap-listImg .listsImg-items .itemListImgName {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  height: 21px;
  word-wrap: break-word;
  word-break: break-word;
}

#modalMaxLengthImg .modal-body {
  color: #1d1d1d;
}

#previewModal .modal-dialog {
  margin: auto;
}

#previewModal .modal-content {
  background-color: transparent;
  display: flex;
  justify-content: center;
  margin: 40px 20px;
  padding: 0;
  height: auto;
}

#previewModal .modal-content [data-bs-dismiss="modal"] {
  position: fixed;
  top: 0;
  right: 0;
  background-image: url(../Images/icon/icon-48-white-close-circle.svg);
  background-position: center;
  background-color: var(--bg-10-filter-50);
  border-radius: 50px;
  display: flex;
  width: 32px;
  height: 32px;
  margin: 8px;
}

#previewModal .modal-content img {
  max-height: calc(100vh - 80px);
  max-width: 600px;
  width: 100%;
}

@media (min-width: 992px) {
  .modal-dialog.fn-modal-2button > .modal-content {
    width: 384px;
  }
}

/* Page ThankYou */
@media (min-width: 992px) {
    .page-eform-thankyou {
        padding-top: 68px;
    }
}