/* ======================================================
    <!-- Select -->
/* ====================================================== */

.custom-select__wrapper {

    --cus-sel-focus-border-color:#86b7fe;
    --cus-sel-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
    --cus-sel-placeholder-color: rgba(33, 37, 41, 0.75);
    --cus-sel-input-placeholder-color: #c5c9d1;
    --cus-sel-control-wrapper-bg: #fff;
    --cus-sel-control-wrapper-border-color: #dee2e6;
    --cus-sel-control-list-bg: #efefef;
    --cus-sel-clear-fill: #a5a5a5;
    --cus-sel-clear-hover-fill: #000;
    --cus-sel-arrow-fill: #a5a5a5;
    --cus-sel-searchbtn-fill: #a5a5a5;
    --cus-sel-searchbtn-hover-fill: #333;
    --cus-sel-removebtn-fill: #000;
    --cus-sel-removebtn-hover-fill: #f00;

        
    position: relative; /* Required */


    

    /*------ Placeholder for input ------*/
    input::placeholder {
        color: var(--cus-sel-input-placeholder-color);
    }
    

    /*------ Arrow ------*/
    .arrow {
        svg .arrow-fill-g {
            fill: var(--cus-sel-arrow-fill);
        }
    }

    /*------ Clear Icon ------*/
    .custom-select-clear-icon {
        position: absolute;
        top: 50%;
        transform: rotate(0deg) translateY(-50%);
        transform-origin: top;
        right: 1.5rem;
        z-index: 2;
        pointer-events: all;

        button {
            border: none;
            box-shadow: none;
            margin: 0;
            padding: 0;
            background: none;
        }

        
        &.pos-offset {
            right: 2.25rem;
        }

        svg path {
            fill: var(--cus-sel-clear-fill);
        }

        &:hover {
            svg path {
                fill: var(--cus-sel-clear-hover-fill);
            }
        }
    }

    /*------ Clear Trigger ------*/
    .clear {
        svg .clear-fill-g {
            fill: var(--cus-sel-arrow-fill);
        }
    }


    /*------ Input ------*/
    [data-select]:focus {
        box-shadow: none;
        border-color: transparent;
        outline: 0;
    }

    

    /*------ Arrow ------*/
    .custom-select-arrow {
        position: absolute;
        top: 50%;
        transform: rotate(0deg) translateY(-50%);
        transform-origin: top;
        right: .5rem;
        z-index: 1;
        pointer-events: none;

        &.reverse {
            transform: rotate(180deg) translateY(-50%);
        }
    }

    
    /*------ Blinking cursor ------*/
    .custom-select-multi__control-blinking-cursor {
        display: inline-block;
        color: var(--cus-sel-placeholder-color);
        width: 100%;

        &.animated {
            animation: 1s mf-sel-blink step-end infinite;
        }

        &.control-placeholder {
            color: var(--cus-sel-input-placeholder-color);
        }

        /* Text preview */
        > span {
            display: inline-block;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            max-width: 100%;
        }


    }
    .custom-select-multi__control-blinking-following-cursor {
        position: absolute;
        top: .375rem;
        margin-left: 1rem;  /* offset start pixel of input control */
        z-index: 1;

        &.animated {
            animation: 1s mf-sel-blink step-end infinite;
        }

        &.custom-select-multi__control-blinking-following-cursor--puretext {
            margin-left: auto;
            position: relative;
            top: auto;
            left: 0;
        }
    }

    @keyframes mf-sel-blink {
        from,
        to {
            color: transparent;
        }

        50% {
            color: var(--cus-sel-placeholder-color);
        }
    }



    /*------ Single selection ------*/
    .custom-select-single__inputplaceholder-wrapper {

        position: absolute;
        top: 0;
        width: 100%;
        pointer-events: none;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 0.375rem;

        .custom-select-multi__control-blinking-cursor {
            position: absolute;
            top: .1rem;
            left: 0;
            padding: .1rem 1.5rem .1rem 1rem;
            font-size: 0.875rem;
    
            /* bootstrap style that match ".form-control" */
            //padding: 0.375rem 0.75rem;
            top: 0.375rem;


            .control-placeholder {
                color: var(--cus-sel-input-placeholder-color);
            }
        }

        .custom-select-single__control-searchbtn {
            z-index: 5;
            pointer-events: auto;

            svg,
            path {
                fill: var(--single-sel-searchbtn-fill);
            }

            &:hover {
                svg,
                path {
                    fill: var(--single-sel-searchbtn-hover-fill);
                }
            }
        }

        .custom-select-single__inputplaceholder-inner {
            display: inline-block;
            position: relative;
            width: 100%;

            /* bootstrap style that match ".form-control" */
            background-color: var(--cus-sel-control-wrapper-bg);
            border: 1px solid var(--cus-sel-control-wrapper-border-color);
            appearance: none;
            border-radius: inherit;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

          
            > input {
                padding: 0.32rem 0.75rem;
                opacity: 0;
                pointer-events: none;
            }
            
        }
        
    }



    /*------ Multiple selection ------*/
    .custom-select-multi__inputplaceholder-wrapper {

        position: absolute;
        top: 0;
        width: 100%;
        pointer-events: none;


        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .custom-select-multi__inputplaceholder-inner {
    
            > div {
                position: relative;
        
                /* bootstrap style that match ".form-control" */
                //padding: 0.375rem 0.75rem;
                background-color: var(--cus-sel-control-wrapper-bg);
                background-clip: padding-box;
                border: 1px solid var(--cus-sel-control-wrapper-border-color);
                appearance: none;
                border-radius: 0.375rem;
                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
                padding-bottom: 1px;

            }

        }


        ul.custom-select-multi__list {
            margin-right: 1rem;

            li {
                display: inline-block;
                margin: 5px;
                margin-bottom: 0;
                padding: .1rem 1.5rem .1rem 1rem;
                font-size: 0.875rem;
                background: var(--cus-sel-control-list-bg);
                border-radius: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;

                &.custom-select-multi__list-item-statusstring {
                    background: transparent;
                }

                &.custom-select-multi__list-item-placeholder {
                    background: transparent;
                    color: var(--cus-sel-placeholder-color);
                    padding-left: 0.75rem;
                    padding-right: 0;
                    margin-left: 0;
                    white-space: nowrap;

                    &.hide {
                        min-width: 100px;
                    }
                }
                

                > a {
                    font-weight: 400;
                    opacity: .6;
                    font-size: 18px;
                    line-height: 20px;
                    position: absolute;
                    right: 8px;
                    top: 50%;
                    transform: translateY(-50%);
                    pointer-events: auto;

                    path {
                        fill: var(--cus-sel-removebtn-fill);
                    }

                    &:hover {
                        path {
                            fill: var(--cus-sel-removebtn-hover-fill);
                        }
                    }
                }


                &.custom-select-multi__list-item-add {
                    pointer-events: auto;
                    margin: 0;
                    padding: 0;
                    background: transparent;

                    input {
                        border: none;
                        font-size: 0.75rem;
                        transform: translateY(.25rem);

                        &:focus {
                            border: none;
                            outline: none;
                            box-shadow: none;
                        }

                    }
                }

            }

        }



    }


    /*------ Search button ------*/
    .custom-select-multi__control-searchbtn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        pointer-events: auto;

        svg,
        path {
            fill: var(--cus-sel-searchbtn-fill);
        }

        &:hover {
            svg,
            path {
                fill: var(--cus-sel-searchbtn-hover-fill);
            }
        }
    }


    /*------------*/
    [data-select]:focus {
        cursor: text !important;
        opacity: 0;
    }


    &.active {
        .list-group {
            display: block;
        }
    }


    /* focus */
    &.multiple-selection.active,
    &.focus {

        .custom-select-single__inputplaceholder-wrapper {
            box-shadow: var(--cus-sel-focus-box-shadow);
            border-color: var(--cus-sel-focus-border-color);
            outline: 0;

            .custom-select-single__inputplaceholder-inner {
                border-color: var(--cus-sel-focus-border-color);
            }
        
        }

        .custom-select-multi__inputplaceholder-inner > div {
            box-shadow: var(--cus-sel-focus-box-shadow);
            border-color: var(--cus-sel-focus-border-color);
            outline: 0;
        
        }

        
    }
 

}



