.grid {
    background-color: #fff;
    border: 1px solid #ccc;
    overflow: hidden;
    font-size: 12px;
}

    .grid:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    }


    .grid .table-header-grouping {
        background-color: #dce3e6;
        text-align: right;
        position: absolute;
        top: 32px;
        left: 0;
        right: 0;
        line-height: 32px;
        height: 32px;
        white-space: nowrap;
        overflow: hidden;
        padding-right: 1px;
    }

        .grid .table-header-grouping > div {
            text-align: center;
            text-indent: 4px;
            text-overflow: ellipsis;
            display: inline-block;
            white-space: nowrap;
            font-weight: bold;
            font-size: 12px;
            height: 100%;
            overflow: hidden;
            border-left: 1px solid rgb(204, 198, 198);
        }

    .grid .grouping {
        background-color: #dce3e6;
        width: 100%;
        padding-right: 6px;
        text-align: right;
        position: absolute;
        top: 0;
        line-height: 32px;
        height: 32px;
    }

        .grid .grouping .grouping-menu {
            float: left;
            width: 50px;
            text-align: left;
        }

            .grid .grouping .grouping-menu .dropdown-menu {
                right: unset;
                left: 0;
                top: 26px;
                text-align: right;
            }

                .grid .grouping .grouping-menu .dropdown-menu a {
                    padding: 4px;
                }

                    .grid .grouping .grouping-menu .dropdown-menu a img {
                        width: 22px;
                    }

        .grid .grouping .grouping-tags-box {
            float: right;
        }

            .grid .grouping .grouping-tags-box .grouping-tags {
                list-style-type: none;
                padding: 0;
                margin-bottom: 0;
            }

                .grid .grouping .grouping-tags-box .grouping-tags > li.grouping-drag-help {
                    float: right;
                    width: 200px;
                    border: 1px solid #ccc;
                    line-height: 24px;
                    margin-top: 3px;
                    margin-left: 5px;
                    background-color: #fff;
                    padding-right: 5px;
                    padding-left: 5px;
                    border-radius: 12px;
                    cursor: default;
                }

                .grid .grouping .grouping-tags-box .grouping-tags > li.grouping-tag {
                    float: left;
                    width: auto !important;
                    min-width: 100px;
                    max-width: 180px;
                    border: 1px solid #ccc;
                    line-height: 24px;
                    margin-top: 3px;
                    margin-left: 5px;
                    background-color: #fff;
                    padding-right: 5px;
                    padding-left: 5px;
                    border-radius: 12px;
                    cursor: default;
                }

                    .grid .grouping .grouping-tags-box .grouping-tags > li.grouping-tag span {
                        margin-right: 4px;
                    }

                    .grid .grouping .grouping-tags-box .grouping-tags > li.grouping-tag .img-close {
                        float: left;
                        margin-top: 3px;
                        margin-left: 0;
                        border: 1px solid #ccc;
                        border-radius: 10px;
                        padding: 2px;
                        width: 18px;
                        cursor: pointer;
                        opacity: 0.5;
                    }

                        .grid .grouping .grouping-tags-box .grouping-tags > li.grouping-tag .img-close:hover {
                            opacity: 1;
                        }

                    .grid .grouping .grouping-tags-box .grouping-tags > li.grouping-tag .img-drag {
                        width: 16px;
                        cursor: grab;
                        display: inline-block;
                    }

                        .grid .grouping .grouping-tags-box .grouping-tags > li.grouping-tag .img-drag svg {
                            vertical-align: middle;
                        }

    .grid .grid-header {
        line-height: 32px;
        height: 32px;
        background-color: #e5ecf0;
        width: 100%;
        padding: 0 6px 0 4px;
        text-align: right;
        position: absolute;
        top: 0;
    }

        .grid .grid-header.selection-filter {
            background-color: #ffe0b2;
        }

        .grid .grid-header.with-grouping {
            top: 32px;
        }

        .grid .grid-header .grid-title {
            float: right;
            width: 100%;
        }

        .grid .grid-header .container-more > .dropdown-menu .analytical-view.dropdown-submenu:hover .dropdown-menu {
            display: block;
        }


        .grid .grid-header .container-more > .dropdown-menu {
            left: 0;
            top: 26px;
            right: unset;
        }

            .grid .grid-header .container-more > .dropdown-menu > li > a {
                line-height: 24px;
                cursor: pointer;
                padding-right: 16px;
                direction: rtl;
                font-size: 11px;
                height: 30px;
            }

                .grid .grid-header .container-more > .dropdown-menu > li > a div, .grid .grid-header .container-more > .dropdown-menu > li > a img {
                    width: 22px;
                    margin-left: 8px;
                    display: inline-block;
                    vertical-align: -7px;
                }

        .grid .grid-header .container-more.notify-change:before {
            content: " ";
            position: absolute;
            top: 16px;
            left: 4px;
            border-radius: 4px;
            border: 4px solid red;
        }

        .grid .grid-header .container-more.notify-change > .dropdown-menu > li.customize-field:before {
            content: " ";
            position: absolute;
            top: 7px;
            right: 16px;
            border-radius: 4px;
            border: 4px solid red;
        }

    .grid .grid-tag-related:before {
        content: " ";
        position: absolute;
        top: -2px;
        left: 80px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid #54637a;
    }

    .grid .grid-tag-filter:before {
        content: " ";
        position: absolute;
        top: -2px;
        left: 107px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid #54797a;
    }

    .grid .grid-tag-related, .grid .grid-tag-filter, .grid .grid-tag-manage {
        display: none;
        padding: 0;
        height: 430px;
        background-color: #f0f0f0;
        box-shadow: 0 9px 12px rgba(0, 0, 0, 0.34);
        border-radius: 0 0 2px 2px;
        position: absolute;
        left: 0;
        top: 33px;
        width: 406px;
    }


    .grid .grid-header .grid-header-buttons {
        margin: 0;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100%;
        direction: ltr;
        z-index: 1;
    }

    .grid .grid-header-buttons .container-button .dropdown-menu {
        max-height: 350px;
        overflow-y: auto;
    }

    .grid .grid-header-buttons .container-button .grid-new-row svg {
        width: 24px;
        margin-left: 5px;
        vertical-align: -10px;
    }

    .grid .grid-header .grid-header-buttons > div:not(.container-more), .grid .grid-header .grid-header-buttons > button:not(.container-more) {
        float: left;
        margin-left: 5px;
        line-height: 0;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin-top: 3px;
        direction: rtl;
    }



    .grid .grouping .grouping-menu > img, .grid .grid-header .grid-header-buttons > img,
    .grid .grid-header .grid-header-buttons .ico-more, .grid .grid-header .grid-header-buttons .ico-tag-related, .grid .grid-header .grid-header-buttons .ico-tag-filter,
    .grid .grid-header .grid-header-buttons .ico-filter, .grid .grid-header .grid-header-buttons .ico-refresh {
        float: left;
        margin-left: 5px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin-top: 6px !important;
        display: grid;
    }


    .grid thead td.extend-header, .grid tbody td.extend-data {
        display: none;
    }

    .grid .grid-header .grid-count {
        margin-right: 5px;
    }

    .grid tbody tr.header-grouping {
        font-weight: bold;
        font-size: 12px;
        background-color: #CFD8DC;
        border-bottom: 1px solid #b5b1b1;
    }

        .grid tbody tr.header-grouping .grouping-expand {
            cursor: pointer;
            margin-right: 4px;
            margin-left: 10px;
            display: inline-block;
            font-size: 20px;
            position: relative;
            top: 2px;
        }

        .grid tbody tr.header-grouping td.group-by-2 {
            padding-right: 20px;
        }

        .grid tbody tr.header-grouping td.group-by-3 {
            padding-right: 40px;
        }

        .grid tbody tr.header-grouping td.group-by-4 {
            padding-right: 60px;
        }

        .grid tbody tr.header-grouping td.group-by-5 {
            padding-right: 80px;
        }

        .grid tbody tr.header-grouping td.group-by-6 {
            padding-right: 100px;
        }

        .grid tbody tr.header-grouping td.group-by-7 {
            padding-right: 120px;
        }

        .grid tbody tr.header-grouping td.group-by-8 {
            padding-right: 140px;
        }

        .grid tbody tr.header-grouping td.group-by-9 {
            padding-right: 160px;
        }

    .grid tbody tr.row-summery {
        background-color: #e3f2fd;
    }

    .grid tbody tr.ui-draggable-dragging {
        background-color: #07C;
        color: White;
        left: -16px !important;
    }

        .grid tbody tr.ui-draggable-dragging td.column-select .move, .grid tbody tr.selected svg {
            fill: #fff !important
        }

    .grid tbody tr.selected {
        background-color: #607D8B;
        color: #fff;
    }

    .grid tbody tr.active, .grid tbody tr.active td {
        background-color: #0277BD !important;
        color: #fff;
    }

        .grid tbody tr.active td .text .checkbox-column.checked::after {
            color: #fff !important;
        }

        .grid tbody tr.active .link-control {
            color: #fff !important;
            border-bottom-color: #fff !important;
        }

        .grid tbody tr.active .column-tag svg {
            fill: #fff !important;
        }


    .grid tbody tr:focus {
        outline: 0;
    }

    .grid tbody tr.disabled {
        background-color: #f0f0f0;
    }

    .grid .sum-footer {
        height: 28px;
        line-height: 28px;
        background-color: #cfd8dc;
        text-align: right;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        white-space: nowrap;
        overflow: hidden;
        display: none;
    }

        .grid .sum-footer > div {
            text-indent: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: table-cell;
            white-space: nowrap;
            border-right: 1px solid #ccc6c6;
            font-weight: bold;
            font-size: 12px;
            height: 100%;
        }

        .grid .sum-footer.with-grouping {
            height: 38px;
            line-height: 38px;
            background-color: #bbdefb;
        }

    .grid .column-select {
        min-width: 40px;
        width: 40px;
        text-align: left;
        padding: 0;
    }

        .grid .column-select.without-checked {
            min-width: 18px;
            width: 18px;
        }

    .grid .column-tag {
        min-width: 24px;
        width: 24px;
        text-align: center;
    }

        .grid .column-tag svg {
            width: 16px;
            vertical-align: -3px;
        }

    .grid .column-expandable {
        min-width: 22px;
        width: 22px;
    }

        .grid .column-expandable.column-collapse svg {
            transform: rotate(0);
        }

        .grid .column-expandable.column-expand svg {
            transform: rotate(270deg);
        }

        .grid .column-expandable svg {
            width: 20px;
        }

    .grid .column-select input[type="checkbox"] {
        float: left;
    }

    .grid .column-select .move {
        float: right;
        width: 15px;
        cursor: grab;
        display: none;
    }


