.dropdown-menu{
    background-color: $pale-bg;
    border: 0 none;
    border-radius: $border-radius-extreme;
    display: block;
    margin-top: 10px;
    padding: 0px;
    position: absolute;
    visibility: hidden;
    z-index: 9000;  
    
    @include opacity(0); 
    @include box-shadow($dropdown-shadow);
        
//     the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file    
    .open &{
        @include opacity(1);
        visibility: visible;
    }    
    
    .divider{
        background-color: $medium-pale-bg;
        margin: 0px;
    }
    
    .dropdown-header{
        color: $dark-gray;
        font-size: $font-size-small;
        padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
    }
    
//     the style for the dropdown menu that appears under select, it is different from the default one
    .select &{
       border-radius: $border-radius-bottom; 
       @include box-shadow(none);
       @include transform-origin($select-coordinates);
       @include transform-scale(1);
       @include transition($fast-transition-time, $transition-linear);
       margin-top: -20px;
    }
    .select.open &{
        margin-top: -1px;
    }
    
    > li > a {
       color: $font-color;
       font-size: $font-size-base;
       padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
       @include transition-none();
       
       img{
           margin-top: -3px;
       }
    }
    > li > a:focus{
        outline: 0 !important;
    }

    .btn-group.select &{
        min-width: 100%;
    }
    
    > li:first-child > a{
       border-top-left-radius: $border-radius-extreme;
       border-top-right-radius: $border-radius-extreme;
    }
    
    > li:last-child > a{
        border-bottom-left-radius: $border-radius-extreme;
        border-bottom-right-radius: $border-radius-extreme;
    }
    
    .select & > li:first-child > a{
        border-radius: 0;
        border-bottom: 0 none;
    }
    
    > li > a:hover,
    > li > a:focus {
        background-color: $default-color;
        color: $fill-font-color;
        opacity: 1;
        text-decoration: none;
    }
    
    &.dropdown-primary > li > a:hover,
    &.dropdown-primary > li > a:focus{
        background-color: $primary-color;
    }
    &.dropdown-info > li > a:hover,
    &.dropdown-info > li > a:focus{
        background-color: $info-color;
    }
    &.dropdown-success > li > a:hover,
    &.dropdown-success > li > a:focus{
        background-color: $success-color;
    }
    &.dropdown-warning > li > a:hover,
    &.dropdown-warning > li > a:focus{
        background-color: $warning-color;
    }
    &.dropdown-danger > li > a:hover,
    &.dropdown-danger > li > a:focus{
        background-color: $danger-color;
    }

}

//fix bug for the select items in btn-group 
.btn-group.select{
    overflow: hidden;
}
.btn-group.select.open{
    overflow: visible;
}