.configured-form-designer .row {
    margin-bottom: 15px;
}

ul.formulate-entity-tree,
ul.formulate-entity-tree ul {
    list-style-type: none;
}

    ul.formulate-entity-tree li {
        position: relative;
    }

    ul.formulate-entity-tree .child-toggle {
        position: absolute;
        left: -15px;
    }

        ul.formulate-entity-tree .child-toggle:hover {
            cursor: pointer;
        }

    ul.formulate-entity-tree .entity-icon.selected {
        color: #2e8aea;
    }

.formulate-field .collapser,
.formulate-handler .collapser {
    -moz-transition: transform 0.25s;
    -o-transition: transform 0.25s;
    -webkit-transition: transform 0.25s;
    transition: transform 0.25s;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    cursor: pointer;
}

.formulate-field.collapsed .collapser,
.formulate-handler.collapsed .collapser {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    cursor: pointer;
}

.formulate-field.expanded .collapser,
.formulate-handler.expanded .collapser {
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
}

.formulate-field .formulate-field-details,
.formulate-handler .formulate-handler-details {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.25s, opacity 0.25s;
}

.formulate-field.collapsed .formulate-field-details,
.formulate-handler.collapsed .formulate-handler-details {
    max-height: 0;
    opacity: 0;
}

.formulate-field .drag-handle,
.formulate-handler .drag-handle {
    cursor: move;
    opacity: 0.5;
    margin-right: 5px;
    font-size: 0.8em;
    vertical-align: middle;
}

.formulate-field .deleter,
.formulate-handler .deleter {
    color: #9d261d;
    float: right;
    vertical-align: middle;
    font-size: 1.2em;
    text-shadow: 2px 2px #600;
    cursor: pointer;
}

.formulate-field .type-identifier,
.formulate-handler .type-identifier {
    vertical-align: text-bottom;
    font-size: 1.5em;
    margin-right: 5px;
    text-shadow: 2px 2px 3px #000;
}

input.formulate-textbox--url {
    position: relative;
    width: 80%;
    max-width: 800px;
    text-decoration: underline;
    border: none;
    margin: 1px;
}

.formulate-textbox--url-container {
    position: relative;
}

