/** LAYOUT SECTION **/
* {
    box-sizing: border-box;
}

body {
    height: 100vh;
    flex: 0 0 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: stretch;
}

    body header {
        padding: 0 1em 0 1em;
        flex: 0 0 content;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: stretch;
        min-height: 2em;
    }

        body header .logo {
            max-height: 2em;
        }

    body main {
        padding: 0 1em 0 1em;
        flex: 1 0 50%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
        min-height: 2em;
    }

    body footer {
        padding: 0 1em 0 1em;
        flex: 0 0 content;
        margin-top: 0.75rem;
    }

.nav-link {
    padding: 0 .5em;
}

.hover-box:hover {
    border: 1px solid red;
}

.flex_row_break {
    flex-basis: 100%;
    height: 0;
}

.hidden {
    display: none !important;
}

.seethrough {
    visibility: hidden;
}

.cursor-link {
    cursor: pointer;
}

option.applied {
    font-weight: bolder;
}

.modal-center {
    position: absolute;
    display: flex;
    align-items: center;
    justify-items: center;
    width: 100vw;
    height: 100vh;
    background-color: rgb(128, 128, 128, .6);
}

.modal-center > article {
    background-color: white;
    border: 2px solid red;
    padding: 1em;
    margin: auto;
}

/** SYNCFUSION STYLING SECTION */
/* for deleted rows to not disappear */
.e-hiddenrow {
    display: table-row !important;
    background-color: lightpink !important;
}

    tr.e-hiddenrow td {
        text-decoration: line-through;
    }

/* to set icons only in grid toolbar */
.e-toolbar .e-tbar-btn-text, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
    display: none;
}

/* outline search popups */
.e-excelfilter {
    border: 1px solid red !important;
}

/* more pronounced active filter */
.e-grid .e-icon-filter.e-filtered::before {
    content: "\e735" !important;
    color: red;
}

/* alt row coloring */
.e-grid .e-altrow {
    background-color: #fafafa;
}

/* frozen columns blue background*/
.e-leftfreeze {
    background-color: lightblue !important;
}

.e-grid .e-headercell.filtered {
    background-color: #c2f7c2;
    color: black;
}

.e-grid .e-headercell {
    background-color: #fff;
    color: black;
}

/* Ensure the grid container handles scrolling properly */
.grid-container {
    height: 100%;
    overflow: hidden; /* Prevent the body from scrolling */
    display: flex;
    flex-direction: column;
}

.grid-wrapper {
    flex: 1;
    overflow: auto; /* Enable both horizontal and vertical scrolling */
    position: relative;
}



/* Make the horizontal scrollbar sticky */
.grid-wrapper::-webkit-scrollbar {
    height: 16px; /* Adjust the height of the scrollbar */
}

.grid-wrapper::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scrollbar thumb */
}

    .grid-wrapper::-webkit-scrollbar-thumb:hover {
        background: #555; /* Color of the scrollbar thumb on hover */
    }

.grid-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color of the scrollbar track */
}

.grid-wrapper {
    padding-bottom: 16px; /* Add padding to make space for the scrollbar */
}

    .grid-wrapper::after {
        content: '';
        display: block;
        height: 16px; /* Adjust the height to match the scrollbar height */
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 1;
    }

/* Add a custom icon for e-export-pdf if not present in Syncfusion theme */
.e-export-pdf:before {
    content: "\e728"; /* Use a similar icon code as Syncfusion's PDF icon, adjust if needed */
    font-family: 'e-icons';
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
}

/* Add a custom icon for e-excelexport if not present in Syncfusion theme */
.e-excelexport:before {
    content: "\e34b"; /* Use a similar icon code as Syncfusion's Excel icon, adjust if needed */
    font-family: 'e-icons';
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
}

/** DATATABLES STYLING SECTION */
.dataTables_wrapper {
    flex: 1 1 10px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.dataTables_filter {
    align-self: flex-end;
}

.dataTables_scroll {
    flex: 1 1 10px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 99%;
}
.busy-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.busy-text {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}


.dataTables_scrollHead {
    flex: 0 0 auto;
}

.dataTables_scrollBody {
    flex: 1 1 10px;
}

    .dataTables_scrollBody * {
        overflow: unset;
    }

    .dataTables_scrollBody tr {
        overflow: visible;
    }

    .dataTables_scrollBody td.dtfc-fixed-left {
        overflow: visible;
    }

table.dataTable td {
    padding: 1px 2px 1px 2px;
}

.dtfc-fixed-left {
    background-color: lightblue !important;
}

.cellSelected {
    outline: 2px solid yellow;
}

.solveButton {
    height: 1.5em;
    object-fit: fill;
    cursor: pointer;
}

.solveButtonContainer {
    padding: 0 !important;
    margin: 0;
}

/** LEGACY SECTION **/

/* Center screen popup */
div.popup-outer {
    position: fixed;
    z-index: 9999;
    display: none; /* start hidden */
    height: 100%;
    width: 100%;
    background: rgba(128, 128, 128, .6);
    top: 0;
    left: 0;
}

div.popup-inner {
    position: relative;
    background: border-box;
    background-color: white;
    height: 225px;
    width: 400px;
    left: 50%;
    margin-left: -200px;
    top: 50%;
    margin-top: -117px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-content: stretch;
}

/** Cool tools section **/

.rotatingBorder {
    animation-name: rotatingborder;
    animation-duration: .75s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

@keyframes rotatingborder {
    from {
        border: red solid 0px;
    }

    to {
        border: red solid 5px;
    }
}