/* --- General Overloads --- */
.panel-default>.panel-heading {
    border: none;
}
.form-input__checkbox + .form-input__switch-label {
    height: 18px;
    width: 23px;
}
.form-input__radio-box {
    margin-right: 6px;
}
.form-input__switch-label::before {
    font-weight: 300;
    content: "";
    line-height: 14px;
    font-size: 24px;
    top: 0px;
    position: relative;
    left: -4px;
}
.ui-grid-pager-panel {
    bottom: 0px !important;
}


/* --- New UI Grid Styles --- Generic --- */


/* - filter area - */
.grid-filter-container {
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top: solid 1px #C9D3DC;
    border-left: solid 1px #C9D3DC;
    border-top-right-radius: 10px;
    border-right: solid 1px #C9D3DC;
    margin-top: 20px;
    height: 39px;
    padding: 10px 13px;
}

.search-entry .grid-filter-container {
    margin-top: 0px;
}
/* Grid Menu button on the Search Results grids. See UIGrid model for details. */
.grid-menu-control {
    width: 30px;
    height: 30px;
    float: right;
    cursor: pointer;
    margin-top: -6px;
    margin-right: -9px;
    background: url('/img/menu_btn.gif') no-repeat;
}
.grid-menu-control.menu-open {
    background: url('/img/menu_btn_active.gif') no-repeat;
}

.switch-label {
    font-size: 14px;
    line-height: 20px;
    vertical-align: top;
}
.ui-grid-filter-input {
    font-size: 14px;
    line-height: 18px;
    height: 32px;
    border-radius: 2px;
    padding-left: 5px !important;
    padding-right: 15px !important;
    font-weight: 500;

}
@media (min-width: 1200px) {
    .ui-grid-filter-input {
        height: 22px;
    }
}


/* - outer border - */
.ui-grid {
    border: none;
}
.ui-grid-contents-wrapper {
    border: solid 1px #C9D3DC;
    border-top: none;
    border-bottom: none;
    overflow: hidden;
}

#project-selector-grid .ui-grid-contents-wrapper {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* - grid border without controls - */
.ui-grid-no-controls .ui-grid-contents-wrapper {
    border: solid 1px #C9D3DC;
    border-radius: 10px;
}
.ui-grid-no-controls .ui-grid-header-canvas {
    height: 20px !important;
}


/* - grid header - */
.ui-grid-header {
    border-bottom: none;
}
.ui-grid-top-panel {
    background: #ECF1F5;
}
.ui-grid-header-canvas {
    height: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-bottom: 8px;
    min-height: 22px;
}
.ui-grid-cell-contents {
    padding: 0px 8px;
    outline: none;
}
.ui-grid-header-cell-label {
    height: 20px;
    color: #2F2F2F;
    font-size: 12px;
    font-weight: 900;
    line-height: 20px;
}
.ui-grid-header-cell:last-child .ui-grid-column-resizer.right {
    border-right: none;
}


/* - grid menu button - */
.ui-grid-menu-button {
    border: none;
    background-color: initial;
    top: 7px;
}
/* To be able to have a functioning (and visible) grid menu button, we had to move it out of the
   ui-grid container and into a separate control. See the comments around that code where
   gridOptions are set. These should remain hidden. */
.ui-grid-icon-menu:before {
    display: none;
}
.ui-grid-icon-menu {
    display: none;
}


/* - grid menu - */
.ui-grid-menu-button .ui-grid-menu {
    top: -7px;
}
.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
    border: 1px solid #C2D1D9;
}
.ui-grid-menu .ui-grid-menu-inner {
    background-color: #FFF;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.ui-grid-menu .ui-grid-menu-inner ul {
    padding: 0px 16px;
}
.ui-grid-menu .ui-grid-menu-inner ul li button:hover, .ui-grid-menu .ui-grid-menu-inner ul li button:focus {
    box-shadow: none;
}
.ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child)>button {
    border-bottom: 1px solid #F2F5F7;
    padding: 12px 0px;
    font-size: 14px;
}
.ui-grid-menu .ui-grid-menu-inner ul li:last-child>button {
    padding: 12px 0px;
    font-size: 14px;
}


/* - grid column menu - */
.ui-grid-column-menu-button {
    outline: none;
}
.ui-grid-menu {
    top: 16px;
}
.ui-grid-menu .ui-grid-menu-inner {
    border: 0;
}
.ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item-active {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: initial;
    color: rgb(var(--primary-color));
}


/* - rows - */
.ui-grid-cell input {
    min-height: 46px !important;
    padding-left: 10px !important;
    font-size: 14px !important;
}

.ui-grid-canvas .ui-grid-row, .ui-grid-canvas .ui-grid-cell {
    /* This needs to be addressed -looks like the UI-Grid JS forces this to be 30px. */
    height: auto !important;
    border-right: none;
    min-height: 46px;
}
.ui-grid-canvas .ui-grid-cell-contents {
    padding: 13px 8px;
    font-size: 14px;
    color: #2F2F2F;
    line-height: 20px;
}
.ui-grid-row:nth-child(even) .ui-grid-cell, .ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-row-header-cell {
    background-color: #F1F4F6;
}
/* - row selection column (cell) - */
.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-cell:last-child {
    border: none;
}
.ui-grid-row .ui-grid-cell.ui-grid-row-header-cell, .ui-grid-row:nth-child(odd) .ui-grid-cell {
    background-color: initial;
}


/* - selected row & editing - */
.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
    /* color: #fff; */
    background-color: rgba(var(--secondary-color), 0.4);
}
.ui-grid-cell-focus {
    outline: 0;
    background-color: rgba(var(--secondary-color), 0.4);
}

