.dropdown{
    border-top: 3px solid $light-green;
    border-bottom: 3px solid $light-green;
    border-radius: 3px;
    margin-bottom: 4px;
    background: $light-grey;
    transition: .4s;
    
    .title{
        font-size: $font-12;
        font-weight: bold;
        text-align: left;
        padding: 10px;
        position: relative;
        cursor: pointer;
        background: $light-green;
        color: white;
        transition: .4s;
        
        &:after{
            content: '\f105';
            font-family: 'FontAwesome';
            position: absolute;
            right: 10px;
            transition: .4s;
        }


    }
    
    &:hover{
        border-top: 3px solid $green;
        border-bottom: 3px solid $green;
        .title{
            background: $green;
        }
    }
    
    .items{
        overflow: hidden;
        height: 0px;
        padding: 0 10px;
        margin: 0;
        
        li{
            font-size: $font-12;
            text-align: left;
            border-bottom: 1px solid $grey;
            padding: 10px 0;
            list-style: none;
            
            a{
                color: $dark-grey;
                text-decoration: none;
                transition: .4s;
                cursor: pointer;
                &:hover{
                    color: $grey;
                }
            }
            &:last-child{
                border-bottom: none;
            }
        }
    }
    
            
    &.active{
        border-top: 3px solid $green;
        border-bottom: 3px solid $green;

        .title{
            background: $green;
            &:after{
                transform: rotate(90deg);
            }
        }
        .items{
            height: auto;
        }
    }
}