.moj-front {
  float:left;
  width:100%;
  padding:40px 20px;
  background:var(--moj-strip,#fff);
  box-sizing:border-box
}

.moj-front * {
  box-sizing:border-box
}

.moj-front__inner {
  width:100%;
  max-width:var(--moj-width,1200px);
  margin:0 auto
}

.moj-front__intro {
  margin:0 0 22px
}

.moj-front__outro {
  margin:22px 0 0
}

.moj-form {
  display:grid;
  gap:20px;
  padding:var(--moj-padding,30px);
  border-radius:var(--moj-radius,0);
  background:var(--moj-form,#fff)
}

.moj-form fieldset {
  min-width:0;
  margin:0;
  padding:0;
  border:0
}

.moj-form legend {
  width:100%;
  margin:0 0 14px;
  padding:0;
  color:var(--moj-label,#8a8f93);
  font-size:20px;
  font-weight:750
}

.moj-form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
  align-items:end
}

.moj-row {
  display:block;
  margin:0
}

.moj-row>span {
  display:block;
  margin:0 0 8px 40px;
  color:var(--moj-label,#8a8f93);
  font-size:20px;
  font-weight:500
}

.moj-row input,.moj-row textarea {
  display:block;
  width:100%;
  min-width:0;
  border:var(--moj-border-width,1px) solid var(--moj-border,#d4d4d4);
  border-radius:10px;
  background:var(--moj-field,#d2c5c2);
  color:var(--moj-field-text,#2f3f42);
  padding:0 16px;
  font:inherit;
  box-shadow:none;
  outline:none
}

.moj-row input {
  height:56px
}

.moj-row textarea {
  min-height:130px;
  padding-top:14px;
  padding-bottom:14px;
  background:var(--moj-textarea,var(--moj-field,#d2c5c2));
  resize:vertical
}

.moj-row+ .moj-row {
  margin-top:14px
}

.moj-choices {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 18px
}

.moj-choices label {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0;
  color:var(--moj-label,#8a8f93);
  font-weight:600;
  cursor:pointer
}

.moj-choices input {
  width:auto;
  height:auto;
  margin:4px 0 0;
  accent-color:var(--moj-button,#3d7d84)
}

.moj-choices a {
  color:inherit;
  text-decoration:underline
}

.moj-choices--legal {
  grid-template-columns:1fr
}

.moj-group-other {
  margin-top:16px!important
}

.moj-logo-drop {
  display:flex;
  position:relative;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:180px;
  padding:24px;
  border:2px dashed var(--moj-border,#d4d4d4);
  border-radius:10px;
  color:var(--moj-label,#8a8f93);
  text-align:center;
  cursor:pointer
}

.moj-logo-drop input {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer
}

.moj-logo-drop small {
  display:block;
  margin-top:6px
}

.moj-logo-drop img {
  display:block;
  max-width:min(400px,100%);
  max-height:240px;
  margin-top:16px;
  object-fit:contain
}

.moj-help {
  margin:0 0 12px;
  color:var(--moj-label,#8a8f93)
}

.moj-form-actions {
  text-align:center
}

.moj-form-actions button {
  min-width:280px;
  min-height:56px;
  padding:0 24px;
  border:0;
  border-radius:10px;
  background:var(--moj-button,#3d7d84);
  color:var(--moj-button-text,#fff);
  font:inherit;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  transition:background-color .2s,color .2s
}

.moj-form-actions button:hover {
  background:var(--moj-button-hover,#2f666c);
  color:var(--moj-button-hover-text,#fff)
}

.moj-errors,.moj-success {
  margin:0 0 20px;
  padding:14px 16px;
  border-radius:10px
}

.moj-errors {
  border:1px solid #f3bcbc;
  background:#fdecec;
  color:#7d1b1b
}

.moj-errors ul {
  margin:7px 0 0;
  padding-left:20px
}

.moj-success {
  border:1px solid #b8e1c0;
  background:#ebf7ee;
  color:#24552c
}

.moj-hp {
  position:absolute;
  left:-9999px;
  top:-9999px;
  opacity:0;
  pointer-events:none
}

.moj-style--helder .moj-row>span {
  margin-left:0;
  font-size:14px;
  font-weight:750;
  letter-spacing:.04em
}

.moj-style--helder .moj-row input,.moj-style--helder .moj-row textarea {
  border-radius:7px
}

.moj-style--zand .moj-row>span {
  margin-left:18px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}

.moj-style--zand .moj-row input {
  border-radius:999px;
  padding-inline:24px
}

.moj-style--zand .moj-row textarea {
  border-radius:28px;
  padding:22px 24px
}

.moj-style--zand .moj-form-actions {
  text-align:left
}

.moj-style--zand .moj-form-actions button {
  border-radius:999px
}

.moj-style--noordzee .moj-form {
  border-left:8px solid var(--moj-button)
}

.moj-style--noordzee .moj-row input,.moj-style--noordzee .moj-row textarea {
  border-radius:2px 14px 2px 14px
}

.moj-style--salie .moj-row input,.moj-style--salie .moj-row textarea,.moj-style--salie .moj-form-actions button {
  border-radius:6px
}

.moj-style--lavendel .moj-form {
  border-radius:max(var(--moj-radius),24px)
}

.moj-style--lavendel .moj-row input,.moj-style--lavendel .moj-row textarea,.moj-style--lavendel .moj-form-actions button {
  border-radius:999px
}

.moj-style--lavendel .moj-row textarea {
  border-radius:26px
}

.moj-style--koraal .moj-form {
  border-radius:max(var(--moj-radius),16px)
}

.moj-style--koraal .moj-row input,.moj-style--koraal .moj-row textarea {
  border-radius:12px 3px 12px 3px
}

.moj-style--editorial .moj-row input,.moj-style--editorial .moj-row textarea {
  border-width:0 0 var(--moj-border-width);
  border-radius:0;
  background:transparent
}

.moj-style--editorial .moj-form-actions {
  text-align:right
}

.moj-style--editorial .moj-form-actions button {
  border-radius:0
}

.moj-style--citrus .moj-row input,.moj-style--citrus .moj-row textarea,.moj-style--citrus .moj-form-actions button {
  border-width:max(2px,var(--moj-border-width));
  border-radius:8px 2px 8px 2px;
  box-shadow:4px 4px 0 var(--moj-border)
}

.moj-style--ppmh .moj-form-grid {
  gap:18px 24px
}

.moj-style--ppmh .moj-row>span {
  margin-left:0
}

.moj-style--ppmh .moj-form-actions {
  text-align:right
}

.moj-style--ppmh .moj-form-actions button {
  border-radius:4px
}

.moj-style--grafiet .moj-form {
  border:2px solid var(--moj-border);
  border-radius:0
}

.moj-style--grafiet .moj-row {
  display:grid;
  grid-template-columns:minmax(130px,30%) 1fr;
  align-items:start
}

.moj-style--grafiet .moj-row>span {
  margin:18px 12px 0 0
}

.moj-style--grafiet .moj-row input,.moj-style--grafiet .moj-row textarea {
  border-radius:0
}

@media(max-width:700px) {
  .moj-front {
    padding:25px 15px
  }

  .moj-form {
    padding:min(var(--moj-padding),22px)
  }

  .moj-form-grid,.moj-choices {
    grid-template-columns:1fr
  }

  .moj-style--grafiet .moj-row {
    display:block
  }

  .moj-style--grafiet .moj-row>span {
    margin:0 0 8px
  }

  .moj-form-actions button {
    width:100%;
    min-width:0
  }

}