@charset "UTF-8";
.form-date-picker-box {
  margin-bottom: 16px;
}
.form-date-picker-box .TUXDatePicker {
  width: 100%;
}
.form-date-picker-box .TUXDatePicker .TUXFormField-header {
  margin-left: 0;
  margin-bottom: 6px;
}
.form-date-picker-box .TUXDatePicker-button {
  border-radius: 4px;
  border: 1.5px solid var(--Line-Light-LineSecondary, rgba(22, 24, 35, 0.12));
  background: var(--BG-Light-BGPrimary, #fff);
  display: flex;
  height: 36px;
  padding: 7px 12px;
}
.form-date-picker-box .TUXDatePicker-button:focus {
  border-width: 1px;
}
.form-date-picker-box .error-message {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
  margin-bottom: 0;
  display: block;
  color: #ff4c3a;
}
.form-date-picker-box .additional-info {
  margin-top: 8px;
}

.date-picker-sheet {
  padding: 0 16px 16px !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
.date-picker-sheet .TUXSheetNavBar {
  padding: 0;
}

.form-title-box .form-title {
  font-family: var(--tux-web-font-body);
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 6px;
  color: #161823;
}
.form-title-box .form-title.required::after {
  content: "*";
  color: #f10000;
  margin-left: 2px;
}
.form-title-box .form-title.bold {
  font-weight: bold;
}
.form-title-box .form-desc {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(22, 24, 35, 0.75);
  margin-bottom: 6px;
}

.form-info-box {
  margin-bottom: 16px;
}
.form-info-box .form-info {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  color: rgba(22, 24, 35, 0.75);
  margin-top: 0px;
}
.form-info-box .info-container {
  display: flex;
  align-items: center;
  margin: 0px;
}

.form-input-checkbox-box {
  margin-bottom: 16px;
}
.form-input-checkbox-box .error-message {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
  margin-bottom: 0;
  display: block;
  color: #ff4c3a;
}
.form-input-checkbox-box .checkbox-container input:not(.checkbox-input) {
  display: none;
}
.form-input-checkbox-box .checkbox-container label {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: block;
  line-height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.form-input-checkbox-box .checkbox-container label span {
  flex: 0 0 14px;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 4px 13px 4px 0px;
  vertical-align: middle;
  border-radius: 2px;
  background: #ffffff;
  border: 1.5px solid rgba(22, 24, 35, 0.12);
  box-sizing: border-box;
  position: relative;
  align-self: flex-start;
  outline-offset: 2px;
}
.form-input-checkbox-box .checkbox-container label:hover span {
  border-color: rgba(22, 24, 35, 0.5);
}
.form-input-checkbox-box .checkbox-container label div {
  margin: 0px;
}
.form-input-checkbox-box .checkbox-container input:checked + label span {
  background: #fe2c55;
  border: none;
}
.form-input-checkbox-box .checkbox-container + .checkbox-container {
  margin-top: 12px;
}
.form-input-checkbox-box .checkbox-container .checkbox-input-block {
  padding-left: 27px;
  position: relative;
  display: flex;
}
.form-input-checkbox-box .checkbox-container .checkbox-input-block input.checkbox-input {
  border: 1.5px solid rgba(22, 24, 35, 0.12);
  border-radius: 4px;
  flex: 1;
  margin-top: 4px;
}
.form-input-checkbox-box .checkbox-container .checkbox-input-block input.checkbox-input:hover {
  border-color: rgba(22, 24, 35, 0.5);
}
.form-input-checkbox-box .checkbox-container .checkbox-input-block input.checkbox-input:focus {
  border-color: rgba(22, 24, 35, 0.5);
}
.form-input-checkbox-box .checkbox-container[dir=rtl] label span {
  margin-left: 13px;
  margin-right: 0px;
}

.from-data-list-box {
  margin-bottom: 16px;
}
.from-data-list-box input {
  display: inline-block;
  width: 398px;
  max-width: 100%;
  height: 44px;
  border: 1px solid #8a8b91;
  box-sizing: border-box;
  border-radius: 2px;
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 18px;
  padding: 0 12px 0 19px;
  outline: none;
}
.from-data-list-box input::placeholder {
  color: #8a8b91;
}
.from-data-list-box input:focus {
  border-color: #25f4ee;
}
.from-data-list-box input.error {
  border-color: #fe2c55;
}
.from-data-list-box .error-message {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
  margin-bottom: 0;
  display: block;
  color: #ff4c3a;
}
.from-data-list-box .additional-info {
  margin-top: 8px;
}

.input-file-container {
  margin-bottom: 16px;
}
.input-file-container input {
  display: none;
}
.input-file-container .choose-file {
  color: #009ec8;
  cursor: pointer;
}
.input-file-container .choose-file-button {
  color: #fe2c55;
  font-family: var(--tux-web-font-body);
  font-weight: 500;
  border: 1px solid #fe2c55;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 7px 16px;
  line-height: 24px;
  font-size: 16px;
  display: inline-block;
}
.input-file-container .choose-file-button:hover {
  background-color: rgba(254, 44, 85, 0.06);
}
.input-file-container .choose-file-button:active {
  background-color: rgba(254, 44, 85, 0.12);
}
.input-file-container .files-container .file {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  background: rgba(22, 24, 35, 0.06);
  border-radius: 4px;
  min-height: 36px;
  width: 100%;
  max-width: 300px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(22, 24, 35, 0.75);
  padding: 7px 32px 7px 12px;
  box-sizing: border-box;
  position: relative;
  overflow-wrap: break-word;
}
.input-file-container .files-container span {
  position: absolute;
  right: 17px;
  top: 13px;
  width: 10px;
  height: 10px;
  background-size: contain;
  cursor: pointer;
  outline-offset: 3px;
}
.input-file-container .error-message {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
  margin-bottom: 0;
  display: block;
  color: #ff4c3a;
}
.input-file-container .additional-info {
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
  color: rgba(22, 24, 35, 0.5);
}

.from-input-radio-box {
  margin-bottom: 16px;
}
.from-input-radio-box .error-message {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
  margin-bottom: 0;
  display: block;
  color: #ff4c3a;
}
.from-input-radio-box .radio-container input {
  display: none;
}
.from-input-radio-box .radio-container label {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: block;
  line-height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.from-input-radio-box .radio-container label span {
  flex: 0 0 16px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 4px 12px 4px 0px;
  vertical-align: middle;
  border-radius: 11px;
  background: #ffffff;
  border: 1.5px solid rgba(22, 24, 35, 0.12);
  box-sizing: border-box;
  position: relative;
  align-self: flex-start;
}
.from-input-radio-box .radio-container input:checked + label span {
  border-color: #fe2c55;
}
.from-input-radio-box .radio-container input:checked + label span::before {
  content: "";
  display: block;
  width: 10.67px;
  height: 10.67px;
  position: absolute;
  left: 55%;
  top: 55%;
  margin-left: -6px;
  margin-top: -6px;
  background: #fe2c55;
  border-radius: 7px;
}
.from-input-radio-box .radio-container + .radio-container {
  margin-top: 12px;
}
.from-input-radio-box .radio-container > p {
  font-size: 14px;
  line-height: 20px;
  color: rgba(22, 24, 35, 0.5);
  margin-top: 6px;
  margin-left: 28px;
}

.from-input-text-box {
  margin-bottom: 16px;
}
.from-input-text-box input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.from-input-text-box input {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: 48px;
  border: 1.5px solid rgba(22, 24, 35, 0.12);
  box-sizing: border-box;
  border-radius: 4px;
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  padding: 6px 12px;
  outline: none;
  margin: 0px;
  caret-color: #fe2c55;
  position: relative;
  z-index: 1;
}
.from-input-text-box input::placeholder {
  color: rgba(22, 24, 35, 0.34);
}
.from-input-text-box input:hover {
  border-color: rgba(22, 24, 35, 0.5);
}
.from-input-text-box input:focus {
  border-color: rgba(22, 24, 35, 0.5);
}
.from-input-text-box input.error {
  border-color: #ff4c3a;
}
.from-input-text-box input.disabled {
  color: rgba(22, 24, 35, 0.34);
  background-color: rgba(22, 24, 35, 0.06);
  border-color: rgba(22, 24, 35, 0);
  opacity: 1;
}
.from-input-text-box .error-message {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
  margin-bottom: 0;
  display: block;
  color: #ff4c3a;
}
.from-input-text-box .additional-info {
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
  color: rgba(22, 24, 35, 0.75);
}
.from-input-text-box .input-container {
  display: flex;
  align-items: center;
  margin: 0px;
}

.from-input-text-box.form-input-text-box-no-title .form-title-box {
  display: none;
}
.from-input-text-box.form-input-text-box-no-title .input-container {
  margin-left: 27px;
}

.from-input-list-text-box {
  margin-bottom: 16px;
}
.from-input-list-text-box input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
}
.from-input-list-text-box input {
  width: 100%;
  height: 100%;
  border: none;
  line-height: 24px;
  appearance: none;
}
.from-input-list-text-box input:focus {
  outline: none;
}
.from-input-list-text-box .input-div {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: 36px;
  border: 1.5px solid rgba(22, 24, 35, 0.12);
  box-sizing: border-box;
  border-radius: 4px;
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 16px;
  padding: 0px 12px;
  outline: none;
  margin: 0px 0px 16px 0px;
  caret-color: #fe2c55;
  position: relative;
  z-index: 1;
}
.from-input-list-text-box .input-div::placeholder {
  color: rgba(22, 24, 35, 0.34);
}
.from-input-list-text-box .input-div:focus {
  border-color: rgba(22, 24, 35, 0.5);
}
.from-input-list-text-box .input-div.error {
  border-color: #ff4c3a;
}
.from-input-list-text-box .input-div.disabled {
  color: rgba(22, 24, 35, 0.34);
  background-color: rgba(22, 24, 35, 0.06);
  border-color: rgba(22, 24, 35, 0);
  opacity: 1;
}
.from-input-list-text-box .additional-info {
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
  color: rgba(22, 24, 35, 0.75);
}
.from-input-list-text-box .input-list-container {
  margin: 0px;
}
.from-input-list-text-box .close-sapn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 8px;
}
.from-input-list-text-box .close-sapn .close {
  width: 12px;
  height: 12px;
}
.from-input-list-text-box .close-sapn:hover {
  background-color: rgba(22, 24, 35, 0.06);
  cursor: pointer;
}
.from-input-list-text-box .add-div {
  margin: 0;
  font-size: 16px;
  color: #fe2c55;
  display: flex;
  cursor: pointer;
}

.form-input-textarea-box {
  margin-bottom: 16px;
  position: relative;
}
.form-input-textarea-box textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  display: block;
  border: 1.5px solid rgba(22, 24, 35, 0.12);
  box-sizing: border-box;
  border-radius: 4px;
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  padding: 12px;
  outline: none;
  caret-color: #fe2c55;
  position: relative;
  z-index: 1;
}
.form-input-textarea-box textarea::placeholder {
  color: rgba(22, 24, 35, 0.34);
}
.form-input-textarea-box textarea:hover {
  border-color: rgba(22, 24, 35, 0.5);
}
.form-input-textarea-box textarea:focus {
  border-color: rgba(22, 24, 35, 0.5);
}
.form-input-textarea-box textarea.error {
  border-color: #ff4c3a;
}
.form-input-textarea-box textarea.disabled {
  color: rgba(22, 24, 35, 0.34);
  background-color: rgba(22, 24, 35, 0.06);
  border-color: rgba(22, 24, 35, 0);
  opacity: 1;
}
.form-input-textarea-box .backbox {
  display: none;
}
.form-input-textarea-box .adapt textarea {
  position: absolute;
  top: 0;
  left: 0;
  resize: none;
  height: 100%;
}
.form-input-textarea-box .adapt .backbox {
  width: 560px;
  display: block;
  max-width: 100%;
  border: 1.5px solid rgba(22, 24, 35, 0.12);
  box-sizing: border-box;
  border-radius: 4px;
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  padding: 12px;
  padding-bottom: 24px;
  outline: none;
  caret-color: #fe2c55;
  visibility: hidden;
  display: block;
  white-space: pre-wrap;
}
.form-input-textarea-box .adapt .nextline {
  padding-bottom: 48px;
}
.form-input-textarea-box .error-message {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
  margin-bottom: 0;
  display: block;
  color: #ff4c3a;
}
.form-input-textarea-box .count {
  font-family: var(--tux-web-font-body);
  color: rgba(0, 0, 0, 0.32);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 6px;
}
.form-input-textarea-box .showmsg {
  bottom: 30px;
}

.form-star {
  margin-bottom: 20px;
}
.form-star .form-star-container {
  display: flex;
}
.form-star .form-star-item {
  margin-right: 10px;
}
.form-star .form-star-text {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}
.form-star .error-message {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
  margin-bottom: 0;
  display: block;
  color: #ff4c3a;
}

.form-select-option-box {
  margin-bottom: 16px;
  overflow: hidden;
}
.form-select-option-box .selection {
  display: block;
  overflow: hidden;
  max-width: 100%;
  height: 48px;
  border: 1.5px solid rgba(22, 24, 35, 0.12);
  box-sizing: border-box;
  border-radius: 4px;
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-weight: 400;
  font-size: 16px;
  padding: 0 14px;
  outline: none;
  position: relative;
  cursor: pointer;
}
.form-select-option-box .selection select {
  width: inherit;
  height: inherit;
  opacity: 0;
}
.form-select-option-box .selection select.error {
  border-color: #fe2c55;
}
.form-select-option-box .selection p {
  position: absolute;
  line-height: 46px;
  color: initial;
  font-size: 16px;
}
.form-select-option-box .selection p.placeholder {
  color: rgba(22, 24, 35, 0.34);
}
.form-select-option-box .selection .form-select-option-arrowDown {
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -6px;
  pointer-events: none;
  background-size: contain;
}
.form-select-option-box .selection .form-select-option-arrowDown[dir=rtl] {
  right: auto;
  /* 清除默认的 right 值 */
  left: 16px;
  /* 设置在 RTL 布局下的左侧间距 */
}
.form-select-option-box .selection::placeholder {
  color: #8a8b91;
}
.form-select-option-box .selection.error {
  border-color: #fe2c55;
}
.form-select-option-box .selection.isShowOptions, .form-select-option-box .selection:hover, .form-select-option-box .selection:focus-visible {
  border-color: rgba(22, 24, 35, 0.5);
}
.form-select-option-box .error-message {
  font-family: var(--tux-web-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 6px;
  margin-bottom: 0;
  display: block;
  color: #ff4c3a;
}
.form-select-option-box .options {
  position: absolute;
  z-index: 10;
  max-height: 300px;
  background: #fff;
  overflow-y: auto;
  border: 0.5px solid #1618231f;
  border-radius: 8px;
  box-shadow: 0px 2px 12px 0px #0000001f;
  margin-top: 5px;
}
.form-select-option-box .options .option-item {
  margin: 0;
  overflow: hidden;
}
.form-select-option-box .options .option-item span {
  width: 100%;
  display: block;
  font-size: 16px;
  line-height: 20px;
  margin: 12px;
}
.form-select-option-box .options .option-item.selected, .form-select-option-box .options .option-item.focused {
  background: #16182308;
  cursor: pointer;
  outline: none;
}

.form-button-box {
  margin-bottom: 16px;
}
.form-button-box .satisfaction-submit-button {
  width: auto;
  padding: 8px 20px;
  border-radius: 10px;
}
.form-button-box button {
  outline: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  background-color: #fe2c55;
  color: #ffffff;
  outline: revert;
  display: block;
  width: 100%;
  padding: 11px 12px;
  min-height: 48px;
  font-family: var(--tux-web-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  border-radius: 4px;
  margin-top: 48px;
}
@media (min-width: 992px) {
  .form-button-box button:hover {
    background-color: #ff7792;
  }
  .form-button-box button:active {
    border-color: rgba(0, 0, 0, 0.3);
  }
}
.form-button-box button:focus {
  outline: revert;
}
.form-button-box button.loading {
  background-color: #ff7792;
  padding: 0px 12px;
  height: 48px;
}
.form-button-box button.loading :global(.tiktok-loading) {
  margin: auto;
}
.form-button-box button.disabled {
  background-color: rgba(22, 24, 35, 0.06);
  color: rgba(22, 24, 35, 0.34);
  cursor: default;
}
.form-button-box button.satisfaction-submit-button.disabled {
  background-color: rgba(254, 44, 85, 0.4);
  color: #fff;
  cursor: default;
}
.form-button-box button.secondary {
  margin-top: 12px;
  background-color: #ffffff;
  border: 1px solid rgba(22, 24, 35, 0.12);
  color: #161823;
}
.form-button-box button.secondary.disabled {
  color: rgba(22, 24, 35, 0.34);
  cursor: default;
}

.form-loading .loading {
  background-color: #ff7792;
  padding: 0px 12px;
  height: 48px;
}

.tiktok-loading {
  display: inline-block;
  text-align: center;
  background-size: 48px;
  width: 48px;
  height: 48px;
  animation: loading steps(60, start) 1s infinite;
}

.article-popover {
  position: relative;
}
.article-popover .article-popover-toast {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translate(-50%, -100%);
  padding: 12px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  display: none;
  text-wrap: nowrap;
}
.article-popover .article-popover-arrow {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.article-popover:hover .article-popover-toast {
  display: block;
}
.article-popover:hover .article-popover-arrow {
  display: block;
}

@keyframes loading {
  100% {
    background-position-y: -2880px;
  }
}
.success-tip {
  width: auto;
  height: auto;
  padding: 70px 101px 98px;
}
.success-tip .success {
  margin-bottom: 16px;
}
.success-tip h1 {
  font-size: 33px;
  line-height: 100%;
  margin-bottom: 16px;
}

.form-groupA {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-column-gap: 20px;
}

.form-groupB {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-column-gap: 20px;
}

.form-groupC {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-column-gap: 20px;
}

.form-groupD {
  display: grid;
  grid-template-columns: repeat(1, 100%);
}

html[data-mobile^=true] .form-groupA {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  grid-column-gap: 20px;
}
html[data-mobile^=true] .form-groupB {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  grid-column-gap: 20px;
}
html[data-mobile^=true] .form-groupC {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  grid-column-gap: 20px;
}
html[data-mobile^=true] .form-groupD {
  display: grid;
  grid-template-columns: repeat(1, 100%);
}

.star-v2-container {
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.star-v2-container .star-item {
  cursor: pointer;
}
