.sdff-form-root {
    border:1px solid #ccc;
}


.sdff-form-text,
.sdff-form-textarea,
.sdff-form-date,
.sdff-form-url,
.sdff-form-enum,
.sdff-form-enum-list,
.sdff-form-condition,
/*.sdff-form-article,*/
.sdff-form-autocomplete,
.sdff-form-autocomplete-multi,
.sdff-form-html,
.sdff-form-image,
.sdff-form-file {
    margin:2px 0px;
    text-align:left;
}

.sdff-form-text > label,
.sdff-form-textarea > label,
.sdff-form-date > label,
.sdff-form-url > label,
.sdff-form-enum > label,
.sdff-form-enum-list > label,
.sdff-form-condition > label,
/*.sdff-form-article > label,*/
.sdff-form-autocomplete > label,
.sdff-form-autocomplete-multi > label,
.sdff-form-html > label,
.sdff-form-image > label,
.sdff-form-file > label {
    width: 20%;
    display:inline-block;
    box-sizing: border-box;
    text-align:right;
    line-height:20px;
    vertical-align:top;
    padding:5px 10px;
}
.sdff-form-text > input,
.sdff-form-textarea > textarea,
.sdff-form-date > input,
.sdff-form-url > input,
.sdff-form-enum > select,
.sdff-form-enum-list > .sdff-form-enum-list-checkboxes,
.sdff-form-condition > input,
/*.sdff-form-article > input,*/
.sdff-form-autocomplete > input,
.sdff-form-html > .cke,
.sdff-form-image > input,
.sdff-form-file > input {
    width: 80%;
    display:inline-block;
    box-sizing:border-box;
    line-height:20px;
    padding:5px 10px;
    height:30px;
    vertical-align:top;
    margin:0px;
}

.sdff-form-text > input,
.sdff-form-date > input {
    width:400px;
}

.sdff-form-textarea > textarea {
    height: 100px;
}
.sdff-form-enum-list > .sdff-form-enum-list-checkboxes,
.sdff-form-html > .cke {
    height: auto;
}
.sdff-form-enum-list > .sdff-form-enum-list-checkboxes > div {
    display: inline-block;
    margin-right: 30px;
}

.sdff-form-condition > input[type="checkbox"] {
    width:30px;
    height:30px;
    display:inline-block;
}
.sdff-form-html > .cke {
    padding:0px;
}
.sdff-form-html > input {
    padding: 5px 0px;
}

.sdff-form-autocomplete > input.invalid {
    border: 1px solid #c00;
    box-shadow: 0 0 2px #f00 inset;
}
.sdff-form-autocomplete > input.selected {
    background-color:#343b4a;
    border:1px solid #343b4a;
    border-radius:5px;
    color:#fff;
}


.sdff-form-autocomplete-multi > .values {
    width:80%;
    display:inline-block;
    box-sizing:border-box;
    line-height:20px;
    vertical-align:top;
    margin:0px;
    overflow:hidden;
}
.sdff-form-autocomplete-multi > .values > .item {
    background-color:#343b4a;
    border-radius:5px;
    float:left;
    padding:5px 10px;
    margin-right:5px;
    margin-bottom:5px;
    box-sizing:border-box;
    height:30px;
}
.sdff-form-autocomplete-multi > .values > .item .text {
    color:#fff;
}

.sdff-form-autocomplete-multi > .values > .item .remove {
    cursor:pointer;
    color:#fff;
    margin-left:5px;
    opacity:0.7;
    font-size:12px;
}
.sdff-form-autocomplete-multi > .values > .item .remove:hover {
    opacity:1;
}
.sdff-form-autocomplete-multi > .values > .item .remove:before {
    content: "";
    font-family: FontAwesome; /* TODO use new Font Awesome 5 Free */
    display:inline-block;

}

.sdff-form-autocomplete-multi > .values > input {
    float:left;
    padding: 5px 10px;
    display: inline-block;
    box-sizing: border-box;
    line-height: 20px;
    padding: 5px 10px;
    vertical-align: top;
    margin: 0px;
    width: 200px;
    height:30px;
}

.sdff-form-image {
    overflow:hidden;
}

.sdff-form-image .croppie-container.hide-res-horizontal .cr-resizer-horisontal,
.sdff-form-image .croppie-container.hide-res-vertical .cr-resizer-vertical {
    display: none;
}
.sdff-form-image .cr-boundary {
    margin-left:20%;
}
.sdff-form-image .cr-slider-wrap {
    margin-left:20%;
    text-align:left;
}
.sdff-form-image .cr-slider {
    min-width:400px;
}
.sdff-form-image > input + a {
    display:block;
    margin-left:20%;
}
.sdff-form-image > input + a {
    max-width:400px;
}

.sdff-form-image > input + br + a {
    display:inline-block;
    margin-left:20%;
    max-width:400px;
    width:400px;
}

