/* The file hosted on marketo with this name is the file that we should modify if we want to apply some style to our embed forms on contentful. */
/* This file contains the styles for the Marketo forms just for documenting reasons. */
/* You should modify this file, save it and drop it on the following link to impact Marketo styles */
/* https://engage-sj.marketo.com/?munchkinId=628-ZPE-510#/ds/file/3166302/folder/18 */

/*Form*/
.mktoForm {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
  max-width: 560px;
  margin: 22px 0;
  font-family: 'Circular', sans-serif;
  padding: 0px;
}

/*Form row*/
.mktoForm .mktoFormRow {
  width: 100%;
}

/*Remove blank spaces at top of the row*/
div.mktoGutter,
div.mktoOffset {
  display: none;
}

/*Not sure if it's neccesary*/
.mktoForm fieldset {
  width: 100%;
  border: none;
  padding-right: 0px;
  padding-left: 0px;
}

/*Selector Hardcoded because we are using flex-direction:row for the form, using flex-wrap:wrap and we want to display these two fields as a row*/
.mktoForm .mktoFormRow[data-wrapper-for='LastName'],
.mktoForm .mktoFormRow[data-wrapper-for='FirstName'] {
  width: 49%;
  max-width: 100%;
}

.mktoForm .mktoFormRow[data-wrapper-for='FirstName LastName'] {
  display: flex;
}

.mktoFormCol[data-wrapper-for='FirstName'] {
  margin-right: 13.5px !important;
}
.mktoFormCol[data-wrapper-for='LastName'] input {
  margin-left: 0px !important;
}

/*Remove extra margin bottom for form level*/
.mktoFormCol[data-wrapper-for='FirstName'],
.mktoFormCol[data-wrapper-for='LastName'],
.mktoFormCol[data-wrapper-for='Email'],
.mktoFormCol[data-wrapper-for='State'],
.mktoFormCol[data-wrapper-for='Company'],
.mktoFormCol[data-wrapper-for='referrerName'],
.mktoFormCol[data-wrapper-for='referrerLastName'],
.mktoFormCol[data-wrapper-for='referrerEmailAddress'],
.mktoFormCol[data-wrapper-for='referrerJobType'],
.mktoFormCol[data-wrapper-for='Job_Type__c'] {
  margin-bottom: 0px !important;
  width: 100% !important;
}

/*Remove extra margin bottom for form level*/
.mktoFormCol[data-wrapper-for='Email'] input,
.mktoFormCol[data-wrapper-for='State'] input,
.mktoFormCol[data-wrapper-for='Company'] input,
.mktoFormCol[data-wrapper-for='referrerEmailAddress'] input,
.mktoFormCol[data-wrapper-for='referrerJobType'] input {
  width: 100% !important;
}

.mktoFormCol[data-wrapper-for='State'] select#State {
  margin-bottom: 15px !important;
  margin-left: 0px !important;
  width: 100% !important;
}

.mktoFormCol[data-wrapper-for='Job_Type__c'] select#Job_Type__c {
  width: 100% !important;
}

/*Hardcoded because it has a hardcoded max-width & margin-left in marketo*/
.mktoForm .mktoFormRow:nth-of-type(2)[data-wrapper-for='LastName'] input {
  margin: 0px !important;
  max-width: 100% !important;
}

/*Divs 100% Width*/
form .mktoButtonRow,
div.mktoFieldWrap,
div.mktoLogicalField,
div.mktoRadioList {
  width: 100%;
}

/*Form label*/
.mktoLabel[data-for-placeholder-hidden^='true-'] {
  opacity: 1;
}

.mktoLabel[data-for-placeholder-hidden$='-interactive'] {
  transition: opacity 240ms ease-in;
}

/*Input, select and Textarea*/
input.mktoField,
select.mktoField,
textarea.mktoField {
  padding: 12px 24px !important;
  margin-bottom: 15px !important;
  color: #8a8a8a;
  font-size: 16px !important;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  min-height: 46px;
  box-shadow: none;
}

