.tabsTitle {
    display      : flex;
    align-items  : center;
    height       : 75px;
    border-bottom: 9px solid #f6f6f6;

    &>.container {
        display        : flex;
        align-items    : center;
        justify-content: space-between;

        &>div {
            display        : flex;
            align-items    : center;
            justify-content: space-between;

            &.detailsSearch {
                justify-content: center;
                padding        : 7px 0 0 30px;
            }
        }
    }

    .tabButton {
        background-color: rgba(0, 0, 0, 0);
        color           : #1f1d1d;
        font-family     : 'GilroyExtraBold';
        font-size       : 1.1616rem;
        transition      : all .3s ease-in-out;
        cursor          : pointer;
        height          : 65px;
        display         : flex;
        align-items     : center;
        position        : relative;
        opacity         : 0.39;
        margin-left     : 34px;
        flex            : 2;
        padding-top     : 3px;

        span {
            line-height: 24px;
        }

        &:first-child {
            margin-left: 0;
        }

        &:after {
            content         : "";
            position        : absolute;
            left            : 0;
            bottom          : -8.5px;
            background-color: customColor(secondary);
            height          : 9px;
            width           : 0;
            transition      : all .3s linear;
            z-index         : 2;
        }

        .customIcon {
            font-size   : 23px;
            color       : #1f1d1d;
            margin-right: 3px;

            &.icon-favorite {
                font-size: 33px;
            }

            &.icon-photo {
                font-size: 27px;
            }

            &.icon-video {
                font-size   : 22px;
                margin-right: 10px;
            }

            &.icon-illus {
                font-size   : 23px;
                margin-right: 8px;
            }
        }

        &:hover,
        &.active {
            opacity: 1;
            color  : customColor(secondary);

            .customIcon {
                color: customColor(secondary);
            }

            &:after {
                width: 100%;
            }
        }
    }
}

.tabsContent {
    width: 100%;

    .tabContent {
        background-color: #ffffff;
        font-family     : Arial, Helvetica, sans-serif;
        font-size       : 12px;
        display         : none;
        height          : 100%;
        position        : relative;

        &.active {
            display: block;
        }
    }
}

.detailsSearch {
    display     : flex;
    align-items : center;
    font-family : 'GilroyExtraBold';
    justify-content: center;
    font-size   : 1.1616rem;
    border-left : 2px solid #e5e5e5;
    border-right: 2px solid #e5e5e5;
    height      : 45px;
    max-width   : 380px;
    flex        : 1;

    span {
        color         : customColor(dark_primary);
        letter-spacing: 0.3px;
    }

    .customIcon {
        color      : customColor(dark_primary);
        font-size  : 16px;
        margin-left: 7px;
    }
}

.tabs {
    &.type-2 {
        .tabsTitle {
            height             : auto;
            border-bottom-width: 3px;
            display            : block;
            padding-top        : 35px;
            text-align         : left;

            .tabButton {
                font-family   : 'GilroyExtraBold';
                font-size     : 11.09px;
                color         : rgba(23, 23, 23, 0.52);
                height        : auto;
                display       : inline-block;
                padding       : 0 10px;
                padding-bottom: 10px;

                &:first-child {
                    padding-left: 0;
                }

                &:after {
                    height: 3px;
                    bottom: -3px;
                }

                &.active,
                &:hover {
                    color: rgba(23, 23, 23, 1);
                }
            }
        }
    }

    &.type-3 {
        text-align: left;

        .tabsTitle {
            height       : auto;
            display      : inline-block;
            padding-top  : 35px;
            text-align   : left;
            box-shadow   : inset -1px 10px 32px 0px rgba(0, 0, 0, 0.06);
            position     : relative;
            border-bottom: none;
            padding-top  : 0;
            height       : 60px;
            padding      : 10px 0;

            &:before {
                content   : "";
                box-shadow: inset -1px 10px 32px 0px rgba(0, 0, 0, 0.06);
                height    : 100%;
                position  : absolute;
                left      : -100%;
                top       : 0;
                width     : 100%;
            }

            .tabButton {
                font-family: 'GilroyExtraBold';
                font-size  : 11.09px;
                color      : rgba(23, 23, 23, 0.52);
                height     : 100%;
                display    : inline-flex;
                align-items: center;
                padding    : 0 24px;
                border-left: 2px solid #e6e6e6;
                margin-left: 0;

                &:first-child {
                    padding-left: 0;
                    border-left : none;

                    &:after {
                        left: 0;
                    }
                }

                &:after {
                    height: 3px;
                    bottom: -10px;
                    left  : 10px;
                }

                &.active,
                &:hover {
                    color: rgba(23, 23, 23, 1);

                    &:after {
                        width: calc(100% - 20px);
                    }
                }
            }
        }

        .tabContent {
            .head {
                margin-top: 50px;
            }
        }
    }
}

@media screen and(max-width:768px) {
    .tabsTitle {
        height: auto;

        &>.container {
            display     : block;
            padding     : 0;
            padding-left: 10px;

            &>div {
                &.detailsSearch {
                    border    : none;
                    border-top: 2px solid #e5e5e5;
                    max-width : initial;
                }
            }
        }
    }

    .tabs {
        &.type-3 {
            display: block;
            .tabsTitle {
                display: block;
                height : auto;

                .tabButton {
                    display     : flex;
                    height      : 40px;
                    align-items : center;
                    padding-left: 0;
                    border-left : none;
                    &:after{
                        bottom:0;
                        left:0;
                    }
                    &:hover,
                    &.active {
                        &:after{
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}

@media screen and(max-width:640px) {
    .tabsTitle {
        .tabButton {
            margin-left: 0;
            height     : 50px;
            font-size:0.6616rem;
            .customIcon{
                &.icon-favorite{
                    font-size:22px;
                }
                &.icon-photo{
                    font-size:18px;
                }
                &.icon-video{
                    font-size:14px;
                }
                &.icon-illus{
                    font-size:13px;
                }
            }
        }

        &>.container {
            &>div {
                // display: block;

                &.detailsSearch {
                    padding: 13px 0 0 0;
                }
            }
        }
    }
}