.flexgrid-cell {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px;
    border-color: #C7C7CC;
    background: #fff;
    outline: 0;
    display: flex;
    align-items: center;
    justify-content: left;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.flexgrid-cell[data-hover]::after {
    background-color: var(--hover-color) !important;
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    touch-action: none;
}

div.flexgrid-cell > div[c1-data-loading] {
    width: 100%;
    height: 100%;
    background-color: #00000039;
    overflow: hidden;
}

    div.flexgrid-cell > div[c1-data-loading] > div {
        width: 70%;
        height: 100%;
        background: linear-gradient(to right, transparent, #ffffff52, transparent);
        animation: c1-skeleton-anim 2s infinite linear;
    }

@keyframes c1-skeleton-anim {
    0% {
        transform: translateX(-90%);
    }

    100% {
        transform: translateX(200%);
    }
}

.flexgrid-cell[edit] input {
    color: inherit;
    background-color: inherit;
}

@media not (hover: hover) {
    .flexgrid-cell {
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
}

.remove-left-border {
    border-left-width: 0 !important;
    margin-left: 0 !important;
}

.remove-top-border {
    border-top-width: 0 !important;
    margin-top: 0 !important;
}

.remove-right-border {
    border-right-width: 0 !important;
    margin-right: 0 !important;
}

.remove-bottom-border {
    border-bottom-width: 0 !important;
    margin-bottom: 0 !important;
}

.horizontal-gridlines {
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    margin: -0.5px 0 -0.5px 0;
}

.vertical-gridlines {
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    margin: 0 -0.5px 0 -0.5px;
}

.all-gridlines {
    border-style: solid;
    border-width: 1px;
    margin: -0.5px;
}

.none-gridlines {
    border-style: solid;
    border-width: 0;
    margin: 0;
}

.column-draggable {
    touch-action: none;
}

.row-draggable {
    touch-action: none;
}

.flexgrid {
    color: #000;
}

.flexgrid > c1ScrollViewer {
    cursor: default;
    /* Specific for FF issue:  allow text selection on container (FlexGrid) and prevent on nested elements (Cells)*/
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.flexgrid-column-resize-indicator {
    position: absolute;
    width: 2px;
    transform: translateX(-50%);
    height: calc(100% - 10px);
    background: linear-gradient(to bottom, black 90%, transparent);
}

.flexgrid-row-resize-indicator {
    position: absolute;
    width: calc(100% - 10px);
    transform: translateY(-50%);
    height: 2px;
    background: linear-gradient(to right, black 90%, transparent);
}

.flexgrid-column-drag-indicator {
    position: absolute;
    width: 4px;
    transform: translateX(-50%);
    height: calc(100% - 10px);
    background: linear-gradient(to bottom, #8AC2DE 90%, transparent);
}

.flexgrid-row-drag-indicator {
    position: absolute;
    height: 4px;
    transform: translateY(-50%);
    width: calc(100% - 10px);
    background: linear-gradient(to right, #8AC2DE 90%, transparent);
}

.flexgrid-cell .grid-filter-cell-dropdown-content .c1ScrollViewer {
    width: max-content;
}

.flexgrid-cell .outlined-drop-down {
    background: inherit;
    color: inherit;
}

.flexgrid-cell .dropdown-popup {
    color: black;
}

.flexgrid-cell > .column-header-options-container {
    display: none;
    position: sticky;
    right: 0;
    padding-right: 5px;
    height: 100%;
    background: inherit;
}

.flexgrid-cell:hover > .column-header-options-container {
    display: block;
}

.flexgrid-cell .grid-column-options-menu {
    max-height: 60vh;
    overflow-y: auto;
}

    .flexgrid-cell .grid-column-options-menu > .c1-menu-item > .custom-template-container {
        padding: 0;
        cursor: auto;
    }

/* Disables the selection */
.disableselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge*/
    user-select: none; /* Non-prefixed version, currently 
                                  not supported by any browser */
}