/* * Prefixed by https://autoprefixer.github.io * PostCSS: v8.4.14, * Autoprefixer: v10.4.7 * Browsers: last 4 version */ /** * NWEA Marketo Theme * import this stylesheet in order to apply NWEA-specific styles to Marketo forms * Form *must* be using "Simple" theme in order for * styles to work effectively */ @import url("https://www.nwea.org/app/themes/inboots/marketo/jquery-multiselect/jquery.multiselect.css"); .mktoForm.mktoForm { --nwea-dark: #454142; --nwea-red: #e51b00; --nwea-blue: #146193; --nwea-input-padding: 0.385em; --nwea-label-padding: 1.15em; --nwea-label-gutter: 1.2em; --nwea-border-width: 1px; max-width: 100%; font-family: "Gotham", Helvetica, Arial, sans-serif !important; position: relative; } .mktoForm.mktoForm .mktoGutter { display: none; } .mktoForm.mktoForm .mktoOffset { display: block !important; float: none; } .mktoForm.mktoForm .mktoFormRow { /* margin-top: calc( var( --nwea-label-gutter ) * 1.162 ); */ display: -webkit-box; display: -ms-flexbox; display: flex; /* justify-content: center; */ } .mktoForm.mktoForm .mktoFormCol { margin-bottom: 2.5rem !important; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .mktoForm.mktoForm .not-me { /* offset for "not-me" popup for email field */ position: absolute; top: 0; right: 0; margin-top: calc(-1 * var(--nwea-input-padding)); } .mktoForm.mktoForm .mktoFieldWrap { float: none; } .mktoForm.mktoForm .mktoFieldWrap .mktoHtmlText { width: 100% !important; font-size: 1em; } .mktoForm.mktoForm .mktoFieldWrap .mktoHtmlText a { padding: 0; color: var(--nwea-blue); } .mktoForm.mktoForm .mktoAsterix { float: left; color: var(--nwea-red); padding-left: 0; } .mktoForm.mktoForm .mktoAsterix:after { content: "\00a0"; } .mktoForm.mktoForm .mktoLabel { cursor: text; line-height: 1.33; text-transform: uppercase; position: absolute; margin-top: calc( var(--nwea-input-padding) + var(--nwea-input-border-width, 1px) ); left: var(--nwea-input-padding); padding-top: 0; -webkit-transition: 0.1s all linear; -o-transition: 0.1s all linear; transition: 0.1s all linear; width: auto !important; max-width: calc(100% - var(--nwea-input-padding)) !important; white-space: nowrap; overflow: hidden; } .mktoForm.mktoForm .mktoLabel.nweaMktoLabelFocused, .mktoForm.mktoForm .mktoLabel.longLabel { margin-top: calc(-1 * var(--nwea-input-padding)); transform: translateY(-100%); white-space: normal !important; font-size: 0.838em; } .mktoForm.mktoForm .mktoError { right: 0 !important; bottom: 0 !important; color: var(--nwea-red) !important; } .mktoForm.mktoForm .mktoErrorArrowWrap { display: none; } .mktoForm.mktoForm .mktoCheckboxList + .mktoError { left: 0 !important; top: 0 !important; height: 0; -webkit-transform: translatey( calc(-1 * var(--nwea-label-gutter) - var(--nwea-input-padding)) ); -ms-transform: translatey( calc(-1 * var(--nwea-label-gutter) - var(--nwea-input-padding)) ); transform: translatey( calc(-1 * var(--nwea-label-gutter) - var(--nwea-input-padding)) ); } .mktoForm.mktoForm .mktoError .mktoErrorMsg { position: absolute; width: -webkit-max-content; width: -moz-max-content; width: max-content; right: 0; margin-top: 0; padding-right: 0; background: none !important; color: var(--nwea-red) !important; text-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none; font-size: 0.838em; } .mktoForm.mktoForm .mktoCheckboxList + .mktoError .mktoErrorMsg { right: auto; /*margin-top: calc( -1 * var( --nwea-label-gutter ) - var( --nwea-input-padding)) */ } .mktoForm.mktoForm .mktoLabel + .mktoGutter:before { } .mktoForm.mktoForm .mktoLabel ~ input[type="text"]:after { } .mktoForm.mktoForm .mktoRequiredField label.mktoLabel { font-weight: normal; } .mktoForm.mktoForm fieldset { } .mktoForm.mktoForm fieldset legend { } .mktoForm.mktoForm input[type="text"], .mktoForm.mktoForm input[type="url"], .mktoForm.mktoForm input[type="email"], .mktoForm.mktoForm input[type="tel"], .mktoForm.mktoForm input[type="number"], .mktoForm.mktoForm input[type="date"] { float: none; font-size: 1em !important; } .mktoForm.mktoForm input[type="text"], .mktoForm.mktoForm input[type="url"], .mktoForm.mktoForm input[type="email"], .mktoForm.mktoForm input[type="tel"], .mktoForm.mktoForm input[type="number"], .mktoForm.mktoForm input[type="date"], .mktoForm.mktoForm textarea.mktoField, .mktoForm.mktoForm select.mktoField { padding: var(--nwea-input-padding); width: 100% !important; height: auto; border-width: var(--nwea-border-width); border-color: currentColor; border-style: solid; } .mktoForm.mktoForm input[type="text"]:focus, .mktoForm.mktoForm input[type="url"]:focus, .mktoForm.mktoForm input[type="email"]:focus, .mktoForm.mktoForm input[type="tel"]:focus, .mktoForm.mktoForm input[type="number"]:focus, .mktoForm.mktoForm input[type="date"]:focus, .mktoForm.mktoForm textarea.mktoField:focus { } .mktoForm.mktoForm input[type="text"].mktoInvalid, .mktoForm.mktoForm input[type="url"].mktoInvalid, .mktoForm.mktoForm input[type="email"].mktoInvalid, .mktoForm.mktoForm input[type="tel"].mktoInvalid, .mktoForm.mktoForm input[type="number"].mktoInvalid, .mktoForm.mktoForm input[type="date"].mktoInvalid, .mktoForm.mktoForm textarea.mktoInvalid, .mktoForm.mktoForm select.mktoInvalid { border: 2px solid var(--nwea-red); } /*.mktoForm.mktoForm select.mktoField, .ms-options-wrap > button{ // Extra margin for select labels so they don't overlap margin-top: calc( var(--nwea-label-gutter) + var(--nwea-input-padding) * 2 + var(--nwea-border-width) ) !important; } */ /* Do not display multiselect */ .mktoForm.mktoForm select.mktoField[multiple] { display: none; } .mktoForm.mktoForm .mktoCheckboxList { margin-top: var(--nwea-label-gutter) !important; } .mktoForm.mktoForm .mktoButtonRow { display: block; } .mktoForm.mktoForm .mktoButtonWrap { display: block; text-align: center; margin: auto !important; } /* OGRE-311 */ /* Raise importance by doubling class (.mktoButton.mktoButton) */ .mktoForm .mktoButtonWrap .mktoButton.mktoButton { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 0.875rem; /* 14px */ padding: 6px 35px; font-weight: 500; } .mktoForm .mktoButtonWrap .mktoButton.mktoButton:active, .mktoForm .mktoButtonWrap.mktoSimple .mktoButton.mktoButton:active { background: inherit; background-color: #fec10d; /* Just to be sure */ } .mktoForm.mktoForm.mktoForm button.mktoButton { border-radius: 0; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: inline-block; text-transform: uppercase; margin: 0; font-weight: 400; line-height: 20px; text-align: center; vertical-align: middle; white-space: nowrap; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif !important; -webkit-box-shadow: initial !important; box-shadow: initial !important; color: #414142 !important; border: 1px solid #fec10d !important; padding: 0.4em 1em; background-color: #fec10d !important; background-image: none; font-size: 1em; } .mktoForm.mktoForm .ms-options-wrap > button { border: 1px solid currentColor !important; color: var(--nwea-dark); } .mktoForm.mktoForm .ms-options li label { cursor: pointer; } .mktoForm.mktoForm .ms-options li label:hover { color: var(--nwea-blue); } .ms-options-wrap > .ms-options > ul input[type="checkbox"] { left: 0; top: 9px; } /* Satellite Modal success wrapper */ .satellite_modal .success_wrapper { position: absolute; transform: translateY(50%); padding: 0 1rem; }