/**
 ****************************
 * Generic Styles
 ****************************
*/
// if we don't do this, then the width and height of the grid would be ignored,
// as there is no default display for the element ag-grid-a2 (as it's not a natural dom element)
ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia  {
    display: block;
}

.ag-hidden {
    display: none !important;
}

.ag-invisible {
    visibility: hidden !important;
}

.ag-faded {
    opacity: 0.3;
}

.ag-width-half {
    display: inline-block;
    width: 50% !important;
}

.ag-unselectable {
    user-select: none !important; // disable user mouse selection
}

.ag-selectable {
    user-select: text !important;
}

.ag-select-agg-func-popup {
    position: absolute;
}

.ag-input-wrapper {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    line-height: normal;
    position: relative;
    overflow: hidden;
}

// setting shake class to an item will give it a left ot right animation
// used for the 'left' and 'rigth' arrows when dragging columns and scrolling
.ag-shake-left-to-right {
    animation-direction: alternate;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    animation-name: ag-shake-left-to-right;
}

@keyframes ag-shake-left-to-right {
    from {
        padding-left: 6px;
        padding-right: 2px;
    }

    to {
        padding-left: 2px;
        padding-right: 6px;
    }
}

.ag-root-wrapper {
    position: relative; // set to relative, so absolute popups appear relative to this
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &.ag-layout-normal {
        height: 100%;
    }
    .ag-watermark {
        position: absolute;
        bottom: 10px;
        right: 25px;
        opacity: 0.5;
        transition: opacity 1s ease-out 3s;
        &:before {
            content: '';
            background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDk0cHgiIGhlaWdodD0iMjM5cHgiIHZpZXdCb3g9IjAgMCA0OTQgMjM5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ny4xICg0NTQyMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+TG9nbzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGQ9Ik0wLjYxMjg0OTkzMSwxMDggTDAuNjEyODQ5OTMxLDY3LjQ1OTYzNzQgTDAuNjEyODQ5OTMxLDY3LjQ1OTYzNzQgQzAuNjEyODQ5OTMxLDYyLjEwMDY1MzYgMy40NzE4MzM3OCw1Ny4xNDg3NDgzIDguMTEyODQ5OTMsNTQuNDY5MjU2NCBMOTguMzA2NDI1LDIuMzk1OTcxNTcgTDk4LjMwNjQyNSwyLjM5NTk3MTU3IEMxMDIuOTQ3NDQxLC0wLjI4MzUyMDM1OCAxMDguNjY1NDA5LC0wLjI4MzUyMDM1OCAxMTMuMzA2NDI1LDIuMzk1OTcxNTcgTDExMy4zMDY0MjUsMi4zOTU5NzE1NyBMMjAzLjUsNTQuNDY5MjU2NCBMMjAzLjUsNTQuNDY5MjU2NCBDMjA4LjE0MTAxNiw1Ny4xNDg3NDgzIDIxMSw2Mi4xMDA2NTM2IDIxMSw2Ny40NTk2Mzc0IEwyMTEsMTM4IEwxODEsMTM4IEwxODAuOTk3MDQxLDkzLjk5OTk5OTggTDE4MC45OTYwMzIsOTMuOTk5OTk5OSBDMTgwLjk5NTQ3NSw4NS43MTYxMjI2IDE3NC4yNzk5MDksNzkuMDAxMDA4NyAxNjUuOTk2MDMyLDc5LjAwMTAwODcgTDEyMiw3OC45OTk5OTk5IEMxMTMuNzE1NzI5LDc4Ljk5OTk5OTkgMTA3LDg1LjcxNTcyODYgMTA3LDkzLjk5OTk5OTkgTDEwNywxMzYuMDE1NjIzIEwxMDcsMTM2LjAxNTYyMyBDMTA3LDE0NC4yOTk4OTUgMTEzLjcxNTcyOSwxNTEuMDE1NjIzIDEyMiwxNTEuMDE1NjIzIEwxNjgsMTUxLjAxNTYyMyBMMTY4LDE2MyBDMTY4LDE2NC42NTY4NTQgMTY2LjY1Njg1NCwxNjYgMTY1LDE2NiBMMTIwLDE2NiBMMTIwLDE3OSBMMTY1Ljk5NjAzMiwxNzkgTDE2NS45OTYwMzIsMTc4Ljk5Nzg3NyBDMTc0LjI3OTQ3NCwxNzguOTk3ODc3IDE4MC45OTQ4NiwxNzIuMjgzNDQyIDE4MC45OTYwMzIsMTY0IEwxODEsMTUwLjk2MDU1NCBMMjExLDE1MC45NjA1NTQgTDIxMSwxNzEuNjA2MjA3IEwyMTEsMTcxLjYwNjIwNyBDMjExLDE3Ni45NjUxOTEgMjA4LjE0MTAxNiwxODEuOTE3MDk2IDIwMy41LDE4NC41OTY1ODggTDExMy4zMDY0MjUsMjM2LjY2OTg3MyBMMTEzLjMwNjQyNSwyMzYuNjY5ODczIEMxMDguNjY1NDA5LDIzOS4zNDkzNjUgMTAyLjk0NzQ0MSwyMzkuMzQ5MzY1IDk4LjMwNjQyNSwyMzYuNjY5ODczIEw4LjExMjg0OTkzLDE4NC41OTY1ODggTDguMTEyODQ5OTMsMTg0LjU5NjU4OCBDMy40NzE4MzM3OCwxODEuOTE3MDk2IDAuNjEyODQ5OTMxLDE3Ni45NjUxOTEgMC42MTI4NDk5MzEsMTcxLjYwNjIwNyBMMC42MTI4NDk5MzEsMTIxIEwyNywxMjEgTDI3LDEzNiBDMjcsMTQ0LjI4NDI3MSAzMy43MTU3Mjg3LDE1MSA0MiwxNTEgTDQyLDE1MSBMMTAwLDE1MSBMMTAwLDk0IEMxMDAsODUuNzE1NzI4OCA5My4yODQyNzEyLDc5IDg1LDc5IEwyNyw3OSBMMjcsOTIgTDg0LDkyIEM4NS42NTY4NTQyLDkyIDg3LDkzLjM0MzE0NTggODcsOTUgTDg3LDk1IEw4NywxMDggTDAuNjEyODQ5OTMxLDEwOCBaIiBpZD0icGF0aC0xIj48L3BhdGg+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkxvZ28iPgogICAgICAgICAgICA8cGF0aCBkPSJNNDc3LDU1IEw0OTQsNTUgTDQ5NCwxNTEgTDQzNSwxNTEgQzQyNi43MTU3MjksMTUxIDQyMCwxNDQuMjg0MjcxIDQyMCwxMzYgTDQyMCw5NiBDNDIwLDg3LjcxNTcyODggNDI2LjcxNTcyOSw4MSA0MzUsODEgTDQzNSw4MSBMNDc3LDgxIEw0NzcsNTUgWiBNNDQwLDk4IEM0MzguMzQzMTQ2LDk4IDQzNyw5OS4zNDMxNDU4IDQzNywxMDEgTDQzNywxMzEgQzQzNywxMzIuNjU2ODU0IDQzOC4zNDMxNDYsMTM0IDQ0MCwxMzQgTDQ3NywxMzQgTDQ3Nyw5OCBMNDQwLDk4IFoiIGlkPSJkIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICAgICAgICAgIDxnIGlkPSJpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOTYuMDAwMDAwLCA1NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoLTYiIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMCAyNiAxNyAyNiAxNyA5NiAwIDk2Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iUGF0aC03IiBmaWxsPSIjRTExRjIyIiBwb2ludHM9IjAgMS4xMzY4NjgzOGUtMTMgMTcgMS4xMzY4NjgzOGUtMTMgMTcgMTcgMCAxNyI+PC9wb2x5Z29uPgogICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMzEsMTUxIEwzNDgsMTUxIEwzNDgsMTAxIEwzNDgsMTAxIEMzNDgsOTkuMzQzMTQ1OCAzNDkuMzQzMTQ2LDk4IDM1MSw5OCBMMzg5LDk4IEwzODksODEgTDM0Niw4MSBMMzQ2LDgxIEMzMzcuNzE1NzI5LDgxIDMzMSw4Ny43MTU3Mjg4IDMzMSw5NiBMMzMxLDE1MSBaIiBpZD0iciIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMzI0LDg2IEwzMjQsNzYgTDMyNCw3NiBDMzI0LDY3LjcxNTcyODggMzE3LjI4NDI3MSw2MSAzMDksNjEgTDI0OSw2MSBMMjQ5LDYxIEMyNDAuNzE1NzI5LDYxIDIzNCw2Ny43MTU3Mjg4IDIzNCw3NiBMMjM0LDEzNiBMMjM0LDEzNiBDMjM0LDE0NC4yODQyNzEgMjQwLjcxNTcyOSwxNTEgMjQ5LDE1MSBMMzA5LDE1MSBMMzA5LDE1MSBDMzE3LjI4NDI3MSwxNTEgMzI0LDE0NC4yODQyNzEgMzI0LDEzNiBMMzI0LDEwMCBMMjg3LDEwMCBMMjg3LDExNyBMMzA3LDExNyBMMzA3LDEzMSBMMzA3LDEzMSBDMzA3LDEzMi42NTY4NTQgMzA1LjY1Njg1NCwxMzQgMzA0LDEzNCBMMjU0LDEzNCBMMjU0LDEzNCBDMjUyLjM0MzE0NiwxMzQgMjUxLDEzMi42NTY4NTQgMjUxLDEzMSBMMjUxLDgxIEwyNTEsODEgQzI1MSw3OS4zNDMxNDU4IDI1Mi4zNDMxNDYsNzggMjU0LDc4IEwzMDQsNzggTDMwNCw3OCBDMzA1LjY1Njg1NCw3OCAzMDcsNzkuMzQzMTQ1OCAzMDcsODEgTDMwNyw4NiBMMzI0LDg2IFoiIGlkPSJHIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICAgICAgICAgIDxnIGlkPSJhZyI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29tYmluZWQtU2hhcGUiPgogICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSIjRTExRjIyIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJnIiBmaWxsPSIjRTExRjIyIiB4PSIxMjAiIHk9IjkyIiB3aWR0aD0iNDgiIGhlaWdodD0iNDYiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDAsMTIxIEw4NywxMjEgTDg3LDEzOCBMNDMsMTM4IEw0MywxMzggQzQxLjM0MzE0NTgsMTM4IDQwLDEzNi42NTY4NTQgNDAsMTM1IEw0MCwxMjEgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRTExRjIyIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
            filter: invert(50%);
            background-repeat: no-repeat;
            background-size: 110px 60px;
            display: block;
            height: 60px;
            width: 110px;
        }

      .ag-watermark-text {
        opacity: 0.5;
        font-weight: bold;
        font-family: Impact;
        font-size: 19px;
      }
    }
}

