input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"] { background-color: rgb(var(--gray-14)); padding: 0 0.5em; margin: 0 0 1em 0; color: rgb(var(--black)); font-size: 1em; font-family: var(--font-regular); line-height: 2.5em; height: 2.5em; width: 100%; border-width: var(--line-width); border-style: solid; border-color: transparent; border-radius: var(--radius); cursor: text; transition: all var(--animation-speed-fast) ease-in-out; -moz-appearance: textfield; } input[type="email"][disabled], input[type="email"][disabled]:hover, input[type="email"][disabled]:focus, input[type="email"][disabled]::placeholder, input[type="email"][disabled]:hover::placeholder, input[type="email"][disabled]:focus::placeholder, input[type="number"][disabled], input[type="number"][disabled]:hover, input[type="number"][disabled]:focus, input[type="number"][disabled]::placeholder, input[type="number"][disabled]:hover::placeholder, input[type="number"][disabled]:focus::placeholder, input[type="password"][disabled], input[type="password"][disabled]:hover, input[type="password"][disabled]:focus, input[type="password"][disabled]::placeholder, input[type="password"][disabled]:hover::placeholder, input[type="password"][disabled]:focus::placeholder, input[type="search"][disabled], input[type="search"][disabled]:hover, input[type="search"][disabled]:focus, input[type="search"][disabled]::placeholder, input[type="search"][disabled]:hover::placeholder, input[type="search"][disabled]:focus::placeholder, input[type="tel"][disabled], input[type="tel"][disabled]:hover, input[type="tel"][disabled]:focus, input[type="tel"][disabled]::placeholder, input[type="tel"][disabled]:hover::placeholder, input[type="tel"][disabled]:focus::placeholder, input[type="text"][disabled], input[type="text"][disabled]:hover, input[type="text"][disabled]:focus, input[type="text"][disabled]::placeholder, input[type="text"][disabled]:hover::placeholder, input[type="text"][disabled]:focus::placeholder { background-color: rgb(var(--gray-04)); color: rgb(var(--gray-08)); border-color: transparent; cursor: default; box-shadow: none; } input[type="checkbox"][disabled]~.input-helper, input[type="radio"][disabled]~.input-helper, input[type="email"][disabled]~.input-helper, input[type="number"][disabled]~.input-helper, input[type="password"][disabled]~.input-helper, input[type="search"][disabled]~.input-helper, input[type="tel"][disabled]~.input-helper, input[type="text"][disabled]~.input-helper { color: rgb(var(--gray-04)); } input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover { background-color: rgb(var(--gray-16)); border-color: rgb(var(--gray-10)); color: rgb(var(--black)); outline: none; } input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus { background-color: rgb(var(--white)); border-color: transparent; color: rgb(var(--black)); outline: none; z-index: 2; box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 var(--line-width) rgb(var(--accent)); } input[type="email"]::placeholder, input[type="number"]::placeholder, input[type="password"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="text"]::placeholder { color: rgb(var(--gray-10)); transition: all var(--animation-speed-fast) ease-in-out; } input[type="email"]:hover::placeholder, input[type="number"]:hover::placeholder, input[type="password"]:hover::placeholder, input[type="search"]:hover::placeholder, input[type="tel"]:hover::placeholder, input[type="text"]:hover::placeholder { color: rgb(var(--gray-12)); } input[type="email"]:focus::placeholder, input[type="number"]:focus::placeholder, input[type="password"]:focus::placeholder, input[type="search"]:focus::placeholder, input[type="tel"]:focus::placeholder, input[type="text"]:focus::placeholder { color: rgb(var(--gray-14)); } label { padding: 0.5em 0; color: rgb(var(--gray-16)); margin-bottom: 0; font-size: 1em; display: block; } label[disabled] { color: rgb(var(--gray-04)); } input[type="color"] { opacity: 0; width: 2px; height: 2px; position: absolute; top: 0; left: 0; display: block; cursor: pointer; -webkit-appearance: none; } input[type="color"]:focus { outline: none; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: 0; } input[type="color"]+.input-label-button { padding-right: 2.25em; justify-content: center; align-items: center; } input[type="color"]+.input-label-button:before { background-color: rgb(var(--accent)); content: ""; border-radius: 50%; position: absolute; right: 0.5em; width: 1em; height: 1em; z-index: 1; box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4); } .input-wrap, .checkbox-wrap, .radio-wrap { position: relative; } .form-indent-1, .form-indent-1, .form-indent-1 { margin-left: 2.25em; } .form-indent-2, .form-indent-2, .form-indent-2 { margin-left: 4.5em; } .form-indent-3, .form-indent-3, .form-indent-3 { margin-left: 6.75em; } input[type="checkbox"], input[type="radio"] { position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 0; display: block; font-size: 1em; line-height: 1; cursor: pointer; pointer-events: none; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } input[type="checkbox"]+label, input[type="radio"]+label { color: rgb(var(--gray-12)); font-size: 1em; font-family: var(--font-regular); min-height: 2.5em; cursor: pointer; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; /* transition: all var(--animation-speed-fast) ease-in-out; */ } input[type="checkbox"]+label .label-icon, input[type="radio"]+label .label-icon { margin-right: 0.5em; font-size: 1.5em; line-height: 1; display: block; width: 1em; height: 1em; transform: scale(1); transition: transform 0.05s ease-in-out; } input[type="checkbox"]:focus+label, input[type="checkbox"]:hover+label, input[type="radio"]:focus+label, input[type="radio"]:hover+label { color: rgb(var(--white)); } input[type="checkbox"]:active+label, input[type="radio"]:active+label { color: rgb(var(--white)); } input[type="checkbox"]:focus+label .label-icon, input[type="checkbox"]:hover+label .label-icon, input[type="radio"]:focus+label .label-icon, input[type="radio"]:hover+label .label-icon { color: rgb(var(--white)); } input[type="checkbox"]:active+label .label-icon, input[type="radio"]:active+label .label-icon { color: rgb(var(--accent)); transform: scale(0.9); } input[type="checkbox"]:checked+label, input[type="radio"]:checked+label { color: rgb(var(--gray-16)); } input[type="checkbox"]:not([disabled]):hover:checked+label, input[type="checkbox"]:not([disabled]):focus:checked+label, input[type="radio"]:not([disabled]):hover:checked+label, input[type="radio"]:not([disabled]):focus:checked+label { color: rgb(var(--white)); } input[type="checkbox"]:checked+label .label-icon, input[type="radio"]:checked+label .label-icon { color: rgb(var(--accent)); } input[type="checkbox"]:checked:focus+label .label-icon, input[type="radio"]:checked:focus+label .label-icon { transform: scale(1.2); } input[type="color"]+.input-label-button, input[type="checkbox"]+.input-label-button, input[type="radio"]+.input-label-button { justify-content: center; align-items: center; } input[type="color"]:hover+.input-label-button, input[type="color"]:focus+.input-label-button, input[type="checkbox"]:hover+.input-label-button, input[type="checkbox"]:focus+.input-label-button, input[type="radio"]:hover+.input-label-button, input[type="radio"]:focus+.input-label-button { background-color: rgb(var(--gray-03)); border-bottom-color: rgb(var(--gray-10)); color: rgb(var(--white)); outline: none; } input[type="color"]:active+.input-label-button, input[type="checkbox"]:active+.input-label-button, input[type="radio"]:active+.input-label-button { border-bottom-color: rgb(var(--accent)); } input[type="color"]:checked+.input-label-button, input[type="checkbox"]:checked+.input-label-button, input[type="radio"]:checked+.input-label-button { border-bottom-color: rgb(var(--accent)); } input[type="color"][disabled]+.input-label-button, input[type="checkbox"][disabled]+.input-label-button, input[type="radio"][disabled]+.input-label-button { background-color: rgb(var(--gray-02)); border-color: transparent; color: rgb(var(--gray-04)); cursor: default; } input[type="checkbox"][disabled]+label, input[type="radio"][disabled]+label { color: rgb(var(--gray-04)); cursor: default; } input[type="checkbox"][disabled]+label .label-icon, input[type="radio"][disabled]+label .label-icon { color: rgb(var(--gray-04)); cursor: default; } input[type="checkbox"][disabled]:active+label .label-icon, input[type="radio"][disabled]:active+label .label-icon { transform: none; } input[type="checkbox"]+label .label-icon:before, input[type="radio"]+label .label-icon:before { font-family: "Icons" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; } input[type="checkbox"]+label .label-icon:before { content: "\e835"; } input[type="checkbox"]:checked+label .label-icon:before { content: "\e834"; } input[type="radio"]+label .label-icon:before { content: "\e836"; } input[type="radio"]:checked+label .label-icon:before { content: "\e837"; } input[type="range"] { /* background-color: rgb(var(--gray-08)); */ background-color: transparent; padding: 0; margin: 0 0 1em 0; color: rgb(var(--black)); font-size: 1em; font-family: var(--font-regular); height: 2em; width: 100%; border: 0; border-radius: var(--radius); cursor: pointer; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-appearance: none; } input[type="range"]:before { content: ""; position: absolute; top: 50%; left: 0; background-color: rgb(var(--gray-08)); height: var(--line-width); width: 100%; border: 0; border-radius: var(--radius); transform: translate(0, -50%); transition: all var(--animation-speed-fast) ease-in-out; } input[type="range"]:focus { outline: none; } input[type="range"]:focus:before { background-color: rgb(var(--white)); } input[type="range"][disabled] { cursor: default; } input[type="range"][disabled]:before { background-color: rgb(var(--gray-04)); cursor: default; } input[type="range"]::-webkit-slider-runnable-track { background-color: transparent; margin: 0 -0.5em; padding: 0; border: 0; -webkit-appearance: none; } input[type="range"]::-webkit-slider-thumb { background-color: rgb(var(--gray-01)); color: rgb(var(--gray-12)); margin: 0; padding: 0; border-width: var(--line-width); border-style: solid; border-color: rgb(var(--accent)); border-radius: 100%; position: relative; height: 1em; width: 1em; cursor: pointer; box-sizing: border-box; z-index: 2; transform: scale(1); transition: all var(--animation-speed-fast) ease-in-out; -webkit-appearance: none; } input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.9); } input[type="range"]:focus::-webkit-slider-thumb { transform: scale(1.2); outline: none; } input[type="range"]::-webkit-slider-thumb:focus, input[type="range"]::-webkit-slider-thumb:hover { outline: none; text-decoration: none; } input[type="range"]::-webkit-slider-thumb:active { outline: none; text-decoration: none; } input[type="range"][disabled]::-webkit-slider-thumb { border-color: rgb(var(--gray-08)); cursor: default; } input[type="range"][disabled]:active::-webkit-slider-thumb, input[type="range"][disabled]:focus::-webkit-slider-thumb { transform: scale(1); outline: none; } input[type="range"]::-moz-range-track { background-color: rgb(var(--gray-08)); margin: 0 -0.5em; padding: 0; border: 0; height: var(--line-width); width: 100%; border: 0; border-radius: var(--radius); transition: all var(--animation-speed-fast) ease-in-out; -webkit-appearance: none; } input[type="range"]::-moz-range-thumb { background-color: rgb(var(--gray-01)); color: rgb(var(--gray-12)); margin: 0; padding: 0; border-width: var(--line-width); border-style: solid; border-color: rgb(var(--accent)); border-radius: 100%; position: relative; height: 1em; width: 1em; cursor: pointer; box-sizing: border-box; z-index: 2; transform: scale(1); transition: all var(--animation-speed-fast) ease-in-out; -webkit-appearance: none; } input[type="range"]:active::-moz-range-thumb { transform: scale(0.9); } input[type="range"]:focus::-moz-range-thumb { transform: scale(1.2); outline: none; } input[type="range"]::-moz-range-thumb:focus, input[type="range"]::-moz-range-thumb:hover { outline: none; text-decoration: none; } input[type="range"]::-moz-range-thumb:active { outline: none; text-decoration: none; } input[type="range"]::-moz-range-progress { background-color: rgb(var(--accent)); height: calc(var(--line-width) * 1.5); border-radius: var(--radius); } input[type="range"][disabled]::-moz-range-track { background-color: rgb(var(--gray-04)); } input[type="range"][disabled]::-moz-range-thumb { border-color: rgb(var(--gray-08)); cursor: default; } input[type="range"][disabled]:active::-moz-range-thumb, input[type="range"][disabled]:focus::-moz-range-thumb { transform: scale(1); outline: none; } input[type="range"][disabled]::-moz-range-progress { background-color: rgb(var(--gray-08)); }