.grid-footer {
    line-height: 28px;
    background-color: #f0f0f0;
    text-align: right;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

    .grid-footer .grid-selection, .grid-footer .grid-selection-delete {
        float: left;
        margin-left: 16px;
        color: #1976D2;
        border-bottom: 1px dashed #1976D2;
        line-height: 21px;
        margin-top: 4px;
        cursor: pointer;
    }

    .grid-footer .grid-selection-all {
        float: left;
        margin-left: 16px;
        line-height: 21px;
        margin-top: 4px;
        color: #c92f00;
    }

.grid .grid-footer .ico-summery {
    cursor: pointer;
    overflow: unset;
    position: relative;
    text-align: center;
    min-width: 38px;
    width: 38px;
    display: inline-block;
    top: -16px;
}

    .grid .grid-footer .ico-summery > span {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .grid .grid-footer .ico-summery .dropdown-toggle img {
        width: 24px;
        height: 24px;
    }

    .grid .grid-footer .ico-summery img {
        width: 20px;
        height: 20px;
    }

    .grid .grid-footer .ico-summery .dropdown-menu {
        top: -115px !important;
        text-align: right;
        direction: ltr;
    }

        .grid .grid-footer .ico-summery .dropdown-menu span {
            margin-right: 2px;
            display: inline-block;
        }

        .grid .grid-footer .ico-summery .dropdown-menu a {
            padding: 0 5px 2px;
        }


.grid-footer span {
    margin-left: 3px;
    margin-right: 3px;
}

.grid-footer .ico-prev, .grid-footer .ico-next {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.grid-footer .ico-go {
    position: relative;
    left: 20px;
    cursor: pointer;
    border: 0;
    width: 24px;
    height: 24px;
    display: inline-block;
}

    .grid-footer .ico-prev svg, .grid-footer .ico-next svg, .grid-footer .ico-go svg {
        vertical-align: middle;
    }

.grid-footer input[type="text"] {
    border: 1px solid #CECECE;
    border-radius: 10px !important;
    background-color: #EAEAEA;
    font-size: 11px;
    height: 20px;
    text-align: right;
    text-indent: 9px;
    width: 72px;
    margin-right: 10px;
    outline: 0;
    font-family: seyagh;
}

.grid table {
    border-collapse: collapse;
    overflow: hidden;
    display: block;
    position: absolute;
    left: 0;
    top: 32px;
    right: 0;
    border-top: 1px solid #ccc;
}

    .grid table.table-header.with-grouping, .grid table.table-header.with-header-grouping {
        top: 64px;
    }

    .grid table.table-body {
        bottom: 28px;
        top: 60px;
        overflow-y: scroll;
        overflow-x: scroll;
        background-color: #fff;
    }

        .grid table.table-body.with-sum-footer {
            bottom: 56px;
        }

        .grid table.table-body.with-grouping {
            top: 92px;
            bottom: 66px;
        }

        .grid table.table-body.with-header-grouping {
            top: 92px;
        }

        .grid table.table-body.no-paging {
            bottom: 0;
        }

        .grid table.table-body.without-header {
            top: 0;
        }

        .grid table.table-body.without-footer {
            bottom: 0;
        }

        .grid table.table-body tbody {
            display: block;
        }

.grid .table-header {
    background-color: #eff2f5;
}

.grid thead {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    display: block;
}

    .grid thead td, .grid tbody td, .grid tbody tr.row-edit td > * {
        height: 27px;
        border: 1px solid #d0d0d0;
        border-top-width: 0;
        padding-top: 2px;
    }

        .grid thead td .text, .grid tbody td .text, .js-grid-view-contents .text {
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            white-space: nowrap;
            padding: 0 4px;
            font-size: 11px;
        }

            .grid tbody td .text .checkbox-column {
                font-size: 20px;
                margin-top: 7px;
                display: block;
                cursor: default;
                font-family: seyagh-normal;
            }

                .grid tbody td .text .checkbox-column.checked:after {
                    color: #249099;
                    content: "";
                }

            .grid tbody td .text .link-control {
                border-bottom: 1px dashed #0277bd;
                padding-bottom: 4px;
                display: inline-block;
                color: #0277bd;
                cursor: pointer;
            }

    .grid thead td {
        position: relative;
        padding-top: 5px;
    }

        .grid thead td div.resize {
            top: 0;
            left: 0;
            bottom: 0;
            width: 5px;
            position: absolute;
            cursor: col-resize;
        }

        .grid thead td div.sort-no {
            position: absolute;
            left: 3px;
            bottom: -2px;
            font-size: 10px;
        }

        .grid thead td.arrow-up:before, .grid thead td.arrow-down:before {
            content: " ";
            position: absolute;
            top: 10px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
        }

        .grid thead td.arrow-down:before {
            border-top: 6px solid #494949;
        }

        .grid thead td.arrow-up:before {
            border-bottom: 6px solid #494949;
        }

        .grid thead td.arrow-down.multiple:before {
            border-top: 6px solid #0097a7;
        }

        .grid thead td.arrow-up.multiple:before {
            border-bottom: 6px solid #0097a7;
        }

        .grid thead td div.sort-no.multiple {
            color: #0097a7;
        }

    .grid thead tr.row-filter {
        display: none;
        background-color: #fff;
    }

        .grid thead tr.row-filter td {
            padding-left: 5px;
            padding-right: 5px;
        }

            .grid thead tr.row-filter td input {
                width: calc(100% - 20px);
                float: right;
            }

            .grid thead tr.row-filter td .ico-filter {
                margin-top: 2px;
                margin-right: 4px;
                width: 16px;
                height: 16px;
                float: left;
                cursor: pointer;
            }

.grid tbody tr {
    -webkit-box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
    box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
    line-height: 12px;
}

    .grid tbody tr.row-expandable {
        display: none;
    }

    .grid tbody tr.row-hover:hover {
        -webkit-box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
        box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
        z-index: 1;
    }

    .grid tbody tr.row-hover.active:hover svg, .grid tbody tr.row-hover.selected:hover svg {
        fill: #fff !important;
    }

    .grid tbody tr.row-hover.active .column-expandable svg, .grid tbody tr.row-hover.selected .column-expandable svg {
        fill: #fff !important;
    }


.grid .column-context-menu, .grid .column-delete-row {
    min-width: 30px;
    width: 30px;
}

.grid tbody tr td.column-context-menu {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNzIgMTcyIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSIiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBmb250LWZhbWlseT0ibm9uZSIgZm9udC13ZWlnaHQ9Im5vbmUiIGZvbnQtc2l6ZT0ibm9uZSIgdGV4dC1hbmNob3I9Im5vbmUiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbm9ybWFsIj48cGF0aCBkPSJNMCwxNzJ2LTE3MmgxNzJ2MTcyeiIgZmlsbD0ibm9uZSIvPjxnIGZpbGw9IiMxYWJjOWMiPjxnIGlkPSJzdXJmYWNlMSI+PHBhdGggZD0iTTI2Ljg3NSwyNi44NzV2MTE4LjI1aDQwLjY0ODQ0bDE0LjYxMzI4LDE0LjYxMzI4bDMuODYzMjgsMy42OTUzMWwzLjg2MzI4LC0zLjY5NTMxbDE0LjYxMzI4LC0xNC42MTMyOGg0MC42NDg0NHYtMTE4LjI1ek0zNy42MjUsMzcuNjI1aDk2Ljc1djk2Ljc1aC0zNC40MzM1OWwtMS42Nzk2OSwxLjUxMTcybC0xMi4yNjE3MiwxMi4yNjE3MmwtMTIuMjYxNzIsLTEyLjI2MTcybC0xLjY3OTY5LC0xLjUxMTcyaC0zNC40MzM1OXpNNTMuNzUsNTkuMTI1djEwLjc1aDEwLjc1di0xMC43NXpNNzUuMjUsNTkuMTI1djEwLjc1aDQzdi0xMC43NXpNNTMuNzUsODAuNjI1djEwLjc1aDEwLjc1di0xMC43NXpNNzUuMjUsODAuNjI1djEwLjc1aDQzdi0xMC43NXpNNTMuNzUsMTAyLjEyNXYxMC43NWgxMC43NXYtMTAuNzV6TTc1LjI1LDEwMi4xMjV2MTAuNzVoNDN2LTEwLjc1eiIvPjwvZz48L2c+PC9nPjwvc3ZnPg==');
    background-size: 90% 90%;
    cursor: pointer;
}

.grid tbody tr td.column-delete-row {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgc3R5bGU9ImZpbGw6I2QzMmYyZiI+PGc+PHBhdGggIGQ9Ik0gMTAgMyBMIDkgNCBMIDUgNCBMIDUgNiBMIDE5IDYgTCAxOSA0IEwgMTUgNCBMIDE0IDMgWiBNIDYgNyBMIDYgMjAgQyA2IDIxLjEwMTU2MyA2Ljg5ODQzOCAyMiA4IDIyIEwgMTYgMjIgQyAxNy4xMDE1NjMgMjIgMTggMjEuMTAxNTYzIDE4IDIwIEwgMTggNyBaIE0gOSAxMCBMIDExIDEwIEwgMTEgMTkgTCA5IDE5IFogTSAxMyAxMCBMIDE1IDEwIEwgMTUgMTkgTCAxMyAxOSBaICI+PC9wYXRoPjwvZz48L3N2Zz4=');
    background-size: 90% 90%;
    cursor: pointer;
}

.grid tbody tr td .text .checkbox-control:checked:after {
    top: -1px;
    left: 15px;
}

.grid tbody tr td.active {
    border: 1.5px solid #42A5F5;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid tbody tr:hover td.column-select .move {
    display: block;
    margin-right: 2px;
}

.grid .grid-loading {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: #f1f1f1cc;
    display: none;
}

    .grid .grid-loading svg {
        position: absolute;
        top: 44%;
        left: 48%;
    }

.grid .grid-row-lazy {
    display: block;
    height: 0;
}


.grid .grid-empty {
    position: absolute;
    top: 28px;
    width: 100%;
    display: none;
}

    .grid .grid-empty > * {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 0;
    }



    .grid .grid-empty div {
        position: absolute;
        top: 10%;
        width: 100%;
        font-size: 14px;
        text-align: center;
        color: #635f5f;
    }

    .grid .grid-empty svg {
        width: 32px;
        cursor: pointer;
        margin-left: 5px;
        vertical-align: -14px;
    }

.grid .checkbox-control:before, .grid .checkbox-control:checked:after, .grid .checkbox-control:checked:before {
    content: '';
    display: inline-block;
    position: relative;
}

.grid .checkbox-control {
    font-family: seyagh-normal;
    margin-top: 0 !important;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-left: 4px !important;
}

    .grid .checkbox-control:before {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        top: 0;
        left: 0;
        border: 2px solid #767676;
        background-color: #fff;
    }

    .grid .checkbox-control:checked:before {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        top: 0;
        left: 0;
        border: 2px solid #0072c6;
        background-color: #0072c6;
    }

    .grid .checkbox-control:checked:after {
        width: 6px;
        height: 9px;
        font-size: small;
        top: -20px !important;
        left: -5px !important;
    }

    .grid .checkbox-control:focus, .grid .checkbox-control:focus:before, .grid .checkbox-control:checked:focus:before {
        outline: 0 !important;
        border-color: #66afe9;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
    }

.js-grid-view-contents {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    background: #fff;
    box-shadow: 2px 2px 5px #aaa;
    padding: 0;
    display: none;
}

    .js-grid-view-contents .grid table {
        margin-bottom: 0;
        overflow-x: hidden;
    }

    .js-grid-view-contents .grid thead td {
        border: none;
    }

.grid .row-edit {
    display: none;
}

.grid tbody .edit {
    width: 100%;
    padding-right: 2px;
    padding-left: 2px;
}

    .grid tbody .edit > *:not([type="checkbox"]) {
        width: 100%;
        height: 26px;
        position: relative;
        border-color: #969696;
    }

.grid-filter {
    padding: 4px 0;
    position: absolute;
    display: none;
    width: 155px;
    background-color: rgb(255, 255, 255);
    border: none;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    z-index: 50000;
    -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
}

.grid-tag-assign {
    position: absolute;
    border: 1px solid #ff9800;
    border-radius: 3px;
    background-color: #f0f0f0;
    box-shadow: 0 9px 12px rgba(0, 0, 0, 0.34);
    padding: 16px;
    display: none;
}

    .grid-tag-assign .grid-tag-assign-header {
        font-weight: 700;
        color: #666;
    }

.grid .grid-header-buttons .system-button-control {
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
    display: inline-block;
    border-radius: 4px;
    border: 0;
    overflow: hidden;
    font-size: 11px;
}

.grid-filter > div {
    line-height: 34px;
    padding: 0 5px;
}

    .grid-filter > div:hover {
        background-color: #0072c6;
        color: #fff;
        cursor: pointer;
    }

    .grid-filter > div:not(:last-child) {
        /*border-bottom: 1px solid #ebebeb;*/
    }

    .grid-filter > div .grid-filter-img {
        width: 34px;
        float: right;
        height: 30px;
        text-align: center;
    }

        .grid-filter > div .grid-filter-img svg {
            width: 18px;
            fill: #1565c0 !important;
            vertical-align: middle;
        }

    .grid-filter > div:hover .grid-filter-img svg {
        fill: #fff !important;
    }

.combo-dropdown-menu {
    position: absolute;
    width: 100%;
    min-width: 420px;
    height: 200px;
    padding: 0;
    z-index: 99999999999999;
    display: none;
    margin: 2px 0 0;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

    .combo-dropdown-menu ul {
        height: calc(100% - 25px);
        overflow: auto;
        width: 100%;
        padding: 5px 0;
        text-indent: 5px;
        margin-bottom: 0;
    }

    .combo-dropdown-menu li {
        list-style: none;
        height: 26px;
        line-height: 26px;
        text-align: right;
        cursor: pointer;
        font-size: 11px;
        white-space: nowrap;
    }

        .combo-dropdown-menu li:hover {
            background-color: #ccc;
        }

        .combo-dropdown-menu li.active {
            background-color: #07C;
            color: #fff;
        }

    .combo-dropdown-menu .combo-status {
        text-align: right;
        padding: 0 5px;
        font-size: 11px;
        line-height: 25px;
    }

    .combo-dropdown-menu .loading {
        position: absolute;
        top: 45%;
        left: 45%;
    }

.context-menu-container {
    position: absolute;
    width: 200px;
    display: none;
    border: none;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    z-index: 1000;
}

    .context-menu-container > div {
        line-height: 28px;
        padding-right: 5px;
        font-size: 11px;
    }

        .context-menu-container > div:hover {
            background-color: #0072c6;
            color: #fff;
            cursor: pointer;
        }

        .context-menu-container > div span {
            float: left;
            margin-left: 5px;
        }
