#main {
  margin-top: 0;
}
#vertragsabschluss {
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.form-confirmation {
  display: none;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: white;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form-confirmation::before {
  content: "Erfolg!";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #0275de;
  color: white;
  text-align: center;
  line-height: 20px; /* vertikal zentrieren */
  font-weight: bold;
  z-index: 9999;
  padding: 5px;
}
.form-confirmation .btn-primary {
  width: fit-content;
  justify-self: center;
}
#vertragsabschluss .header,
#vertragsabschluss-pre .header {
  background: #0275DE;
  padding: 12px 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #ffffff;
}
@media (min-width: 768px) {
  #vertragsabschluss .header,
  #vertragsabschluss-pre .header {
    background: linear-gradient(180deg, #0275DE 0%, #1161A9 100%);
  }

}
#vertragsabschluss .header p,
#vertragsabschluss-pre .header p {
  color: #ffffff;
}
body:has(#vertragsabschluss) {
  background: none;
}
@media (min-width: 768px) {
  body:has(#vertragsabschluss) {
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.24),
        rgba(255, 255, 255, 0.24)
      ),
      linear-gradient(263.2deg, rgba(255, 255, 255, 0) 32.79%, #ffffff 52.31%),
      url("/files/content/images/vertragsabschluss/vertragsabschluss-bg.jpg");
    background-repeat: no-repeat;
    background-position: right;
    background-size: auto 100%;
  }
  #main:has(#vertragsabschluss) .inside {
    display: grid;
    flex-direction: row;
    height: 100vh;
    grid-template-columns: minmax(200px, 400px) 1fr;
    grid-template-rows: auto auto;
  }
  
  #main:has(#vertragsabschluss) .mod_form.block {
    display: flex;
    margin: 0 auto;
    grid-column: 2;
    grid-row: 1;
    overflow-y: auto;
    min-height: calc(100vh - 130px);
    width: 100%;
  }
  #vertragsabschluss {
    height: 100vh !important;
    display: grid;
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  #pages {
    display: none !important;
  }

  #vertragsabschluss .header {
    background: linear-gradient(180deg, #0275de 0%, #1161a9 100%);
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    z-index: 10;
    position: relative;
  }
}
#vertragsabschluss-form,
#pre-form form {
  padding: 24px 16px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
}
#vertragsabschluss-form .row {
  width: -webkit-fill-available;
}
#vertragsabschluss-form legend {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  color: #3b3b3b;
}
#vertragsabschluss .header ul {
  position: fixed;
  bottom: 87px;
  left: 0;
  width: 100%;
  flex-direction: row;
  height: 6px;
  gap: 0;
  z-index: 11;
  pointer-events: none;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
#vertragsabschluss .timeline-wrapper li {
  color: transparent;
  user-select: none;
  background-color: #ececec;
  width: 10%;
}
#vertragsabschluss .timeline-wrapper li.done {
  background: #0275de;
}

@media (min-width: 768px) {
  #vertragsabschluss .header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    bottom: inherit;
    height: 100%;
    pointer-events: auto;
  }
  #vertragsabschluss .header ul li {
    background-color: inherit;
    color: #ffffff;
  }
  #vertragsabschluss .header ul li.done {
    cursor: pointer;
  }
}

#vertragsabschluss h1,
#vertragsabschluss-pre h1 {
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 31px;
  color: #ffffff;
}
#vertragsabschluss-pre h1 {
  font-size: 32px;
  line-height: 42px;
}

fieldset {
  padding-bottom: 110px;
}

#pages {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  color: #ffffff;
  background: #0275de;
  padding: 5px 14px;
}
#pages-right {
  font-size: 14px;
}

