Seeking CSS for form field padding > radio buttons > options

Seeking CSS for form field padding > radio buttons > options (top and bottom only)
Thanks!

Hi,

Can you share link to page where you use form? We can check easier

https://www.pancakeandfranks.com/inquire

Password: hello7

Since I posted this I lost all of the css on my website; I am now rewriting snippet. In lieu of this  particular code I have two issues:

I want to increase the padding between the radio buttons. 
I want all the text in the description boxes to be #EF1577, currently the text is black and I cannot figure out why.

css for form here:
 

.form-wrapper .field-list .title {
  font-family: garamond!important;
  font-size: 30px!important;
  color: #EAE0C7!important;
  letter-spacing: -0.02;
  text-transform: none;
background: transparent;
}

.form-wrapper .field-list .field .caption {
  font-family: garamond;
  font-size:30px;
  color: #EAE0C7 !important;
  letter-spacing: -0.01;
  text-transform: none;
}

.form-wrapper .field-list .description {
  font-family: garamond;
  font-size: 30px;
  color: #EAE0C7!important;
  letter-spacing: -0.01; text-transform: none;
}

.form-wrapper .field-list .field .field-element {
  background-color: transparent !important;
  border-bottom: 1px solid #EAE0C7!important;
 border-top: none !important;
 border-left: none !important;
border-right: none !important;
  border-radius: 0;
}

.form-wrapper .form-wrapper .field-list .field.checkbox label {
  background-color: transparent !important;
  border: 2px solid #EAE0C7!important;
  border-radius: 0;
}

.header-nav-folder-content {
   background: transparent !important;
  color: #EAE0C7 !important;
 
  a {
  color: #EAE0C7 !important;}}

/* Radio Buttons */

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.option input[type="radio"]:active {
  cursor:pointer;
  width:20px;
  height:20px;
  background-color:transparent;
  border-radius:50%;
}
/* Selected */
.option input[type="radio"]:checked {
  cursor:pointer;
  width:20px;
  height:20px;
  background-color:#EAE0C7;
  border-radius:50%;
}
.option input[type="radio"] {
/* un-selected */
  background-clip: content-box;
  border: 1px solid #EAE0C7;
  border-radius: 50%;
  content: " ";
  cursor:pointer;
  width:20px;
  height:20px;
}

/* checkbox */

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.option input[type=checkbox]:active {
  cursor:pointer;
  width:20px;
  height:20px;
  background-color:transparent;
  border-radius:4px;
}
/* Selected */
.option input[type=checkbox]:checked {
  cursor:pointer;
  width:20px;
  height:20px;
  background-color:#EAE0C7;
  border-radius:4px;
}
.option input[type=checkbox] {
/* un-selected */
  background-clip: content-box;
  border: 1px solid #EAE0C7;
  border-radius: 1px;
  content: " ";
  cursor:pointer;
  width:20px;
  height:20px;
}

17 hours ago, Pancake said:

https://www.pancakeandfranks.com/inquire

Password: hello7

Since I posted this I lost all of the css on my website; I am now rewriting snippet. In lieu of this  particular code I have two issues:

I want to increase the padding between the radio buttons. 
I want all the text in the description boxes to be #EF1577, currently the text is black and I cannot figure out why.

 

 

#1. Use this CSS code

.form-wrapper .field-list .field .option {
    margin-bottom: 30px !important;
}

#2. Use this

.form-field-style-solid .site-wrapper .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]) {
    color: #ef1577 !important;
}

Thank you! Thank you! Two more things...

1. The text in the form field under "Share a Love Story" is still black. I  want to make it #ef1577

2. How do I create more padding between all the elements and the title above each element

#1. It is fine to me

#2. You mean these spaces?

Since our message from yesterday all my code stopped working (again) and the form is not responding. Once SS fixes their platform bugs I will be able to take proper screenshots regarding the padding issue. In the interim, the fonts are supposed to be #EF1577 in all input areas, however the text is black in the areas on the screen shot.

I am back. 🙂 See screen shots regarding padding areas. Also, font color issue in the second from last field (Share a Love Story)

You mean change Share a love story text + add a space between Project - Options, Budget, Do you.. - Options?

