/* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } label { display: inline-block; margin-bottom: 0.5rem; } button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 1px auto -webkit-focus-ring-color; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } select { word-wrap: normal; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; line-height: inherit; color: inherit; white-space: normal; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { height: auto; min-height: 50px; border-radius: 3px; } select { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border-radius: 3px; } button:not(.kaliforms-pagebreak__button) { padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 3px; background: transparent; cursor: auto; } [data-whatinput='mouse'] button { outline: 0; } pre { overflow: auto; } button, input, optgroup, select, textarea, #kali-stripe-iban-element, #kali-stripe-card-element { font-family: inherit; } .is-visible { display: block !important; } .is-hidden { display: none !important; } [type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea, #kali-stripe-iban-element, #kali-stripe-card-element { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 2.4375rem; margin: 0 0 1rem; padding: 0.5rem; border: 1px solid #cacaca; border-radius: 3px; background-color: #fefefe; -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); font-family: inherit; font-weight: normal; color: #0a0a0a; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, #kali-stripe-card-element--focus, textarea:focus { outline: none; // border: 1px solid #8a8a8a; // background-color: #fefefe; -webkit-box-shadow: 0 0 5px #cacaca; box-shadow: 0 0 5px #cacaca; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; } textarea { max-width: 100%; } textarea[rows] { height: auto; } input:disabled, input[readonly], textarea:disabled, textarea[readonly] { background-color: #e6e6e6; cursor: not-allowed; } [type='submit'], [type='button'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 3px; } input[type='search'] { -webkit-box-sizing: border-box; box-sizing: border-box; } ::-webkit-input-placeholder { color: #cacaca; } :-ms-input-placeholder { color: #cacaca; } ::-ms-input-placeholder { color: #cacaca; } ::placeholder { color: #cacaca; } [type='checkbox']+label, [type='radio']+label { display: inline-block; vertical-align: baseline; margin-left: 0.5rem; margin-right: 1rem; margin-bottom: 0; } [type='checkbox']+label[for], [type='radio']+label[for] { cursor: pointer; } label>[type='checkbox'], label>[type='radio'] { margin-right: 0.5rem; } label>[type='radio'] { position: relative; top: -2px; } [type='file'] { width: 100%; } [type='range'] { width: 100%; } label { display: block; font-weight: normal; color: #0a0a0a; } label.middle { margin: 0 0 1rem; padding: 0.5625rem 0; } .help-text { margin-top: -0.5rem; font-style: italic; color: #0a0a0a; } .input-group { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin-bottom: 1rem; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .input-group> :first-child, .input-group> :first-child.input-group-button>* { border-radius: 3px 0 0 3px; } .input-group> :last-child, .input-group> :last-child.input-group-button>* { border-radius: 0 3px 3px 0; } .input-group-label, .input-group-field, .input-group-button, .input-group-button a, .input-group-button input, .input-group-button button, .input-group-button label { margin: 0; white-space: nowrap; } .input-group-label { padding: 0 1rem; border: 1px solid #cacaca; background: #e6e6e6; color: #0a0a0a; text-align: center; white-space: nowrap; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .input-group-label:first-child { border-right: 0; } .input-group-label:last-child { border-left: 0; } .input-group-field { border-radius: 0; -webkit-box-flex: 1; -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; min-width: 0; } .input-group-button { padding-top: 0; padding-bottom: 0; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .input-group-button a, .input-group-button input, .input-group-button button, .input-group-button label { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; height: auto; padding-top: 0; padding-bottom: 0; } fieldset { margin: 0; padding: 0; border: 0; } legend { max-width: 100%; margin-bottom: 0.5rem; } .fieldset { margin: 1.125rem 0; padding: 1.25rem; border: 1px solid #cacaca; } .fieldset legend { margin: 0; margin-left: -0.1875rem; padding: 0 0.1875rem; } select { height: 2.4375rem; margin: 0 0 1rem; padding: 0.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #cacaca; border-radius: 3px; background-color: #fefefe; font-family: inherit; font-weight: normal; color: #0a0a0a; background-image: url("data:image/svg+xml;utf8,"); background-origin: content-box; background-position: right -.3rem center; background-repeat: no-repeat; background-size: 9px 6px; padding-right: 1.5rem; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; } @media screen and (min-width: 0\0) { select { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } } select:focus { outline: none; border: 1px solid #8a8a8a; background-color: #fefefe; -webkit-box-shadow: 0 0 5px #cacaca; box-shadow: 0 0 5px #cacaca; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; } select:disabled { background-color: #e6e6e6; cursor: not-allowed; } select::-ms-expand { display: none; } select[multiple] { height: auto; background-image: none; } #kali-stripe-iban-element, #kali-stripe-card-element { padding-top: 9px !important; } #kali-stripe-card-element--invalid { border-color: #c60f13; } .is-invalid-input:not(:focus) { border-color: #c60f13; background-color: #f8e6e7; } .is-invalid-input:not(:focus)::-webkit-input-placeholder { color: #c60f13; } .is-invalid-input:not(:focus):-ms-input-placeholder { color: #c60f13; } .is-invalid-input:not(:focus)::-ms-input-placeholder { color: #c60f13; } .is-invalid-input:not(:focus)::placeholder { color: #c60f13; } .is-invalid-label { color: #c60f13; } .form-error { display: none; margin-top: -0.5rem; margin-bottom: 1rem; font-weight: bold; color: #c60f13; } .form-error.is-visible { display: block; }