html[dir="rtl"] [class*="th-font"] {
    float: right;
}
html[dir="rtl"] [class*="font-size th-font"] {
    width: 70px;
    float: right;
}

.nf-outer select {
    z-index: initial;
}

ul#uiVariablesList {
    top: 143px;
    margin-top: 13px;
    margin-bottom: 13px;
}

.nf-repeater,
.nf-container {
    border: 1px dashed gray
}

.nf-repeater.drop-area,
.nf-container.drop-area {
    margin-bottom: 2px;
    display: table;
    width: 100%;
}

.nf-outer .nf-repeater  div.row-container,
.nf-outer .nf-container div.row-container {
    background: #f1f1f1;
    color: #707070;
    border: 1px dashed #dfdfdf;
    border-radius: 5px;
    margin-bottom: 2px;
}

.nf-repeater .placeholder,
.nf-container .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
}

.nf-repeater .placeholder > *,
.nf-container .placeholder > * {
    font-size: 14px;
    font-weight: normal;
    line-height: 17px;
}

.nf-repeater .nf-repeater-addrow {
    padding: 0 !important;
    margin-top: 0;
    margin-bottom: 16px;
}

.nf-repeater-selected,
.nf-container-selected {
    border: 1px dashed blue
}

.nf-repeater-row:not(.row-container){
    display: table-row;
}

rf-rules-pane {
    display: block;
    height: 100%;
}

#uiRightPanes {
    margin-right: 0 !important;
}

#uiRulesPane {
    min-width: 280px;
    height: 100%;
    float: none;
    width: initial;
    margin: initial;
    right: initial;
}

#uiRulesPane.ui-resizable {
    left: 0 !important;
    border: 1px solid #cbcbcb;
    border-top: 0;
}

#uiThemesPane {
    width: 280px;
    float: right;
    min-width: 280px;
    height: 100%;
    transition: all;
    overflow-y: scroll;
    display: none;
}

html[dir="rtl"] #uiThemesPane {
    float: left;
}

#uiDesigner.canvas {
    border-bottom: 1px solid #cbcbcb;
    overflow: auto !important;
}

.nf-container {
    padding-bottom: 16px;
}

.nf-container .placeholder {
    margin-top: 10px;
    margin-bottom: 16px;
}

.control-error-flag {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1NSA1NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGwtb3BhY2l0eT0iLjkiIGZpbGw9IiNGMDMiIGQ9Ik0tMjYuNjkyIDI3LjYyNUwyNS4xNC0yNy45NTggNTAuOTQ1LTMuODk1LS44ODcgNTEuNjg4eiIvPjxnIGZpbGw9IiNGRkYiPjxwYXRoIGQ9Ik0xMi42NjcgMTFIMTRhLjY2Ny42NjcgMCAwIDAgLjY2Ny0uNjY3VjMuNjY3QS42NjcuNjY3IDAgMCAwIDE0IDNoLTEuMzMzYS42NjcuNjY3IDAgMCAwLS42NjcuNjY3djYuNjY2YzAgLjM2OS4yOTguNjY3LjY2Ny42Njd6TTE0IDEyLjMzM2gtMS4zMzNBLjY2Ny42NjcgMCAwIDAgMTIgMTN2MS4zMzNjMCAuMzY5LjI5OC42NjcuNjY3LjY2N0gxNGEuNjY3LjY2NyAwIDAgMCAuNjY3LS42NjdWMTNhLjY2Ny42NjcgMCAwIDAtLjY2Ny0uNjY3eiIvPjxwYXRoIGQ9Ik0yMy45MzMgMTkuMjY3bC02LjY2Ni0xMS42QS42NjcuNjY3IDAgMCAwIDE2IDh2Mi42NjdhLjY2Ny42NjcgMCAwIDAgLjA2Ny4zMzNsMy44IDYuNjY3SDYuNzMzbDMuOC02LjY2N2EuNjY3LjY2NyAwIDAgMCAuMDY3LS4zMzNWOGEuNjY3LjY2NyAwIDAgMC0xLjI2Ny0uMzMzbC02LjYgMTEuNmEuNjY3LjY2NyAwIDAgMCAuNiAxLjA2NmgyMGEuNjY3LjY2NyAwIDAgMCAuNi0xLjA2NnoiLz48L2c+PC9nPjwvc3ZnPg==) no-repeat;
    background-size: 36px 36px;
}

.action-flag {
    position: absolute;
    top: 0;
    left: 15px;
    width: 36px;
    height: 36px;
    z-index: 10;
}

.designer-panel {
    font-size: 12px;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #fff;
}

.designer-panel input[type="text"],
.designer-panel select {
    background: #fff;
    color: #000;
    border: 1px solid #cbcbcb;
    border-radius: 4px;
}

.designer-panel-description {
    padding: 5px;
    min-height: 40px;
    overflow: auto;
    display: block;
    border-bottom: 1px solid #d3d3d3;
}

