.table3 {
    font-size: 12px;
    position: relative;
    min-height: 400px;
}

.t3Slider {
    margin: 10px 80px 5px 20px;
}

/* Hide horizontal slider in mobile card view — cards scroll vertically, not horizontally */
.table3.t3MobileCardView + .t3Slider {
    display: none;
}

.t3Slider .t3CustomHandle {
    width: 80px;
    height: 25px;
    top: 50%;
    margin-top: -8px;
    text-align: center;
    line-height: 25px;
    font-size: 10px;
}

.table3 .t3Header {
    overflow-y: hidden;
    overflow-x: hidden;
    position: relative;
    background-color: #3e81c1;
    color: #fff;
}

.table3 .t3Header div:not(.c-0)>.header {
    cursor: pointer;
}

.table3 .t3Body {
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 12px;
}

.table3 div[class*="r-"]:not(.table3LongTextWindow *) {
    display: block;
    white-space: nowrap;
}

.table3 div[class*="c-"] {
    display: inline-block;
    width: 300px;
    min-width: 50px;
    border-right: 1px solid rgb(0 0 0 / 5%);
    border-bottom: 1px solid rgb(0 0 0 / 5%);
    position: relative;
}

.table3 .t3Header div[class*="c-"] {
    text-align: center;
}

.table3 .t3Header div[class*="c-"] .header {
    padding: 2px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

.table3 .t3FixedCols {
    display: inline-block;
    white-space: nowrap;
    position: relative;
    background-color: #ffffff;
    border-radius: 0px;
    z-index: 3;
    vertical-align: top;
}

.table3 .t3Header .t3FixedCols {
    background-color: #3e81c1;
}

.table3 .t3FlexiCols {
    display: inline-block;
    white-space: nowrap;
    position: relative;
    background-color: #ffffff;
}

.table3 .t3Header .t3FlexiCols {
    background-color: #3e81c1;
}

.table3 .item select {
    padding: 2px 0px 2px 5px;
    border-radius: 0px;
    box-shadow: none;
}

.table3 .item input.editable[type="number"] {
    padding: 3px 10px;
    height: auto;
    border-radius: 0px;
}

.table3 .item input.editable[type="text"] {
    padding: 3px 10px;
    height: auto;
    border-radius: 0px;
}

.table3 .item input.editable[type="date"] {
    padding: 3px 10px;
    height: auto;
    border-radius: 0px;
}

.table3 .item input.editable[type="datetime"] {
    padding: 3px 10px;
    height: auto;
    border-radius: 0px;
}

.table3 .item input.editable.sizeXS[type="text"] {
    width: 50px;
}

.table3 .item input.editable.sizeS[type="text"] {
    width: 80px;
}

.table3 .item input.editable.sizeM[type="text"] {
    width: 120px;
}

.table3 .item input.editable.sizeL[type="text"] {
    width: 160px;
}

.t3type-text .item i.fa-light {
    color: #918f7f;
    padding: 5px 5px;
    cursor: zoom-in;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    background-color: #fff;
}

.t3type-textarea .item i.fa-light {
    color: #918f7f;
    padding: 5px 5px;
    cursor: zoom-in;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    background-color: #fff;
}

.table3longTextValueBox textarea {
    width: 100%;
}

.table3 .t3dt-number {
    text-align: right;
}

.table3 .item {
    padding: 0px 5px;
    display: inline-block;
}

.table3 .item.neg {
    color: red;
}

.table3 div.simpleFilter {
    display: block;
    margin: 0px 0px 5px 0px;
    padding: 0px;
    width: auto;
    overflow: hidden;
    line-height: 14px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
}

.table3 div.simpleFilter .filter {
    display: block;
}

.table3 div.filterspace {
    line-height: 14px;
    margin-bottom: 5px;
}


.table3 div.orderButtons {
    display: block;
    margin: 0px 0px 5px 0px;
    padding: 0px;
    width: auto;
    overflow: hidden;
    line-height: 5px;
    text-align: center;
}

.table3 div.orderButtons button.filter,
.table3 div.orderButtons button.asc,
.table3 div.orderButtons button.desc {
    width: 14px;
    color: rgba(255, 255, 255, 0.8);
    background-color: transparent;
    border: none;
    padding: 0px;
    cursor: pointer;
    font-size: 11px;
}

.table3 div.orderButtons button.active,
.table3 div.orderButtons button:hover {
    color: rgba(255, 255, 255, 1);
}

.table3 div.orderButtons span.filter {
    width: 14px;
    color: rgba(255, 255, 255, 0.8);
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px 3px;
    cursor: pointer;
    font-size: 12px;
}

.table3 div.orderButtons span.summary {
    width: 14px;
    color: rgba(255, 255, 255, 0.8);
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px 3px;
    cursor: pointer;
    font-size: 12px;
}

.table3 div.orderButtons span.filter.active,
.table3 div.orderButtons span.filter:hover {
    color: rgba(255, 255, 255, 1);
}

.table3 .filterToolsEnvelope {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid #fff;
    background-color: #3e81c1;
    padding: 5px 5px;
    border-radius: 0px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.table3 .filterToolsEnvelope select {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

.table3 .filterToolsEnvelope input {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

.table3 .filterToolsEnvelope .item {
    padding: 5px 5px 0px;
    display: block;
    position: relative;
}

.table3 .filterToolsEnvelope .filterToolsButtons {
    display: block;
    padding: 5px;
    text-align: center;
}

.table3 .filterToolsEnvelope .filterToolsButtons .button {
    display: inline-block;
    width: 30%;
    margin: 0px 1%;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 3px;
    border-radius: 0px;
    color: #3e81c1;
    cursor: pointer;
}

.table3 .filterToolsEnvelope .filterToolsButtons .button:hover {
    background-color: rgba(255, 255, 255, 1);
}

.DebugTable .t3paging th {
    background-color: transparent;
}

.table3ImportBox.ajaxProcess,
.t3TableActionBar.ajaxProcess,
.DebugTable .t3paging.ajaxProcess,
.table3 .actionWindow.ajaxProcess .dataRowBox,
.table3 .ajaxProcess {
    background-color: #f59292;
}

.table3ImportBox.ajaxSuccess,
.t3TableActionBar.ajaxSuccess,
.DebugTable .t3paging.ajaxSuccess,
.table3 .actionWindow.ajaxSuccess .dataRowBox,
.table3 .ajaxSuccess {
    background-color: #7ecea0;
}

.table3 .t3type-number .item input.editable[type="text"] {
    width: 100px;
    text-align: right;
}

@keyframes inputInProcess {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.table3ImportBox.ajaxSuccess,
.table3ImportBox.ajaxProcess,
.table3 .checkCol.ajaxSuccess,
.table3 .checkCol.ajaxProcess,
.t3TableActionBar.ajaxSuccess,
.t3TableActionBar.ajaxProcess,
.DebugTable .t3paging.ajaxProcess,
.DebugTable .t3paging.ajaxSuccess,
.table3 .actionWindow.ajaxSuccess .dataRowBox,
.table3 .col.ajaxSuccess>.item,
.table3 .col.ajaxProcess>.item {
    animation: inputInProcess;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}

.table3 .t3Header .checkCol.c-0A {
    width: auto;
    min-width: 20px;
    display: inline-block;
    vertical-align: top;
    border: none;
}

.table3 .t3Header .checkCol.c-0A .header {
    display: block;
    line-height: 22px;
}

.table3 .t3Header .checkCol.c-0A .rowAction {
    vertical-align: top;
    display: block;
    line-height: 16px;
    margin-bottom: 5px;
}

.table3 .t3Body .checkCol.c-0A {
    width: auto;
    min-width: 20px;
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
    border-bottom: none;
}

.table3 .t3Body .checkCol.c-0A span.rowAction {
    position: relative;
    top: 2px;
    margin: 0px 3px;
    display: inline-block;
    height: 20px;
    width: 20px;
    text-align: center;
    vertical-align: middle;
    opacity: 0.6;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0px;
}

.table3 .t3Body .checkCol.c-0A span.rowAction:hover {
    opacity: 1;
}

.table3 .t3Body .checkCol.c-0A span.rowAction .fa-light {
    line-height: 20px;
    font-size: 16px;
}

.table3 .t3Header .checkCol.c-0 {
    width: 20px;
    min-width: 20px;
    display: inline-block;
    vertical-align: top;
    border: none;
}

.table3 .t3Header .checkCol.c-0 .header {
    display: block;
    line-height: 22px;
}

.table3 .t3Header .checkCol.c-0 .rowcheck {
    display: block;
    vertical-align: top;
    line-height: 16px;
    margin-bottom: 5px;
}

.table3 .t3Header .checkCol.c-0 .rowcheck.unchecked .uncheckAll {
    display: none;
}

.table3 .t3Header .checkCol.c-0 .rowcheck.checked .checkAll {
    display: none;
}

.table3 .t3Body .checkCol.c-0 {
    width: 20px;
    min-width: 20px;
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
    border-bottom: none;
}

.table3 .t3Body .checkCol.c-0 input {
    width: 20px;
    min-width: 20px;
    display: inline-block;
    vertical-align: top;
    height: 20px;
    line-height: 20px;
    position: relative;
    top: -2px;
}

.tablePaging.t3paging {
    display: block;
}

.tablePaging.t3paging tbody {
    display: block;
}

.tablePaging.t3paging tr {
    display: block;
}

.tablePaging.t3paging th {
    display: inline-block;
}

.tablePaging.t3paging th.rowActions button {
    padding: 3px 4px 3px 4px;
}

.tablePaging.t3paging th.rowActions button .fa-light {
    font-size: 20px;
}

.tablePaging.t3paging th.rowActions .checkedOnly {
    display: none;
}

.tablePaging.t3paging th.rowActions.checked .checkedOnly {
    display: inline-block;
}

.tablePaging.t3paging th.rowActions .selectedRows {
    display: inline-block;
    line-height: 16px;
    vertical-align: middle;
    margin-right: 10px;
}

.tablePaging.t3paging th.rowActions .selectedRows .numOfSelectedRows {
    margin-right: 5px;
}

.tablePaging.t3paging select[name="selectedPage"] {
    padding: 3px 0px 2px 5px;
    text-align: center;
    border-radius: 0px;
    margin: 0px 3px 0px 3px;
    box-shadow: none;
}

.tablePaging.t3paging select[name="pageSize"] {
    padding: 3px 0px 2px 5px;
    text-align: center;
    border-radius: 0px;
    margin: 0px 3px 0px 3px;
    box-shadow: none;
}

.tablePaging.t3paging button[name="reset"] {
    padding: 6px 7px 2px 7px;
    margin: 0px 0px 0px 0px;
}

.tablePaging.t3paging button[name="reset_to_default"] {
    padding: 6px 7px 2px 7px;
    margin: 0px 0px 0px 0px;
}

.tablePaging.t3paging button[name="reset"] .fa-stack {
    height: 22px;
    width: 22px;
    text-align: center;
}

.tablePaging.t3paging button[name="reset"] .fa-stack-2x {
    opacity: 0.5;
    font-size: 26px;
    line-height: 26px;
}

.tablePaging.t3paging button[name="reset"] .fa-stack-1x {
    font-size: 12px;
    line-height: 12px;
    padding-top: 9px;
}

.tablePaging.t3paging button[name="save"] {
    padding: 5px 7px 3px 7px;
    margin: 0px 0px 0px 0px;
}

.tablePaging.t3paging button[name="save"] .fa-light {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.8;
}

.tablePaging.t3paging button[name="reset"] .fa-light {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.8;
}

.tablePaging.t3paging button[name="reset_to_default"] .fa-light {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.8;
}

.tablePaging.t3paging button[name="exportExcel"] {
    padding: 5px 7px 3px 7px;
    margin: 0px 0px 0px 0px;
}

.tablePaging.t3paging button[name="exportExcel"] .fa-light {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.8;
}

.tablePaging.t3paging button[name="exportCsv"] {
    padding: 5px 7px 3px 7px;
    margin: 0px 0px 0px 0px;
}

.tablePaging.t3paging button[name="exportCsv"] .fa-light {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.8;
}

.tablePaging.t3paging button[name="exportImport"] {
    padding: 5px 7px 3px 7px;
    margin: 0px 0px 0px 0px;
}

.tablePaging.t3paging button[name="exportImport"] .fa-light {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.8;
}

.tablePaging.t3paging button[name="importExport"] {
    padding: 5px 7px 3px 7px;
    margin: 0px 0px 0px 0px;
}

.tablePaging.t3paging button[name="importExport"] .fa-light {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.8;
}

.table3 .actionWindow {
    display: block;
    position: absolute;
    top: 0px;
    left: 5px;
    max-width: calc(100% - 10px);
    height: calc(100% + 73px);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    z-index: 10;
    overflow: hidden auto;
    padding: 3px;
}

.table3 .actionWindow.t3Delete {
    width: calc(100% - 10px);
    height: calc(100% + 73px);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    z-index: 10;
    overflow: hidden auto;
    padding: 3px;
    text-align: center;
}

.table3 .actionWindow.t3Delete .error.bigMessage {
    width: calc(100% - 20px);
    padding: 50px 0px;
    height: 100%;
    background-color: #f89292;
    font-size: 18px;
    margin-top: 10px;
}

.table3 .actionWindow .numOfRows {
    padding: 0px 5px;
    font-weight: bold;
}

.table3 .actionWindow .rowActionLabel {
    background-color: #337abc;
    color: #fff;
    font-size: 16px;
    line-height: 16px;
    padding: 8px 0px;
    margin-bottom: 3px;
}

.table3 .actionWindow .rowActionLabel .closeButton {
    position: absolute;
    right: 0px;
    top: 0px;
}

.easy #wrapper-center .table3 .actionWindow .row.dataRow {
    padding: 0px 10px;
}

.table3 .actionWindow .row.dataRow .dataType {
    color: #929292;
    width: 200px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    padding: 3px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.table3 .actionWindow .row.dataRow .dataAction {
    width: 200px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    padding: 3px 0px;
}

.table3 .actionWindow .row.dataRow .header {
    width: 200px;
    display: inline-block;
    padding: 4px 10px;
    background-color: #929292;
    color: #fff;
    margin-right: 5px;
    text-align: center;
    font-weight: bold;
}

div.table3 .actionWindow div[class*="c-"] {
    min-width: 200px;
    text-align: left;
}

div.table3 .actionWindow div[class*="c-"] input {
    width: 100%;
}

div.table3 .actionWindow div[class*="c-"] input {
    width: 100%;
}

div.table3 .actionWindow div[class*="c-"] input[type="number"] {
    text-align: right;
}

div.table3 .actionWindow div[class*="c-"] input.editableFind {
    width: 49%;
    margin-right: 2%;
}

div.table3 .actionWindow div[class*="c-"] input.editableReplace {
    width: 49%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    margin-left: 20px;
}

div.table3 .actionWindow div.colrow[class*="c-"] {
    display: block;
    width: auto !important;
}

div.table3 .actionWindow div.actionButtons {
    padding: 5px 10px;
    background-color: #fefefe;
    box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.1);
}

div.table3 .actionWindow div.dataRowBox {
    height: calc(100% - 100px);
    overflow: auto;
}

:disabled {
    cursor: not-allowed !important;
    opacity: 0.8;
}

.table3 div.editable.hasOptions[class*="c-"] {
    background-color: rgba(239, 235, 199, 0.9);
}

.table3 div.ajaxProcess.editable.hasOptions[class*="c-"] {
    background-color: #f59292;
}

.table3 div.ajaxSuccess.editable.hasOptions[class*="c-"] {
    background-color: #7ecea0;
}

.table3 .col.hasOptions .fa-caret-down {
    position: absolute;
    right: 0px;
    top: 3px;
    font-size: 20px;
    opacity: 0.5;
    display: inline-block;
    height: 16px;
    width: 20px;
    text-align: center;
    cursor: pointer;
}

.table3 .col.hasOptions .fa-caret-down:hover {
    opacity: 1;
}


.table3 span.select2-selection.select2-selection--single,
.table3 span.select2.select2-container.select2-container--default,
.table3 span.select2.select2-container.select2-container--default.select2-container--focus {
    z-index: 100;
    right: 18px;
    top: -3px;
}

.table3 .filterToolsEnvelope span.select2-selection.select2-selection--single,
.table3 .filterToolsEnvelope span.select2.select2-container.select2-container--default,
.table3 .filterToolsEnvelope span.select2.select2-container.select2-container--default.select2-container--focus {
    right: 0px;
}

.table3 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 20px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}

.table3 .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 22px;
}

.table3 .select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 22px;
    user-select: none;
    -webkit-user-select: none;
}

ul.select2-results__options li.select2-results__option {
    font-size: 12px;
    line-height: 14px;
    padding: 4px 6px;
}

.table3 .importExcelToTable3 {
    position: absolute;
    left: 8px;
    top: 20px;
    width: calc(100% - 20px);
    background-color: #f3f3f3;
    z-index: 100;
    height: 100%;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.importExcelToTable3 .title {
    color: #fff;
    background-color: #3e81c1;
    text-align: center;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
}

.importExcelToTable3 .title label {
    color: #fff;
    padding: 4px 20px;
    margin: 0px;
    text-transform: uppercase;
}

.importExcelToTable3 .title .close {
    color: #fff;
    padding: 4px 6px;
    margin: 0px;
    opacity: 0.8;
    font-size: 16px;
    text-shadow: none;
}

.importExcelToTable3 .table3ImportStep1 {
    padding: 10px 20px;
}

.importExcelToTable3 .table3ImportStep2 {
    padding: 10px 20px;
}

.importExcelToTable3 .table3ImportParams {
    padding: 10px 20px;
}

.importExcelToTable3 .table3ImportParams label {
    display: block;
    margin-top: 20px;
}

.importExcelToTable3 .table3ImportStep2 label {
    display: block;
    padding: 0px 0px 0px 5px;
    margin: 0px;
    line-height: 16px;
    opacity: 0.6;
}

.importExcelToTable3 .table3ImportStep2 .selectedFile {
    display: block;
    text-align: left;
}

.importExcelToTable3 .table3ImportStep3 {
    padding: 10px 20px;
}

.importExcelToTable3 .importOverviewTable3 {
    padding: 10px 20px 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    line-height: 14px;
    font-size: 12px;
}

.importExcelToTable3 .importDetailsTable3 {
    padding: 10px 20px 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    line-height: 14px;
    font-size: 12px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 5px;
}

.importExcelToTable3 .table3ImportBox {
    height: calc(100% - 30px);
    overflow-y: auto;
}


.importReportTable3>label {
    opacity: 0.6;
    padding-left: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
}

.importReportTable3 label.rowLabel {
    font-weight: normal;
    background-color: #a1c6e4;
    color: #fff;
    padding: 3px 10px;
    width: 100%;
}

.importReportTable3 hr {
    margin: 10px 0px;
}

.t3TableActionBar {
    display: block;
    background-color: rgb(62, 129, 193);
    padding: 3px 3px;
    color: rgba(255, 255, 255, 1);
    border-radius: 0px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    margin-left: 15px;
}

.t3TableActionTitle {
    margin: 0px;
    padding: 0px 3px 3px;
    line-height: 12px;
    font-size: 12px;
    text-transform: uppercase;
    display: none;
}

button.t3TableAction.btn.btn-sm label {
    opacity: 0.6;
    margin: 0px 5px 0px 10px;
    cursor: pointer;
}

button.t3TableAction.btn.btn-sm .fa-light {
    opacity: 0.6;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    top: 2px;
}

button.t3TableAction.btn.btn-sm .fa-light.fasub {
    opacity: 0.6;
    cursor: pointer;
    font-size: 10px;
    position: relative;
    top: -2px;
    left: 5px;
    vertical-align: top;
}

button.t3TableAction.btn.btn-sm:hover label {
    opacity: 1;
}

button.t3TableAction.btn.btn-sm:hover .fa-light {
    opacity: 1;
}

.easy #wrapper-center .table3 .t3Special.actionWindow {
    height: calc(100% + 50px);
}

.easy #wrapper-center .table3 .t3Special.actionWindow .emptyRow {
    height: calc(100% - 50px);
}

