.dropdown{height:calc(2.25em + 2px);position:relative;display:inline-block;vertical-align:top;user-select:none;}
.dropdown input[type=text]{font-size:1em;line-height:2.25;padding:0 2.25em 0 .75em;width:100%;color:#000;border:1px solid #ccc;border-radius:0.25em;box-sizing:border-box;outline:none;background:#fff;}
.dropdown .dropdown-text{position:relative;border-radius:inherit;}
.dropdown .dropdown-text:after{content:'';display:block;position:absolute;inset:0;cursor:pointer;}
.dropdown .dropdown-icon{border:.5em solid transparent;border-top-color:#e1e1e1;display:block;position:absolute;top:50%;right:.5em;width:0;height:0;margin-top:-0.1em;transition:all .2s linear;}
.dropdown .dropdown-icon:before,.dropdown .dropdown-icon:after{border:.25em solid transparent;border-bottom-color:#e1e1e1;content:"";display:block;position:absolute;top:-1em;left:0;width:0;height:0;transform:translateY(1px);}
.dropdown .dropdown-icon:before{left:-0.5em;}
.dropdown .dropdown-menu{list-style:none;height:0;max-height:calc(13.5em + 2px);overflow:auto;padding:0;margin:0 -1px;border:1px solid transparent;border-radius:0.25em;}
.dropdown .dropdown-menu>li{background:#fff;}
.dropdown .dropdown-menu>li>a{display:block;padding:.5em 2.25em .5em .75em;cursor:pointer;line-height:1.25;color:inherit;text-decoration:none;}
.dropdown .dropdown-menu>li.active>a{color:#fff!important;background:#4acbd6;}

.dropdown.active{z-index:2;}
.dropdown.active .dropdown-icon{transform:rotateX(180deg);transform-origin:50% 12.5%;}
.dropdown.active .dropdown-menu{height:auto;border-color:#ccc;background:#fff;}