.selectArea {
    &.filterSelectArea {
        width       : 170px;
        border-right: 2px solid rgba(175, 175, 175, 0.28);
        height      : 40px;
    }
    &.type-2{
        border:1px solid #e8e8e8;
        height: 40px;
        .select{
            .styledSelect{
                font-family: 'GilroyMedium';
                font-size:14px;
                color:#acacac;
                &:after{
                    filter:invert(75%);
                }
            }
        }
    }
    .select {
        cursor  : pointer;
        display : inline-block;
        position: relative;
        height  : 100%;
        width   : 100%;

        .s-hidden {
            visibility   : hidden;
            padding-right: 10px;
        }

        .styledSelect {
            position        : absolute;
            top             : 0;
            right           : 0;
            bottom          : 0;
            left            : 0;
            color           : rgba(23, 23, 23, 1);
            font-family     : 'GilroySemibold';
            font-size       : 11.09px;
            width           : auto;
            border          : none;
            background-color: rgba(0, 0, 0, 0);
            outline         : none;
            padding-right   : 15px;
            padding-left    : 18px;
            display         : flex;
            align-items     : center;

            &:after {
                content            : "";
                position           : absolute;
                top                : 50%;
                right              : 15px;
                margin-top         : -2.5px;
                background         : url('../img/icons/dd-arrow.png');
                background-repeat  : no-repeat;
                background-size    : contain;
                background-position: center;
                width              : 8px;
                height             : 7px;
            }
            &.populer,
            &.fotograflar,
            &.videolar,
            &.illus {
                font-family: 'GilroyExtraBold';
                font-size  : 12.25px;
                color      : #1f1d1d;
                padding-left: 0;

                &:before {
                    content     : "\e907";
                    font-size   : 32px;
                    color       : #1f1d1d;
                    font-family : 'iconFont' !important;
                    display     : block;
                    margin-right: 10px;
                }

                &:after {
                    filter: invert(75%);
                }
            }

            &.fotograflar {
                &:before {
                    content  : "\e914";
                    font-size: 26px;
                }
            }

            &.videolar {
                &:before {
                    content  : "\e920";
                    font-size: 26px;
                }
            }

            &.illus {
                &:before {
                    content  : "\e90d";
                    font-size: 26px;
                }
            }
        }

        .options {
            display         : none;
            position        : absolute;
            top             : 100%;
            right           : 0;
            left            : 0;
            z-index         : 999;
            background-color: white;
            box-shadow      : -6px 22px 14px 0px rgba(34, 31, 25, 0.15);
            border-radius   : 0 0 2px 2px;
            padding-top     : 18px;
            z-index         : 999;
            padding-bottom  : 20px;
            width           : calc(100% + 4px);
            left            : -2px;

            li {
                padding      : 7px 0;
                font-family  : 'GilroyRegular';
                font-size    : 13px;
                color        : #2a2a2a;
                border-bottom: 1px solid rgba(181, 181, 181, 0.6);
                width        : 90%;
                margin       : 0 auto;
                transition   : all .3s linear;
                padding-left : 10px;
                text-align   : left;

                &:hover {
                    color: #d5b97a;
                }
            }
        }
    }
}

@media screen and(max-width:480px) {
    .selectArea {
        &.filterSelectArea {
            width: 80px;
            .select {
                .options{
                    width: 150px;
                }
            }

            .styledSelect {

                &.populer,
                &.fotograflar,
                &.videolar,
                &.illus {
                    font-size  : 0;
                }
            }
        }
    }
}