/*Placeholder*/
::placeholder,
:-ms-input-placeholder {
  color: #8a8a8a;
  font-size: 16px;
  font-family: 'Circular', sans-serif;
  font-weight: normal;
}

/*Select*/
select.mktoField {
  -moz-appearance: window;
  -webkit-appearance: none;
  background: #ffffff
    url('https://go.newsela.com/rs/628-ZPE-510/images/select_arrow_new.png')
    100% center no-repeat;
  background-size: 24px 6px;
  padding-right: 20px;
}

select option {
  padding-top: 12px;
}

/*Harcoded because margin:0 is apparently hardcoded in marketo for this field*/
.mktoForm select[id='State'] {
  margin-bottom: 15px !important;
}

/*Hardcoded because these rows have a different behavior from Marketo, they are grouped for some reason*/
.mktoFormRow[data-wrapper-for='Company Job_Type__c'] select {
  margin-bottom: 15px !important;
}

.mktoFormRow[data-wrapper-for='Company Job_Type__c'] .mktoOffset {
  display: none;
}

#LblCompany .mktoAsterix {
  display: block !important;
  color: #fff !important;
}

/*Textarea*/
textarea.mktoField {
  min-height: 4.5em;
  resize: vertical;
}

/*Checkbkox*/
div.mktoCheckboxList input[type='checkbox'] {
  width: auto;
  margin-top: 2px;
  margin-bottom: 0px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  min-height: 0px;
}

div.mktoCheckboxList label {
  width: 100%;
  margin-left: 25px;
  margin-bottom: 15px;
}

/*Checkbox List*/
.mktoForm .mktoCheckboxList {
  width: auto;
  position: relative;
  right: 0px;
}

/*RadioList*/
div.mktoRadioList input[type='radio'] {
  width: auto;
  margin-bottom: 0px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  min-height: 0px;
  margin-top: 1px;
}

div.mktoRadioList label {
  width: 100%;
  margin-bottom: 15px;
}

/*Range*/
input[type='range'] {
  border-radius: 0;
  border: none;
  box-shadow: none;
  min-height: 0px;
}

/*Button*/
form#mktoForm_1837 .mktoButtonWrap,
form#mktoForm_2521 .mktoButtonWrap,
form#mktoForm_3229 .mktoButtonWrap,
form#mktoForm_3230 .mktoButtonWrap {
  display: block;
  min-width: 120px;
  margin-top: 32px !important;
}

button.mktoButton {
  padding: 12px 45px !important;
  font-weight: 400 !important;
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
  background: #ffffff !important;
  color: #0a6efa !important;
}

input.mktofield,
select.mktoField,
textarea.mktoField {
  margin-bottom: 8px !important;
}

.mktoForm.mktoLayoutAbove .mktoRequiredField .mktoAsterix {
  color: #fff !important;
  display: block !important;
}

.mktoFormRow[data-wrapper-for='Job_Type__c'] {
  display: block !important;
}

label#LblEmail {
  display: flex !important;
}

.mktoForm .mktoLabel {
  visibility: visible !important;
  color: #fff !important;
  margin-bottom: 8px !important;
  font-weight: bold;
}

.mktoForm.mktoLayoutAbove #Lblinterest {
  display: flex !important;
  flex-direction: row-reverse !important;
  width: 100%;
}

.mktoform.mktoLayoutAbove #Lblinterest .mktoAsterix {
  justify-self: start !important;
}

#Lblinterest {
  width: 100% !important;
}

.LblinterestSelect {
  display: flex !important;
  align-items: center !important;
  margin-top: 10px !important;
  min-width: 100% !important;
  visibility: visible !important;
  padding: 12px 24px !important;
  -moz-appearance: window;
  -webkit-appearance: none;
  background: #ffffff
    url('https://go.newsela.com/rs/628-ZPE-510/images/select_arrow_new.png')
    100% center no-repeat;
  background-size: 24px 6px;
  padding-right: 20px;
  color: #767676 !important;
  line-height: 1.2em;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  min-height: 46px;
  box-shadow: 0px 0px 6.9px 0px rgba(0, 0, 0, 0.25) inset;
  font-size: 16px !important;
}

