.edit-table-customization-wrap {

    .edit-form-group {

        .table-customization-tab-wrap {
            display: flex;

            .table-customization-tab-nav {
                display: flex;
                width: 100%;
                max-width: 125px;
                overflow: hidden;
                background: #E7EDF2;
                flex-direction: column;
                border-bottom-left-radius: 4px;

                button {
                    border: none;
                    outline: none;
                    cursor: pointer;
                    text-align: left;
                    padding: 14px 20px;
                    font-size: 16px;
                    color: #757678;
                    box-shadow: none;
                    font-weight: 600;
                    line-height: 21px;
                    margin-bottom: 2px;
                    background: transparent;
                    border-left: 4px solid transparent;
                    transition: all 0.3s ease;

                    &.active,
                    &:hover {
                        color: #008717;
                        background: #ffffff;
                        border-left-color: #008717;
                    }

                }

                button:first-child {
                    border-top-left-radius: 8px;
                }
            }

            .table-customization-tab-content {
                width: 100%;

                .table-customization-utility {
                    .edit-form-group {
                        h4 {
                            font-style: normal;
                            font-weight: 400;
                            font-size: 16px;
                            line-height: 16px;
                            color: #666873;
                            margin: 20px 0 15px 0;
                            display: flex;
                            align-items: center;

                            svg {
                                margin-left: 5px;
                            }
                        }

                        .exports-btns {
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            margin-left: -10px;
                            margin-right: -10px;
                            flex-wrap: wrap;
                            margin-bottom: -20px;

                            button {
                                margin-left: 10px;
                                margin-right: 10px;
                                display: inline-block;
                                padding: 10px 40px;
                                background: #ffffff;
                                border: 1px solid #e3e5e9;
                                border-radius: 6px;
                                font-style: normal;
                                margin-bottom: 20px;
                                font-weight: 600;
                                font-size: 14px;
                                line-height: 19px;
                                text-align: center;
                                color: #666873;
                                cursor: pointer;
                                outline: none;
                                box-shadow: none;
                                overflow: hidden;
                                transition: all 0.3s ease;

                                &.active {
                                    position: relative;
                                    border-color: #008717;
                                    font-style: normal;
                                    font-weight: 600;
                                    font-size: 14px;
                                    line-height: 19px;
                                    text-align: center;
                                    color: #008717;

                                    &::before {
                                        content: "";
                                        position: absolute;
                                        left: 7px;
                                        top: 3px;
                                        width: 3px;
                                        height: 7px;
                                        border-left: 2px solid white;
                                        border-bottom: 2px solid white;
                                        font-family: arial;
                                        transform: scaleX(-1) rotate(-45deg);
                                        z-index: 1;
                                    }

                                    &::after {
                                        content: "";
                                        position: absolute;
                                        left: -26px;
                                        top: -30px;
                                        width: 50px;
                                        height: 50px;
                                        background: #008717;
                                        transform: rotate(47deg);
                                        z-index: 0;
                                    }

                                    &:hover {
                                        box-shadow: rgb(52, 160, 250, 0.3) 0px 0px 0px 5px;
                                    }
                                }

                                &:hover {
                                    box-shadow: rgb(240, 242, 248) 0px 0px 0px 5px;
                                }

                                &:focus {
                                    outline: none;
                                    border: 1px solid #e3e5e9;
                                    // box-shadow: rgb(240, 242, 248) 0px 0px 0px 5px;
                                    box-shadow: none;
                                }
                            }
                        }

                        .utility-checkbox-wrapper {
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            margin-left: -10px;
                            margin-right: -10px;
                            flex-wrap: wrap;
                            margin-bottom: -20px;

                            input[type="radio"] {
                                display: none;
                            }

                            .utility-checkboxees {
                                width: fit-content;
                                display: inline-block;
                                background: #ffffff;
                                border: 1px solid #ecf2f6;
                                border-radius: 6px;
                                white-space: nowrap;
                                padding: 10px 20px;
                                text-align: right;
                                display: inline-flex;
                                align-items: center;
                                justify-content: flex-start;
                                flex-flow: row-reverse;
                                margin-left: 10px;
                                margin-right: 10px;
                                margin-bottom: 20px;
                                transition: all 0.3s ease;
                                position: relative;

                                .control__indicator {
                                    width: 16px;
                                    height: 16px;
                                    border: 2px solid #ccd5dc;
                                    border-radius: 11px;
                                    margin-right: 7px;
                                    position: relative;
                                    box-sizing: border-box;

                                    &::after {
                                        content: "";
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                        width: 16px;
                                        height: 16px;
                                        transform: translate(-50%, -50%);
                                        border: 4px solid #008717;
                                        border-radius: 8px;
                                        box-sizing: border-box;
                                        opacity: 0;
                                        visibility: hidden;
                                        z-index: -99999;
                                    }

                                    &.active {
                                        &::after {
                                            visibility: visible;
                                            opacity: 1;
                                            z-index: 1;
                                        }
                                    }
                                }

                                span {
                                    font-weight: 400;
                                    font-size: 14px;
                                    line-height: 19px;
                                    color: #1e1e1e;
                                    display: flex;
                                    align-items: center;
                                    justify-content: flex-start;

                                    svg {
                                        margin-left: 7px;
                                    }
                                }

                                input[type="checkbox"] {
                                    position: absolute;
                                    z-index: -1;
                                    opacity: 0;
                                    left: -9999px;

                                    &:checked~.control__indicator {
                                        &::after {
                                            opacity: 1;
                                            visibility: visible;
                                            z-index: 10;
                                        }
                                    }

                                    &:checked~span {
                                        font-style: normal;
                                        font-weight: 600;
                                        font-size: 14px;
                                        line-height: 19px;
                                        color: #008717;
                                    }
                                }

                                &:hover {
                                    box-shadow: rgb(240, 242, 248) 0px 0px 0px 5px;
                                }

                                &.active {
                                    border-color: #008717;
                                }
                            }
                        }

                        .cache-table {
                            font-style: normal;
                            font-weight: 400;
                            font-size: 16px;
                            line-height: 16px;
                            color: #1e1e1e;
                            display: flex;

                            input[type="checkbox"] {
                                position: relative;
                                border: 1px solid #bbbdca;
                                background: none;
                                cursor: pointer;
                                line-height: 0;
                                margin: 0 0.6em 0 0;
                                outline: 0;
                                padding: 0 !important;
                                vertical-align: text-top;
                                height: 19px;
                                width: 19px;
                                -webkit-appearance: none;
                                border-radius: 5px;
                                outline: none;
                                box-shadow: none;
                                box-sizing: border-box;

                                &:checked {
                                    background-color: #008717;
                                }

                                &:checked::before {
                                    content: "";
                                    position: absolute;
                                    right: 50%;
                                    top: 50%;
                                    width: 4px;
                                    height: 10px;
                                    border: solid #fff;
                                    border-width: 0 2px 2px 0;
                                    margin: -1px -1px 0 -1px;
                                    transform: rotate(45deg) translate(-50%, -50%);
                                    z-index: 2;
                                }

                                &:focus {
                                    outline: none;
                                    box-shadow: none;
                                    // border: 2px solid #008717;
                                    border: 1px solid #bbbdca;

                                }
                            }

                            .span {
                                display: inline-flex;
                                align-items: center;
                                justify-content: flex-start;

                                svg {
                                    margin-left: 7px;
                                    vertical-align: middle;
                                }
                            }


                        }

                        /* &:last-child {
                            margin-top: 20px;
                            padding-bottom: 40px;
                        } */

                    }

                    .edit-form-group.cache-feature.frequent-mode {
                        padding: 20px 20px 18px;
                        background-color: #FAFAFA;
                        border-radius: 6px;
                        width: 100%;
                        margin-top: 5px;
                        display: flex;
                        flex-direction: column;
                        align-items: baseline;

                        .freq-settings {
                            display: flex;
                        }

                        .content-paragraph {
                            margin-top: 20px;
                            font-size: 14px;
                            color: #666 !important;
                            margin-bottom: 10px;
                            line-height: 1.4;
                        }
                    }



                    .edit-form-group.cache-feature {
                        gap: 3px;
                        display: flex;
                        align-items: center;
                        margin-top: 15px;

                        .cache-table {
                            margin-bottom: 0;
                        }

                        span.tooltip-cache {
                            display: flex;
                            line-height: 1;
                            align-items: center;

                            button.btn-pro.btn-new {
                                margin-top: 0;
                                margin-bottom: 0;
                            }
                        }

                        button.beta-badge {
                            outline: 0;
                            gap: 3px;
                            color: #F00;
                            background-color: rgba(255, 0, 0, 0.05);
                            box-shadow: none;
                            font-size: 11px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal;
                            display: inline-flex;
                            align-items: center;
                            border-radius: 3.533px;
                            padding: 2px 7px 2px 7px;
                            border: 0.5px solid rgba(255, 0, 0, 0.05);
                            box-shadow: none !important;
                            transition: background-color 0.2s, color 0.2s;
                            margin-left: 5px;

                            &:hover {
                                color: #fff;
                                background-color: #F00;
                            }

                        }


                    }

                    .feature-disabled {
                        opacity: 0.4;
                        cursor: not-allowed;

                        #disable-frequent-cache {
                            cursor: not-allowed;
                        }
                    }

                    .edit-form-group.special-feature {
                        gap: 3px;
                        display: flex;
                        margin-top: 15px;
                        align-items: center;
                        text-align: center;

                        .cache-table {
                            margin-bottom: 0;
                        }

                        span.tooltip-cache {
                            display: flex;
                            line-height: 1;
                            align-items: center;


                            button.btn-pro.btn-new {
                                margin-top: 0;
                                margin-bottom: 0;
                            }
                        }

                        button.btn-pro.btn-new {
                            outline: 0;
                            gap: 3px;
                            color: #008717;
                            background-color: rgba(43, 184, 133, 0.05);
                            box-shadow: none;
                            font-size: 11px;
                            font-style: normal;
                            font-weight: 600;
                            line-height: normal;
                            display: inline-flex;
                            align-items: center;
                            border-radius: 3.533px;
                            padding: 2px 7px 2px 7px;
                            border: 0.5px solid rgba(43, 184, 133, 0.05);
                            box-shadow: none !important;
                            transition: background-color 0.2s, color 0.2s;
                            margin-left: 5px;

                            &:hover {
                                color: #fff;
                                background-color: #008717;
                            }
                        }


                    }


                    // Allow sorting 
                    .edit-form-group.cache-feature.allow-sorting {
                        display: flex;
                        align-items: center;
                        margin-top: -16px;
                        margin-left: 1px;
                        font-style: normal;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 16px;
                        color: #1e1e1e;
                        display: flex;

                        label.singlesort-label {
                            margin-top: 9px;
                        }

                        // Checkbox desgin start 
                        input[type=checkbox] {
                            position: relative;
                            border: 1px solid #bbbdca;
                            background: none;
                            cursor: pointer;
                            line-height: 0;
                            margin: 0 0.6em 0 0;
                            outline: 0;
                            padding: 0 !important;
                            vertical-align: text-top;
                            height: 19px;
                            width: 19px;
                            -webkit-appearance: none;
                            border-radius: 5px;
                            outline: none;
                            box-shadow: none;
                            box-sizing: border-box;
                        }

                        input[type=checkbox]:checked {
                            background-color: #008717;
                        }

                        input[type=checkbox]:checked::before {
                            content: "";
                            position: absolute;
                            right: 50%;
                            top: 50%;
                            width: 4px;
                            height: 10px;
                            border: solid #fff;
                            border-width: 0 2px 2px 0;
                            margin: -1px -1px 0 -1px;
                            transform: rotate(45deg) translate(-50%, -50%);
                            z-index: 2;
                        }

                        // checbox design 

                        span.select-wrapper {
                            margin: 5px;
                            position: relative;
                            display: inline-flex;

                            .icon {
                                right: 10px;
                                line-height: 0;
                                position: absolute;
                                top: calc(50% - 3px);
                                pointer-events: none;
                            }
                        }

                        select#singleshort-mode {
                            margin: 0;
                            color: #1E1E1E;
                            border-radius: 6px;
                            font-size: 16px;
                            font-style: normal;
                            box-shadow: none;
                            font-weight: 400;
                            line-height: normal;
                            background: #F8FCFF;
                            padding: 8px 37px 9px 10px;
                            border: 1px solid #BBBDCA;
                        }


                    }

                    // end s
                }

                .table-customization-style {
                    margin-bottom: 60px;

                    .edit-form-group {
                        h4 {
                            font-style: normal;
                            font-weight: 400;
                            font-size: 16px;
                            line-height: 16px;
                            color: #666873;
                            margin: 20px 0 15px 0;
                            display: flex;
                            align-items: center;

                            svg {
                                margin-left: 5px;
                            }
                        }

                        .style-checkbox-items {
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            margin-left: -10px;
                            margin-right: -10px;
                            flex-wrap: wrap;
                            margin-bottom: -20px;

                            input[type="radio"] {
                                display: none;
                            }

                            .style-checkbox {
                                width: fit-content;
                                display: inline-block;
                                background: #ffffff;
                                border: 1px solid #ecf2f6;
                                border-radius: 6px;
                                white-space: nowrap;
                                padding: 10px 20px;
                                text-align: right;
                                display: inline-flex;
                                align-items: center;
                                justify-content: flex-start;
                                flex-flow: row-reverse;
                                margin-left: 10px;
                                margin-right: 10px;
                                margin-bottom: 20px;
                                transition: all 0.3s ease;
                                position: relative;
                                font-style: normal;
                                font-weight: 400;
                                font-size: 14px;
                                line-height: 19px;
                                color: #1e1e1e;

                                .control__indicator {
                                    width: 16px;
                                    height: 16px;
                                    border: 2px solid #ccd5dc;
                                    border-radius: 11px;
                                    margin-right: 7px;
                                    position: relative;
                                    box-sizing: border-box;

                                    &::after {
                                        content: "";
                                        position: absolute;
                                        left: 50%;
                                        top: 50%;
                                        width: 16px;
                                        height: 16px;
                                        transform: translate(-50%, -50%);
                                        border: 4px solid #008717;
                                        border-radius: 8px;
                                        box-sizing: border-box;
                                        opacity: 0;
                                        visibility: hidden;
                                        z-index: -99999;
                                    }

                                    &.active {
                                        &:after {
                                            visibility: visible;
                                            opacity: 1;
                                            z-index: 1;
                                        }
                                    }
                                }

                                span {
                                    font-weight: 400;
                                    font-size: 14px;
                                    line-height: 19px;
                                    color: #1e1e1e;
                                    display: flex;
                                    align-items: center;
                                    justify-content: flex-start;

                                    svg {
                                        margin-left: 7px;
                                    }
                                }

                                input[type="checkbox"] {
                                    position: absolute;
                                    z-index: -1;
                                    opacity: 0;
                                    left: -9999px;

                                    &:checked .control__indicator {
                                        &::after {
                                            opacity: 1;
                                            visibility: visible;
                                            z-index: 10;
                                        }
                                    }

                                    &:checked span {
                                        font-style: normal;
                                        font-weight: 600;
                                        font-size: 14px;
                                        line-height: 19px;
                                        color: #008717;
                                    }
                                }

                                &.active {
                                    border-color: #008717;
                                }

                                &:hover {
                                    box-shadow: rgb(240, 242, 248) 0px 0px 0px 5px;
                                }
                            }
                        }


                    }

                    .table-customization-layout {
                        display: flex;
                        flex-wrap: wrap;
                        grid-row-gap: 20px;
                        margin-top: 30px;
                        margin-bottom: 30px;
                        grid-column-gap: 30px;

                        .edit-form-group {
                            margin: 0 !important;

                            select {
                                min-width: 250px;
                                color: #1E1E1E !important;
                                background-color: #F8FCFF;
                            }
                        }
                    }

                    .switch-toggle {

                        .tooltip-cache {
                            display: inline-flex;
                            align-items: center;
                        }
                    }

                    button.btn-pro.btn-new {
                        color: white;
                        background: #008717;
                        font-weight: bold;
                        border-radius: 11px;
                        height: 17px;
                        font-size: 9px;
                        display: flex;
                        text-align: center;
                        align-items: center;
                        margin-top: 0;
                    }
                }

                .table-customization-layout {
                    margin-bottom: 70px;

                    .edit-form-group {
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-start;
                        flex-direction: column;
                        margin-bottom: 35px;

                        &:first-child {
                            margin-top: 20px;
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }

                        label {
                            font-weight: 400;
                            font-size: 16px;
                            line-height: 16px;
                            color: #666873;
                            margin-bottom: 15px;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                        }

                        select {
                            border: 1px solid #ecf2f7;
                            border-radius: 6px;
                            max-width: 438px;
                            width: 100%;
                            height: 40px;
                            outline: none;
                            box-shadow: none;

                            &.swptls-pro-settings {
                                pointer-events: none;
                            }

                            option {
                                font-weight: 400;
                                font-size: 14px;
                                line-height: 19px;
                                color: #1e1e1e;
                            }

                            &:focus {
                                border: 1px solid #ecf2f7;
                                outline: none;
                                box-shadow: none;
                            }
                        }


                    }
                }


            }
        }

        .edit-form-group.swptls-select {
            max-width: 438px;
            width: 100%;
            height: 40px;
            opacity: 1;
        }
    }
}