.sdff-form-image > a,
.sdff-form-file > a {
    display:inline-block;
    width:150px;
    line-height:20px;
    padding:5px;
    box-sizing:border-box;
    text-align:center;
}
.sdff-form-image > a.hide,
.sdff-form-image > span.file-delete.hide,
.sdff-form-file > a.hide,
.sdff-form-file > span.file-delete.hide {
    display:none;/*visibility: hidden;*/
}

.sdff-form-image > input,
.sdff-form-file > input {
    display:inline-block;
    width:auto;
    min-width:400px;
}

.sdff-form-image > span.file-delete,
.sdff-form-file > span.file-delete {
    cursor:pointer;
    display:inline-block;
    padding:5px;
}
.sdff-form-image > span.file-delete:before,
.sdff-form-file > span.file-delete:before {
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    font-weight: normal;
    position: relative;
    top: 2px;
    left: 2px;
    content: "";
    font-weight: 400;
}

.sdff-form-root .sdff-form-image > input:focus,
.sdff-form-root .sdff-form-file > input:focus {
    border:0px;
}

.sdff-form-image > a {
    position:relative;
    /*height:30px;*/
    overflow:hidden;

    width:auto;
    /*max-height:200px;*/
    max-width:200px;

}
.sdff-form-image > a > img {
    /*position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    margin:auto;
    width: 100%;*/
    max-width:100%;
    max-height:100%;
}



.sdff-form-block {

}
.sdff-form-block > label,
.sdff-form-list > label,
.sdff-form-list > div > div > label {
    display:block;
    line-height:20px;
    padding:5px 10px;
    background-color:#f2f2f2;
    border:1px solid #ccc;
    text-align:left;
}
.sdff-form-block > label.tree-plus,
.sdff-form-block > label.tree-minus,
.sdff-form-list > label.tree-plus,
.sdff-form-list > label.tree-minus,
.sdff-form-list > div > div > label.tree-plus,
.sdff-form-list > div > div > label.tree-minus {
    padding-left:30px;
    font-weight:bold;
    text-transform:uppercase;
    position:relative;
}
.sdff-form-block > label.tree-plus:before,
.sdff-form-block > label.tree-minus:before,
.sdff-form-list > label.tree-plus:before,
.sdff-form-list > label.tree-minus:before,
.sdff-form-list > div > div > label.tree-minus:before,
.sdff-form-list > div > div > label.tree-plus:before
{
    content:"";
    position:absolute;
    left:0px;
    top:7px;
    display:inline-block;
    font-size: 20px;
    font-family: "Font Awesome 5 Free";
    width:30px;
    text-align:center;
}
.sdff-form-block > label.tree-plus:before,
.sdff-form-list > label.tree-plus:before,
.sdff-form-list > div > div > label.tree-plus:before {
    content: "";
    font-weight:400;
}
.sdff-form-block > label.tree-minus:before,
.sdff-form-list > label.tree-minus:before,
.sdff-form-list > div > div > label.tree-minus:before {
    content: "";
    font-weight:400;
}

.sdff-form-block > label.tree-minus:after,
.sdff-form-list > label.tree-minus:after,
.sdff-form-list > div > div > label.tree-minus:after {
    content: "";
    position:absolute;
    display:inline-block;
    height:15px;
    width:0px;
    left:14px;
    top:30px;
    border-left:1px dotted #666;
}

.sdff-form-block.sdff-form-root > label {
    display:none;
}

.sdff-form-list > label > span.list-tools {
    float:right;
    display:inline-block;
}

.sdff-form-list > label > span.item-add {
    float:right;
    color:#c00;
    text-transform:none;
    cursor:pointer;
    display:inline-block;
    width:30px;
    text-align:center;
}
.sdff-form-list >label > span.item-add:before {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    font-size:20px;
    position:relative;
    top:2px;
}

.sdff-form-list > div > div > label > span.item-remove,
.sdff-form-list > div > div > label > span.item-move-up,
.sdff-form-list > div > div > label > span.item-move-down,
.sdff-form-list > div > div > label > span.item-move-first,
.sdff-form-list > div > div > label > span.item-move-last {
    float:right;
    color:#c00;
    text-transform:none;
    cursor:pointer;
    display:inline-block;
    width:30px;
    text-align:center;
}

.sdff-form-list > div > div.item-first > label > span.item-move-up,
.sdff-form-list > div > div.item-first > label > span.item-move-first,
.sdff-form-list > div > div.item-last > label > span.item-move-down,
.sdff-form-list > div > div.item-last > label > span.item-move-last {
    visibility: hidden;
}

.sdff-form-list > div > div > label > span.item-remove:before,
.sdff-form-list > div > div > label > span.item-move-up:before,
.sdff-form-list > div > div > label > span.item-move-down:before,
.sdff-form-list > div > div > label > span.item-move-first:before,
.sdff-form-list > div > div > label > span.item-move-last:before {
    font-family: "Font Awesome 5 Free";
    font-size:20px;
    font-weight:normal;
    position:relative;
    top:2px;
    left:2px;
}

