/* ===================================================================================== */
/* ==================================[ [3] forms.css ]================================== */
/* ===================================================================================== */
/*/ LP FLEX Marketo Forms Stylesheet /*/
/**************************************/
/* GLOBAL - Form Presets: Form element & children */
form.mktoForm, form.mktoForm * {
font-size: 1em !important;
font-family: inherit !important;
color: inherit !important;
}
/* TRANSITIONS: ease color changes (optional) */
form.mktoForm * {
transition: ease color .3s !important;
transition: ease background-color .3s !important;
}
/* :::::::::::::::::::::::::::::::::: */
/* :::::[ Architectural Styles ]::::: */
/* :::::::::::::::::::::::::::::::::: */
form.mktoForm {
flex-direction: column; /* 'flex-direction: row;' for horizontal display */
width: 100% !important; /* override fixed width on mktoForm */
box-sizing: border-box;
}
form.mktoForm * {
float: none !important; /* remove float on mktoForm elements */
width: auto !important; /* remove fixed width on mktoForm elements */
}
form.mktoForm, form.mktoForm .mktoFormRow, form.mktoForm .mktoFieldWrap, form.mktoForm .mktoButtonRow {
display:flex !important; /* flex these elements */
}
form.mktoForm .mktoOffset, form.mktoForm .mktoGutter, form.mktoForm fieldset legend {
display:none !important; /* hide these elements */
}
form.mktoForm .mktoFormCol, form.mktoForm .mktoHtmlText {
-ms-flex-positive: 1;
flex-grow: 1; /* make these elements flex to full-width (100%) */
}
/* maintain font-size, line-height and input height for mobile */
form.mktoForm .mktoField {
line-height: 1.4em !important; /*mktoOverride*/
font-size: 1em !important; /*mktoOverride*/
height: initial !important; /*mktoOverride*/
}
/* :::::::::::::::::::::::::::::::: */
/* :::::[ Form Layout Styles ]::::: */
/* :::::::::::::::::::::::::::::::: */
/* Form Layout > Settings: LABELS-ABOVE ---------------- */
form.mktoForm.mktoLayoutAbove .mktoFieldWrap {
flex-direction: column !important;
align-items: flex-start !important;
}
form.mktoForm.mktoLayoutAbove label.mktoLabel {
text-align: left !important;
padding: .5em 0 !important;
width: 100% !important;
}
/* Form Layout > Settings: LABELS-LEFT ------------------ */
form.mktoForm.mktoLayoutLeft fieldset .mktoFieldWrap {
display: flex !important;
flex-direction: row !important;
}
form.mktoForm.mktoLayoutLeft fieldset label.mktoLabel {
display: block !important;
text-align: right !important;
padding: 0 !important;
max-width: 120px; /* set width for labels left */
width: 120px !important; /* set width for labels left */
margin: auto 15px auto 0;
}
/* ::::::::::::::::::::::::::: */
/* :::::[ Form Elements ]::::: */
/* ::::::::::::::::::::::::::: */
/* ROWS ___________________ */
form.mktoForm .mktoFormRow,
form.mktoForm .mktoButtonRow {
flex-wrap: wrap;
flex-direction:row;
min-width:unset;
}
form.mktoForm .mktoFormRow {
margin: 0 -10px; /* offset .mktoFieldWrap padding (10px) */
}
/* COLUMNS ______________ */
form.mktoForm .mktoFormCol {
flex-basis: 0; /* make columns in a row equal widths */
min-height: 0px !important; /*mktoOverride*/
}
/* FIELDSET _________ */
form.mktoForm fieldset {
padding: 0px !important; /*mktoOverride*/
margin: 0px !important; /*mktoOverride*/
border: 0px !important; /*mktoOverride*/
}
/* FIELDWRAP ______________ */
form.mktoForm .mktoFieldWrap {
padding: 0px 10px !important;
}
/* LABELS __________________ */
form.mktoForm label.mktoLabel {
padding:.5rem !important;
font-size:0.8em !important;
font-weight: bold !important;
display: flex;
}
form.mktoForm .mktoAsterix {
  color: #b92d00 !important;
}
/* |>> Labels-Above ........................ */
form.mktoForm.mktoLayoutAbove label.mktoLabel {
text-align: left !important;
}
/* |>> Labels-Left ........................ */
form.mktoForm.mktoLayoutLeft label.mktoLabel {
text-align: right !important;
min-width:120px;
}
/* INPUTS (ALL) ______________ */
/* excludes radio & checkboxes */
form.mktoForm input[type=url],
form.mktoForm input[type=text],
form.mktoForm input[type=date],
form.mktoForm input[type=tel],
form.mktoForm input[type=email],
form.mktoForm input[type=number],
form.mktoForm textarea.mktoField,
form.mktoForm select.mktoField  {
  background-color: #f8f8f8 !important;
  border: 1px solid #e2e2e2 !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
  padding: 15px 10px 10px !important;
  border-bottom: 4px solid #4c516d !important;
  color: #000 !important;
  -ms-flex-positive: 1;
  flex-grow:1;
  width:100% !important;
  min-height: 44px !important; /*mktoOverride*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* SELECT ___________________ */
form.mktoForm select.mktoField {
  background-image: linear-gradient(135deg, #4c516d 50%, transparent 50%), linear-gradient(45deg, transparent 50%, #4c516d 50%); /* downward triangle - match placeholder color */
background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat !important;
outline: 0 !important;
}
/* |>> Select not-valid states ............. */
form.mktoForm select.mktoField:not(.mktoValid),
form.mktoForm select.mktoField.mktoInvalid {
color: #000 !important;
}
/* |>> Select invalid states .................. */
form.mktoForm select.mktoField.mktoInvalid:active,
form.mktoForm select.mktoField.mktoInvalid:focus {
color: initial !important;
}
/* |>> Select active states ........ */
form.mktoForm select.mktoField:focus,
form.mktoForm select.mktoField:active {
background-image: linear-gradient(135deg, #b92d00 50%, transparent 50%), linear-gradient(45deg, transparent 50%, #b92d00 50%); /* downard triangle - :focus-color */
}
/* LOGICAL FIELDS (parent) ___ */
form.mktoForm .mktoRadioList,
form.mktoForm .mktoCheckboxList {
-ms-flex-positive: 1;
flex-grow: 1;
}
/* LOGICAL FIELDS (child) ______ */
form.mktoForm .mktoRadioList *,
form.mktoForm .mktoCheckboxList * {
text-align: left !important;
}
/* |>> Checkbox & Radio Labels .... */
form.mktoForm .mktoCheckboxList label,
form.mktoForm .mktoRadioList label {
margin-top: 0px !important;
line-height: 1.25em !important;
margin-left: 1.75em !important;
}
/* |>> Checkbox & Radio Inputs ....... */
form.mktoForm .mktoRadioList > input,
form.mktoForm .mktoCheckboxList > input {
float: left !important;
width: 1.25em !important;
height: 1.25em !important;
border-width: 1px;
border-style: solid;
border-color: #ddd !important;
background-color: #fff;
}
/* CHECKBOX _____________________ */
form.mktoForm input[type=checkbox] {
-webkit-appearance: none !important;
box-sizing: border-box !important;
border-radius:0px;
-webkit-border-radius: 0px;
}
/* |>> Checkbox :focus state .......... */
form.mktoForm input[type=checkbox]:focus {
outline:0px !important;
}
/* |>> Checkbox :checked state .................. */
form.mktoForm input[type=checkbox]:checked::before {
color: #000001 !important;
content:'\2713';
font-weight:bold !important;
width:1em !important;
height:1em !important;
text-align:center !important;
display:block !important;
margin-top:-2px;
margin-left:1px;
}
/* RADIO _______________________________ */
form.mktoForm input.mktoField[type=radio] {
-webkit-appearance:none !important;
border-radius: 50%;
height:17px !important;
width: 17px !important;
}
/* |>> Radio :focus state .................... */
form.mktoForm input.mktoField[type=radio]:focus:checked,
form.mktoForm input.mktoField[type=radio]:focus {
border-color: #b92d00 !important;
outline: none !important;
border-width: 1px;
border-style: solid;
}
/* |>> Radio :checked state ......................... */
form.mktoForm input.mktoField[type=radio]:checked::before {
content:'';
background-color: #000001 !important;
height:11px;
width:11px;
position:absolute;
border-radius: 50%;
margin-top:2px;
margin-left:2px;
box-sizing:border-box;
}
/* TEXTAREA ___________________ */
form.mktoForm textarea.mktoField {
height: auto !important; /* override input fixed height */
}
/* INPUTS (ALL) :focus state ________ */
form.mktoForm input.mktoField:focus,
form.mktoForm select.mktoField:focus,
form.mktoForm textarea.mktoField:focus {
outline: 0px !important;
border-width: 1px;
border-style: solid;
border-color: #eb0028 !important;
}
/* FORM BUTTON _____________ */
/* |>> Button wrapper ...... */
form.mktoForm .mktoButtonWrap {
margin:20px auto !important; /* center button */
}
/* |>> Button style .......... */
form.mktoForm button.mktoButton {
color: #fff !important;
background: #eb0028 !important;
border: 1px solid #eb0028 !important;
/*padding: .375rem .75rem !important; */
padding: 8px 25px !important;
font-size: 1.5rem !important; /*increased*/
line-height: 1.5 !important;
font-weight: 600 !important; /*increased*/
border-radius: 0;
min-width:180px;
box-shadow:none !important; /*mktoOverride*/
text-shadow:none !important; /*mktoOverride*/
cursor: pointer;
text-align: center;
text-transform: uppercase !important;
-webkit-appearance: button;
}

/* |>> Button :active states .. */
form.mktoForm .mktoButton:hover,
form.mktoForm .mktoButton:focus,
form.mktoForm .mktoButton:active {
color: #fff !important;
background: #5c2642 !important;  /*updated*/
border-color: #5c2642  !important; /*updated*/
text-decoration: underline !important;
}
form.mktoForm .mktoButton:focus {
box-shadow: 0 0 0 .2rem rgba(235, 0, 40, 0.5) !important;
}
/* RICH TEXT _____________ */
form.mktoForm .mktoHtmlText {
padding: 0px !important;
width: 100% !important;
}
/* PLACEHOLDERS ________________________ */
::-moz-placeholder{color: #000 !important;}
::-webkit-input-placeholder{color: #000 !important;}
:-ms-input-placeholder{color: #000 !important;}
::placeholder{color: #000 !important;}

/* ERROR MESSAGE _________________________ */
form.mktoForm input.mktoField.mktoInvalid,
form.mktoForm select.mktoField.mktoInvalid,
form.mktoForm textarea.mktoField.mktoInvalid,
.mktoLogicalField.mktoInvalid input {
border-color: #b92d00 !important;
}
form.mktoForm select.mktoField.mktoInvalid {
background-image: linear-gradient(135deg, #b92d00 50%, transparent 50%), linear-gradient(45deg, transparent 50%, #b92d00 50%); /* downward triangle - error-red */
}
form.mktoForm .mktoError {
  position: relative;
    width: 100% !important;
    left: 0;
    bottom: 0px !important;
    display: flex;
    max-width: 100% !important;
}
form.mktoForm .mktoErrorMsg {
  max-width: 100% !important;
  -ms-flex-positive: 1;
  flex-grow: 1 !important;
  margin: 0px auto !important;
  width: 100% !important;
  font-size: 14px !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: transparent !important;
  color: #b92d00 !important; 
  border: none !important;
  outline: none !important;
}
form.mktoForm .mktoErrorDetail {
font-size: inherit !important;
display: inline-block !important;
}
form.mktoForm .mktoErrorMsg::after {
  content: '';
  background: url(../png/error-triangle-2.png) no-repeat;
  width: 17px;
  height: 15px;
  float: right;
}
/*/ ======== RESPONSIVE STYLES ========= /*/
/* twin styles: upto 576px, 768-991px || 1-column responsive */
@media screen and (max-width:576px) {
form.mktoForm,
form.mktoForm .mktoFormRow,
form.mktoForm .mktoFieldWrap {
display:block !important;
text-align: left !important;
}
form.mktoForm, form.mktoForm * {
padding:0px;
}
form.mktoForm label.mktoLabel, form.mktoForm .mktoHtmlText {
padding-left:0px !important;
padding-right: 0px !important;
}
} /* end responsive 0-576px */
@media screen and (min-width:768px) and (max-width:991px) {
form.mktoForm,
form.mktoForm .mktoFormRow,
form.mktoForm .mktoFieldWrap {
display:block !important;
text-align: left !important;
}
form.mktoForm, form.mktoForm * {
padding:0px;
}
form.mktoForm label.mktoLabel, form.mktoForm .mktoHtmlText {
padding-left:0px !important;
padding-right: 0px !important;
}
} /* end responsive 768-991px */