p.time {
  position: relative;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

p.time::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path d="M7 15C10.3137 15 13 12.3137 13 9C13 5.68629 10.3137 3 7 3C3.68629 3 1 5.68629 1 9C1 12.3137 3.68629 15 7 15Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 6.5V10L9 11" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#mobile-vertragsabschluss-nav,
#mobile-edit-nav {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 28px 16px 24px;
  gap: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  justify-content: end;
}
@media (min-width: 768px) {
  #mobile-vertragsabschluss-nav,
  #mobile-edit-nav {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    background: transparent;
  }
}
#mobile-vertragsabschluss-nav .forward-btn {
  position: relative;
  max-width: 240px;
}
#mobile-edit-nav {
  display: none;
}
#mobile-edit-nav.active {
  display: flex;
}
/* Korrektur Header */
#mobile-edit-nav.active::before {
  content: "Korrektur";
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  color: #ffffff;
  background: #0275de;
  padding: 5px 14px;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  text-align: center;
}
#mobile-edit-nav.active::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><g clip-path='url(%23clip0_806_1427)'><path d='M7.33301 2.66663H2.66634C2.31272 2.66663 1.97358 2.8071 1.72353 3.05715C1.47348 3.3072 1.33301 3.64634 1.33301 3.99996V13.3333C1.33301 13.6869 1.47348 14.0261 1.72353 14.2761C1.97358 14.5262 2.31272 14.6666 2.66634 14.6666H11.9997C12.3533 14.6666 12.6924 14.5262 12.9425 14.2761C13.1925 14.0261 13.333 13.6869 13.333 13.3333V8.66663' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/><path d='M11.5 0.414214C11.7652 0.148997 12.1249 -3.95203e-09 12.5 0C12.8751 3.95203e-09 13.2348 0.148997 13.5 0.414214C13.7652 0.67943 13.9142 1.03914 13.9142 1.41421C13.9142 1.78929 13.7652 2.149 13.5 2.41421L7.16667 8.74755L4.5 9.41421L5.16667 6.74755L11.5 0.414214Z' stroke='white' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0_806_1427'><rect width='16' height='16' fill='white'/></clipPath></defs></svg>")
    no-repeat center center;
  background-size: contain;
  position: fixed;
  top: 8px;
  left: -51px;
  width: 100%;
}

.btn,
#mobile-vertragsabschluss-nav .btn,
#mobile-edit-nav .btn {
  padding: 9px;
  gap: 10px;
  background: #0275de;
  border-radius: 8px;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #ffffff;
  border: 1px solid #0275de;
  width: 100%;
  white-space: nowrap;
}
.btn:hover,
#mobile-vertragsabschluss-nav .btn:hover,
#mobile-edit-nav .btn:hover {
  background: #0f65b5;
  transition: background 0.3s ease;
  color: #ffffff;
}
#mobile-vertragsabschluss-nav .back-btn,
#mobile-edit-nav .back-btn {
  background: #f1f8fe;
  color: #0275de;
  border: 1px solid #f1f8fe;
}
@media (min-width: 768px) {
  #mobile-vertragsabschluss-nav {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1;
  }
  #mobile-vertragsabschluss-nav .btn {
    max-width: 150px;
  }
  /* Timeline für Desktop */

  #vertragsabschluss .timeline-wrapper {
    position: relative;
  }
  #vertragsabschluss .timeline-wrapper:before {
    content: "";
    position: absolute;
    top: 20px;
    left: 9px;
    width: 3px;
    height: calc(100% - 40px);
    background: white;
  }

  /* Timeline Liste */
  #vertragsabschluss .timeline-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Basis für jeden Punkt */
  #vertragsabschluss .timeline-wrapper li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: normal;
    position: relative;
    width: 85%;
  }

  /* Kreis */
  #vertragsabschluss .timeline-wrapper li::before {
    position: relative;
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: transparent;
    flex-shrink: 0;
  }

  /* Aktuelle Frage: grüner Punkt mit blauem Rand */
  #vertragsabschluss .timeline-wrapper li.active::before {
    width: 28px;
    height: 28px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="11" fill="white"/><circle cx="14" cy="14" r="6" fill="%230275DE"/><circle cx="14" cy="14" r="14" fill="%2364FBE7" fill-opacity="0.18"/><circle cx="14" cy="14" r="3" fill="%2347EB3B"/></svg>');
    background-size: cover;
    background-position: center;
    border: none;
    margin-left: -4px;
  }

  #vertragsabschluss .timeline-wrapper li.done {
    cursor: pointer;
    background: inherit;
  }
  #vertragsabschluss .timeline-wrapper li.done::before {
    background-color: #fff;
    border: 2px solid #fff;
  }
  #vertragsabschluss .timeline-wrapper li.done::after {
    content: "";
    position: absolute;
    left: 6px;
    top: calc(50% - 3px);
    width: 10px;
    height: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M9 1L3.5 7L1 4.27273" stroke="%230275DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
  }
  #vertragsabschluss li.done::after {
    content: "";
    position: absolute;
    left: 6px;
    top: calc(50% - 3px);
    width: 10px;
    height: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M9 1L3.5 7L1 4.27273" stroke="%230275DE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Zukünftige Frage: nur weißer Kreis Rand */
  #vertragsabschluss .timeline-wrapper li.future::before {
    background-color: #076dcc;
    border: 2px solid #fff;
    z-index: 10;
  }
  /* Timeline end */
}

/* Radio Select Felder */
.widget-radio {
  gap: 16px;
  display: flex;
  flex-direction: column;
}
/* Container des Radio-Buttons */
.form-check:has(input[type="radio"]) {
  gap: 5px;
  background: #edf4fc;
  border: 2px solid transparent;
  border-radius: 4px;
  box-sizing: border-box;
}
.form-check:has(input[type="radio"]) label {
  cursor: pointer;
  padding: 16px;
  margin-bottom: 0;
}

