[grid-view] {
    padding-top: 10px;
}

[grid-view] table {
    border-collapse: collapse;
    background: white;
    table-layout: fixed;
    width: 100%;
}

@media only screen and (max-width: 768px) {
    [grid-view] table {
        width: unset;
    }
}

[grid-view] table.loaded {
    opacity: 1;
}
[grid-view] tr:nth-child(even)  {background: #e1f5fe}
[grid-view] tr:nth-child(odd) {background: #FFF}

[grid-view] td,
[grid-view] th {
    padding: 8px 0px;
    border: 1px solid #ececeb;
    overflow: visible;
    white-space: wrap;
}

[grid-view] .pane {
    background: transparent;
}

[grid-view] .pane-hScroll {
    overflow: auto;
    background: transparent;
}

[grid-view] .pane-vScroll {
    overflow-y: hidden;
    overflow-x: hidden;
    width: 100%;
    display: inline-block;
    background: transparent;
}

[grid-view] .pane-vScroll:hover {
    overflow-y: auto;
    overflow-x: hidden;
}

[grid-view] .tr {
    overflow: auto;
}

[grid-view] th,
[grid-view] .tr .th {
    vertical-align: middle;
    background-color: #0d47a1;
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ddd5f5f5', endColorstr='#ffeeeeee', GradientType=0);
    white-space: normal;
    text-transform: uppercase;
    color: #fafafa;
    font-size: 11px;
    text-align: left;
    line-height: 24px;
    min-height: 24px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    text-align: center;
}

[grid-view] .tr .th {
    vertical-align: top;
}

[grid-view] .thead {
    display: none;
    border-left: 1px solid #ddd;
}

[grid-view] .thead .tr .th {
    box-sizing: border-box;
    border: 0px;
    box-shadow: 0px 0px 0px 1px #ddd;
}

[grid-view] .tdata td.freezed {
    position: absolute;
}

[grid-view] th i {
    margin-top: 2px;
}

[grid-view] .tr .th i {
    margin: 5px 7px 0px 0px;
}

[grid-view] .thead.show {
    position: fixed;
    z-index: 100;
    white-space: nowrap;
}

[grid-view] .tcols-container {
    position: fixed;
    z-index: 101;
    overflow: hidden;
}

[grid-view] .tcols th {
    position: absolute;
    opacity: 1;
    z-index: 102;
}

[grid-view] .tcols tbody {
    overflow: hidden;
}

[grid-view] td.rowSpanned {
    display: none;
}

[grid-view] .data-grid-paging {
    padding-bottom: 10px;
}

[grid-view] .control-bar-spacer {
    height: 38px;
}

[grid-view] .data-grid-paging.freeze {
    position: absolute;
    margin-top: -38px;
}

[grid-view] .data-grid-paging .paging-input {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    display: inline-block;
    width: 40px;
}

[grid-view] .data-grid-paging .paging-input:focus {
    width: 60px;
}

[grid-view] .data-grid-paging .btn,
[grid-view] .data-grid-paging .form-control {
    padding: 0px 7px !important;
    height: 25px !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

[grid-view] .data-grid-paging .paging-total-record {
    border-left: 1px solid #ccc;
    margin: 2px 5px;
    padding: 3px 8px;
}

[grid-view] tr.g td {
    cursor: default;
    background: #ffc;
    box-shadow: none;
    text-transform: uppercase;
    color: #6F6F6F;
    font-size: 11px;
    font-weight: bold;
    border-left: 0px;
    border-right: 0px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

[grid-view] tr.g td:first-child {
    border-left: 1px solid #ddd;
}

[grid-view] tr.g td:last-child {
    border-right: 1px solid #ddd;
}

[grid-view] tr.a td {
    background: #fff;
    border: 0px;
}

[grid-view] td.aggregate {
    border: 1px solid #ddd;
    font-weight: bold;
}

[grid-view] td.aggregate.lv-0 {
    background: #fafafa;
}

[grid-view] td.aggregate.lv-1 {
    background: #ececeb;
}

[grid-view] td.aggregate.lv-2 {
    background: #e2e2e2;
}

[grid-view] tr.r:hover td {
    background-color: #ffe0b2;
}

[grid-view] .row-group-padding {
    display: inline-block;
}

[grid-view] input[type=checkbox],
[grid-view] label {
    padding: 0px 0px 0px 0px;
    margin: 2px 0px -1px 0px;
}

[grid-view] .row-header {
    padding: 0px 5px;
}

[grid-view] .row-g,
[grid-view] .row-r,
[grid-view] .row-a {
    padding: 6px 5px 6px 5px;
    line-height: 17px;
}

[grid-view] .t-checkbox {
    width: 25px;
    text-align: center;
    padding: 0px;
    min-width: 25px;
}

[grid-view] .t-checkbox label {
    margin: 0px -5px -3px -5px;
    padding: 2px 5px;
}

[grid-view] .g .t-checkbox label {
    margin: 0px -5px -3px -4px;
}

[grid-view] .row-state {
    position: absolute;
    opacity: 0.8;
    text-transform: uppercase;
}

[grid-view] .row-state-insert {
    background-color: #e6ffc9;
}

[grid-view] .row-state-edit,
[grid-view] .row-checked {
    background-color: #ddf2ff;
}

[grid-view] .row-state-remove {
    background-color: #ffe8e8;
}

[grid-view] tr:hover .row-state {
    position: absolute;
    opacity: 0;
    text-transform: uppercase;
}

[grid-view] .row-state-detail {
    position: absolute;
    margin-left: -19px;
    margin-top: -4px;
    padding: 6px 4px 5px 4px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border: 1px solid #ddd;
    border-right: 0px;
    height: 25px;
}

[grid-view] .editable .row-state-detail {
    margin-top: -2px;
}

[grid-view] .row-state-detail i {
    float: left;
    display: block;
    line-height: 12px;
    height: 12px;
}

[grid-view] tr:hover .row-state-detail {
    background: #FFFFAA;
}

[grid-view] .row-state-detail .row-state-options {
    margin: 16px 0px 0px -5px;
    border: 1px solid #ddd;
    opacity: 0;
    z-index: 99;
    border-top: 0px;
    padding: 2px 4px 4px 3px;
    border-bottom-left-radius: 5px;
    position: absolute;
    text-transform: uppercase;
    background: #FFFFAA;
    border-bottom-right-radius: 5px;
    -webkit-transition: opacity .2s ease-in;
    -moz-transition: opacity .2s ease-in;
    -o-transition: opacity .2s ease-in;
    -ms-transition: opacity .2s ease-in;
    transition: opacity .2s ease-in;
}

[grid-view] tr:hover .row-state-detail .row-state-options {
    opacity: 1;
}

[grid-view] .row-state-detail .btn {
    font-size: 10px;
    font-weight: bold;
}

[grid-view] td [contenteditable] {
    border: 0px;
    height: 100%;
    width: 85%;
    background-color: transparent;
    position: relative;
    padding: 5px 4px 4px 4px;
    min-height: 16px;
    display: inline-block;
    white-space: wrap;
    box-shadow: none;
    resize: none;
    margin: -2px 0px -1px 1px;
    box-sizing: content-box;
    background: transparent;
}


/* Lock Column */

[grid-view] .table-vScroll th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}

[grid-view] .table-vScroll .stick {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
}

[grid-view] .table-vScroll .stick {
    vertical-align: top;
    color: inherit;
    background-color: #ccc;
}

[grid-view] .table-vScroll th:not([scope=row]):first-child {
    left: 0;
    z-index: 3;
}


/* Scrolling wrapper */

div[tabindex="0"][aria-labelledby][role="region"] {
    overflow: auto;
}

div[tabindex="0"][aria-labelledby][role="region"]:focus {
    box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
    outline: .1em solid rgba(0, 0, 0, .1);
}

div[tabindex="0"][aria-labelledby][role="region"] table {
    margin: 0;
}

div[tabindex="0"][aria-labelledby][role="region"].rowheaders {
    background: linear-gradient(to right, transparent 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 4em 100%, 4em 100%, 1.4em 100%, 1.4em 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
}

div[tabindex="0"][aria-labelledby][role="region"].colheaders {
    background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 100% 4em, 100% 4em, 100% 1.4em, 100% 1.4em;
    background-attachment: local, local, scroll, scroll;
}


/* Strictly for making the scrolling happen. */

.table-vScroll .stick {
    min-width: 40vw;
}

@media all and (min-width: 30em) {
    .stick {
        min-width: 20em;
    }
}

.table-vScroll .stick+td {
    min-width: 24em;
}

div[tabindex="0"][aria-labelledby][role="region"]:nth-child(3) {
    max-height: 18em;
}

div[tabindex="0"][aria-labelledby][role="region"]:nth-child(7) {
    max-height: 15em;
    margin: 0 1em;
}