.ftm-accordion {
    margin: 30px auto;

    .accordion-item {
        border-bottom: 1px solid transparent;

        &:last-child {
            border-bottom: none;
        }

        .accordion-title {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 15px;
            cursor: pointer;
            background-color: var(--title-bg-color, #ffffff);
            color: var(--title-text-color, #000);
            font-size: var(--title-text-font-size, 18px);
            column-gap: 8px;
            font-weight: var(--title-text-font-weight, normal);

            >h2,>h3,>h4,>h5,>h6,>div,>p,>span{
                font-size: var(--title-text-font-size, 18px);
                font-weight: var(--title-text-font-weight, normal);
                margin: 0px;
            }

            &:hover {
                background-color: var(--title-hover-bg-color, #cbcbcb);
                color: var(--title-text-hover-color);

                >h2,>h3,>h4,>h5,>h6,>div,>p,>span{
                    color: inherit;
                }

                .icon {
                    &.triangle{
                        &::after{
                            border-left: 8px solid var(--title-text-hover-color,--title-icons-color);
                        }
                    }

                    &.plusminus{
                        background-color: var(--title-text-hover-color,--title-icons-color);
                    }

                    &.arrows{
                        background-color: var(--title-text-hover-color,--title-icons-color);
                    }
                }
            }            

            .icon {
                color: var(--title-icons-color, --title-text-color);
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                position: relative;
                //transform: rotate(45deg);

                &.triangle{
                    width: 10px;
                    height: 10px;

                    &::after{
                        content: '';
                        display: block;
                        width: 1px;
                        height: 1px;
                        border-top: 8px solid transparent;
                        border-left: 8px solid var(--title-icons-color, --title-text-color);
                        border-right: 8px solid transparent;
                        border-bottom: 8px solid transparent;
                    }
                }

                &.plusminus{
                    display: block;
                    width: 20px;
                    height: 20px;
                    //background-image: url('../images/plus_sign.svg');
                    -webkit-mask-size: cover;
                    mask-size: cover;
                    -webkit-mask-image: url('../images/plus_sign.svg');
                    mask-image: url('../images/plus_sign.svg');
                    background-color: var(--title-icons-color, --title-text-color);
                    background-position: center center;
                    background-repeat: no-repeat;
                }

                &.arrows{
                    display: block;
                    width: 20px;
                    height: 20px;
                    //background-image: url('../images/plus_sign.svg');
                    -webkit-mask-size: cover;
                    mask-size: cover;
                    -webkit-mask-image: url('../images/arrow_right_sign.svg');
                    mask-image: url('../images/arrow_right_sign.svg');
                    background-color: var(--title-icons-color, --title-text-color);
                    background-position: center center;
                    background-repeat: no-repeat;
                }
            }

            &.active {                                
                background-color: var(--title-open-bg-color, #cbcbcb);
                color: var(--title-text-open-color, #000);

                >h2,>h3,>h4,>h5,>h6,>div,>p,>span{
                    color: inherit;
                }

                .icon{
                    &.triangle{
                        width: 10px;
                        height: 10px;
    
                        &::after{
                            content: '';
                            display: block;
                            width: 1px;
                            height: 1px;
                            border-top: 8px solid transparent;
                            border-left: 8px solid var(--title-text-open-color, --title-icons-color);
                            border-right: 8px solid transparent;
                            border-bottom: 8px solid transparent;
                            transform: rotate(90deg);
                            position: absolute;
                            top: 3px;
                            left: -6px;
                        }
                    }

                    &.plusminus{
                        -webkit-mask-image: url('../images/minus_sign.svg');
                        mask-image: url('../images/minus_sign.svg');
                        background-color: var(--title-text-open-color, --title-icons-color);
                    }

                    &.arrows{
                        -webkit-mask-image: url('../images/arrow_right_sign.svg');
                        mask-image: url('../images/arrow_right_sign.svg');
                        background-color: var(--title-text-open-color, --title-icons-color);
                        transform: rotate(90deg);
                    }
                }
            }
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            padding: 0 15px;
            background-color: var(--content-bg-color, #f8f9fa);
            transition: max-height .3s ease;
            border-radius: 0 0 8px 8px;
            color: var(--content-text-color, #000);

            p {
                margin: 15px 0;
            }
        }
    }
}



@media (max-width: 600px) {
    .ftm-accordion {
        .accordion-title {
            font-size: 16px;
            padding: 12px;
        }

        .accordion-content {
            p {
                margin: 12px 0;
            }
        }
    }
}