CSS styling

It’s possible to style and customize your forms with a few clicks. Choose a style below, copy it, and paste the code into the CSS tab on your Workflow Automation form.

These stylesheets are designed for the latest version of Workflow Automation (version 8) and may display inconsistent results on older versions.

To follow along with a custom CSS tutorial for forms, refer to the following guide.

Light mode

Contact Details form in light mode with a plain light gray header and rounded gray input fields

Style template

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

form{
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
}
int-form-section-dropzone .sectionOutline {
border: none;
}
form, md-card.md-default-theme, md-card{
background-color: #F5F5F7 !important;
color: #000 !important;
}
/* Hidden Elements */
.theme-color-bar {
display: none !important;
}
/* Layout */
.title-container {
background: #EDEDF3 !important;
}
.title {
font-size: 24px !important;
padding-left: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
}
.wrapper {
padding: 50px 0 !important;
}
md-input-container {
margin-bottom: 30px !important;
}
/* Fields */
int-form-section-dropzone #expandSection .expand-bar .title, .int-label, input {
color: #000 !important;
font-size: 16px !important;
}
input,textarea,.signaturePadCanvas {
margin: 0 0 10px 0 !important;
}
.md-checked .md-icon:after {
border-color: #000 !important;
}
.md-input {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding: 10px !important;
}
md-input-container>md-select {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding-left: 10px !important;
}
.md-select-value>span:not(.md-select-icon) .md-text {
color: #000 !important;
}
.md-select-value {
border: none !important;
}
.pikadayDatePicker {
color: #000 !important;
border: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
padding: 0px !important;
}
int-question-radio-button md-radio-button {
color: #000 !important;
font-size: 16px !important;
}
.md-icon {
background: #c9c9c9 !important;
border: 1px inset #c9c9c9 !important;
}
.md-off {
background: #F5F5F7 !important;
border-color: #c9c9c9 !important;
}
.md-on {
color: #141E30 !important;
background-color: #000 !important;
}
int-question-signature .readonly-signature {
border: none !important;
}
.md-button{
background-color: #000 !important;
color: #fff !important;
}
.signButton{
padding-left: 20px;
padding-right: 20px;
margin-left: 20px !important;
}
.buttons\_bar .md-button {
background-color: #000 !important;
color: #fff !important;
}
/* Icons */
.buttons_bar .material-icons {
color: #fff !important;
}
.toggle-icon {

background: transparent
url('https://www.nutrient.io/images/guides/workflow-automation/files/1773/light-mode-chevron-right.png') no-repeat center center !important;
background-size: 15px !important;

}

Light gradient mode

Contact Details form in light gradient mode with a gray-to-white gradient header and rounded gray input fields

Style template

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

/* Gradience Variables */
:root {
--primary-color: #d7d7d7;
--secondary-color: #f5f8fb;
--bg-color: #000000;
}

form {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
}

int-form-section-dropzone .sectionOutline {
border: none;
}

form,
md-card.md-default-theme,
md-card {
background-color: #F5F5F7 !important;
color: #000 !important;
}

/* Hidden Elements */
.theme-color-bar {
display: none !important;
}

/* Layout */
.title-container {
background: #EDEDF3;
background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
}

.title {
font-size: 24px !important;
padding-left: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
}

.wrapper {
padding: 50px 0 !important;
}

md-input-container {
margin-bottom: 30px !important;
}

/* Fields */
int-form-section-dropzone #expandSection .expand-bar .title,
.int-label,
input {
color: #000 !important;
font-size: 16px !important;
}
.md-checked .md-icon:after {
border-color: #000 !important;
}
input,
textarea,
.signaturePadCanvas {
margin: 0 0 10px 0 !important;
}

.md-input {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding: 10px !important;
}

md-input-container>md-select {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding-left: 10px !important;
}

.md-select-value>span:not(.md-select-icon) .md-text {
color: #000 !important;
}

.md-select-value {
border: none !important;
}

.pikadayDatePicker {
color: #000 !important;
border: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
padding: 0px !important;
}

