/* FORMS */
form.cform,
form.cform * {
  box-sizing: border-box;
}
form.cform {
  max-width: 100%;
  position: relative;
}
form.cform label {
  display: inline-block;
}
form.cform .frow {
  margin-bottom: 6px;
  margin-bottom: 0.5rem;
}
form .inp {
  display: block;
  width: 100%;
  padding: 5px 10px;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ced4da;
  background: #fff;
  outline: none !important;
  height: auto;
}
form.shadow .inp {
  border-radius: 0.25rem;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.1);
  transition: border linear 0.2s, box-shadow linear 0.2s;
}
form.cform .frow.empty .inp[required] {
  border-color: red;
}
form .but {
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  display: inline-block;
  width: auto;
  cursor: pointer;
  box-shadow: none;
}
form .but:hover {
  box-shadow: inset 0 3px 50px rgba(0, 0, 0, 0.125);
}

form.cform .frow.req > label:after {
  content: "*";
  color: #e02020;
}

form.cform.ftable .frow {
  display: flex;
}
form.cform.ftable .frow > label {
  width: 9.5rem;
  vertical-align: top;
}

form.cform.placeholder .frow {
  position: relative;
  margin-top: 10px;
  margin-top: 0.7rem;
  margin-bottom: 1.4rem;
  margin-bottom: 15px;
}
form.cform.placeholder .frow:after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 2px;
  background: #000000;
  filter: alpha(opacity=0);
  opacity: 0;
  transition: all 0.3s ease;
  transform: scaleX(0);
}
form.cform.placeholder .inp {
  border-top: none;
  border-left: none;
  border-right: none;
  background: none;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  z-index: 100;
}
form.cform.placeholder .frow label {
  position: absolute;
  z-index: 99;
  transition: all 0.3s;
  filter: alpha(opacity=50);
  opacity: 0.5;
  top: 5px;
  top: 0.375rem;
}
form.cform.placeholder .frow.focus label,
form.cform.placeholder .frow.not-empty label {
  filter: alpha(opacity=80);
  opacity: 0.8;
  top: -15px;
  top: -0.6rem;
  font-size: 80%;
  font-size: 0.8rem;
}
form.cform.placeholder .frow.focus:after,
form.cform.placeholder .frow.not-empty:after {
  transform: scaleX(1);
  filter: alpha(opacity=50);
  opacity: 0.5;
}
form.cform.placeholder .frow.req.empty:after,
form.cform.placeholder .frow.req.empty label {
  background: red;
}

form.sender:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 100000000;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  background-image: url("img/waiting.gif");
  background-position: center center;
  background-repeat: no-repeat;
  filter: alpha(opacity=50);
  opacity: 1;
}
form.response > * {
  display: none;
}
form.response .form-message-box {
  display: block;
  background: none;
  border: none;
  color: #555;
  font: 18px Verdana;
  width: 100%;
  padding: 0px;
  text-align: center;
  margin: 20px 0px;
  opacity: 1;
}
.send-ok {
  height: 120px;
  background-image: url("img/send-ok.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.send-er {
  margin: 20px 0px;
  padding: 10px;
  text-align: center;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  border-left: none;
  border-right: none;
  background: #f8cdcd;
  color: #702020;
}
.controlMsg {
  position: absolute;
  z-index: 100000000000;
  padding: 5px;
  border: 1px solid red;
  background: #f8cdcd;
  color: #702020;
}

form [class*="pic-"] > input,
form [class*="pic-"] > textarea {
  padding-left: 32px;
}
form [class*="pic-"] {
  position: relative;
}
form [class*="pic-"]:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 6px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
form .pic-user:before {
  background: url("img/pic-user.png") no-repeat;
  background-size: contain;
}
form .pic-mail:before {
  background: url("img/pic-mail.png") no-repeat;
  background-size: contain;
}
form .pic-phone:before {
  background: url("img/pic-phone.png") no-repeat;
  background-size: contain;
}

input.invalid,
textarea.invalid {
  border: 1px solid red !important;
}
input.empty,
textarea.empty {
  color: #888;
}

.g-recaptcha > div {
  margin: auto;
}

@media (max-width: 767px) {
  form.cform.ftable .frow {
    display: block;
  }
  form.cform.ftable .frow > label {
    width: auto;
    float: none;
  }
  form.cform.table .frow > label + div {
    margin-left: 0px;
  }
}
.warning-msg {
  position: absolute;
  width: 100%;
  color: #9f6000;
  background-color: #feefb3;
  border-radius: 3px;
  border: unset;
  margin-top: 0 !important;
  padding: 6px;
}
.warning-msg::before {
  content: "⚠️";
  margin-right: 6px;
}
#regBtn {
  cursor: pointer;
}
.addition-branch {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.addition-branch.show {
  display: block;
  opacity: 1;
}

.addition-branch.hide {
  opacity: 0;
}