.mlf-types-selection {
    padding: 0 !important;
    display: flex;
    justify-content: center;
}

a.mlf-type {
    float: left;
    display: block;
    width: 50px;
    border: 1px dashed #ccc;
    margin: 0 10px;
    padding: 30px 10px 10px 10px;
    text-align: center;
    color: #81A7D3;
    background-position: 50% 30%;
    background-repeat: no-repeat;
}

.soft-tabular p,
.soft-tabular > div {
    margin: 0;
    padding: 3px 0 3px 0;
    padding-left: 120px;
    min-height: 2em;
    clear: left;
}

.soft-tabular label {
    font-weight: bold;
    float: left;
    text-align: right;
    margin-left: -125px;
    width: 175px;
}

#mlf-builder-preview {
    position: relative;
}

#mlf-builder-preview p.nodata {
    padding-left: 0 !important;
}

#mlf-builder {
    position: relative;
}

#mlf-builder label {
    width: auto;
    margin-left: 3px;
    float: none;
    text-align: left;
}

.mlfStatus.statusDefault {
    color: #4F9D04;
}

.mlfStatus.statusChanged {
    font-weight: bold;
    color: #CA3E26;
}

.mlfStatus.statusGlobal {
    font-weight: bold;
    color: #E6AA46;
}

#mlf-builder-control a.controlLink {
    float: right;
    font-size: 0.9em;
}

/* class for element info modal */
.mlfElementValue {
    display: block;
    max-height: 50px;
    overflow: auto;
}

/**
 * FORMATTERS AREA
 */
.formatter {
    font-size: 0.9em;
    margin-bottom: 20px;
}

/* fix for icons in redmine 3.4 */
.formatter .icon {
    padding-top: 3px;
    padding-bottom: 3px;
}

.formatter .highlight {
    border: 1px solid #000;
}

/* formatter ROOT */

.formatterRootContainer {

}

.formatterRootContainer .rootHeader {
    height: 15px;
    text-align: right;
    padding-right: 6px;
}

.formatterRootContainer .rootBody {
    overflow: hidden;
    padding-top: 13px;
    margin-top: -8px;
}

.formatterRootContainer [opt-missing="true"] {
    background: #F6EDD2;
    border: 1px dashed #EEDBBD;
}

/* formatter AREA */
.formatterAreaContainer {
    margin-bottom: 10px;
}

.formatterAreaContainer .areaHeader {
    height: 15px;
    text-align: right;
    padding-right: 6px;
}

.formatterAreaContainer .areaBody {
    overflow: hidden;
    clear: both;
    border: 3px double #ccc;
    padding-top: 13px;
    margin-top: -8px;
}

.formatterAreaContainer.isHidden .areaBody {
    background: #666 url(/plugin_assets/millepondo_layout_formatter/images/ui-bg_inv-diagonals.png) 50% 50% repeat;
    color: #fff;
}

/* formatter AREA_COLUMN */
.formatterAreaColumnContainer {
    float: left;
}

.formatterAreaColumnContainer .areaColumnHeader {
    height: 17px;
    text-align: right;
    padding-right: 5px;
}

.formatterAreaColumnContainer .areaColumnBody {
    margin: -8px 5px 5px 5px;
}

.formatterAreaColumnContainer.columnType1 {
    float: none;
    width: 100%;
}

.formatterAreaColumnContainer.columnType2 {
    width: 50%;
}

.formatterAreaColumnContainer.columnType3 {
    width: 33%;
}

.formatterAreaColumnContainer.columnType4 {
    width: 25%;
}

.formatterAreaColumnContainer.columnType5 {
    width: 20%;
}

.formatterAreaColumnContainer.columnType6 {
    width: 16%;
}

.formatterAreaColumnContainer.columnType7 {
    width: 14%;
}

.formatterAreaColumnContainer.columnType8 {
    width: 12.5%;
}

.formatterAreaColumnContainer.slimFlag {
    width: 10%;
    float: right;
}

.formatterAreaColumnContainer.wideFlag {
    width: 90%;
}