int-question-radio-button md-radio-button {
color: #000 !important;
font-size: 16px !important;
}

.md-icon {
background: #c9c9c9 !important;
border: 1px inset #c9c9c9 !important;
}

.md-off {
background: #F5F5F7 !important;
border-color: #c9c9c9 !important;
}

.md-on {
color: #141E30 !important;
background-color: #000 !important;
}

int-question-signature .readonly-signature {
border: none !important;
}

.md-button {
background-color: #000 !important;
color: #fff !important;
}

.signButton {
padding-left: 20px;
padding-right: 20px;
margin-left: 20px !important;
}

.buttons_bar .md-button {
background-color: #000 !important;
color: #fff !important;
}

/* Icons */

.buttons_bar .material-icons {
color: #fff !important;
}

.toggle-icon {

background: transparent url('https://www.nutrient.io/images/guides/workflow-automation/files/1773/light-mode-chevron-right.png') no-repeat center center !important;
background-size: 15px !important;

}

Dark mode

Contact Details form in dark mode with a dark navy background and darker rounded input fields

Style template

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

form {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
}

int-form-section-dropzone .sectionOutline {
border: none;
}

form,
md-card.md-default-theme,
md-card {
background-color: #141E30 !important;
color: #fff !important;
}

/* Hidden Elements */
.theme-color-bar {
display: none !important;
}

/* Layout */
.title-container {
background: #0F192B !important;
}

.title {
font-size: 24px !important;
padding-left: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
}

.wrapper {
padding: 50px 0 !important;
}

md-input-container {
margin-bottom: 30px !important;
}

/* Fields */
int-form-section-dropzone #expandSection .expand-bar .title,
.int-label,
input {
color: #fff !important;
font-size: 16px !important;
}

input,
textarea,
.signaturePadCanvas {
margin: 0 0 10px 0 !important;
}
.md-checked .md-icon:after {
border-color: #000 !important;
}
.md-input {
color: #fff !important;
border-bottom: 1px solid #262C36 !important;
background-color: #0F192B !important;
border-radius: 10px !important;
min-height: 40px !important;
padding: 10px !important;
}

md-input-container>md-select {
color: #fff !important;
border-bottom: 1px solid #262C36 !important;
background-color: #0F192B !important;
border-radius: 10px !important;
min-height: 40px !important;
padding-left: 10px !important;
}

.md-select-value>span:not(.md-select-icon) .md-text {
color: #fff !important;
}

.md-select-value {
border: none !important;
}

.pikadayDatePicker {
color: #fff !important;
border: 1px solid #262C36 !important;
background-color: #0F192B !important;
border-radius: 10px !important;
padding: 0 10px !important;
}

int-question-radio-button md-radio-button {
color: #fff !important;
font-size: 16px !important;
}

.md-icon {
background: #fff !important;
border: 1px inset #fff !important;
}

.md-off {
background: #fff !important;
border-color: #c9c9c9 !important;
}

.md-on {
color: #141E30 !important;
background-color: #141E30 !important;
}

int-question-signature .readonly-signature {
border: none !important;
}

.signButton {
padding-left: 20px;
padding-right: 20px;
margin-left: 20px !important;
}

.buttons_bar .md-button {
background-color: #141E30 !important;
color: #fff !important;
}

/* Icons */
.material-icons {
color: #fff !important;
}

.toggle-icon {

background: transparent url('https://www.nutrient.io/images/guides/workflow-automation/files/1773/dark-mode-chevron-right.png') no-repeat center center !important;
background-size: 15px !important;

}
/*Tables*/
.ui-grid-top-panel, .ui-grid-row, .ui-grid-cell-contents,.ui-grid-render-container, .ui-grid-cell{
background-color: #0F192B !important;
}

Dark gradient mode

Contact Details form in dark gradient mode with a teal-to-purple gradient header on a black background

Style template

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

/* Gradience Variables */
:root {
--primary-color: #004552;
--secondary-color: #19002d;
--bg-color: #000000;
}