// Frquent mode modal 
.frequent-modal-wrap {
    width: 100%;
    max-width: 700px;
    padding: 30px;
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);

    .cross_sign {
        position: absolute;
        top: 16px;
        right: 16px;
        cursor: pointer;
        color: #6b7280;
        transition: color 0.2s;

        &:hover {
            color: #374151;
        }
    }

    .active-frequent-modal {
        h2 {
            font-size: 22px;
            font-weight: 600;
            color: #1f2937;
            margin: 0 0 14px;
            text-align: left;
        }

        p {
            margin: 0 0 24px;
            color: #4b5563;
            font-size: 15px;
            line-height: 1.5;
            text-align: left;
        }

        .content-note {
            display: flex;
            align-items: center;
            padding: 16px;
            background-color: #fffbeb;
            border: 1px solid #fff5d4;
            border-radius: 10px;
            margin-bottom: 24px;

            .content-note-icon {
                flex-shrink: 0;
                margin-right: 16px;

                svg {
                    color: #d97706;
                    display: block;
                }
            }

            .content-note-text {
                flex: 1;
                color: #78716c;
                line-height: 1.5;
                font-size: 14px;
            }
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;

            .swptls-button {
                padding: 10px 18px;
                border-radius: 6px;
                font-weight: 500;
                font-size: 14px;
                cursor: pointer;
                transition: all 0.2s ease;

                &.cancel-button {
                    background-color: transparent;
                    border: 1px solid #d1d5db;
                    color: #4b5563;

                    &:hover {
                        background-color: #f3f4f6;
                    }
                }

                &.confirm-button {
                    background-color: #FC7E2A;
                    border: none;
                    color: white;

                    &:hover {
                        // background-color: #2563eb;
                        background: lighten(#FC7E2A, 10px);
                    }
                }
            }
        }
    }
}

