.cd-prevalues-editor {
    max-width: 800px;
    width: 100%;
}

    /* Need to declare parent to not affect other native properties */
    .cd-prevalues-editor .cd-prevalues-multivalues__first {
        width:180px;
    }

    .cd-prevalues-editor .umb-prevalues-multivalues__left label {
        font-size: 14px;
        font-weight: 700;
        /* 
            * For smaller screens or if the the Tree is resized 
            * Keeping things aligned nicely
        */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
        
        .cd-prevalues-multivalues.umb-prevalues-multivalues__add {
            margin-bottom: 10px;
        }

        .cd-prevalues-multivalues > .umb-prevalues-multivalues__left {
            flex-direction: column;
            margin-right: .8rem;
        }

        .cd-prevalues-multivalues > .umb-prevalues-multivalues__left input {
            width: 100%;
        }

        .cd-prevalues-multivalues > div.align-bottom {
            align-self: flex-end;
        }

        /* Calculated manually to match the same space used for Umbraco's native dropdown */
        .cd-prevalues-multivalues.umb-prevalues-multivalues__add .umb-prevalues-multivalues__right {
            margin-left: calc(45px - .8rem);
        }

        /* There is just a 1px difference but it is visible in high density screens */
        .cd-prevalues-sortable .umb-prevalues-multivalues__right {
            margin-left: calc(44px - .8rem);
        }

    .cd-prevalues-sortable i.icon {
        cursor: move;
    }

    .cd-prevalues-sortable .cd-prevalues-multivalues__first {
        width: 154px;
    }

/* *** Breakpoints selected visually when the prevalues look ok *** */

/* 
    * 'Remove' button doesn't fit
    * Target 'Add' as well to keep things consistent
*/

/* First, we drop them under the fields until they fit */
@media only screen and (max-width: 528px) {

    .cd-prevalue-wrap__first,
    .cd-prevalue-wrap__last {
        width: calc(50% - .4rem)
    }

    .cd-prevalue-wrap__first {
        margin-right: .4rem !important;
    }

    .cd-prevalue-wrap__last {
        margin-left: .4rem;
        margin-right: 0 !important;
    }

    .cd-prevalues-editor .umb-prevalues-multivalues__right {
        margin-top: .8rem;
    }

}

/* Then, we remove the wide left margin to utilise the screen realestate */
@media only screen and (max-width: 559px) {

    /* Declare both to avoid over-using !important */
    .cd-prevalues-multivalues.umb-prevalues-multivalues__add .umb-prevalues-multivalues__right,
    .cd-prevalues-sortable .umb-prevalues-multivalues__right {
        margin-left: 0;
    }

}

/* Realign inputs up to this breakpoint */
@media only screen and (max-width: 719px) {

    .cd-prevalues-multivalues.umb-prevalues-multivalues__add,
    .cd-prevalues-multivalues.umb-prevalues-multivalues__listitem {
        flex-wrap: wrap;
    }

    /* Declare both to avoid over-using !important */
    .cd-prevalues-editor .cd-prevalues-multivalues__first,
    .cd-prevalues-sortable .cd-prevalues-multivalues__first {
        margin: 0 0 .8rem;
        width: 100%;
    }

    /* Align 'Add' button nicely to the right */
    .cd-prevalues-multivalues.umb-prevalues-multivalues__add button {
        margin-right: 0;
    }

    .cd-prevalues-multivalues i.icon {
        margin-bottom: 5px;
    }
    
}

    .cd-prevalues-multivalues .umb-node-preview__action{
        cursor: pointer;
    }


/* *** Radio List Alignment (Prevalues) *** */
.umb-radiobuttons-preval ul {
    display: flex;
}

    .umb-radiobuttons-preval ul li {
        margin-right: 25px;
    }

        .umb-radiobuttons-preval ul li label {
            display: flex;
        }

            .umb-radiobuttons-preval ul li label .umb-form-check__info {
                margin-left: 0;
                margin-top: 2px;
            }

        .umb-radiobuttons-preval ul li > [value='bottom'] label {
            flex-direction: column;
        }

        .umb-radiobuttons-preval ul li > [value='top'] label {
            flex-direction: column-reverse;
        }

        .umb-radiobuttons-preval ul li label .umb-form-check__symbol {
            height: 20px;
            margin: 5px;
            width: 20px;
        }

        .umb-radiobuttons-preval ul li label .umb-form-check__state {
            position: relative;
        }

        .umb-radiobuttons-preval ul li > [value='left'] label {
            flex-direction: row-reverse;
        }

/* *** Radio List (Property Editor) *** */
/* Some fixes to help with flexbox and alignement */
.cd-radio-list li {
    margin-right: 25px;
}

    .cd-radio-list li label {
        margin-top: 0;
    }

        .cd-radio-list li label .umb-form-check__state {
            position: relative;
        }

.cd-radio-list ul:not(.cd-btn-radio) li label .umb-form-check__symbol {
    height: 20px;
    margin: 5px;
    width: 20px;
}

.cd-radio-list li label .umb-form-check__info {
    margin-left: 0;
    margin-top: 2px;
}

/* Align Horizontally */
.cd-hrz-radio {
    display: flex;
}

    /* Label Top */
    .cd-hrz-radio.cd-labels-top li label {
        flex-direction: column-reverse;
        text-align: center;
    }

    /* Label bottom */
    .cd-hrz-radio.cd-labels-bottom li label {
        flex-direction: column;
        text-align: center;
    }

    /* Label Left */
    .cd-hrz-radio.cd-labels-left li label {
        flex-direction: row-reverse;
    }

/* ** Display as Standard Button ** */
    .cd-btn-radio li,
    .cd-btn-radio li label,
    .cd-btn-radio li label .umb-form-check__symbol {
        height: 32px;
    }

    .cd-btn-radio li {
        margin: 0 0 10px 0;
    }

        .cd-btn-radio li label {
            display: inline-block;
            margin: 0 10px 10px 0;
        }

            .cd-btn-radio li label .umb-form-check__symbol {
                display: block;
            }

            .cd-btn-radio li label .umb-form-check__state {
                height: 100%;
                width: 100%;
            }

            .cd-btn-radio li label .umb-form-check__check {
                background: #e9e9eb;
                border: none;
                border-radius: 3px;
                height: 100%;
                overflow: hidden;
                width: 100%;
            }

                .cd-btn-radio li label .umb-form-check__check:before {
                    border-radius: 0;
                    height: 100%;
                    width: 100%;
                }

                .cd-btn-radio li label .umb-form-check__check:before,
                .cd-btn-radio li label .umb-form-check__input:checked:hover ~ .umb-form-check__state .umb-form-check__check:before {
                    background: #f5c1bc;
                }

            .cd-btn-radio li label:hover .umb-form-check__check {
                background: #f3f3f5;
            }

            .cd-btn-radio li label .umb-form-check__info {
                display: block;
                margin-top: 0;
                padding: 6px 14px;
                transform: translateY(-32px);
            }