.dropdown{
    border-top: 3px solid $light-green;
    border-bottom: 3px solid $light-green;
    background: $light-grey;
    
    border-top: 3px solid $green;
    border-bottom: 3px solid $green;
    
    border-radius: 3px;
    margin-bottom: 4px;
    transition: .4s;
    
    &.static{
        border-top: 3px solid $light-grey;
        border-bottom: 3px solid $light-grey;
        background: white;
        > .title{
            background: $light-grey;
            color: $green;
        }
        &.active,
        &:hover{
            > .title{
                color: white;
            }
        }
        >.items{
            li{
                border-bottom: none;
                a{
                    color: $dark-grey;
                    &:hover{
                        color: black;
                    }
                }
            }
        }
    }
    
    > .title{
        font-size: $font-12;
        font-weight: bold;
        text-align: left;
        padding: 6px 10px 8px 10px;
        position: relative;
        cursor: pointer;
        background: $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;
        }
    }
} 




.pages{
    text-align: center;
    a{
        display: inline-block;
        background: $light-grey;
        font-weight: bold;
        border-radius: 3px;
        margin: 4px;
        color: $green;
        padding: 4px 8px;
        
        &:hover,
        &.selected{
            color: white;
            background: $green;
        }
    }
}