.formulate-textbox--url-border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 80%;
    max-width: 800px;
    background: -moz-linear-gradient(left, #cccccc 0%, rgba(204, 204, 204, 0) 50%);
    background: -webkit-linear-gradient(left, #cccccc 0%, rgba(204, 204, 204, 0) 50%);
    background: linear-gradient(to right, #cccccc 0%, rgba(204, 204, 204, 0) 50%);
}

.formulate-field-map {
    position: relative;
    display: table;
    box-sizing: border-box;
    width: calc(100% - 10px);
    margin-bottom: 20px;
    background-color: #fafafa;
    padding: 30px 15px;
    box-shadow: 5px 5px 2px #ddd;
}

.formulate-mapped-field {
    position: relative;
    display: inline-block;
    float: left;
    margin-right: 5px;
    margin-bottom: 3px;
}

.formulate-mapped-field-alias {
    position: relative;
    width: auto;
}

.formulate-mapped-field-name {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #ccc;
    transition: right 0.25s;
}

.formulate-mapped-field-delete {
    height: 30px;
    padding: 0;
    vertical-align: top;
    opacity: 0;
    width: 0;
    transition: opacity 0.25s, width 0.25s;
}

    .formulate-mapped-field-alias:focus + .formulate-mapped-field-delete,
    .formulate-mapped-field-delete:active {
        opacity: 1;
        width: 36px;
    }

        .formulate-mapped-field-alias:focus + .formulate-mapped-field-delete + .formulate-mapped-field-name,
        .formulate-mapped-field-delete:active + .formulate-mapped-field-name {
            right: 45px;
        }

.formulate-mapped-field.ui-sortable-helper .formulate-mapped-field-delete,
.formulate-mapped-field.ui-sortable-helper .formulate-mapped-field-alias {
    display: none;
}

.formulate-mapped-field.ui-sortable-helper .formulate-mapped-field-name {
    position: relative;
    display: inline-block;
    top: initial;
    right: initial;
    transform: initial;
    color: #555;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding-left: 5px;
    padding-right: 8px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
}

.formulate-mapped-field-drag {
    cursor: pointer;
    opacity: 0.5;
    font-size: 16px;
    vertical-align: middle;
    line-height: 30px;
}

p.formulate-recaptcha-instructions {
    margin-top: 20px;
}

tr.formulate-submission-row-even {
    background-color: #ddd;
}

tr.formulate-submission-row-odd {
    background-color: #ccc;
}

table.form-submissions-table {
    width: 100%;
    margin-top: 50px;
}

td.form-submission-cell {
    vertical-align: top;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form-submissions-none {
    margin-top: 50px;
}

th.form-submission-field-header {
    text-align: left;
    padding-right: 15px;
}

ul.formulate-pager {
    list-style-type: none;
    margin-top: 30px;
    margin-left: 0;
}

    ul.formulate-pager li {
        float: left;
        display: inline-block;
    }

button.formulate-pager-item-active {
    font-weight: bold;
}

/* Look in the assets folder at the root of the repo for the icomoon.zip,
   which contains the selection.json you can use to update the icons. */
/*@font-face {
    font-family: "icomoon-formulate";
    src: url("fonts/icomoon/icomoon.eot?l1pxq4");
    src: url("fonts/icomoon/icomoon.eot?l1pxq4#iefix") format("embedded-opentype"), url("fonts/icomoon/icomoon.ttf?l1pxq4") format("truetype"), url("fonts/icomoon/icomoon.woff?l1pxq4") format("woff"), url("fonts/icomoon/icomoon.svg?l1pxq4#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}*/

/*[class^="icon-formulate-"], [class*=" icon-formulate-"] {
    / * use !important to prevent issues with browser extensions that change fonts * /
    font-family: 'icomoon-formulate' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    / * Better Font Rendering =========== * /
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/

.icon-formulate-text-constant:before {
    content: "\e91b";
}

.icon-formulate-move:before {
    content: "\e91a";
}

.icon-formulate-values:before {
    content: "\e905";
}

.icon-formulate-validations:before {
    content: "\e903";
}

.icon-formulate-value-group:before {
    content: "\e90e";
}

.icon-formulate-value:before {
    content: "\e90d";
}

.icon-formulate-validation:before {
    content: "\e90c";
}

.icon-formulate-validation-group:before {
    content: "\e90a";
}

.icon-formulate-drop-down:before {
    content: "\e90b";
}

.icon-formulate-layout-group:before {
    content: "\e906";
}

.icon-formulate-layout:before {
    content: "\e907";
}

.icon-formulate-form-group:before {
    content: "\e908";
}

.icon-formulate-submissions:before {
    content: "\e919";
}

.icon-formulate-store-data:before {
    content: "\e918";
}

.icon-formulate-checkbox-list:before {
    content: "\e915";
}

.icon-formulate-conform:before {
    content: "\e90f";
}

.icon-formulate-layouts:before {
    content: "\e901";
}

.icon-formulate-clipboard:before {
    content: "\e900";
}

.icon-formulate-data:before {
    content: "\e902";
}

.icon-formulate-hidden:before {
    content: "\e916";
}

.icon-formulate-textarea:before {
    content: "\e912";
}

.icon-formulate-radio-button-list:before {
    content: "\e914";
}

.icon-formulate-rich-text:before {
    content: "\e913";
}

.icon-formulate-forms:before {
    content: "\e904";
}

.icon-formulate-form:before {
    content: "\e909";
}

.icon-formulate-email:before {
    content: "\e910";
}

.icon-formulate-upload:before {
    content: "\e9c3";
}

.icon-formulate-extended-radio-button-list:before {
    content: "\e91d";
}

.icon-formulate-date:before {
    content: "\e953";
}

.icon-formulate-create-folder:before {
    content: "\e931";
}

.icon-formulate-delete-folder:before {
    content: "\e932";
}

.icon-formulate-create:before {
    content: "\ea0a";
}

.icon-formulate-delete:before {
    content: "\ea0f";
}

.icon-formulate-send-data:before {
    content: "\e9c9";
}

.icon-formulate-header:before {
    content: "\e917";
}

.icon-formulate-button:before {
    content: "\e911";
}

.icon-formulate-recaptcha:before {
    content: "\e975";
}

.formulate-cell {
    margin: 0 10px 10px 0;
    padding: 5px;
    border: 1px dotted #888;
    min-height: 34px;
}

.formulate-cell-field {
    background-color: #eee;
    padding: 3px;
    margin: 3px;
}

    .formulate-cell-field.ui-sortable-handle {
        cursor: move;
    }

.formulate-cell.editing-rows {
    background-color: #eee;
    border-color: transparent;
}

    .formulate-cell.editing-rows .formulate-cell-field {
        background-color: transparent;
    }

    .formulate-cell.editing-rows .formulate-cell-field-name {
        text-decoration: underline;
    }

.formulate-sample-cell--active,
.formulate-sample-cell--inactive {
    background-color: #eee;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-color: #888;
    border-top: 4px solid #888;
    border-bottom: 4px solid #888;
    transition: border-color 0.25s;
}

    .formulate-sample-cell--active:hover,
    .formulate-sample-cell--inactive:hover {
        background-color: #888;
        cursor: pointer;
    }

.formulate-sample-cell--active {
    margin-left: 8px;
    border-left: 4px solid #888;
    transition: border-color 0.25s;
}

.formulate-sample-cell--first {
    border-left: 4px solid #888;
    transition: border-color 0.25s;
}

.formulate-sample-cell--adjacent,
.formulate-sample-cell--last {
    border-right: 4px solid #888;
    transition: border-color 0.25s;
}

.formulate-add-row-section {
    margin-top: 20px;
}

.formulate-btn-use {
    font-weight: bold;
}

.btn.btn-add-row {
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #888;
    border: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    transition: background-color 0.25s;
}

    .btn.btn-add-row:hover {
        background-color: #4fa23c;
    }

    .btn.btn-add-row:focus {
        outline: none;
    }

.btn-add-row:hover + .sample-cells .formulate-sample-cell--active,
.btn-add-row:hover + .sample-cells .formulate-sample-cell--inactive {
    border-top-color: #4fa23c;
    border-bottom-color: #4fa23c;
}

.btn-add-row:hover + .sample-cells .formulate-sample-cell--active {
    border-left-color: #4fa23c;
}

.btn-add-row:hover + .sample-cells .formulate-sample-cell--first {
    border-left-color: #4fa23c;
}

.btn-add-row:hover + .sample-cells .formulate-sample-cell--adjacent,
.btn-add-row:hover + .sample-cells .formulate-sample-cell--last {
    border-right-color: #4fa23c;
}

.formulate__data-sources-warn-icon {
    font-size: 100px;
    line-height: 100px;
}

.formulate__data-sources-warn-info {
    background-color: #ffeeee;
    border: 1px solid #ff0000;
    border-radius: 10px;
    padding: 15px;
}

.formulate__dialog-confirmation-message {
    margin-bottom: 50px;
}

.formeditor-rowconfig {
    margin-bottom:20px;
}

.formeditor-container h4 small{
    font-weight:300 !important;
    color: #aaaaaa;
    font-size:14px;
}

.formeditor-details hr {
    margin-top:5px;
    margin-bottom:5px;
}

.formeditor-details .control-group {
    position: relative;
    margin-bottom:5px;
}

.formeditor-details .control-group > input, .formeditor-details .control-group > span > input {
    position: relative;
    width: 100%;
}

.formeditor-details .control-group input[type=checkbox] {
    width: auto !important;
}

/* used to overwrite umb-styling */
[data-element="property-formular"] .umb-el-wrap .umb-property-editor.db {
    contain: inline-size !important;
}

.formeditor-icons {
    float:right;
}

.formeditor-icons i {
    cursor:pointer;
}

.fieldvalues {
    display:inline-block !important;
}

    .fieldvalues input {
        margin-bottom:5px;
              
    }
    .fieldvalues-label {
        float: none !important;
    }