$link-color: #2ecc40;

.create_tab_content {

    .tabs {
        position: relative;
        $tabs-base-color: #fff;
        list-style: none;
        padding-left: 0;
        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;
            border-bottom: 2px solid $link-color;
            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 {
        visibility: hidden;
        opacity: 0;
        width: 100%;
        transition: all 0.1s ease-in;
        height: 0;

        .gswpts_tables_container {
            margin: 0;
            padding: 0;
        }
    }

    .tab-content.active {
        visibility: visible;
        opacity: 1;
        height: auto;
    }

    .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 {
        margin-bottom: 1rem;
    }

    .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) {
        .tab_right_side {
            margin-top: 1.5rem;
            padding-left: 0 !important;
        }
    }

    @media screen and (max-width: 680px) {
        .tabs {
            grid-row-gap: 10px;

            li {
                flex: 1 1 100px;
            }
        }

        .tab_right_side {
            margin-top: 1.5rem;
            padding-left: 0 !important;
        }
    }
}