/* ---------------------------header--------------------------- */
.form-header ~ div {
  margin-top: 0 !important;
}

.form-header {
  background: url(../images/form-bg.png) no-repeat center/cover;
}

.form-title p {
  color: var(--bs-white);
  font-size: var(--fs-24);
  font-weight: 700;
}

.form-title h1 {
  color: var(--bs-white);
  font-size: var(--fs-48);
  font-weight: 700;
}

.form-step > .row {
  border: 0.1rem solid var(--bs-white);
  border-radius: 2rem;
}

.form-header form label {
  color: var(--bs-white);
  font-size: var(--fs-16);
  font-weight: 700;
  margin-bottom: 2rem;
}

.form-header form input,
.form-header form textarea,
.form-header form select {
  background-color: var(--bs-white-100);
  border: 0.1rem solid var(--bs-white);
  border-radius: 1.2rem;
  padding: 1.5rem;
  font-size: var(--fs-16);
  font-weight: 400;
  color: var(--bs-black);
  outline: none;
  resize: none;
}

.form-header form input:focus,
.form-header form textarea:focus,
.form-header form select:focus {
  background-color: var(--bs-white-100) !important;
  outline: none;
  box-shadow: none;
  border: 0.1rem solid var(--bs-white);
  color: var(--bs-black);
}

.line {
  width: 0.1rem;
  height: 1.8rem;
  background-color: var(--bs-black);
}

.sa-flag p {
  color: var(--bs-black);
  font-size: var(--fs-16);
  font-weight: 700;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background-color: var(--bs-white-100) !important;
  border: 0.1rem solid var(--bs-white);
  border-radius: 1.2rem;
  padding: 0 0 0 1rem;
  background: transparent;
}

.input-wrapper input,
.input-wrapper select {
  border: none !important;
  flex: 1;
}

.btn-next,
.btn-submit {
  background-color: var(--bs-white);
  color: var(--bs-green);
  font-size: var(--fs-20);
  font-weight: 700;
  border-radius: 1.2rem;
  padding: 1rem 6rem;
  border: none;
}

.btn-previous {
  background-color: transparent;
  color: var(--bs-white);
  font-size: var(--fs-20);
  font-weight: 700;
  border-radius: 1.2rem;
  padding: 1rem 6rem;
  border: 0.1rem solid var(--bs-white);
}

.load-file {
  background-color: var(--bs-green) !important;
  border-radius: 0.8rem;
  padding: 0.5rem 2.3rem !important;
  border: none;
  cursor: pointer;
  color: var(--bs-white) !important;
  font-size: var(--fs-16) !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.hide {
  display: none;
  pointer-events: none;
}

.attachment-img {
  cursor: pointer;
}

.input-wrapper input[type="file"] {
  flex: 0 !important;
}

.file-placeholder {
  font-size: var(--fs-16);
  color: var(--bs-gray-400) !important;
  font-weight: 400;
  margin-right: 1rem;
}

.input-error {
  border-color: var(--bs-danger) !important;
}

option {
  background: #fff;
  color: #333;
  padding: 1rem;
}

.radios label,
.input-wrapper label {
  margin-bottom: 0 !important;
}

.imag-conditions {
  font-weight: 400;
  font-size: var(--fs-16);
  color: var(--bs-gray-400);
  line-height: 2;
}

.link-terms {
  font-weight: 400;
  font-size: var(--fs-16);
  color: var(--bs-white);
}

/* ------------------modal--------------------- */
.modal-content {
  background: var(--bs-white);
  border-radius: 1.3rem;
  border: none;
}

.modal-backdrop.show {
  opacity: 0.6;
}

.btn-back-to-home {
  background-color: var(--bs-green);
  color: var(--bs-white);
  font-size: var(--fs-16);
  font-weight: 700;
  border-radius: 5.5rem;
  padding: 0.9rem 7rem;
  border: none;
  cursor: pointer;
  display: block;
}

.btn-back-to-home:hover {
  background-color: var(--bs-teal);
}

.success-mark {
  background-color: var(--bs-green);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  margin: 0 auto 2rem auto;
}

.modal-content h3 {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--bs-green);
  line-height: 1.5;
}

.modal-content p {
  font-size: var(--fs-16);
  font-weight: 400;
  color: var(--bs-black);
  line-height: 1.5;
  text-align: center;
}

/* -----------------------branch location--------------------- */
.branch-map {
  width: 100% !important;
  display: block;
  height: 50rem !important;
  border-radius: 1.2rem;
}

.btn-location {
  border: 1px solid var(--bs-white);
  background-color: var(--bs-white-100);
  border-radius: 1.2rem;
  padding: 1.8rem;
  color: var(--bs-black);
  font-weight: 700;
  font-size: var(--fs-16);
}

.add-branch{
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--bs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.add-branch:hover{
  background-color: var(--bs-white-100);
}

.add-branch-wrapper{
  font-size: var(--fs-16);
  color: var(--bs-white);
  font-weight: 700;
}