.fh-column {
    height: 100%;
    width: 240px;
    float: left;
}

.full-height-scroll {
    overflow: hidden;
    overflow-y: auto;
    width: auto;
    height: 100%;
}


.full-height {
    height: 100%;
}

.full-height-layout .content {
    height: calc(100vh - 189px);
    padding: 0px;
}

    .full-height-layout .content.content-no-title {
        height: calc(100vh - 113px);
        padding: 0px;
    }


/* Fix select2 layout */

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da;
    padding: 0.46875rem 0.75rem;
    height: calc(2.25rem + 2px) !important;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 31px !important;
        right: 6px;
    }

/*extra select2 clearable (input group, multiple) CSS */
.select2-container-clearable > .select2 {
    width: calc(100% - 41px) !important;
}

.select2-container-clearable > .input-group-addon > button {
    height: 100%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.select2-container-clearable > .input-group-addon {
    margin-left: -1px;
}

.select2-container-clearable > .select2 > .select2-selection {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* end fix select2 */

/* icon circle image */
.icon-circle {
    font-size: 1em;
    line-height: 1em;
    padding: 5px;
}

    .icon-circle > * {
        padding: 0;
    }

/* Modal Full screen*/

@media (max-width: 575.98px) {
    .modal-fullscreen {
        padding: 0 !important;
    }

        .modal-fullscreen .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen .modal-body {
            overflow-y: auto;
        }
}

@media (max-width: 767.98px) {
    .modal-fullscreen-sm {
        padding: 0 !important;
    }

        .modal-fullscreen-sm .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen-sm .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-sm .modal-body {
            overflow-y: auto;
        }
}

@media (max-width: 991.98px) {
    .modal-fullscreen-md {
        padding: 0 !important;
    }

        .modal-fullscreen-md .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen-md .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-md .modal-body {
            overflow-y: auto;
        }
}

@media (max-width: 1199.98px) {
    .modal-fullscreen-lg {
        padding: 0 !important;
    }

        .modal-fullscreen-lg .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }

        .modal-fullscreen-lg .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }

        .modal-fullscreen-lg .modal-body {
            overflow-y: auto;
        }
}

.modal-fullscreen-xl {
    padding: 2rem !important;
}

    .modal-fullscreen-xl .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-xl .modal-content {
        height: 100%;
    }

    .modal-fullscreen-xl .modal-body {
        overflow-y: auto;
    }

/*End modal full screen */

/* MODAL AUTO WIDTH */

body .modal-dialog.modal-auto { /* Width */
    max-width: 100%;
    width: auto !important;
    display: grid;
}

.modal-open .modal {
    overflow-x: hidden;
    /*overflow-y: hidden !important;*/
}

/* END MODAL AUTO WIDTH */

/* MODAL */

.modal-dialog > .modal-content > form {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-height: calc(100vh - 3.5rem);
}

/* END MODAL */

/* Breadcrumbs */

.breadcrumb {
    line-height: 1.8rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/*other*/

.input-group-append > .input-group-text {
    border-radius: 0;
}

.input-group-text > i:only-child {
    line-height: 1.5;
    font-size: 1rem;
    padding-right: 0;
}

.input-group-sm .input-group-text > i:only-child {
    font-size: 0.7rem;
}

.input-group-xs .input-group-text > i:only-child {
    font-size: 0.7rem;
}

.input-group-text.colorpicker-input-addon {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Smaller list groups */

.list-group.list-group-sm .list-group-item {
    padding: .5rem 0.75rem;
}

.list-group.list-group-xs .list-group-item {
    padding: .25rem 0.5rem;
}

/* icon in input group should not have padding */
.input-group-addon i {
    padding-right: unset;
}

/* jstree modifications */
.jstree-default .jstree-node {
    margin-left: 8px;
}

/* TABLE BUTTONS */
table .btn {
    margin: 0;
}

/* form groups */
.form-group.form-group-sm .form-control {
    height: calc(1.8125rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

/* why is this one needed? */
.input-group-sm > .custom-select,
.input-group-sm > .form-control,
.input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-prepend > .input-group-text {
    /*padding: 0.4rem 0.5rem;*/
}

[class*=icheck-].icheck-sm {
    margin-top: 3.5px !important;
    margin-bottom: 3px !important;
}


/* checkboxes in input group need no margin top */
.form-group .input-group .input-group-append .input-group-text input[type=checkbox],
.form-group .input-group .input-group-prepend .input-group-text input[type=checkbox] {
    margin-top: 0;
}

/* Not sure what happens because of this but the checkbox append/prepend is fixed because of this line 
    Nothing else seems to move because of this, otherwise add a special class (.input-group-checkbox) and apply to this
*/
.form-horizontal .input-group {
    align-items: unset;
}

/* tabel sizing */
.table-xs td, .table-xs th {
    padding: .1rem .2rem;
}


#structurebinding-bindings {
}

    #structurebinding-bindings .list-group.list-group-root {
        padding: 0;
        overflow: hidden;
    }

        #structurebinding-bindings .list-group.list-group-root .list-group {
            margin-bottom: 0;
        }

        #structurebinding-bindings .list-group.list-group-root .list-group-item {
            border-radius: 0;
            border-width: 1px 0 0 0;
        }

        #structurebinding-bindings .list-group.list-group-root > .list-group-item:first-child {
            border-top-width: 0;
        }

    #structurebinding-bindings .list-group-item:hover {
        background-color: lightgray;
    }


    #structurebinding-bindings .list-group-item .glyphicon {
        margin-right: 5px;
    }

    #structurebinding-bindings .list-group-item {
        color: #212529;
    }

    #structurebinding-bindings .list-group-item i {
        color: initial;
    }


.tab-content.tab-content-bordered {
    border: 1px solid #dee2e6;
    border-top: none;
}


/*Upload picture block*/
.upload-picture-block {
    display: table-row;
    width: 100%;
}

    .upload-picture-block .picture-container {
        display: table-cell;
        vertical-align: top;
    }

/* Upload inputs */
.file-upload-container {
    width: 400px;
}

.filepond--file-wrapper, .filepond--panel.filepond--item-panel {
    animation: unset !important;
}

/* Widget data source */
.js-widget-data-source .js-source-item {
    font-weight: normal;
    font-size: 1rem;
    display: inline-block;
}

.js-widget-data-source .js-sources {
    padding-top: .25rem;
}

.js-source-item-remove {
    line-height: 1;
}

.js-source-item-remove > i {
    padding-right: 0;
}

/* Widget Value Source styling */
.js-widget-value-source .js-value-types {
    max-width: 100px;
}

.js-widget-value-source .js-display-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .js-widget-value-source .js-display-value[type="checkbox"] {
        margin-top: 0;
    }

.js-widget-value-source .js-format {
    max-width: 100px;
}