.tab_container {
        width: 100%;
    }

    .tab_bar {
        width: 100%;
        overflow: hidden;
    }

    .tab_bar button {
        float: left;
        margin-right: 4px;
        padding: 10px 15px;
        color: #dbdbdb;
        background: grey;
        cursor: pointer;
        border: none;
        transition: background-color 0.8s, color 0.4s;
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: -1px;
        margin-left: 0;    
    }

    .tab_bar_active_button {
        background: var(--accordion-background) !important;
        color: var(--body-text-color) !important;
    }

    .tab_content_container {
        background: var(--accordion-background);
        padding: 15px;
        overflow: auto;
        transition: background-color 1s, color 0.2s;
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }

    .tab_content_container div[data-axi="tab_content"]:first-child {
        display: block;
    }

    .tab_content_container div[data-axi="tab_content"] {
        display: none;
    }