/** setup tree like behaviour */
.clr li {
    cursor: default;
    list-style: none;
}

.clr a {
    cursor: pointer;
}
        
.clr li > input ~ ul {
    display: none;
}
 
.clr li > input:checked ~ ul {
    display: block;
}

/** style checkboxes with pic in next span */
.clr li > input {
    opacity: 0; 
    z-index: 1;
}

.clr li.submenu > input + span {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -20px;
    z-index: -1;
}

.clr li.submenu > input + span {
    background: url('../pics/expand.png');
    background-position: left;
    background-repeat: no-repeat;
}

.clr li.submenu > input:checked + span {
    background: url('../pics/collapse.png');
    background-position: left;
    background-repeat: no-repeat;
}

.clr li.clr-append > input + span {
    display: inline-block !important;
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -20px;
    z-index: -1;
    background: url('../pics/append.png') !important;
    background-position: left !important;
    background-repeat: no-repeat !important;
}

/** style */
.clr-edit 
{
    margin-top: 10px;
    font-size: 16px;
}

.clr {
    padding: 0px;
    margin: 0px;
}

.clr ul {
    -webkit-padding-start: 20px;
    -moz-padding-start: 20px;
    padding-left: 20px;
}

.clr li {
    padding-top: 10px;
    padding-bottom: 3px;
}

.clr li > div {
    padding-left: 20px;
}

.clr .clr-code {
    font-size: 20px;
    font-weight: bold;
    padding-right: 10px;
    cursor: pointer;
}

.clr .clr-code input {
    width: 50px;
}

.clr .clr-code .placeholder {
    color: gray;
}

.clr .clr-name {
    font-size: 20px;
    padding-right: 10px;
    cursor: pointer;
}

.clr .clr-name input {
    width: 500px;
}

.clr .clr-name .placeholder {
    color: gray;
}

.clr .clr-remove {
    opacity: 0;
}

.clr .clr-remove:hover {
    opacity: 1;
}

.clr .clr-name:hover ~ .clr-remove {
    opacity: 1;
}

.clr .clr-code:hover ~ .clr-remove {
    opacity: 1;
}

.clr .object-footer .object-selector {
    width: 570px;
}

.clr .object-save {
    margin-left: 10px;
}

.clr .object-row {
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.clr .object-row .object-remove {
    margin-left: 10px;
}

.clr .object-row .object-remove {
    opacity: 0;
}

.clr .object-row:hover .object-remove {
    opacity: 1;
}

.clr .object-row .object-name {
    text-decoration: none;
    color: black;
}
.clr .object-row .object-name:hover {
    text-decoration: underline;
}

.clr .select2-search__field {
    opacity: 1 !important;
}

.clr li.select2-search--inline {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.clr.edit-off .clr-remove {
    display:none;
}

.clr.edit-off .clr-append {
    display:none;
}

.clr.edit-on .clr-objects {
    display:none;
}

.clr .object-rows {
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;
    -webkit-column-gap: 1.875em; /* 30px */
    -moz-column-gap: 1.875em; /* 30px */
    column-gap: 1.875em; /* 30px */
}

.clr.readonly .object-row .object-remove,
.clr.readonly .object-footer {
	display: none !important;
}