# jetformbuilder/1.1.1/assets/css/editor.css

JetFormBuilder — Dynamic Blocks Form Builder, version 1.1.1. 667 lines.

- Page: https://pluginprobe.com/plugins/jetformbuilder/1.1.1/code/assets/css/editor.css
- Raw: https://pluginprobe.com/plugins/jetformbuilder/1.1.1/raw/assets/css/editor.css
- Modified: 2021-03-11T08:51:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/jetformbuilder/1.1.1/code/assets/css/editor.css#L10-L20`.

```css
:root {
    --jet-fb__range-field-slider--size: 18px;
    --jet-fb__range-field-range--height: 4px;
}

.jet-form-builder {
    background: #fff;
    margin: 20px 0 0 0;
    padding: 0;
    border: 1px solid #ccd0d4;
}

.jet-form-builder > .components-drop-zone__provider {
    display: flex;
    justify-content: space-between;
    min-height: 60vh;
    flex-wrap: wrap;
}

.jet-form-builder__sidebar {
    flex: 0 0 30%;
    order: 2;
    border-left: 1px solid #e2e4e7;
}

.jet-form-builder__content,
.editor-styles-wrapper {
    flex: 0 0 65%;
    padding: 10px 0 35px;
    order: 1;
}

.block-editor-block-contextual-toolbar:not([data-align="wide"]):not([data-align="full"]) .block-editor-block-mover:not(.is-horizontal).is-visible {
    opacity: 1;
}

.editor-styles-wrapper .block-editor-block-list__block {
    min-height: 45px;
}

.jet-form-builder .editor-post-title__block {
    padding-left: 40px;
}

.block-editor-block-list__layout.is-root-container {
    padding-left: 40px;
}

.jet-form-builder__header {
    width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
    display: flex;
    padding: 0 40px 0 6px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e4e7;
    height: 60px;
}

.jet-form-toggle-box {
    padding: 0 12px;
}

.jet-form-toggle-box .components-base-control__field {
    margin: 0;
}

.jet-form-action {
    margin-bottom: 10px;
}

.jet-form-action:first-child {
    margin-top: 15px;
}

.jet-form-action .components-base-control__field {
    margin: 0;
}

.jet-form-edit-modal .components-base-control__field {
    display: flex;
    padding: 12px 0 5px;
    border-top: 1px solid #ddd;
}

.jet-form-edit-modal .components-flex__item {
    flex: 0 0 150px;
    max-width: 150px;
}

.jet-form-edit-modal .jet-post-field-control .components-base-control:nth-child(2) .components-select-control .components-flex__item {
    display: none;
}

.jet-form-edit-modal .fields-map-control .components-base-control__field {
    border: none;
    padding: 0 0 5px 0;
}

.jet-form-edit-modal .components-base-control:first-child .components-base-control__field {
    border-top: none;
    padding-top: 0;
}

.jet-form-edit-modal .components-base-control__label {
    flex: 0 0 200px;
    max-width: 157px;
}

.jet-form-edit-modal .components-base-control .components-base-control__label {
    padding: 6px 8px 0 0;
}

.jet-form-editor__macros-wrap {
    position: relative;
}

.jet-form-edit-modal .jet-form-editor__macros-wrap .components-base-control .components-base-control__field {
    padding-top: 12px;
    border-top: 1px solid #ddd;
}

.jet-form-edit-modal .jet-user-meta__row {
    display: flex;
}

.jet-form-edit-modal .jet-user-meta__row .jet-field-map__row-label {
    flex: 1 1 30%;
}

.jet-form-edit-modal .jet-user-meta__row .components-base-control {
    flex: 1 1 40%;
}

.jet-form-editor__macros-trigger {
    height: 36px;
    min-height: 36px;
}

.jet-form-editor__macros-inserter {
    position: absolute;
    right: 1px;
    top: 14px;
    z-index: 20;
    background: whitesmoke;
}

.jet-form-dynamic-preset {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.jet-form-dynamic-preset .components-base-control {
    width: 100%;
}

.jet-form-dynamic-preset .components-base-control__field textarea {
    padding-right: 36px;
    width: calc(100% - 31px);
}
.jet-form-dynamic-preset .components-base-control__field input {
    padding-right: 28px;
}

.jet-form-dynamic-preset__trigger {
    width: 31px;
    height: 31px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 2px 2px 0;
    border: 1px solid #757575;
    margin: 26px 0 0 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}

.jet-form-dynamic-preset__trigger.trigger__textarea {
    margin-top: unset;
    border-radius: 0 0 0 5px;
    border-width: 0 0 1px 1px;
    background-color: white;
    top: 1px;
    right: 1px;
}

.jet-form-dynamic-preset__trigger:not(.trigger__textarea) {
    border-left-width: 0;
}

.jet-form-dynamic-preset__trigger:hover svg path {
    fill: #007cba;
    fill: var(--wp-admin-theme-color);
}

.jet-form-dynamic-preset__trigger svg {
    width: 50%;
}

.jet-form-builder__flex-controls {
    display: flex;
}

.jet-form-builder__flex-controls .repeater-item-column label {
    flex: 0 0 1em;
    margin-right: 1em;
}

.jet-form-builder__flex-controls .repeater-item-column input {
    margin-right: 1em;
}

.jet-form-media-fields .field-mime-types select[multiple] {
    height: 7rem;
}

.jet-form-media-fields .field-mime-types svg {
    display: none;
}

.jet-user-meta-rows {
    flex: 0 0 40%;
}

.jet-user-fields-map__list {
    flex: 0 0 35%;
}

.jet-user-fields-map__list .components-flex__item {
    flex: 2;
}

.jet-user-fields-map__list .components-input-control__container {
    flex: 5;
}

.block-editor-block-list__block[data-type="jet-forms/form-break-field"] {
    max-width: 100%;
    margin-top: 28px;
    margin-bottom: 28px;
}

.block-editor-block-list__block[data-type="jet-forms/group-break-field"] {
    margin-top: 28px;
    margin-bottom: 28px;
}

.block-editor-block-list__block[data-type="jet-forms/repeater-field"],
.block-editor-block-list__block[data-type="jet-forms/conditional-block"],
.block-editor-block-list__block[data-type^="jet-forms/"] .inside-block-options {
    padding: 20px;
    background: #fff;
    -webkit-box-shadow: 0 2px 4px rgba(22, 43, 64, .1);
    box-shadow: 0 2px 4px rgba(22, 43, 64, .1);
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
}

.block-editor-block-list__block[data-type^="jet-forms/"] .inside-block-options {
    margin-bottom: 20px;
}

.block-editor-block-list__block[data-type="jet-forms/repeater-field"]:hover,
.block-editor-block-list__block[data-type="jet-forms/conditional-block"]:hover {
    -webkit-box-shadow: 0 20px 20px rgba(22, 43, 64, .12);
    box-shadow: 0 20px 20px rgba(22, 43, 64, .12);
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
}


.jet-form-builder__next-page-wrap, .jet-form-builder__group-break {
    display: block;
    white-space: nowrap;
}

.jet-form-builder__next-page-wrap:before, .jet-form-builder__group-break:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #ccc;
}

.jet-form-builder__next-page-wrap > span, .jet-form-builder__group-break > span {
    font-size: 13px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    color: #757575;
    border-radius: 4px;
    background: #fff;
    padding: 6px 8px;
    height: 24px;
}

.jet-form-edit-modal__content .input_with_button {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jet-form-edit-modal__content .components-base-control__field > .input_with_button {
    width: 55%;
}

.jet-form-edit-modal__content .input_with_button .components-base-control {
    margin-right: 1em;
}

.input_with_button select.components-select-control__input {
    min-width: 26em;
}

.jet-form-builder__field-wrap.range-wrap fieldset.components-input-control__backdrop {
    border: none;
}

.jet-form-builder__field-wrap.range-wrap .range-flex-wrap {
    display: flex;
    /*display: -webkit-box;*/
    display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Range */
.jet-form-builder__field-wrap.range-wrap .range-flex-wrap .components-input-control {
    margin-right: auto;
}

/* Range Values */
.jet-form-builder__field-wrap.range-wrap .range-flex-wrap .jet-form-builder__field-value {
    white-space: nowrap;
    margin-left: 10px;
    display: flex;
}

.jet-form-builder__field-wrap.range-wrap .range-flex-wrap .components-input-control__container {
    background-color: rgba(255, 255, 255, 0);
}

.jet-form-builder__field-wrap.range-wrap {
    width: 100%
}

.jet-form-builder__field-wrap.range-wrap input[type="range"] {
    margin-right: 10px;
    -webkit-appearance: none;
    min-height: 18px;
    border: 0;
}


.jet-form-builder__field-wrap.range-wrap input[type="range"], .jet-form-builder__field-wrap.range-wrap input[type="range"]:focus {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none
}

.jet-form-builder__field-wrap.range-wrap input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--jet-fb__range-field-range--height, 4px);
    cursor: pointer;
    /**
    test
    */
    background: #e3ddd8;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none
}

.jet-form-builder__field-wrap.range-wrap input[type="range"]::-moz-range-track {
    width: 100%;
    height: var(--jet-fb__range-field-range--height, 4px);
    cursor: pointer;
    background: #e3ddd8;
    box-shadow: none;
    border: none
}

.jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-track {
    width: 100%;
    height: var(--jet-fb__range-field-range--height, 4px);
    cursor: pointer;
    background: #e3ddd8;
    box-shadow: none;
    border: none;
    color: transparent
}

.jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-fill-lower {
    background: transparent
}

.jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-fill-upper {
    background: transparent
}

.jet-form-builder__field-wrap.range-wrap input[type="range"]::-webkit-slider-thumb {
    width: var(--jet-fb__range-field-slider--size, 18px);
    height: var(--jet-fb__range-field-slider--size, 18px);
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    margin-top: calc((var(--jet-fb__range-field-slider--size, 18px) - var(--jet-fb__range-field-range--height, 4px)) / -2);
    -webkit-appearance: none
}

.jet-form-builder__field-wrap.range-wrap input[type="range"]::-moz-range-thumb {
    width: var(--jet-fb__range-field-slider--size, 18px);
    height: var(--jet-fb__range-field-slider--size, 18px);
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
    border: none
}

.jet-form-builder__field-wrap.range-wrap input[type="range"]::-ms-thumb {
    width: var(--jet-fb__range-field-slider--size, 18px);
    height: var(--jet-fb__range-field-slider--size, 18px);
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
    border: none
}

.jet-form-builder__submit-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%
}

.jet-form-builder__field-wrap.range-wrap .components-input-control__backdrop[aria-hidden="true"] {
    border-width: 0;
}

.jet-form-builder__field-settings .help-input {
    margin-bottom: 2em;
    font-size: 12px;
    color: rgb(117, 117, 117);
}

.jet-form-edit-modal .jet-post-field-control {
    display: flex;
    position: relative;
}

.jet-form-edit-modal .jet-post-field-control .components-base-control__field {
    padding: 0;
    border: none;
}

.jet-form-edit-modal .jet-post-field-control .components-base-control:nth-child(2) {
    position: absolute;
    left: 25em;
}

.jet-field-map__row-label .fields-map__required {
    color: red;
    font-weight: 900;
}

.jet-form-load-button.components-button.loading i, .jet-form-validate-button.components-button.loading i {
    animation: jet-form-editor-spin 2s infinite linear
}


.jet-form-validate-button.components-button i.dashicons:before {
    content: ""
}

.jet-form-validate-button.components-button.is-valid i.dashicons:before {
    content: "";
    color: #46b450
}

.jet-form-validate-button.components-button.is-invalid i.dashicons:before {
    content: "";
    color: #a00
}

@keyframes jet-form-editor-spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

.jet-form-edit-modal__content .description-controls {
    color: #999;
    display: block;
    margin-bottom: 1.2em;
}

.jet-form-builder-row {
    overflow: hidden;
}

.rtl .jet-form-editor__macros-inserter {
    left: 15px;
    right: unset;
}

.rtl .jet-form-builder__field-wrap.range-wrap .range-flex-wrap .jet-form-builder__field-value {
    margin-left: unset;
    margin-right: 10px;
}

.jet-form-edit-modal__actions {
    position: sticky;
    bottom: 0;
    margin: 20px -24px -24px;
    padding: 18px 24px 20px;
    background-color: #fff;
    width: calc(100% + 48px);
    border-top: 1px solid #ddd;
    z-index: 100;
}

.jet-form-edit-modal.width-60 {
    width: 60vw;
}

.jet-form-builder__repeater-component-item {
    margin-bottom: 1.5em;
}

.jet-form-builder__repeater-component-item .repeater-item__content {
    flex: 1 1 100%;
}

.jet-form-builder__repeater-component-item .repeater-item__remove {
    flex: 1;
}

.jet-form-builder__repeater-component-item .repeater__item__header .repeater-action-button {
    margin-right: 1em;
}

.jet-form-builder__repeater-component-item .repeater__item__header span.repeater-item-title {
    font-size: 1.1em;
    font-style: italic;
    color: #8e8e8e;
}

.jet-form-edit-modal .input-with-button .components-input-control__container,
.jet-form-edit-modal .input-with-button .components-text-control__input {
    width: 30em;
    margin-right: 1em;
}

.jet-form-edit-modal .with-wrap .components-base-control__field {
    flex-wrap: wrap;
}

.jet-form-edit-modal .margin-bottom--small {
    margin-bottom: 0.7em;
}

select.components-select-control__input.components-select-control__input.components-select-control__input {
    max-width: 100vw;
    width: 100%;
    line-height: 1.1;
}

.jet-form-builder__calculated-field {
    display: flex;
    width: 100%;
}

.jet-form-action .components-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.jet-form-action .components-card__body div:first-child {
    flex: 0 0 50%;
}

.components-text-control__input {
    margin: unset;
    box-sizing: border-box;
}

.flex-column .components-base-control__field {
    flex-direction: column;
}

.block-editor-block-inspector .components-input-control.components-number-control {
    margin-bottom: 2em;
}

.repeater-item__left-heading {
    max-width: 85%;
    word-break: break-all;
}

.jet-form-edit-modal__content {
    padding-bottom: 0.5em;
}

.jet-label-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}

.jet-control-clear .components-base-control__field{
    padding: unset;
    border-top: unset;
}

.jet-control-clear-full .components-base-control__field {
    display: block;
    padding: unset;
    border-top: unset;
}

.jet-forms-checkbox-field p.components-base-control__help{
    margin-top: -33px;
    margin-left: 10vw;
}
.block-editor-block-list__block[data-type], .block-list-appender.wp-block {
    max-width: 100%;
}

.components-button.has-icon:not(.has-text) .dashicon.dashicon {
    margin: unset;
}

.jet-form-builder-repeater__remove {
    margin-top: 10px;
}

```