.custom-dropdown--large {
      font-size: 13px;
    }

    .custom-dropdown--small {
      font-size: 13px;
    }

    .custom-dropdown__select{
      font-family: Century Gothic, sans-serif;
      font-size: 12px; /* inherit size from .custom-dropdown */
      padding: .1em; /* add some space*/
      margin: 0; /* remove default margins */
      font-size: 13px;
    }

    .custom-dropdown__select--white {
      background-color: #DDDDDD;
      border-width: 1px;
      border-color: red;
      color: #444;    
      font-size: 13px;
      padding:5px;
      padding-left:10px;
    } 
    
    .custom-dropdown__select--emerald {
      background-color: #20b390;
      color: #fff;    
      font-size: 13px;
      padding:5px;
      padding-left:10px;
    }       

    .custom-dropdown__select--red {
      background-color: #d53a22;
      color: #fff;
    }

    @supports (pointer-events: none) and
          ((-webkit-appearance: none) or
          (-moz-appearance: none) or
          (appearance: none)) {

      
      h2+p {
        color: green; /* Demo only */
      }

      .custom-dropdown {
        font-family: Century Gothic, sans-serif;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        font-size: 13px;
      }

      .custom-dropdown__select {
        padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */       
        border: 1;
        border-radius: 0px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;    
      }

      .custom-dropdown::before,
      .custom-dropdown::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .custom-dropdown::after { /*  Custom dropdown arrow */
        content: "\25BC";
        height: 1em;
        font-size: .625em;
        line-height: 1;
        right: 1.2em;
        top: 50%; margin-top: -.1em;
      }

      .custom-dropdown::before { /*  Custom dropdown arrow cover */
        width: 2em;
        right: 0; top: 0; bottom: 0;
        border-radius: 0 1px 1px 0;
      }

      .custom-dropdown__select[disabled] {
        color: rgba(0,0,0,.3);
      }

      .custom-dropdown.custom-dropdown--disabled::after {
        color: rgba(0,0,0,.1);
      }

      /* White dropdown style */
      .custom-dropdown--white::before {
        top: .5em; bottom: .5em;
        background-color: #fff;
        border-left: 1px solid rgba(0,0,0,.1);
      }

      .custom-dropdown--white::after {
        color: rgba(0,0,0,.9);
      }         

      /* Emerald dropdown style */
      .custom-dropdown--emerald::before {
        background-color: #5FB85C;
      }

      .custom-dropdown--emerald::after {
        color: rgba(0,0,0,.4);
      }


      /* Red dropdown style */
      .custom-dropdown--red::before {
        background-color: #d53a22;
      }

      .custom-dropdown--red::after {
        color: rgba(0,0,0,.4);
      }

      /* FF only temporary & ugly fixes */
      /* the "appearance: none" applied on select still shows a dropdown arrow on Firefox */
      /* https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */
      @-moz-document url-prefix() {
        .custom-dropdown__select             { padding-right: .6em }
        .custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em }
        .custom-dropdown--small .custom-dropdown__select { padding-right: .5em }
      } 

    }

        .custom-dropdown {
            margin: 1px;
            display: inline-block;
        }