.ag-root-wrapper-body {
    display: flex;
    flex-direction: row;

    &.ag-layout-normal {
        flex: 1 1 auto;
        height: 0;
        min-height: 0;
    }
}

.ag-root {
    cursor: default;
    position: relative; // set to relative, so absolute popups appear relative to this
    display: flex;
    flex-direction: column;

    &.ag-layout-normal,
    &.ag-layout-auto-height {
        overflow: hidden; // was getting some 'shouldn't be there' scrolls, this sorts it out
        flex: 1 1 auto;
        width: 0;
    }

    &.ag-layout-normal {
        height: 100%;
    }
}

/**
 ****************************
 * Viewports
 ****************************
*/
.ag-header-viewport,
.ag-floating-top-viewport,
.ag-body-viewport,
.ag-pinned-left-cols-viewport,
.ag-center-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-floating-bottom-viewport,
.ag-body-horizontal-scroll-viewport,
.ag-virtual-list-viewport {
    position: relative;
    height: 100%;
    min-width: 0px;
    overflow: hidden;
    flex: 1 1 auto;
}

.ag-body-viewport {
    display: flex;

    &.ag-layout-normal {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    &:not(.ag-layout-print).ag-force-vertical-scroll {
        overflow-y: scroll;
    }
}

.ag-pinned-left-cols-viewport, .ag-pinned-right-cols-viewport {
    flex-grow: 1000;
}

.ag-center-cols-viewport {
    width: 100%;
    overflow-x: auto;
}

.ag-body-horizontal-scroll-viewport {
    overflow-x: scroll;
}

.ag-virtual-list-viewport {
    overflow: auto;
    width: 100%;
}

/**
 ****************************
 * Containers
 ****************************
*/
.ag-header-container,
.ag-floating-top-container,
.ag-body-container,
.ag-pinned-right-cols-container,
.ag-center-cols-container,
.ag-pinned-left-cols-container,
.ag-floating-bottom-container,
.ag-body-horizontal-scroll-container,
.ag-full-width-container,
.ag-floating-bottom-full-width-container,
.ag-virtual-list-container {
    position: relative;
}

// for when auto height is used but there is no row data
.ag-header-container, .ag-floating-top-container, .ag-floating-bottom-container {
    height: 100%;
    white-space: nowrap;
}

.ag-body-viewport {
    .ag-center-cols-clipper {
        min-height: 100%;
    }
    &.ag-layout-auto-height {
        .ag-center-cols-clipper, .ag-center-cols-container {
            min-height: 50px;
        }
    }
    .ag-center-cols-container {
        display: block;
    }

    &.ag-layout-print {
        flex: none;
        .ag-center-cols-clipper {
            min-width: 100%;
        }
    }
}

.ag-pinned-right-cols-container {
    display: block;
}

.ag-body-horizontal-scroll-container {
    height: 100%;
}

.ag-full-width-container,
.ag-floating-top-full-width-container,
.ag-floating-bottom-full-width-container {
    position: absolute;
    top: 0px;
    left: 0px;
    // turn off pointer events, because this container overlays the main row containers.
    // so when user clicks on space between full width rows, we want the mouse clicks to
    // pass onto the underlying container where the real rows are. eg if using full width
    // for row grouping, the groups will be in the full width container, but when user
    // opens a group the children are shown in the other containers - we want to make sure we
    // don't block mouse clicks to those other containers with the children.
    pointer-events: none;
}
.ag-full-width-container {
    width: 100%;
}

.ag-floating-bottom-full-width-container, .ag-floating-top-full-width-container {
    display: inline-block;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.ag-virtual-list-container {
    overflow: hidden;
}

/**
 ****************************
 * Scrollers
 ****************************
*/
.ag-center-cols-clipper {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ag-body-horizontal-scroll {
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    position: relative;
}

.ag-layout-print {
    .ag-body-horizontal-scroll {
        display: none;
    }
}

.ag-horizontal-left-spacer, .ag-horizontal-right-spacer {
    height: 100%;
    min-width: 0;
    flex-grow: 1000;
    overflow-x: scroll;
    &.ag-scroller-corner {
        overflow-x: hidden;
    }
}

/**
 ****************************
 * Headers
 ****************************
*/
.ag-header, .ag-pinned-left-header, .ag-pinned-right-header {
    display: inline-block;
    overflow: hidden;
    & .ag-header-cell-sortable {
        cursor: pointer;
    }
}
.ag-header {
    display: flex;
    width: 100%;
    white-space: nowrap;
}

.ag-header-icon {
    display: flex;
}

.ag-pinned-left-header {
    height: 100%;
}

.ag-pinned-right-header {
    height: 100%;
}

.ag-header-row {
    position: absolute;
    overflow: hidden; // so when floating filters are height 0px, the contents don't spill out
}

.ag-header-overlay {
    display: block;
    position: absolute;
}

.ag-header-cell {
    display: inline-flex;
    align-items: center;
    position: absolute;
    height: 100%;
    overflow: hidden;
}

.ag-header-group-cell-label, .ag-header-cell-label {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    align-items: center;
    text-overflow: ellipsis;
    align-self: stretch;
}

.ag-header-cell-label {
    .ag-header-cell-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.ag-numeric-header {
    .ag-header-cell-label {
        flex-direction: row-reverse;
    }
}

.ag-header-group-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-header-cell-resize {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 4px;
}

.ag-header-expand-icon {
    padding-left: 4px;
}

.ag-header-select-all {
    display: flex;
}

/**
 ****************************
 * Columns
 ****************************
*/
.ag-column-moving {
    .ag-cell {
        transition: left 0.2s;
    }

    .ag-header-cell {
        transition: left 0.2s;
    }

    .ag-header-group-cell {
        transition: left 0.2s, width 0.2s;
    }
}

/**
 ****************************
 * Column Panel
 ****************************
*/

.ag-column-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 auto;
}

.ag-column-select-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 4;
    flex-shrink: 1;
    flex-basis: 0;

    .ag-primary-cols-header-panel {
        display: flex;
        flex: none;

        .ag-column-name-filter {
            flex: 1 1 auto;
        }
        .ag-primary-cols-filter-wrapper {
            flex: 1 1 auto;
            input {
                width: 100%;
            }
        }
    }

    .ag-primary-cols-list-panel {
        flex: 1 1 auto;
        overflow: auto;
    }
}

.ag-column-drop {
    display: inline-flex;
    align-items: center;
    overflow: auto;
    width: 100%;

    .ag-column-drop-list {
        display: flex;
        align-items: center;
        .ag-column-drop-cell {
            display: flex;
            align-items: center;

            .ag-column-drop-cell-text {
                overflow: hidden;
                flex: 1 1 auto;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.ag-column-drop.ag-column-drop-vertical {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 0;
    align-items: stretch;
    > div {
        display: flex;
        align-items: center;
    }

    .ag-column-drop-list {
        align-items: stretch;
        flex-grow: 1;
        flex-direction: column;
        overflow-x: auto;
    }

    .ag-column-drop-empty-message {
        display: block;
    }
}

.ag-column-drop.ag-column-drop-horizontal {
    white-space: nowrap;
    overflow: hidden;
}

/**
 ****************************
 * Rows
 ****************************
*/
// for animations, allows rows to slide up and down,
.ag-row-animation .ag-row {
    transition: transform 0.4s, top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
}

.ag-row-no-animation .ag-row {
    transition: background-color 0.1s;
}

.ag-row {
    white-space: nowrap;
    width: 100%;
}

.ag-row-position-absolute {
    position: absolute;
}

.ag-row-position-relative {
    position: relative;
}

.ag-full-width-row {
    overflow: hidden;
    // turn events back on, as we removed them in the parent
    pointer-events: all;
}

.ag-row-inline-editing {
    z-index: 1;
}

.ag-row-dragging {
    z-index: 2;
}

.ag-stub-cell {
    display: flex;
    align-items: center;
}

/**
 ****************************
 * Cells
 ****************************
*/
.ag-cell {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-cell-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    &.ag-row-group {
        align-items: flex-start;
    }

    .ag-cell-value, .ag-group-value {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.ag-full-width-row.ag-row-group .ag-cell-wrapper {
    align-items: center;
}

.ag-cell-with-height {
    height: 100%;
}



.ag-group-cell-entire-row {
    display: inline-block;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    //position: absolute // took this out because of https://github.com/ag-grid/angular-grid/issues/115
    width: 100%;
}

.ag-footer-cell-entire-row {
    display: inline-block;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    //position: absolute // took this out because of https://github.com/ag-grid/angular-grid/issues/115
    width: 100%;
}


.ag-cell-inline-editing {
    z-index: 1;
    .ag-cell-edit-input, .ag-input-wrapper {
        height: 100%;
        width: 100%;
        line-height: normal;
    }
}

/**
 ****************************
 * Filters
 ****************************
*/
.ag-set-filter-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    > {
        div, span {
            display: flex;
        }
    }
}

.ag-filter {
    // for focus reasons, we need this for IE, otherwise for the set filter, the 'selectAll' click doesn't work
    // when you click on it when the quick filter has focus. this was a fix for AG-2258
    .ag-filter-checkbox {
        pointer-events: none;
    }

    .ag-filter-body-wrapper {
        display: flex;
        flex-direction: column;
    }

    .ag-filter-filter {
        flex: 1 1 auto;
    }
}

/**
 ****************************
 * Floating Filter
 ****************************
*/

.ag-floating-filter-full-body, .ag-floating-filter-body {
    .ag-react-container {
        height: 100%;
    }
}

.ag-floating-filter-body {
    display: flex;
    flex: 1 1 auto;
    height: 100%;

    input {
        margin: 0;
        flex: 1 1 auto;
        max-height: calc(100% - 1px);
    }
}

.ag-floating-filter-full-body {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    > div {
        flex: 1 1 auto;
    }

    input {
        margin: 0;
        width: 100%;
    }
    input[type="range"] {
        height: 100%;
    }
}
.ag-floating-filter {
    display: inline-block;
    position: absolute;
}

.ag-floating-filter-input {
    width: 100%;
}

.ag-floating-filter-input:read-only {
    background-color: #eee;
}

.ag-floating-filter-menu {
    position: absolute;
    user-select: none;
}

.ag-floating-filter-button {
    display: flex;
    flex: none;
}

/**
 ****************************
 * Drag & Drop
 ****************************
*/

// the ghost header cell doesn't live inside the grid, it's parent is the body element,
// so we cannot style using standard themes. hence we break the rules, and style it here
.ag-dnd-ghost {
    display: flex;
    align-items: center;
    background: #e5e5e5;
    border: 1px solid black;
    cursor: move;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
    padding: 3px;
    position: absolute;
    text-overflow: ellipsis;
    user-select: none;
    z-index: 10;
}

.ag-dnd-ghost-icon {
    padding: 2px;
}


/**
 ****************************
 * Overlay
 ****************************
*/
.ag-overlay {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.ag-overlay-panel {
    display: flex;
    height: 100%;
    pointer-events: none;
    width: 100%;
}

.ag-overlay-wrapper {
    display: flex;
    flex: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    &.ag-overlay-loading-wrapper {
        pointer-events: all;
    }
}

// for when auto height is used but there is no row data
.ag-overlay-no-rows-wrapper.ag-layout-auto-height {
    padding-top: 30px;
}

/**
 ****************************
 * Popup
 ****************************
*/
.ag-popup {
    > div{
        z-index: 5;
    }

}

.ag-popup-backdrop {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.ag-popup-editor {
    position: absolute;
    user-select: none;
    z-index: 1;
}

/**
 ****************************
 * Virtual Lists
 ****************************
*/
.ag-virtual-list-item {
    position: absolute;
    width: 100%;

    span:empty:not(.ag-icon) {
        border-left: 1px solid transparent;
    }
}

/**
 ****************************
 * Floating Top and Bottom
 ****************************
*/
.ag-floating-top {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
}

.ag-pinned-left-floating-top {
    display: inline-block;
    overflow: hidden;
    position: relative; // otherwise the % width of children is not relative to this element
    min-width: 0px;
    flex-grow: 1000;
}

.ag-pinned-right-floating-top {
    display: inline-block;
    overflow: hidden;
    position: relative; // otherwise the % width of children is not relative to this element
    min-width: 0px;
    flex-grow: 1000;
}

.ag-floating-bottom {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    display: flex;
}

.ag-pinned-left-floating-bottom {
    display: inline-block;
    overflow: hidden;
    position: relative; // otherwise the % width of children is not relative to this element
    min-width: 0px;
    flex-grow: 1000;
}

.ag-pinned-right-floating-bottom {
    display: inline-block;
    overflow: hidden;
    position: relative; // otherwise the % width of children is not relative to this element
    min-width: 0px;
    flex-grow: 1000;
}


/**
 ****************************
 * Dialog
 ****************************
*/

$handleSize: 5px;

.ag-dialog, .ag-panel {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    .ag-title-bar {
        display: flex;
        flex: none;
        align-items: center;
        cursor: default;

        .ag-title-bar-title {
            flex: 1 1 auto;
        }

        .ag-title-bar-buttons {
            display: flex;
            .ag-button {
                cursor: pointer;
            }
        }
    }

    .ag-panel-content-wrapper {
        display: flex;
        flex: 1 1 auto;
        position: relative;
        overflow: hidden;
        > div {
            width: 100%;
            height: 100%;
        }
    }
}

.ag-dialog {
    position: absolute;

    .ag-resizer {
        position: absolute;
        pointer-events: none;
        z-index: 1;
        &.ag-resizer-topLeft {
            top: 0;
            left: 0;
            height: $handleSize;
            width: $handleSize;
            cursor: nwse-resize;
        }
        &.ag-resizer-top {
            top: 0;
            left: $handleSize;
            right: $handleSize;
            height: $handleSize;
            cursor: ns-resize;
        }
        &.ag-resizer-topRight {
            top: 0;
            right: 0;
            height: $handleSize;
            width: $handleSize;
            cursor: nesw-resize;
        }
        &.ag-resizer-right {
            top: $handleSize;
            right: 0;
            bottom: $handleSize;
            width: $handleSize;
            cursor: ew-resize;
        }
        &.ag-resizer-bottomRight {
            bottom: 0;
            right: 0;
            height: $handleSize;
            width: $handleSize;
            cursor: nwse-resize;
        }
        &.ag-resizer-bottom {
            bottom: 0;
            left: $handleSize;
            right: $handleSize;
            height: $handleSize;
            cursor: ns-resize;
        }
        &.ag-resizer-bottomLeft {
            bottom: 0;
            left: 0;
            height: $handleSize;
            width: $handleSize;
            cursor: nesw-resize;
        }
        &.ag-resizer-left {
            left: 0;
            top: $handleSize;
            bottom: $handleSize;
            width: $handleSize;
            cursor: ew-resize;
        }
    }

    .ag-message-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .ag-message-box-content {
            display: flex;
            flex: 1 1 auto;
            justify-content: center;
            align-items: center;
        }
        .ag-message-box-button-bar {
            display: flex;
            justify-content: center;
        }
    }
}

/**
 ****************************
 * Tooltip
 ****************************
*/

.ag-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 99999;
}

.ag-chart-tooltip {
    display: table;
    position: absolute;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 99999;
    font: 12px Verdana, sans-serif;
    color: black;
    background: rgb(244, 244, 244);
    border-radius: 5px;
    box-shadow: 0 0 1px rgba(3, 3, 3, 0.7), 0.5vh 0.5vh 1vh rgba(3, 3, 3, 0.25);

    opacity: 0;
    transform: scale(0.90);
    transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    transition-property: opacity, transform;

    &.visible {
        opacity: 1;
        transform: scale(1);
    }

    .title {
        font-weight: bold;
        padding: 7px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: white;
        background-color: #888888;
    }

    .content {
        padding: 7px;
        line-height: 1.7em;
    }
}

/**
 ****************************
 * Animations
 ****************************
*/

// this is used by the animateShowChangeCellRenderer. it is arguable that this belongs in the themes,
// however it is not tied to color, only placement and visiblity, which is behaviour and not style,
// thus belongs here, besides it doesn't change wih the themes
.ag-value-slide-out {
    margin-right: 5px;
    opacity: 1;
    transition: opacity 3s, margin-right 3s; // as value fades, it also moves to the left via the margin setting
    transition-timing-function: linear;
}

.ag-value-slide-out-end {
    margin-right: 10px;
    opacity: 0;
}

.ag-opacity-zero {
    opacity: 0 !important;
}


/**
 ****************************
 * Menu
 ****************************
*/
.ag-menu {
    max-height: 100%;
    overflow-y: auto;
    position: absolute;
    user-select: none;
}

.ag-menu-column-select-wrapper {
    height: 265px;
    overflow: auto;
    width: 200px;
}

.ag-menu-list {
    display: table;
}

.ag-menu-option, .ag-menu-separator {
    display: table-row;
    > span {
        display: table-cell;
        vertical-align: middle;
    }
}

.ag-menu-option-text {
    white-space: nowrap;
}

.ag-menu-column-select-wrapper .ag-column-select-panel {
    height: 100%;
}


/**
 ****************************
 * Rich Select
 ****************************
*/
.ag-rich-select {
    cursor: default;
    outline: none;
    .ag-rich-select-value {
        display: flex;
        align-items: center;
        > span {
            flex: 1 1 auto;
            &.ag-icon {
                order: 1;
                flex: none;
            }
        }
    }
    .ag-rich-select-list {
        .ag-virtual-list-item {
            display: flex;
            .ag-rich-select-row {
                display: flex;
                flex: 1 1 auto;
                align-items: center;
                white-space: nowrap;
            }
        }
    }
}

/**
 ****************************
 * Pagination
 ****************************
*/
.ag-paging-panel {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    .ag-paging-row-summary-panel {
        display: flex;
        span {
            margin: 0 3px;
        }
    }
}

.ag-paging-page-summary-panel {
    display: flex;
    align-items: center;
    .ag-disabled {
        pointer-events: none;
    }
    .ag-paging-button {
        position: relative;
        overflow: hidden;
        button {
            position: absolute;
        }
    }
}

/**
 ****************************
 * Tool Panel
 ****************************
*/
.ag-tool-panel-wrapper {
    display: flex;
    overflow-y: auto;
    cursor: default;
    user-select: none;
    width: 200px;
    .ag-filter-toolpanel-header {
        line-height: 1.5;
        cursor: pointer;
    }
}

.ag-column-tool-panel-column,
.ag-column-tool-panel-column-group {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-overflow: ellipsis;
    white-space: nowrap;

    .ag-column-tool-panel-column,
    .ag-column-tool-panel-column-group {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.ag-column-select-checkbox {
    display: flex;
}

.ag-tool-panel-horizontal-resize {
    cursor: col-resize;
    height: 100%;
    position: absolute;
    top: 0;
    width: 5px;
    z-index: 1;
}

.ag-rtl .ag-tool-panel-horizontal-resize {
    transform: translateX(3px);
}

.ag-ltr .ag-tool-panel-horizontal-resize {
    transform: translateX(-3px);
}

.loading-filter {
    background-color: #e6e6e6;
    height: 100%;
    padding: 5px;
    position: absolute;
    top: 34px;
    width: 100%;
    z-index: 1;
}

.ag-details-row {
    height: 100%;
    width: 100%;
}

.ag-details-grid {
    height: 100%;
    width: 100%;
}

.ag-header-group-cell {
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
}

.ag-cell-label-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
}

.ag-numeric-header .ag-cell-label-container {
    flex-direction: row;
}

/**
 ****************************
 * Side Bar
 ****************************
*/
.ag-side-bar {
    display: flex;
    flex-direction: row-reverse;

    .ag-side-buttons {
        div {
            button {
                display: block;
                white-space: nowrap;
                outline: none;
                cursor: pointer;

                span:not(.ag-icon) {
                  writing-mode: tb;
                  writing-mode: vertical-lr;
                }
            }
        }
    }

    .panel-container {
        width: 180px;
    }

    &.full-width .panel-container {
        width: 200px;
    }
}

.ag-rtl .ag-side-bar {
    .ag-side-buttons {
        button {
            span:not(.ag-icon) {
                writing-mode: tb-rl;
                writing-mode: vertical-rl;
            }
        }
    }
}

/**
 ****************************
 * Status Bar
 ****************************
*/
.ag-status-bar {
    display: flex;
    justify-content: space-between;
    overflow: hidden;

    .ag-status-panel {
        display: inline-flex;
    }
}

.ag-status-bar-left {
    display: inline-flex;
}

.ag-status-bar-center {
    display: inline-flex;
}

.ag-status-bar-right {
    display: inline-flex;
}

/**
 ****************************
 * Widgets
 ****************************
*/

.ag-group-component {
    position: relative;
    flex: 1 1 100%;

    .ag-group-component-title-bar {
        display: flex;
        align-items: center;
    }

    .ag-group-component-toolbar {
        display: flex;
        align-items: center;
    }

    .ag-group-component-container {
        display: flex;
        flex-direction: column;
        .ag-group-subgroup {
            display: flex;
            align-self: stretch;
        }
    }

    .ag-group-item {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
    }

    &.ag-disabled {
        .ag-group-component-container {
            pointer-events: none;
        }
    }

    &.ag-collapsed {
        .ag-group-component-toolbar, .ag-group-component-container {
            display: none;
        }
    }
}

.ag-toggle-button {
    .ag-input-wrapper {
        .ag-icon {
            transition: right 0.3s;
            position: absolute;
            top: -1px;
        }
    }
}


.ag-input-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    input, select, textarea {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
}

.ag-range-field {
    display: flex;
    align-items: center;
}

.ag-picker-field, .ag-slider, .ag-angle-select {
    > .ag-wrapper {
        display: flex;
        > div {
            flex: 1 1 auto;
        }
    }
}

.ag-angle-select {
    display: flex;
    align-items: center;
    .ag-angle-select-field {
        .ag-parent-circle {
            display: block;
            position: relative;
        }
        .ag-child-circle {
            position: absolute;
        }
    }
}

.ag-picker-field {
    display: flex;
    align-items: center;
    > .ag-wrapper {
        > button {
            display: flex;
            border: 0;
            padding: 0;
            margin: 0;
        }
    }
}

.ag-color-picker {
    > .ag-wrapper {
        align-items: stretch;
        overflow: hidden;
    }
    button {
        cursor: pointer;
    }
}

.ag-labeled {
    &.ag-label-align-right {
        label {
            order: 1;
        }
        > div {
            flex: none;
        }
    }

    &.ag-label-align-top {
        flex-direction: column;
        align-items: flex-start;
        > div {
            align-self: stretch;
        }
    }
}

.ag-color-panel {
    display: flex;
    flex-direction: column;
    text-align: center;

    .ag-spectrum-color {
        flex: 1 1 auto;
        position: relative;
        overflow: hidden;
        cursor: default;
    }

    .ag-fill {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .ag-spectrum-val {
       cursor: pointer;
    }

    .ag-spectrum-dragger {
        position: absolute;
        pointer-events: none;
        cursor: pointer;
    }

    .ag-spectrum-hue {
        cursor: default;
        background: linear-gradient(to left,
            #ff0000 3%, #ffff00 17%,
            #00ff00 33%, #00ffff 50%,
            #0000ff 67%, #ff00ff 83%,
            #ff0000 100%
        );
    }

    .ag-spectrum-alpha {
        cursor: default;
    }

    .ag-spectrum-hue-background {
        width: 100%;
        height: 100%;
    }

    .ag-spectrum-alpha-background {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0));
        width: 100%;
        height: 100%;
    }

    .ag-hue-alpha {
        cursor: pointer;
    }

    .ag-spectrum-slider {
        position: absolute;
        pointer-events: none;
    }

    .ag-spectrum-text-value {
        display: inline-block;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
    }

    .ag-spectrum-text-value:focus {
        outline: none;
        outline-offset: 0;
    }

    .ag-recent-colors {
        display: flex;
        > div {
            cursor: pointer;
        }
    }
}


$toolpanel-indent-size: 10px !default;
$row-group-indent-size: 10px !default;

// Default values for themes that do not use the mixins
@for $i from 1 to 50 {
    .ag-ltr .ag-toolpanel-indent-#{$i} {
        padding-left: $i * $toolpanel-indent-size;
    }

    .ag-rtl .ag-toolpanel-indent-#{$i} {
        padding-right: $i * $toolpanel-indent-size;
    }

    .ag-ltr .ag-row-group-indent-#{$i} {
        padding-left: $i * $row-group-indent-size;
    }

    .ag-rtl .ag-row-group-indent-#{$i} {
        padding-right: $i * $row-group-indent-size;
    }
}

.ag-ltr {
    direction: ltr;
    .ag-body, .ag-floating-top, .ag-floating-bottom, .ag-header, .ag-body-viewport, .ag-body-horizontal-scroll {
        flex-direction: row;
    }
    .ag-header-cell-resize {
        right: -4px;
    }
    .ag-pinned-right-header .ag-header-cell-resize {
        left: -4px;
    }
}

.ag-rtl {
    direction: rtl;
    .ag-body, .ag-floating-top, .ag-floating-bottom, .ag-header, .ag-body-viewport, .ag-body-horizontal-scroll {
        flex-direction: row-reverse;
    }
    .ag-header-cell-resize {
        left: -4px;
    }
    .ag-pinned-left-header .ag-header-cell-resize {
        right: -4px;
    }
}

@media print {
    .ag-body-viewport {
        display: block;
    }
    .ag-row {
        page-break-inside: avoid;
    }
}
@import "./ag-grid-mobile";
@import "./ag-grid-charts";