/* CSS for anything to do with the grids */

div.grid-header {
    height: 30px;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 5px;
}

div.grid-header .float-right {
    margin-left: auto;
}

div.grid-content {
    height: calc(100% - 35px);
    max-height: calc(100% - 35px);
    border: 1px solid lightgray;
}

div.grid-edit {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 20px;
}

    div.grid-edit > div {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    div.grid-edit h5 {
        font-size: 18px;
    }

ul.validation-errors {
    width: 100%;
}

/* Detail View */
div.grid-detail {
    /*background-color: whitesmoke;*/
    margin-bottom: 5px;
    /*height: 435px;*/
}

    div.grid-detail .field {
        font-weight: normal;
        max-width: calc(100% / 3 - 30px);
        font-size: 16px;
    }

    div.grid-detail label {
        margin-right: 20px;
        font-weight: bold;
    }

        div.grid-detail label:after {
            content: ":";
        }


/* Syncfusion Override */


.e-dlg-content {
    background-color: whitesmoke;
}

/* Bootstrap Override */
.e-grid {
    border: none;
}

.e-grid .e-gridheader {
    background-color: whitesmoke !important;
    color: gray;
}

.e-grid .e-headercell, .e-grid .e-detailheadercell {
    background-color: whitesmoke !important;
}

    .e-grid .e-row[aria-selected="true"] > td,
    .e-grid .e-row[aria-selected="true"] a {
        background-color: var(--colour-primary-dark);
        color: white !important;
        font-weight: bold;
    }

.e-grid .e-rowcell, .e-grid .e-groupcaption, .e-grid .e-indentcell, .e-grid .e-recordplusexpand, .e-grid .e-recordpluscollapse, .e-grid .e-rowdragdropcell, .e-grid .e-detailrowcollapse, .e-grid .e-detailrowexpand, .e-grid .e-detailindentcell, .e-grid .e-detailcell {
    /*border-color: whitesmoke;*/
}

.e-grid .e-icon-grightarrow::before, .e-grid-menu .e-icon-grightarrow::before {
    content: "\e76a";
}

.e-grid .e-icon-gdownarrow::before, .e-grid-menu .e-icon-gdownarrow::before {
    content: "\e705";
}

.e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
    background-color: var(--colour-primary-light);
}

/* Grid Detail */

tr.e-row:has(+ .e-detailrow) td,
tr.e-row:has(+ .e-detailrow) a {
    background-color: var(--colour-primary);
    color: white !important;
    font-weight: bold;
}

    tr.e-row:has(+ .e-detailrow):hover td,
    tr.e-row:has(+ .e-detailrow):hover a {
        background-color: var(--colour-primary-dark) !important;
    }

.e-detailrow > .e-detailindentcell {
    display: none;
}

.e-detailrow > .e-detailcell {
    padding: 0;
}

.e-detailrow .e-headercell {
    border-bottom: 1px solid var(--colour-primary) !important;
    color: black;
    font-weight: bold;
}

.e-detailrow .e-grid th,
.e-detailrow .e-grid td {
    background-color: var(--colour-primary-light) !important;
    padding-left: 20px;
    padding-right: 20px;
}

.e-detailrow .e-gridcontent {
    border-radius: 0;
    padding: 0;
}

.e-detailrow .e-grid .e-row:hover td {
    background-color: var(--colour-primary-lighter) !important;
}

.e-detailrow .e-grid .e-row[aria-selected="true"] > td,
.e-detailrow .e-grid .e-row[aria-selected="true"] a {
    background-color: var(--colour-primary-lighter) !important;
    color: black !important;
}

/* width */
.e-grid .e-gridcontent .e-content.e-yscroll::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.e-grid .e-gridcontent .e-content.e-yscroll::-webkit-scrollbar-track:hover {
    background: #f1f1f1;
}

/* Handle */
.e-grid .e-gridcontent .e-content.e-yscroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* Handle on hover */
.e-grid .e-gridcontent .e-content.e-yscroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.e-edit-dialog .e-gridform .e-table {
    border-spacing: 0px;
}

.e-pager {
    background-color: inherit;
    padding: 0 25px;
}

    .e-pager * {
        color: gray !important;
        font-size: 16px !important;
        font-weight: bold;
        margin-bottom: 0;
    }

    .e-pager .e-pagercontainer {
        border: none;
        background-color: inherit;
    }

        .e-pager .e-pagercontainer > div:not(.e-numericcontainer),
        .e-pager .e-numericcontainer > a {
            background-color: inherit;
            border: none;
            border-radius: 30px;
            width: 30px;
            height: 30px;
            padding: 10px !important;
            margin-right: 5px;
        }

        .e-pager .e-numericcontainer > a {
            padding: 8px !important;
        }

            .e-pager .e-pagercontainer > div:not(.e-numericcontainer):not(.e-disable):hover,
            .e-pager .e-numericcontainer > a:hover {
                background-color: var(--colour-primary) !important;
                color: white !important;
                border-radius: 30px;
            }

        .e-pager .e-currentitem, .e-pager .e-currentitem:hover {
            background-color: var(--colour-primary) !important;
            color: white !important;
        }

    .e-pager .e-pagerconstant {
        margin: 11px 0 0px 8px;
    }

    .e-pager .e-pagerdropdown {
        height: 24px;
    }

        .e-pager .e-pagerdropdown * {
            color: var(--colour-primary) !important;
            font-weight: bold !important;
        }

        .e-pager .e-pagerdropdown span {
            border: none;
            background-color: inherit;
        }

    .e-pager .e-ddl-icon {
        font-size: 14px !important;
    }