﻿.dashboardcode-bsmultiselect ul.form-control {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    min-height: calc(1.5em + .75rem + 2px);
    margin-bottom: 0;
    cursor: text;
    list-style-type: none
}

    .dashboardcode-bsmultiselect ul.form-control input {
        height: auto;
        padding: 0;
        margin: 0;
        font-weight: inherit;
        color: inherit;
        background-color: transparent;
        border: 0;
        outline: 0;
        box-shadow: none
    }

    .dashboardcode-bsmultiselect ul.form-control.disabled {
        background-color: #e9ecef
    }

    .dashboardcode-bsmultiselect ul.form-control::-moz-placeholder {
        color: #6c757d;
        opacity: 1
    }

    .dashboardcode-bsmultiselect ul.form-control:-ms-input-placeholder {
        color: #6c757d;
        opacity: 1
    }

    .dashboardcode-bsmultiselect ul.form-control::placeholder {
        color: #6c757d;
        opacity: 1
    }

    .dashboardcode-bsmultiselect ul.form-control > li.badge {
        padding-left: 0;
        -webkit-padding-start: 0;
        padding-inline-start: 0;
        -webkit-padding-end: 0.5rem;
        padding-inline-end: 0.5rem;
        color: var(--bs-dark)
    }

        .dashboardcode-bsmultiselect ul.form-control > li.badge button.btn-close {
            float: none;
            font-size: .8em
        }

        .dashboardcode-bsmultiselect ul.form-control > li.badge span.disabled {
            opacity: .65
        }

    .dashboardcode-bsmultiselect ul.form-control.focus {
        color: #212529;
        background-color: #fff;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)
    }

    .dashboardcode-bsmultiselect ul.form-control.form-control-sm {
        min-height: calc(1.5em + .5rem + 2px)
    }

        .dashboardcode-bsmultiselect ul.form-control.form-control-sm input {
            font-size: .875rem
        }

    .dashboardcode-bsmultiselect ul.form-control.form-control-lg {
        min-height: calc(1.5em + 1rem + 2px)
    }

        .dashboardcode-bsmultiselect ul.form-control.form-control-lg input {
            font-size: 1.25rem
        }

    .dashboardcode-bsmultiselect ul.form-control.is-valid, .was-validated .dashboardcode-bsmultiselect ul.form-control:valid {
        border-color: #198754
    }

        .dashboardcode-bsmultiselect ul.form-control.is-valid.focus, .was-validated .dashboardcode-bsmultiselect ul.form-control:valid.focus {
            border-color: #198754;
            box-shadow: 0 0 0 .25rem rgba(25,135,84,.25)
        }

    .dashboardcode-bsmultiselect ul.form-control.is-invalid, .was-validated .dashboardcode-bsmultiselect ul.form-control:invalid {
        border-color: #dc3545
    }

        .dashboardcode-bsmultiselect ul.form-control.is-invalid.focus, .was-validated .dashboardcode-bsmultiselect ul.form-control:invalid.focus {
            border-color: #dc3545;
            box-shadow: 0 0 0 .25rem rgba(220,53,69,.25)
        }

.dashboardcode-bsmultiselect div.dropdown-menu > ul {
    list-style-type: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0
}

    .dashboardcode-bsmultiselect div.dropdown-menu > ul > li {
        display: block;
        width: 100%;
        padding: 0 .5rem;
        clear: both;
        font-weight: 400;
        color: #212529;
        text-align: inherit;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
        cursor: pointer
    }

        .dashboardcode-bsmultiselect div.dropdown-menu > ul > li .form-check {
            cursor: inherit;
            justify-content: flex-start
        }

            .dashboardcode-bsmultiselect div.dropdown-menu > ul > li .form-check .form-check-input, .dashboardcode-bsmultiselect div.dropdown-menu > ul > li .form-check .form-check-label {
                cursor: inherit
            }

        .dashboardcode-bsmultiselect div.dropdown-menu > ul > li.disabled .form-check-label {
            opacity: .5
        }

        .dashboardcode-bsmultiselect div.dropdown-menu > ul > li.hover {
            background-color: #e9ecef
        }

            .dashboardcode-bsmultiselect div.dropdown-menu > ul > li.hover:not(.disabled) {
                color: var(--bs-primary)
            }

            .dashboardcode-bsmultiselect div.dropdown-menu > ul > li.hover.selected {
                color: var(--bs-primary)
            }

.dashboardcode-bsmultiselect div.dropdown-menu + div.alert-warning {
    padding-left: .25rem;
    padding-right: .25rem;
    z-index: 4;
    font-size: small
}

.dashboardcode-bsmultiselect.input-group.input-group-sm ul.form-control {
    min-height: calc(1.5em + .5rem + 2px)
}

    .dashboardcode-bsmultiselect.input-group.input-group-sm ul.form-control input {
        font-size: .875rem
    }

.dashboardcode-bsmultiselect.input-group.input-group-lg ul.form-control {
    min-height: calc(1.5em + 1rem + 2px)
}

    .dashboardcode-bsmultiselect.input-group.input-group-lg ul.form-control input {
        font-size: 1.25rem
    }

.form-floating .dashboardcode-bsmultiselect ul.form-control {
    min-height: calc(3.5rem + 2px)
}

    .form-floating .dashboardcode-bsmultiselect ul.form-control.floating-lifted {
        padding-top: 1.625rem;
        padding-left: .7rem;
        padding-bottom: 0
    }

.form-floating .dashboardcode-bsmultiselect + label.floating-lifted {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem)
}

.was-validated .dashboardcode-bsmultiselect div.dropdown-menu > ul > li .form-check-input:valid:checked ~ .form-check-label, .was-validated .dashboardcode-bsmultiselect div.dropdown-menu > ul > li .form-check-input:valid:not(:checked) ~ .form-check-label {
    color: #212529
}

.was-validated .dashboardcode-bsmultiselect div.dropdown-menu > ul > li.hover .form-check-input:valid:checked ~ .form-check-label, .was-validated .dashboardcode-bsmultiselect div.dropdown-menu > ul > li.hover .form-check-input:valid:not(:checked) ~ .form-check-label {
    color: var(--bs-primary)
}

.was-validated .dashboardcode-bsmultiselect div.dropdown-menu > ul > li .form-check-input:valid:checked {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary)
}

.was-validated .dashboardcode-bsmultiselect div.dropdown-menu > ul > li .form-check-input:valid:not(:checked) {
    border: 1px solid rgba(0,0,0,.25)
}

