.ce-tabs {

    --tabs-theme-color: #2e008b;



    .tabnavi {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom:  2rem;;

        .tab {
            color: var(--tabs-theme-color);
            border-radius: 100px;
            border: 2px solid var(--tabs-theme-color);
            padding: 0em 1em;
            background-color: white;  
            cursor: pointer;
            transition: all 0.2s;  
            font-size: 1.2rem;
            &.active, &:hover {
                background-color: var(--tabs-theme-color); 
                color: white; 
            }
        }        
    }

    .tabcontent {
        .tabpane {
            display: none;
            &.active {
                display: block;
            }
        }
    }
}

.frame-layout-1 .ce-tabs {
    --tabs-color-1: #2e008b;
    --tabs-color-2: #615ED0;
    --tabs-color-3: #f2507b;

    /* color the tabs based on n-th tab */
    .tabnavi {
        .tab:nth-child(1) {
            color: var(--tabs-color-1);
            border-color: var(--tabs-color-1);
            &.active, &:hover {
                background-color: var(--tabs-color-1); 
                color: white;
            }
        }
        .tab:nth-child(2) {
            color: var(--tabs-color-2);
            border-color: var(--tabs-color-2);
            &.active, &:hover {
                background-color: var(--tabs-color-2);
                color: white; 
            }
        }
        .tab:nth-child(3) {
            color: var(--tabs-color-3);
            border-color: var(--tabs-color-3);
            &.active, &:hover {
                background-color: var(--tabs-color-3); 
                color: white;
            }
        }
    }
}