// END 

.edit-row-settings-wrap {
    .edit-form-group {
        .hide-table-elements-tab-wrap {
            display: flex;

            .hide-table-elements-tab-nav {
                display: flex;
                width: 100%;
                max-width: 125px;
                overflow: hidden;
                background: #E7EDF2;
                flex-direction: column;
                border-bottom-left-radius: 4px;

                button {
                    border: none;
                    outline: none;
                    cursor: pointer;
                    text-align: left;
                    padding: 14px 8px;
                    font-size: 16px;
                    color: #757678;
                    box-shadow: none;
                    font-weight: 600;
                    line-height: 21px;
                    margin-bottom: 2px;
                    background: transparent;
                    border-left: 4px solid transparent;
                    transition: all 0.3s ease;

                    &.active,
                    &:hover {
                        color: #008717;
                        background: #ffffff;
                        border-left-color: #008717;
                    }
                }

                button:first-child {
                    border-top-left-radius: 8px;
                }

                @media screen and (max-width: 480px) {
                    max-width: 100px;

                }
            }

            .hide-table-elements-tab-content {
                width: 100%;

                .hide-columns-tab-content,
                .hide-rows-tab-content,
                .hide-cells-tab-content {
                    h4 {
                        font-style: normal;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 21px;
                        margin: 20px 0 24px 0;
                        padding: 10px 10px 10px 13px;
                        color: #1E1E1E;
                        background-color: #EFF2F7;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        border-radius: 6px;

                        span {
                            margin-right: 8px;
                            width: 22px;
                            height: 22px;
                            display: inline-block;
                        }
                    }

                    .hide-mobile-and-desktop-wrapper {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        flex-wrap: wrap;
                        margin-left: -17px;
                        margin-right: -17px;
                        margin-bottom: 25px;

                        .hide-checkboxes {
                            margin-left: 17px;
                            margin-right: 17px;
                            margin-bottom: 20px;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            label {
                                font-style: normal;
                                font-weight: 400;
                                font-size: 16px;
                                line-height: 16px;
                                color: #1e1e1e;

                                input[type="checkbox"] {
                                    position: relative;
                                    border: 1px solid #bbbdca;
                                    border-radius: 3px;
                                    background: none;
                                    cursor: pointer;
                                    line-height: 0;
                                    margin: 0 0.6em 0 0;
                                    outline: 0;
                                    padding: 0 !important;
                                    vertical-align: text-top;
                                    height: 19px;
                                    width: 19px;
                                    -webkit-appearance: none;
                                    outline: none;
                                    box-shadow: none;
                                    box-sizing: border-box;

                                    &:checked {
                                        background-color: #008717;
                                    }

                                    &:checked::before {
                                        content: "";
                                        position: absolute;
                                        right: 50%;
                                        top: 50%;
                                        width: 4px;
                                        height: 10px;
                                        border: solid #fff;
                                        border-width: 0 2px 2px 0;
                                        margin: -1px -1px 0 -1px;
                                        transform: rotate(45deg) translate(-50%, -50%);
                                        z-index: 2;
                                    }

                                    &:focus {
                                        outline: none;
                                        box-shadow: none;
                                        border: 1px solid #bbbdca;
                                    }
                                }

                                span {

                                    display: inline-flex;
                                    align-items: center;
                                    justify-content: flex-start;

                                    svg {
                                        margin-left: 7px;
                                        vertical-align: middle;
                                    }
                                }
                            }
                        }
                    }

                    .hidden-columns,
                    .hidden-rows,
                    .hidden-cells {
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-start;
                        flex-direction: column;

                        label {
                            width: 100%;
                            font-weight: 400;
                            font-size: 16px;
                            line-height: 16px;
                            color: #666873;
                        }

                        span {

                            svg {
                                margin-left: 7px;
                            }
                        }

                        textarea {
                            padding: 27px 28px;
                            height: 76px;
                            width: 100%;
                            background: #f5f6fd;
                            border-radius: 6px;
                            border: none;
                            outline: none;
                            box-shadow: none;

                            &:focus {
                                border: none;
                                outline: none;
                                box-shadow: none;
                            }
                        }
                    }
                }

                .navbar-screen-nav {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 15px;
                    grid-column-gap: 15px;
                    border-bottom: 1px solid #E5E7EB;

                    button {
                        gap: 8px;
                        border: 0;
                        cursor: pointer;
                        font-size: 14px;
                        color: #1F2937;
                        font-weight: 400;
                        line-height: 20px;
                        padding: 10px 15px;
                        font-style: normal;
                        border-radius: 10px;
                        display: inline-flex;
                        align-items: center;
                        margin-bottom: 10px;
                        background-color: #DCE5EC;
                        transition: all 0.3s ease;
                        position: relative;

                        .icon {
                            line-height: 0;

                            svg {

                                path {
                                    transition: all 0.3s ease;
                                }
                            }
                        }

                        &::before {
                            left: 0;
                            right: 0;
                            content: '';
                            height: 2px;
                            width: 0;
                            bottom: -11px;
                            margin-left: auto;
                            margin-right: auto;
                            position: absolute;
                            background-color: #008717;
                            transition: all 0.3s ease;
                        }

                        &.active,
                        &:hover {
                            color: #ffffff;
                            background-color: #008717;

                            .icon {
                                svg {

                                    path {
                                        fill: #ffffff;
                                    }
                                }
                            }

                            &::before {
                                width: 100%;
                            }
                        }
                    }

                    @media screen and (max-width: 420px) {
                        button {
                            flex: 1 1 110px;

                            &::before {
                                display: none;
                            }
                        }

                    }
                }

                .screen-tab-content {
                    margin-top: 35px;

                    .screen-desktop-and-mobile {
                        opacity: 1;
                        transition: all 0.3s ease;
                        cursor: pointer;

                        &.disable {
                            opacity: 0.3;
                            pointer-events: none;
                        }

                        &.screen-disable {
                            opacity: 0.3;
                            // pointer-events: none;
                            cursor: not-allowed;
                        }

                        .screen-pointer-none {
                            pointer-events: none;
                        }
                    }
                }
            }
        }
    }
}

