.formulate-input { margin-bottom: 2em; } .formulate-input .formulate-input-label { display: block; line-height: 1.5; font-size: .9em; font-weight: 600; margin-bottom: .1em; } .formulate-input .formulate-input-element { max-width: 20em; margin-bottom: .1em; } .formulate-input .formulate-input-help { color: #6d6d6d; font-size: .7em; font-weight: 400; line-height: 1.5; margin-bottom: .25em; } .formulate-input .formulate-input-errors { list-style-type: none; padding: 0; margin: 0; } .formulate-input .formulate-input-error { color: #960505; font-size: .8em; font-weight: 300; line-height: 1.5; margin-bottom: .25em; } .formulate-input .formulate-input-group-item { margin-bottom: .5em; } .formulate-input:last-child { margin-bottom: 0; } .formulate-input[data-classification='text'] input { appearance: none; border-radius: .3em; border: 1px solid #cecece; box-sizing: border-box; background-color: transparent; font-size: .9em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: .75em; display: block; width: 100%; font-weight: 400; } .formulate-input[data-classification='text'] input::placeholder { color: #a8a8a8; } .formulate-input[data-classification='text'] input:focus { outline: 0; border: 1px solid #41b883; } .formulate-input[data-classification='slider'] input { appearance: none; width: 100%; font-size: 1em; padding: .5em 0; } .formulate-input[data-classification='slider'] input:focus { outline: 0; } .formulate-input[data-classification='slider'] input::-webkit-slider-thumb { cursor: pointer; appearance: none; width: 1em; height: 1em; border-radius: 1em; background-color: #41b883; margin-top: calc(-.5em + 2px); } .formulate-input[data-classification='slider'] input::-moz-range-thumb { cursor: pointer; appearance: none; width: 1em; height: 1em; border-radius: 1em; background-color: #41b883; margin-top: calc(-.5em + 2px); } .formulate-input[data-classification='slider'] input::-ms-thumb { cursor: pointer; appearance: none; width: 1em; height: 1em; border-radius: 1em; background-color: #41b883; margin-top: calc(-.5em + 2px); } .formulate-input[data-classification='slider'] input::-webkit-slider-runnable-track { appearance: none; width: 100%; height: 4px; background-color: #efefef; border-radius: 3px; margin: 0; padding: 0; } .formulate-input[data-classification='textarea'] textarea { appearance: none; border-radius: .3em; border: 1px solid #cecece; box-sizing: border-box; background-color: transparent; font-size: .9em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: .75em; display: block; width: 100%; font-weight: 400; } .formulate-input[data-classification='textarea'] textarea::placeholder { color: #a8a8a8; } .formulate-input[data-classification='textarea'] textarea:focus { outline: 0; border: 1px solid #41b883; } .formulate-input[data-classification='select'] .formulate-input-element { position: relative; } .formulate-input[data-classification='select'] .formulate-input-element::before { content: ''; width: 0; height: 0; border: .3em solid transparent; border-top-color: #cecece; border-bottom-width: 0; top: 50%; margin-top: -.1em; right: 1em; position: absolute; } .formulate-input[data-classification='select'] select { appearance: none; border-radius: .3em; border: 1px solid #cecece; box-sizing: border-box; background-color: transparent; font-size: .9em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: .75em; display: block; width: 100%; font-weight: 400; padding-right: 2em; } .formulate-input[data-classification='select'] select::placeholder { color: #a8a8a8; } .formulate-input[data-classification='select'] select:focus { outline: 0; border: 1px solid #41b883; } .formulate-input[data-classification='select'] select[data-placeholder-selected] { color: #a8a8a8; } .formulate-input[data-classification='box'] .formulate-input-wrapper { display: flex; align-items: center; } .formulate-input[data-classification='box'] .formulate-input-element { overflow: hidden; display: flex; align-items: center; } .formulate-input[data-classification='box'] .formulate-input-element input { position: absolute; left: -999px; } .formulate-input[data-classification='box'] .formulate-input-element-decorator { display: block; width: 1em; height: 1em; border-radius: .25em; border: 1px solid #cecece; position: relative; } .formulate-input[data-classification='box'] .formulate-input-element-decorator::before { content: ''; display: block; background-size: contain; background-position: right; width: calc(100% - .125em); height: calc(100% - .125em); box-sizing: border-box; position: absolute; top: .0625em; left: .0625em; } .formulate-input[data-classification='box'] .formulate-input-element[data-type="radio"] .formulate-input-element-decorator { border-radius: 1em; } .formulate-input[data-classification='box'] .formulate-input-element[data-type="radio"] .formulate-input-element-decorator::before { border-radius: 1em; width: calc(100% - .5em); height: calc(100% - .5em); top: .25em; left: .25em; } .formulate-input[data-classification='box'] .formulate-input-element input[type="checkbox"]:checked ~ .formulate-input-element-decorator { border-color: #41b883; } .formulate-input[data-classification='box'] .formulate-input-element input[type="checkbox"]:checked ~ .formulate-input-element-decorator::before { background-image: url('data:image/svg+xml;utf8,'); } .formulate-input[data-classification='box'] .formulate-input-element input[type="radio"]:checked ~ .formulate-input-element-decorator { border-color: #41b883; } .formulate-input[data-classification='box'] .formulate-input-element input[type="radio"]:checked ~ .formulate-input-element-decorator::before { background-color: #41b883; } .formulate-input[data-classification='box'] .formulate-input-element input:focus ~ .formulate-input-element-decorator { border-color: #41b883; } .formulate-input[data-classification='box'] .formulate-input-label--after { margin-left: .5em; } .formulate-input[data-classification='box'] .formulate-input-label--before { margin-right: .5em; } .formulate-input[data-classification="group"] > .formulate-input-wrapper > .formulate-input-label { margin-bottom: .5em; }