/* formatter TABLE */
.formatterTableContainer {
    margin-bottom: 5px;
    padding-bottom: 1px;
}

.formatterTableContainer .tableHeader {
    height: 22px;
    text-align: right;
    padding: 7px 5px 7px 0;
    overflow: hidden;
}

.formatterTableContainer .tableBody {
    margin: -8px 5px 5px 5px;
}

.formatterTableContainer table {
    width: 100%;
}

.formatterTableContainer table th {
    background: #efefef;
    padding: 5px;
}

.formatterTableContainer table td {
    padding: 5px;
}

/* TABLE WITH BORDER */
.formatterTableContainer.withBorders table {
    border: 1px solid #848484;
    border-collapse: collapse;
}

.formatterTableContainer.withBorders table th {
    border: 1px solid #848484;
}

.formatterTableContainer.withBorders table td {
    border: 1px solid #848484;
    padding: 0;
}

.formatterPreview .formatterTableContainer.withBorders table td {
    padding: 5px;
}

.formatterPreview .formatterTableCellContainer {
    position: relative;
}

.formatterPreview .formatterTableCellContainer .rowHeader {
    position: absolute;
    top: -4px;
    left: -2px;
}

/* formatter GROUP */
.formatterGroupContainer {
    margin-bottom: 5px;
    padding-bottom: 1px;
}

.formatterGroupContainer .groupHeader {
    height: 18px;
    text-align: right;
    padding-right: 5px;
    overflow: hidden;
}

.formatterGroupContainer .groupHeader .groupName {
    float: left;
    font-size: 0.9em;
    margin-left: 15px;
    border: 0;
    margin-top: -1px;
    font-style: italic;
    text-align: left;
    max-width: 50%;
    padding: 1px;
    font-weight: bold;
}

.formatterGroupContainer .groupBody {
    margin: -8px 5px 5px 5px;
}

/* formatter TEXT */
.formatterTextContainer {
    margin-bottom: 5px;
    padding-bottom: 1px;
}

.formatterTextContainer .textHeader {
    height: 17px;
    text-align: right;
    padding-right: 5px;
    overflow: hidden;
}

.formatterTextContainer .textBody {
    margin: -8px 5px 5px 5px;
    border: 1px dotted #848484;
    padding: 2px;
}

/* formatter CUSTOM */
.formatterPreview .formatterCustomContainer {
    display: block;
    padding: 2px;
    margin: 5px;
    margin-top: 10px;
    cursor: move;
    border: 1px dashed #848484;
    color: #505050;
    font-size: 0.8em;
    line-height: 1.5em;
}

.formatterPreview .formatterCustomContainer .textHeader {
    margin-top: -9px;
    height: 17px;
    text-align: right;
    padding-right: 5px;
}

.formatterPreview .formatterCustomContainer .textBody {
    margin: 0 2px 2px 2px;
    padding: 2px;
}

/* formatter ELEMENT */
.formatterAttributeContainer {
    border-radius: 9px;
    display: block;
    padding: 2px;
    margin: 5px;
    cursor: move;
    border: 1px solid #FFC5a3;
    background: #FAE2D4;
    color: #505050;
    font-size: 0.8em;
    line-height: 1.5em;
}

.formatterContainerContainer {
    background: #A8D1F0;
}

.formatterAttributeContainer.isContainer {
    background: #A8D1F0;
}

.formatterAttributeContainer.isCustomField {
    background: #FDF9DD;
}

.formatterAttributeContainer.hasSourceType,
.formatterContainerContainer.hasSourceType {
    background: #A8499F;
    color: #fff;
}

.formatterAttributeContainer.hasMissing {
    background: #ff4b45 url(/plugin_assets/millepondo_layout_formatter/images/ui-bg_diagonals.png) 50% 50% repeat;
    color: #fff;
}

.formatterAttributeContainer.hasAdded {
    background: #FFCB58 url(/plugin_assets/millepondo_layout_formatter/images/ui-bg_diagonals.png) 50% 50% repeat;
    color: #666;
}

.formatterAttributeContainer .attributeHeader {
    text-align: left;
}

