/*
 * Marketo Form Reference — "form-container-new" combined styles
 *
 * This file shows the COMPLETE resolved styling for a form using
 * class="form-container-new". Use it to verify forms as you migrate
 * from form-container-new → form-container (removing the -new class).
 *
 * The only visual differences between base .form-container and -new:
 *   - Input border: base uses 2px #C8C8C8, -new uses 1px #aeb0b6
 *   - Container padding: base uses 24px, -new uses 32px 24px 24px
 *
 * This file is NOT enqueued — it's a reference only.
 *
 * Usage in Elementor HTML widget:
 *   <div class="form-container-new">
 *     <script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
 *     <form id="mktoForm_1125"></form>
 *     <script>MktoForms2.loadForm("//app-sj01.marketo.com", "474-QSX-138", 1125);</script>
 *   </div>
 */

.d-none {
    display: none;
}
.form-container-new {
    background-color: #fff;
    padding: 32px 24px 24px;
    margin: 0;
    border: 0;
    border-radius: 8px;
}
.form-container-new form[id^='mktoForm_'].mktoForm {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 100% !important;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow.wideFieldRow {
    flex: 0 0 100%;
    max-width: 100%;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormCol {
    float: none;
    margin: 0 !important;
    min-height: 0;
    position: relative;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoError .mktoErrorMsg:not(#ValidMsgEmail),
.form-container-new form[id^='mktoForm_'].mktoForm .mktoError .mktoErrorArrowWrap,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoOffset,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoGutter,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoRequiredField .mktoAsterix {
    display: none !important;
    height: 0;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFieldWrap {
    float: none;
    font-size: 0;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoLabel,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoRequiredField label.mktoLabel {
    color: #4c4084;
    font: 400 14px/1.5 "Inter", sans-serif !important;
    padding: 0 0 0 30px;
    width: 100% !important;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoLabel a {
    color: #71C5E8;
}
.form-container-new form[id^='mktoForm_'].mktoForm input[type=text],
.form-container-new form[id^='mktoForm_'].mktoForm input[type=url],
.form-container-new form[id^='mktoForm_'].mktoForm input[type=email],
.form-container-new form[id^='mktoForm_'].mktoForm input[type=tel],
.form-container-new form[id^='mktoForm_'].mktoForm input[type=number],
.form-container-new form[id^='mktoForm_'].mktoForm input[type=date],
.form-container-new form[id^='mktoForm_'].mktoForm select.mktoField,
.form-container-new form[id^='mktoForm_'].mktoForm textarea.mktoField {
    background-image: none;
    border: 1px solid #aeb0b6;
    border-radius: 8px;
    box-shadow: none;
    color: #201547;
    font: 400 14px/29px "Inter", sans-serif;
    padding: 2px 12px;
    height: auto;
    min-height: 0;
    margin-bottom: 24px;
    width: 100% !important;
    appearance: none;
    -webkit-appearance: none;
    text-transform: unset;
}
.form-container-new form[id^='mktoForm_'].mktoForm select.mktoField {
    background: url(/wp-content/uploads/2019/04/menu-dropdown.png) 94% 50% no-repeat;
    background-size: 8px auto;
    color: #4D4084;
    line-height: 30px;
    padding-right: 30px;
}
.form-container-new form[id^='mktoForm_'].mktoForm input[type=text]:focus,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=url]:focus,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=email]:focus,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=tel]:focus,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=number]:focus,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=date]:focus,
.form-container-new form[id^='mktoForm_'].mktoForm select.mktoField:focus,
.form-container-new form[id^='mktoForm_'].mktoForm textarea.mktoField:focus {
    border-color: #71C5E8;
}
.form-container-new form[id^='mktoForm_'].mktoForm input[type=text].mktoInvalid,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=url].mktoInvalid,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=email].mktoInvalid,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=tel].mktoInvalid,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=number].mktoInvalid,
.form-container-new form[id^='mktoForm_'].mktoForm input[type=date].mktoInvalid,
.form-container-new form[id^='mktoForm_'].mktoForm select.mktoField.mktoInvalid,
.form-container-new form[id^='mktoForm_'].mktoForm textarea.mktoField.mktoInvalid,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormCol:has(.mktoError) input,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormCol:has(.mktoError) select.mktoField {
    border-color: #FF5C39;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoField::-webkit-input-placeholder {
    color: #667085;
    opacity: 1;
    text-transform: unset;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoField::-moz-placeholder {
    color: #667085;
    opacity: 1;
    text-transform: unset;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoField:-moz-placeholder {
    color: #667085;
    opacity: 1;
    text-transform: unset;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoField:-ms-input-placeholder {
    color: #667085;
    opacity: 1;
    text-transform: unset;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoButtonRow {
    width: 100%;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoButtonWrap {
    display: block;
    margin: 0 !important;
    width: 100%;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoButtonWrap .mktoButton {
    background-image: none !important;
    background-color: #1E1744 !important;
    border: 2px solid #1E1744 !important;
    box-shadow: none;
    color: #fff !important;
    font: 600 14px/1 "Inter", sans-serif;
    display: block;
    border-radius: 8px;
    cursor: pointer;
    height: auto !important;
    padding: 12px 37px !important;
    position: relative;
    overflow: hidden;
    text-shadow: none;
    text-transform: unset;
    width: 100% !important;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoButtonWrap.mktoFirefox .mktoButton:active {
    top: 0;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoButtonWrap .mktoButton:hover {
    background-color: transparent !important;
    border-color: #4D4084 !important;
    color: #4D4084 !important;
    text-shadow: none;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.form-container-new form[id^='mktoForm_'].mktoForm div.mktoCheckboxList {
    border: 0 !important;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    border-radius: 0 !important;
    width: 25px !important;
}
.form-container-new form[id^='mktoForm_'].mktoForm div.mktoCheckboxList input[type='checkbox'] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}
.form-container-new form[id^='mktoForm_'].mktoForm div.mktoCheckboxList input[type='checkbox'] + label {
    cursor: pointer;
    margin: 0;
    z-index: 0 !important;
    padding-left: 30px;
}
.form-container-new form[id^='mktoForm_'].mktoForm div.mktoCheckboxList input[type='checkbox'] + label:before {
    content:'';
    -webkit-appearance: none;
    background-color: #fff;
    box-shadow: none;
    border: 2px solid #C8C8C8;
    padding: 7px;
    position: absolute;
    left: 0;
    margin: 0;
    cursor: pointer;
}
.form-container-new form[id^='mktoForm_'].mktoForm div.mktoCheckboxList.mktoInvalid input[type='checkbox'] + label:before {
    border-color: #FF5C39;
}
.form-container-new form[id^='mktoForm_'].mktoForm div.mktoCheckboxList input[type='checkbox']:checked + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    left: 6px;
    width: 6px;
    height: 13px;
    border: solid #71C5E8;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow.checkboxRow,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow.currentCheckboxRow {
    flex: 0 0 100%;
    max-width: 100%;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow.checkboxRow .mktoFieldWrap,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow.currentCheckboxRow .mktoFieldWrap {
    margin-bottom: 35px;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow:not(.checkboxRow):not(.currentCheckboxRow) .mktoLabel,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow:not(.checkboxRow):not(.currentCheckboxRow) .mktoRequiredField label.mktoLabel {
    padding-left: 0;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow:not(.checkboxRow):not(.currentCheckboxRow) .mktoLabel span,
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow:not(.checkboxRow):not(.currentCheckboxRow) .mktoRequiredField label.mktoLabel span {
    font: inherit !important;
}
.form-container-new form[id^='mktoForm_'].mktoForm .mktoFieldWrap:has(.mktoCheckboxList) > .mktoLabel {
    padding-left: 30px !important;
}

.form-container-new form[id^='mktoForm_'].mktoForm .mktoError {
    position: absolute !important;
    display: block !important;
    left: 0 !important;
    right: auto !important;
    bottom: 6px !important;
    top: auto !important;
}
.form-container-new form[id^='mktoForm_'] .mktoErrorArrow {
    display: none !important;
}
.form-container-new form[id^='mktoForm_'] .mktoError .mktoErrorMsg {
    font-size: 11px;
    background: none;
    margin: auto;
    border: none;
    border-radius: initial;
    box-shadow: none;
    color: red;
    max-width: initial;
    padding: initial;
    line-height: initial;
    text-shadow: initial;
}

.form-container-new .mktoFormRow:has(#Source_Description__c),
.form-container-new .mktoFormRow:has(#Comments__c),
.form-container-new .mktoFormRow:has(#How_did_you_hear_about_us__c),
.form-container-new .mktoFormRow:has(.mktoCheckboxList) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 6px;
}
.form-container-new .mktoFormRow:has(.mktoCheckboxList) .mktoFormCol {
    width: 100% !important;
}
.form-container-new .mktoFormRow:has(.mktoCheckboxList) .mktoLabel {
    width: 100% !important;
}

@media only screen and (max-width: 767px) {
    .form-container-new {
        margin: 0;
    }
}

@media only screen and (max-width: 560px) {
    .form-container-new {
        padding-left: 15px;
        padding-right: 15px;
    }
    .form-container-new form[id^='mktoForm_'].mktoForm .mktoFormRow {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .form-container-new form[id^='mktoForm_'].mktoForm {
        padding: 0;
    }
}