.edit-display-settings-wrap {

    h4#merge-hints {
        font-size: 15px;
        line-height: 20px;
        color: rgb(206, 109, 38);
        background-color: rgb(255, 244, 236);
        margin: 20px 0px 24px;
        padding: 10px 10px 10px 13px;
    }

    h4 {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        color: #666873;
        margin: 20px 0 15px 0;
        display: flex;
        align-items: center;
    }

    input[type="checkbox"] {
        position: relative;
        border: 1px solid #bbbdca;
        border-radius: 5px;
        background: none;
        cursor: pointer;
        line-height: 0;
        margin: 0 0.6em 0 0;
        outline: 0;
        padding: 0 !important;
        vertical-align: text-top;
        height: 19px;
        width: 19px;
        -webkit-appearance: none;
        outline: none;
        box-shadow: none;
        box-sizing: border-box;

        &:checked {
            background-color: #008717;
        }

        &:checked::before {
            content: "";
            position: absolute;
            right: 53%;
            top: 50%;
            width: 4px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            margin: -1px -1px 0 -1px;
            transform: rotate(45deg) translate(-53%, -50%);
            z-index: 2;
        }

        &:focus {
            outline: none;
            box-shadow: none;
            border: 1px solid #bbbdca;
        }
    }

    label {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        color: #1e1e1e;
        margin-bottom: 0;
    }

    .display-settings-block-wrapper {
        padding: 20px 20px 18px;
        background-color: #FAFAFA;
        border-radius: 6px;
        max-width: 406px;

        .top-elements-wrapper {
            gap: 10px 40px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;
            align-items: center;
            justify-content: space-between;
        }

        .edit-form-group {

            label {
                font-style: normal;
                font-weight: 400;
                font-size: 16px;
                line-height: 16px;
                color: #1e1e1e;
                display: inline-flex;
                align-items: center;
            }
        }

        .swap-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;

            label {
                input[type="checkbox"] {
                    display: none;
                }

                display: flex;
                align-items: center;
                justify-content: flex-start;
                color: #1f7ac7;
                padding: 5px 11px;
                border: 1px solid #1f7ac7;
                max-width: 80px;
                border-radius: 20px;
                transition: all 0.3s ease;

                &.active {
                    background: #1f7ac7;
                    color: #ffffff;
                }

                span {
                    margin-right: 7px;
                    width: 10px;
                    height: 12px;
                    display: inline-block;

                    svg {
                        margin-left: 0;
                    }
                }

                &:hover {
                    box-shadow: rgba(31, 122, 199, 0.2) 0px 0px 0px 3px;
                }
            }
        }

        .swap-position {
            display: flex;
            justify-content: center;

            input {
                display: none;

                &:checked+label {
                    color: #FFF;
                    background-color: #008717;

                    svg {
                        path {
                            stroke: #fff;
                        }
                    }
                }
            }

            label {
                cursor: pointer;
                font-size: 16px;
                font-weight: 400;
                color: #008717;
                font-style: normal;
                align-items: center;
                background: #FFF;
                border-radius: 16px;
                white-space: nowrap;
                display: inline-flex;
                line-height: normal;
                padding: 4px 15px 6px;
                border: 1px solid #008717;
                transition: all 0.3s ease;

                &:hover {
                    color: #126E22;
                    border-color: #126E22;

                    svg {
                        path {
                            stroke: #126E22;
                        }
                    }
                }

                .icon {
                    line-height: 0;
                    margin-right: 8px;

                    svg {
                        path {
                            transition: all 0.3s ease;
                        }
                    }
                }
            }
        }

        // Hide Swap 
        .swap-position.swptls-swap-disabled {
            opacity: 0.5;

            input {
                pointer-events: none;
            }

            label {
                cursor: not-allowed;
            }



        }

    }

    .swptls-table-basic-elements {

        .edit-form-group.allow-sorting {
            margin-top: -16px;
            display: flex;
            align-items: center;
        }

        label.columnnumber {
            margin-left: 20px;
            margin-top: -20px;
            color: #6b6b6b;

            input[type=text] {
                padding: 15px 20px 16px 20px;
                width: 245px;
            }

            ::-webkit-input-placeholder {
                /* Edge */
                font-style: normal;
                font-weight: 400;
                font-size: 14px;
                line-height: 19px;
                // color: #1E1E1E;
                color: #BBBDCA;
            }

            :-ms-input-placeholder {
                /* Internet Explorer 10-11 */
                font-style: normal;
                font-weight: 400;
                font-size: 14px;
                line-height: 19px;
                // color: #1E1E1E;
                color: #BBBDCA;
            }

            ::placeholder {
                font-style: normal;
                font-weight: 400;
                font-size: 14px;
                line-height: 19px;
                color: #BBBDCA;
            }
        }

        .edit-form-group {
            &:last-child {
                margin-bottom: 0;
            }

            &:nth-child(3) {
                margin-bottom: 15px;
            }

            .btn-pro.btn-new {
                outline: 0;
                gap: 3px;
                color: #1C6CDB;
                background-color: #EFF2F7;
                box-shadow: none;
                font-size: 11px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                display: inline-flex;
                align-items: center;
                border-radius: 14px;
                padding: 2px 7px 2px 7px;
                border: 0.5px solid rgba(43, 184, 133, 0.05);
                box-shadow: none !important;
                transition: background-color 0.2s, color 0.2s;
                margin-left: 5px;

                &:hover {
                    color: #fff;
                    background-color: #324759;
                }
            }

            .select-wrapper {
                margin: 5px;
                position: relative;
                display: inline-flex;

                select {
                    margin: 0;
                    color: #1E1E1E;
                    border-radius: 6px;
                    font-size: 16px;
                    font-style: normal;
                    box-shadow: none;
                    font-weight: 400;
                    line-height: normal;
                    background: #ffffff;
                    padding: 8px 37px 9px 10px;
                    border: 1px solid #BBBDCA;
                }

                .icon {
                    right: 10px;
                    line-height: 0;
                    position: absolute;
                    top: calc(50% - 3px);
                    pointer-events: none;
                }
            }

        }

        // Auto sorting 
        .edit-form-group.sorting-feature-with-priority {
            padding: 20px 20px 18px;
            background-color: #FAFAFA;
            border-radius: 6px;
            margin: 10px 0px 10px 0px;

            .auto_sorting-label {
                margin-bottom: 10px;
                font-style: normal;
                font-weight: 400;
                font-size: 16px;
                line-height: 16px;
                color: #1e1e1e;
                display: flex;
                align-items: center;
            }

            .auto_sorting-title {
                font-size: 14px;
                color: #666 !important;
                margin-bottom: 10px;
                line-height: 1.4;
            }

            .conditional-view {
                display: flex;
                gap: 20px;

                .conditional-dropdown-select,
                .sort-order-select {
                    display: flex;
                    flex-direction: column;
                    // width: 285px;
                    width: 300px;

                    label {
                        margin-bottom: 5px;
                        color: #333;
                    }


                    .select-with-icon {
                        position: relative;

                        select {
                            width: 100%;
                            padding: 8px 10px;
                            border-radius: 6px;
                            background: #ffffff;
                            border: 1px solid #ecf2f6;
                            font-size: 14px;
                            color: #333;
                            appearance: none;
                            cursor: pointer;
                            padding-right: 23px;

                            &:focus {
                                outline: none;
                                border-color: #ecf2f6;
                            }
                        }

                        select#sortOrder {
                            padding: 8px 30px;
                        }

                        .select-icon-sort {
                            position: absolute;
                            left: 12px;
                            top: 55%;
                            transform: translateY(-50%);
                            pointer-events: none;
                            transition: transform 0.3s ease;
                        }

                        .select-icon {
                            position: absolute;
                            right: 10px;
                            top: 50%;
                            transform: translateY(-50%);
                            pointer-events: none;
                            transition: transform 0.3s ease;
                        }

                    }

                    .sorting-control {
                        margin-top: 25px;
                        display: flex;
                        align-items: center;
                        margin-left: 5px;
                        width: 305px;

                        label {
                            cursor: pointer;
                        }
                    }

                }
            }
        }

        .edit-form-group.header-section {
            display: flex;
        }

        // Sticky header 
        .sticky-header-settings {
            border-top: 1px solid #E6E6E6;
            padding-top: 20px;

            .edit-form-group {
                margin-bottom: 12px;

                label {
                    display: flex;
                    align-items: center;

                    input {
                        margin-right: 0.5rem;
                    }
                }
            }

            .column-settings,
            .header-settings {
                margin-bottom: 1rem;
                padding: 1rem;
                background-color: #f6f7fe;
                border-radius: 6px;
                display: flex;
                gap: 1rem;

                .column-input {
                    flex: 0;
                    // flex: 1;
                    margin-bottom: 0;

                    label {
                        display: block;
                        margin-bottom: 0.5rem;
                        font-size: 0.9rem;
                    }

                    .sticky-number-input {
                        display: flex;
                        align-items: stretch;
                        border: 1px solid #D7D9E2;
                        border-radius: 3px;
                        overflow: hidden;
                        max-width: 355px;
                        border: none;

                        button {
                            background-color: #3858e9;
                            color: white;
                            border: none;
                            padding: 0 10px;
                            cursor: pointer;
                            font-size: 14px;

                            &:disabled {
                                background-color: #ccc;
                                cursor: not-allowed;
                            }
                        }

                        input {
                            flex: 1;
                            font-size: 13px;
                            line-height: 20px;
                            color: #061938;
                            padding: 10px 12px;
                            background: #FFFFFF;
                            border: none;
                            text-align: center;
                            box-shadow: none;
                        }

                        input[type="number"]::-webkit-inner-spin-button,
                        input[type="number"]::-webkit-outer-spin-button {
                            -webkit-appearance: none;
                            margin: 0;
                        }

                        input[type="number"] {
                            -moz-appearance: textfield;
                        }

                        button:first-of-type {
                            border-right: 1px solid #D7D9E2;
                            border-top-left-radius: 6px;
                            border-bottom-left-radius: 6px;
                        }

                        button:last-of-type {
                            border-left: 1px solid #D7D9E2;
                            border-top-right-radius: 6px;
                            border-bottom-right-radius: 6px;
                        }
                    }
                }
            }
        }


        .feature-disabled {
            opacity: 0.4;
            cursor: not-allowed;

            #headerSelect,
            #sortOrder {
                cursor: not-allowed;
            }
        }


    }

    .swptls-table-bottom-elements {

        h4 {
            margin-top: 0;
        }
    }

    .edit-form-elements {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 50px;
        padding-bottom: 25px;
        margin-bottom: 25px;
        border-bottom: 1px solid #E6E6E6;
    }
}