.mktoFormCol[data-wrapper-for=data-wrapper-for='mktoCheckbox_24769_0 interest mktoCheckbox_24769_1 interest mktoCheckbox_24769_2 interest mktoCheckbox_24769_3 interest mktoCheckbox_24769_4 interest mktoCheckbox_24769_5 interest mktoCheckbox_24769_6 interest'] {
  position: relative !important;
}

.mktoForm .mktoCheckboxList {
  visibility: hidden;
  background-color: white;
  border-radius: 4px !important;
  padding: 20px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  position: absolute !important;
  top: 72px !important;
  left: 0 !important;
  z-index: 99 !important;
  width: 100% !important;
}

.mktoCheckboxList.visible {
  visibility: visible !important;
}

.mktoCheckboxList.visible label {
  padding-bottom: 12px !important;
  visibility: visible !important;
}

.mktoForm .mktoCheckboxList input[type='checkbox'] {
  display: none !important;
  margin-top: 0px !important;
}

.mktoCheckboxList label:before {
  margin-right: 15px !important;
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  margin-left: -1.5em;
  line-height: 1em;
  background-color: #fff;
  box-shadow: inset 1px 1px 4px 1px #ddd;
  font-family: Arial, sans-serif;
  font-size: 13px;
  border: 1px solid #aeb0b6;
}

.mktoForm .mktoButtonWrap.mktoRound .mktoButton {
  padding: 16px !important;
  color: #106ff3 !important;
  background-color: #fff !important;
  margin-top: 0px !important;
}

/*Referral form*/
.mktoHtmlText span strong {
  padding: 0px !important;
}
.mktoHtmlText .padtop b {
  padding: 8px 0 !important;
}
/*Referral form*/

/*Mobile fixs*/
@media all and (max-width: 768px) {
  .mktoFormCol[data-wrapper-for='FirstName'] {
    margin-right: 13px !important;
    max-width: 100% !important;
  }

  input#FirstName {
    max-width: 100% !important;
  }

  .mktoFormCol[data-wrapper-for='LastName'] {
    max-width: 100% !important;
  }
}

@media all and (max-width: 768px) {
  form#mktoForm_1837 .mktoFieldDescriptor[data-wrapper-for='LastName'],
  form#mktoForm_3229 .mktoFieldDescriptor[data-wrapper-for='LastName'] {
    margin-bottom: 15px !important;
    margin-left: 5px !important;
  }
}

/*Formative Launch CSS starts here*/

/*Label*/
form#mktoForm_1072 .mktoLabel {
  display: none;
}

/*First 2 rows*/
#mktoForm_1072 .mktoFormRow[data-wrapper-for='LastName'],
#mktoForm_1072 .mktoFormRow[data-wrapper-for='FirstName'] {
  width: 100%;
  max-width: 100%;
}

/*Inputs*/
form#mktoForm_1072 input#FirstName,
form#mktoForm_1072 input#LastName,
form#mktoForm_1072 input#Phone,
form#mktoForm_1072 select#State {
  width: 100%;
  min-width: 100%;
  margin-left: 0px !important;
  margin-bottom: 15px !important;
}

/*Input email*/
form#mktoForm_1072 .mktoFieldDescriptor[data-wrapper-for='Email'] {
  margin-bottom: 10px;
}

/*Button*/
form#mktoForm_1072 .mktoButtonWrap.mktoRound button.mktoButton {
  margin-top: 0px !important;
  background-color: #fff !important;
  color: #106ff3 !important;
  border-radius: 4px !important;
  padding: 16px !important;
  height: 100% !important;
}

@media all and (max-width: 768px) {
  form .mktoFieldDescriptor {
    margin-bottom: 0px !important;
  }
}

