:root {
    --zixtable_header_bgcolor: #424242;
    --zixtable_header_textcolor: #ffffff;
    
    --zixtable_main_bgcolor_odd: #EBEBEB;
    --zixtable_main_bgcolor_odd_colfirst: #DFDFDF;
    --zixtable_main_bgcolor_even: #F9F9F9;
    --zixtable_main_bgcolor_even_colfirst: #F1F1F1;
    --zixtable_main_textcolor: #424242;


    --zixtable_bordercolor: #ffffff;
    --zixtable_highlight_color: #B31643;
}


/* Table Styles */
.ce_zixtable {
    overflow-x: auto;
}

.ce_zixtable::-webkit-scrollbar {
    height: 8px;
    background-color: #f0f0f0;
}

.ce_zixtable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    background-color: #f0f0f0;
}

.ce_zixtable::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555555;
}



table.zixtable {
    width: 100%;
    margin-bottom: 1rem;
    hyphens: initial;
    word-break: keep-all;
}

table.zixtable th,
table.zixtable td {
    padding: 16px;
    text-align: center;
}
table.zixtable th.first_col,
table.zixtable td.first_col {
    text-align: left;
    padding-right: 64px;
    max-width: 320px;
}
table.zixtable td,
table.zixtable td p {
    font-size: 14px;
    line-height: 1.5;
}
table.zixtable thead th,
table.zixtable thead th p,
table.zixtable tbody td.first_col,
table.zixtable tbody td.first_col p {
    font-size: 15px;
    line-height: 1.4;
    font-weight: bold;
}
table.zixtable tbody td .panel p {
    font-size: 14px;
    line-height: 1.5;
    font-weight: normal;
}
table.zixtable thead tr th.hidden,
table.zixtable thead tr td.hidden {
    visibility: hidden;
}
table.zixtable p {
    margin: 0;
    padding: 0;
}


/* =========================== Colors =========================== */
table.zixtable thead tr th,
table.zixtable thead tr th p{
    color: var(--zixtable_header_textcolor);
    fill: var(--zixtable_header_textcolor);
}
table.zixtable tbody tr td,
table.zixtable tbody tr td p {
    color: var(--zixtable_main_textcolor);
    fill: var(--zixtable_main_textcolor);
}
table.zixtable tbody tr:not(.bottom).highlight_row td:not(.first_col),
table.zixtable tbody tr:not(.bottom).highlight_row td:not(.first_col) p,
table.zixtable tbody tr:not(.bottom) td.highlight_col:not(.first_col),
table.zixtable tbody tr:not(.bottom) td.highlight_col:not(.first_col) p {
    color: var(--zixtable_highlight_color);
    fill: var(--zixtable_highlight_color);
    font-weight: bold;
}

table.zixtable tbody tr:not(.bottom) td:not(.first_col).highlight_col {
    color: var(--zixtable_highlight_color);
    fill: var(--zixtable_highlight_color);
}
table.zixtable tbody tr:not(.bottom) td.first_col.highlight_col,
table.zixtable tbody tr:not(.bottom) td.first_col.highlight_col p,
table.zixtable tbody tr:not(.bottom).highlight_row td.first_col,
table.zixtable tbody tr:not(.bottom).highlight_row td.first_col p {
    color: #fff;
    fill: #fff;
}
/* ============================================================================ */


/* =========================== Icon Colors =========================== */
table.zixtable .check-icon-to-frontend {
    background-color: #6BAA26 !important;
}
table.zixtable .minus-icon-to-frontend {
    background-color: #B8B8B8 !important;
}
table.zixtable .cross-icon-to-frontend {
    background-color: #FF0000 !important;
}

table.zixtable .highlight_row .check-icon-to-frontend,
table.zixtable .highlight_col .check-icon-to-frontend {
    background-color: var(--zixtable_highlight_color) !important;
}

/* ============================================================================ */


/* =========================== Background - Colors =========================== */
table.zixtable thead, table.zixtable tbody, table.zixtable tfoot {background: none;}
table.zixtable thead tr {background: var(--zixtable_header_bgcolor);}
table.zixtable tbody tr {background: var(--zixtable_main_bgcolor_odd);}
table.zixtable tbody tr.even {background: var(--zixtable_main_bgcolor_even);}
table.zixtable tbody tr.odd {background: var(--zixtable_main_bgcolor_odd);}
table.zixtable tbody tr.even td.first_col {background: var(--zixtable_main_bgcolor_even_colfirst);}
table.zixtable tbody tr.odd td.first_col {background: var(--zixtable_main_bgcolor_odd_colfirst);}
table.zixtable tbody tr.bottom {background: none;}
table.zixtable thead tr:not(.bottom).highlight_row td.first_col,
table.zixtable thead tr:not(.bottom) th.highlight_col,
table.zixtable tbody tr:not(.bottom).highlight_row td.first_col,
table.zixtable tbody tr:not(.bottom) td.first_col.highlight_col {
    background: var(--zixtable_highlight_color);
}
/* ============================================================================ */