.formatterAttributeContainer .attributeHeader .headBtn {
    margin-right: -6px;
    float: right;
    height: 12px;
    margin-top: -3px;
}

.formatterAttributeContainer label {
    font-weight: bold;
    cursor: move;
    float: left;
}

.formatterTableCellContainer .cellHeader {
    float: right;
    width: 16px;
    min-height: 16px;
    text-align: right;
    margin-top: 3px;
    margin-right: -7px;
}

.slimFlag .formatterAttributeContainer,
.formatterAreaColumnContainer .formatterAttributeContainer {
    margin: 5px;
}

.slimFlag .formatterAttributeContainer label,
.formatterAttributeContainer label,
.tabular.settings .formatterAttributeContainer label {
    margin: 0;
    width: auto;
}

.formatterTableContainer .formatterAttributeContainer {
    margin: 5px 0;
    text-align: center;
}

.slimFlag p {
    padding-left: 0;
}

.fullFlag {
    width: 100%;
}

/* formatter header button */
.headBtn {
    cursor: pointer;
}

.cellBtn {
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin: 0;
    z-index: 1;
}

/* dropContainer indicator */
.dropContainer {
    border: 1px dashed #ccc;
    /*background: #eee;*/
}

.dropContainer.over {
    /*background: #FAEDB2;*/
}

/* dropArea - drop every sortableElement */
.dropArea {
    margin: 5px;
    min-height: 50px;
    overflow: hidden;
}

.sortableElement {
    clear: both;
    cursor: move;
}

.formatterPlaceholder {
    /* real background image will be generated */
    background-color: #FDECC2;
    height: 16px;
    background-position: 10px 0;
    background-repeat: no-repeat;
}

/* special CSS for html container */
.formatterHtml .formatterAreaContainer,
.formatterHtml .formatterGroupContainer,
.formatterHtml .formatterAttributeContainer {
    overflow: hidden;
}

.formatterHtml fieldset {
    width: 95%;
}

.formatterHtml .slimFlag {
    width: 6%;
}

.formatterHtml .wideFlag {
    width: 93%;
}

.formatterHtml .formatterAreaContainer.isHidden {
    display: none;
}

.formatterHtml .formatterTableContainer th p {
    margin: 0;
    padding: 0;
    padding-top: 4px;
}

.formatterHtml .formatterTableContainer .columnType2 td input:not([type="checkbox"]):not([type="radio"]) {
    /* width: 90%; */
}

/* fitForms in table - with flag 'fitForms' */
.formatterHtml .formatterTableContainer.fitForms td {

}

.formatterHtml .formatterTableContainer.fitForms td p {
    margin: 0;
    padding: 0;
    display: block;
}

.formatterHtml .formatterTableContainer.fitForms tr p label {
    display: none;
}

.formatterHtml .formatterTableContainer.fitForms input:not([type="checkbox"]):not([type="radio"]),
.formatterHtml .formatterTableContainer.fitForms select,
.formatterHtml .formatterTableContainer.fitForms textarea {
    width: 100% !important;
    margin: 0;
    padding: 0;
    max-width: none;
    height: 80px;
    border: none;
    resize: none;
    background: #fff;
}

.formatterHtml .formatterTableContainer.fitForms td .description {
    overflow: auto;
    max-width: 1090px;
}

/* hide labels in table - with flag 'noLabels' */
.formatterHtml .formatterTableContainer.noLabels td p {
    margin: 0;
    padding: 0;
}

.formatterHtml .formatterTableContainer.noLabels tr p label {
    display: none;
}

.formatterHtml .formatterTableContainer.noLabels td div.attribute {
    padding: 4px;
    min-height: 0;
}

.formatterHtml .formatterTableContainer.noLabels td div.attribute .label,
.formatterHtml .formatterTableContainer.noLabels td div.attribute label {
    display: none;
}

.formatterHtml .formatterTableContainer.noLabels td p.formatterTextContainer {
    padding: 5px;
}

.formatterHtml .formatterGroupContainer.collapsible.collapsed .formatterGroupContentContainer {
    display: none;
}

