.icon {
    display: block;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
}

.icon:before,
.icon:after {
    content: "";
    position: absolute;
} 
.dropp { position:absolute;top:5px;right:13px;
    width:170px;
    max-width: 25em;
    border:0px solid #333;    
    line-height: 1.5;
    z-index:999
}

.dropp-header {
    background: #3c3c3c;
    color: #fff;  
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    -o-align-items: stretch;
    align-items: stretch;
    -ms-flex-align: stretch;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-pack: start;
}

.dropp-header__title {
    display: block;
    padding: 0.8em 0.5em;
    -webkit-box-flex: 8;
    -moz-box-flex: 8;
    box-flex: 8;
    -webkit-flex: 8;
    -moz-flex: 8;
    -ms-flex: 8;
    flex: 8;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

.dropp-header__btn {
    display: block; 
    color: #fff;
    padding: 0.8em 0.5em;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.dropp-header__btn .icon { 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.dropp-header__btn .icon:before,
.dropp-header__btn .icon:after {
    top: 30%;
    left: 25%;
    width: 50%;
    height: 15%;
    background: #f1f1f1;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.dropp-header__btn .icon:after {
    top: 55%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.dropp-header__btn.js-open { }

.dropp-header__btn.js-open .icon {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.dropp-header__btn.js-open .icon:before,
.dropp-header__btn.js-open .icon:after { background: #fff; }

.dropp-header__btn:focus { outline: none; }

.dropp-body {
    overflow: hidden;
    width: 100%;
    max-height: 0;
    background: #292929;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.dropp-body.js-open { max-height: 20em; }

.dropp-body label {
    display: block;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    padding: 1em 0.5em;
    font-weight: 400;
    box-shadow: 0 -1px 0 #171717, inset 0 1px 0 #313131;
    cursor: pointer;
    z-index:9999;
}

.dropp-body label:first-child { box-shadow: none; }

.dropp-body label:hover,
.dropp-body label.js-open { background: #000; }

.dropp-body label > input { display: none; }