﻿
.dropdown-el {
    margin-top: 0;
    width: 100%;
    position: relative;
    display: block;
    height: 43px;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    color: #444;
    outline: none;    
    padding-left: 35px;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    background-color: #ffffff;
    transition: 0.3s all ease-in-out;
    z-index:99;
}
.dropdown-el input:focus + label {
  background: #def;
}
.dropdown-el input {
  width: 1px;
  height: 1px;
  display: inline-block;
  position: absolute;
  opacity: 0.01;
}
.dropdown-el label {
   display: block;
    /* height: 2em; */
    /* line-height: 2em; */
    cursor: pointer;
    position: relative;
    transition: 0.3s color ease-in-out;
    margin-bottom: 0;
}
.dropdown-el input:checked + label {
  display: block;
  border-top: none;
  position: absolute;
  top: 3px;
  width: 100%;
}
.dropdown-el input:checked + label:nth-child(2) {
  position: relative;
}
.dropdown-el::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    transition: 0.4s all ease-in-out;
    background: url(../images/category-icon.png) no-repeat left center;
    width: 17px;
    height: 14px;
    z-index: 999;
}
.dropdown-el.expanded {
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
  /*position:absolute;*/
  z-index:999;
}
.dropdown-el.expanded label {
  border-top: 0.06em solid #d9d9d9;
}
.dropdown-el.expanded label:hover {
  color: #3694d7;
}
.dropdown-el.expanded input:checked + label {
  color: #3694d7;
}
.dropdown-el.expanded::after {
  transform: rotate(-90deg);
  top: 12px  ;
}