.table-block-admin {
    .wrap {
        h1 {
            margin-bottom: 15px;
        }
    }
    .tab-navigation {
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
        display: flex;

        .nav-tab {
            display: inline-block;
            padding: 10px 20px;
            cursor: pointer;
            text-decoration: none;
            color: #555;
            transition: color 0.3s ease;

            &:hover {
                color: #000;
            }

            &.nav-tab-active {
                border-bottom: 3px solid #0073aa;
                font-weight: bold;
                color: #000;
            }
        }
    }

    .tab-content {
        .tab-pane {
            display: none;
            .demo-instruction {
                display: inline-block;
                margin-top: 50px;
            }

            &.active {
                display: block;
            }
            .feature-container {
                display: grid;
                grid-template-columns: auto auto;
                background: white;
                border-radius: 5px;
                .default-table, .product-table {
                    padding: 30px;
                    h3.feature-heading {
                        font-size: 22px;
                        border-bottom: 2px solid #ccc;
                        padding: 10px;
                        font-weight: bold;
                        line-height: 30px;
                        background: #F0F0F1;
                    }
                    div.feature-section {
                        padding: 0px 20px;

                        h4.feature-subheading {
                            font-size: 20px;
                            font-weight: bold;
                            line-height: 30px;
                        }
                        ul.feature-list {
                            color:#333;
                            li {
                                font-size: 15px;
                                line-height: 24px;
                                letter-spacing: 1px;
                                padding-bottom: 15px;
                                span {
                                    &.pl-20 {
                                        padding-left: 20px;
                                    }
                                }

                                span {
                                    /* color: #36D9D8; */
                                    color: #FF4187;
                                } 
                            }
                            .feature-sublist {
                                li {
                                    padding-bottom: 0px;
                                    &:last-child {
                                        padding-bottom: 10px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .table-demo-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .table-demo-item {
        text-align: center;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            margin-bottom: 10px;
            transition: transform 0.3s;
        }

        p {
            font-size: 14px;
            color: #333;
            margin-top: auto;
        }

        .copy-json-btn {
            display: inline-block;
            padding: 6px 12px;
            font-size: 13px;
            line-height: 1.5;
            color: #555;
            background: #f6f7f7;
            border: 1px solid #ccc;
            border-radius: 3px;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
        
            &:hover {
                background: #f0f0f1;
                border-color: #999;
                color: #23282d;
            }
        
            &:focus {
                outline: 2px solid #5b9dd9;
                outline-offset: -2px;
            }
        
            &:active {
                background: #e0e0e1;
                border-color: #999;
                box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
            }
        }
        

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

            img {
                transform: scale(1.05);
            }
        }
    }

    
    @media (max-width: 768px) {
        
    }

    @media only screen and (max-width: 768px) {
        .tab-navigation {
            flex-direction: column;
        }

        .tab-content {
            .tab-pane {
            .feature-container .default-table {
                grid-area: 1 / span 4;
                padding: 10px;
                div.feature-section {
                    padding: 0px 10px;
                }
            }
            .feature-container .product-table {
                grid-area: 2 / span 4;
                padding: 10px;
                div.feature-section {
                    padding: 0px 10px;
                }
            } 
        }
    }
    }
}


/* Toast Notification */
.toast {
    position: fixed;
    top: 50px;
    right: 20px;
    background: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 9999;
}
.toast.show {
    opacity: 1;
}