/*Formative Launch CSS ends here*/

/* Labels */
.mktoHtmlText span strong,
.mktoForm .mktoFieldWrap label,
.custom-form label,
.mktoFormRow .mktoHtmlText .padtop div {
  color: #fff !important;
}

.mktoLogicalField.mktoCheckboxList label {
  color: #8a8a8a !important;
}

form#mktoForm_2521 .mktoLabel,
form#mktoForm_3230 .mktoLabel {
  margin-bottom: 0px !important;
}

/*Checkbox checked*/
form#mktoForm_1837
  .mktoCheckboxList
  input[type='checkbox']:checked
  + label:before,
form#mktoForm_3229
  .mktoCheckboxList
  input[type='checkbox']:checked
  + label:before {
  content: '\2713 ';
}

/*Error label message on custom-form copied from Marketo*/
.custom-form {
  position: relative;
}

.custom-form select#Job {
  border: none !important;
}

.custom-form .mktoError {
  position: absolute;
  bottom: -35px;
  z-index: 99;
  color: #bf0000;
}
.custom-form .mktoError .mktoErrorArrowWrap {
  width: 16px;
  height: 8px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 5px;
  z-index: 100;
}
.custom-form.ie7 .mktoError .mktoErrorArrowWrap {
  top: -8px;
}
.custom-form .mktoError .mktoErrorArrow {
  background-color: #e51b00;
  border: 1px solid #9f1300;
  border-right: none;
  border-bottom: none;
  display: inline-block;
  height: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  width: 16px;
  margin-top: 5px;
}

/** These two styles are for browsers that don't support css transforms */
.custom-form .mktoError .mktoErrorArrowWrap.mktoArrowImage {
  background: transparent url('../images/callout-arrow-up-red.png') top center
    no-repeat;
  bottom: -7px;
}
.custom-form .mktoError .mktoErrorArrowWrap.mktoArrowImage .mktoErrorArrow {
  display: none;
}
.custom-form .mktoError .mktoErrorMsg {
  display: block;
  margin-top: 7px;
  background-color: #e51b00;
  background-image: -webkit-linear-gradient(#e51b00 43%, #ba1600 100%);
  background-image: -moz-linear-gradient(#e51b00 43%, #ba1600 100%);
  background-image: linear-gradient(#e51b00 43%, #ba1600 100%);
  background-image: -ms-linear-gradient(#e51b00 43%, #ba1600 100%);
  border: 1px solid #9f1300;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.65) 0 2px 7px, inset #ff3c3c 0 1px 0px;
  box-shadow: rgba(0, 0, 0, 0.65) 0 2px 7px, inset #ff3c3c 0 1px 0px;
  color: #f3f3f3;
  font-size: 0.9em;
  line-height: 1.2em;
  max-width: 16em;
  padding: 0.4em 0.6em;
  text-shadow: #901100 0 -1px 0;
}
.custom-form .mktoError .mktoErrorMsg .mktoErrorDetail {
  display: block;
}

/*Submit buttons*/
form#mktoForm_1837 .mktoButtonWrap.mktoRound,
form#mktoForm_2521 .mktoButtonWrap.mktoSimple,
form#mktoForm_3229 .mktoButtonWrap.mktoRound,
form#mktoForm_3230 .mktoButtonWrap.mktoSimple {
  margin-top: 24px !important;
}

@media all and (max-width: 768px) {
  form#mktoForm_1837
    .mktoFormRow
    .mktoFieldDescriptor[data-wrapper-for='FirstName'],
  form#mktoForm_1837
    .mktoFormRow
    .mktoFieldDescriptor[data-wrapper-for='LastName'],
  form#mktoForm_3229
    .mktoFormRow
    .mktoFieldDescriptor[data-wrapper-for='FirstName'],
  form#mktoForm_3229
    .mktoFormRow
    .mktoFieldDescriptor[data-wrapper-for='LastName'] {
    margin-bottom: 0px !important;
  }
}