.tpfw-widget{
    &{
      
    }
    ul{
        &{
            margin-bottom: 0;
            margin-top:0;
        }
        li{
            &.removing{
                &{
                    background: rgb(250, 220, 220);
                }
                .tabpanel-inside,.tabpanel-top{
                    background: rgb(250, 220, 220);
                }
            }
            &.ui-sortable-helper{
                background: #fff;
                border: 1px solid #e3e3e3;
            }

            &.ui-sortable-placeholder{
                visibility: visible!important;
                background: #fff!important;//rgba(254,240,214,.3)
                border: 1px dashed #ccc!important;//rgba(255,177,6,.2)
                margin-bottom:10px!important;
                height: 35.6px!important;
            }
            
        }
    }
    .widget_tab-add{
        display: block;
    }
    .tpfw-widget-controls{
        &{
            position: relative;
        }
        select{
            box-shadow: none;
            height: 34px;
            line-height: initial;
            width: 100%;
            background: #fff;
            display: block;
            border: 1px solid #E5E5E5;
            text-align: center;
            color: #555;
            text-decoration: none;
            padding: 0px 3px;
        }
        .spinner{
            position: absolute;
            position: absolute;
            top: 3px;
            visibility: visible;
            background-color: #f5f5f5;
            opacity: 1;
            right: -4px;
            display: none;
        }
    }
}
.tabpanel{
    &{
        margin: 0 auto 10px;
        position: relative;
        box-sizing: border-box;
    }
    .tabpanel-top{
        &{
            background: #fafafa;
            color: #23282d;
            cursor: move;
            font-size: 13px;
            font-weight: 600;
            border: 1px solid #e5e5e5;
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
            box-shadow: 0 1px 1px rgba(0,0,0,.04);

        }

        .tabpanel-title-action{
            &{
                float: right;
                position: relative;
            }
            a{
                display: inline-block;
                float: right;
                padding: 10px 0px;
                border-left: 1px solid #E5E5E5;
                color: #555;
                cursor: pointer;
                -webkit-transition: 0.2s;
                -moz-transition: 0.2s;
                -o-transition: 0.2s;
                transition: 0.2s;
                width: 40px;
                text-align: center;
            }
        }
        .tabpanel-title{
            h4{
                padding: 11px;
                margin: 0;
                font-size: 1em;
                line-height: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                user-select: none;
                i{
                    color: #898989;
                    margin-right: 10px;
                    font-size: 14px;
                    position: relative;
                    top: 1px;
                }
            }
        }
    }

    .tabpanel-inside{
        border-top: none;
        padding: 8px;
        line-height: 16px;
        background-color: #f7f7f7;
        border: 1px solid #e5e5e5;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
        box-shadow: 0 1px 1px rgba(0,0,0,.04);
        display: none;
    }

    &.open{
        .tabpanel-inside{
            display: block;
        }
        .tabpanel-top{
            border-bottom: none;

            .tabpanel-title-action{
                a{
                    &.edit{
                        i{
                            &:before{
                                content: "\f14b";
                            }
                        }
                    }

                }
            }
        }
    }
}