/* Lowest specificity: simple class selectors */
.clarioh-lists {
    display        : flex;
    position       : relative;
    justify-content: space-between;
    padding        : 10px;
    list-style     : none;
}

/* (0,1,1): class + element */
.clarioh-lists h4 {
    margin   : 0;
    font-size: 14px;
    color    : #333;
    padding  : 1rem 0;
    width    : 100%;
}

/* (0,1,1): class + child + class */
.clarioh-lists>li.clarioh-list-item-grow {
    flex-grow: 1;
}

/* (0,1,1): element + class */
ul.clarioh-list,
ul.clarioh-list-target,
ul.clarioh-list-block,
ul.clarioh-list-branches,
.clarioh-list-item-branches>h4 {
    /* grouped definitions below */
}

/* Breaking those grouped selectors out: */
ul.clarioh-list {
    display        : flex;
    position       : relative;
    flex-direction : column;
    min-height     : 50px;
    padding        : 0;
    justify-content: space-between;
    margin         : 0;
    list-style     : none;
}

ul.clarioh-list-target {
    min-height         : 150px;
    /* background-color: #fff; */
}

ul.clarioh-list-block {
    min-height      : 100px;
    border          : 2px dashed #ccc;
    border-radius   : 6px;
    background-color: #f9f9f9;
    height          : 100%;
}

ul.clarioh-list-branches {
    flex-direction: row;
    flex-wrap     : nowrap;
    gap           : 0;
    padding       : 0;
    position      : relative;
}

ul.clarioh-list-branches::before {
    content         : '';
    display         : block;
    height          : .1rem;
    width           : 75%;
    margin          : 0 auto;
    position        : absolute;
    top             : 0;
    left            : 12.5%;
    background-color: #ccc;
}

ul.clarioh-list-branches::after {
    content         : '';
    display         : block;
    height          : .1rem;
    width           : 75%;
    margin          : 0 auto;
    position        : absolute;
    bottom          : 0;
    left            : 12.5%;
    background-color: #ccc;
}

.clarioh-list-item-branches>h4,
ul.clarioh-list>li>h4 {
    text-align: center;
}

/* (0,0,2): nested elements */
ul.clarioh-list>li,
ul.clarioh-list-target>li,
ul.clarioh-list-branches>li {
    /* overflow: hidden; */
}

/* Expanded definitions: */
ul.clarioh-list>li {
    padding: 0px 12px;
}

ul.clarioh-list>li::before,
.clarioh-wrapper-list::before {
    content         : '';
    display         : block;
    height          : 2rem;
    width           : .1rem;
    margin          : 0;
    background-color: #ccc;
}

ul.clarioh-list>li::after,
.clarioh-wrapper-list::after {
    content         : '';
    display         : block;
    height          : 2rem;
    width           : .1rem;
    margin          : 0;
    background-color: #ccc;
}

ul.clarioh-list-branches>li::before,
ul.clarioh-list-branches>li::after {
    height: 3rem;
}

ul.clarioh-list-branches>li ul.clarioh-list {
    padding: 0 1rem;
}




.clarioh-wrapper-list {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 0px;
}





ul.clarioh-list>li>div {
    border          : solid .1rem #ddd;
    padding         : 10px;
    border-radius   : .75rem;
    background-color: #fff;
    flex-direction  : column;
    align-items     : center;
    gap             : 0px;
}

ul.clarioh-list>li.container-clarioh-list>div.clarioh-list-item-content {
    border: none;
}

ul.clarioh-list>li>div::before {
    content         : '';
    display         : block;
    height          : 1.5rem;
    width           : 1.5rem;
    border-radius   : .75rem;
    border          : solid .1rem #ccc;
    background-color: #fff;
    position        : absolute;
    top             : 0;
    left            : 50%;
    transform       : translateX(-50%) translateY(-.75rem);
}

