.general-table {
    margin-top:10px;
    margin-bottom:20px;
    width:100%;
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
 }
 .general-table th {
    vertical-align:top;
    background-color:transparent;
    color:#555;
}
.general-table, .general-table tr, .general-table td, .general-table th {
    border-style:solid;
    border-width:1px;
    border-color:#c2c2c2;
    border-collapse:collapse;
    font-size:0.96em;
}
.general-table th {
    text-align: left;
    background: var(--theme-sec);
    color: white;
    border: 0.3px solid #f3f3f333;
    vertical-align: bottom;
    border-bottom: 0px;
    border-top: 0px;
    font-weight: 600;
    padding: 10px;
}
.general-table, .general-table tr {
   border: 0px;
}
.general-table th a {
    color: white;
    text-decoration: none;
}
.general-table td {
    /* padding: 3px 4px 4px 4px; */
    vertical-align: top;
    border-left: 0.3px solid #ddd;
    border-right: 0.3px solid #ddd;
    border-top: 0px;
    border-bottom: 0.3px solid #ddd;
    padding: 9px;
}
.general-table tr>:first-child {
    border-left: 0px;
}
.general-table tr>:last-child {
    border-right: 0px;
}
.general-table .ch {
    background:none;
    text-align:left;
    font-style:italic;
}
.general-table .left-cell { text-align:left; }
.general-table .num { text-align:right; }
.general-table .center { text-align:center; }
.general-table .em { font-weight: bold; }
.general-table .thumb { padding:2px; text-align:center; }
.general-table:not(.no-stripes)>tr:nth-child(odd), 
.general-table:not(.no-stripes)>tbody>tr:nth-child(odd) {
    background-color: color-mix(in hsl, var(--theme-pri), var(--pri-background) 96%);
}
.general-table:not(.no-stripes)>tr:nth-child(even), 
.general-table:not(.no-stripes)>tbody>tr:nth-child(even) {
    background-color:#fefefe;
}
.general-table>tr.selected-row { background-color:#ffffe0 !important; }
.general-table>tr:hover, .general-table>tbody>tr:hover {
    background-color:#ffffcc;
}
.general-table .opaque-cell { background-color:#fff; }
.general-table .rowheader { font-weight:700 }
.general-table .nowrap { white-space: nowrap; }
.general-table .special-row {
    font-style:italic;
}

.general-table .ctrl_col { width:15px; }
.general-table .row-control-view { font-size:9px; text-align:center; width:15px; }
.general-table .row-control-view a div { background: url('icons/viewicon.png') no-repeat scroll 2px 0px; height:12px; width:12px; }
.general-table .row-control-view a:hover div { border-bottom: 1px solid red; }

.general-table .row-control-edit { font-size:9px; text-align:center; width:15px; }
.general-table .row-control-edit a div {
    background: url('icons/edit.png') no-repeat scroll;
    height: 16px;
    width: 14px;
    background-size: cover;
    background-position: center;
}
.general-table .row-control-edit a div small { display: none; }

.general-table .row-control {
    text-align: center;
    white-space: nowrap;
    width: 24px;
    padding: 3px 0 0 0;
    vertical-align: middle;
}
.general-table .row-control a {
    color: #444;
}
.general-table .row-control a div {
    margin: 0 0 0 5px;
    display: inline-block;
}
.general-table .row-control a:last-child div {
    margin-right: 5px;
}
.general-table .row-control a.edit div {
    background: url('icons/edit.png') no-repeat scroll;
    height: 16px;
    width: 14px;
    background-size: cover;
    background-position: center;
}
.general-table .row-control a.del div {
    background: url('icons/trash.png') no-repeat scroll;
    height: 16px;
    width: 14px;
    background-size: cover;
    background-position: center;
}

.general-table .row-control-check {  text-align:center; width:20px; }
.general-table .row-control-check input { margin:1px 0px; }
.general-table th input[type="checkbox"] {
    margin: 0 2px;
    vertical-align: middle;
}
.general-table .checkcell {
    text-align: center;
    padding-top:2px;
    vertical-align: middle;
}
.general-table .click-to-edit, .general-table .click-to-check { cursor: pointer; }

.general-table th.sorted { background-position: bottom left !important;  }
.general-table th.sorted a { padding-right: 13px; }
.general-table th.ascending a { background: url(icons/arrow-down.gif) right .4em no-repeat;}
.general-table th.descending a { background: url(icons/arrow-up.gif) right .4em no-repeat;}

.general-table .rowheader { font-weight:500 }
.general-table .rowfooter {
    background:#f9f9f9;
    height:30px;
    vertical-align:middle;
    border-bottom: none;
}

/** pager template - meant to go inside the general table footer above**/
.general-table .pagination a:hover {
    background:#555 none repeat scroll 0 0;
    border-color:#777;
    color:white;
}
.general-table .pagination a:link, .general-table  .pagination a:visited {
    border:1px solid #ddd;
    padding:2px 6px;
    text-decoration:none;
}
.general-table  .pagination {
    font-size:12px;
    padding-left:10px;
    line-height:40px;
}

.general-table .pagination .current-page {
    font-size:12px;
    font-weight:bold;
    padding:2px 6px;
    vertical-align:top;
}

.general-table .pagination .row-count {
    margin-left:10px;
}

.f4pager { 
    margin-top: 4px; 
    display: flex;
    align-items: center;
}
.f4pager>a:link,
.f4pager>a:visited,
.f4pager .current-page {
    border: 1px solid #ddd;
    padding: 0px 0px;
    text-decoration: none;
    min-width: 32px;
    display: inline-block;
    text-align: center;
    margin: 4px 1px;
    line-height: 20px;
    vertical-align: baseline;
    font-size: 11px;
    user-select: none;
}
.f4pager>a:hover {
    background:#555 none repeat scroll 0 0;
    border-color:#777;
    color:white;
}
.f4pager .row-count {
    margin-left: 10px;
    font-size: 11px;
    line-height:20px;
}
.f4pager .current-page {
    font-weight:bold;
    background:#DDD none repeat scroll 0 0;
}

.general-table tr.empty-row td {
    height: 60px;
    vertical-align: middle;
    color: #aaa;
    font-size: 0.9em;
  }

.general-table tr.loadingrow {
    background-color: #f0f0f0 !important;
    animation-name: rowFadeInOut;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}
.general-table tr.loadingrow:hover { 
    background-color: #f0f0f0;
}
.general-table tr.loadingrow td {
    height: 99px;
    padding: 20px;
    color: #666;
    vertical-align: middle;
    border-bottom: none;
}
.general-table tr.select-set-row {
    background-color: rgb(255, 255, 130);
    font-weight: bold;
    
}
.general-table tr.select-set-row .checkcell {
    vertical-align: middle;
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-weight: bolder;
}
.rowLoadAnimation {
    opacity: 1;
    animation-name: rowFadeOut, rowFadeInOut;
    animation-duration: 2s, 2.5s;
    animation-iteration-count: 1, infinite;
    animation-timing-function: ease, ease;
    animation-delay: 0s, 2s
}

@keyframes rowFadeOut {
    0% { opacity: 1.0 }
    20% { opacity: 0.6 }
    100% { opacity: 0.6 }
}
@keyframes rowFadeInOut {
    0%,100% { opacity: 0.6 }
    50% { opacity: 0.3 }
}