.formatterHtml fieldset.formatterGroupContainer.collapsible {
    border-width: 1px;
}

.formatterHtml fieldset.formatterGroupContainer.collapsible.collapsed {
    border-width: 1px 0 0 0;
    margin-left: 1px;
    margin-right: 1px;
}

.formatterHtml fieldset.formatterGroupContainer.collapsible > legend {
    padding-left: 0;
}

/* color indicator for list view */
.typeNotModified {
    font-weight: bold;
    color: #4F9D04;
}

.typeModified {
    font-weight: bold;
    color: #CA3E26;
}

/***** Tabs *****/
.ui-widget-content .tabs {
    height: 2.6em;
    margin-bottom: 1.2em;
    position: relative;
    overflow: hidden;
}

.ui-widget-content .tabs ul {
    margin: 0;
    position: absolute;
    bottom: 0;
    padding-left: 0.5em;
    width: 2000px;
    border-bottom: 1px solid #bbbbbb;
}

.ui-widget-content .tabs ul li {
    float: left;
    list-style-type: none;
    white-space: nowrap;
    margin-right: 4px;
    background: #fff;
    position: relative;
    margin-bottom: -1px;
}

.ui-widget-content .tabs ul li a {
    display: block;
    font-size: 0.9em;
    text-decoration: none;
    line-height: 1.3em;
    padding: 4px 6px 4px 6px;
    border: 1px solid #ccc;
    border-bottom: 1px solid #bbbbbb;
    background-color: #f6f6f6;
    color: #999;
    font-weight: bold;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.ui-widget-content .tabs ul li a:hover {
    background-color: #ffffdd;
    text-decoration: none;
}

.ui-widget-content .tabs ul li a.selected {
    background-color: #fff;
    border: 1px solid #bbbbbb;
    border-bottom: 1px solid #fff;
    color: #444;
}

.ui-widget-content .tabs ul li a.selected:hover {
    background-color: #fff;
}

#selection_column_options select {
    float: left;
    margin: 2px;
    width: 11.5%;
}

#tab-content-filter-conditions {

}

#tab-content-filter-conditions fieldset {
    background-color: #FFF;
    border: 2px solid #e4e4e4;
}

#tab-content-filter-conditions fieldset div {
    margin: 5px;
}

#tab-content-filter-conditions span.label {
    font-weight: bold;
}

#tab-content-filter-conditions .outer-selector {
    padding: 10px;
}


/* filter styles */

legend .legend-control {
    position: absolute;
    text-align: right;
    right: 20px;
    margin: 2px 0 0 0;
}

legend .legend-control .filterId {
    font-size: 9px;
    color: #c8c8c8;
    margin-right: 10px;
    padding-top: 5px;
    position: relative;
    top: -9px;
}

.filterConditionContainer .conditionHeader .conditionId {
    font-size: 9px;
    color: #c8c8c8;
    right: 10px;
    position: absolute;
    top: -15px;
}

.filter .headBtn {

}

.filterRootContainer .rootHeader,
.filterContainer .filterHeader,
.filterConditionContainer .conditionHeader {
    height: 15px;
    padding-right: 6px;
    text-align: right;
}

.filterRootContainer .rootHeader {
    border-bottom: 1px solid #c8c8c8;
    padding-bottom: 10px;
}

.filterContainer .filterHeader,
.filterConditionGroupContainer .conditionHeader {
    border-bottom: 1px solid #E4E4E4;
    padding-bottom: 10px;
    height: 28px;
}

.filterConditionGroupContainer .filterRuleOptions {
    float: left;
    text-align: left;
}

.filterConditionGroupContainer .filterRuleOptions input {
    margin-left: 10px;
}

.filterRootContainer .rootBody {
    padding-top: 13px;
    margin-top: -8px;
}

.filterConditionGroupContainer {
    border: 1px dashed #ccc;
    margin: 15px 0 0 25px;
    padding: 10px;
    position: relative;
}

.filterConditionGroupContainer .conditionReorderHandle {
    position: absolute;
    left: -20px;
    top: 5px;
    width: 16px;
    height: 16px;
}

