/*
  You can add custom CSS rules or import files here.
*/


/* Import the Radzen CSS files */
@import './styles-generated.css';
/* ----------- SIDE MENU ------------------------------------ */
.rz-panel-menu .rz-navigation-menu .rz-navigation-item .rz-navigation-item-link {
    padding-left: 1.5rem;
    font-size: .8rem;
}
/* ----------- RAW PRODUCTION LOG page formatting ----------- */
/* Format the table cells */
/*#raw-production-log-table .rz-grid-table td .rz-cell-data {
    font-size: .75rem;
}

#raw-production-log-table .rz-grid-table td {
    padding: 2px 5px;
}

#raw-production-log-table tbody .rz-dropdown {
    font-size: 0.75rem;
    height: auto;
}

#raw-production-log-table .rz-group-header {
    background-color: transparent;
    padding: 0px;
    display: flex;
    justify-content: right;
    align-items: center;
    height: 0px;
    top: -48px;
    position: relative;
    border: none;
}

#raw-production-log-table .rz-column-picker {
    display: flex;
    position: relative;
    left: -160px;
}*/

/*------------ Tally Report Configuration page ------------------- */
/* Format the 'Sort Report' datalist items */
.tally-report-sortlist .rz-grid-table thead th {
    display: none;
}

.tally-report-sortlist .rz-grid-table td {
    padding: 3px;
}

.tally-report-table-compress .rz-grid-table td {
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
}

.tally-report-table-header {
    background-color: #34495E;
    border: 5px solid #34495E;
}

    .tally-report-table-header h4 {
        color: white;
    }

@page {
    size: auto;
}

@media print {
    .noprint {
        visibility: hidden;
    }

    .print-window {
        position: absolute;
        /*        top: -51px;*/
        /*        left: -250px;*/
    }

    .no-break {
        break-inside: avoid;
    }
}




.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('https://i.gifer.com/origin/34/34338d26023e5515f6cc8969aa027bca_w200.gif') 50% 50% no-repeat;
    background-size: 100px;
}

.loaderHidden {
    display: none;
}

.componentHidden {
    display: none;
    width: 0px !important;
    height: 0px;
}

.topDisplayed {
    position: absolute;
    top: 50%;
    font-size: 2.5em;
}



.centered {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
}


/* Custom CSS to position the dialog */
.custom-dialog {
    position: absolute;
    top: 30%; /* Adjust as needed */
    left: 50%; /* Adjust as needed */
    transform: translate(-50%, -50%);
}


/* Add this CSS to your stylesheet */
.radzen-datagrid tbody tr:hover {
    background-color: aqua; /* Change this to the desired color */
    cursor: pointer; /* Optional: Change cursor to indicate clickable row */
}

@media print {
    .page-break {
        page-break-before: always;
    }

    body {
        zoom: 60%;
        margin: 0;
        background-color: white;
    }

    .hide-on-print {
        opacity: 0;
        display: none;
    }
    
     .rz-body {
        position: absolute !important;        
        height: auto !important;
        overflow: visible !important;
    }   

}


/* Override font size for Radzen DataGrid */
.rz-data-grid {
    font-size: 12px !important; /* Change to your desired font size */
}

/* Override font size for headers */
.rz-column-title-content {
    font-size: 12px !important; /* Change to your desired font size */
}

/* Override font size for cell content */
.rz-cell-data {
    font-size: 13px !important; /* Change to your desired font size */
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.red-font {
    color: red;
}

.blue-font {
    color: blue;
}

.yellow-back {
    background-color: yellow;
}

.green-back {
    background-color: green;
    color: white !important;
}

/* Highlight the row on hover */
.datagrid-row:hover {
    background-color: #e0e0e0; /* Change this to your desired color */
}

.rz-dialog-mask {
    opacity: 0.8 !important;
}

.rz-slot-title {
    font-size: large !important;
}

.rz-slot {
    border-top: 1px solid var(--rz-scheduler-border-color) !important;
    border-left: 1px solid var(--rz-scheduler-border-color) !important;
    border-bottom: 1px solid var(--rz-scheduler-border-color) !important;
    border-right: 1px solid var(--rz-scheduler-border-color) !important;
}

.rz-view-header .rz-slot-header {
    font-size: large !important;
}

.rz-event-content {
    font-size: medium !important;
}

.rz-scheduler-nav .rz-scheduler-nav-title {
    font-size: x-large !important;
}

/* Keep the reconnect message visible */
#components-reconnect-modal {
    background-color: transparent !important;
    pointer-events: none !important; /* Ensure it doesn't block user interaction */
    color: white !important; /* Set color for better visibility if needed */
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    height: fit-content !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
}


.print-custom-datagrid {
    font-size: 17px !important; /* Adjust as needed */
    margin-bottom: 15px !important;
}

#PrintContent {
    font-family: Arial;
}


.high-priority {
    color: red !important;
}

/* ----------- REHASH PAGE: Row coloring by recentCallDate ----------- */
/* Must target > td because Radzen sets background-color on td, not tr */
.rehash-row-same-day > td { background-color: #de7a84 !important; }
.rehash-row-1day > td     { background-color: #ece289 !important; }
.rehash-row-2days > td    { background-color: #6a86dc !important; }
.rehash-row-3plus > td    { background-color:rgb(110, 215, 114) !important; }