/* ===== css code below is for select2  ===== */

.select2-search input {
    margin:0px !important;
}
.select2-results__option{
    font-size:12px;
}

.select2-results__options li {
    margin-bottom:0px !important;
}

.select2-container--default .select2-selection--single,
.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border:1px solid #D1D1D1 !important;
}

.select2-search--dropdown .select2-search__field {
    height:30px !important;
}

/* this increases the rendered box height */
.select2-selection__rendered {
    line-height: 33px !important;
}
.select2-container .select2-selection--single {
    height: 38px !important;
}
.select2-selection__arrow {
    height: 20px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    /* color:black !important;
    font: 400 11px system-ui; */
    font: 400 13.3333px Arial;
    color: black !important;
    padding-left: 12px;
    padding-right: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    position: absolute;
    top: 7px;
    right: -3px;
    width: 20px;
}

/* max height for searchable dropdown */
.select2-container--default .select2-results>.select2-results__options{
    max-height:225px !important;
    overflow-y:auto !important;
    font: 400 13.3333px Arial;
    line-height: 1.6;
}

/* I suggest to hide  all selected tags from drop down list */
/*
.select2-results__option--highlighted[aria-selected=true] {
    display: none;
}
*/

div[class^="tabcontent"] .select2-container {
    z-index: 500 !important;
    width: 160px !important;
}

div[class^="tabcontent"] .select2-container.select2-container--open {
    z-index: 100000 !important; /* Sit on top */
}

/* ===== select2 css code ends ===== */