.filterConditionsContainer .filterConditionContainer:last-child .filterConditionOperator {
    display: none;
}

.filterConditionsContainer .filterConditionOperator {
    margin: 15px 40px;
    border-left: 1px solid #ccc;
}

.filterConditionsContainer .filterConditionOperator input {
    margin-left: 10px;
}

.filterReactionContainer .dragArea {
    vertical-align: bottom;
}

.filterContainer legend input {
    width: 200px;
}

.filterPreview {
    margin-bottom: 10px;
}

.filterPreview [data-handle='1'] {
    cursor: move;
}

#sidebar ul.formatter li {
    padding: 2px 0 2px 10px;
    margin: 0 20px 4px 0;
    cursor: pointer;
}

ul.formatter li span {
    display: inline-block;
    width: 30px;
    height: 13px;
    margin-right: 5px;
    border-radius: 6px;
    background: #FAE2D4;
    color: #505050;
}

ul.formatter li span.customField {
    background: #FDF9DD;
}

ul.formatter li span.container {
    background: #A8D1F0;
}

ul.formatter li span.missing {
    background: #ff4b45;
}

ul.formatter li span.source {
    background: #A8499F;
}

ul.formatter li span.added {
    background: #FFCB58 url(/plugin_assets/millepondo_layout_formatter/images/ui-bg_diagonals.png) 50% 50% repeat;
    color: #666;
}

.formatter-locator{
    cursor: pointer;
}

.mlf-impex-area-content .formatter-class td.name,
#mlf-builder-list .formatter-class td.name {
    font-weight: bold;
}

.mlf-impex-area-content .formatter-type td.name,
#mlf-builder-list .formatter-type td.name {
    padding-left: 20px;
}


.mlf-impex-area-content .formatter-item td.name,
#mlf-builder-list .formatter-item td.name {
    padding-left: 40px;
    font-style: italic;
}

#mlf-builder-list .formatter-noitem td {
    padding-left: 40px;
    font-style: italic;
}

/* IMPEX */

.mlf-impex-container-left {
    width: 40%;
}

.mlf-impex-container-middle {
    width: 16%;
    margin: 0 2%;
}

.mlf-impex-container-right {
    width: 40%;
}

.mlf-impex-container {
    float: left;
}

.mlf-impex-container .mlf-impex-area {
    margin-bottom: 10px;
}

.mlf-impex-area-content {
    height: 250px;
    overflow-y: scroll;
    width: 350px;
    border: 1px solid #e4e4e4;
    font-size: 80%;
}
.mlf-impex-area-content.half-content{
    height: 190px;
    opacity: 0.6;
}
.mlf-impex-results-content{
    height: 408px;
    overflow: hidden;
    overflow-y: scroll;
    border: 1px solid #e4e4e4;
}

.mlf-impex-container .mlf-impex-area .header-title {
    background-color: #EEEEEE;
    font-weight: bold;
    padding: 5px;
    text-align: center;
}

.mlf-list label {
    display: block;
}

.soft-tabular label.block {
    font-weight: normal;
    margin-left: 0 !important;
    text-align: left;
    float: none;
}

#impex_area .splitcontent-2 {
    height: 350px;
}

#impex_data_types_content {
    margin-left: 59px;
}

#impex-area-loading{
    background-image: url(/images/loading.gif);
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
}

#impex-form .project-selection{
    height: 140px;
}

#impex-area button:not([disabled=disabled]) {
    cursor: pointer;
}

#impex_target_project_ids{
    height: 121px;
}

em.mlf-info{
    text-align: right;
    padding-right: 15px;
    padding-left: 175px;
    font-style: italic;
    font-size: 80%;
}

.-mlf-impex-content{
    height: 500px;
}

#impex-errors em{
    height: 16px;
}

table.formatter tr td{
    height: 18px;
}
table.list tr td.checkbox-fix{
    vertical-align: middle;
}
table.list tr td.checkbox-fix input{
    vertical-align: unset;
}
table.list tr.formatter-type{
    border-top: 1px solid #c8c8c8;
}