#contact-form .form-title {
  font-size: var(--clFontSizeMediumPlusPlus);
  margin: 0;
  color: white;
}

#contact-form {
  background-color: #1E9BAE;
  width: 70%;
  padding: 8%;
  z-index: 2;
  max-height: 700px;
  border-radius: 7px;
  margin: auto;
}

#contact-form .form-container {
  display: flex;
  overflow: hidden;
}

#contact-form input:not([type=submit]), #contact-form textarea, #contact-form select {
  font-size: var(--clFontSizeSmallPlus);
  color: #78798D;
  padding: 17px;
  border: 1px solid #cbccd5;
  font-family: 'Poppins';
}

#contact-form label, #filename_contact, #filename_quote {
  font-size: var(--clFontSizeSmall);
}

#contact-form .form-title, #contact-form .file-upload label.custom-file-upload {
  font-weight: 500;
}

#contact-form label {
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0;
  line-height: 200%;
  color: white;
}

#contact-form span {
  font-size: var(--clFontSizeSmall);
  color: white;
}

#contact-form textarea {
  width: 100%;
  max-width: -webkit-fill-available;
  max-height: 120px;
}

#contact-form select {
  appearance: none;
  width: 88%;
}

#contact-form select option[value="Kataszteri szolgáltatások"], #contact-form select option[value="Mérnökgeodéziai szolgáltatások"] {
  border-bottom: 1px solid black;
  height: 50px;
  font-weight: 700;
}

#contact-form span.wpcf7-form-control-wrap[data-name="menu-681"]:after {
  content: '>';
  font-size: var(--clFontSizeNormal);
  color: #78798D;
  background: white;
  transform: rotate(90deg);
  padding: 0 3%;
  position: absolute;
  pointer-events: none;
  height: 100%;
  top: 50%;
  right: 2%;
  font-weight: bold;
  transform: translatey(-50%) rotate(90deg);
}

#contact-form input:not([type=submit]):focus, #contact-form textarea:focus, #contact-form select:focus {
  border: 1px solid #FF9600;
  outline: none !important;
}

#contact-form .form-container input, #contact-form .form-container select {
  background: white;
  width: -webkit-fill-available;
  line-height: 25px;
  box-sizing: border-box;
}

#contact-form input:not([type=submit]), #contact-form select {
  border-radius: 3px;
}

#contact-form .input-item {
  min-height: min(9vw,110px);
}

#contact-form input:not([type=submit])::placeholder {
  opacity: 0.5;
}

#contact-form input[type=file] {
  display: none;
}

#contact-form .file-upload label.custom-file-upload {
  display: inline-block;
  font-family: Mulish;
  font-size: var(--clFontSizeMedium);
  width: fit-content;
  cursor: pointer;
  text-transform: none;
  background-color: #29c2de;
  background-image: url(/wp-content/uploads/2022/06/attachment.svg);
  background-size: 15px;
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 16px;
  border-radius: 7px;
  line-height: normal;
  letter-spacing: normal;
  padding: min(1vw,16px) min(2vw,28px) min(1vw,16px) min(3vw,42px);
}

#contact-form input[type=submit] {
  color: white;
  width: auto;
  background-color: #2056AC;
  cursor: pointer;
  border: none;
  border-radius: 35px;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(198, 228, 246, 0.05);
  margin-bottom: 0;
}

#contact-form .file-upload {
  text-align: left;
  width: -webkit-fill-available;
  display: inline-block;
}

#contact-form .file-upload p {
  margin-bottom: 0;
}

#contact-form #filename_contact, #contact-form #filename_quote {
  padding-left: 1.5%;
  color: cornsilk;
  opacity: 0;
  transition: 300ms;
}

#contact-form .city {
  display: none;
  opacity: 0;
  transition: 300ms;
}

#contact-form .wpcf7-not-valid-tip, #contact-form .wpcf7 form.invalid .wpcf7-response-output, 
#contact-form .wpcf7 form.sent .wpcf7-response-output,
#contact-form .wpcf7 form.unaccepted .wpcf7-response-output, 
#contact-form .wpcf7 form.payment-required .wpcf7-response-output {
  color: #ffff00 !important;
  border: none !important;
  height: 0;
  font-size: var(--clFontSizeSmall);
}

.wpcf7-not-valid-tip, #contact-form .wpcf7 form.invalid .wpcf7-response-output,
#contact-form .wpcf7 form.sent .wpcf7-response-output {
  height: 100%
}

.wpcf7 form .wpcf7-response-output {
  margin: 0 !important;
  padding: 0 !important;
}

.wpcf7-spinner {
  background: transparent !important;
  position: absolute;
  margin: auto -20px;
  top: 50%;
  transform: translateY(-50%);
}

#contact-form .personal-data.left {
  padding-right: min(0.5vw,50px);
}

#contact-form .city {
  padding-left: min(0.5vw,50px);
}

#contact-form .personal-data.left, #contact-form .personal-data.right, #contact-form .city {
  width: 100%;
  overflow: hidden;
}

#contact-form .message p {
  width: 100%
}

#contact-form .submit-container {
  display: flex;
}

#contact-form .form-submit {
  float: right;
  position: relative;
  margin: auto;
  margin-bottom: 0px;
  width: 40%;
  text-align: center;
}

#contact-form .form-submit p {
  margin-bottom: 0;
}

#contact-form .wpcf7 form.invalid .wpcf7-response-output, #contact-form .wpcf7 form.sent .wpcf7-response-output {
  float: none;
  top: 10px;
  position: relative;
  text-align: center;
  border: 0px !important;
}

.wpcf7-spinner {
  margin: 0;
}


