.create_tab_content {
    .table_cards .draggable {
        cursor: grab;
    }

    .card {
        min-width: 290px;
    }

    .card.dragging {
        border: 2px solid $link-color;
        z-index: 99;
    }

    .ui-draggable-dragging {
        border: 2px solid $link-color;
    }

    .create_icon {
        cursor: pointer;
    }

    .top_side {
        padding: 0 22px;
        background-color: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .cards_container {
        width: 100%;
        min-width: 310px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .card_remover {
        position: absolute;
        top: 0;
        right: 0;
        margin: 10px 10px 0 0;
        cursor: pointer;
        font-size: 1.1rem;
        display: none;
    }

    .tab_page_input.tab_page_input.tab_page_input {
        padding-right: 1rem !important;
    }

    .tab_input_btn {
        font-size: 1.7rem;
        cursor: pointer;
    }

    .tab_bottom_side {
        background-color: #fff;
        padding: 22px;
    }

    .demo_template {
        display: none;
    }

    .close_tab_container {
        position: absolute;
        right: 0;
        margin-right: 22px;
        top: 0;
        margin-top: 22px;
        font-size: 1.6rem;
        cursor: pointer;
        z-index: 2;
    }

    .tabs {
        position: relative;
        $tabs-base-color: #fff;
        list-style: none;

        display: flex;
        flex-wrap: wrap;

        input[type="radio"] {
            position: absolute;
            top: 0;
            left: -9999px;
        }
        label {
            display: block;
            padding: 8px 21px;
            border-radius: 5px 5px 0 0;
            font-size: 1.2rem;
            font-weight: bold;
            // text-transform: capitalize;
            background: $tabs-base-color;
            cursor: pointer;
            position: relative;
            top: 4px;
            transition: all 0.2s ease-in-out;
            &:hover {
                background: rgb(231, 235, 217);
            }
        }

        [id^="tab"]:checked + label {
            top: 4px;
            padding-top: 7px;
            background: $link-color;
            color: #fff;
        }
    }

    .tab-content {
        display: none;
        min-height: 70px;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
    .tab-content.active {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .unselectable {
        user-select: none;
    }

    .hidden_tab_name {
        display: none;
        width: 110px !important;
        padding: 6px 4px !important;
    }

    /* .tab_page_name {
        text-transform: capitalize;
    } */

    .tab_name_label.active {
        padding: 8px 5px;
        transition: none;
    }

    .tab_name_label.active .tab_page_name {
        display: none;
    }

    .tab_name_label.active .hidden_tab_name {
        display: block;
    }

    .tab_name_label.active_transition {
        transition: all 0.2s ease-in-out;
    }
    .tab_name_label.deactivate_transition {
        transition: none;
    }

    .tab_name_box {
        display: flex;
        margin-bottom: 1rem;
        align-items: center;

        .tab_name {
            max-width: 190px;
        }
    }

    .tab_positon_btn {
        font-size: 1.6rem;
        cursor: pointer;
        margin-left: 10px;
        transition: all 0.2s ease-in-out;
    }

    .tab_positon_btn.down {
        transform: rotate(180deg);
    }

    .tabs_container.reverse {
        display: flex;
        flex-direction: column-reverse;
        .tabs {
            margin-bottom: 0;
            margin-top: 1rem;

            li {
                margin-bottom: 0;
                margin-top: 6px;
            }

            .tab_name_label {
                margin-bottom: 0;
                margin-top: 0.5rem;
            }
        }
    }

    @media screen and (max-width: 770px) {
        .tabs {
            flex-direction: column;
        }
        .tab_right_side {
            margin-top: 1.5rem;
            padding-left: 0 !important;
        }
    }
}