﻿
.hide {
    display: none!important;
}

.dropdownSelect > button {
    background-color: #ffffff;
    color: #495057;
    padding: 5px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-align: right;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    width: 100%;
}

    .dropdownSelect > button:hover, .dropdownSelect > button:focus {
        background-color: #f6f6f6;
    }

.dropdownSelect > div > input[type=text] {
    box-sizing: border-box;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

    .dropdownSelect > div > input[type=text]:focus {
        outline: 3px solid #ddd;
    }

.dropdownSelect {
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 100px;
}

    .dropdownSelect > div {
        display: none;
        position: absolute;
        background-color: #f6f6f6;
        min-width: 230px;
        width: 100%;
        max-height: 400px;
        overflow: auto;
        border: 2px solid #b9b7b7;
        z-index: 1000;
    }

        .dropdownSelect > div > div {
            width: 100%;
        }

            .dropdownSelect > div > div > a {
                min-height:25px;
                cursor: pointer;
                color: black;
                padding: 6px 5px;
                margin-bottom: 2px;
                text-decoration: none;
                display: block;
            }

                .dropdownSelect > div > div > a.select {
                    background-color: #e7e0e0;
                }

                .dropdownSelect > div > div > a:hover {
                    background-color: #ddd;
                }
               
                .dropdownSelect > div > div > a.hover {
                    background-color: rgb(194, 192, 192);
                }
 
        .dropdownSelect > div.show {
            display: block !important;
        }