.table-style {
    display: flex;
    align-items: center;
    flex-direction: row;
    // margin-top: 25px;

    $toggle-on-color: #008717; // On state color
    $toggle-off-color: #ccc; // Off state color
    $toggle-slider-color: #fff; // Slider color

    $toggle-width: 40px; // Width of the toggle switch
    $toggle-height: 20px; // Height of the toggle switch
    $toggle-slider-size: 18px; // Size of the slider

    label {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        color: #1e1e1e;
        text-align: center;
        display: flex;
        // Other label styles

        .toggle-switch {
            display: inline-block;
            position: relative;
            width: $toggle-width;
            height: $toggle-height;
            margin-right: 5px;

            input[type="checkbox"] {
                display: none; // Hide the actual checkbox input

                &:checked+.slider {
                    background-color: $toggle-on-color; // On state color
                }

                // Move the slider to the right for the "on" state
                &:checked+.slider:before {
                    transform: translateX(($toggle-width - 2) - $toggle-slider-size);
                }
            }

            .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: $toggle-off-color; // Off state color
                transition: 0.4s;
                border-radius: calc($toggle-height / 2);
                width: $toggle-width;

                &:before {
                    position: absolute;
                    content: "";
                    height: $toggle-slider-size;
                    width: $toggle-slider-size;
                    left: 1px; // Adjust the position of the slider
                    bottom: 1px; // Adjust the position of the slider
                    background-color: $toggle-slider-color; // Slider color
                    transition: 0.4s;
                    border-radius: 50%;
                }
            }

            input[type="checkbox"]:disabled+.slider {
                background-color: #ccc; // Disabled state color
                cursor: not-allowed;
            }
        }
    }
}

