﻿.form_bg {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background-image: url(../image/bg_marble.jpg);
  background-size: cover;
  background-position: bottom;
  background-attachment: fixed;
  color: #1e1e1e;
}

.form_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  padding: 5vh 15px;
}

.form_container .selectfield,
.form_container .selectfield .current,
.form_container input {
  min-height: 50px !important;
}

.form_container span.opt_search > input {
  min-height: 36px !important;
  position: relative;
  top: -10px;
  transition: all 0.2s ease 0s;
}

.form_container span.opt_search > input:focus {
  border-color: #b48d18;
}

.form_container .textfield_label {
  transition: 0.2s ease-in-out;
  top: 19px;
}

.form_container .textfield_input:focus,
.form_container .textfield_input:valid,
.form_container .textfield_input:autofill {
  padding-top: 20px;
}

.form_container .textfield_input:focus + .textfield_label,
.form_container .textfield_input:valid + .textfield_label,
.form_container .textfield_input:autofill + .textfield_label {
  display: block;
  top: 10px;
  font-size: 10px;
}

.form_container .textarea .textfield_label {
  top: 12px !important;
  font-size: 13px !important;
}

.form_container .textarea .textfield_input:focus + .textfield_label {
  display: none;
}

.form_container .textarea .textfield_input:focus {
  padding-top: 5px;
}

.form_container ul,
.form_container li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
}

.form_container ul {
  flex-direction: column;
  padding-top: 30px;
  gap: 10px;
}

.form_container fieldset {
  width: 100%;
}

.form_whitebox {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  background: #ffffffab;
  padding: 50px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  position: relative;
  border: 1.5px solid #fff;
}

.form_whitebox.form_center {
  align-items: center;
  text-align: center;
}

.form_title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.form_btnbox {
  display: flex;
  justify-content: center;
  padding: 20px 0 0;
}

.form_btnbox .btn_common {
  max-width: 300px;
}

.form_text {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 30px;
}

.form_text p {
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #1e1e1e;
}

.form_text a {
  text-transform: none;
  /* text-decoration: underline; */
  color: #b48d18;
  position: relative;
  padding-bottom: 0px;
  border-bottom: 1px solid #b48d18;
}

.combined_phonefield {
  display: flex;
  width: 100%;
}

.combined_phonefield .selectfield {
  width: auto;
}

.combined_phonefield .selectfield .option {
  border-radius: 4px 0 0 4px;
}

.combined_phonefield .textfield {
  width: 100%;
  margin-left: -1px;
}

.combined_phonefield .textfield input {
  border-radius: 0 4px 4px 0;
}

.form_container .textfield.datepicker .control_icon,
.form_container .textfield.pwd_masked .control_icon,
.form_container .textfield.pwd_unmask .control_icon {
  top: 16px;
}

.form_container .textfield_input:has(~ .errormsg_box[style*="display: block"]) {
  border-color: #d74f4f;
}

.form_container .textfield_input:not(:has(~ .errormsg_box[style*="display: block"])) {
  border-color: #e1e1e1;
}

.form_container .textfield_input:focus:not(:has(~ .errormsg_box[style*="display: block"])) {
  border-color: #000;
}

.combined_phonefield:has(.errormsg_box[style*="block"]) ~ .hintmsg_box {
  display: none;
}

.combined_signup_field:has(.errormsg_box[style*="block"]) ~ .hintmsg_box {
  display: none;
}

.qs-datepicker-container {
  top: 50px!important;
}

@media only screen and (max-width: 500px) {
  .form_container {
    padding: 30px 15px;
  }

  .form_whitebox {
    padding: 0 20px;
	border: none;
	background: none;
	box-shadow: none;
  }

  .form_container ul {
    padding-top: 15px;
  }

  .form_btnbox .btn_common {
    max-width: none;
  }
}

/* Lite header for mobile */
.header_lite {
  display: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 50px;
  position: sticky;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  background: #000;
}

.header_lite .header_lite_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
}

.header_lite .header_lite_logo i {
  display: block;
  width: 160px;
  height: 40px;
  background: url(../image/logo8_w.png) no-repeat center /
    contain;
  image-rendering: -webkit-optimize-contrast;
  cursor: pointer;
}

.header_lite .header_lite_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 50px;
  height: 50px;
}

.header_lite .header_lite_btnback,
.header_lite .header_lite_btnnext {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  position: relative;
  cursor: pointer;
}

.header_lite .header_lite_btnnext {
  display: none;
}

.header_lite .header_lite_btnback:after,
.header_lite .header_lite_btnnext:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(45deg);
  left: calc(50% - 4px);
}

.header_lite .header_lite_btnnext:after {
  border-width: 2px 2px 0 0;
  left: auto;
  right: calc(50% - 4px);
}

@media only screen and (max-width: 500px) {
  .header_lite {
    display: flex;
  }
}
