/* ****** TABLE DATA ****** */
.table-responsive {
    margin: 0;
}
.table-data-list {
    padding: 0;
}
.table-data-list table { 
    width: 100%; 
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #CCC;
    counter-reset: line;
}
.table-data-list table.table-separate tr:nth-of-type(even) { 
    background: #f5f5f6; 
}
.table-data-list table.table-border tr th,
.table-data-list table.table-border tr td {
    border:1px solid #CCC;
}
.table-data-list table.table-no-border tr th,
.table-data-list table.table-no-border tr td {
    border-top:1px solid #CCC;
}
.table-data-list table tr:hover,
.table-data-list table.table-separate tr:nth-of-type(even):hover {
    background: #EEE;
}
.table-data-list table tr th {
    height: 0;
    color: #333;
    background: #f5f5f6; 
    padding: 5px 0 5px 3px;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    font-family: 'RSU Regular';
    text-align: left; 
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-data-list table tr td font {
    display: block;
    font-size: 16px;
    line-height: 20px;
    font-family: 'RSU Regular';
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.table-data-list table tr td font.inline {
    overflow:unset;
    white-space:normal;
    text-overflow:unset;
}
.table-data-list table tr td {
    text-align: left;
    padding: 8px 3px 0px 3px;
    line-height: 20px;
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.table-data-list table tr td.no,
.table-data-list table tr td.date,
.table-data-list table tr td.col-checkbox,
.table-data-list table tr td.col-picture,
.table-data-list table tr td.qty-center {
    text-align: center;
}
.table-data-list table tr td.qty,
.table-data-list table tr td.money {
    text-align: right;
}
.table-data-list table tr td .num:before {
    counter-increment: line;
    content: counter(line);
}
.table-data-list table .icons {
    text-align: center;
    padding: 9px 0 0 0;
}
.table-data-list table .display {
    padding: 5px 0;
    text-align: center;
}
.table-data-list table .display span {
    width: 100%;
    font-size: 34px;
    line-height: 25px;
    font-weight: normal;
    display: block;
    cursor: pointer;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: transform .35s ease-in-out;
}
.table-data-list table .switch-toggle {
    padding: 2px 0;
    text-align: center;
}
.table-data-list table .switch-toggle i {
    font-size: 32px;
}
.table-data-list table .switch-toggle .fa-toggle-on,
.table-data-list table .switch-toggle .fa-toggle-off {
    cursor: pointer;
}
.table-data-list table .switch-toggle .fa-toggle-on {
    color:green;
}
.table-data-list table .switch-toggle.toggle-warning .fa-toggle-on {
    color:#f39c12;
}
.table-data-list table .switch-toggle .fa-toggle-off {
    color:#999;
}
.table-data-list table .display span.close {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: transform 0.35s ease-in-out;
}
.table-data-list table tr td .date-at-o {
    display: block;
    font-size: 15px;
    margin: -2px 0 2px -2px;
}
.table-data-list table tr td .date-at-o>span {
    padding: 0 1px 1px 2px;
    border: 1px solid black;
    border-top-width: 2px;
}
.table-data-list table tr td .date-at-o>span>small {
    color: black;
    padding: 0 2px;
    font-size: 12px;
}
.table-data-list table tr td .date-at-o>span>i {
    color: black;
    font-size: 14px;
}
.table-data-list table tr td .date-at-o>span>code {
    color: black;
    font-size: 12px;
    padding: 2px 2px 0 2px;
    letter-spacing: -0.75px;
    background-color: white;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.table-data-list table tr td .docx-at-o {
    font-size: 14.5px;
    margin: -1px 0 0 -2px;
}
.table-data-list table tr td .docx-at-o.overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.table-data-list table tr td .docx-at-o>span {
    color: black;
    font-size: 13px;
    background: none;
    padding: 2px 2px 2px 2px;
}
.table-data-list table tr td .docx-at-o>span.color {
    background-color: #f5f5f6;
}
.table-data-list table tr td .docx-at-o>span>.prefix {
    color: black;
    font-size: 15px;
}
.table-data-list table tr td .docx-at-o>span>i {
    font-size: 14px;
    padding-right: 1px;
}
.table-data-list table tr td .docx-at-o>span>code {
    color: black;
    font-size: 12px;
    padding: 1px 3px 0 3px;
    background-color: #fff;
    letter-spacing: -0.7px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.table-data-list table tr td .project-at-o {
    display: block;
    font-size: 13px;
    padding-top: 1px;
    margin: 0 0 1px -2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.table-data-list table tr td .project-at-o>span {
    color: white;
    padding: 2px 2px 2px 3px;
    background-color:#32404f;
}
.table-data-list table tr td .project-at-o>span>i {
    font-size: 13px;
}
.table-data-list table tr td .project-at-o>span>code {
    color: black;
    font-size: 12px;
    padding: 1px 3px 0 3px;
    background-color: #fff;
    letter-spacing: -0.75px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.table-data-list table tr td .travel-at-o {
    display: block;
    font-size: 13px;
    padding-top: 1px;
    margin: 0 0 1px -2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.table-data-list table tr td .travel-at-o>span {
    color: white;
    padding: 2px 2px 2px 3px;
    background-color:#1c84c6;
}
.table-data-list table tr td .travel-at-o>span>i {
    font-size: 12px;
    letter-spacing: -0.85px;
}
.table-data-list table tr td .travel-at-o>span>code {
    color: black;
    font-size: 12px;
    padding: 1px 3px 0 3px;
    background-color: #fff;
    letter-spacing: -0.75px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.table-data-list table tr td .teaching-at-o {
    display: block;
    font-size: 13px;
    padding-top: 1px;
    margin: 0 0 1px -2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.table-data-list table tr td .teaching-at-o>span {
    color: white;
    padding: 2px 2px 2px 3px;
    background-color:#fc6c00;
}
.table-data-list table tr td .teaching-at-o>span>i {
    font-size: 12px;
    letter-spacing: -0.85px;
}
.table-data-list table tr td .teaching-at-o>span>code {
    color: black;
    font-size: 12px;
    padding: 1px 3px 0 3px;
    background-color: #fff;
    letter-spacing: -0.75px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.table-data-list table tr td .advance-at-o {
    display: block;
    font-size: 14px;
    padding: 2px 0 0 0;
    margin: 0 0 2px -2px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.table-data-list table tr td .advance-at-o>span {
    font-size: 12px;
    padding: 3px 1px 1px 2px;
    border: 1px solid #00b496;
    background-color: #00b496;
}
.table-data-list table tr td .advance-at-o>span>i {
    color: white;
    font-size: 14px;
}
.table-data-list table tr td .advance-at-o>span>small {
    color: white;
    padding: 0 2px;
    font-size: 12px;
}
.table-data-list table tr td .advance-at-o>span>code {
    color: black;
    font-size: 12px;
    padding: 2px 2px 0 2px;
    letter-spacing: -0.75px;
    background-color: white;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.table-data-list table tr td .desc-at-line {
    display: block;
    padding-left: 7px;
    text-indent: -8px;
}
.table-data-list table tr td .desc-at-inline {
    display: block;
    padding-left: 7px;
    text-indent: -8px;
    display: block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.table-data-list .inputs {
    padding: 1px;
    white-space: unset;
}
.table-data-list table tr td.actions {
    padding: 0;
    white-space: unset;
}
.table-data-list table tr td.actions {
    overflow: unset;
}
.table-data-list table tr td.actions .open>.btn {
    border-color: #18a689;
    background-color: #18a689;
}
.table-data-list table tr td.actions .open>.btn.btn-danger {
    border-color: #ed5565;
    background-color: #ed5565;
}
.table-data-list table tr td.actions .btn-group>.btn>.fa-caret-down {
    float: right;
    margin-top: 7px;
}
.table-data-list table tr td.actions .open>.dropdown-menu {
    min-width: 160px;
    left: -110px;
    margin:0;
    border: 1px solid #18a689;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.table-data-list table tr td.actions .open>.dropdown-menu>li>a {
    margin: 0;
    font-size: 14px;
    font-family: 'RSU Regular';
    padding: 2px 2px 2px 5px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.table-data-list table tr td.actions .open>.dropdown-menu>li:hover>a,
.table-data-list table tr td.actions .open>.dropdown-menu>li.active>a {
    color: #FFF;
    background-color: #18a689;
}
.table-data-list table tr td.actions .open>.dropdown-menu>li:hover>a.item-info {
    color: #FFF;
    background-color: #00c0ee;
}
.table-data-list table tr td.actions .open>.dropdown-menu>li:hover>a.item-primary {
    color: #FFF;
    background-color: #337ab7;
}
.table-data-list table tr td.actions .open>.dropdown-menu>li:hover>a.item-delete {
    color: #FFF;
    background-color: #ed5565;
}
.table-data-list table tr td.actions .open>.dropdown-menu>li:hover>a.item-restore {
    color: #FFF;
    background-color: #C09853;
}
.table-data-list table tr td.actions .open>.dropdown-menu>li>a.item-disabled {
    color: #999;
    cursor: default;
}
.table-data-list table tr td.actions .open>.dropdown-menu>li:hover>a.item-disabled {
    cursor: default;
    background-color: #EEE;
}
.table-data-list table tr td.actions .open>.dropdown-menu>li>a>.fa-box {
    width: 25px;
    float: left;
    margin-left: -5px;
    text-align: center;
}
.table-data-list table tr td.actions .open>.dropdown-menu .dropdown-divider {
    border-bottom: 1px solid #e4e6e7;
}
.table-data-list table tr td.actions .btn {
    width: 40px;
    height: 36px !important;
    margin: 0 0 0 -1px;
    padding: 6px;
    text-align: center;
}
.table-data-list table tr td.actions .btn small {
    display: block;
    font-size: 10px;
    line-height: 7px;
}
.table-data-list table tr td.actions .btn.btn-custom,
.table-data-list table tr td.actions .btn.btn-edit,
.table-data-list table tr td.actions .btn.btn-report,
.table-data-list table tr td.actions .btn.btn-delete {
    padding-top: 4px;
}
.table-data-list table tr td.actions .btn.btn-custom i,
.table-data-list table tr td.actions .btn.btn-edit i,
.table-data-list table tr td.actions .btn.btn-report i,
.table-data-list table tr td.actions .btn.btn-delete i {
    font-size: 10px;
}
.table-data-list table tr td.actions .btn.btn-custom {
    padding-top: 0px;
}
.table-data-list table tr td.actions .btn.btn-report i::after {
    content: 'รายงาน';
    display: block;
    font-size: 10px;
    padding-top: 2px;
}
.table-data-list table tr td.actions .btn.btn-edit i::after {
    content: 'แก้ไข';
    display: block;
    font-size: 10px;
    padding-top: 2px;
}
.table-data-list table tr td.actions .btn.btn-delete i::after {
    content: 'ลบ';
    display: block;
    font-size: 10px;
    padding-top: 2px;
}
.table-data-list table tr td.actions .btn.btn-danger {
    margin-left: -1px !important;
}
.table-data-list table tr td.actions .btn.btn-default i,
.table-data-list table tr td.actions .btn.btn-default small {
    color: #ccc !important;
}
.table-data-list table tr td.progress {
    padding: 0 !important;
}
.table-data-list table tr.ACCEPTED td.status,
.table-data-list table tr.ACCEPTED td.name .status-o i {
    color: #23c6c8;
}
.table-data-list table tr.RECEIVED td.status,
.table-data-list table tr.RECEIVED td.name .status-o i {
    color: #1c84c6;
}
.table-data-list table tr.APPROVED td.status,
.table-data-list table tr.APPROVED td.name .status-o i {
    color: green;
}
.table-data-list table tr.CANCELLED td.status,
.table-data-list table tr.CANCELLED td.name .status-o i,
.table-data-list table tr.CANCELLED td.name .status-o sup {
    color: red;
}
.table-data-list table tr.CANCELLED td.name .date-at-o>span {
    border-color: #CCC;
}
.table-data-list table tr.CANCELLED td .project-at-o>span,
.table-data-list table tr.CANCELLED td .advance-at-o>span {
    color: white;
    border: 1px solid #666;
    background-color: #666;
}
.table-data-list table tr.CANCELLED td .project-at-o>span>i,
.table-data-list table tr.CANCELLED td .advance-at-o>span>i {
    color: white;
}
.table-data-list table tr.CANCELLED td .project-at-o>span>small,
.table-data-list table tr.CANCELLED td .advance-at-o>span>small {
    color: white;
}
.table-data-list table tr.CANCELLED td .docx-at-o>span,
.table-data-list table tr.CANCELLED td .project-at-o>span>code,
.table-data-list table tr.CANCELLED td .advance-at-o>span>code {
    color: #666;
}
.table-data-list table tr.CANCELLED td.actions .btn-custom,
.table-data-list table tr.CANCELLED td.actions .open .btn-custom {
    color: black;
    background: #EEE;
    border-color: #CCC;
}
.table-data-list table tr.CANCELLED td.actions .open>.dropdown-menu {
    border-color: #CCC;
}
.table-data-list table tr.DELETED td.no,
.table-data-list table tr.DELETED td.date,
.table-data-list table tr.DELETED td.code,
.table-data-list table tr.DELETED td.name,
.table-data-list table tr.DELETED td.money,
.table-data-list table tr.DELETED td.organize {
    color: #f09898;
}
.table-data-list table tr.DELETED td .date-at-o>span {
    border-color: #CCC;
}
.table-data-list table tr.DELETED td .date-at-o>span>i,
.table-data-list table tr.DELETED td .date-at-o>span>small,
.table-data-list table tr.DELETED td .date-at-o>span>code {
    color: #f09898;
}
.table-data-list table tr.DELETED td.status,
.table-data-list table tr.DELETED td.name .status-o i,
.table-data-list table tr.DELETED td.name .status-o sup {
    color: red;
}
.table-data-list table tr.DELETED td.actions .btn-custom,
.table-data-list table tr.DELETED td.actions .open .btn-custom {
    color: white;
    background: #f09898;
    border-color: #f09898;
}
.table-data-list table tr.DELETED td.actions .open>.dropdown-menu {
    border-color: #f09898;
}
.table-data-list .oneplanning {
    color:#999;
    font-size:10px;
    cursor:pointer;
    padding:4px 3px 3px 3px;
    background-color:#e5e6e7;
    border:1px solid #cccccc;
}
.table-data-list .oneplanning>img {
    height: 16px;
    margin:-2px 1px 0 0;
    background-color: #e5e6e7;
    border: 1px solid #e5e6e7;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    filter:gray;
    -webkit-filter:grayscale(1);
    filter:grayscale(1);
}
.table-data-list .oneplanning.synced {
    color:#155724;
    background-color:#d4edda;
    border:1px solid #c3e6cb;
}
.table-data-list .oneplanning.synced>img {
    background-color: #FFF;
    border: 1px solid white;
    filter: unset;
    -webkit-filter:grayscale(0);
    filter:grayscale(0);
}
.table-data-list table tr.summary td {
    border-top-width: 3px;
    text-align: right;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    font-family: 'RSU Regular';
    background: #f5f5f6;
}
.table-data-list table tr.summary td.no-border {
    border-left-color: #f5f5f6;
    border-right-color: #f5f5f6;
}
.table-data-list .row-adding {
    padding: 7px 15px 7px 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-data-list .row-adding span {
    font-size: 14px;
    font-style: italic;
    font-family: 'RSU Regular';
}
.table-data-list .row-adding a {
    color: #148e75;
    font-size: 15px;
    font-style: italic;
    font-family: 'RSU Regular';
}
.table-data-list .row-adding a:hover,
.table-data-list .row-adding a:focus {
    color: #1eceaa;
}
.table-data-list .table-filter {
    margin: 0;
    padding: 0;
}
.table-data-list .table-filter>.row>div {
    padding: 0 0 1px 0;
}
.table-data-list .table-filter .form-group,
.table-data-list .table-filter .form-group .btn {
    margin:0;
}
.table-data-list .table-filter .form-group .btn {
    font-size: 14px;
    font-family: 'RSU Regular';
}
.table-data-list .table-filter .filter-tool .btn:hover,
.table-data-list .table-filter .filter-tool .btn:active,
.table-data-list .table-filter .filter-tool .btn:focus {
    border-color: #18a689;
    background-color: #18a689;
}
.table-data-list .table-filter .filter-tool .dropdown-menu {
    min-width: 141px;
    position: absolute;
    top: 32px;
    left: 0px;
    will-change: top, left;
    border: 1px solid #18a689;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.table-data-list .table-filter .filter-tool .dropdown-menu>li>a {
    margin: 0;
    font-size: 14px;
    font-family: 'RSU Regular';
    padding: 5px 2px 5px 12px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.table-data-list .table-filter .filter-tool .dropdown-menu>li:hover>a,
.table-data-list .table-filter .filter-tool .dropdown-menu>li.active>a {
    color: #FFF;
    background-color: #18a689;
}
.table-data-list .table-filter .filter-tool .dropdown-menu>li:hover>a.item-info {
    color: #FFF;
    background-color: #00c0ee;
}
.table-data-list .table-filter .filter-tool .dropdown-menu>li:hover>a.item-delete {
    color: #FFF;
    background-color: #ed5565;
}
.table-data-list .table-filter .filter-tool .dropdown-menu>li:hover>a.item-restore {
    color: #FFF;
    background-color: #C09853;
}
.table-data-list .table-filter .filter-tool .dropdown-menu>li>a.item-disabled {
    color: #999;
}
.table-data-list .table-filter .filter-tool .dropdown-menu>li:hover>a.item-disabled {
    background-color: #EEE;
}
.table-data-list .table-filter .filter-tool .dropdown-menu .dropdown-divider {
    border-bottom: 1px solid #e4e6e7;
}
.table-data-list .table-filter .filter-limit {
    margin:0;
}
.table-data-list .table-filter .filter-limit .btn {
    width: 60px;
    text-align: left;
}
.table-data-list .table-filter .filter-limit .btn i {
    float: right;
    margin-top: 2px;
}
.table-data-list .table-filter .filter-limit .btn:hover,
.table-data-list .table-filter .filter-limit .btn:active,
.table-data-list .table-filter .filter-limit .btn:focus {
    border-color: #18a689;
    background-color: #FFF;
}
.table-data-list .table-filter .filter-limit .dropdown-menu {
    min-width: 60px;
    position: absolute;
    top: 32px;
    left: 0px;
    will-change: top, left;
    border: 1px solid #18a689;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.table-data-list .table-filter .filter-limit .dropdown-menu>li>a {
    margin: 0;
    font-size: 14px;
    font-family: 'RSU Regular';
    padding: 5px 2px 5px 12px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.table-data-list .table-filter .filter-limit .dropdown-menu>li:hover>a,
.table-data-list .table-filter .filter-limit .dropdown-menu>li.active>a {
    color: #FFF;
    background-color: #18a689;
}
.table-data-list .table-filter .form-group .form-blank {
    border-color: #FFF;
    padding-right: 0;
    padding-left: 0;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}
.table-data-list .table-filter .filter-search .input-search,
.table-data-list .table-filter .filter-search .input-search:hover,
.table-data-list .table-filter .filter-search .input-search:focus,
.table-data-list .table-filter .filter-search .input-search:active {
    border-right:none;
    border-color: #e4e6e7 !important;
}
.table-data-list .table-filter .filter-search .btn-search {
    height: 34px;
    line-height: 25px;
}
.table-data-list .table-filter .filter-search .btn-search,
.table-data-list .table-filter .filter-search .btn-search:hover,
.table-data-list .table-filter .filter-search .btn-search:focus {
    border-left:none;
    background:none;
    border-color: #e4e6e7;
}
.table-data-list .table-filter .filter-tool .btn .fa-icon {
    display: none;
}
.table-data-list .table-condition {
    margin:0;
    padding: 1px 0 0 1px;
    border: 1px solid #cccccc;
    background-color: #f5f5f6;
}
.table-data-list .table-condition>.row>div {
    padding: 0 1px 1px 0;
}
.table-data-list .table-condition .form-group {
    margin:0;
    overflow: hidden;
}
.table-data-list .table-condition .form-group .btn {
    margin:0;
}
.table-data-list .table-pagination {
    width: 100%;
    margin:1px 0 0 0;
    padding:0 0 0 0;
    text-align: center;
}
.table-data-list .table-pagination .prev {
    float: left;
    text-align: left;
}
.table-data-list .table-pagination .next {
    float: right;
    text-align: right;
}
.table-data-list .table-pagination .prev .btn,
.table-data-list .table-pagination .next .btn {
    width: 80px;
    margin: 0;
    padding: 6px 6px 5px 6px;
    text-align: center;
}
.table-data-list .table-pagination .prev .btn.btn-default,
.table-data-list .table-pagination .next .btn.btn-default {
    color: #999;
}
.table-data-list .table-pagination .prev .btn.btn-primary,
.table-data-list .table-pagination .next .btn.btn-primary {
    color: #FFF;
}
.table-data-list .table-pagination .prev .btn span,
.table-data-list .table-pagination .next .btn span {
    font-family: 'RSU Regular';
}
.table-data-list .table-pagination .page {
    display: inline-block;
}
.table-data-list .table-pagination .page .page-number,
.table-data-list .table-pagination .page .page-number:focus {
    width: 80px;
    height: 33px;
    line-height: 31px;
    text-align: left;
    display: inline-block;
    outline: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.table-data-list .table-pagination .page .page-title {
    width: 80px;
    height: 35px;
    text-align: center;
    line-height: 31px;
    display: inline-block;
    border: 1px solid #cccccc;
    background-color: #f5f5f6;
    border-right: none;
    -webkit-border-top-left-radius: 25px;
    -moz-border-top-left-radius: 25px;
    border-top-left-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-bottom-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
.table-data-list .table-pagination .page .page-total {
    width: 80px;
    height: 35px;
    text-align: center;
    line-height: 31px;
    display: inline-block;
    border: 1px solid #cccccc;
    background-color: #f5f5f6;
    border-left: none;
    -webkit-border-top-right-radius: 25px;
    -moz-border-top-right-radius: 25px;
    border-top-right-radius: 25px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-bottom-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
.table-data-list .table-pagination .select2-container .select2-choice {
    height: 35px;
    margin-top:-1px;
    line-height: 31px;
    border-color: #ccc;
}
.table-data-list .table-pagination .select2-container .select2-choice {
    text-align: center;
}
.table-data-list .table-display {
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    padding: 8px 3px;
    font-family: 'RSU Regular';
    text-align: center;
    background-color: #f5f5f6;
    border: 1px solid #cccccc;
    border-top: none;
}
.table-data-list table tr td.autoline {
    overflow: unset;
    text-overflow: unset;
    white-space: normal;
}
.table-data-list table .autohide {
    display: table-cell;
}
.table-data-list table .autoshow {
    display: none;
}
/* ****** TABLE CUSTOM ****** */
.table-custom-list table {
    width: 100%; 
    /*border-collapse: collapse;*/
    counter-reset: line;
}
.table-custom-list table.table-border tr th,
.table-custom-list table.table-border tr td {
    border:1px solid #CCC;
}
.table-custom-list table tr:hover {
    background: #f5f5f6;
}
.table-custom-list table tr th {
    height: 0;
    color: #333;
    background: #f5f5f6; 
    padding: 5px 0 5px 3px;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    font-family: 'RSU Regular';
    text-align: left; 
    vertical-align: top;
}
.table-custom-list table tr td {
    text-align: left;
    padding: 8px 3px;
    line-height: 20px;
    vertical-align: top;
    border-color: #CCC;
}
.table-custom-list table tr td.no,
.table-custom-list table tr td.date,
.table-custom-list table tr td.qty {
    text-align: center;
}
.table-custom-list table tr td.date .to {
    display: block;
    font-size: 11px;
}
.table-custom-list table tr td.date .to:before {
    content: '- ';
}
.table-custom-list table tr td.money {
    text-align: right;
}
.table-custom-list table tr td .num:before {
    counter-increment: line;
    content: counter(line);
}
.table-custom-list table tr td.inputs,
.table-custom-list table tr td.labels,
.table-custom-list table tr td.actions {
    padding: 0;
    white-space: unset;
}
.table-custom-list table tr td.inputs .center {
    text-align: center;
}
.table-custom-list table tr td.inputs input[type='text'],
.table-custom-list table tr td.inputs input[type='number'] {
    height: 36px;
}
.table-custom-list table tr td.empty {
    padding: 8px 0;
}
.table-custom-list table tr td.labels label {
    width: 100%;
    height: 22px;
    text-align: center;
    margin:0 1px 1px 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.table-custom-list table tr td.actions .btn {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 6px;
    text-align: center;
}
.table-custom-list table tr td.actions .btn small {
    display: block;
    font-size: 10px;
    line-height: 8px;
}
.table-custom-list table tr td.actions .btn.btn-custom,
.table-custom-list table tr td.actions .btn.btn-edit,
.table-custom-list table tr td.actions .btn.btn-report,
.table-custom-list table tr td.actions .btn.btn-delete {
    height: 36px;
    padding-top: 4px;
}
.table-custom-list table tr td.actions .btn.btn-custom i,
.table-custom-list table tr td.actions .btn.btn-edit i,
.table-custom-list table tr td.actions .btn.btn-report i,
.table-custom-list table tr td.actions .btn.btn-delete i {
    font-size: 10px;
}
.table-custom-list table tr td.actions .btn.btn-custom {
    padding-top: 0px;
}
.table-custom-list table tr td.actions .btn.btn-report i::after {
    content: 'รายงาน';
    display: block;
    font-size: 10px;
    padding-top: 2px;
}
.table-custom-list table tr td.actions .btn.btn-edit i::after {
    content: 'แก้ไข';
    display: block;
    font-size: 10px;
    padding-top: 3px;
}
.table-custom-list table tr td.actions .btn.btn-delete i::after {
    content: 'ลบ';
    display: block;
    font-size: 10px;
    padding-top: 3px;
}
.table-custom-list table tr td.actions .btn.btn-danger {
    margin-left: -1px !important;
}
.table-custom-list table tr td.actions .btn.btn-default i,
.table-custom-list table tr td.actions .btn.btn-default small {
    color: #ccc !important;
}
.table-custom-list table tr td.progress {
    padding: 0 !important;
}
.table-custom-list table tr.summary td {
    border-top-width: 3px;
    text-align: right;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    font-family: 'RSU Regular';
    background: #f5f5f6;
}
.table-custom-list table tr.summary td.no-border {
    border-left-color: #f5f5f6;
    border-right-color: #f5f5f6;
}
.table-custom-list table tr.summary td.no-top-border {
    border-top-color: #f5f5f6;
    border-bottom-color: #f5f5f6;
}
.table-custom-list .row-adding {
    padding: 10px 15px 7px 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-custom-list tr td.row-adding {
    padding-top: 7px;
    padding-bottom: 7px;
}
.table-custom-list tr td.row-adding:hover {
    background-color: #FFF !important;
}
.table-custom-list .row-adding span {
    font-size: 14px;
    font-style: italic;
    font-family: 'RSU Regular';
}
.table-custom-list .row-adding a {
    color: #148e75;
    font-size: 15px;
    font-style: italic;
    font-family: 'RSU Regular';
}
.table-custom-list .row-adding a:hover,
.table-custom-list .row-adding a:focus {
    color: #1eceaa;
}
@media screen and (max-width: 670px) {
    .table-custom-list table {
        border: none;
        border-collapse: collapse;
        table-layout: fixed;
    }
    .table-custom-list table,
    .table-custom-list thead,
    .table-custom-list tbody,
    .table-custom-list tfoot,
    .table-custom-list th,
    .table-custom-list td,
    .table-custom-list tr { 
        display: block; 
    }
    .table-custom-list thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .table-custom-list tr {
        border-left: 1px solid #CCC;
        border-right: 1px solid #CCC;
        border-bottom: 1px solid #CCC;
    }
    .table-custom-list .table-no-border {
        border: none !important;
    }
    .table-custom-list .table-no-border tr {
        border: none !important;
        border-bottom: 1px dotted #CCC !important;
    }
    .table-custom-list .summary td {
        border-top: 3px solid #ccc !important;
    }
    .table-custom-list tr.JOINED {
        border-color: #4cae4c;
    }
    .table-custom-list td { 
        border: none !important;
        position: relative;
        padding-left: 100px !important; 
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        white-space: normal;
        text-align:left;
        overflow: hidden;
        text-overflow: all;
        white-space: normal;
    }
    .table-custom-list td:before { 
        position: absolute;
        top: 6px;
        left: 15px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
        content: attr(data-title);
        font-size: 16px;
        line-height: 22px;
        font-family: 'RSU Regular';
    }
    .table-custom-list td.no,
    .table-custom-list td.date,
    .table-custom-list td.qty,
    .table-custom-list td.money,
    .table-custom-list td.inputs .center {
        text-align: left !important;
    }
    .table-custom-list td.lg-display {
        display: none;
    }
    .table-custom-list table tr td.date .to {
        display: inline-block;
        font-size: 14px;
        padding-left: 2px;
    }
    .table-custom-list td.inputs {
        padding-top: 0 !important;
        padding-bottom: 5px !important;
    }
    .table-custom-list td.labels label {
        width: auto !important;
    }
    .table-custom-list td.actions {
        padding: 0 0 0 0 !important;
    }
    .table-custom-list td.empty {
        padding: 8px 0 !important;
    }
    .table-custom-list td.empty:before {
        display: none;
    }
    .table-custom-list tr.adding td {
        padding: 7px 0 !important;
    }
    .table-custom-list td.actions .btn span {
        padding-left: 3px;
        display: inline-block !important;
    }
    .table-custom-list td.actions .btn .txt {
        font-size: 18px !important;
    }
    .table-custom-list td.actions .btn .txt::after {
        content: ':';
        padding: 0 2px;
    }
    .table-custom-list td.actions .regised {
        font-size: 20px !important;
    }
    .table-custom-list tr.summary td,
    .table-custom-list tr.summary td:before {
        line-height: 24px !important;
    }
    .table-custom-list tr.summary td.no-top-border {
        border-top-color: #f5f5f6 !important;
        border-bottom-color: #f5f5f6 !important;
    }
    .table-custom-list .one-btns {
        width: 100%;
    }
    .table-custom-list .two-btns {
        width: 50%;
    }
    .table-custom-list .two-btns-first {
        float: left;
    }
    .table-custom-list .three-btns {
        width: 33%;
    }
    .table-custom-list .three-btns-second {
        width: 34%;
    }
    .table-custom-list .three-btns-first,
    .table-custom-list .three-btns-second {
        float: left;
    }
    .table-custom-list .four-btns {
        width: 25%;
        float: left;
    }
}
@media screen and (max-width: 768px) {
    .table-data-list table .autohide {
        display: none;
    }
    .table-data-list table .autoshow {
        display: block;
    }
    .table-data-list .table-filter .col-search {
        width: 100%;
    }
    .table-data-list .table-filter .col-page-display {
        width: 100%;
    }
    .table-data-list .table-filter .filter-search .btn-filter {
        margin-top: -70px;
    }
    .table-data-list .table-filter .filter-search .btn-search {
        margin-right: -63px;
    }
    .table-data-list .table-filter .filter-search .btn-search.no-all {
        margin-right: 0px;
    }
}
@media screen and (max-width: 532px) {
    .table-data-list .table-pagination .page .page-title {
        width: auto;
        padding-left: 7px;
        padding-right: 3px;
        text-align: right;
    }
    .table-data-list .table-pagination .page .page-total {
        width: auto;
        padding-left: 3px;
        padding-right: 7px;
        text-align: left;
    }
    .table-data-list .table-pagination .page .page-number,
    .table-data-list .table-pagination .page .page-number:focus {
        width: auto !important;
    }
    .table-data-list .table-pagination .prev .btn,
    .table-data-list .table-pagination .next .btn {
        width: 40px;
        padding: 6px 6px 7px 6px;
    }
    .table-data-list .table-pagination .prev .btn span,
    .table-data-list .table-pagination .next .btn span {
        display: none;
    }
}
@media screen and (max-width: 414px) {
    .table-data-list .table-pagination .page .page-title,
    .table-data-list .table-pagination .page .page-total {
        display: none;
    }
}
@media screen and (max-width: 375px) {
    .table-data-list .table-filter .filter-tool .btn span {
        display: none;
    }
    .table-data-list .table-filter .filter-tool .btn .fa-icon {
        display: inline-block;
    }
    .table-data-list .table-filter .filter-search .btn-filter::before {
        content: 'ทั้งหมด';
    }
    .table-data-list .table-filter .filter-search .btn-filter span {
        display: none;
    }
    .table-data-list .table-filter .filter-search .btn-search {
        margin-right: -63px;
    }
}