form {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
}

int-form-section-dropzone .sectionOutline {
border: none;
}

form,
md-card.md-default-theme,
md-card {
background-color: var(--bg-color) !important;
color: #fff !important;
}

/* Hidden Elements */
.theme-color-bar {
display: none !important;
}

/* Layout */
.title-container {
background: #0F192B;
background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;

}

.title {
font-size: 24px !important;
padding-left: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
}

.wrapper {
padding: 50px 0 !important;
}

md-input-container {
margin-bottom: 30px !important;
}

/* Fields */
int-form-section-dropzone #expandSection .expand-bar .title,
.int-label,
input {
color: #fff !important;
font-size: 16px !important;
}

input,
textarea,
.signaturePadCanvas {
margin: 0 0 10px 0 !important;
}

.md-checked .md-icon:after {
border-color: #000 !important;
}

.md-input {
color: #fff !important;
border-bottom: 1px solid #262C36 !important;
background-color: #0F192B !important;
border-radius: 10px !important;
min-height: 40px !important;
padding: 10px !important;
}

md-input-container>md-select {
color: #fff !important;
border-bottom: 1px solid #262C36 !important;
background-color: #0F192B !important;
border-radius: 10px !important;
min-height: 40px !important;
padding-left: 10px !important;
}

.md-select-value>span:not(.md-select-icon) .md-text {
color: #fff !important;
}

.md-select-value {
border: none !important;
}

.pikadayDatePicker {
color: #fff !important;
border: 1px solid #262C36 !important;
background-color: #0F192B !important;
border-radius: 10px !important;
padding: 0px !important;
}

int-question-radio-button md-radio-button {
color: #fff !important;
font-size: 16px !important;
}

.md-icon {
background: #fff !important;
border: 1px inset #fff !important;
}

.md-off {
background: #fff !important;
border-color: #c9c9c9 !important;
}

.md-on {
color: var(--bg-color) !important;
background-color: var(--bg-color) !important;
}

int-question-signature .readonly-signature {
border: none !important;
}

.signButton {
padding-left: 20px;
padding-right: 20px;
margin-left: 20px !important;
}

.buttons_bar .md-button {
background-color: var(--bg-color) !important;
color: #fff !important;
}

/* Icons */
.material-icons {
color: #fff !important;
}

.toggle-icon {

background: transparent url('https://www.nutrient.io/images/guides/workflow-automation/files/1773/dark-mode-chevron-right.png') no-repeat center center !important;
background-size: 15px !important;

}

/* System Specific */
int-form-render .renderedQuestionSet {
margin: 0px !important;
}

/*Tables*/
.ui-grid-top-panel, .ui-grid-row, .ui-grid-cell-contents,.ui-grid-render-container, .ui-grid-cell{
background-color: #0F192B !important;
}

Classic look

Contact Details form in the classic look with a solid black header and light gray rounded input fields

Style template

For Workflow Automation version 8

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

form {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
}

int-form-section-dropzone .sectionOutline {
border: none;
}

form,
md-card.md-default-theme,
md-card {
background-color: #F5F5F7 !important;
color: #000 !important;
}

/* Hidden Elements */
.theme-color-bar {
display: none !important;
}

/* Layout */
.title-container {
background: #000000 !important;
}

.title {
font-size: 24px !important;
padding-left: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
color: #fff !important;
}

.wrapper {
padding: 50px 0 !important;
}

md-input-container {
margin-bottom: 30px !important;
}

/* Fields */
int-form-section-dropzone #expandSection .expand-bar,
.int-label,
input {
color: #000 !important;
font-size: 16px !important;
}

input,
textarea,
.signaturePadCanvas {
margin: 0 0 10px 0 !important;
}

.md-checked .md-icon:after {
border-color: #000 !important;
}

.md-input {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding: 10px !important;
}

md-input-container>md-select {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding-left: 10px !important;
}

.md-select-value>span:not(.md-select-icon) .md-text {
color: #000 !important;
}