.form-check:has(input[type="radio"]:checked) {
  border-color: #8dc8fe;
}
.form-check-input:checked[type="radio"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9.5" fill="white" stroke="%23B1D7FB"/><circle cx="10" cy="10" r="4" fill="%233794EA"/></svg>');
  box-shadow: none !important;
  background-color: inherit;
}
.form-check.error:has(input[type="radio"]:checked) {
  border-color: #f05353;
}
.form-check.error:has(input[type="radio"]:checked) .form-check-input {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9.5" fill="white" stroke="%23F05353"/><circle cx="10" cy="10" r="4" fill="%23F05353"/></svg>');
  border-color: #f05353;
}
.form-check.error:has(input[type="radio"]:checked) .form-check-label {
  color: #f05353;
}

.widget-checkbox {
  position: relative;
}
.widget-checkbox .error-label {
  margin-top: 4px;
  position: absolute;
  top: 19px;
  left: 7px;
}

.form-check:has(input[type="radio"]) .form-check-input {
  border: 1px solid #b1d7fb;
  top: calc(50% - 13px);
  position: relative;
  left: 13px;
  display: none;
}

/* Label Styling */
.form-check:has(input[type="radio"]) .form-check-label {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #458ac9;
  padding-left: 0;
}

/* Rahmen um beide Widgets zusammen */
fieldset.kennzeichen {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}
fieldset.kennzeichen .mandatory {
  position: relative;
}
fieldset.kennzeichen .error-label {
  position: absolute;
  top: 76px;
}
fieldset.kennzeichen legend:first-of-type {
  margin-bottom: 22px;
}
fieldset.kennzeichen .col-4,
fieldset.kennzeichen .col-8 {
  background: #ffffff;
}
fieldset.kennzeichen .col-4 {
  border-top: 1px solid #bbc5cf;
  border-bottom: 1px solid #bbc5cf;
  border-left: 1px solid #bbc5cf;
  position: relative;
  padding: 12px 20px 12px 38px;
  border-radius: 8px 0 0 8px;
  background-image: url("/files/content/images/vertragsabschluss/kennzeichen.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
}
fieldset.kennzeichen .col-4::after {
  content: "";
  display: block; /* oder inline-block je nach Layout */
  width: 14px; /* Breite des SVG */
  height: 36px; /* Höhe des SVG */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='36' viewBox='0 0 14 36' fill='none'><circle cx='7' cy='7' r='7' fill='%23D9D9D9'/><circle cx='7' cy='29' r='7' fill='%23D9D9D9'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: -5px;
  top: 12px;
  z-index: 1;
}
fieldset.kennzeichen .col-8 {
  border-top: 1px solid #bbc5cf;
  border-bottom: 1px solid #bbc5cf;
  border-right: 1px solid #bbc5cf;
  display: flex;
  align-items: end;
  padding: 12px 16px 12px 16px;
  border-radius: 0 8px 8px 0;
}
fieldset.kennzeichen .col-4 label {
  position: absolute;
  top: -20px;
  left: 0;
}
.toggle-schein {
  display: block;
  color: #3794ea;
}
.widget:has(.schein-wrapper) {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 450px;
}

.schein-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateX(100%); /* außerhalb rechts starten */
  transition: transform 0.4s ease;
}

.schein-wrapper.active {
  transform: translateX(0); /* in Position */
}

.schein-wrapper.exit-left {
  transform: translateX(-100%); /* nach links raus */
}

.schein-wrapper.exit-right {
  transform: translateX(100%); /* nach rechts raus */
}

.schein-wrapper img {
  display: block;
  margin-bottom: 8px;
  width: 100%;
}

.toggle-schein {
  font-size: 14px;
  color: #3794ea;
  text-decoration: underline;
  cursor: pointer;
}

#zulassung-wrapper img,
#fin-wrapper img {
  width: 100%;
}
#zulassung-wrapper a,
#fin-wrapper a {
  text-align: center;
  margin-top: 1rem;
}
#tarif-error span {
  color: #0275de;
}
fieldsed:has(#zusammenfassung) legend {
  font-weight: 600;
  font-size: 24px;
  line-height: 31px;
  color: #3B3B3B;
}
#zusammenfassung {
  margin-top: 0;
}
#zusammenfassung p {
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #545454;
}
#zusammenfassung ul li {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #545454;
}
#zusammenfassung .summary-field-wrapper input,
#zusammenfassung .summary-field-wrapper select {
  background-color: #FAFAFA;
  color: #545454;
  padding: 10px 16px;
  border-color: #BBC5CF;
}

#zusammenfassung .summary-form-wrapper {
  display: flex;
  flex-wrap: wrap;
}