.easy #wrapper-center .table3 .t3Special.actionWindow .emptyRow .dataRowBox {
    padding: 10px 50px;
}

.easy #wrapper-center .table3 .t3Special.actionWindow .emptyRow .dataRowBox input.editable {
    width: 300px;
    display: block;
}

.easy #wrapper-center .table3 .t3Special.actionWindow .emptyRow .dataRowBox select.editable {
    width: 300px;
    display: block;
    border-radius: 0px;
    box-shadow: none;
}

.easy #wrapper-center .table3 .t3Special.actionWindow .emptyRow .dataRowBox input.editable[type="checkbox"] {
    display: inline-block;
    width: 40px;
    height: 20px;
    vertical-align: text-bottom;
}

.table3LongTextWindow {
    position: absolute;
    top: 80px;
    left: 10%;
    width: 80%;
    display: block;
    background-color: #fff;
    z-index: 100;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

span.table3LongTextValue {
    white-space: pre-wrap;
}

.table3longTextValueBox {
    max-height: calc(100dvh - 300px);
    overflow-y: auto;
    padding: 20px;
}

.table3LongTextTitle {
    background-color: #3e81c1;
    color: #fff;
    text-align: center;
    padding: 0px;
}

.table3LongTextTitle .close {
    float: none;
    color: #fff;
    text-shadow: none;
    opacity: 0.7;
    right: 6px;
    top: 4px;
    position: absolute;
}

.table3LongTextTitle .save {
    float: none;
    color: #fff;
    text-shadow: none;
    opacity: 0.7;
    right: 30px;
    top: 4px;
    position: absolute;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}


.table3 span.minimizedValue {
    cursor: zoom-in;
}

@keyframes inputInProcess {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.table3 .rowAction.ajaxSuccess,
.table3 .rowAction.ajaxProcess,
.table3ImportBox.ajaxSuccess,
.table3ImportBox.ajaxProcess,
.table3 .checkCol.ajaxSuccess,
.table3 .checkCol.ajaxProcess,
.t3TableActionBar.ajaxSuccess,
.t3TableActionBar.ajaxProcess,
.DebugTable .t3paging.ajaxProcess,
.DebugTable .t3paging.ajaxSuccess,
.table3 .actionWindow.ajaxSuccess .dataRowBox,
.table3 .col.ajaxSuccess>.item,
.table3 .col.ajaxProcess>.item {
    animation: inputInProcess;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}

span.t3TitleText {
    display: inline-block;
    padding: 0 10px 0 1px;
    color: #3e81c1;
    font-weight: bold;
    font-size: 14px;
}

span.t3UserSettingsBox {
    display: inline-block;
    padding: 0 10px;
    border-right: 1px solid #3e81c1;
}

span.t3UserSettingsBox:last-child {
    border-right: none;
}

span.t3UserSettingsBox .fa-light {
    padding: 0px 5px;
    font-size: 16px;
    color: #3e81c1;
    cursor: pointer;
    opacity: 0.6;
}

span.t3UserSettingsBox .fa:hover {
    opacity: 1;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable {
    padding-left: 0px;
    padding-top: 10px;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li {
    margin: 3px 0px;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li.fixed-column {
    background: #17a2b8;
    text-align: center;
}

.table3 .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: none;
    background-color: #337abc;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 0px;
    padding: 0px 5px;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li .columnVisibility {
    cursor: pointer;
    padding: 0px 10px;
    font-size: 14px;
    line-height: 16px;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li.ui-state-disabled .columnVisibility {
    cursor: default;
    padding: 0px 10px;
    font-size: 14px;
    line-height: 16px;
    opacity: 0;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li.columnVisible .columnVisibility .fa-eye-slash {
    display: none
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li.columnHidden .columnVisibility .fa-eye {
    display: none;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li.columnHidden .columnName {
    opacity: 0.6;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li.columnHidden .columnDesc {
    opacity: 0.6;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li .columnName {
    opacity: 1;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
}

.table3 .t3Special.actionWindow ul.columnsAdjustable.ui-sortable li .columnDesc {
    opacity: 1;
    font-size: 12px;
    line-height: 16px;
    font-weight: normal;
    padding: 0px 10px;
}

.table3 .actionWindow .dataRowBox span.select2-selection.select2-selection--single,
.table3 .actionWindow .dataRowBox span.select2.select2-container.select2-container--default {
    z-index: 100;
    right: 0px;
    top: 0px;
}

.table3 .actionWindow .dataRowBox span.select2.select2-container.select2-container--default.select2-container--focus {
    z-index: 100;
    right: 0px;
    top: 0px;
}

.table3 .actionWindow .dataRowBox .select2-selection {
    z-index: 100;
    right: 0px;
    top: 0px;
}

.table3 .actionWindow .dataRowBox :disabled {
    opacity: 0;
}

.table3 .actionWindow .dataRowBox .select2-container--disabled {
    opacity: 0;
}

.table3 .actionWindow .dataRowBox .select2-container--default .select2-selection--single {
    border: 1px solid #dedede;
}

div.table3 .actionWindow div.colrow.disabledColumn[class*="c-"] {
    display: none;
}

a.btn.btn-danger {
    color: #fff;
}

div.t3WinTable {
    background-color: white;
    border: 1px solid #1466b4;
    box-shadow: 5px 5px 10px rgb(100, 100, 100);
    z-index: 100;
    position: absolute;
    left: 60px;
    top: 60px;
    width: calc(80dvw - 150px);
    min-width: 600px;
    padding: 0px 5px 0px 0px;
    overflow-x: scroll;
    max-height: 80dvh;
    scrollbar-width: none;
}

.t3WinTableTitle {
    background-color: #3e81c1;
    padding: 5px 20px;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    font-weight: bold;
    cursor: move;
}

.t3WinTableTitle .closeButton {
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

div.t3WinTable .gridtitle {
    display: none;
}

.easy div.t3WinTable>form {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.easy div.t3WinTable .DebugTable {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.easy div.t3WinTable table.tablePaging.t3paging {
    margin-bottom: 0px;
}

.col.t3type-time.editable input.editable {
    padding: 0px 10px;
    margin: 0px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    line-height: 22px;
    border-radius: 0px;
}

.timelineTableDataEnvelope {
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overflow-x: auto;
}

.timelineTableDataEnvelope {
    position: relative;
}


.timelineTableTimelineEnvelope {
    position: absolute;
    top: 0;
    left: 15px;
    background-color: #ffffff;
    z-index: 10;
    width: calc(100% - 15px);
    height: calc(100% - 65px);
    overflow: auto;
}


.timelineTableControl {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    margin: 0px 5px;
}

.day {
    width: 50px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    display: inline-block;
    position: relative;
    text-align: center;
}

.month {
    display: inline-block;
    padding-top: 20px;
    position: relative;
}

span.monthName {
    display: block;
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    background-color: #fff;
}

.monthLine .day.weekDay1 {
    background-color: #ffffff;
}

.monthLine .day.weekDay2 {
    background-color: #ffffff;
}

.monthLine .day.weekDay3 {
    background-color: #ffffff;
}

.monthLine .day.weekDay4 {
    background-color: #ffffff;
}

.monthLine .day.weekDay5 {
    background-color: #ffffff;
}

.monthLine .day.weekDay6 {
    background-color: #fafafa;
}

.monthLine .day.weekDay7 {
    background-color: #fafafa;
}

.monthDataLine .day.weekDay1 {
    background-color: #ffffff;
}

.monthDataLine .day.weekDay2 {
    background-color: #ffffff;
}

.monthDataLine .day.weekDay3 {
    background-color: #ffffff;
}

.monthDataLine .day.weekDay4 {
    background-color: #ffffff;
}

.monthDataLine .day.weekDay5 {
    background-color: #ffffff;
}

.monthDataLine .day.weekDay6 {
    background-color: #fafafa;
}

.monthDataLine .day.weekDay7 {
    background-color: #fafafa;
}

.monthDataLine {
    height: calc(100dvh - 50px);
    white-space: nowrap;
    text-wrap: nowrap;
    position: relative;
}

.monthLine {
    white-space: nowrap;
    text-wrap: nowrap;
    background-color: #fff;
    position: sticky;
    top: 0px;
    z-index: 10;
}

.monthDataLine .day {
    height: 100%;
}

.timelineEventEnvelope {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    padding: 3px 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2), inset -3px 0px 2px rgba(0, 0, 0, 0.05);
    font-size: 12px;
    line-height: 16px;
}

.timelineEventSubject {
    font-weight: bold;
    padding-left: 5px;
}

.timelineEventDescription .timelineValue {
    margin-right: 10px;
    margin-top: 5px;
    display: inline-block;
    padding-left: 5px;
}

.timelineEventEnvelope {
    cursor: pointer;
}

.timelineEventEnvelope.active {
    width: auto !important;
    z-index: 100;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.timelineTableTitle {
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
    width: 100%;
    padding-right: 60px;
    padding-left: 40px;
}

.timelineTableControl.windowControl {
    display: inline-block;
    position: absolute;
    right: 0px;
    padding: 5px 5px;
    border: none;
    margin: 0px 5px;
}

.windowControl .timelineTableControl {
    padding: 0px 5px;
    border: none;
    margin: 0;
    cursor: pointer;
}

.timelineTableControl.timelineControl {
    display: inline-block;
    width: calc(100% - 20px);
    padding: 0px;
    margin: 5px 0px;
    border: none;
    text-align: center;
}

.timelineTableControl.timelineControl .timelineTableControl {
    border: none;
    background-color: rgba(0, 0, 0, 0.025);
    width: calc(50% - 20px);
    padding: 0px;
    border-radius: 0px;
    cursor: pointer;
}

.timelineTableControl.timelineControl .timelineTableControl:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.timelineTableTimelineEnvelope.minimized {
    height: 30px;
    overflow: hidden;
    width: 100px;
    right: 4px;
    left: auto;
    top: 13px;
    border: 1px dotted rgba(0, 0, 0, 0.2);
}

.timelineTableTimelineEnvelope.minimized .timelineTableTitle {
    display: none;
}

.timelineTableTimelineEnvelope.minimized .timelineControl {
    display: none;
}

.timelineTableTimelineEnvelope.minimized .timelineTableDataEnvelope {
    display: none;
}

.timelineTableBar>.fa-light {
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 5px;
    font-size: 20px;
    padding: 0px 5px;
}

span.timelineLabel {
    display: block;
    text-transform: uppercase;
    font-size: 8px;
    line-height: 8px;
    margin-left: -5px;
}

span.timelineValue.eventDateRange {
    display: block;
    line-height: 8px;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: normal;
    margin-left: -5px;
}

.timelineEventEnvelope.active .timelineEventDescription .timelineValue {
    display: block;
}

.timelineTableScreenEnvelope {
    height: calc(100dvh - 90px);
}

.timelineTableTimelineInnerEnvelope {
    height: 100%;
}

#wrapper.easy div.timelineTableTimelineEnvelope div.timelineTableDataEnvelope {
    height: calc(100% - 60px);
    max-height: calc(100% - 50px);
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.timelineEventActions .rowAction {
    padding: 10px 5px 0 0;
    font-size: 16px;
    color: inherit !important;
}

.timelineEventActions {
    line-height: 20px;
}

body .easy .btn {
    border-radius: 0px;
}

.tablePaging.t3paging .btn-default:hover,
.tablePaging.t3paging .btn-default:focus,
.tablePaging.t3paging .btn-default:active,
.tablePaging.t3paging .btn-default.active,
.tablePaging.t3paging .open>.dropdown-toggle.btn-default {
    color: #333;
    background-color: #ffffff;
    border-color: #ffffff;
}

#wrapper.easy .table3 .filterToolsEnvelope .filterToolsButtons .button:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #333;
}

.t3Body .odd .t3FixedCols,
.t3Body .odd .t3FlexiCols {
    background-color: #fafafa;
}

.t3Body .even .t3FixedCols,
.t3Body .even .t3FlexiCols {
    background-color: #ffffff;
}











/* DRAGGABLE */

.draggableTableDataEnvelope {
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overflow-x: auto;
}

.draggableTableDataEnvelope {
    position: relative;
}


.draggableTableDraggableEnvelope {
    position: absolute;
    top: 0;
    left: 15px;
    background-color: #ffffff;
    z-index: 10;
    width: calc(100% - 15px);
    height: calc(100% - 65px);
    overflow: auto;
}


.draggableTableControl {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    margin: 0px 5px;
}

.draggableEventEnvelope {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    padding: 3px 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2), inset -3px 0px 2px rgba(0, 0, 0, 0.05);
    font-size: 12px;
    line-height: 16px;
}

.draggableEventSubject {
    font-weight: bold;
    padding-left: 5px;
}

.draggableEventDescription .draggableValue {
    margin-right: 10px;
    margin-top: 5px;
    display: inline-block;
    padding-left: 5px;
}

.draggableEventEnvelope {
    cursor: pointer;
}

.draggableEventEnvelope.active {
    width: auto !important;
    z-index: 100;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.draggableTableTitle {
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
    width: 100%;
    padding-right: 60px;
    padding-left: 40px;
}

.draggableTableControl.windowControl {
    display: inline-block;
    position: absolute;
    right: 0px;
    padding: 5px 5px;
    border: none;
    margin: 0px 5px;
}

.windowControl .draggableTableControl {
    padding: 0px 5px;
    border: none;
    margin: 0;
    cursor: pointer;
}

.draggableTableControl.draggableControl {
    display: inline-block;
    width: calc(100% - 20px);
    padding: 0px;
    margin: 5px 0px;
    border: none;
    text-align: center;
}

.draggableTableControl.draggableControl .draggableTableControl {
    border: none;
    background-color: rgba(0, 0, 0, 0.025);
    width: calc(50% - 20px);
    padding: 0px;
    border-radius: 0px;
    cursor: pointer;
}

.draggableTableControl.draggableControl .draggableTableControl:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.draggableTableDraggableEnvelope.minimized {
    height: 30px;
    overflow: hidden;
    width: 100px;
    right: 0px;
    left: auto;
    top: -4px;
    border: 1px dotted rgba(0, 0, 0, 0.2);
}

.draggableTableDraggableEnvelope.minimized .draggableTableTitle {
    display: none;
}

.draggableTableDraggableEnvelope.minimized .draggableControl {
    display: none;
}

.draggableTableDraggableEnvelope.minimized .draggableTableDataEnvelope {
    display: none;
}

.draggableTableBar>.fa-light {
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 5px;
    font-size: 20px;
    padding: 0px 5px;
}

span.draggableLabel {
    display: block;
    text-transform: uppercase;
    font-size: 8px;
    line-height: 8px;
    margin-left: -5px;
}

span.draggableValue.eventDateRange {
    display: block;
    line-height: 8px;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: normal;
    margin-left: -5px;
}

.draggableEventEnvelope.active .draggableEventDescription .draggableValue {
    display: block;
}

.draggableTableScreenEnvelope {
    height: calc(100dvh - 90px);
}

.draggableTableDraggableInnerEnvelope {
    height: 100%;
}

#wrapper.easy div.draggableTableDraggableEnvelope div.draggableTableDataEnvelope {
    height: calc(100% - 60px);
    max-height: calc(100% - 50px);
    scrollbar-width: auto;
    scrollbar-color: auto;
}


.isMobile .DebugTable .table3 {}

.isMobile .easy div.DebugTable {
    /* margin: 0px 0px 0px 15px; */
    width: auto;
    /* border: none; */
    /* border-radius: 0; */
    /* padding: 0px; */
    /* overflow-x: hidden; */
    /* overflow-y: hidden; */
    /* display: inline-block; */
}

.isMobile .t3Slider {
    display: none;
}

.table3 div.ajaxFormPictureFrame {
    display: inline-block;
    max-width: calc(100dvw - 100px);
    max-height: calc(100dvh - 200px);
    top: 5px;
    left: 5px;
    z-index: 10000;
    position: absolute;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: auto;
    box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
}

/* ===== Column resize handle ===== */
.table3 .t3Header div[class*="c-"] .t3ColResizeHandle {
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    user-select: none;
}

.table3 .t3Header div[class*="c-"] .t3ColResizeHandle:hover,
.table3 .t3Header div[class*="c-"] .t3ColResizeHandle.t3ResizeDragging {
    background: rgba(255, 255, 255, 0.35);
}

/* ===== Cell text truncation with ellipsis (replaces legacy Table2 long-text limit) ===== */
.table3 .t3Body div[class*="c-"]:not(.checkCol) .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    vertical-align: middle;
}

/* --- T3 preset-select toggle icon (conditions / filters / columns) --------- */
/*
 * Controls the compact icon-based preset-select pattern used in the Table3
 * control-panel header (buildTableTitleRow). Each group (conditions, filters,
 * columns) shows:
 *   • .t3SelectIconActive  — fa-list icon; click calls t3TogglePresetSelect()
 *   • .t3SelectIconEmpty   — same icon but muted; no interaction (no presets)
 *
 * The actual <select class="selectt2 t3PresetSelect"> is hidden by default and
 * toggled visible by t3TogglePresetSelect() / t3PresetSelectChosen() in
 * scripts.table3.js.
 */

.t3PresetSelectWrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Floats below the icon when made visible by JS */
.t3PresetSelectWrapper select.t3PresetSelect {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    min-width: 200px;
    max-width: 340px;
    margin-top: 4px;
    border-radius: 4px;
    padding: 2px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Empty-state icon: visually muted, no pointer interaction */
span.t3UserSettingsBox .t3SelectIconEmpty {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* ---- Condition Manager: Predefined styles grid ---- */
.t3PredefinedStyleGrid {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
}
.t3PredefinedStyleChip {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.10s;
}
.t3PredefinedStyleChip:hover {
    border-color: #86b7fe;
    box-shadow: 0 0 0 2px rgba(13,110,253,0.15);
}
.t3PredefinedStyleChip.active {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,0.35);
    background: #f0f7ff;
    transform: scale(1.08);
}
.t3PredefinedStyleChip.active::after {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: #0d6efd;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
}
.t3PredefinedStyleSwatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 26px;
    border: 1px solid #adb5bd;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.7rem;
}
/* ---------------------------------------------------- */

/* --------------------------------------------------------------------------- */

/* T3 Edit Form Modal — generic ajaxForm overlay for row editing */
.t3EditFormModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 30px;
    overflow-y: auto;
}

.t3EditFormModal.hidden {
    display: none;
}

.t3EditFormModal .modalFormContent {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 30px 20px 20px 20px;
}

.t3EditFormModal .modalFormClose {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    z-index: 10;
    line-height: 1;
}

.t3EditFormModal .modalFormClose:hover {
    color: #000;
}

.t3EditFormModal .modalFormBody {
    padding: 10px 0;
}

.t3EditFormModal .t3EditFormLoading,
.t3EditFormModal .t3EditFormError {
    text-align: center;
    padding: 40px;
    font-size: 16px;
    color: #666;
}

.t3EditFormModal .t3EditFormError {
    color: #c00;
}
/* =====================================================================
   MANAGER OVERLAY SHARED CLASSES (Column, Filter, Condition)
   Replaces inline styles in JS with themeable CSS classes.
   ===================================================================== */

/* Full-screen backdrop behind all manager overlays */
.t3OverlayBackdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: inherit;
}

/* White card panel inside the backdrop */
.t3OverlayPanel {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Overlay main header (h3) */
.t3OverlayHeader {
    margin-top: 0;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    font-size: 1.25rem;
}

/* Overlay section sub-header (h5) */
.t3OverlaySectionHeader {
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
    font-size: 1rem;
    margin: 0;
}

/* Helper/hint text below the header */
.t3OverlayHint {
    font-size: 0.82rem;
    color: #6c757d;
    margin-bottom: 12px;
}

/* Footer bar with action buttons */
.t3OverlayFooter {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
}

/* Footer button group (right side) */
.t3OverlayFooterGroup {
    display: flex;
    gap: 10px;
}

/* Close / cancel button (muted gray) */
.t3OverlayBtnClose {
    padding: 8px 16px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Apply / confirm button (success green) */
.t3OverlayBtnApply {
    padding: 8px 16px;
    background: #198754;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

/* Add / insert button (primary blue) */
.t3OverlayBtnAdd {
    padding: 8px 16px;
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Danger / clear-all button (red) */
.t3OverlayBtnDanger {
    padding: 3px 10px;
    font-size: 0.8rem;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Small action button (e.g., add-rule) */
.t3OverlayBtnSmall {
    padding: 4px 10px;
    font-size: 0.82rem;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 14px;
}

/* Form controls inside overlays */
.t3OverlayFormInput {
    padding: 6px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.t3OverlayFormSelect {
    padding: 5px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Action bar row (used in filter/condition managers) */
.t3OverlayActionBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Scrollable list container inside overlay */
.t3OverlayScrollList {
    margin-bottom: 20px;
    max-height: 220px;
    overflow-y: auto;
}

/* Form row with gap */
.t3OverlayFormRow {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.t3OverlayFormRowCompact {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

/* Form label */
.t3OverlayLabel {
    font-size: 0.85rem;
    white-space: nowrap;
}

.t3OverlayLabelBlock {
    font-size: 0.85rem;
    display: block;
    margin-bottom: 4px;
}

/* Color input (for condition custom colors) */
.t3OverlayColorInput {
    width: 36px;
    height: 28px;
    padding: 2px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
}

/* Muted hint text */
.t3OverlayMuted {
    color: #6c757d;
    font-size: 0.8rem;
}
/* --------------------------------------------------------------------------- */

/* =====================================================================
   MOBILE CARD VIEW  (.t3MobileCardView toggled on .table3)
   Activated / deactivated by t3ToggleMobileView() in scripts.table3.js.
   State is persisted in localStorage and restored by t3MobileViewRestore()
   which is called from t3ReinitTable() after every AJAX-driven table reload.
   ===================================================================== */

/* Hide the column header row and the horizontal scroll slider —
   column labels are injected inline into every body cell instead. */
.table3.t3MobileCardView .t3Header,
.table3.t3MobileCardView .t3Slider {
    display: none;
}

/* Release the body from its fixed-height scroll container. */
.table3.t3MobileCardView .t3Body {
    overflow-x: visible;
    overflow-y: visible;
    height: auto !important;
    max-height: none !important;
}

/* Each data row becomes a standalone card. */
.table3.t3MobileCardView .t3Body div[class*="r-"] {
    display: block;
    white-space: normal;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    margin: 8px 4px;
    padding: 6px 4px;
}

/* FixedCols: flex container, always visible in card view. */
.table3.t3MobileCardView .t3Body .t3FixedCols {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    white-space: normal;
    background-color: transparent;
    align-items: flex-start;
    gap: 4px 8px;
}

/* FlexiCols: hidden by default; revealed when the row carries .t3RowExpanded. */
.table3.t3MobileCardView .t3Body .t3FlexiCols {
    display: none;
}

.table3.t3MobileCardView .t3Body div[class*="r-"].t3RowExpanded .t3FlexiCols {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    white-space: normal;
    background-color: transparent;
    align-items: flex-start;
    gap: 4px 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 4px;
    margin-top: 4px;
}

/* Every data cell: an inline flex element — label stacked above value,
   width is automatic so short columns stay compact and long ones expand. */
.table3.t3MobileCardView .t3Body div[class*="c-"] {
    display: inline-flex;
    flex-direction: column;
    width: auto !important;
    min-width: 80px !important;
    max-width: 240px !important;
    align-items: flex-start;
    border-right: none;
    border-bottom: none;
    padding: 4px 6px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
}

/* Injected column label (<span class="t3ColLabel">) — sits above the value. */
.table3.t3MobileCardView .t3Body .t3ColLabel {
    font-weight: 600;
    font-size: 10px;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}

/* Value span — wrap long content, do not truncate. */
.table3.t3MobileCardView .t3Body div[class*="c-"]>.item {
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
}

/* Checkbox and row-action columns: keep side by side at the top of the card,
   no label is injected into these special columns. */
.table3.t3MobileCardView .t3Body .checkCol.c-0,
.table3.t3MobileCardView .t3Body .checkCol.c-0A {
    display: inline-flex;
    flex-direction: row;
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    border: none;
    background-color: transparent;
    padding: 4px 6px;
    align-items: center;
    align-self: center;
}

/* Toggle icon active state — mirrors the .active pattern used for filter icons. */
.t3MobileViewToggle.t3MobileViewToggleActive {
    color: #f39c12;
}

/* Per-row expand/collapse toggle button injected at the end of .t3FixedCols. */
.table3.t3MobileCardView .t3Body .t3RowExpandToggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.45;
    font-size: 11px;
    align-self: center;
    border-radius: 4px;
    transition: opacity 0.15s;
}

.table3.t3MobileCardView .t3Body .t3RowExpandToggle:hover {
    opacity: 1;
}

/* Rotate the chevron when the row is expanded. */
.table3.t3MobileCardView .t3Body div[class*="r-"].t3RowExpanded .t3RowExpandToggle i {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.table3.t3MobileCardView .t3Body div[class*="r-"]:not(.t3RowExpanded) .t3RowExpandToggle i {
    transition: transform 0.2s ease;
}

/* Shared slot: recalculate icon visible in normal view, global expand icon in card view.
   Both live in the same .t3UserSettingsBox — CSS shows exactly one at a time. */
.t3GlobalExpandToggle {
    display: none;
}

.DebugTable:has(.table3.t3MobileCardView) .t3RecalcOrExpand {
    display: none;
}

.DebugTable:has(.table3.t3MobileCardView) .t3GlobalExpandToggle {
    display: inline;
}

/* Active state when all rows are expanded. */
.t3GlobalExpandToggle.t3AllExpanded {
    color: #f39c12;
}

/* Pagination table: full-width when card view is active. */
.DebugTable:has(.table3.t3MobileCardView) .tablePaging.t3paging {
    width: 100%;
    box-sizing: border-box;
}

/* Mobile scroll-navigation buttons — fixed at bottom-right */
.t3MobileScrollBtns {
    position: fixed;
    bottom: 16px;
    right: 40px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.t3ScrollBtn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: rgba(60, 60, 60, 0.75);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.15s;
}

.t3ScrollBtn:hover {
    background-color: rgba(30, 30, 30, 0.85);
}

/* --------------------------------------------------------------------------- */

/* =====================================================================
   COLUMN MANAGER OVERLAY  (#t3ColumnManagerOverlay)
   Uses the same backdrop + panel pattern as the filter and condition
   managers. The inner column list reuses the existing .columnsAdjustable
   class names (columnVisible, columnHidden, fixed-column, etc.) but is
   scoped here to avoid collisions with the legacy .t3Special.actionWindow.
   ===================================================================== */

#t3ColumnManagerOverlay ul.columnsAdjustable {
    list-style: none;
    padding: 0;
    margin: 0;
}

#t3ColumnManagerOverlay ul.columnsAdjustable li {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    margin: 3px 0;
    border-radius: 4px;
    background-color: #337abc;
    color: #fff;
    cursor: grab;
    font-size: 12px;
    line-height: 1.6;
    user-select: none;
}

#t3ColumnManagerOverlay ul.columnsAdjustable li:active {
    cursor: grabbing;
}

/* Fixed-columns separator */
#t3ColumnManagerOverlay ul.columnsAdjustable li.fixed-column {
    background-color: #17a2b8;
    justify-content: center;
    cursor: ns-resize;
    font-style: italic;
    opacity: 0.9;
}

/* Editable columns that cannot be reordered */
#t3ColumnManagerOverlay ul.columnsAdjustable li.ui-state-disabled {
    cursor: default;
    opacity: 0.55;
}

/* Eye / eye-slash visibility toggle */
#t3ColumnManagerOverlay ul.columnsAdjustable li .columnVisibility {
    cursor: pointer;
    padding: 0 10px 0 2px;
    font-size: 14px;
    flex-shrink: 0;
}

#t3ColumnManagerOverlay ul.columnsAdjustable li.ui-state-disabled .columnVisibility {
    cursor: default;
    opacity: 0;
}

/* Show only the relevant eye icon based on current visibility state */
#t3ColumnManagerOverlay ul.columnsAdjustable li.columnVisible .columnVisibility .fa-eye-slash {
    display: none;
}

#t3ColumnManagerOverlay ul.columnsAdjustable li.columnHidden .columnVisibility .fa-eye {
    display: none;
}

/* Column name */
#t3ColumnManagerOverlay ul.columnsAdjustable li .columnName {
    font-weight: bold;
    flex: 1;
}

/* Hidden column: dim and strike through the name to signal it is off */
#t3ColumnManagerOverlay ul.columnsAdjustable li.columnHidden .columnName {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Optional description / comment (e.g. "editable — not adjustable") */
#t3ColumnManagerOverlay ul.columnsAdjustable li .columnDesc {
    font-size: 11px;
    font-weight: normal;
    opacity: 0.75;
    padding-left: 8px;
}

/* --------------------------------------------------------------------------- */
/* CHILD ROWS (t3WinTableMobile — mobile card view inline sub-table)            */
/* --------------------------------------------------------------------------- */

/* Container wrapping all child rows injected after a parent row */
.t3ChildRows {
    margin: 0 0 8px 20px;
    border-left: 3px solid #ff7a41;
    padding-left: 6px;
}

/* Individual child row — follows the mobile card pattern with fixed + flexi cols */
.t3ChildRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 30px);
    margin: 2px 0;
    padding: 4px 6px;
    background-color: #f8f9fa;
    border-radius: 3px;
    border-bottom: 1px solid #e9ecef;
    font-size: 13px;
    position: relative;
}

.t3ChildRow.even {
    background-color: #fff;
}

.t3ChildRow.odd {
    background-color: #f8f9fa;
}

/* Fixed columns inside a child row — always visible */
.t3ChildRow .t3FixedCols {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
    flex-shrink: 0;
}

/* Flexi columns inside a child row — hidden until expanded */
.t3ChildRow .t3FlexiCols {
    display: none;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    margin-left: 8px;
}

.t3ChildRow.t3RowExpanded .t3FlexiCols {
    display: flex;
}

/* Column label and value inside child rows */
.t3ChildRow .t3ColLabel {
    font-size: 10px;
    color: #6c757d;
    text-transform: uppercase;
    display: block;
    line-height: 1.2;
}

.t3ChildRow .t3ColValue {
    font-size: 13px;
    display: block;
    line-height: 1.4;
}

/* Action buttons inside child rows */
.t3ChildRow .checkCol {
    display: flex;
    gap: 4px;
    margin-bottom: 2px;
}

.t3ChildRow .rowAction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
}

.t3ChildRow .rowAction i {
    font-size: 13px;
}

/* Expand/collapse toggle for child rows — flows naturally at row start */
.t3ChildRow .t3RowExpandToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    cursor: pointer;
    border-radius: 3px;
    background-color: #e9ecef;
    font-size: 11px;
    color: #495057;
    align-self: center;
    flex-shrink: 0;
    margin-right: 6px;
}

.t3ChildRow.t3RowExpanded .t3RowExpandToggle i {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------- */