.md-select-value {
border: none !important;
}

.pikadayDatePicker {
color: #000 !important;
border: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
padding: 0px !important;
}

int-question-radio-button md-radio-button {
color: #000 !important;
font-size: 16px !important;
}

.md-icon {
background: #c9c9c9 !important;
border: 1px inset #c9c9c9 !important;
}

.md-off {
background: #F5F5F7 !important;
border-color: #c9c9c9 !important;
}

.md-on {
color: #141E30 !important;
background-color: #000 !important;
}

int-question-signature .readonly-signature {
border: none !important;
}

.md-button {
background-color: #000 !important;
color: #fff !important;
}

.signButton {
padding-left: 20px;
padding-right: 20px;
margin-left: 20px !important;
}

.buttons_bar .md-button {
background-color: #000 !important;
color: #fff !important;
}

/* Icons */
.buttons_bar .material-icons {
color: #fff !important;
}

.toggle-icon {

background: transparent url('https://www.nutrient.io/images/guides/workflow-automation/files/1773/dark-mode-chevron-right.png') no-repeat
center center !important;
background-size: 15px !important;

}

/*Tables*/
.ui-grid-top-panel, .ui-grid-row, .ui-grid-cell-contents,.ui-grid-render-container, .ui-grid-cell{
background-color: #000 !important;
color: #fff !important;
}

For Workflow Automation version 7

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

form {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
}

form int-form-section-dropzone .sectionOutline {
border: none;
}

form,
md-card.md-default-theme,
md-card {
background-color: #F5F5F7 !important;
color: #000 !important;
}

/* Hidden Elements */
.theme-color-bar {
display: none !important;
}

/* Layout */
form .title-container {
background: #000000 !important;
}

form .title {
font-size: 24px !important;
padding-left: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
color: #fff !important;
}

form .wrapper {
padding: 50px 0 !important;
}

form li md-input-container {
margin-bottom: 30px !important;
}

/* Fields */
form int-form-section-dropzone #expandSection .expand-bar,
form .int-label,
form input {
color: #000 !important;
font-size: 16px !important;
}

form input,
form textarea,
form .signaturePadCanvas {
margin: 0 0 10px 0 !important;
}

form .md-checked .md-icon:after {
border-color: #000 !important;
}

form .md-input {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding: 10px !important;
}

form md-input-container>md-select {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding-left: 10px !important;
}

form .md-select-value>span:not(.md-select-icon) .md-text {
color: #000 !important;
}

form .md-select-value {
border: none !important;
}

form .pikadayDatePicker {
color: #000 !important;
border: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
padding: 0px !important;
}

form int-question-radio-button md-radio-button {
color: #000 !important;
font-size: 16px !important;
}

form .md-icon {
background: #c9c9c9 !important;
border: 1px inset #c9c9c9 !important;
}

form .md-off {
background: #F5F5F7 !important;
border-color: #c9c9c9 !important;
}

form .md-on {
color: #141E30 !important;
background-color: #000 !important;
}

form int-question-signature .readonly-signature {
border: none !important;
}

form .md-button {
background-color: #000 !important;
color: #fff !important;
}

form .signButton {
margin-left: 20px !important;
}

form .buttons_bar .md-button {
background-color: #000 !important;
color: #fff !important;
}

/* Icons */
form button .material-icons {
color: #fff !important;
}
form .material-icons {
color: #000 !important;
}

form .buttons_bar .material-icons {
color: #fff !important;
}

form .toggle-icon {

background: transparent url('https://www.nutrient.io/images/guides/workflow-automation/files/1773/dark-mode-chevron-right.png') no-repeat
center center !important;
background-size: 15px !important;

}

Modern black

Contact Details form in the modern black style with an all-black background and white rounded input fields

Style template

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

form {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
}

int-form-section-dropzone .sectionOutline {
border: none;
}

form,
md-card.md-default-theme,
md-card {
background-color: #000 !important;
color: #fff !important;
}

/* Hidden Elements */
.theme-color-bar {
display: none !important;
}

