/* 表单基本样式 */

.form-body .form-element{margin-bottom: 16px;position: relative;}
.form-body .form-element .input-container {position: relative;}
.form-body .form-element .input-container .remind{display: none;}
.form-body .form-element .input-container .remind{color: var(--v-black);font-size: var(--fs-14);}

.form-body .form-element .input-label{position: absolute;top: 18px;left: 15px;transition: all .2s linear;z-index: 9;pointer-events:none;}
.form-body .form-element .input-label sup{color: var(--v-red-dark);font-size: 18px;display: inline-block;transform: translateY(10px) translateX(2px);}
.form-body .form-element .input-container input{width: 100%;height: 61px;font-size: 16px;border: none;outline: none;border-radius: 8px;background-color: var(--v-grey-light2);padding-left: 15px;padding-top: 17px;transition: all .2s linear;padding-right: 64px;}
.form-body .form-element .input-container input:focus::-webkit-contacts-auto-fill-button{opacity: 0;}
.form-body .form-element .input-container input::-webkit-credentials-auto-fill-button {display: none !important;visibility: hidden;pointer-events: none;position: absolute; right: 0;}
.form-body .form-element .input-container input:hover{background-color: #ECECEC;}
.form-body .form-element .input-container::after{content: '';display: block;width: 0;height: 1px;transition: all 0.4s;background-color: var(--v-orange);position: absolute;top: 61px;left: 0px;}

.form-body .form-element .input-container .icons-box{display: flex;justify-content: flex-end;align-items: center;width: 56px;height: 26px;position: absolute;top: 16px;right: 16px;}
.form-body .form-element .input-container .error-icon{display: none;width: 26px;height: 26px;}
.form-body .form-element .input-container .del-icon{display: none;width: 26px;height: 26px;}

.form-body .form-element.password .input-container .icons-box,
.form-body .form-element.country .input-container .icons-box,
.form-body .form-element.province .input-container .icons-box{right: 35px;}
.form-body .form-element.country .arrow-down,
.form-body .form-element.province .arrow-down{position: absolute;top: 16px;right: 4px;pointer-events: none;}
.form-body .form-element .input-container #changePassword{position: absolute;right: 4px;top: 16px;width: 30px;height: 30px;display: flex;justify-content: space-around;align-items: center;}
.form-body .form-element .input-container #changePassword img{transition: all .15s linear;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

.form-body .form-element .province-code{display: none;border-radius: 8px;overflow: hidden;padding: 12px;height: 309px;position: absolute;top: 62px;width: 100%;box-shadow: 0px 10px 14px #0000005E;background-color: var(--v-white);z-index: 999;}
.form-body .form-element .province-code .province-results{height: 305px;overflow-y: scroll;padding-bottom: 20px;}
.form-body .form-element .province-code .province-results::-webkit-scrollbar-thumb{background-color: rgba(227, 87, 40, 1);width: 4px;}
.form-body .form-element .province-code .province-results .province-results-option{padding-left: 8px;cursor: pointer;font-size: var(--fs-16);color: var(--v-black);height: 35px;line-height: 35px;}
.form-body .form-element .province-code .province-results .province-results-option:hover{background-color: var(--v-grey-light1);}
.form-body .form-element .province-code .province-results .province-results-option.active{background-color: var(--v-grey-light1);}


.form-body .form-element .input-container .options{display: none;border-radius: 8px;overflow: hidden;padding: 12px;height: auto;position: absolute;top: 62px;width: 100%;box-shadow: 0px 10px 14px #0000005E;background-color: var(--v-white);z-index: 999;}
.form-body .form-element .input-container .options li{cursor: pointer;padding-left: 8px;cursor: pointer;font-size: var(--fs-16);color: var(--v-black);height: 35px;line-height: 35px;}
.form-body .form-element .input-container .options li.active,
.form-body .form-element .input-container .options li:hover{background-color: var(--v-grey-light1);}

.form-body .form-element .arrow-down {position: absolute;top: 16px;right: 4px;pointer-events: none;}

.error{margin-bottom: 0px;display: none;}
.form-body .hasInner .input-label,
.form-body .hasFouns .input-label{top: 11px;font-size: 12px;}
.form-body .hasInner .input-container .del-icon{display: block !important;}
.form-body .hasFouns .input-label{color:var(--v-orange);}
.form-body .hasFouns .input-container::after{width: 100%;}
.form-body .hasBorder .input-container input{background-color:var(--v-grey-light4);border-radius: 8px 8px 0px 0px;}
.form-body .hasError .input-container .error{display: block;color: #a71e00;}
.form-body .hasError .input-container .error-icon{display: block;}
.form-body .hasError .input-container input{background-color: rgba(167, 30, 0, .1);}
.form-body .hasError .input-label{color: #a71e00;}


.form-body .agreeConditionBox{display: flex;align-items: flex-start;margin-bottom: 12px;flex-direction: column;}
.form-body .agreeConditionBox label{padding-left: 34px;position: relative;font-size: var(--fs-16);color: var(--v-black);}
.form-body .agreeConditionBox label a{text-decoration: underline;}
.form-body .agreeConditionBox label::before{content: '';width: 24px;height: 24px;border-radius: 3px;background-color: var(--v-grey-light1);position: absolute;left: 0px;top: -2px;z-index: 99;transition: all .2s linear;}
.form-body .agreeConditionBox label:hover:before{background-color: #DDDEE2;}
.form-body .agreeConditionBox input[type="checkbox"]:checked ~ label::before{content: url(/wp-content/themes/vantage/images/check-mark.svg?v=1);background-color: var(--v-orange);}
.form-body .agreeConditionBox.hasError .error{display: block;margin-bottom: 0px;color: #a71e00;}

.form-body #sub-open{border: none;outline: none;width: 260px;box-shadow: 1px 7px 16px 0px rgb(3 72 84 / 37%);}
.form-body #sub-open::after{width: 1.8rem;height: 1.8rem;}