/* ===================== */
/* Base HTML & Body      */
/* ===================== */

html {
height: 99% !important;
padding-right: 1px !important;
scrollbar-width: none !important; /* Firefox */
}

html::-webkit-scrollbar {
display: none !important; /* Chrome, Safari, Edge */
}

body {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
}

@media screen and (max-width: 992px) {
body {
min-height: auto !important;
}
}

/* ===================== */
/* Pardot Form Base      */
/* ===================== */

#pardot-form {
font-family: "Roboto", sans-serif;
}

#pardot-form h1 {
font-size: 3rem;
color: #070707;
letter-spacing: -0.03em;
font-weight: 400;
margin: 0 0 2rem;
line-height: 1em;
}

#pardot-form h2 {
font-size: 1.5rem;
color: #070707;
letter-spacing: -0.03em;
font-weight: 400;
margin: 0 0 2rem;
line-height: 1.2em;
}

#pardot-form p {
font-size: 1rem;
color: #474747;
margin: 0 0 1.5rem;
}

/* ===================== */
/* Errors                */
/* ===================== */

#pardot-form .errors {
color: white;
}

#pardot-form .error {
color: red;
}

#pardot-form .form-field.error {
position: relative;
}

#pardot-form .form-field.error input,
#pardot-form .form-field.error select,
#pardot-form .form-field.error textarea {
border: 1px solid red;
outline: none;
padding-right: 40px;
}

#pardot-form .form-field.error input::placeholder,
#pardot-form .form-field.error textarea::placeholder {
color: #d32f2f;
opacity: 1;
}

#pardot-form .form-field.error select {
border: 1px solid #f44336;
background-color: #fff5f5;
color: #d32f2f;
background-image: none !important;
appearance: none;
position: relative;
}

#pardot-form .form-field.error textarea {
min-height: 100px;
padding: 16px;
}

#pardot-form p.error.no-label {
color: #d32f2f;
font-size: 14px;
margin-top: 5px;
font-weight: 400;
display: none !important;
}

/* Error Icon */
#pardot-form .form-field.error::after {
content: "!";
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #d32f2f;
position: absolute;
right: 10px;
top: 45%;
transform: translateY(40%);
width: 20px;
height: 20px;
border: 1px solid #d32f2f;
border-radius: 50%;
text-align: center;
line-height: 18px;
background-color: white;
}

/* ===================== */
/* Form Fields           */
/* ===================== */

#pardot-form .form-field {
margin: 0 0 12px;
padding: 0;
}

#pardot-form input.text,
#pardot-form textarea.standard,
#pardot-form select,
#pardot-form input.date {
background-color: white;
border: 1px solid #e8e5e3;
font-size: 14px;
color: #070707;
border-radius: 8px;
padding: 16px 20px;
width: 100%;
box-sizing: border-box;
}

#pardot-form textarea {
resize: vertical;
font-family: "Roboto", sans-serif !important;
}

/* Focus State */
#pardot-form input.text:focus,
#pardot-form textarea.standard:focus,
#pardot-form select:focus,
#pardot-form input.date:focus {
border-color: #e8e5e3;
outline: none;
}

/* Labels */
#pardot-form label {
font-size: 14px;
color: #070707;
font-weight: normal;
padding: 0 0 8px;
display: block;
background: none !important;
width: auto !important;
}

/* ===================== */
/* Submit Button         */
/* ===================== */

#pardot-form .submit {
margin-bottom: 1rem;
padding: 24px 0 0;
text-align: left;
}

#pardot-form .submit input {
margin: 0;
background-color: #070707;
border: 1px solid #070707;
font-size: 16px;
color: white;
padding: 12px 24px;
border-radius: 9999px;
}

#pardot-form .submit input:hover {
background-color: #2e2e2e;
border-color: #070707;
color: white;
}

/* Paragraph after submit */
p.submit + p {
margin-bottom: 0px !important;
}

/* ===================== */
/* Custom Dropdown       */
/* ===================== */

#pardot-form select {
appearance: none;
background-color: white;
border: 1px solid #e8e5e3;
font-size: 14px;
color: #070707;
border-radius: 8px;
padding: 16px 40px 16px 20px;
width: 100%;
box-sizing: border-box;
background-image: url("https://cdn.prod.website-files.com/6798a4db9ed2b5ffc8c81f32/67dd7b8397eed1ec7ce7f3bc_Dropdown%20Indication.svg");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px 12px;
cursor: pointer;
}

#pardot-form select::-ms-expand {
display: none;
}

/* ===================== */
/* Checkboxes & Radios   */
/* ===================== */

.pd-checkbox input,
.pd-radio input {
opacity: 0;
position: absolute;
}

.pd-checkbox input,
.pd-checkbox label,
.pd-radio input,
.pd-radio label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}

.pd-checkbox label,
.pd-radio label {
position: relative;
}

/* Checkbox - Unchecked */
.pd-checkbox input + label:before {
content: "";
background: white;
border: 1px solid #c7c7c7;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
text-align: center;
border-radius: 5px;
}

/* Checkbox - Checked */
.pd-checkbox input:checked + label:before {
content: "\2713";
background: #2ca4bf;
color: white;
border-color: #2ca4bf;
}

/* Radio - Unchecked */
.pd-radio input + label:before {
content: "";
background: white;
border: 1px solid #c7c7c7;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
}

/* Radio - Checked */
.pd-radio input:checked + label:before {
content: "\25CF";
background: #2ca4bf;
color: white;
border-color: #2ca4bf;
}

/* ===================== */
/* Form Container Layout */
/* ===================== */

form#pardot-form.form {
margin: 0 !important;
overflow: hidden;
border-radius: 1rem !important;
}

@media (max-width: 991px) {
form#pardot-form.form {
padding: 16px 8px !important;
}
}

/* ===================== */
/* Links                 */
/* ===================== */

a:-webkit-any-link {
color: #474747 !important;
}

/* ===================== */
/* Custom layout         */
/* ===================== */

/* Group First Name + Last Name in one row */
#pardot-form .form-field.first_name,
#pardot-form .form-field.last_name {
display: inline-block;
width: calc(50% - 7px);
vertical-align: top;
}


/* Group Company + Country in one row */
#pardot-form .form-field.company,
#pardot-form .form-field.email {
display: inline-block;
width: calc(50% - 7px);
vertical-align: top;
}

/* Remove right margin from last name */
#pardot-form .form-field.last_name {
margin-right: 0;
}

/* Adding gap between */
#pardot-form .form-field.first_name,
#pardot-form .form-field.email {
margin-right: 10px;
}

@media (max-width: 500px) {
#pardot-form .first_name{
width: 100% !important;
}
#pardot-form .last_name{
width: 100% !important;
}
#pardot-form .company{
width: 100% !important;
}
#pardot-form .email{
width: 100% !important;
}
}