:root {
    --menu-padding: 75px 0 150px 0 !important;
    --menu-collopased-padding: 75px 0 150px 0 !important;
    --sidebar-width: 245px !important;
    --rz-input-height: 1.65rem !important;
    --sidebar-footer-height: 20px;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.logo {
    width: 250px;
}


.sli-hamburger {
    padding: 0px;
    color: #269be0;
    margin-top: 6px;
    margin-left: 3px;
}

    .sli-hamburger:hover {
      
        background: rgba(183, 184, 185,.30);
        color: black;
    }

    .sli-hamburger i {
        font-size: 30px;
    }

.sli-footer {
    height: 40px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

    .sli-footer a {
        color: black;
        text-decoration: underline;
    }

.sli-sidebarlayout-footer {
    width: unset !important;
}

.sli-sidebarlayout-nav .nav-links {
    height: calc(90vh - (var(--sidebar-footer-height) + var(--sidebar-header-height) + 10px)) !important;
}

    .sli-sidebarlayout-nav .nav-links li .sub-menu li.sub-menu-heading{
        height:20px; 
    }
    /*.sli-sidebar-logo-area {
    display: flex;
    align-items: center;
    background-image:url('/Images/logo-light.png');
    width:230px; 
    height:55px;
    background-size:contain;
    background-position:center; 
    background-repeat:no-repeat; 
    transition: all .3s ease-in-out;
}

    .sli-sidebar-logo-area.sideBarClosed {
        background-image: url('/Images/logo.png');
        width: 70px;
        height: 45px;


     
    }*/
    @keyframes shrink {
        0% {
        transform: scale(1);
    }

    50% {
        transform: scale(.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes grow {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rotateImage {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rocking {
    0%, 100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

.sli-sidebar-logo-area {
    display: flex;
    align-items: center;
    background-image: var(--logo-url);
    width: 200px;
    height: 40px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all .3s ease-in-out;
    /* Apply the grow animation by default */
    animation: grow .6s ease-in-out forwards;
    transform-origin: bottom center; /* Set the pivot point for rotation */
}


    .sli-sidebar-logo-area.sideBarClosed {
        background-image: var(--logo-closed-url);
        width: 70px;
        height: 40px;
        /* Override with the shrink animation when sideBarClosed is added */
        animation: shrink .6s ease-in-out forwards;
    }



        .sli-sidebar-logo-area.sideBarClosed .sli-sidebar-logo-header {
            display: none;
        }

@media only screen and (max-width: 767px) {
    .sli-sidebarlayout-left-sidebar {
        z-index: 100;
    }
}
.rz-data-grid-data > table > tbody > tr td {
    transition: background-color 1s ease;
}

.rz-data-grid-data > table > tbody > tr:not(.rz-expanded-row-content):hover td {
    background: #86ed91 !important;
}

.rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox
.rz-grid-filter-buttons .rz-button-md {
    min-height: unset !important; /* Or a specific value */
    padding: 3px !important;
}
.rz-grid-filter-buttons .rz-button-md {
    min-height: unset !important; /* Or a specific value */
    padding: 3px !important;
}
.rz-panel-menu {
    background-color: #262526;
}

    .rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active {
        background-color: #515151;
    }

    .rz-panel-menu .rz-navigation-item-wrapper:hover {
        background-color: #333233;
    }

.rz-textbox {
    height: 1.60rem;
}

.rz-dialog-wrapper {
    width: 98%;
}

ul.rz-profile-menu {
    border: unset;
}

.userProfileRoles.rz-listbox {
    border-radius: 0;
    display: block;
}

div.userProfileRoles > div.rz-listbox-list-wrapper > ul.rz-listbox-list > li.rz-multiselect-item {
    padding: 3px
}

.ingrid-dropdown.rz-dropdown {
    height: unset;
    line-height: unset;
    padding: 3px;
}


span.ingrid > .rz-spinner-input {
    height: unset;
    line-height: unset;
    padding: unset;
}

span.ingrid {
    padding: 1px;
    height: unset;
}

.ingrid.rz-switch {
    height: 25px;
}

div.ingrid > span.rz-switch-circle {
    border-color: red;
}

.rz-gravatar.ingrid {
    width: 25px;
    height: 25px;
}

.EtracksInLineGrid > div.rz-group-header {
    height: 35px;
}

    .EtracksInLineGrid > div.rz-group-header > div.rz-column-picker {
        position: absolute;
        right: 5px;
    }

        .EtracksInLineGrid > div.rz-group-header > div.rz-column-picker > div.rz-dropdown {
            line-height: unset;
            padding: 3px;
        }

.EtracksInLineGrid > div.rz-pager > div.rz-dropdown, div.rz-paginator > div.rz-dropdown {
    line-height: unset;
    padding: 3px;
}
/*.EtracksInLineGrid .rz-grid-table-fixed {
    table-layout: auto;
}*/
.rz-grid-filter > div.rz-dropdown {
    line-height: unset;
    padding: 3px;
}

div.roleGrid > div.rz-group-header > div.rz-custom-header {
    width: 100%;
}

div.EtracksInLineGrid > div.rz-group-header > div.rz-custom-header {
    width: 100%;
    display:flex; 
    flex-flow:row;
    justify-content:space-between;
}

/* radzen tooltip */
.rz-tooltip-content {
    background: var(--sidebar-bg-color) !important;
    white-space: unset !important;
}

.rz-tooltip {
    max-width: 600px;
}




.toggle-switch-box {
    display: inline-block;
    margin: 0;
    cursor: pointer;
    outline: 0;
    overflow: hidden;
}

    .toggle-switch-box input {
        display: none;
    }

        .toggle-switch-box input:checked + .toggle-switch-item::before {
            left: 0;
        }

        .toggle-switch-box input:checked + .toggle-switch-item::after {
            right: -100%;
        }

        .toggle-switch-box input:checked + .toggle-switch-item .switch-button {
            left: calc(100% - 23px);
        }

    .toggle-switch-box .toggle-switch-item {
        position: relative;
        display: block;
        min-width: 60px;
        min-height: 26px;
    }

        .toggle-switch-box .toggle-switch-item::before, .toggle-switch-box .toggle-switch-item::after,
        .toggle-switch-box .toggle-switch-item .switch-button {
            position: absolute;
            top: 50%;
            transform: translate3d(0, -50%, 0);
        }

        .toggle-switch-box .toggle-switch-item::before, .toggle-switch-box .toggle-switch-item::after {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-size: 11px;
            text-transform: uppercase;
            font-weight: 700;
            color: #fff;
            line-height: 1;
        }

        .toggle-switch-box .toggle-switch-item::before {
            left: -100%;
            padding: 0 23px 0 0;
            background-color: transparent;
            content: attr(data-tg-on);
            transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .toggle-switch-box .toggle-switch-item::after {
            right: 0;
            padding: 0 0 0 30px;
            background-color: #000;
            content: attr(data-tg-off);
            transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .toggle-switch-box .toggle-switch-item .switch-button {
            left: 3px;
            display: block;
            width: 20px;
            height: 20px;
            border: 3px solid transparent;
            background-color: #fff;
            border-radius: 50%;
            z-index: 1;
            transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

.switch-rounded {
    border-radius: 3px;
}

.switch-rectangular {
    border-radius: 3px;
}

    .switch-rectangular .toggle-switch-item .switch-button {
        border-radius: 3px;
    }

.switch-bg-secondary .toggle-switch-item::before {
    background-color: #adb5bd;
}

.switch-bg-primary .toggle-switch-item::before {
    background-color: #2574ab;
}

.switch-bg-success .toggle-switch-item::before {
    background-color: #259dab;
}

.switch-bg-warning .toggle-switch-item::before {
    background-color: #ffc107;
}

.switch-bg-danger .toggle-switch-item::before {
    background-color: #d9534f;
}

.switch-bg-info .toggle-switch-item::before {
    background-color: #5bc0de;
}

.switch-bg-light .toggle-switch-item::before {
    background-color: #e9ecef;
}

.switch-bg-dark .toggle-switch-item::before {
    background-color: #343a40;
}


.negative-number {
    color: red;
}

    .negative-number::before {
        content: "(";
        color: red;
    }

    .negative-number::after {
        content: ")";
        color: red;
    }


.rz-dialog-content .rz-dropdown{
    padding:3px !important;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 columns for flexibility */
    gap: 10px;
    margin-top: 20px;
}

.dashboard-widget {
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 5px;
}


/*.rz-legend  {
    display:none !important;
}*/

.rz-expanded-row-content {
    transition: max-height 0.9s ease-in-out; /* Smooth transition for expanding/collapsing */
}
.dynamic-form {
    margin: 10px;
    font-family: Arial, sans-serif;
    width:fit-content;
}
.dynamic-form .rz-form{
    width:fit-content;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Four columns */
    gap:3px; /* Space between items */
    align-items: baseline;
}

.form-item {
    display: contents;
}

.form-label {
    text-align: right;
    
}

.form-input {
    width: 100%;
    max-width: 350px; /* Increased max-width for readability */
    min-width: 200px; /* Set a minimum width to avoid shrinking too much */
    padding: 0px;
}

.disabled-textbox {
    background-color: #f0f0f0; /* Light gray background for disabled fields */
    color: #6c757d; /* Subtle text color */
}

.submit-button {
    grid-column: span 4; /* Span the button across all columns */
   
    margin-top: 20px;
    padding: 10px 20px;
}

.DetailGrid .rz-grid-table-fixed{
    table-layout:auto;
}

.GridHeaderButton {
    min-height: 26px !important;
    padding: unset !important;
    border-radius: 3px !important;
    padding-right: 2px !important;
}

    .GridHeaderButton .rz-button-text {
        font-size: 11px;
        text-transform: uppercase;
    }

.sli-sidebarlayout-nav .nav-links li ul.sub-menu li.menu-divider {
    height: 0px;
    margin:0px; 
}

.ColumnEditGrid .rz-grid-table-fixed{
    table-layout:auto; 
}
.rz-switch {
    height:22px !important;
}

.etracks-chip .rz-dropdown-chips-wrapper .rz-chip button {
    max-height: 20px;
    padding: 0px;
    min-height: 20px;
    line-height: unset;
    height: 20px;
   
}

.etracks-chip .rz-chip{
    height:fit-content;
}

.rz-tooltip .rz-popup {
    z-index:10000000!important;
}
.rz-dropdown-panel.rz-popup {
    z-index: 10000000 !important;
}
/* Dashboard grid layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto; /* rows size to content */
    gap: 1rem;
}

/* Card container for each chart */
.chart-card {
    display: flex;
    flex-direction: column; /* stack title + chart vertically */
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow: hidden; /* clip any overflow */
}

    /* Chart area fills remaining space */
    .chart-card .chart-content {
        flex: 1 1 auto;
        display: flex;
    }

        /* Make RadzenChart fill its parent */
        .chart-card .chart-content radzen-chart {
            width: 100% !important;
            height: 100% !important;
        }

.dashboard-chart-title{
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: center;
}

.environment-watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    user-select: none;
    z-index: 10000;
    color: rgba(0, 0, 0, 0.05);
    font-size: 10rem;
    font-weight: 700;
    text-transform: uppercase;
    transform: rotate(-30deg);
}