:root {
  /* Font Families */
  /* Web font families can be imported here, or by editing your base page templates siteCSS */

  --font-sans: 'Barlow', 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
  /* --font-serif: Georgia, Cambria, "Times New Roman", Times, serif; */
  /* --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */

  /* Font size overrides */

  /* --font-size-sm: 1rem; */
  /*--font-size-base: 1.125rem;*/
  /*--font-size-lg: 1.25rem;*/
  /*--font-size-xl: 1.5rem;*/
  /*--font-size-2xl: 1.875rem;*/
  /*--font-size-3xl: 2.25rem;*/
  /* --font-size-4xl: 5rem; */
  /*--font-size-5xl: 3rem;*/
  /*--font-size-6xl: 4rem;*/
  --font-size-6xl: 6rem;
}

custom-form {
			width: 100%;
		}
		.custom-form h1,
		.custom-form h2,
		.custom-form h3 {
			color: var(--text-primary-color);
		}
		.custom-form label {
			display: flex;
			flex-wrap: wrap;
			position: relative;
			/* padding-bottom: 2rem; */
		}
		.custom-form label span {	
			width: 100%;
			flex-shrink: 0;
			flex-grow: 1;
			flex-basis: auto;
		}
		.custom-form label .title {
			text-transform: uppercase;
			font-weight: 700;
			padding-bottom:  .5rem;
			font-size: 1rem;
		}
		.custom-form .validate-field {
			background-color: #fff;
			font-family: var(--font-sans);
			font-size: var(--font-size-base);
			border: 1px solid #ddd;
			color: var(--text-primary-color) !important;
			width: 100%;
			border-radius: 2rem;
			padding: .6rem 1rem;
			border: 1px solid var(--border-primary-color);
		}
		.custom-form .validate-field::-webkit-input-placeholder {
		  color: var(--color-gray-600);
		}
		.custom-form .validate-field::-moz-placeholder {
		  color: var(--color-gray-600);
		}
		.custom-form .validate-field:-ms-input-placeholder {
		  color: var(--color-gray-600);
		}
		.custom-form .validate-field:-moz-placeholder {
		  color: var(--color-gray-600);
		}
		.custom-form .validate-field::placeholder {
		  color: var(--color-gray-600);
		}
		.custom-form .validate-field:focus {
			outline: 0;
		}
		.custom-form .validate-field + .validation-msg {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			color: var(--color-red-600) !important;
			height: 2rem;
			line-height: 1rem;
			font-size: .85rem;
			display: flex;
			align-items: center;
			opacity: 0;
			will-change: opacity;
			transition: opacity .1s ease-in-out;
		}
		.custom-form .validate-field:invalid:not(:focus):not(:placeholder-shown),
		.custom-form .validate-field:invalid:focus:not(:placeholder-shown),
		.custom-form .validate-field.empty {
			border-color: var(--color-red-600) !important;
		}
		.custom-form .validate-field:invalid:not(:focus):not(:placeholder-shown) + .validation-msg,
		.custom-form .validate-field:invalid:focus:not(:placeholder-shown) + .validation-msg,
		.custom-form .validate-field.empty + .validation-msg {
			opacity: 1;
		}
		.custom-form .actions {
			display: flex;
			justify-content: flex-start;
		}
		/* dark styles */
		.custom-form.dark h1,
		.custom-form.dark h2, 
		.custom-form.dark h3 {
			color: #fff !important;
		}
		.custom-form.dark label .title {
			color: #fff !important;
		}
		.custom-form.dark .validate-field {
			color: var(--text-primary-color) !important;
		}
		.custom-form.dark .validate-field + .validation-msg {
			color: var(--color-red-500) !important;
		}
		.custom-form.dark .validate-field:invalid:not(:focus):not(:placeholder-shown),
		.custom-form.dark .validate-field:invalid:focus:not(:placeholder-shown),
		.custom-form.dark .validate-field.empty {
			border-color: var(--color-red-500) !important;
		}
		.btn.btn-primary {
		    font-size: 1em;
            padding: 0.6em 2em;
            font-weight: bold;
		}