.clickable,
[onclick] { cursor: pointer; user-select: none; }
[draggable="true"] { cursor:all-scroll; user-select: none; }

.pan .table { margin: 0; width: 100%; border-spacing: 0; white-space: normal; word-break: break-word; }
.pan .table th { position: relative; padding: 0.75rem .5rem .25rem; border-top: 1px solid #dee2e6; text-align: left; vertical-align: top; font-weight: 600; position: relative; }
.pan .table th div.colsearch { padding: 0; font-size: 0; }
.pan .table th div.colsearch input { width: 100%; height: 0; margin: 0 .15rem; padding: 0 .5rem; border: 0 solid rgba(0, 0, 0, 0.1); transition: height 100ms, padding 100ms, border 100ms; transition-timing-function: ease-in; transition-delay: 600ms; }
.pan .table thead .col-resizer { border-right: 1px transparent dashed; position: absolute; top: 0; right: 0; width: 3px; cursor: col-resize; user-select: none; height: 100%; transition: border-right 0.3s; }
.pan .table thead:hover :not(:last-child) .col-resizer { border-right: 1px rgba(128, 128, 128, 0.5) dashed; }
.pan .table thead .col-resizer:hover {  }
.pan .table thead .col-resizer.active {  }
.pan .table tr:not([data-searchable="0"]) th:hover div.colsearch input,
.pan .table tr:not([data-searchable="0"]) th div.colsearch input:not(:placeholder-shown),
.pan .table tr:not([data-searchable="0"]) th div.colsearch input:focus { display: block; padding: .15rem .5rem; border: 1px solid rgba(0, 0, 0, 0.1); height: 24px; transition-delay: 100ms; }
.pan .table tr[data-sortable="0"] th .title[onclick] { cursor: initial; }
.pan .table td { padding: 0.2rem 0.2rem; border-top: 1px solid #dee2e6; }
.pan .table tbody tr:nth-child(odd):not(.special) td { background-color: rgba(128, 128, 128, 0.05); }
.pan .table tbody tr:not(.special):hover > td { background-color: rgba(128, 128, 128, 0.1); }
.pan .table tbody tr.highlight { background-color: rgba(0, 128, 255, 0.1); }
.pan .table tfoot { }
.pan .table tfoot th {  }
.pan .table tr.empty-row { text-align: center; font-style: italic; }
.pan .table tr.empty-row td { padding: 1rem; }
.pan .table tr th.error-row { text-align: center; }
.pan .table button.action { display: inline-block; padding: 0 5px; background: 0; border: 0; box-shadow: none; }
.pan .table button.actions:hover {  }
.pan .table .actions { text-align: right; }
.pan .table .actions a { border-radius: 5px; display: inline-block; padding: 0 5px; color: #3a9ca4; }
.pan .table td.actions a i { color: #3a9ca4; }
.pan .table .actions a:not(.disabled):hover {  }
.pan .table .actions button.disabled,
.pan .table .actions a.disabled,
.pan .table .actions a.disabled i { pointer-events: none; cursor: default; color: #999999;  }
.pan .table .actions form { display: inline; }
.pan .table .actions button { display: inline-block; padding: 0 5px; background: 0; border: 0;  box-shadow: none; }
.pan .table .actions button:hover {  }
.pan .table .actions span.dummy { display: inline-block; width: 23px; }
.pan .table th[data-sort-direction='up']::before { content: ""; width: 10px; height: 10px; display: inline-block; margin: 0 3px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='6 6 12 12'%3E%3Cpath fill='%23ffffff' d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' /%3E%3C/svg%3E") no-repeat; }
.pan .table th[data-sort-direction='down']::before { content: ""; width: 10px; height: 10px; display: inline-block; margin: 0 3px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='6 6 12 12'%3E%3Cpath fill='%23ffffff' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E") no-repeat; }
.pan .table th[data-search]::after { content: ""; width: 8px; height: 8px; margin: 3px 3px 3px 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2394C11E' d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z'/%3E%3C/svg%3E") no-repeat; position: absolute; top: 3px; left: 3px; }
.pan .table .selectable { text-align: center; }
.pan .table th.top, .table td.top { vertical-align: top; }
.pan .table th.middle, .table td.middle { vertical-align: middle; }
.pan .table th.bottom, .table td.bottom { vertical-align: bottom; }
.pan .table th.left, .table td.left { text-align: left; }
.pan .table th.center, .table td.center { text-align: center; }
.pan .table th.right, .table td.right { text-align: right; }
.pan .table tr.selected td {  }
.pan .table tr.selected td a { color: #fff; }

.pan .table tr.template-row > td { padding: 0; position: relative; background: rgba(0, 0, 0, 0.1); }
.pan .template-header { display: inline-block; width: 40px; text-align: center; vertical-align: top; position: absolute; height: 100%; left: 0; cursor: pointer; }
.pan .template-header i { margin: 10px 0 0 0; transform: rotate(90deg); font-size: 125%; transition: transform 0.25s ease-in-out; }
.pan .template-header:hover i { transform: rotate(0); }
.pan .template-content { display: inline-block; width: calc(100% - 40px); left: 40px; position: relative; min-height: 50px; }

.pan .table th.pagination { text-align: center; user-select: none; padding: 0.4rem 0.5rem; }
.pan .table th.pagination .pagination-container { display: flex; justify-content: space-between; }
.pan .table th.pagination .pagination-container > div { display: inline-block; }
.pan .table th.pagination .pagination-container .pagination-pages { flex-grow: 1; }
.pan .table th.pagination .page { padding: 2px 8px; border-radius: 5px; font-weight: 600; box-sizing: border-box; display: inline-block; vertical-align: top; }
.pan .table th.pagination span.page { pointer-events: none; cursor: default; }
.pan .table th.pagination .limit { padding: 2px; }

.pan .table td { vertical-align: top; }


.pan tfoot th.pagination { background-color: #fff; }


.pan .widget {  }
.pan .widget-header { background: #3a9ca4; padding: .75rem; font-weight: 600; font-size: 14px; color: #ffffff; border-top: 1px solid #cdcdcd; border-left: 1px solid #cdcdcd; border-right: 1px solid #cdcdcd; }
.pan .widget-header i { margin-right: .5rem; }
.pan .widget-header .left { float: left; width: 45%; }
.pan .widget-header .right { float: right; width: 45%; }

.pan .widget-toolbar { padding: 0.0rem 0.75rem 0.25rem; background: #3a9ca4; border-left: 1px solid #cdcdcd; border-right: 1px solid #cdcdcd; }
.pan .widget-toolbar .left { float: left; width: 45%; }
.pan .widget-toolbar .right { float: right; width: 45%; }
.pan .widget-toolbar .buttons { padding-top: 3px; }
.pan .widget-toolbar .buttons a { margin-right: .5rem; display: inline-block; width: 16px; text-align: center; }
.pan .widget-toolbar .v-spacer { margin-right: .5rem; }
.pan .widget-toolbar .buttons button { margin-right: .5rem; border: 0; background: 0; padding: 0; box-shadow: none; transition: none; }
.pan .widget-toolbar .buttons button:hover { margin-right: .5rem; border: 0; background: 0; }
.pan .widget-toolbar::before, .widget-toolbar::after { content: " "; display: table; } 
.pan .widget-toolbar::after { clear: both; }

.pan .widget-toolbar ul.filter { clear: both; list-style: none; margin: .5rem 0 0 0; padding: 0; }
.pan .widget-toolbar ul.filter li { display: inline-block; margin-right: .5rem; }
.pan .widget-toolbar ul.filter li a.active { background: 0; padding: 0}

.pan .widget-content .buttons { }
.pan .widget-content .buttons button { padding: .5rem .75rem; }
.pan .widget-content .buttons button:hover { padding: .5rem .75rem; }
.pan .widget-content { padding: 1rem; border-top: 1px solid #dee2e6; }

.pan .widget-form { }
.pan .widget-form  div.buttons { padding: 1rem; }


.pan .search { font-size: 0; position: relative; width: 100%; }
.pan .search input { border: 1px solid rgba(0, 0, 0, 0.1); padding: .25rem 2rem .25rem .75rem; width: 100%; box-sizing: border-box; }
.pan .search button { position: absolute; left: calc(100% - 25px); right: 45px; background: none; margin-top: 3px; line-height: 1.25rem; border: none; border-radius: 0; padding: 1px 4px; box-shadow: none; transition: none; }
.pan .search button:hover {  }

.pan .search input:focus { box-shadow: none !important; }
.pan .search:focus-within {  }



.column-settings-holder { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.column-settings { position: absolute; background-color: #fff; padding: 5px; border: 1px solid #3a9ca4; box-shadow: 0 0 10px 1px #3a9ca4; z-index: 1142; }
.column-settings input[type="text"] { padding: 0 3px; }
.column-settings i { margin: 0 5px 0 0; width: 16px; text-align: center; }
.column-settings hr { margin: 5px 0 7px 0; }
.column-settings .setting { padding: 2px 0; }


.modal { display: none; position: fixed; top: 0; left: 0; z-index: 1142; width: 100%; height: 100%; background: rgba(127, 127, 127, 0.3); overflow: auto;  }

.modal-content { }

.modal-header { position: relative; padding: 1.0rem; background-color: #3a9ca440; border-bottom: 1px solid #3a9ca4;  }
.modal-header h5 { display: inline; line-height: 32px; padding: 0; margin: 0; font-weight: 800; }

.modal-body { padding: 1.5rem; }

.modal-footer { text-align: right; padding: 1.0rem; background-color: #3a9ca440; border-top: 1px solid #3a9ca4;  }
.modal-footer button { margin-left: 10px; font-weight: bold; }

.modal button.close { position: absolute; top: 0; right: 0; padding: 5px 8px 4px 8px; border: 0; }
.modal button.close:hover {  }

.modal .input { display: flex; margin-bottom: 1rem; }
.modal .input label { display: inline-block; width: 12rem; padding: .25rem 0; }
.modal .input select,
.modal .input textarea,
.modal .input button[data-webtable],
.modal .input input:not([type="checkbox"]) { flex-grow: 1; text-align: left; }
.modal .input input[type="checkbox"] { transform: scale(1.75); }

.modal-dialog { background-color: #fff; padding: 5px; border: 1px solid #3a9ca4; box-shadow: 0 0 10px 1px #3a9ca4;
     max-width: 1200px; max-height: 85vh; margin: 7vh auto 1vh; padding: 0; overflow: auto; }
.modal button.close span { display: inline-block; font-size: 1.25rem; }
.modal-dialog h4 { text-align: center; }
.modal-dialog details h4 { text-align: left; }


.modal-frame { display: block; position: fixed; top: 0; left: 0; z-index: 2000; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; }