// New UI Style

.switch-toggle {
    position: relative;
    margin-bottom: 13px;


    input[type="checkbox"] {
        top: 0;
        left: 0;
        opacity: 0;
        height: 100%;
        cursor: pointer;
        position: absolute;
    }

    label {
        color: #1E1E1E;
        font-weight: 400;
        font-size: 16px;
        padding-left: 50px;
        line-height: 100%;
        position: relative;
        display: inline-block;
        box-sizing: border-box;
    }

    label:before {
        content: '';
        top: 0;
        left: 0;
        min-width: 40px;
        height: 20px;
        position: absolute;
        background: #DCDDE4;
        display: inline-block;
        border-radius: 500px;
        box-sizing: border-box;
        transition: 0.2s ease-in;
    }

    label:after {
        content: '';
        position: absolute;
        min-width: 16px;
        height: 16px;
        border-radius: 500px;
        left: 2px;
        top: 2px;
        z-index: 2;
        background: #fff;
        box-sizing: border-box;
        transition: 0.2s ease-in;
    }

    input[type="checkbox"]:checked+label:before {
        background: #008717;
    }

    input[type="checkbox"]:checked+label:after {
        left: 22px;
    }
}

.input-checkbox {
    margin-top: 15px;

    input[type="checkbox"] {
        width: 19px;
        line-height: 0;
        outline: 0;
        height: 19px;
        outline: none;
        position: relative;
        border-radius: 3px;
        background: none;
        cursor: pointer;
        box-shadow: none;
        margin: 0 0.6em 0 0;
        padding: 0 !important;
        box-sizing: border-box;
        vertical-align: text-top;
        border: 1px solid #bbbdca;
        -webkit-appearance: none;

        &:checked {
            background-color: #008717;
        }

        &:checked::before {
            content: "";
            right: 53%;
            top: 50%;
            width: 4px;
            height: 10px;
            z-index: 2;
            position: absolute;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            margin: -1px -1px 0 -1px;
            transform: rotate(45deg) translate(-53%, -50%);
        }

        &:focus {
            outline: none;
            box-shadow: none;
            border: 1px solid #bbbdca;
        }
    }

    label {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        color: #1e1e1e;
        margin-bottom: 0;
    }
}