.ui-grid-selection-row-header-buttons {
    opacity: 1;
}

.ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ng-scope::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f0c8';
    font-weight: 300;
    border: solid 1px #C9D3DC;
    color: white;
    background-color: white;
    width: unset;
    margin-left: 0;
    border-radius: 2px;
}

.ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ng-scope::before {
    height: 18px;
    width: 18px;
    font-size: 18px;
    line-height: 17px;
    position: absolute;
}

.ui-grid-selection-row-header-buttons {
    width: 20px;
    width: 20px;
}
.ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ng-scope.ui-grid-all-selected::before {
    background-color: rgb(var(--primary-color));
    color: rgb(var(--primary-color));
}

.ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ng-scope.ui-grid-row-selected::before {
    background-color: rgb(var(--primary-color));
    color: rgb(var(--primary-color));
}

.ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ng-scope.ui-grid-row-selected::after {
    font-family: 'Font Awesome 5 Pro';
    content: '\f00c';
    color: white;
    position: absolute;
    left: 11px;
    font-size: 12px;
    width: 17px;
    line-height: 17px;
    height: 17px;
    border-radius: 2px;
}

.ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ng-scope.ui-grid-all-selected::after {
    font-family: 'Font Awesome 5 Pro';
    content: '\f00c';
    color: white;
    position: absolute;
    left: 11px;
    font-size: 12px;
    width: 17px;
    line-height: 17px;
    height: 17px;
    border-radius: 2px;
}


/* - pagination controls - */
.ui-grid-pager-control button {
    height: 20px;
    vertical-align: top;
    margin-left: -3px;
    padding: 0px;
    min-width: 20px;
    border-color: #C9D3DC;
    background-color: transparent;
}
.ui-grid-pager-control button:nth-of-type(1), .ui-grid-pager-control button:nth-of-type(3) {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    color: #C9D3DC;
}
.ui-grid-pager-control button:nth-of-type(2), .ui-grid-pager-control button:nth-of-type(4) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    color: #C9D3DC;
}
.ui-grid-pager-control .ui-grid-pager-max-pages-number abbr {
    display: none;
}
.ui-grid-pager-control .ui-grid-pager-max-pages-number:before {
    color: #424B5A;
    content: ' of ';
}
.ui-grid-pager-control .ui-grid-pager-max-pages-number {
    margin-right: 16px;
    font-size: 12px;
    color: #424B5A;
}

.ui-grid-pager-container {
    float: unset;
    margin-left: 0;
    display: inline-block;
    position: relative;
}

@media (min-width: 767px) {
    .ui-grid-pager-container {
        float: unset;
        margin-left: 0;
        display: inline-block;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0)
    }
}

.ui-grid-pager-control input {
    font-size: 12px;
    border: solid 1px #C9D3DC;
    background-color: transparent;
    box-shadow: none;
    line-height: 20px;
    padding: 0px;
    text-align: center;
    margin-right: 10px;
    height: 20px;
    color: #424B5A;
    width: 35px;
}

.ui-grid-pager-first {
    line-height: unset;
}

.first-triangle {
    border: 0 !important;
    width: unset !important;
    height: unset !important;
    line-height: 18px;
    margin: 0 !important;
}

.first-triangle::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f048';
    font-weight: 500;
    font-size: 12px;
}

.first-triangle.prev-triangle::before {
    content: '\f053';
    font-size: 12px;
}

.first-triangle:hover::before {
    color: #2d3137;
}

.last-triangle:hover::before {
    color: #2d3137;
}

.first-bar {
    display: none;
    border: 0 !important;
}

.last-triangle {
    border: 0 !important;
    width: unset !important;
    height: unset !important;
    line-height: 18px;
    margin: 0 !important;
}

.last-triangle::before {
    font-family: 'Font Awesome 5 Pro';
    content: '\f051';
    font-weight: 500;
    font-size: 12px;
}

.last-triangle.next-triangle::before {
    content: '\f054';
    font-size: 12px;
}

.last-bar {
    display: none;
    border: 0 !important;
}

.ui-grid-pager-max-pages-number {
    vertical-align: top !important;
    line-height: 20px;
}

.ui-grid-pager-control {
    float: unset;
    display: inline-block;
    line-height: 23px;
    transform: translate(0, 4px);
    margin-right: 0;
}

@media (min-width: 767px) {
    .ui-grid-pager-control {
        margin-right: 10px;
        transform: unset;
    }
}

.ui-grid-pager-row-count-picker.ng-scope {
    float: unset;
    display: none;
}

@media (min-width: 767px) {
    .ui-grid-pager-row-count-picker.ng-scope {
        display: inline-block;
    }
}

/* - grid footer - */
.ui-grid-pager-panel {
    bottom: -9px;
}


#project-selector-grid .ui-grid-pager-panel {
    border-bottom: solid 1px #C9D3DC;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#uigrid-buttons {
    border: solid 1px #C9D3DC;
    border-top: solid 1px #E7EDF0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 8px;
    min-height: 47px;
}

.copied-row-grid {
    background-color: #FEF6E9 !important;
}

.entry-form-button-div__button-wrapper {
    display: inline-block;
    vertical-align: super;
}

/* hide the deleted menu item in subgrid and select grids */
.subgrid .ui-grid-menu-items li[data-button-text="Deleted"] {
    display: none;
}

.selectgrid .ui-grid-menu-items li[data-button-text="Deleted"] {
    display: none;
}