/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
    position: relative;
    display: block;
    margin-top:0.5em;
    padding: 0;
    border: 1px solid #cccccc;
    -ms-border-radius:4px;
    border-radius:4px;
}


/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
    .custom-select select {
        width: 100%;
        margin: 0;
        background:none;
        border: 1px solid transparent;
        outline: none;
        /* Prefixed box-sizing rules necessary for older browsers */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /* Remove select styling */
        appearance: none;
        -webkit-appearance: none;
        /* Font size must the 16px or larger to prevent iOS page zoom on focus */
        font-size: 1em;
        box-shadow: none;
        color: #555;
        padding: .2em 1.9em .2em .5em;
        line-height: 1.4;

        /*  Firefox has issues with the arrow on select boxes. This solution from here:  https://codepen.io/joaocunha/pen/qLgCG  */
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
    }


    /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

    .custom-select::after {
        content: "\f078"; /*\f0d7*/
        padding: 11px 12px 8px 15px;
        color: Black; /*#408A86;*/
        font: normal normal normal 12px/1 FontAwesome;
        position: absolute;
        width: 2.95em;
        height: 2.86em;
        line-height: 1em;
        /*background-color: #408A86;*/
        top: 24%;
        right: 0em;
        margin-top: -8px;
        /* background-image: url(); */
        background-repeat: no-repeat;
        background-size: 100%;
        z-index: 2;
        pointer-events: none;
    }


    /* Hover style */
    .custom-select:hover {
        border: 1px solid #ccc;
    }

    /* Focus style */
    .custom-select select:focus {
        outline: none;
        /*box-shadow: 0 0 1px 3px rgba(180,222,250, 1); commented by vivek*/
        /*background-color:transparent; commented by vivek*/
        /*color: #222; commented by vivek*/
        border: 1px solid #aaa;
    }

    /* Set options to normal weight */
    .custom-select option {
        font-weight: normal;
    }






    /* ------------------------------------  */
    /* START OF UGLY BROWSER-SPECIFIC HACKS */
    /* ----------------------------------  */

    /* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
    x:-o-prefocus, .custom-select::after {
        display: none;
    }

/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .custom-select select::-ms-expand {
        display: none;
    }

    .custom-select select:focus::-ms-value {
        background: transparent;
        color: #222;
    }
}
/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.custom-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}