#zusammenfassung .summary-form-wrapper .half-width {
  width: calc(50% - 0.5rem); /* 2 nebeneinander, berücksichtigt gap */
}
#zusammenfassung .summary-text {
  font-weight: 500;
}
#zusammenfassung ul li a {
  text-decoration: none;
  padding-left: 16px;
  position: relative;
}

#zusammenfassung ul li a::before {
  width: 12px;
  height: 12px;
  border: none;
  content: "";
  background-color: transparent;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><g clip-path='url(%23clip0_806_1283)'><path d='M5.5 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V10C1 10.2652 1.10536 10.5196 1.29289 10.7071C1.48043 10.8946 1.73478 11 2 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V6.5' stroke='%230275DE' stroke-linecap='round' stroke-linejoin='round'/><path d='M9.25 1.25011C9.44891 1.0512 9.7187 0.939453 10 0.939453C10.2813 0.939453 10.5511 1.0512 10.75 1.25011C10.9489 1.44903 11.0607 1.71881 11.0607 2.00011C11.0607 2.28142 10.9489 2.5512 10.75 2.75011L6 7.50011L4 8.00011L4.5 6.00011L9.25 1.25011Z' stroke='%230275DE' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0_806_1283'><rect width='12' height='12' fill='white'/></clipPath></defs></svg>")
    no-repeat center center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 3px;
}
#zusammenfassung li.fullscreen-edit {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 55px 16px 24px;
  box-sizing: border-box;
  background: #ffffff;
}

#zusammenfassung li.fullscreen-edit input {
  margin-bottom: 1rem;
}

#zusammenfassung li.fullscreen-edit button {
  cursor: pointer;
  padding: 0.5rem 1rem;
}
#zusammenfassung h4 {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  color: #3b3b3b;
}
#zusammenfassung label {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #545454;
  margin-bottom: 6px;
}

ul li:has(> strong:contains("Vorname")) {
  display: inline-block;
  width: 48%;
  margin-right: 4%;
}

ul li:has(> strong:contains("Nachname")) {
  display: inline-block;
  width: 48%;
  margin-right: 0;
}

.form-confirmation {
  margin: auto;
}
.btn-ok,
.btn-cancel {
  width: auto;
  background: #ccc;
  border: none;
  width: 35px;
  height: 35px;
}
.btn-ok {
  background: #0275de;
}
#vertragsabschluss .testemonials {
  display: flex;
  gap: 16px;
  align-items: center;
}
#vertragsabschluss .testemonials img {
  max-height: 60px;
}
#vertragsabschluss .testemonials p {
  margin-bottom: 0;
}

#vertragsabschluss .chosen-tarif {
  margin-top: 40px;
  border-top: 1px solid #ffffff;
  padding-top: 40px;
}
@media (max-width: 767px) {
  #vertragsabschluss .header p.time,
  #vertragsabschluss .header p.chosen-tarif {
    margin-right: 1rem; 
    margin: 0;
    border-top: none;
    padding-top: 0;
    width: 100%;
  }
  #vertragsabschluss .header p.chosen-tarif {
    text-align: right;
  }
}


#vertragsabschluss .chosen-tarif span {
  font-size: 14px;
  display: block;
}

#vertragsabschluss-pre {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  z-index: 10;
}
@media (min-width: 768px) {
  #vertragsabschluss-pre {
    height: 100vh !important;
  }
}
#pre-form ul {
  padding-left: 0;
}
#vertragsabschluss-pre .header p {
  margin-bottom: 0;
}
#vertragsabschluss-pre .header > p {
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  #vertragsabschluss-pre .header > p {
    margin-bottom: 0;
  }
}

#vertragsabschluss-pre .portraits img {
  max-width: 100px;
}
#vertragsabschluss-pre .portraits span {
  color: #ffffff;
}
#vertragsabschluss-pre .header div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: .5rem;
}
@media (min-width: 768px) {
  #vertragsabschluss-pre .header div {
    margin-bottom: 16px;
  }
}
  #vertragsabschluss-pre .header div {
}
#vertragsabschluss-pre div.portraits {
  display: none;
  border-bottom: 1px solid #ffffff;
  padding: 34px 0;
}
@media (min-width: 768px) {
  #vertragsabschluss-pre div.portraits {
    display: flex;
    margin-bottom: 24px;
  }
}
#pre-form {
  width: 100%;
  z-index: 10;
}

#preForm .widget.widget-text {
  display: inline-flex;
  flex-direction: column;
  width: calc(33.33% - 16px);
  margin-right: 19px;
  box-sizing: border-box;
  margin-bottom: 8px;
}

#preForm .widget.widget-text:nth-of-type(4) {
  margin-right: 0;
}
@media (max-width: 768px) {
  #preForm .widget.widget-text {
    width: 100%;
    margin-right: 0;
  }
}