:root {
                                    /* HEX Variations Of Colors */
    --dark-blue: 5, 113, 199;       /* #0571C7 */
    --blue-primary: 33, 150, 243;   /* #2196F3 */
    --light-blue: 188, 221, 253;    /* #BCDDFD */
    --main-color: 255, 9, 21;       /* #E10915 */
    --main-color-dark: 195, 21, 31; /* #C3151F */
    --eggshell: 248, 248, 248;      /* #F8F8F8 */
    --dark-grey: 169, 169, 169;     /* #A9A9A9 */
    --light-black: 70, 70, 70;      /* #464646 */
    --black: 15, 16, 16;            /* #0F1010 */
    --white: 255, 255, 255;          /* #FFFFFF */
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--light-black);
}

body{
    overflow:  hidden;
}
.rz-state-highlight {
    color: var(--light-black) !important;
    background-color: rgba(var(--main-color), 0.1) !important;
}

.rz-state-active {
    background-color: rgba(var(--main-color), 0.6) !important;
}

.rz-chkbox-box .rzi {
    color: var(--light-black) !important;
}



.rz-pager-page.rz-state-active {
    color: rgb(var(--eggshell)) !important;
}

/* ---------------------------------------------------------------------------- Main Button */
.main-btn {
    position: relative !important;
    display: inline-block !important;
    margin: 10px 0 !important;
    padding: 10px 20px !important;
    text-align: center !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    color: rgb(var(--main-color)) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: ease-out 0.5s !important;
    border: 2px solid rgb(var(--main-color)) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 0 rgb(var(--main-color)) !important;
}

    .main-btn:hover {
        color: rgb(var(--eggshell)) !important;
        box-shadow: inset 0 -100px 0 0 rgb(var(--main-color)) !important;
    }

    .main-btn:active {
        transform: scale(0.9) !important;
    }



/* ---------------------------------------------------------------------------- Main Cancel Button */
.main-cancel-btn {
    position: relative !important;
    display: inline-block !important;
    margin: 10px 0 !important;
    padding: 10px 20px !important;
    text-align: center !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    color: rgb(var(--blue-primary)) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: ease-out 0.5s !important;
    border: 2px solid rgb(var(--blue-primary)) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 0 rgb(var(--blue-primary)) !important;
}

    .main-cancel-btn:hover {
        color: rgb(var(--eggshell)) !important;
        box-shadow: inset 0 -100px 0 0 rgb(var(--blue-primary)) !important;
    }

    .main-cancel-btn:active {
        transform: scale(0.9) !important;
    }




/* ---------------------------------------------------------------------------------- Loader*/

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: rgb(var(--eggshell));
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: rgb(var(--main-color));
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }


/* ---------------------------------------------------------------------------------- Styling of the text when no records are available to display in the DataGrid */
.no-records {
    font-size: 24px;
    color: rgb(var(--light-black));
}

/* --------------------------------------------------------------------------------------- Grids Width*/

.grid-width {
    width:  calc(100vw - 350px);
}