<script src="https://www.cognitoforms.com/f/seamless.js" data-key="VSqLsE7970G2a-Ir3-x6cg" data-form="226"></script>
:root .cog-cognito {
  /*  E.g Error message color  */
  --negative: #f66;
  
  /*  E.g. Error message text color  */
  --negative-reverse: white;
  
  /* E.g. focus indication color, calendar selection color    */
  --highlight: #41B883;
  
  /* The color of text on top of the highlight color  */
  --highlight-reverse: white;
  
  /* How much white space between elements */
  --gutter: 30px;
  
  /* How rounded the corners of things in general. It trickles down to specific elements which can be explicitly overridden if you want. 0 is sharp corners. */
  --border-radius: 5px;
  
  /* How thick icon strokes are. *
  --icon-weight: 1;
  
  /* How fast transitions happen. 2 seconds is quite slow. */
  --speed: 2s;
  
  /* The submit button, or next button are primary buttons. */
  --button-primary__border-radius: 25px;
  --button-primary__background-color: #34495E;
  --button-primary__border-color: #34495E;
  
  /* Other things like upload buttons are considered secondary */
  --button-secondary__border-radius: 0;
  --button-secondary__background-color: #41B883;
  --button-secondary__color: white;
  --button-secondary__border-color: #41B883;
  
  /* text input styles */
  --input__background-color: #eee;
  --input__border-width: 2px;
  --input__border-color: #cbd1cb;
  
  /* vertical and horizontal space of a text input */
  --input__padding-v: 12px;
  --input__padding-h: 15px;
  
  --toggle__border-radius: 40px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.