.beyond_table {
    --headerColor: #262626;
    --headerTextColor: #ededed;
    --tableHeaderColor: radial-gradient(at top left, #3d3d3d, #6b6a6a);
    --headerBtnBackground: transparent;
    --searchBackgroundColor: transparent;
    --searchTextColor: #ededed;
    --rowHighlight1: white;
    --rowHighlight2: #d8d8d8;
    --buttonColor: #262626;
    --textAlign: center;
    --borderStyle: 1px solid black;
}

/* MAIN */
/* //// */
.beyond_table {
    position: relative;
    width: 100%;
    overflow: hidden;
    font-family: sans-serif;
    color: black;
}
.beyond_table_hidden {
    display: none;
}
/* //// */
/* MAIN */

/* HEADER */
/* ////// */
.beyond_table_header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    font-size: 24px;
    border: solid 1px gray;
    background: var(--headerColor);
    color: var(--headerTextColor);
}
.beyond_table_header_buttons {
    display: flex;
    width: 100%;
    align-items: flex-end;
}
.beyond_table_header_buttons .beyond_table_header_btn {
    font-size: 14px;
    margin: 0px 5px;
    background: var(--headerBtnBackground);
    border: solid 1px gray;
    padding: 5px;
    cursor: pointer;
    border-radius: 3px;
}
.beyond_table_header_btn.beyond_table_btn_edit_cancel {
    display: none;
}
.beyond_table_header_btn:first-child { margin-left: 0; }
.beyond_table_header_btn:last-child { margin-right: 0; }
.beyond_table_header_buttons .beyond_table_header_btn i {
    margin-right: 5px;
}
.beyond_table_search_container {
    display: flex;
    flex: auto;
    justify-content: flex-end;
    align-items: center;
    align-self: flex-end;
}
.beyond_table_seach_icon {
}
.beyond_table_search {
    padding: 5px;
    font-size: 20px;
    border: solid 1px gray;
    border-radius: 5px;
    background-color: var(--searchBackgroundColor);
    color: var(--searchTextColor);
}
.beyond_table_title {
    display: flex;
    width: 100%;
    height: 100%;
}
/* ////// */
/* HEADER */

/* BODY-TABLE */
/* ////////// */
.beyond_table>.beyond_table_container {
    overflow: auto;
}
.beyond_table>.beyond_table_container>table {
    display: table;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-style: hidden;
    overflow: scroll;
}
.beyond_table>.beyond_table_container>table>thead>tr>th ,.beyond_table tbody td {
    padding: 8px;
    text-align: var(--textAlign);
    border: var(--borderStyle);
/*    border: solid 1px gray;*/
}
.beyond_table>.beyond_table_container>table>thead>tr {
    background: var(--tableHeaderColor);
}
.beyond_table>.beyond_table_container>table>thead>tr>th {
    color: var(--headerTextColor);
}
.beyond_table>.beyond_table_container>table>thead>tr>th>div {
    display: inline-block;
}
.beyond_table>.beyond_table_container>table>thead .beyond_table_sortable>div {
    display: flex;
    align-items: center;
    justify-content: var(--textAlign);
    cursor: pointer;
}
.beyond_table>.beyond_table_container>table>thead .beyond_table_sortable i {
    opacity: 0;
    margin: 0px 5px;
}
.beyond_table>.beyond_table_container>table>thead .beyond_table_sortable div:hover i {
    opacity: 1;
}
.beyond_table>.beyond_table_container>table>thead .beyond_table_sortable.active div i {
    opacity: 1;
}
.beyond_table>.beyond_table_container>table>thead .beyond_table_sortable.inverted .beyond_table_sort {
    transform: rotate(180deg);
}
.beyond_table tbody tr:nth-child(odd) {
    background-color: var(--rowHighlight1);
}
.beyond_table tbody tr:nth-child(even) {
    background-color: var(--rowHighlight2);
}
.beyond_table tbody tr td {
    
}
.beyond_table thead th.beyond_table_inline_btn_container>div, .beyond_table tbody tr td.beyond_table_inline_btn_container>div {
    padding: 0;
}
.beyond_table_inline_btn_container>div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.beyond_table_inline_btn_container .beyond_table_row_btn {
    cursor: pointer;
}
.beyond_table_inline_btn_container .beyond_table_row_btn.beyond_table_btn_delete {
    display: none;
}
.beyond_table .editable input {
    width: 100%;
    height: 100%;
}
/* ////////// */
/* BODY-TABLE */

/* FOOTER */
/* ////// */
.beyond_table_footer {
    display: flex;
    padding: 10px;
    align-items: center;
    background: var(--tableHeaderColor);
    color: var(--headerTextColor);
}
.beyond_table_nav_info {
    flex: none;
}
.beyond_table_nav {
    display: flex;
    flex: auto;
    justify-content: flex-end;
    align-items: center;
}
.beyond_table_prev, .beyond_table_next {
    position: relative;
    font-size: 24px;
    width: 30px;
    padding-bottom: 3px;
    text-align: center;
    cursor: pointer;
}
.beyond_table_nav_pages span {
    cursor: pointer;
    padding: 7px 10px;
}
.beyond_table_nav_pages span.current_page {
    background-color: var(--buttonColor);
}
/* ////// */
/* FOOTER */

/* MOBILE */
/* ////// */
.beyond_table_mobile thead {
    display: none;
}
.beyond_table_mobile tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: solid 1px #ebebeb;
}
.beyond_table_mobile tbody td.beyond_table_hidden {
    display: none;
}
.beyond_table_mobile tbody td::before {
    content: attr(mobileHeader) ":";
}
.beyond_table_mobile td.beyond_table_inline_btn_container {
    display: inherit;
    border-bottom: none;
}
.beyond_table_mobile .beyond_table_inline_btn_container>div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.beyond_table_mobile .beyond_table_inline_btn_container>div div {
    margin: 20px;
}
.beyond_table_inline_btn_container::before {
    display: none;
}
/* ////// */
/* MOBILE */