.styble-tab.nav-item .styble-tab-editor-controls,
.styble-tab.nav-item .styble-tab-editor-controls
{
    opacity: 0;
    margin-bottom: -15px;
    transition: .3s;
    svg{
        width: 15px;
    }
}
.styble-tab.nav-item:hover .styble-tab-editor-controls,
.styble-tab.nav-item:hover .styble-tab-editor-controls
{
    opacity: 1;
}
.styble-tab.styble-tabs__add-tab{
    position: relative;
    span{
        position: absolute;
        bottom: 0px;
        left: 10px;
    }
}

// vertical tabs style.
.styble-tabs-vertical {
    display: flex;
    > ul{
        margin-top: 0;
        border-bottom: none;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        li button.nav-link{
            width: 100%;
            border-radius: 0;
        }
        li button.nav-link.active{
            border: 1px solid #ccc;
            border-right-color: transparent;
            // z-index: 999;
            position: relative;
        }
    }
    > ul .styble-tab.styble-tabs__add-tab{
        text-align: center;
        span{
            position: relative;
            left: 0;
        }
    }
    
    .tab-content{
        align-self: flex-start;
        width: 100%;
    }
}

.styble-icon-popup .components-popover__content {
    width: 400px;
    padding: 25px;
}

@media only screen and (max-width: 780px) {
    .styble-tabs-vertical-tablet {
        display: flex;
        > ul{
            margin-top: 0;
            border-bottom: none;
            display: flex;
            flex-shrink: 0;
            flex-direction: column;
            li button.nav-link{
                width: 100%;
                border-radius: 0;
            }
            li button.nav-link.active{
                border: 1px solid #ccc;
                border-right-color: transparent;
                // z-index: 999;
                position: relative;
            }
        }
        > ul .styble-tab.styble-tabs__add-tab{
            text-align: center;
            span{
                position: relative;
                left: 0;
            }
        }
        
        .tab-content{
            align-self: flex-start;
            width: 100%;
        }
    }
    .styble-tabs-horizontal-tablet {
        display: unset;
        > ul{
            flex-direction: row;
        }
        
        .tab-content{
            align-self: flex-start;
            width: 100%;
        }
    }
}

@media only screen and (max-width: 360px) {
    .styble-tabs-vertical-mobile {
        display: flex;
        > ul{
            margin-top: 0;
            border-bottom: none;
            display: flex;
            flex-shrink: 0;
            flex-direction: column;
            li button.nav-link{
                width: 100%;
                border-radius: 0;
            }
            li button.nav-link.active{
                border: 1px solid #ccc;
                border-right-color: transparent;
                // z-index: 999;
                position: relative;
            }
        }
        > ul .styble-tab.styble-tabs__add-tab{
            text-align: center;
            span{
                position: relative;
                left: 0;
            }
        }
        
        .tab-content{
            align-self: flex-start;
            width: 100%;
        }
    }
    .styble-tabs-horizontal-mobile {
        display: unset;
        > ul{
            flex-direction: row;
        }
        
        .tab-content{
            align-self: flex-start;
            width: 100%;
        }
    }
}