.sdff-form-list > div > div > label > span.item-remove:before {
    content: "";
    font-weight:400;
}
.sdff-form-list > div > div > label > span.item-move-up:before {
    content: "";
    font-weight:900;
}
.sdff-form-list > div > div > label > span.item-move-down:before {
    content: "";
    font-weight:900;
}
.sdff-form-list > div > div > label > span.item-move-first:before {
    content: "";
    font-weight:900;
}
.sdff-form-list > div > div > label > span.item-move-last:before {
    content: "";
    font-weight:900;
}





.sdff-form-list {
    text-align:right;
}
.sdff-form-list > div > div {
    text-align:right;
}
.sdff-form-list > div > div > button {

}

.sdff-form-block:not(.sdff-form-root) > div,
.sdff-form-list > div,
.sdff-form-list > div > div > div {
    margin-left:30px;
    position:relative;
}
.sdff-form-block:not(.sdff-form-root) > div:before,
.sdff-form-list > div:before,
.sdff-form-list > div > div > div:before {
    /*content: "";
    width:0px;
    height:100%;
    top:0px;
    bottom:0px;
    left:-15px;
    position:absolute;
    box-sizing:border-box;
    border-left:1px dotted #666; */
}
.sdff-form-block:not(.sdff-form-root) > div > div,
.sdff-form-block:not(.sdff-form-root) > div > div.sdff-form-condition > div > div > div,
.sdff-form-list > div > div,
.sdff-form-list > div > div > div > div,
.sdff-form-list > div > div > div > div.sdff-form-condition > div  > div > div {
    position: relative;
}

.sdff-form-block:not(.sdff-form-root) > div > div:before,
.sdff-form-block:not(.sdff-form-root) > div > div.sdff-form-condition > div > div > div:before,
.sdff-form-list > div > div:before,
.sdff-form-list > div > div > div > div:before,
.sdff-form-list > div > div > div > div.sdff-form-condition > div > div > div:before {
    content: "";
    position: absolute;
    display:inline-block;
    left:-15px;
    top: 14px;
    height:0px;
    width:15px;
    border-top:1px dotted #666;
}

.sdff-form-block:not(.sdff-form-root) > div > div:not(.item-last):after,
.sdff-form-list > div > div:not(.item-last):after,
.sdff-form-list > div > div > div > div:not(.item-last):after {
    content: "";
    position:absolute;
    display:inline-block;
    height:100%;
    width:0px;
    left:-15px;
    top:15px;
    border-left:1px dotted #666;
}

.sdff-form-block:not(.sdff-form-root) > div > div.sdff-form-condition.item-last:not(.empty):after,
.sdff-form-list > div > div.sdff-form-condition.item-last:not(.empty):after,
.sdff-form-list > div > div > div > div.sdff-form-condition.item-last:not(.empty):after {
    content: "";
    position:absolute;
    display:inline-block;
    height:30px;
    width:0px;
    left:-15px;
    top:15px;
    border-left:1px dotted #666;
}




.elfinder .ui-forner-all {
    border-radius:0px;
}
.elfinder .ui-widget-header {
    background:#aaa;
    border-bottom:1px solid #666;
}
.elfinder-statusbar .ui-widget-header {
    background:#aaa;
    border-top:1px solid #666;
}


.sdff-form-languages > .sdff-form-lang {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-bottom: 0px;
    border-radius: 3px 3px 0px 0px;
    margin-right: 5px;
    cursor: pointer;
    background-color: #f2f2f2;
}
.sdff-form-languages > .sdff-form-lang:hover {
    text-decoration:none;
}
.sdff-form-languages > .sdff-form-lang.active {
    font-weight: bold;
}


.sdff-form .sdff-form-list .list-tools .sdff-list-tool-image,
.sdff-form .sdff-form-list .list-tools .sdff-list-tool-imageSizes,
.sdff-form .sdff-form-list .list-tools .sdff-list-tool-file {
    color: #c00;
    text-transform: none;
    cursor: pointer;
    display: inline-block;
    width: 30px;
    text-align: center;
}
.sdff-form .sdff-form-list .list-tools .sdff-list-tool-image:before,
.sdff-form .sdff-form-list .list-tools .sdff-list-tool-imageSizes:before{
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    position: relative;
    top: 2px;
}
.sdff-form .sdff-form-list .list-tools .sdff-list-tool-file:before {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    position: relative;
    top: 2px;
}

.sdff-form-image .image-list-item {
    margin-bottom:10px;
}
.sdff-form-image .image-list-item span {
    margin-left:20%;
    color:#bbb;
    display:block;
    margin-top:5px;
    margin-bottom:5px;
}
.sdff-form-image .image-list-item a {
    margin-left:20%;
    max-width:400px;
    max-height:400px;
    display:block;
}
.sdff-form-image .image-list-item a.hide {
    display:none;
}
.sdff-form-image .image-list-item a img {
    max-width:100%;
    max-height:100%;
}