﻿.multi-select .search-box {
    padding: 0;
}

    .multi-select .search-box input {
        padding: 0.4rem 0.75rem;
        border-left: 0;
        border-right: 0;
    }

.multi-select.dropdown-menu {
    min-width: 184px;
    margin-top: -1px;
    border: 1px solid #dadfe9;
    box-shadow: none;
    z-index: 9999;
}

.multi-select.show .display-box {
    border-color: #607d8b;
}

.multi-select.dropdown-menu.show {
    border-color: #607d8b;
}

.multi-select .display-box {
    padding: .2rem .75rem;
    background: #fff;
    text-align: right;
    cursor: pointer;
    user-select: none;
    border: 1px solid #dadfe9;
    position: relative;
    color: #5e677b;
    height: 29.38px;
}

    .multi-select .display-box .badge-group {
        position: absolute;
        width: calc(100% - 1.5rem - 60px);
        height: calc(100% - 0.4rem);
        display: inline-block;
        left: .75rem;
        display: flex;
        flex-flow: nowrap;
    }

        .multi-select .display-box .badge-group .custom-badge {
            padding: 0.34rem;
            margin-right: 3px;
            background-color: #e3e4e4;
            color: #5e677b;
            float: left;
            min-width: 60px;
            max-width: 90px;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    .multi-select .display-box .badge-total-selected {
        margin-right: 3px;
        padding: 0.34rem;
		top: -1px;
        position: relative;
    }

    .multi-select .display-box .deselect-all {
        margin-right: 3px;
    }

    .multi-select .display-box .badge-group .badge-ellipsis {
        float: left;
        font-weight: 600;
    }

    .multi-select .display-box .badge-text {
        margin-right: 4px;
        max-width: 69px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .multi-select .display-box .close-icon {
        float: right;
        max-width: 6px;
    }

    .multi-select .display-box .fa {
        color: #5e677b;
    }

.multi-select .dropdown-item.active, .multi-select .dropdown-item:active {
    color: #5e677b;
    background-color: transparent;
}

.multi-select .dropdown-item .custom-checkbox {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-select .selected-items, .multi-select .available-items {
    max-height: 120px;
    overflow-y: hidden;
}

@media screen and (max-width: 768px) {
    .multi-select .selected-items, .multi-select .available-items {
        overflow-y: auto;
    }
}

.multi-select .available-items {
    margin-top: 5px;
    color: #5e677b;
}

.multi-select .no-item,
.multi-select .invalid-input-length {
    padding: 0 .75rem .2rem;
    color: #5e677b;
}

.multi-select .no-selected-item {
    padding: .2rem .75rem 0;
    color: #5e677b;
    margin-bottom: 5px;
}

.scroll-box::-webkit-scrollbar {
    width: .6em;
}

.scroll-box::-webkit-scrollbar,
.scroll-box::-webkit-scrollbar-thumb {
    overflow: visible;
    border-radius: 4px;
}

.scroll-box::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
}

.scroll-box:hover {
    overflow: auto;
}

.search-box > input:focus {
    outline: 0;
    box-shadow: none !important;
    border-color: #DADFE9;
}

.search-box .search-icon {
    position: absolute;
    top: 7px;
    right: 12px;
    color: #5e677b;
}

cw-multi-select[disabled] .multi-select .display-box {
    background-color: #e9ecef;
    cursor: not-allowed;
}

    cw-multi-select[disabled] .multi-select .display-box .custom-badge {
        color: #fff;
        background-color: #6c757d;
    }

cw-multi-select.ng-dirty.ng-invalid .multi-select .display-box {
    border: 1px solid #f28380 !important;
    color: #db241e;
}

.multi-select .dropdown-item .custom-checkbox .custom-control-label {
    width: 100%;
}

.multi-select .placeholder {
    float: left;
    color: rgba(85,85,85,.5);
}

.multi-select-drop-mask {
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 9998;
    background-color: #fff;
    filter: alpha(opacity=0);
}