.autocomplete {
  position: relative;
}

.autocomplete-items {
  position: absolute;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  color: #78798D;
  max-height: 100px;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
  border-left: 1px solid #d4d4d4; 
  border-right: 1px solid #d4d4d4; 
}

.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

#contact-form.quote {
  padding: 2%;
  top: 15%;
  left: 50%;
  position: relative;
  width: 100%;
}

#contact-form.quote.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 101;
  transform: translate(-50%, -50%);
  max-width: min(90%,1000px);
  max-height: 90%;
  justify-content: center;
  overflow-y: auto;
  z-index: 9999;
  transition: 800ms;
  opacity: 0;
  visibility: hidden;
  display: block;
}

#contact-form.quote .contact-close {
  font-size: var(--clFontSizeMedium);
  font-weight: 800;
  float: right;
  color: white;
  position: absolute;
  top: 3%;
  right: 3%;
  cursor: pointer;
  text-shadow: 0px 0px 2px black;
}

#contact-form.job {
  max-height: 100%;
  /*padding: 12% 4%;*/
  width: auto;
}

#contact-form.job .personal-data.left {
  padding-right: 0;
}

#contact-form.job .submit-container {
  display: flex;
  flex-direction: column;
}

#contact-form.job .file-upload {
  width: auto;
}

#contact-form.job .form-submit {
  margin: auto;
  margin-top: 3.5%;
  float: none;
  text-align: center;
}

#contact-form.job .form-submit p input {
  margin-top: 0;
}

#contact-form .mc4wp-checkbox label {
  font-weight: 100;
  text-transform: none;
  letter-spacing: 1px;
}

#contact-form .mc4wp-checkbox label input, #contact-form .mc4wp-checkbox label span {
  vertical-align: middle;
  display: inline-block;
  padding-left: 1.5%;
}

.wpcf7-form.submitting button, .wpcf7-form.resetting button, .wpcf7-form.sent button,
#contact-form .wpcf7-form.submitting input[type=submit], #contact-form .wpcf7-form.resetting input[type=submit], #contact-form .wpcf7-form.sent input[type=submit] {
  background-color: gray;
  cursor: default;
  pointer-events: none;
  touch-action: none;
}

@media only screen and (max-width: 1920px) {
  #contact-form input:not([type=submit]), #contact-form textarea, #contact-form select {
    padding: 0.8925vw;
  }
}

@media only screen and (max-width: 1440px) {
  #filename_contact, #filename_quote {
    letter-spacing: 0.07vw;
  }
  
  #contact-form label {
    letter-spacing: 0.17vw;
  }
}

@media only screen and (max-width: 1280px) {
  #contact-form .file-upload label.custom-file-upload {
    padding-left: max(4vw,40px);
  }
}

@media only screen and (max-width: 1024px) {
  #filename_contact, #filename_quote {
    letter-spacing: 0.2vw;
  }
  
  #contact-form {
    width: 80%;
    padding: 4%;
  }
  
  #contact-form .input-item {
    min-height: 10vw;
  }
  
  #contact-form.job {
    width: auto;
  }
}

@media only screen and (max-width: 900px) {
  #contact-form .input-item {
    min-height: 11vw;
  }
  
  #contact-form .file-upload label.custom-file-upload {
    padding-top: max(1.2vw,10px);
    padding-bottom: max(1.2vw,10px);
    padding-right:    max(2.4vw,20px);
  }
}

@media only screen and (max-width: 800px) {
  #contact-form-container {
    padding-bottom: 7%;
  }
  
  #contact-form .personal-data.left, #contact-form .personal-data.right, #contact-form .city {
    width: 100%;
    padding: 0;
  }
  
  #contact-form {
    max-height: initial;
    padding: 7% 3.5%;
  }
  
  #contact-form span.menu-681:after {
    padding: 0 2%;
  }
  
  #contact-form .form-container {
    display: block;
  }
  
  #contact-form .input-item {
    margin-bottom: max(1vw,15px);
  }
  
  #contact-form .file-upload label.custom-file-upload {
    background-size: 2vw;
  }
  
  #contact-form .file-upload {
    width: 100%;
  }
  
  #contact-form .form-submit {
    float: initial;
    margin-top: 7%;
    text-align: center;
    width: 100%;
  }
  
  #contact-form .message {
    text-align: left;
  }
  
  #contact-form.quote.modal {
    border-radius: 0;
  }
  
  #contact-form.quote .contact-close {
    top: 3%;
    right: 4%;
  }
  
  .autocomplete-items {
    max-height: 330px;
    padding-bottom: 50px;
  }
  
  #contact-form.quote.modal {
    width: 85%;
    max-height: 100%;
    top: 0px;
    transform: translate(-50%, 0px);
    height: -webkit-fill-available;
    padding: 2% 8% 2% 8%;
  }
  
  #contact-form span.wpcf7-form-control-wrap[data-name="menu-681"]:after {
    padding: 0 2%;
    left: 93%;
  }
  
  #contact-form .submit-container {
    flex-direction: column;
  }
}

@media only screen and (max-width: 600px) {
  #contact-form.quote .contact-close {
    top: 2%;
  }
  
  #contact-form {
    top: 145vw;
    width: 85%;
  }
  
  #contact-form .file-upload label.custom-file-upload {
    padding-top: 2.8vw;
    padding-bottom: 2.8vw;
  }
  
  #contact-form .file-upload label.custom-file-upload {
    background-size: 2.5vw;
  }
}

@media only screen and (max-width: 500px) {
  #contact-form span.wpcf7-form-control-wrap[data-name="menu-681"]:after {
    left: 90%;
  }
}