/*   NOTE: This CSS will be apply on div inside "chk-multi-select2" only  */

.chk-multi-select2 .select2-container {
    min-width: 100%;
    line-height: 1.7 !important;
}

@media (max-width: 991.98px) {
    .chk-multi-select2 .select2-container {
        min-width: 100%;
        line-height: 1.7 !important;
    }
}

/*Font Awesome Fonts NOTE: This is important to display the font awsome icons*/
@font-face {
    font-family: 'fontawesome-webfont';
    src: url('../keentheme/vendors/bootstrap-select/docs/bootstrap/fonts/fontawesome-webfont.ttf') format('truetype');
}

.select2-results__options[aria-multiselectable=true] .select2-results__option {
    padding-right: 20px;
    vertical-align: middle;
}

    .select2-results__options[aria-multiselectable=true] .select2-results__option:before {
        content: "";
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        border: 2px solid rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        background-color: transparent;
        margin-right: 15px;
        margin-left: 10px;
        vertical-align: middle;
    }

    .select2-results__options[aria-multiselectable=true] .select2-results__option[aria-selected=true]:before {
        font-family: 'fontawesome-webfont';
        content: "\f00c";
        color: #fff;
        background-color: #22b14c;
        border: 0;
        display: inline-block;
        padding: 3px;
        line-height: 1.2;
        font-size: 1.02rem;
    }

.select2-container--default .select2-results__options[aria-multiselectable=true] .select2-results__option[aria-selected=true] {
    background-color: #fff;
}

.select2-container--default .select2-results__options[aria-multiselectable=true] .select2-results__option--highlighted[aria-selected] {
    background-color: #fff;
    color: #000;
}

.chk-multi-select2 .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 4px;
    -webkit-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.8);
}

.chk-multi-select2 .select2-container--default .select2-selection--multiple {
    border-width: 2px;
    border-color: transparent;
    padding: 1px 10px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    margin-bottom: 0px;
    -webkit-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
    -moz-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
    box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
}

@media (prefers-reduced-motion: reduce) {
    .chk-multi-select2 .select2-container--default .select2-selection--multiple {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }
}

.chk-multi-select2 .select2-container--open .select2-dropdown--below {
    padding: 0 0;
    border-radius: 4px;
    border: none;
    -webkit-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
    -moz-box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
    box-shadow: 0px 3px 22px -15px rgba(0, 0, 0, 0.63);
}

.chk-multi-select2 .select2-selection .select2-selection--multiple:after {
    content: 'hhghgh';
}

.chk-multi-select2 .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: none;
    background: rgba(0, 0, 0, 0.1);
    font-size: 15px;
    padding: 2px 10px;
    color: gray;
}

.chk-multi-select2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 5px;
}

.chk-multi-select2 .select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: #22b14c;
    margin-top: 10px;
}

.chk-multi-select2 .select2-selection__rendered .select2-search .select2-search__field {
    margin-top: 9px !important;
}