/* PARDOT FORM */

*{font-family: 'Roboto', helvetica, arial, sans-serif !important;}
html {overflow: auto;}
html, body {background: transparent;}
h1 {font-size: 28px; line-height: 30px; color: black; font-weight: 500;}
h2 {font-size: 24px; line-height: 24px; color: #333; font-weight: 500;}
h3 {font-size: 18px; line-height: 22px; color: #444; font-weight: 500;}
h4 {font-size: 16px; line-height: 20px; font-weight:bold;}
h5 {font-size: 14px; line-height: 18px; font-weight: 500;}

/* CONTAINER AND TEMPLATES */

form.form { margin: 0 !important; padding: 0 0 20px !important; font-size: 14px !important;}
.form-container {margin-left: auto; margin-right: auto; padding: 0 !important; background:transparent;}
.cmePardotBlankLogoHeader {background: #fff; line-height: 0;}
.cmePardotSimpleFooter {border-top: 1px solid #ccc; background: #fff;}
.hasDarkFooter {background: #272727;}
.hasLightFooter {background: #dcdcdc;}
.cmeBasicTemplate {background: #dcdcdc; min-height: 300px;}
.cmePardotPageContentWrapper {background: #dcdcdc; min-height: 500px;}
.cmePardotPageContentInner {background: #fff;}
.cmePardotFooter {width: 100%; background: #272727; color: #fff;}
.cmePardotFooter .max-width-md {background: transparent;}
.cmePardotBanner {line-height: 0;}
.cmePardotBanner img {width: 100%;}

/* INPUT ELEMENTS */

[type=checkbox], [type=radio] {box-sizing: border-box; padding: 0; margin-right: 5px; height: 15px; width: 15px;}

.form-fields .required:before {display: none !important; }
.form-fields .required .field-label:after {content: "*"; display: inline-block; position: absolute; margin-top: 0px; margin-left: 5px; color: #FB3D3D; font-size: 18px;}
.form-fields .pd-checkbox.no-label.required label:after {content: "*"; display: inline-block; position: absolute; margin-top: 0px; margin-left: 5px; color: #FB3D3D; font-size: 18px;}
.form-fields .pd-checkbox.required.error label::after {content: "\f05a"; font-family: FontAwesome; font-style: normal; font-weight: normal; color: #d81100; padding: 0px 2% !important; left: -1%;  position: relative;}
.form-fields .pd-checkbox.required.error .field-input::after {display: none;} 

form.form p.required label, form.form span.required label {padding-left: 0px !important;}
form.form p label {color: #333 !important; font-size: 14px !important; text-align: left !important;}
form.form p {clear: none; line-height: 1.4em; margin: 3px 0px !important;  padding: 0px !important; width: 100%;}
form.form p.no-label { margin-left: 0px !important;}
form.form p.no-label.error {color: #d60101 !important;}
form.form p.submit input { margin: 0px 0px 0 0 !important; padding: 8px 20px !important; background: #0095e7; color: #fff; font-size: 16px !important; font-weight: 400; border: 0px; border-radius: 3px; padding: 0.5em 0.5em;}
form.form p.submit input:hover {background: #0079c1;}
form.form p.required label, form.form span.required label, form.form p label {background: none !important; margin: 0 0 6px 0 !important; padding: 0em !important;}
form.form ul, form.form ol {margin-top: 1em;}
form.form li {float: left !important; margin-bottom: 0px; padding: 0 0 0.825em !important;}
form.form input.text, form.form select {border: 1px solid #BCBEC0 !important; width: 100% !important; max-width: 85% !important; border-radius: 2px; padding: 8px 12px;}
form .form-container .field-label {font-weight: 500 !important; font-size: 14px !important; padding-left: 0px;}
form.form p span.description {margin-top: 6px;}
form.form li.pd-hidden {padding: 0 !important;}
form.form select[multiple] {min-height: 100px;}
form.form pd-textarea textarea.standard {padding: 8px 12px; width: 85%;}
form.form li.Comments2.pd-textarea {width: 100%;}
form.form .Comments2.pd-textarea textarea.standard {width: 85%; min-width: 96%; min-height: 300px;}

.Agree_to_Receive_Marketing_Emails, .field-terms, .Agree_to_CME_Spot_Market_Trading_Agreement, .Agree_to_the_Exchange_Privacy_Policy, .Agree_to_the_Exchange_Rules, .Acknowledge_authorization_to_ET_Agreement, .width-100 {width: 100%;}

/* PREFERENCE CENTER */
.pardotSubscriptionCenter .pd-checkbox span.field-input + span.description {margin: 3px 10px 0 20px;}

/* VALIDATION */

.red-background, form.form p.errors {background: #d70101 !important; color: #fff; padding: 8px 0px 7px 0px !important;}
.red-background, form.form p.errors::before {content: "\f05e"; font-family: FontAwesome; font-style: normal; font-weight: normal; background: #9c0001 !important; color: #fff; padding: 10px 15px !important; margin-right: 10px;}

form .form-fields .error { display: block; font-size: 14px; font-weight: 500 !important; margin: 3px 0px !important;}

.error input[type="text"]{background: rgba(255, 255, 255, 1); color: #d81100; font-weight: 500;}
.error .field-input::after {content: "\f05a"; font-family: FontAwesome; font-style: normal; font-weight: normal; color: #d81100; padding: 0px 2% !important; left: -10%;  position: relative; }
.pd-select .error .field-input::after {content: "\f05a"; font-family: FontAwesome; font-style: normal; font-weight: normal; color: #d81100; padding: 0px 2% !important; left: -13%;  position: relative;}

/* DISABLED */

input[type="text"]:disabled {background: rgba(255, 255, 255,0.15); border: 1px solid #6685a1; width: 99%;}

form.form input.text:focus, form.form select:focus {border: 1px solid #0195E7; -webkit-box-shadow: 0px 0px 8px 0px rgba(1,149,231,1);-moz-box-shadow: 0px 0px 8px 0px rgba(1,149,231,1); box-shadow: 0px 0px 8px 0px rgba(1,149,231,1);}
.form-fields .error {display: block; font-size: 14px; color: #D60101;}

/* DARK THEME */
.pardot-dark {background: transparent;}
.pardot-dark h2, .pardot-dark form h3 {color: #fff !important;}
.pardot-dark.form-container .field-label {color: #fff !important; padding-left: 0px;}
.pardot-dark.form-container .form p {color: #fff;}
.pardot-dark.form-container .form .form-fields .required:before {margin-top: 5px;}
form.form .pardot-dark p label {color: #ffffff !important;}
form.form .pardot-dark input.text, form.form .pardot-dark select {border: 0px !important;}
form .pardot-dark .form-fields .error {display: block; color: #fff !important; font-size: 14px;  font-weight: 500 !important; margin: 3px 0px !important;}
.pardot-dark input[type="text"]:disabled {background: rgba(255, 255, 255,0.15); border: 2px solid rgba(188, 190, 192, 0.5) !important; width: 99%;}
.pardot-dark.form-container .field-label {font-weight: 500 !important; font-size: 14px !important; color: #fff !important;}
form .pardot-dark [type=checkbox], [type=radio] {box-sizing: border-box; padding: 0; margin-right: 5px; height: 15px; width: 15px; opacity: 0.5;}
form .pardot-dark [type=checkbox]:checked, [type=radio]:checked {opacity: 1;}
form.form .pardot-dark input.text, form.form .pardot-dark select, form.form .pardot-dark textarea {background: rgba(255, 255, 255, 0.3); color: #fff; border: 0px;}
form.form .pardot-dark input.text:focus, form.form .pardot-dark select:focus, form.form .pardot-dark textarea:focus {background: rgba(255, 255, 255, 1); color: #000; border: 0px;}
.pardot-dark .border--bottom {border-bottom: 1px solid #fff;}
.pardot-dark .border--top {border-top: 1px solid #fff;}

/* HELPERS */
.border--bottom {border-bottom: 1px solid #ccc;}
.border--top {border-top: 1px solid #ccc;}
.width-75, .width-75-md-and-up {width: 75%;}
.width-50, .width-50-md-and-up {width: 49.9%;}
.width-33, .width-33-md-and-up {width: 33%;}
.width-25, .width-25-md-and-up {width: 25%;}
.margin-top-md-and-up {margin-top: 20px;}

/* Buttons */
.cmePardotButton {margin: 0 !important; padding: 8px 20px !important; background: #0095e7; color: #fff; font-size: 16px !important; font-weight: 400; border: 0px; border-radius: 3px; padding: 0.5em 0.5em;}

/* COMMON UI CLASSES WITH SPECIFICITY */
form.form li.soft--bottom {padding-bottom: 20px!important;}
form.form li.soft--top {padding-top: 20px !important;}
form.form li.hard--bottom {padding-bottom: 0 !important;}
form.form li.hard--top {padding-top: 0 !important;}
form.form li.push--bottom {margin-bottom: 20px !important;}
form.form li.push--top {margin-top: 20px !important;}
form.form li.flush--bottom {margin-bottom: 0 !important;}
form.form li.flush--top {margin-top: 0 !important;}

@media (max-width: 992px) {
	.cmePardot-center-md {text-align: center !important;}
}
@media (max-width: 767px) {
	.width-50-md-and-up, .width-33-md-and-up, .width-75-md-and-up, .width-25-md-and-up {width: 100%;}
	.margin-top-md-and-up {margin-top: 0;}
}
@media (max-width: 315px) {
	.errors {position: relative;}
	.red-background, form.form p.errors::before {position: absolute; height: 100%; left: 0; top: 0;}
	.red-background, form.form p.errors {font-size: 12px; padding-left: 50px !important;}
	.pd-select .error .field-input::after {left: -17%;}

}