zino-grid.css

:host {
    display: block;
}
* {
    font-size: 15px;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
img {
    border: none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
.hidden {
    display: none;
}
.goto-page {
    width: 50px;
}
table {
    border-collapse: collapse;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);*/
    table-layout: fixed;
    width: 100%;
}
th[tabindex],
td[tabindex] {
    outline: none;
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
}
th, td {
    empty-cells: show;
    padding: 10px;
}
th {
    padding: 15px 10px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}
thead tr {
    background-color: var(--background-head, #cecece);
    color: var(--color-head, #FA4251);
}
tbody tr:nth-child(odd) {
    background-color: var(--background-odd, #e9e9e9);
    color: var(--color-odd, #333);
}
tbody tr:nth-child(even) {
    background-color: var(--background-even, #d9d9d9);
    color: var(--color-even, #222);
}
tbody tr {
    border-bottom: solid 1px #f2f2f2;
}
tbody tr:hover {
    background-color: var(--background-hover, #FFF1F2);
}
tfoot tr {
    background-color: var(--background-foot, #cecece);
    color: var(--color-foot, #222);
}
tfoot td {
    padding: 15px 10px;
}
tfoot [aria-colindex="2"] {
    text-align: center;
}
tfoot [aria-colindex="3"] {
    text-align: right;
}
[aria-sort] {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}
[aria-sort="none"]:after,
[aria-sort="none"]:before,
[aria-sort="ascending"]:before,
[aria-sort="descending"]:after {
    right: 10px;
    top: calc(50% - 10px);
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	border-color: rgba(0, 0, 0, 0);
	border-width: 5px;
	margin-left: -5px;
}
[aria-sort="none"]:before {
    border-bottom-color: var(--color-head1, #E5E5E5);
    top: calc(50% - 11px);
}
[aria-sort="none"]:after {
	border-top-color: var(--color-head1, #E5E5E5);
    bottom: calc(50% - 10px);
    top: auto;
}
[aria-sort="ascending"],
[aria-sort="descending"] {
    color: var(--color-head-active, #FA4251);
    text-decoration: underline;
}
[aria-sort="ascending"]:before {
	border-bottom-color: var(--color-head-active, #222);
}
[aria-sort="descending"]:after {
    border-top-color: var(--color-head-active, #222);
    bottom: calc(50% - 10px);
    top: auto;
}
button {
    background-color: var(--background-button, #fff);
    border: solid 1px #f0f0f0;
    border-radius: 0.25rem;
    color: var(--color-button, #FA4251);
    height: 32px;
    margin: 0 2px;
    padding: 0 10px;
    pointer-events: all;
    text-align: center;
}
button:not(:disabled):hover {
    background-color: #f9f9f9;
}
input, 
select {
    background-color: #fff;
    box-sizing: border-box;
    border: solid 1px #f0f0f0;
    border-radius: 0.25rem;
    height: 32px;
    padding: 0 5px;
}
.wrap-body tr:focus {
    background-color: var(--background-hover, #FFF1F2);
    border-bottom-color: var(--background-hover, #FFF1F2);
    outline: none;
}
input:focus,
select:focus,
button:focus {
    box-shadow: 0 0 0 0.2rem rgba(250, 66, 81, 0.25);
    outline: 0;
}
input[disabled],
input:disabled {
    opacity: 0.35;
    pointer-events: none;
}
button[disabled],
button:disabled {
    opacity: 0.35;
    pointer-events: none;
}
.wrap-head,
.wrap-foot {
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.wrap-head input {
    width: 100%;
}
.wrap-head tr:nth-child(2) th {
    padding: 0 10px 11px;
}
.wrap-body {
    max-height: 400px;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 0 0 white,
        0 -8px 0 0 white,
        0 0 10px rgba(0, 0, 0, 0.15);
}
.wrap-body::-webkit-scrollbar {
    background-color: #f5f5f5;
    width: 6px;
    height: 6px;
}
.wrap-body::-webkit-scrollbar-thumb {
    background-color: #FA4251;
}
.wrap-body::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
[dir="rtl"] th {
    text-align: right;
}
[dir="rtl"] [aria-sort] {
    padding-left: 20px;
    padding-right: 10px;
}
[dir="rtl"] [aria-sort="none"]:after,
[dir="rtl"] [aria-sort="none"]:before,
[dir="rtl"] [aria-sort="ascending"]:before,
[dir="rtl"] [aria-sort="descending"]:after {
    left: 15px;
    right: auto;
}
[dir="rtl"] tfoot [aria-colindex="3"] {
    text-align: left;
}