.dropdown{
    display: inline-block;
    width: auto;
    margin-bottom: 15px;
    color: #4f4f4f;
}

.dropdown .item{
    background-color: transparent;
    border: 1px solid #ccc;
    padding: 7px 15px 7px 15px;
    display: inline-block;
    width: auto;
    cursor: pointer;
    border-radius: 2px;
}

.dropdown.dropdown-mini{
    margin: 0px;
}

.dropdown.dropdown-mini .item{
    padding: 4px 8px 4px 8px;
}

.dropdown.dropdown-mini .item i.fa-dropdown{
    margin: 0px; 
}

.dropdown .subitems{
    display: none;
    position: absolute;
    background-color: #ffffff;
    padding: 5px 0px;
    z-index: 20;
    width: auto;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 250px;
    margin-top: -5px;
}

.dropdown .subitems .header{
    margin: 0px 10px 5px 10px;
    padding: 5px 0px 5px 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: block;
    width: auto;
}

.dropdown .subitems .subitem{
    padding: 6px 20px;
    display: block;
    width: auto;
    margin: 0px 0px;
    cursor: pointer;
}

.dropdown a{
    text-decoration: none;
}

.dropdown .subitems .subitem span{
    
}

.dropdown.active .subitems{
    display: block;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
    animation-name: dropdown-active;
    animation-duration: 0.2s;
}

@keyframes dropdown-active {
    0%  {margin-top: -100px; transform: scale(0); opacity: 0;}
    100%  {margin-top: -5px; transform: scale(1); opacity: 1;}
}

.dropdown .item i.fa-dropdown{
    float: right;
    margin: 0px 0px 0px 5px; 
}
/*
.dropdown .item i.fa.up{
    display: none;
}

.dropdown .item i.fa.down{
    display: inline;
}

.dropdown.active .item i.fa.up{
    display: inline;
}

.dropdown.active .item i.fa.down{
    display: none;
}
*/
.dropdown .subitem:hover{
    background-color: #1976d2;
    color: #fff;
}

.dropdown.active .item,
.dropdown .item:active,
.dropdown .item:focus,
.dropdown .item:hover{
    /*box-shadow: 2px 2px 1px rgba(100,100,90,0.2);
    background-color: #2196f3;
    color: #fff;*/
    border: 1px solid #2196f3;
}

.dropdown.active .item{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.dropdown.dropdown-relative .subitems{
    position: relative;
}

.dropdown.dropdown-block{
    width: auto;
    display: block;
    position: relative;
}

.dropdown.dropdown-block .item{
    width: auto;
    display: block;
}

.dropdown.dropdown-block > .item > span{
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    max-width: 90%;
}

.dropdown.dropdown-block .subitems{
    width: 100%;
}

.dropdown.dropdown-block .subitems .subitem{
    width: auto;
}

.dropdown.dropdown-right{
    direction: rtl;
}

.dropdown.dropdown-right .subitems{
    text-align: left;
}

.dropdown.dropdown-success .item,
.dropdown.dropdown-success.active .item,
.dropdown.dropdown-success .item:active,
.dropdown.dropdown-success .item:focus,
.dropdown.dropdown-success .item:hover{
    /*background-color: #45bf7b;*/
    border: 1px solid #43a047;
    /*color: #fff;*/
}

.dropdown.dropdown-success.active .subitems{
    /*background-color: #40b172;
    color: #fff;*/
}

.dropdown.dropdown-success.active .subitem:active,
.dropdown.dropdown-success.active .subitem:focus,
.dropdown.dropdown-success.active .subitem:hover{
    /*background-color: #45bf7b;*/
}

.dropdown.dropdown-info .item,
.dropdown.dropdown-info.active .item,
.dropdown.dropdown-info .item:active,
.dropdown.dropdown-info .item:focus,
.dropdown.dropdown-info .item:hover{
    /*background-color: #1976d2;*/
    border: 1px solid #1e88e5;
    /*color: #fff;*/
}

.dropdown.dropdown-info.active .subitems{
    /*background-color: #0f6ab9;
    color: #fff;*/
}

.dropdown.dropdown-info.active .subitem:active,
.dropdown.dropdown-info.active .subitem:focus,
.dropdown.dropdown-info.active .subitem:hover{
    /*background-color: #1976d2;*/
}

.dropdown.dropdown-warning .item,
.dropdown.dropdown-warning.active .item,
.dropdown.dropdown-warning .item:active,
.dropdown.dropdown-warning .item:focus,
.dropdown.dropdown-warning .item:hover{
    /*background-color: #f9b358;*/
    border: 1px solid #fb8c00;
    /*color: #fff;*/
}

.dropdown.dropdown-warning.active .subitems{
    /*background-color: #eaa346;
    color: #fff;*/
}

.dropdown.dropdown-warning.active .subitem:active,
.dropdown.dropdown-warning.active .subitem:focus,
.dropdown.dropdown-warning.active .subitem:hover{
    /*background-color: #f9b358;*/
}

.dropdown.dropdown-danger .item,
.dropdown.dropdown-danger.active .item,
.dropdown.dropdown-danger .item:active,
.dropdown.dropdown-danger .item:focus,
.dropdown.dropdown-danger .item:hover{
    /*background-color: #eb6262;*/
    border: 1px solid #f4511e;
    /*color: #fff;*/
}

.dropdown.dropdown-danger.active .subitems{
    /*background-color: #da5353;
    color: #fff;*/
}

.dropdown.dropdown-danger.active .subitem:active,
.dropdown.dropdown-danger.active .subitem:focus,
.dropdown.dropdown-danger.active .subitem:hover{
    /*background-color: #eb6262;*/
}

.dropdown.dropdown-disabled .item,
.dropdown.dropdown-disabled.active .item,
.dropdown.dropdown-disabled .item:active,
.dropdown.dropdown-disabled .item:focus,
.dropdown.dropdown-disabled .item:hover{
    /*background-color: #bfbfbf;*/
    border: 1px solid #cccccc;
    /*color: #fff;*/
}

.dropdown.dropdown-disabled.active .subitems{
    /*background-color: #a9a9a9;
    color: #fff;*/
}

.dropdown.dropdown-disabled.active .subitem:active,
.dropdown.dropdown-disabled.active .subitem:focus,
.dropdown.dropdown-disabled.active .subitem:hover{
    /*background-color: #bfbfbf;*/
}