ul.clarioh-list>li>div::after {
    content         : '';
    display         : block;
    height          : 1rem;
    width           : 1rem;
    border-radius   : .5rem;
    border          : solid .1rem #ccc;
    background-color: #fff;
    position        : absolute;
    bottom          : 0;
    left            : 50%;
    transform       : translateX(-50%) translateY(.5rem);
}

ul.clarioh-list>li.clarioh-list-item-branches>.clarioh-list-item-content {
    padding: 0;
}

ul.clarioh-list>li.clarioh-list-item-branches>.clarioh-list-item-content::before,
ul.clarioh-list>li.clarioh-list-item-branches>.clarioh-list-item-content::after {
    display: none;
}

ul.clarioh-list-target>li {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 0px;
}

ul.clarioh-list>li h4 {
    cursor     : grab;
    user-select: none;
}

#targetList>li:first-child>.clarioh-list-item-arrow {
    display: none
}

ul.clarioh-list-branches>li {
    flex: 1;
}

/* Expanded definitions: */
ul.clarioh-list-target>li>div.clarioh-list-item-content {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    min-width       : 200px;
    position        : relative;
    border          : none;
    gap             : 1rem;
    border          : solid 1px #ddd;
    background-color: #f0f0e6;
    cursor          : grab;
}

ul.clarioh-list-branches ul.clarioh-list-target>li>div.clarioh-list-item-content {
    background-color: #fff;
}

ul.clarioh-list-branches>li>div.clarioh-list-item-content {
    gap      : 0;
    padding  : 0 0;
    flex-grow: 1;
}

ul.clarioh-list-branches>li>div.clarioh-list-item-content>.handle {
    border-radius   : .5rem .5rem 0 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding         : 1.5rem 0;
    color           : #fff;
}

ul.clarioh-list-target>li.container-clarioh-list>div.clarioh-list-item-content {
    gap             : 0;
    background-color: transparent;
}

ul.clarioh-list-target>li>div.clarioh-list-item-content>hr {
    display   : block;
    width     : 50px;
    height    : 0;
    margin    : 0;
    border    : none;
    border-top: 1px solid #79848c;
}

ul.clarioh-list .clarioh-list-ghost {
    opacity: 0.4;
}

/* 
ul.clarioh-list-target>li>div.clarioh-list-item-arrow {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    height        : 20px;
    width         : 100%;
    position      : relative;
    border        : none;
    padding       : 0;
    margin        : 0;
}

ul.clarioh-list-target>li>div.clarioh-list-item-arrow::before {
    content         : '';
    display         : block;
    width           : 5px;
    height          : 15px;
    margin          : -2px 0;
    background-color: #c9d5dd;
    position        : absolute;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);
}

ul.clarioh-list-target>li>div.clarioh-list-item-arrow::after {
    content     : '';
    display     : block;
    width       : 15px;
    height      : 15px;
    margin      : 0;
    border-color: #c9d5dd;
    border-width: 0 5px 5px 0;
    border-style: solid;
    position    : absolute;
    top         : 50%;
    left        : 50%;
    transform   : translate(-50%, -50%) rotate(45deg);
} */

ul.clarioh-list-target>li h4 {
    text-align: center;
}

ul.clarioh-list>li.sortable-ghost>ul,
ul.clarioh-list>li.sortable-chosen>ul {
    display   : none;
    visibility: hidden;
}

/* (0,2,2): sortable ghost and chosen */
ul.clarioh-list>li.sortable-ghost,
ul.clarioh-list>li.sortable-chosen {
    /* shared sortable styles */
}

.sortable-item:active {
    cursor: grabbing;
}

ul.clarioh-list>li.sortable-ghost>.clarioh-list-item-content {
    border              : solid 1px #d64141;
    /* outline-offset   : 1rem;
    outline             : 1px solid #fcb17b; */
    background-color    : rgba(255, 255, 255, 0.572);
    cursor              : ns-resize;
}