/*------ List ------*/
.custom-select__options-wrapper  {
    --cus-sel-listgroup-popwin-min-width: 200px;
    --cus-sel-listgroup-tool-bg: rgb(248,249,250);
    --cus-sel-listgroup-checkbox: #a5a5a5;
    --cus-sel-listgroup-checkbox-active: #3162B2;
    --cus-sel-listgroup-item-hover-focus-bg: rgba(0,0,0,.1);
    --cus-sel-listgroup-content-scrollbar-color: rgba(0, 0, 0, 0.2);
    --cus-sel-listgroup-content-scrollbar-track: rgba(0, 0, 0, 0);
    --cus-sel-listgroup-content-scrollbar-w: 10px;
    --cus-sel-listgroup-grouptitle-color: #a2a2a2;
    --cus-sel-listgroup-groupborder-color: #d8d8d8;
    --cus-sel-loader-color: #000000;



    display: none;
    min-width: var(--cus-sel-listgroup-popwin-min-width);
    z-index: 1055;  /* --bs-modal-zindex */

    
    &.active {
        display: block !important;
    }

    

    /*------ Loader ------*/
    .cus-select-loader {
        pointer-events: none;
        z-index: 1;
        width: 12px;
        height: 12px;
        text-align: center;
        transform-origin: center;
        transform: translate(-5px, 0) rotate(0);
        animation: 1s linear infinite cus-select__spinner;

        svg {
            vertical-align: top;

            path {
                fill: var(--cus-sel-loader-color);
            }
        }
    }

    @keyframes cus-select__spinner {
        to {
            transform: translate(-5px, 0) rotate(-360deg);
        }
    }

 
    /*------ Options ------*/
    .custom-select__options-contentlist {
        overflow: hidden;
        overflow-y: auto;

        &:focus {
            outline: none;
            box-shadow: none;
        }

        &.noscroll {
            overflow-y: hidden;
        }

        &::-webkit-scrollbar {
            height: var(--cus-sel-listgroup-content-scrollbar-h);
            width: var(--cus-sel-listgroup-content-scrollbar-w);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--cus-sel-listgroup-content-scrollbar-color);
        }

        &::-webkit-scrollbar-track {
            background: var(--cus-sel-listgroup-content-scrollbar-track);
        }

    }

    .bg-light {
        background-color: var(--cus-sel-listgroup-tool-bg) !important;
    }

    .list-group-item {

        &.hide {
            display: none;
        }

        .custom-select-multi__control-option-item--nomatch {
            &.hide {
                display: none;
            }
        }

        .custom-select-multi__control-option-checkbox-placeholder {
            display: inline-block;

            svg {
                fill: transparent;
        
                path {
                    stroke: var(--cus-sel-listgroup-checkbox);
                }
            }

        }

        
        .custom-select-multi__control-option-checkbox-selected {
            display: inline-block;
            svg {
                fill: var(--cus-sel-listgroup-checkbox);
        
                path {
                    stroke: var(--cus-sel-listgroup-checkbox);
                }
            }

        }

        

        /* ITEM SELECTED */
        &.item-selected {

            .custom-select-multi__control-option-checkbox-placeholder {
                svg {
                    path {
                        stroke: var(--cus-sel-listgroup-checkbox-active);
                    }
                }

            }

            
            .custom-select-multi__control-option-checkbox-selected {
                svg {
                    fill: var(--cus-sel-listgroup-checkbox-active);
            
                    path {
                        stroke: var(--cus-sel-listgroup-checkbox-active);
                    }
                }

            }

        }

        &:hover,
        &:focus {
            background-color: var(--cus-sel-listgroup-item-hover-focus-bg);
        }


    }

    /*------ Multiple selection ------*/
    &.multiple-selection {
        .list-group-item {
            &.active {
                border-top-width: 0;
            }
        }
    }

    

    /*------ Group ------*/
    .custom-select-grouptitle {
        pointer-events: none;
        color: var(--cus-sel-listgroup-grouptitle-color);
        margin-bottom: .3rem;
        border-bottom: 1px solid var(--cus-sel-listgroup-groupborder-color) !important;
    }

    /*------ Extended buttons of Multiple selection ------*/
    .custom-select-multi__control-option-item--select-all {

        &.hide {
            display: none !important;
        }

        .btn {
            font-size: 0.75rem;
            padding: 0.1rem 0.5rem;
        }
    }

    /*------ Extended buttons of Single selection ------*/
    .custom-select-multi__control-option-item--clear {

        &.hide {
            display: none !important;
        }

        .btn {
            font-size: 0.75rem;
            padding: 0.1rem 0.5rem;
        }
    }

    

}