body.custom-wizard { .wizard-field { margin-bottom: 1em; .field-label { font-weight: 800; } .field-image { margin-bottom: 0.5em; img { max-width: 100%; max-height: 150px; } } .field-description { flex: 1; color: var(--primary); margin-top: 0; p { margin: 0.3em 0; line-height: 1.3em; } img { height: 15px; width: 15px; margin: 0 5px; } } &.invalid { textarea, input[type="text"], input[type="checkbox"], .select-kit { outline: 4px solid var(--danger); } } } .checkbox-field { display: flex; align-items: center; .input-area { order: 0; margin: 15px 20px !important; input { cursor: pointer; transform: scale(1.3); margin-bottom: 0; } } & > label.field-label { order: 1; } & > .field-description { margin-top: 0; order: 2; } & > .field-label + .field-description { margin-left: .5em; } } .url-field input { width: 100%; font-size: 1.1487em; padding: 6px; transition: border-color 0.5s; } .wizard-step-form .wizard-btn { display: block; margin: 20px 0; } .wizard-image-row { .wizard-btn-upload { margin: 0; } } .wizard-image-preview { margin-top: 10px; max-width: 500px; max-height: 500px; overflow: hidden; display: block; border: none; padding: 0; img { max-width: 100%; max-height: 100%; } } .wizard-select-value img { vertical-align: middle; } .wizard-field-upload { .wizard-btn-upload-file { display: inline-block; position: relative; cursor: pointer; input { left: 0; right: 0; top: 0; bottom: 0; } } .filename { margin-left: 10px; } } input.date-picker { font-size: 1.1487em; padding: 6px; border: 1px solid var(--primary); transition: border-color 0.5s; } .pika-single.is-bound { width: fit-content; position: absolute !important; } .d-time-input .select-kit.combo-box .select-kit-header { font-size: 1.1487em; padding: 6px; } .d-date-time-input { display: flex; } .list-controls { .category-breadcrumb { a.badge-category { display: inline-block; padding: 6px 8px; line-height: $line-height-medium; } } } .select-kit.combo-box.group-dropdown { min-width: 220px; } .text-field input { margin-bottom: 0; } .text-field, .textarea-field, .composer-field { input[type="text"], textarea { &:focus::placeholder { color: transparent; } } } .wizard-category-selector { width: 500px; } }