/* Microsoft Dynamics Formulare marketingForm */

.html20 .textFormFieldBlock label {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 3px;
    font-family: var(--text-font-family);
    font-size: var(--text-font-siz, 18px);
}

.html20 .textFormFieldBlock input {
    height: 48px;
    border: 0;
    border-radius: 4px;
    font-size: 16px;
    padding: 14px 0 14px 10px;
    width: 100%;
    background-color: var(--accent-color-light-grey);
}

.html20 table.outer form table tbody tr th{
    padding: 0;
}

.html20 table.outer > tbody > tr > th {
    padding: 0 !important;
}

.html20 table.inner table div{
    padding: 2rem;
}

.html20 form.marketingForm table th.inner > div{
    margin-top: 2rem;
}

.html20 form.marketingForm {
    text-align: left;
}

.html20 form.marketingForm div {
    max-width: 100%;
}


/* input, select, textarea */

.html20 form.marketingForm :where(
    input,
    select,
    textarea,
) {
    background-color: var(--accent-color-light-grey);
    border: 0;
    border-radius: 4px;
    width: 100%;
    font-size: 16px;
    padding: 14px 0 14px 10px;
  }
.html20 form.marketingForm :where(
    input,
    select,
    textarea,
):focus {
    outline-color: var(--accent-color);
}

.html20 form.marketingForm :where(
    input, select
) {
    height: 48px;
}


/* checkbox */

.html20 form.marketingForm input[type="checkbox"]{
    display: none;
}

.html20 form.marketingForm input[type="checkbox"] + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 24px;
  line-height: 1.3;
  padding-left:70px;
  position: relative;
  margin-top: -30px;
}

.html20 form.marketingForm input[type="checkbox"] + label:before {
  width: 60px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}

.html20 form.marketingForm input[type="checkbox"] + label:after {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 10;
}

.html20 form.marketingForm input[type="checkbox"]:checked + label:before {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #2b8718;
}

.html20 form.marketingForm input[type="checkbox"]:checked + label:after {
  margin: 0 0 0 30px;
}


/* label, textarea, checkbox */

.html20 form.marketingForm label {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 3px;
}

.html20 form.marketingForm textarea {
    height: 215px;
}


/* submitButton */

.html20 form.marketingForm .submitButton {
    font-size: 16px;
    font-weight: 500;
    background-color: var(--button-background-color, var(--accent-color));
    border: 2px solid var(--button-border-color, var(--accent-color));
    border-radius: var(--button-border-radius);
    color: var(--button-text-color, var(--text-color-accent));
    padding: 0.3em 2.9em;
    text-align: center;
    margin: 2px;
}

.html20 form.marketingForm .submitButton:hover {
    background-color: var(--button-background-color-hover, var(--accent-color));
    border-color: var(--button-border-color-hover, var(--accent-color));
    box-shadow: 0 0 0 1px var(--button-border-color-hover, var(--accent-color));
    color: var(--button-text-color-hover, var(--text-color-accent));
}

.html20 form.marketingForm .submitButton:active {
    background-color: var(--button-background-color-active);
    border-color: var(--button-border-color-active);
    box-shadow: 0 0 0 1px var(--button-border-color-active);
    color: var(--button-text-color-active);
}


/* ...FormFieldBlocks */

.html20 form.marketingForm .textFormFieldBlock :where(input, select, textarea),
.html20 form.marketingForm .dateTimeFormFieldBlock :where(input, select, textarea),
.html20 form.marketingForm .twoOptionFormFieldBlock :where(input, select, textarea),
.html20 form.marketingForm .optionSetFormFieldBlock :where(input, select, textarea),
.html20 form.marketingForm .multiOptionSetFormFieldBlock :where(input, select, textarea),
.html20 form.marketingForm .lookupFormFieldBlock :where(input, select, textarea),
.html20 form.marketingForm .phoneFormFieldBlock :where(input, select, textarea)
{
    background-color: var(--accent-color-light-grey);
    border: 0;
    border-radius: 4px;
    width: 100%;
    font-size: 16px;
    padding: 14px 0 14px 10px;
}


.html20 form.marketingForm table tbody th div.textFormFieldBlock,
.html20 form.marketingForm table tbody th div.dateTimeFormFieldBlock, 
.html20 form.marketingForm table tbody th div.twoOptionFormFieldBlock, 
.html20 form.marketingForm table tbody th div.optionSetFormFieldBlock,
.html20 form.marketingForm table tbody th div.multiOptionSetFormFieldBlock,
.html20 form.marketingForm table tbody th div.lookupFormFieldBlock,
.html20 form.marketingForm table tbody th div.phoneFormFieldBlock
{
    padding: 0;
    padding-bottom: 1rem;
    gap: 2px;
}

.html20 form.marketingForm table tbody th div.consentBlock {
    margin-top: 2.5rem;
}