:root {
    --table-cell-padding-horizontal: 20px;
    --table-cell-padding-vertical: 12px;
}

.table-wrp {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.table-config {
    display: none;
}

.table-size {
    display: block;
    width: 100%;
    overflow: auto;
}

table {
    width: 100%;
}

@media only screen and (max-width: 653px) {
    .table-optimized table {
        display: table;
        table-layout: fixed;
    }
}

table,
table th,
table td {
    border: none;
    border-collapse: collapse;
}

table th,
table td {
    padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
}

table th:first-child,
table td:first-child {
    padding-left: var(--table-cell-padding-vertical);
}

table th:last-child,
table td:last-child {
    padding-right: var(--table-cell-padding-vertical);
}

@media only screen and (max-width: 653px) {
    .table-optimized table th,
    .table-optimized table td {
        padding: 0px !important;
    }
}

table td i {
    color: var(--color-text-50);
}





/* table header */


@media only screen and (max-width: 653px) {
    .table-optimized .tr-header {
        display: none;
    }
}

table th {
    padding-top: 0px;
}

.th-layout {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 653px) {
    .table-optimized .th-layout {
        width: auto;
    }
}

.th-title {
    display: table;
    table-layout: fixed;
    opacity: 0.55;
}

.th-title span {
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.th-order-wrp {
    display: table;
    margin-left: 12px;
}

@media only screen and (max-width: 653px) {
    .table-optimized .th-order-wrp {
        margin-left: 6px;
    }
}

.table-order-config {
    display: none;
}

.th-order-btn {
    height: 21px;
    width: 21px;
    opacity: 0.55;
    background-color: var(--color-text);
    -webkit-mask-size: 50%;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-transition: opacity 0.15s;
    -moz-transition: opacity 0.15s;
    -ms-transition: opacity 0.15s;
    -o-transition: opacity 0.15s;
    transition: opacity 0.15s;
}

.th-order-btn-asc {
    -webkit-mask-image: url(/static/media/icons/solid/arrow-bottom.svg);
    mask-image: url(/static/media/icons/solid/arrow-bottom.svg);
}

.th-order-btn-desc {
    -webkit-mask-image: url(/static/media/icons/solid/arrow-top.svg);
    mask-image: url(/static/media/icons/solid/arrow-top.svg);
}

.th-order-btn-none {
    -webkit-mask-image: url(/static/media/icons/outline/minus.svg);
    mask-image: url(/static/media/icons/outline/minus.svg);
}

.th-order-btn:hover,
.th-order-btn:focus {
    opacity: 1;
}

.tr-header-mobile-wrp {
    display: none;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 2px;
}

@media only screen and (max-width: 653px) {
    .table-optimized .tr-header-mobile-wrp {
        display: table;
    }
}

.tr-header-mobile-scroll {
    display: block;
    width: 100%;
    overflow: auto;
    padding-bottom: 12px;
}

.tr-header-mobile-content {
    display: flex;
    flex-direction: row;
    gap: 12px;
}








/* table content */

@media only screen and (max-width: 653px) {
    .table-optimized table tr {
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        margin-bottom: 6px;
        padding: 12px;
    }

    .table-optimized table tr:nth-child(even) {
        background-color: var(--color-block);
    }

    .table-optimized table tr:last-child {
        margin-bottom: 0px;
    }
}

.table-header-mobile {
    display: none;
    color: var(--color-text-50);
    margin-right: 8px;
}

@media only screen and (max-width: 653px) {
    .table-optimized .table-header-mobile {
        display: block;
    }
}

.td-size-extended {
    min-width: 185px;
}

.td-size-fit {
    width: 0%;
}

table tr:nth-child(even) td {
    background-color: var(--color-block);
}

table td:first-child {
    border-top-left-radius: 8px;
}

table td:last-child {
    border-top-right-radius: 8px;
}

table td:first-child {
    border-bottom-left-radius: 8px;
}

table td:last-child {
    border-bottom-right-radius: 8px;
}

@media only screen and (max-width: 653px) {
    .table-optimized table td {
        display: flex;
        flex-wrap: wrap;
        background-color: transparent !important;
        align-items: center;
        flex-direction: row;
        margin-bottom: 8px;
    }

    .table-optimized table td:last-child {
        margin-bottom: 0px;
    }

    .table-optimized .td-size-extended {
        min-width: 100%;
    }

    .table-optimized .td-size-fit {
        width: 100%;
    }

    .table-optimized .td-mobile-separation {
        margin-top: 10px;
    }
}

table td span {
    display: block;
    font-size: 15px;
    letter-spacing: 0.5px;
    max-width: 220px;
}

@media only screen and (max-width: 653px) {
    .table-optimized table td span {
        font-size: 15px;
        letter-spacing: 0.35px;
        max-width: 100%;
    }
}

table td a,
table td button {
    display: flex;
    background-color: transparent;
    align-items: center;
    flex-direction: row;
}

table td a img,
table td button img {
    height: 22px;
    width: 22px;
    border-radius: 5px;
    margin-right: 10px;
    border: 1px solid var(--color-profile-image-border);
}

@media only screen and (max-width: 653px) {
    .table-optimized table td a img,
    .table-optimized table td button img {
        margin-right: 6px;
    }
}

.td-image-only {
    margin-right: 0px !important;
}

table td a span,
table td button span {
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -ms-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

table td a:hover span,
table td a:focus span,
table td button:hover span,
table td button:focus span {
    text-decoration: underline;
}

.td-label {
    display: block;
    width: min-content;
    background-color: var(--color-text-faded);
    border-radius: 5px;
    padding: 3.5px 6px;
}

.td-label span {
    display: block;
    color: var(--color-text-50);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.3px;
}

@media only screen and (max-width: 653px) {
    .td-label span {
        font-size: 12.5px !important;
        letter-spacing: 0.2px !important;
    }
}

.td-size-fit span {
    white-space: nowrap;
}

@media only screen and (max-width: 653px) {
    .table-optimized .td-size-fit span {
        white-space: wrap;
    }
}

.td-blue,
.td-blue span {
    color: var(--color-text-blue);
}

.td-blue.td-label {
    background-color: var(--color-table-blue);
}

.td-blue:hover span,
.td-blue:focus span {
    color: var(--color-text-blue-hover);
    text-decoration: none;
}

.td-red:hover span,
.td-red:focus span {
    color: var(--color-text-red-hover);
    text-decoration: none;
}

.td-green:hover span,
.td-green:focus span {
    color: var(--color-text-green-hover);
    text-decoration: none;
}

.td-green,
.td-green span {
    color: var(--color-text-green);
}

.td-green.td-label {
    background-color: var(--color-table-green);
}

.td-red,
.td-red span {
    color: var(--color-text-red);
}

.td-red.td-label {
    background-color: var(--color-table-red);
}

.td-blue.td-label span,
.td-green.td-label span,
.td-red.td-label span {
    color: var(--color-background);
}





/* table tools */



.table-tools {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: var(--table-cell-padding-vertical);
    padding-bottom: 0px;
}

.table-tools-load-more,
.table-tools-loading {
    display: flex;
}

.table-load-more-btn {
    display: none;
}

.table-tools-load-more .table-load-more-btn {
    display: table;
}

.table-loading-icon-wrp {
    display: none;
    margin: 6px;
}

.table-tools-loading .table-loading-icon-wrp {
    display: table;
}

.table-loading-icon-wrp svg {
    height: 21px;
    width: 21px;
}



/* messages */

.table-messages-wrp {
    display: none;
    width: 100%;
    padding: var(--table-cell-padding-vertical);
}

.table-messages-no-content,
.table-messages-errors {
    display: block;
}

@media only screen and (max-width: 653px) {
    .table-optimized .table-no-content-wrp {
        padding: 0px;
    }
}

.table-no-content-layout {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.table-messages-no-content .table-no-content-layout {
    display: flex;
}

.table-no-content-txt {
    width: 100%;
    color: var(--color-text-50);
    font-size: 15px;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.table-error-wrp {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.table-messages-errors .table-error-wrp {
    display: flex;
}

.table-error-txt {
    width: 100%;
    color: var(--color-text-red);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.4px;
    margin-top: 6px;
}


/* column priority managment */
@media only screen and (max-width: 1700px) {
    .column-priority-6 {
        display: none;
    }
}

@media only screen and (max-width: 1570px) {
    .column-priority-5 {
        display: none;
    }
}

@media only screen and (max-width: 1300px) {
    .column-priority-4 {
        display: none;
    }
}

@media only screen and (max-width: 870px) {
    .column-priority-3 {
        display: none;
    }
}

@media only screen and (max-width: 653px) {
    .column-priority-6,
    .column-priority-7,
    .column-priority-4,
    .column-priority-3,
    .column-priority-2,
    .column-priority-1 {
        display: flex;
    }
}