/* Style the default DropDownList control so that on refresh it looks like we are staring with the Select2 dropdown */

/* Container styling */
.custom-dropdown {
    position: relative;
    display: inline-block;
    width: 178px; /* Adjust as needed */
}
    /* Style the actual ASP DropDownList (renders as a <select> tag) */
    .custom-dropdown select {
        width: 178px !important;
        height: 22px !important;
        padding: 0px 5px 0px 5px;
        font-family: Tahoma, sans-serif !important;
        font-size: 10pt;
        border: 1px solid #888888 !important;
        border-radius: 0px;
        /* Crucial: Hides the default browser arrow */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        cursor: pointer;
    }
    /* Create the custom arrow using a background image or a CSS triangle */
    .custom-dropdown::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translateY(-50%);
        pointer-events: none; /* Allows clicks to pass through to the dropdown */
        background-repeat: no-repeat;
        background-image: url(../ExtFiles/arrow.gif);
        background-position: center center;
        background-size: 8px;
        margin-top: 0px;
        height: 21px !important;
        width: 18px;
        background-color: #005BC3 !important;
        /*color: white !important;
        border-color: white transparent transparent transparent !important;
        margin-left: -3px !important;
        border-width: 5px 4px 0px 4px !important;*/
    }

/* Override the default CSS for the Select2 dropdown */
/* Changes the font of the chosen/selected value */
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
    font-family: Tahoma, sans-serif !important;
    font-size: 10pt !important;
    line-height: 20px !important;
    color: black !important;
    padding-left: 5px !important;
    padding-top: 0px !important;
}
.select2-container {
    width: 178px !important;
}
.select2-container .select2-selection--single {
    height: 22px !important;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #888888 !important;
    border-radius: 0px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 20px !important;
    background-color: #005BC3 !important;
    color: white !important;
    width: 17px;
}
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        /*padding-left: 1px !important;*/
        color: white !important;
        border-color: white transparent transparent transparent !important;
        margin-left: -4px !important;
        border-width: 5px 4px 0px 4px !important;
    }
.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 20px !important;
}
/* Changes the font of the options inside the dropdown list */
.select2-container .select2-results__option {
    font-family: Tahoma, sans-serif !important;
    font-size: 10pt !important;
}
.select2-results__option {
    padding: 0px 5px 1px 5px !important;
}
.select2-dropdown {
    border-radius: 0px !important;
}