*, :after, :before { /*box-sizing: border-box;*/ } .kit-field, .kit-field.autoComplete_wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 10px 0; position: relative; pointer-events: none; line-height: 1.5em; --kit-field-focus-label-zoom-ratio: 0.875; --kit-field-line-padding: 3px; --line-height-ratio: 1.5; --kit-field-check-mark-stroke-dash-ratio: 45; } .kit-field__input { position: relative; background-color: #fff; border: 1px solid #ebddca; box-shadow: none; color: var(--kit-color); font-size: inherit; font-family: var(--kit-font-family); -webkit-transition: border-color .15s, background-color .15s; transition: border-color .15s, background-color .15s; width: 100%; } .kit-field__input:hover { border-color: #827a70; } .kit-field--text { } .kit-field__color { display: none; } .kit-field__label { display: none; } .kit-field__hr { display: none; pointer-events: none; } .kit-field__message { display: none; } .kit-field input[type="color"] ~ .kit-field__color { display: flex; flex: 1 1 auto; order: 110; } .kit-field input[type="color"] { height: calc(1.5em + var(--kit-field-line-padding)); flex: 0 0 calc(1.5em + var(--kit-field-line-padding)); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; } .kit-field input[type="color"]::-webkit-color-swatch { border-radius: 3px; padding: 0; border: 1px solid rgba(26, 26, 26, 0.40); } .kit-field input[type="color"]::-moz-color-swatch { border-radius: 3px; padding: 0; border: 1px solid rgba(26, 26, 26, 0.40); } .kit-field input[type="color"]::-webkit-color-swatch-wrapper{ } .kit-field input[type="color"]::-moz-color-swatch-wrapper { } .kit-field input[type="radio"]:checked ~ .kit-field__hr { } .kit-field input[type='checkbox'], .kit-field input[type='radio'] { display: none; } .kit-field__label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .kit-field--select, .kit-field--text { padding: 1.5em 0 0 0; margin: 0 0 var(--kit-field-gap, 1.5em) 0; } .kit-field__hr { display: block; position: absolute; bottom: 0; right: 0; left: 0; border-top: 1px solid var(--kit-color-text); z-index: 0; } .kit-field__hr:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; border-top: 2px solid var(--kit-color-primary); -moz-transition: left 0.15s, width 0.15s; transition: left 0.15s, width 0.15s; z-index: 1; } .kit-field.kit-field--bordered .kit-field__input { padding-right: 10px; padding-left: 10px; } .kit-field.kit-field--bordered .kit-field__input:focus ~.kit-field__hr, .kit-field.kit-field--bordered .kit-field__input.focus ~.kit-field__hr { border-color: var(--kit-color-primary); } .kit-field.kit-field--bordered .kit-field__input.kit-field--error ~.kit-field__hr { border-color: var(--kit-color-error) !important; } .kit-field.kit-field--bordered input.kit-field__input:-webkit-autofill { box-shadow: inset -1px -1px 0 #6b6b6b, inset 1px 1px 0 #6b6b6b; } .kit-field.kit-field--bordered .kit-field__label { -moz-transition: none !important; transition: none !important; font-size: 11px !important; top: -5px !important; } .kit-field.kit-field--bordered .kit-field__hr { z-index: -2; top: 20px; border: 1px solid #6b6b6b; background: #fff; } .kit-field.kit-field--bordered .kit-field__hr:after { display: none !important; } .kit-field.kit-field--bordered.kit-field--radius .kit-field__hr { border-radius: 2px; } .kit-field.kit-field--bordered.kit-field--radius select.kit-field__input { border-radius: 2px; } .kit-field textarea { overflow: auto; } .kit-field textarea.kit-autoheight { overflow: hidden; } .kit-field textarea, .kit-field input, .kit-field.autoComplete_wrapper > input, .kit-field .kit-field__display { pointer-events: auto; background-color: transparent; display: block; width: 100%; max-width: 100%; color: transparent; font-weight: normal; line-height: 1.5em; min-height: calc(1.5em + 6px); height: 100%; border: none; margin: 0; padding-left: 0; padding-bottom: var(--kit-field-line-padding); padding-top: var(--kit-field-line-padding); text-align: left; -moz-transition: color 0.3s 0.1s; transition: color 0.3s 0.1s; text-overflow: ellipsis; order: 100; flex: 1 1 100%; outline-width: 0; font-family: var(--kit-font-family); list-style-type: none; background-image: none; background-position: unset; border-radius: 0; } .kit-field textarea[data-dirty='true'], .kit-field input[data-dirty='true'], .kit-field [data-dirty='true'] ~ .kit-field__display{ color: var(--kit-color-text); } .kit-field [data-dirty='true'] ~ .kit-field__label, .kit-field input[type='checkbox'] ~.kit-field__label { top: 0; /*transform: translate(0, 0);*/ } .kit-field .kit-field__label { font-weight: 400; line-height: calc(1em * 1.5); position: absolute; display: block; top: calc(100% - 1em* 1.5 - var(--kit-field-line-padding)* 2); /*transform: translate(0, -100%);*/ left: 0; color: var(--kit-color-text); pointer-events: none; /*-moz-transition: font 0.15s, top 0.15s, color 0.15s;*/ /*transition: font 0.15s, top 0.15s, transform 0.15s, color 0.15s;*/ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%; padding-bottom: var( --kit-field-line-padding); padding-top: var( --kit-field-line-padding); } .kit-field__label-content { --line-clamp: 1; --line-clamp-height: var(--line-height-ratio); } .kit-field input[type="file"] ~ .kit-field__label { pointer-events: auto; cursor: pointer; } .kit-field input[type="file"] ~ .kit-field__display { cursor: auto; } .kit-field__display-file { } .kit-field__label-icon, .kit-field__display-file-icon { width: 1em; margin-right: 0.3em; } .kit-field textarea:focus, .kit-field input:focus, .kit-field textarea.focus, .kit-field input.focus { color: var(--kit-color-text); border-color: transparent; } .kit-field textarea:focus ~.kit-field__label, .kit-field input:focus ~.kit-field__label, .kit-field textarea.focus ~.kit-field__label, .kit-field input.focus ~.kit-field__label { top: 0; transform: translate(0, 0); font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio)); color: var(--kit-color-primary); } .kit-field textarea:focus ~.kit-field__hr:after, .kit-field input:focus ~.kit-field__hr:after, .kit-field textarea.focus ~.kit-field__hr:after, .kit-field input.focus ~.kit-field__hr:after { left: 0; width: 100%; } .kit-field textarea::-ms-clear, .kit-field input[type='password']::-ms-clear, .kit-field input[type='email']::-ms-clear, .kit-field input[type='text']::-ms-clear, .kit-field input[type='number']::-ms-clear, .kit-field input[type='tel']::-ms-clear, .kit-field .kit-field__display::-ms-clear { display: none; } .kit-field textarea:disabled, .kit-field input[type='password']:disabled, .kit-field input[type='email']:disabled, .kit-field input[type='text']:disabled, .kit-field input[type='number']:disabled, .kit-field input[type='tel']:disabled, .kit-field .kit-field__display:disabled { color: #e1e1e1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .kit-field textarea:disabled ~.kit-field__message, .kit-field input[type='password']:disabled ~.kit-field__message, .kit-field input[type='file']:disabled ~.kit-field__message, .kit-field input[type='email']:disabled ~.kit-field__message, .kit-field input[type='text']:disabled ~.kit-field__message, .kit-field input[type='number']:disabled ~.kit-field__message, .kit-field input[type='tel']:disabled ~.kit-field__message, .kit-field .kit-field__display:disabled ~.kit-field__message, .kit-field textarea:disabled ~.kit-field__label, .kit-field input[type='password']:disabled ~.kit-field__label, .kit-field input[type='file']:disabled ~.kit-field__label, .kit-field input[type='email']:disabled ~.kit-field__label, .kit-field input[type='text']:disabled ~.kit-field__label, .kit-field input[type='number']:disabled ~.kit-field__label, .kit-field input[type='tel']:disabled ~.kit-field__label, .kit-field .kit-field__display:disabled ~.kit-field__label { color: #e1e1e1 !important; } .kit-field textarea:disabled ~.kit-field__hr, .kit-field input[type='password']:disabled ~.kit-field__hr, .kit-field input[type='file']:disabled ~.kit-field__hr, .kit-field input[type='email']:disabled ~.kit-field__hr, .kit-field input[type='text']:disabled ~.kit-field__hr, .kit-field input[type='number']:disabled ~.kit-field__hr, .kit-field input[type='tel']:disabled ~.kit-field__hr, .kit-field .kit-field__display:disabled ~.kit-field__hr { border-color: #e1e1e1 !important; } .kit-field .kit-field__error, .kit-field .kit-field__message { text-align: left; display: block; position: absolute; top: 100%; left: 0; width: 100%; font-size: 11px; line-height: 20px; color: var(--kit-color-error); opacity: 0; visibility: hidden; -moz-transition: opacity 0.15s, visibility 0.15s; transition: opacity 0.15s, visibility 0.15s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .kit-field .kit-field__message { color: var(--kit-color); } .kit-field .kit-field--error ~.kit-field__message { opacity: 1; visibility: visible; color: var(--kit-color-error); } .kit-field .kit-field--error ~.kit-field__label { color: var(--kit-color-error) !important; } .kit-field .kit-field--error ~.kit-field__hr:after { border-color: var(--kit-color-error) !important; } .kit-field .kit-field--warning ~.kit-field__message { opacity: 1; visibility: visible; color: var(--kit-color-warning); } .kit-field .kit-field--warning ~.kit-field__label { color: var(--kit-color-warning) !important; } .kit-field .kit-field--warning ~.kit-field__hr:after { border-color: var(--kit-color-warning) !important; } .kit-field__text { display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .kit-field__icon { position: absolute; top: calc(var(--kit-field-line-padding) + var(--line-height-ratio) * var(--font-size) / 2); transform: translate(0, -50%); left: 0; width: 1em; height: 1em; border: 1px solid var(--kit-color-text); -moz-transition: border 0.15s, background 0.15s, -moz-transform 0.15s; transition: border 0.15s, background 0.15s, -webkit-transform 0.15s; transition: border 0.15s, background 0.15s, transform 0.15s; } .kit-field__icon:before { content: ''; } .kit-field__icon > svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -moz-transition: -moz-transform 0.15s, opacity 0.15s, fill 0.15s; transition: -webkit-transform 0.15s, opacity 0.15s, fill 0.15s; transition: transform 0.15s, opacity 0.15s, fill 0.15s; overflow: visible; } .kit-field input[type='checkbox'], .kit-field input[type='radio'] { display: none; } .kit-field input[type='checkbox'] ~.kit-field__label, .kit-field input[type='radio'] ~.kit-field__label { pointer-events: auto; flex-grow: 1; } .kit-field .kit-field__button { position: absolute; height: 30px; right: 0; bottom: 0; padding: 0; font-size: 11px; } .kit-field input[type='radio'] ~.kit-field__text { padding-left: 28px; } .kit-field input[type='radio'] ~.kit-field__label { display: inline-block; vertical-align: top; padding-left: 28px; position: relative; cursor: pointer; } .kit-field input[type='radio'] ~.kit-field__label .kit-field__icon { border-radius: 50%; } .kit-field input[type='radio'] ~.kit-field__label .kit-field__icon >svg { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .kit-field input[type='radio'] ~.kit-field__label .kit-field__icon >svg circle { fill: #e24949; } .kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon { border-color: var(--kit-color-text); } .kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon >svg { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .kit-field input[type='radio']:checked:disabled ~.kit-field__label .kit-field__icon >svg circle { fill: #e1e1e1; } .kit-field input[type='radio'].kit-field--error:checked ~.kit-field__label .kit-field__icon { border-color: var(--kit-color-error); } .kit-field input[type='radio'].kit-field--error:checked ~.kit-field__label .kit-field__icon >svg circle { fill: var(--kit-color-error); } .kit-field input[type='radio'].kit-field--error ~.kit-field__label .kit-field__icon { border-color: var(--kit-color-error); } .kit-field input[type='radio']:disabled ~.kit-field__label { cursor: default; color: #e1e1e1 !important; } .kit-field input[type='radio']:disabled ~.kit-field__label .kit-field__icon { cursor: default; border-color: #e1e1e1 !important; } .kit-field input[type='radio']:disabled ~.kit-field__label .kit-field__icon >svg circle { fill: #e1e1e1 !important; } .kit-field input[type='radio']:disabled ~.kit-field__text { color: #e1e1e1; } .kit-field input[type='checkbox'] ~.kit-field__text { padding-left: 28px; } .kit-field input[type='checkbox'] ~.kit-field__label { display: inline-block; vertical-align: top; padding-left: 1.75em; position: relative; cursor: pointer; /* line-height: 1em; */ min-height: calc(var(--font-size) * 1.5 + var(--kit-field-line-padding) * 2); padding-bottom: var( --kit-field-line-padding); padding-top: var( --kit-field-line-padding); } /* kit-field--check-mark-material */ .kit-field input[type='checkbox'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon, .kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon { border: 0; } .kit-field input[type='checkbox'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon >svg, .kit-field input[type='radio'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon >svg { opacity: 0; transition: none; } .kit-field input[type='checkbox'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before, .kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before { content: ''; position: absolute; left: 0; bottom: 0; width: 1em; height: 1em; border: 1px solid var(--kit-color-text); display: block; box-sizing: border-box; transition: 0.2s; } .kit-field input[type='radio'].kit-field--check-mark-material ~.kit-field__label .kit-field__icon:before { border-radius: 50%; } .kit-field input[type='checkbox'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon:before, .kit-field input[type='radio'].kit-field--check-mark-material:checked ~.kit-field__label .kit-field__icon:before { border-width: 2px; border-style: solid; border-color: var(--kit-color-primary-b1); border-left-color: transparent; border-top-color: transparent; width: 0.7em; height: 1.2em; transform: rotate( 45deg ) translate(-3px, 0px); transform-origin: 100% 100%; border-radius: 0; } /* kit-field--check-mark-stroke */ .kit-field input[type='checkbox'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon >svg, .kit-field input[type='radio'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon >svg { opacity: 1; transition: none; overflow: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .kit-field input[type='checkbox'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__check-mark, .kit-field input[type='radio'].kit-field--check-mark-stroke ~.kit-field__label .kit-field__check-mark { fill: none; stroke: var(--kit-color-primary); stroke-width: 3; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; stroke-dasharray: var(--kit-field-check-mark-stroke-dash-ratio); stroke-dashoffset: var(--kit-field-check-mark-stroke-dash-ratio); transition: 0.3s; } .kit-field input:checked.kit-field--check-mark-stroke ~.kit-field__label .kit-field__icon .kit-field__check-mark { stroke-dashoffset: 0; } .kit-field input[type='checkbox'] ~.kit-field__message { padding-left: 28px; } .kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon { /*border-color: var(--kit-color-primary);*/ /*background: var(--kit-color-primary);*/ } .kit-field input[type='checkbox']:checked ~.kit-field__label .kit-field__icon >svg, .kit-field input[type='radio']:checked ~.kit-field__label .kit-field__icon >svg { opacity: 1; fill: var(--kit-color-primary); stroke: var(--kit-color-primary); } .kit-field input[type='checkbox']:checked:disabled ~.kit-field__label .kit-field__icon { background: #e1e1e1; border-color: #e1e1e1; } .kit-field input[type='checkbox'].kit-field--error:checked ~.kit-field__label .kit-field__icon { background: transparent; border-color: var(--kit-color-error); } .kit-field input[type='checkbox'].kit-field--error ~.kit-field__label .kit-field__icon { border-color: var(--kit-color-error); } .kit-field input[type='checkbox']:disabled ~.kit-field__label { color: #858585 !important; cursor: default; } .kit-field input[type='checkbox']:disabled ~.kit-field__label .kit-field__icon { cursor: default; border-color: #e1e1e1; } .kit-field input[type='checkbox']:disabled ~.kit-field__text { color: #e1e1e1; } .kit-field__state { display: block; position: absolute; top: 20px; right: 0; height: 30px; width: 15px; } .kit-field__state ~input.kit-field__input { padding-right: 30px !important; } .kit-field__state .kit-field__load { position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 0; width: 15px; height: 15px; margin: auto; background: transparent; border: 2px solid #6b6b6b; border-bottom-color: transparent; border-radius: 100%; -webkit-animation: ball-clip-rotate 0.75s linear infinite; -moz-animation: ball-clip-rotate 0.75s linear infinite; animation: ball-clip-rotate 0.75s linear infinite; } .kit-button.kit-button--secondary { --kit-color-button-text-disabled: var(--kit-color-secondary-text, var(--kit-color-text)); --kit-color-button-content-disabled: var(--kit-color-secondary-w1, var(--kit-color-secondary)); --kit-color-button-material-disabled: var(--kit-color-secondary); --kit-color-button-text-default: var(--kit-color-secondary-text, var(--kit-color-text)); --kit-color-button-content-default: var(--kit-color-secondary); --kit-color-button-material-default: var(--kit-color-secondary-b1, var(--kit-color-secondary)); --kit-color-button-text-hover: var(--kit-color-secondary-text, var(--kit-color-text)); --kit-color-button-content-hover: var(--kit-color-secondary-b1, var(--kit-color-secondary)); --kit-color-button-material-hover: var(--kit-color-secondary-b2, var(--kit-color-secondary)); --kit-color-button-text-active: var(--kit-color-secondary-text, var(--kit-color-text)); --kit-color-button-content-active: var(--kit-color-secondary-b2, var(--kit-color-secondary)); --kit-color-button-material-active: var(--kit-color-secondary-b3, var(--kit-color-secondary)); } .kit-button.kit-button--primary { --kit-color-button-text-disabled: var(--kit-color-primary-text, var(--kit-color-text)); --kit-color-button-content-disabled: var(--kit-color-primary-w3, var(--kit-color-primary)); --kit-color-button-material-disabled: var(--kit-color-primary); --kit-color-button-text-default: var(--kit-color-primary-text, var(--kit-color-text)); --kit-color-button-content-default: var(--kit-color-primary); --kit-color-button-material-default: var(--kit-color-primary-b1, var(--kit-color-primary)); --kit-color-button-text-hover: var(--kit-color-primary-text, var(--kit-color-text)); --kit-color-button-content-hover: var(--kit-color-primary-b1, var(--kit-color-primary)); --kit-color-button-material-hover: var(--kit-color-primary-b2, var(--kit-color-primary)); --kit-color-button-text-active: var(--kit-color-primary-text, var(--kit-color-text)); --kit-color-button-content-active: var(--kit-color-primary-b2, var(--kit-color-primary)); --kit-color-button-material-active: var(--kit-color-primary-b3, var(--kit-color-primary)); } .kit-button.kit-button--warning { --kit-color-button-text-disabled: var(--kit-color-warning-text, var(--kit-color-text)); --kit-color-button-content-disabled: var(--kit-color-warning-w2, var(--kit-color-warning)); --kit-color-button-material-disabled: var(--kit-color-warning-w1, var(--kit-color-warning)); --kit-color-button-text-default: var(--kit-color-warning-text, var(--kit-color-text)); --kit-color-button-content-default: var(--kit-color-warning); --kit-color-button-material-default: var(--kit-color-warning-b1, var(--kit-color-warning)); --kit-color-button-text-hover: var(--kit-color-warning-text, var(--kit-color-text)); --kit-color-button-content-hover: var(--kit-color-warning-b1, var(--kit-color-warning)); --kit-color-button-material-hover: var(--kit-color-warning-b2, var(--kit-color-warning)); --kit-color-button-text-active: var(--kit-color-warning-text, var(--kit-color-text)); --kit-color-button-content-active: var(--kit-color-warning-b2, var(--kit-color-warning)); --kit-color-button-material-active: var(--kit-color-warning-b3, var(--kit-color-warning)); } .kit-button.kit-button--success { --kit-color-button-text-disabled: var(--kit-color-success-text, var(--kit-color-text)); --kit-color-button-content-disabled: var(--kit-color-success-w2, var(--kit-color-success)); --kit-color-button-material-disabled: var(--kit-color-success-w1, var(--kit-color-success)); --kit-color-button-text-default: var(--kit-color-success-text, var(--kit-color-text)); --kit-color-button-content-default: var(--kit-color-success); --kit-color-button-material-default: var(--kit-color-success-b1, var(--kit-color-success)); --kit-color-button-text-hover: var(--kit-color-success-text, var(--kit-color-text)); --kit-color-button-content-hover: var(--kit-color-success-b1, var(--kit-color-success)); --kit-color-button-material-hover: var(--kit-color-success-b2, var(--kit-color-success)); --kit-color-button-text-active: var(--kit-color-success-text, var(--kit-color-text)); --kit-color-button-content-active: var(--kit-color-success-b2, var(--kit-color-success)); --kit-color-button-material-active: var(--kit-color-success-b3, var(--kit-color-success)); } .kit-button.kit-button--error { --kit-color-button-text-disabled: var(--kit-color-error-text, var(--kit-color-text)); --kit-color-button-content-disabled: var(--kit-color-error-w3, var(--kit-color-error)); --kit-color-button-material-disabled: var(--kit-color-error-w1, var(--kit-color-error)); --kit-color-button-text-default: var(--kit-color-error-text, var(--kit-color-text)); --kit-color-button-content-default: var(--kit-color-error); --kit-color-button-material-default: var(--kit-color-error-b1, var(--kit-color-error)); --kit-color-button-text-hover: var(--kit-color-error-text, var(--kit-color-text)); --kit-color-button-content-hover: var(--kit-color-error-b1, var(--kit-color-error)); --kit-color-button-material-hover: var(--kit-color-error-b2, var(--kit-color-error)); --kit-color-button-text-active: var(--kit-color-error-text, var(--kit-color-text)); --kit-color-button-content-active: var(--kit-color-error-b2, var(--kit-color-error)); --kit-color-button-material-active: var(--kit-color-error-b3, var(--kit-color-error)); } .kit-button, a.kit-button { --kit-color-button-text: var(--kit-color-button-text-default); --kit-color-button-content: var(--kit-color-button-content-default); --kit-color-button-material: var(--kit-color-button-material-default); font-size: 0.9em; /*font-family: var(--kit-font-family);*/ display: inline-flex; flex-direction: row; align-items: center; padding: 0 1.25em; margin: 0; height: 1.875em; text-align: center; white-space: nowrap; -webkit-appearance: none; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; background-color: var(--kit-color-button-content); background-image: none; outline: none; border: none; color: var(--kit-color-button-text); text-decoration: none !important; -moz-transition: background 0.3s, box-shadow 0.3s, color 0.3s; transition: background 0.3s, box-shadow 0.3s, color 0.3s; position: relative; /*box-shadow: 0px 2px 7px -6px var(--kit-color-button-content, var(--kit-color-text));*/ -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); border-radius: 0; font-weight: normal; } .kit-button:before { content: ''; } .kit-button * { pointer-events: none; } .kit-button:focus { --kit-color-button-text: var(--kit-color-button-text-active); --kit-color-button-content: var(--kit-color-button-content-active); --kit-color-button-material: var(--kit-color-button-material-active); } .kit-button:hover { --kit-color-button-text: var(--kit-color-button-text-hover); --kit-color-button-content: var(--kit-color-button-content-hover); --kit-color-button-material: var(--kit-color-button-material-hover); } .kit-button:active { --kit-color-button-text: var(--kit-color-button-text-active); --kit-color-button-content: var(--kit-color-button-content-active); --kit-color-button-material: var(--kit-color-button-material-active); -webkit-transform: translateY(1px); -moz-transform: translateY(1px); -ms-transform: translateY(1px); transform: translateY(1px); -moz-transition: none; transition: none; } .kit-button__icon { display: inline-block; height: 1em; max-width: 1em; flex: 0 0 auto; margin-right: 0.4em; } .kit-button__icon:empty { display: none; } .kit-button__label ~ .kit-button__icon { margin-right: 0; margin-left: 0.4em; } .kit-button__label { --line-clamp: 1; --line-clamp-height: 1em; white-space: normal; text-transform: uppercase; } .kit-button.kit-disabled, .kit-button:disabled, .kit-button[disabled], .kit-button.disabled, .kit-button.inactive-button, .kit-button[loading], .kit-button.loading { opacity: 0.7; --kit-color-button-content: var(--kit-color-button-content-disabled); --kit-color-button-text:var(--kit-color-button-text-disabled); --kit-color-button-material: var(--kit-color-button-material-disabled); cursor: default !important; pointer-events: none; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.06); } .kit-button.kit-disabled > *, .kit-button:disabled > *, .kit-button[disabled] > *, .kit-button.disabled > *, .kit-button.inactive-button > * { opacity: 0.85; } .disabled, :disabled { pointer-events: none !important; } .kit-button.kit-button--wide { display: block; width: 100%; } .kit-button.kit-button--line { font-size: 0.9em; align-items: baseline; height: 1.15em; padding: 0.125em 0.75em 0; line-height: 1em; } .kit-button.kit-button--line .kit-button__icon { height: 0.8em; } .kit-button.kit-button--radius, .kit-button.kit-button--radius:before, .kit-button.kit-button--radius .kit-button__border { border-radius: 2px; } .kit-button.kit-button--round, .kit-button.kit-button--round:before, .kit-button.kit-button--round .kit-button__border { border-radius: 1em; } .kit-button.kit-button--bordered { color: var(--kit-color-button-content); background-color: transparent; position: relative; transition: inherit; } .kit-button.kit-button--icon { padding-left: 0.75em; padding-right: 0.75em; flex-shrink: 0; justify-content: center; } .kit-button.kit-button--icon .kit-button__label { display: none; } .kit-button.kit-button--icon .kit-button__icon { margin: 0; } .kit-button__border { pointer-events: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; -moz-box-sizing: border-box; box-sizing: border-box; } .kit-button.kit-button--bordered .kit-button__border { border-width: 1px; border-style: solid; border-color: var(--kit-color-button-content, var(--kit-color-text)); } .kit-button.kit-button--material:before { transition: inherit; content: ''; pointer-events: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: inset 0 -2px 0 var(--kit-color-button-material, var(--kit-color-text)); } .kit-button.kit-button--material:hover:before, .kit-button.kit-button--material:active:before, .kit-button.kit-button--material:focus:before { box-shadow: inset 0 -2px 0 var(--kit-color-button-material, var(--kit-color-text)); } .kit-button.kit-button--material .kit-button__border { border-width: 1px; border-style: solid; border-color: var(--kit-color-button-content, var(--kit-color-text)); } .kit-button.kit-button--transparent { background: transparent !important; } .kit-button.kit-button--transparent:hover { color: #e24949 !important; } .kit-button.kit-button--transparent:disabled, .kit-button.kit-button--transparent.kit-disabled { color: #e1e1e1 !important; background: transparent !important; } /* INPUT */ select.kit-field__input { opacity: 0; visibility: hidden; position: absolute; width: 100%; min-width: 185px; top: 100%; right: 0; display: block; height: auto; min-height: 30px; max-height: 250px; border: none; overflow: auto; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); -moz-transition: -moz-transform 0.2s, opacity 0.2s, visibility 0.2s; transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0.2s; /*z-index: 1;*/ /* Track */ /* Handle */ } .kit-field__description:empty { display: none; } .kit-field__description { order: 1200; flex: 1 0 100%; font-size: 0.8em; line-height: 1.25em; opacity: 0.8; padding: 0 0 0.5em; } .kit-field input[type="checkbox"] ~ .kit-field__description { padding-left: calc(1.75em / 0.8); } .kit-field select.kit-field__input:empty ~ .kit-field__arrow { display: none; } .kit-field select.kit-field__input:empty ~ .kit-field__label { padding-right: 0; } .kit-field select.kit-field__input:empty ~ .kit-field__display { pointer-events: none; } select.kit-field__input.kit-position--bottom { top: 100%; bottom: auto; } select.kit-field__input.kit-position--top { bottom: 100%; margin-bottom: 5px; top: auto; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } select.kit-field__input option { padding: 7px; font-size: 14px; cursor: pointer; } select.kit-field__input ~.kit-field__display { -moz-transition: none; transition: none; } select.kit-field__input::-webkit-scrollbar { background: transparent; width: 4px; height: 4px; } select.kit-field__input::-webkit-scrollbar-track { background: transparent; } select.kit-field__input::-webkit-scrollbar-thumb { border-radius: 2px; background: rgba(27,27,27,0.5); } select.kit-field__input::-webkit-scrollbar-thumb:window-inactive { background: rgba(27,27,27,0.5); } select.kit-field__input:disabled ~.kit-field__display, select.kit-field__input:disabled ~.kit-field__label, select.kit-field__input:disabled ~.kit-field__message { color: #e1e1e1 !important; cursor: default; } select.kit-field__input:disabled ~.kit-field__hr { border-color: #e1e1e1; } .kit-field__display { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .kit-dropdown { background: #fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); max-height: 240px; overflow: auto; opacity: 0; -moz-transition: opacity 0.15s; transition: opacity 0.15s; min-width: 200px; padding: 4px 4px 2px 4px; } .kit-dropdown.kit-active { opacity: 1; } .kit-dropdown__option { padding: 10px 10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; border-radius: 2px; margin-bottom: 2px; } .kit-dropdown__option:hover { background: #e5e5e5; } .kit-dropdown__option.kit-active:not(.kit-select-placeholder) { background: #2074e7; color: #fff; } .kit-dropdown__option.kit-select-placeholder { color: #919191; cursor: auto; font-style: italic; font-size: 0.8em; padding: 5px 10px; pointer-events: none; } .kit-dropdown__option.kit-select-hidden { display: none; } .kit-select--open .kit-select__dropdown { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .kit-select--open .kit-field__display { color: inherit; -moz-transition: color 0.3s 0.1s !important; transition: color 0.3s 0.1s !important; } .kit-select--open .kit-field__display:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .kit-field.kit-select--open .kit-field__label { top: 0 !important; transform: translate(0, 0); font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio)); color: var(--kit-color-primary) !important; } .kit-field.kit-select--open [data-dirty='false'] ~ .kit-field__label { transform: translate(0, -100%); top: 100%!important; font-size: calc(var(--font-size)); } .kit-select--open .kit-field__hr:after { left: 0; width: 100%; } .kit-field.kit-field--bordered select.kit-field__input { padding-right: 0; padding-left: 0; } .kit-field.kit-field--bordered select.kit-field__input ~.kit-field__label { top: -5px !important; } .kit-field.kit-field--bordered select.kit-field__input ~.kit-field__display { color: inherit; padding-left: 10px; -moz-transition: none !important; transition: none !important; } .kit-field.kit-field--bordered select.kit-field__input ~.kit-field__display:after { font-size: 19px; } .kit-field.kit-field--bordered select.kit-field__input ~.kit-field__hr { -moz-transition-duration: 0.2s !important; transition-duration: 0.2s !important; } .kit-field.kit-field--bordered select.kit-field__input option { padding-right: 10px; padding-left: 10px; } .kit-field.kit-field--bordered select.kit-field__input.kit-position--top { bottom: 30px !important; margin-bottom: 0; box-shadow: inset 1px 0 0 #e2e2e2, inset 0 1px 0 #e2e2e2, inset -1px 0 0 #e2e2e2, inset 0 -1px 0 #e2e2e2; } .kit-field.kit-field--bordered select.kit-field__input.kit-position--bottom { box-shadow: inset 1px 0 0 #e2e2e2, inset 0 -1px 0 #e2e2e2, inset -1px 0 0 #e2e2e2, inset 0 1px 0 #e2e2e2; } .kit-field.kit-field--bordered.kit-select--open .kit-field__hr { border-color: #e24949; } .kit-select-fix select.kit-field__input { visibility: visible; opacity: 0 !important; top: auto !important; bottom: 0 !important; z-index: 1; cursor: pointer; height: 30px !important; width: 100%; } .kit-select-fix select.kit-field__input:focus ~.kit-field__display:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .kit-select-fix select.kit-field__input:focus ~.kit-field__hr:after { width: 100%; left: 0; } .kit-select-fix select~.kit-field__display { position: relative; z-index: 0; } .kit-field--success ~.kit-field__label, .kit-field--success ~.kit-field__error, .kit-field--success ~.kit-field__message { opacity: 1; visibility: visible; color: var(--kit-color-success) !important; } .kit-field--error ~.kit-field__error, .kit-field--error ~.kit-field__message { opacity: 1; visibility: visible; color: var(--kit-color-error) !important; } .kit-field--success ~.kit-field__hr { border-color: var(--kit-color-success) !important; } .kit-field--success:focus ~.kit-field__hr:after, .kit-field--success.focus ~.kit-field__hr:after { border-color: var(--kit-color-success) !important; } .kit-old-ie input[type='checkbox'], .kit-old-ie input[type='radio'] { display: inline-block; } @-moz-keyframes ball-clip-rotate { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(180deg); transform: rotate(180deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes ball-clip-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ball-clip-rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } } .kit-field textarea[readonly]:focus, .kit-field input[readonly]:focus, .kit-field textarea[readonly].focus, .kit-field input[readonly].focus { color: var(--kit-color-readonly); } .kit-field textarea[readonly]:focus ~.kit-field__label, .kit-field input[readonly]:focus ~.kit-field__label, .kit-field textarea[readonly].focus ~.kit-field__label, .kit-field input[readonly].focus ~.kit-field__label { color: var(--kit-color-readonly); } .kit-field [readonly] ~ .kit-field__hr:after { border-top: 2px solid var(--kit-color-readonly); } .kit-field__hint { pointer-events: auto; position: relative; right: 0; bottom: 0; width: calc(1em + 4px); padding: 0 2px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; cursor: pointer; background-position: center; background-repeat: no-repeat; color: var(--kit-color-icon); transition: 0.05s; order: 1100; flex: 0 0 auto; } .kit-field__hint:hover { color: var(--kit-color-icon-hover); } .kit-field__hint-template { display: none; } .kit-field__hint-tooltip .tooltip-inner { display: none !important; } .kit-field__hint-tooltip, .kit-field .kit-field__hint-tooltip { padding: 10px; border-radius: 2px; font-size: 13px; text-align: left; width: auto; max-width: 500px; line-height: 1em; background-color: #1a1a1a; z-index: 2; -moz-user-select: none; -khtml-user-select: none; user-select: none; text-align: justify; color: #ffffff; box-shadow: 0 0 2px #0000004d; } .kit-field__hint-tooltip .tooltip-arrow, .kit-field .kit-field__hint-tooltip .tooltip-arrow { border-color: #1a1a1a; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } /* theme */ .kit-message, .alert { border: 1px solid; border-radius: 3px; padding: 5px 15px; margin: 10px 0; text-align: center; display: none; min-width: 300px; max-width: 100%; line-height: 1em; } .kit-message-fill, .alert-fill { width: 100%; min-width: auto; } .kit-message.kit-message-text, .alert.alert-text { min-width: auto; padding: 0em 0.5em .0em; display: inline; font-size: 1em; } .kit-message:empty, .alert:empty { display: none; } .kit-message-success, .alert-success { display: inline-block; color: var(--kit-color-success); background-color: #E9F6FD; border-color: var(--kit-color-success); } .kit-message-warning, .alert-warning { display: inline-block; color: var(--kit-color-warning); background-color: #FFFDED; border-color: var(--kit-color-warning); } .kit-message-error, .alert-danger { display: inline-block; color: var(--kit-color-error); background-color: #FCEDF5; border-color: var(--kit-color-error); } .text-warning { color: var(--kit-color-warning) !important; } .text-danger { color: var(--kit-color-error) !important; } .text-success { color: var(--kit-color-success) !important; } .kit-field__arrow { right: 0; width: 20px; overflow: hidden; order: 110; position: relative; flex: 0 0 auto; padding: 0.2em; } .kit-field__label .kit-field__arrow { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: 20px; height: 30px; overflow: hidden; height: 100%; } .kit-field__arrow-half-left, .kit-field__arrow-half-right { -webkit-transition: -webkit-transform .25s cubic-bezier(0.4,0.0,0.2,1); transition: -webkit-transform .25s cubic-bezier(0.4,0.0,0.2,1); -o-transition: transform .25s cubic-bezier(0.4,0.0,0.2,1); transition: transform .25s cubic-bezier(0.4,0.0,0.2,1); transition: transform .25s cubic-bezier(0.4,0.0,0.2,1), -webkit-transform .25s cubic-bezier(0.4,0.0,0.2,1); } .kit-field__arrow-svg { } .kit-select--open .kit-field__arrow-half-left { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .kit-select--open .kit-field__arrow-half-right { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .kit-field .kit-field__arrow ~ .kit-field__display { margin-right: -20px; padding-right: 25px; } .kit-field.kit-field--hr-hidden .kit-field__hr { display: none; } .kit-field__area-left, .kit-field__area-right { pointer-events: auto; align-self: stretch; display: flex; flex-direction: row; align-items: center; } .kit-field__area-left { order: 50; } .kit-field__area-right { order: 200; } .kit-field.autoComplete_wrapper > ul[id^=autoComplete] { top: 100%; pointer-events: auto; }