Конфигуратор

<style type="text/css">
/* Start custom form CSS generated by https://jennamolby.com/pardot-form-style-generator/ */
/* Load the custom font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
#pardot-form {
font-family:'Noto Sans JP', sans-serif;
}
#pardot-form .form-field {
margin:0;
padding:5px 0 0 0;
}
/* The input fields */
#pardot-form input.text,
#pardot-form textarea.standard,
#pardot-form select,
#pardot-form input.date {
background-color:Gray;
border:solid 1px #d4af37;
font-size:15px;
color:#bcbcbc;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
width:100%;
font-family:'Noto Sans JP', sans-serif;
box-sizing:border-box;
}
/* the input fields on focus */
#pardot-form input.text:focus,
#pardot-form textarea.standard:focus,
#pardot-form select:focus,
#pardot-form input.date:focus {
border-color:#cccccc;
outline: none;
}
#pardot-form span.value {
margin-left: 0;
}
/* the field labels */
#pardot-form label {
font-size:15px;
color:#bcbcbc;
font-weight:normal;
padding-top:5px;
padding-bottom:5px;
float:none;
text-align:left;
width:auto;
display:block;
}
/* the submit button */
#pardot-form .submit input {
margin:0;
background-color:Gray;
border:solid 1px #d4af37;
font-size:16px;
color:white;
font-weight:normal;
padding-top:10px;
padding-bottom:10px;
padding-right:30px;
padding-left:30px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
}
/* the submit button hover */
#pardot-form .submit input:hover {
background-color:black;
border-color:#d4af37;
color:#eeeeee;
}
/* the spacing around the submit button */
#pardot-form .submit {
margin:0;
padding-top:10px;
padding-bottom:0px;
text-align:center;
}
/* hide the regular checkbox */
.pd-checkbox input {
opacity: 0;
position: absolute;
}
/* position the label */
.pd-checkbox input, .pd-checkbox label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.pd-checkbox label {
position: relative;
}
/* style the unchecked checkbox */
.pd-checkbox input+label:before {
content: '';
background:silver;
border: 1px solid#d4af37 ;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 0px;
margin-right: 10px;
text-align: center;
font-size: 15px;
line-height: normal;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* style the checked checkbox */
.pd-checkbox input:checked+label:before {
content: "\2713";
background:silver;
color:black;
border-color:#d4af37;
}
form.form p.no-label {
margin-left: 0 !important;
}
/* hide the regular radio button */
.pd-radio input {
opacity: 0;
position: absolute; 
}
/* position the label */
.pd-radio input, .pd-radio label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.pd-radio label {
position: relative;
}
/* style the unchecked radio button */
.pd-radio input + label:before {
content: '';
background:white;
border: 1px solid#d4af37;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 0px;
margin-right: 10px;
text-align: center;
font-size: 15px;
line-height: normal;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.pd-radio input + label:before {
border-radius: 50%;
}
/* style the selected radio button */
.pd-radio input:checked + label:before {
content: "\25CF";
background:Gray;
color:black;
border-color:#d4af37;
}
</style>