.designer-panel button {
    background-color: #F1F1F1;
    color: inherit;
    width: auto;
    width: initial;
    border: none;
    transition: background-color 0.25s ease;
    outline: none;
    font-size: 12px;
}

.designer-panel button:hover:enabled {
    background-color: #F9D7B8;
}

.designer-panel-header {
    background: #f1f1f1;
    padding: 5px;
    display: -ms-flexbox;
    display: flex;
    min-height: 16px;
}

.designer-panel-header-title {
    -ms-flex: 1;
    flex: 1;
}

.designer-panel-header-close {
    background-image: url(/_layouts/15/NintexForms/images/nf_16x16_ImageMaps.png);
    background-position: -192px -16px;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    cursor: pointer;
}

.controls {
    width: 100%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
}

.control-item {
    float: left;
    display: block;
    width: 100%;
    margin-bottom: 5px;
    vertical-align: middle;
}

.controls input,
.controls select {
    width: 70px;
    float: left;
}
.controls select#th-form-font {
    width: 88%;
    padding: 5px;
}
.controls select.font-size {
    padding: 5px;
    width: 37px;
}
.controls label {
    float: left;
    width: 159px;
    font-size: 12px;
    margin-top: 4px;
}
.controls h4 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 18px;
}
.controls h5 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
    float: left;
    width: 100%;
}
.control-item + h5 {
    margin-top: 20px;
}
.th-more {
    cursor: pointer;
    height: 25px;
    font-size: 11px;
    font-family: Verdana;
    color: #ffffff ;
    background-color: #323232;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: none;
    margin-top: 5px;
    margin-left: 0!important;
    margin-bottom: 10px;
}
.controls .control-items-refine {
    display: none;
    border: 1px solid #333;
    padding: 10px;
    float: left;
    box-sizing: border-box;
}
.controls .control-items-refine label {
    width: 146px;
}
.controls .th-control-button {
    background-color: #F1F1F1;
    color: inherit;
    margin: 10px 0 0 0 !important;
    border-radius: 5px;
    height: 30px;
    transition: background-color 0.25s ease;
    padding: 0 23px;
    box-sizing: border-box;
    width: 100%;
}
.controls .th-control-button:hover:enabled {
    background-color: #F9D7B8;
}
.k-group, .k-toolbar, .k-grouping-header, .k-pager-wrap, .k-group-footer td, .k-grid-footer, .k-footer-template td, .k-widget .k-status, .k-calendar th, .k-dropzone-hovered, .k-widget.k-popup {
    background-color: #ffffff;
}
.k-popup, .k-menu .k-group, .k-grid .k-filter-options, .k-time-popup, .k-datepicker-calendar, .k-autocomplete.k-state-border-down, .k-autocomplete.k-state-border-up, .k-dropdown-wrap.k-state-active, .k-picker-wrap.k-state-active, .k-multiselect.k-state-focused, .k-imagebrowser .k-image, .k-tooltip {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
    border: 0;
}
.k-block, .k-widget, .k-input, .k-textbox, .k-group, .k-content, .k-header, .k-editable-area, .k-separator, .k-colorpicker .k-i-arrow-s, .k-textbox > input, .k-autocomplete, .k-dropdown-wrap, .k-toolbar, .k-group-footer td, .k-grid-footer, .k-footer-template td, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-grid-header, .k-grid-header-wrap, .k-grid-header-locked, .k-grid-footer-locked, .k-grid-content-locked, .k-grid td, .k-grid td.k-state-selected, .k-grid-footer-wrap, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-refresh, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-panelbar > .k-item > .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-panel, .k-panelbar .k-content, .k-calendar th, .k-slider-track, .k-splitbar, .k-dropzone-active, .k-tiles, .k-toolbar, .k-tooltip, .k-button-group .k-tool, .k-upload-files {
    border-color: #dadada;
}
.k-icon {
    background-image: url(../images/sprite.png);
    border-color: transparent;
}
.k-i-arrow-60-down {
    background-position: 0px -32px;
}
.k-i-arrow-60-down:before {
    content: "";
}

.k-flatcolorpicker .k-controls .k-button {
    background: #fff;
    border: 1px solid #cbcbcb;
}

.k-flatcolorpicker .k-controls .k-button:hover {
    border-color: #e7e7e7;
    background-color: #e7e7e7;
}

.nf-undo-redo-buttons {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.nf-undo-redo-buttons img {
    padding: 5px;
}

.control-title-placeholder,
.control-description-placeholder {
    opacity: 0.2;
}

.nf-geoinput {
    max-width: 200px;
}

html[dir="rtl"] .controls input, html[dir="rtl"] .controls select {
    float: right;
}

/* Workflow form designer fix */
.nf-rules-pane .nf-rule-card-editor-panel input[type=text] {
    background-color: white !important;
}