/* Layout */
.title-container {
background: #000 !important;
}

.title {
font-size: 24px !important;
padding-left: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
}

.wrapper {
padding: 50px 0 !important;
}

md-input-container {
margin-bottom: 30px !important;
}

/* Fields */
int-form-section-dropzone #expandSection .expand-bar .title,
.int-label,
input {
color: #fff !important;
font-size: 16px !important;
}

input,
textarea,
.signaturePadCanvas {
margin: 0 0 10px 0 !important;
}
.md-checked .md-icon:after {
border-color: #000 !important;
}
.md-input {
color: #000 !important;
border-bottom: 1px solid #fff !important;
background-color: #fff !important;
border-radius: 10px !important;
min-height: 40px !important;
padding: 10px !important;
}

md-input-container>md-select {
color: #000 !important;
border-bottom: 1px solid #fff !important;
background-color: #fff !important;
border-radius: 10px !important;
min-height: 40px !important;
padding-left: 10px !important;
}

.md-select-value>span:not(.md-select-icon) .md-text {
color: #000 !important;
}

.md-select-value {
border: none !important;
}

.pikadayDatePicker {
color: #000 !important;
border: 1px solid #fff !important;
background-color: #fff !important;
border-radius: 10px !important;
padding: 0 10px !important;
}

int-question-radio-button md-radio-button {
color: #fff !important;
font-size: 16px !important;
}

.md-icon {
background: #fff !important;
border: 1px inset #fff !important;
}

.md-off {
background: #fff !important;
border-color: #c9c9c9 !important;
}

.md-on {
color: #000 !important;
background-color: #000 !important;
}

int-question-signature .readonly-signature {
border: none !important;
}
\#monolith *>button.md-primary int-local-label {
color: #000;
}
.signButton {
padding-left: 20px;
padding-right: 20px;
margin-left: 20px !important;
}

.buttons_bar .md-button {
background-color: #000 !important;
color: #fff !important;
}

/* Icons */
.material-icons {
color: #fff !important;
}

.toggle-icon {

background: transparent url('https://www.nutrient.io/images/guides/workflow-automation/files/1773/dark-mode-chevron-right.png') no-repeat center center !important;
background-size: 15px !important;

}
/*Tables*/
.ui-grid-top-panel, .ui-grid-row, .ui-grid-cell-contents,.ui-grid-render-container, .ui-grid-cell{
background-color: #000 !important;
color: #fff !important;
}

Professional blue

Contact Details form in the professional blue style with a dark blue header and light gray rounded input fields

Style template

For Workflow Automation version 8

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

form{
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
}
int-form-section-dropzone .sectionOutline {
border: none;
}
form, md-card.md-default-theme, md-card{
background-color: #F5F5F7 !important;
color: #000 !important;
}
/* Hidden Elements */
.theme-color-bar {
display: none !important;
}
/* Layout */
.title-container {
background: #00034f !important;
}
.title {
font-size: 24px !important;
padding-left: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
color:#fff !important;
}
.wrapper {
padding: 50px 0 !important;
}
.layout-row {
margin-bottom: 15px !important;
}
/* Fields */
int-form-section-dropzone #expandSection .expand-bar, .int-label, input {
color: #000 !important;
font-size: 16px !important;
}
input,textarea,.signaturePadCanvas {
margin: 0 0 10px 0 !important;
}
.md-checked .md-icon:after {
border-color: #000 !important;
}
md-input-container {
margin-bottom: 30px !important;
}
.md-input {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding: 10px !important;
}
md-input-container>md-select {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 30px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.md-select-value>span:not(.md-select-icon) .md-text {
color: #000 !important;
}
.md-select-value {
border: none !important;
}
.pikadayDatePicker {
color: #000 !important;
border: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
padding: 0px !important;
}
int-question-radio-button md-radio-button {
color: #000 !important;
font-size: 16px !important;
}
.md-icon {
background: #c9c9c9 !important;
border: 1px inset #c9c9c9 !important;
}
.md-off {
background: #F5F5F7 !important;
border-color: #c9c9c9 !important;
}
.md-on {
color: #141E30 !important;
background-color: #000 !important;
}
int-question-signature .readonly-signature {
border: none !important;
}
.md-button{
background-color: #00034f !important;
color: #fff !important;
}
\#monolith *>button.md-primary int-local-label {
color: #fff;
}
.signButton{
padding-left: 20px;
padding-right: 20px;
margin-left: 20px !important;
}
.buttons_bar .md-button {
background-color: #00034f !important;
color: #fff !important;
}
.buttons_bar .material-icons {
color: #fff !important;
}
.toggle-icon {

background: transparent
url('https://www.nutrient.io/images/guides/workflow-automation/files/1773/dark-mode-chevron-right.png') no-repeat center center !important;
background-size: 15px !important;

}
/*Tables*/
.ui-grid-top-panel, .ui-grid-row, .ui-grid-cell-contents,.ui-grid-render-container, .ui-grid-cell{
background-color: #00034f !important;
color: #fff !important;
}