Space between: All titles and radio button options (Project, Budget, Do you prefer to ....)

Currently, the input text below Share a Love Story is black and not #EF1577

You can use this CSS code

textarea {
    color: #ef1577 !important;
}

fieldset legend.title {
    margin-bottom: 20px !important;
}

This works perfectly, thank you! Two more inquiries... 🙂 

1. How to increase all the type size in the text area boxes?
2. How to increase padding between the highlighted areas in the attached.

#1. Use add font-size

textarea {
    color: #ef1577 !important;
	font-size: 30px !important;
}

#2. Use this CSS

div.email {
    margin-top: 40px !important;
}
div.email+div {
    margin-top: 40px !important;
}
div.email+div+* {
    margin-top: 40px !important;
}

Thank you very much!

Jumping in here to see how you were able to customize your radio button fill colour @Pancake. I've been at this for hours and am starting to go crazy 🤪

I am not very good at css and cannot remember the details of the radio button fill color. Highlighting the radio button css in green below but what you are looking for may be floating in a different spot. Sorry. You can try to approach this by adding my css to your website and delete each css piece one by one: wish I was more helpful.

.form-field-style-solid .site-wrapper .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]) {color: #ef1577 !important;
    font-size: 25px !important;
}

/* Padding Form */
.form-wrapper .field-list .field .option  {
    margin-bottom: 20px !important;
}

 .form-wrapper .field-list .title {
  font-family: garamond!important;
  font-size: 30px!important;
  color: #EAE0C7!important;
  letter-spacing: -0.02;
  text-transform: none;
background: transparent;
}

.form-wrapper .field-list .field .caption {
  font-family: garamond;
  font-size:30px;
  color: #EAE0C7!important;
  letter-spacing: -0.01;
  text-transform: none;
}

.form-wrapper .field-list .description {
  font-family: garamond;
  font-size: 30px;
  color: #EAE0C7!important;
  letter-spacing: -0.01; text-transform: none;
}

.form-wrapper .field-list .field .field-element {
  background-color: transparent !important;
  border-bottom: 1px solid #EAE0C7!important;
 border-top: none !important;
 border-left: none !important;
border-right: none !important;
  border-radius: 0;
}

.form-wrapper .form-wrapper .field-list .field.checkbox label {
  background-color: transparent !important;
  border: 2px solid #EAE0C7!important;
  border-radius: 0;
}

.header-nav-folder-content {
   background: transparent !important;
  color: #EAE0C7 !important;
  a {
  color: #EAE0C7 !important;
}
}

/* Radio Buttons */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.option input[type="radio"]:active {
  cursor:pointer;
  width:20px;
  height:20px;
  background-color:transparent;
  border-radius:50%;
}
/* Selected */
.option input[type="radio"]:checked {
  cursor:pointer;
  width:20px;
  height:20px;
  background-color:#EAE0C7;
  border-radius:50%;
}
.option input[type="radio"] {
/* un-selected */
  background-clip: content-box;
  border: 1px solid #EAE0C7;
  border-radius: 50%;
  content: " ";
  cursor:pointer;
  width:20px;
  height:20px;
}

/* checkbox */
input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.option input[type=checkbox]:active {
  cursor:pointer;
  width:20px;
  height:20px;
  background-color:transparent;
  border-radius:4px;
}
/* Selected */
.option input[type=checkbox]:checked {
  cursor:pointer;
  width:20px;
  height:20px;
  background-color:#EAE0C7;
  border-radius:4px;
}
.option input[type=checkbox] {
/* un-selected */
  background-clip: content-box;
  border: 1px solid #EAE0C7;
  border-radius: 1px;
  content: " ";
  cursor:pointer;
  width:20px;
  height:20px;
}

textarea {
    color: #ef1577 !important;
}

fieldset legend.title {
    margin-bottom: 20px !important;
}



textarea {
    color: #ef1577 !important;
    font-size: 25px !important;
}

div.email {
    margin-top: 40px !important;
}
div.email+div {
    margin-top: 40px !important;
}
div.email+div+* {
    margin-top: 40px !important;
}

option input {
    color: #ef1577 !important;
    font-size: 25px !important;
}