.form { margin: 0 0 1.5rem } .form-fieldset { border-width: 0; margin: 0; padding: 0 } .form-legend { background: transparent; border: solid #454545; border-width: 0 0 1px; display: block; line-height: 32px; margin-bottom: .78571rem; padding: 0; width: 100% } .form-label { color: #666; cursor: pointer; display: block; font-size: 1rem; line-height: 1.5; margin-bottom: .5rem } .form-label small { color: #989898; font-size: .71429rem; text-transform: uppercase; vertical-align: bottom } .form-input { appearance: none; background-color: #fff; border-color: #dfdfdf; border-style: solid; border-width: 1px; border-radius: 4px; color: #454545; display: block; font-family: inherit; font-size: 1rem; font-smoothing: antialiased; height: 3rem; margin: 0; padding: .75rem 1rem; transition: border-color 100ms ease-out; } .form-input:disabled { background-color: #fff; color: #a5a5a5; cursor: not-allowed } .form-input[readonly] { background-color: #f8f8f8; border-color: #454545; color: #989898; cursor: text } .form-input:focus { border-color: #989898; outline: none } .form-input[rows] { height: auto } .form-input[type="search"] { box-sizing: border-box } .form-input::-webkit-input-placeholder { color: #a5a5a5 } .form-input::-ms-clear { height: 0; width: 0 } .form-input::-moz-placeholder { color: #a5a5a5 } .form-input:-ms-input-placeholder { color: #a5a5a5 } .form-select { background-color: #fff; border-radius: 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+); background-position: 100% center; background-repeat: no-repeat; border-style: solid; border-width: 1px; border-color: #dfdfdf; color: #454545; font-family: inherit; font-size: 1rem; line-height: normal; padding: .75rem; border-radius: 0; cursor: pointer; height: 3rem; margin: 0; outline: 0 } .form-select::-ms-expand { display: none } .form-select.radius { border-radius: 4px } .form-select:focus { border-color: #989898 } .form-select:disabled { background-color: #fff; cursor: not-allowed } .form-select:focus { border-color: #989898 } .form-body { background-color: #fff; border: 1px solid #454545; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.13); margin-bottom: 1.5rem; max-width: none; padding: 1.5rem } .form-row { margin: 0 -.75rem; max-width: none; width: auto } .form-row:before, .form-row:after { content: " "; display: table } .form-row:after { clear: both } .form-row .form-field { padding-left: .75rem; padding-right: .75rem; width: 100%; float: left; max-width: none } .form-field { display: block; margin: 0 0 2rem; max-width: none } .form-field:before, .form-field:after { content: " "; display: table } .form-field:after { clear: both } .form-select[multiple] { height: auto } .form-select[multiple] option { padding: 5px } .form-checkbox, .form-radio { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px } .form-checkbox + .form-label, .form-radio + .form-label { display: inline-block; font-size: 1rem; font-weight: 400; margin-bottom: .35714rem; padding-left: 1.85714rem; position: relative; vertical-align: baseline; width: 100% } .form-checkbox + .form-label::before, .form-checkbox + .form-label::after, .form-radio + .form-label::before, .form-radio + .form-label::after { content: ""; display: block; position: absolute; transition: all 50ms ease-out } .form-checkbox + .form-label::before, .form-radio + .form-label::before { background-color: #fff; border: solid #dfdfdf; border-width: 1px; height: 1.14286rem; left: 0; top: 0; width: 1.14286rem } .form-checkbox + .form-label::after, .form-radio + .form-label::after { height: 1rem; left: 1px; opacity: 0; top: 1px; -ms-transform: scale(0); transform: scale(0); width: 1rem } .form-checkbox:checked + .form-label::after, .form-radio:checked + .form-label::after { opacity: 1; -ms-transform: scale(1); transform: scale(1) } .form-checkbox[disabled] + .form-label, .form-radio[disabled] + .form-label { cursor: default } .form-checkbox[disabled] + .form-label::before, .form-radio[disabled] + .form-label::before { background-color: #fff } .form-checkbox + .form-label::before { border-radius: 4px } .form-checkbox + .form-label::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='rgba(79,79,79,0.999)' /%3E%3C/svg%3E"); background-position: 50%; background-repeat: no-repeat; background-size: 100%; color: rgba(79, 79, 79, 0.999); content: ""; font-size: 1rem; line-height: 1; text-align: center } .form-radio + .form-label::before { border-radius: 50% } .form-radio + .form-label::after { background: rgba(79, 79, 79, 0.999); border: 3px solid #fff; border-radius: 1rem } .form-input.has-action { float: left; padding-right: 2.85714rem } .form-input.has-action + .button--inputAction { background: transparent; border: 0; border-radius: 0 0 0 0; float: left; height: 2.85714rem; margin: .07143rem 0 0 -2.92857rem; width: 2.85714rem } .form-input.has-icon { float: left; padding-right: 2.57143rem } .form-input.has-icon + .icon { height: 3rem; margin-left: -2.57143rem; width: 1.42857rem } .form-prefixPostfix { display: flex; flex-direction: row; flex-wrap: nowrap } .form-prefixPostfix .form-input { -ms-flex: 1; flex: 1 } .form-prefixPostfix .button { height: 3rem } .form-prefixPostfix-input { border-radius: 0 0 0 0 } .form-prefixPostfix-label { background-color: #fff; border: solid #454545; border-width: 1px;\ flex: 1; font-weight: 300; height: 3rem; line-height: normal; max-width: 6.42857rem; padding: .75rem; text-align: center } .form-prefixPostfix-label--prefix { border-radius: 0 0 0 0; border-width: 1px 0 1px 1px } .form-prefixPostfix-label--prefix + .form-input { border-radius: 0 0 0 0 } .form-prefixPostfix-label--postfix { border-radius: 0 0 0 0; border-width: 1px 1px 1px 0 } .form-prefixPostfix-button--prefix { margin: 0 .75rem 0 0 } .form-prefixPostfix-button--postfix { margin: 0 0 0 .75rem } .form-actions { background: none; border: 0; text-align: center } .form-actions > * { display: inline-block; margin-bottom: 1rem; width: 100% } .form-input-indicator { height: 1.57143rem; width: 1.57143rem; float: left; margin: 0 0 0 -2.14286rem; position: relative; top: .71429rem } .form-prefixPostfix .form-input-indicator { top: 0 } .form-input-indicator > svg { fill: #69d66f } .form-field-errors { list-style: none; margin-left: 0; margin-left: 0; clear: both; margin-bottom: 0; margin-top: .21429rem } .form-field-errors ul, .form-field-errors ol { list-style: none; margin-bottom: 0 } .form-inlineMessage { display: inline-block; line-height: 24px; margin: .35714rem 0 -.5rem; width: 100% } .form-field--success .form-input, .form-field--error .form-input, .form-field--warning .form-input { float: left } .form-field--success .form-input, .form-field--success .form-select, .form-field--success .form-checkbox + .form-label::before, .form-field--success .form-radio + .form-label::before, .form-field--success .form-prefixPostfix-label { border-color: #69d66f } .form-field--success .form-field-error, .form-field--success .form-inlineMessage { color: #69d66f } .form-field--success .form-input-indicator > svg { fill: #69d66f } .form-field--error .form-input, .form-field--error .form-select, .form-field--error .form-checkbox + .form-label::before, .form-field--error .form-radio + .form-label::before, .form-field--error .form-prefixPostfix-label { border-color: #ff7d7d } .form-field--error .form-field-error, .form-field--error .form-inlineMessage { color: #ff7d7d } .form-field--error .form-input-indicator > svg { fill: #ff7d7d } .form-field--warning .form-input, .form-field--warning .form-select, .form-field--warning .form-checkbox + .form-label::before, .form-field--warning .form-radio + .form-label::before, .form-field--warning .form-prefixPostfix-label { border-color: #d4cb49 } .form-field--warning .form-field-error, .form-field--warning .form-inlineMessage { color: #d4cb49 } .form-field--warning .form-input-indicator > svg { fill: #d4cb49 } .form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z' fill='rgba(130,130,130,0.999)' /%3E%3C/svg%3E"); background-position: right .57143rem top .71429rem; border-radius: 4px; padding: .75rem 3rem .75rem 1rem } .form-label small { float: right; margin-top: .35714rem } .form-label--inlineSmall small { color: #989898; float: none; font-size: inherit; font-weight: 400; margin-left: .35714rem; text-transform: none } .form--hiddenLabels .form-label { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px } .form-inlineMessage { display: block } .form-field--error .form-input { float: none } .form-field--error .form-inlineMessage:before { background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill='rgba(255,125,125,0.999)' /%3E%3C/svg%3E") no-repeat; background-size: 100%; content: ""; display: inline-block; height: 1rem; left: -.14286rem; margin-right: .07143rem; position: relative; top: .21429rem; width: 1rem } .form-field--success .form-input[type="text"] { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='rgba(105,214,111,0.999)' /%3E%3C/svg%3E"); background-position: right .71429rem center; background-repeat: no-repeat; padding-right: 3rem } .form-checkbox + .form-label:last-child, .form-radio + .form-label:last-child { display: block; margin-bottom: -.28571rem } .form-checkbox + .form-label::after, .form-radio + .form-label::after { top: .28571rem } .form-checkbox + .form-label::before, .form-radio + .form-label::before { top: .21429rem } .form-actions { margin: 0 auto; max-width: 85.71429rem; width: 100%; display: block; text-align: center } .form-actions:before, .form-actions:after { content: " "; display: table } .form-actions:after { clear: both } .form-actions .button, .form-actions input, .form-actions a { vertical-align: top; width: 100% } .form-actions .button + .button, .form-actions .button + input, .form-actions .button + a, .form-actions input + .button, .form-actions input + input, .form-actions input + a, .form-actions a + .button, .form-actions a + input, .form-actions a + a { margin-top: .78571rem } .form-label--alternate { font-family: "Montserrat", Arial, Helvetica, sans-serif; font-size: 13px; margin-bottom: .78571rem } .form-select--date { width: initial } .form-select--date + .form-select--date { margin-left: .35714rem } .form-select--small, .form-select--date { background-position: right .5rem top .5rem; background-size: 1.28571rem; font-size: 13px; height: 2.28571rem; line-height: 1rem; max-width: 20rem; padding: .57143rem .78571rem; padding-right: 2rem } .form-select--short { max-width: 6rem; width: 4.5rem } .form-file { margin-bottom: .5rem } .form-fileDescription { color: #a5a5a5; font-size: 13px } .form-field-group { border: 1px solid #dfdfdf; border-radius: 4px; padding: 1.5rem } .form-column { padding-left: .75rem; padding-right: .75rem; width: 100%; float: left } .form-prefixPostfix.wrap { -ms-flex-wrap: wrap; flex-wrap: wrap } .form-prefixPostfix .form-input, .form-prefixPostfix .button { display: block; width: 100% } .form-prefixPostfix .form-inlineMessage { margin-bottom: .35714rem } .form-prefixPostfix-button--postfix { margin: .78571rem 0 0; -ms-flex-order: 1; order: 1 } .form-increment .button { margin: 0; padding: .21429rem .35714rem } .form-input--incrementTotal { border: 0; display: inline-block; font-size: 15px; font-weight: 700; height: auto; padding: 0; text-align: center; vertical-align: middle; width: 2.5rem } .form-option { border: 1px solid #dfdfdf; color: #666; cursor: pointer; display: inline-block; font-size: 0; margin-bottom: .5rem; margin-right: .5rem; padding: 1px; transition: all .15s ease } .form-option:hover { border-color: #989898 } .form-radio:checked + .form-option { border-color: #4f4f4f; box-shadow: 0 0 0 1px #4f4f4f } .form-option-variant { display: inline-block; font-size: 1rem; min-width: 2.71429rem; padding: 1px .35714rem; pointer-events: none; text-align: center } .form-option-variant--color, .form-option-variant--pattern { height: 1.57143rem; width: 1.57143rem; min-width: initial; padding: 0 } .form-option-variant--pattern { background-position: center; background-repeat: no-repeat } .form-input--small { font-size: 13px; height: 2.28571rem; line-height: 1rem; padding: .57143rem .78571rem } .form-minMaxRow { margin-left: -.375rem; margin-right: -.375rem } .form-minMaxRow:before, .form-minMaxRow:after { content: " "; display: table } .form-minMaxRow:after { clear: both } .form-minMaxRow .form-field { padding-left: .75rem; padding-right: .75rem; width: 33.33333%; float: left; margin-bottom: 0; padding-left: .375rem; padding-right: .375rem } .form-minMaxRow .button { margin-bottom: 0; padding-left: 0; padding-right: 0; width: 100% } [data-product-attribute] .form-option { overflow: hidden; position: relative } [data-product-attribute] .form-option.unavailable { background-color: #ddd; opacity: .3 } [data-product-attribute] .form-option.unavailable:before { background-color: #000; content: ""; height: 2px; left: -5px; position: absolute; top: 11px; -ms-transform: rotate(-45deg); transform: rotate(-45deg); width: 141% } [data-product-attribute="set-radio"] .unavailable, [data-product-attribute="product-list"] .unavailable { opacity: .6; text-decoration: line-through }