For Workflow Automation version 7

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

form {
font-family: 'Poppins', sans-serif !important;
font-size: 16px !important;
}

form int-form-section-dropzone .sectionOutline {
border: none;
}

form,
md-card.md-default-theme,
md-card {
background-color: #F5F5F7 !important;
color: #000 !important;
}

/* Hidden Elements */
.theme-color-bar {
display: none !important;
}

/* Layout */
form .title-container {
background: #00034f !important;
}

form .title {
font-size: 24px !important;
padding-left: 10px !important;
font-weight: bold !important;
text-transform: uppercase !important;
color: #fff !important;
}

form .wrapper {
padding: 50px 0 !important;
}

form li md-input-container {
margin-bottom: 30px !important;
}

/* Fields */
form int-form-section-dropzone #expandSection .expand-bar,
form .int-label,
form input {
color: #000 !important;
font-size: 16px !important;
}

form input,
form textarea,
form .signaturePadCanvas {
margin: 0 0 10px 0 !important;
}

form .md-checked .md-icon:after {
border-color: #000 !important;
}

form .md-input {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding: 10px !important;
}

form md-input-container>md-select {
color: #000 !important;
border-bottom: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
min-height: 40px !important;
padding-left: 10px !important;
}

form .md-select-value>span:not(.md-select-icon) .md-text {
color: #000 !important;
}

form .md-select-value {
border: none !important;
}

form .pikadayDatePicker {
color: #000 !important;
border: 1px solid #E5E5EB !important;
background-color: #E5E5EB !important;
border-radius: 10px !important;
padding: 0px !important;
}

form int-question-radio-button md-radio-button {
color: #000 !important;
font-size: 16px !important;
}

form .md-icon {
background: #c9c9c9 !important;
border: 1px inset #c9c9c9 !important;
}

form .md-off {
background: #F5F5F7 !important;
border-color: #c9c9c9 !important;
}

form .md-on {
color: #141E30 !important;
background-color: #000 !important;
}

form int-question-signature .readonly-signature {
border: none !important;
}

form .md-button {
background-color: #00034f !important;
color: #fff !important;
}

form .signButton {
margin-left: 20px !important;
}

form .buttons_bar .md-button {
background-color: #00034f !important;
color: #fff !important;
}

/* Icons */
form button .material-icons {
color: #fff !important;
}
form .material-icons {
color: #000 !important;
}

form .buttons_bar .material-icons {
color: #fff !important;
}

form .toggle-icon {

background: transparent url('https://www.nutrient.io/images/guides/workflow-automation/files/1773/dark-mode-chevron-right.png') no-repeat
center center !important;
background-size: 15px !important;

}

CSS styling

Light mode

Style template

Light gradient mode

Style template

Dark mode

Style template

Dark gradient mode

Style template

Classic look

Style template

Modern black

Style template

Professional blue

Style template

Was this helpful?

Help us improve

Thank you for your feedback!

Something went wrong. Please try again or let us know.