/* ================================== Borders ================================== */
table.zixtable {border-collapse:collapse;}
table.zixtable, table.zixtable thead, table.zixtable tbody, table.zixtable tfoot {border: none;}
table.zixtable tbody tr {border-bottom: 1px solid var(--zixtable_main_bgcolor_odd);}
table.zixtable tbody tr.even {border-bottom: 1px solid var(--zixtable_main_bgcolor_even);}
table.zixtable tbody tr.odd {border-bottom: 1px solid var(--zixtable_main_bgcolor_odd);}
table.zixtable tbody tr.even td.first_col {border-bottom: 1px solid var(--zixtable_main_bgcolor_even_colfirst);}
table.zixtable tbody tr.odd td.first_col {border-bottom: 1px solid var(--zixtable_main_bgcolor_odd_colfirst);}
table.zixtable tbody tr.bottom {border: none;}
table.zixtable tbody tr:not(.bottom).highlight_row {
    border-top: 2px solid var(--zixtable_highlight_color);
    border-bottom: 2px solid var(--zixtable_highlight_color);
}
table.zixtable tbody tr:not(.bottom).highlight_row td.first_col.highlight_col {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
table.zixtable tbody tr:last-of-type td.highlight_col {
    border-top: 2px solid var(--zixtable_highlight_color);
}

table.zixtable thead tr th:first-of-type {
    border-right: 1px solid var(--zixtable_bordercolor);
}

table.zixtable tr:not(.bottom) th:not(.first_col):not(.second_col),
table.zixtable tr:not(.bottom) td:not(.first_col):not(.second_col) {
    border-left: 1px solid var(--zixtable_bordercolor);
}
table.zixtable tr:not(.bottom).highlight_row th:first-child,
table.zixtable tr:not(.bottom).highlight_row td:first-child {
    border-left: 2px solid var(--zixtable_highlight_color);
}
table.zixtable tr:not(.bottom).highlight_row th:last-of-type,
table.zixtable tr:not(.bottom).highlight_row td:last-of-type {
    border-right: 2px solid var(--zixtable_highlight_color);
}
table.zixtable tr:not(.bottom) th.highlight_col,
table.zixtable tr:not(.bottom) td.highlight_col {
    border-right: 2px solid var(--zixtable_highlight_color) !important;
    border-left: 2px solid var(--zixtable_highlight_color) !important;
}
table.zixtable tr:not(.bottom) th.hidden,
table.zixtable tr:not(.bottom) td.hidden {
    border: none !important;
}
table.zixtable tr:not(.bottom) th.highlight_col.hidden {
    border-bottom: 2px solid var(--zixtable_highlight_color) !important;
}
/* ============================================================================ */


/* ========================== Frontend Table-Icons ========================== */
table.zixtable .check-icon-to-frontend {
    display: inline-block;
    width: 25px;
    height: 28px;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>') no-repeat center / contain;
    background-color: black;
}
table.zixtable .minus-icon-to-frontend {
    display: inline-block;
    width: 25px;
    height: 28px;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>') no-repeat center / contain;
    background-color: black;
}
table.zixtable .cross-icon-to-frontend {
    display: inline-block;
    width: 25px;
    height: 28px;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>') no-repeat center / contain;
    background-color: black;
}
/* ============================================================================ */


/* ========================== Accordion Table Styles ========================== */
table.zixtable .accordion {
    cursor: pointer;
    position: relative;
}

table.zixtable .accordion .chevron {
    position: absolute;
    right: 24px;
    top: 18px;
    width: 12px;
    transition: transform 0.3s ease;
}

table.zixtable .accordion.active .chevron {
    transform: rotateX(180deg);
}

/* Accodrion Panel Styles */
table.zixtable .panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
table.zixtable .panel > * {
    padding-top: 16px;
    padding-right: 32px;
} 

table.zixtable .panel.show {
    max-height: 1000px;
}
/* ============================================================================ */