/* NOTE: you might find a lot of weird css rules here, these are not some random configurations 
   but rather these are the necessary changes to Radzen styling framework to make it 
   look like the desired components which were made by the UI/UX designers (consult the Figma file for more information)*/

/* Tab styling for main pages of systems  */
.systemMainPageTab > .rz-tabview-nav > .rz-tabview-selected {
    background-color: var(--rz-body-background-color) !important;
    border-bottom: 2px solid var(--rz-primary) !important;
    border-top: none !important;
    color: var(--rz-primary) !important;
}

.systemMainPageTab > .rz-tabview-nav > .rz-tabview-selected .rz-tabview-title {
    font-weight: 600 !important;
}

.systemMainPageTab > .rz-tabview-nav {
    border-bottom: var(--rz-fieldset-border) !important;
    margin-bottom: 0.5em;
}

/* we remove the rz-tabview-panels border to get rid of the entire body border 
    and place a new one only on top of the actions */
.systemMainPageTab > .rz-tabview-panels {
    background-color: var(--rz-body-background-color) !important;
    border: none !important;
}

.systemMainPageTab > .rz-tabview-panels > .rz-tabview-panel 
{
    padding: 0em !important;
}

.systemMainPageTabItem {
    background-color: var(--rz-body-background-color) !important;
    border: none !important;
}

/* ---------------------  Custom main site layout and Sidenav stuff ----------------------- */
.custom-site-system-groups-mobile 
{
    font-weight: normal !important;
}
.custom-site-system-groups-mobile > li > .rz-navigation-item {
    background-color: transparent !important;
}
.custom-site-system-groups-mobile-system-item > .rz-navigation-item-wrapper
{
    background-color: transparent !important;
}

.custom-site-system-groups
{
    font-weight: normal !important;
}

.custom-site-system-groups > li > .rz-navigation-item-wrapper:hover {
    background-color: var(--regla-blue-700) !important;
}

/*rz-state-focused*/
.custom-site-system-groups-system-permenantactivehover {
    background-color: var(--regla-blue-700) !important;
}

.custom-site-system-groups-system-currentlocation >.rz-navigation-item-wrapper:before {
   position: absolute;
   content: "";
   inset-block-start: 0;
   inset-block-end: 0;
   width: 4px;
   background-color: var(--rz-primary) !important;
}

.custom-site-system-groups-system-item > .rz-navigation-item-wrapper
{
    background-color: var(--regla-topAndSide-bar) !important;
}

.custom-site-system-groups-system-item > .rz-navigation-item-wrapper:hover
{
     background-color: var(--regla-blue-700) !important;
}


.rz-panel-menu .rz-navigation-item-active:before, .rz-panel-menu .rz-navigation-item-wrapper-active:before
{
    background-color: var(--rz-primary) !important;
}
/* coordinates should be assigned in the style attribute programatically */
.custom-site-system-groups-system-item-popup
{
    overflow: hidden;
    position: absolute;
    min-width:200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    z-index:99; 
        background-color: var(--regla-blue-700) !important;
}

.hideTopNavInDesktop {
    display: none !important;
}

@media (max-width: 768px) 
{
    .hideTopNavInDesktop {
        display: block !important;
    }
}

#RadzenLayoutMainSiteLayout > .rz-header {
    border-bottom: none !important;
    min-height: auto;
}

#RadzenLayoutMainSiteLayout > .rz-sidebar {
    background-color: var(--regla-topAndSide-bar);
    border: none;
    /*  This removes an ugly bottom line which the top header has making the component look cleaner. 
        Thi cant be higher than 100! goign higher will result in the sidenav going above Radzens masking element */
    z-index: 99;
}

#RadzenLayoutMainSiteLayout .rz-panel-menu {
    background-color: transparent !important;
}

#RadzenLayoutMainSiteLayout .rz-panel-menu > li{
    border: none !important;
}

#RadzenLayoutMainSiteLayout_ExpandSideBTN
{
    background-color: transparent !important;
    font-weight: normal !important;
    text-align: start;
    padding-left: 1.2em;
}

/*---------- Base Datagrid styling  -----*/
.base-custom-radzen-grid-styling {

    padding: 0 1em 1em !important;
    border-radius: 8px !important;
}

.base-custom-radzen-grid-styling > .rz-data-grid-data {
     border: var(--rz-grid-cell-border);
     border-radius: 8px !important;
     border-top: none !important;
     margin-bottom: 0.7em;
}

/* The next two rules ensure that when the user enters row edit, 
    the elements inside the row edit do not enlarge the height of the row itself, our CEO hates that */
.base-custom-radzen-grid-styling > .rz-data-grid-data tbody> .rz-datatable-edit td
{
    padding-top: 0.29em !important;
    padding-bottom: 0.29em !important;
}
.base-custom-radzen-grid-styling > .rz-data-grid-data tbody> .rz-datatable-edit td textarea
{
    margin-bottom: -5px;
}

.base-custom-radzen-grid-styling th div > .rz-column-title > .rz-column-title-content{
    font-weight: 600 !important;
}

.base-custom-radzen-grid-styling > .rz-data-grid-data > .rz-grid-table tfoot td
{
  background-color: var(--regla-blue-700) !important;
  border: none !important;
}
.base-custom-radzen-grid-styling > .rz-data-grid-data > .rz-grid-table tfoot td .rz-text-subtitle1
{
   color: white !important;
   font-weight: normal !important;
}

.base-custom-radzen-grid-styling th div > span > .rzi-sort-asc,
.base-custom-radzen-grid-styling th div > span > .rzi-sort-desc
{
    color: var(--regla-primary-darker) !important;
}

.base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) {
   background-color: var(--regla-primary-subtle) !important;
}

.base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) .rz-column-title,
.base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) .rz-column-drag,
.base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) div > span > .rzi-sort-asc,
.base-custom-radzen-grid-styling th:has(.rz-grid-filter-active) div > span > .rzi-sort-desc
{
   color: var(--regla-primary) !important;
}

.base-custom-radzen-grid-styling > .rz-group-header {
   /* we want the same color as the defaul table row od color */
   background-color: var(--rz-grid-stripe-odd-background-color);
   padding-left: 0em !important;
   padding-right: 0em !important;
   border-bottom: none !important;
   margin-bottom: 1em !important;
}

.base-custom-radzen-grid-styling > .rz-pager .rz-pager-first,.rz-pager-last {
    display: none !important;
}

.base-custom-radzen-grid-styling > .rz-pager .rz-pager-prev,.rz-pager-next,
.base-custom-radzen-grid-styling > .rz-pager > .rz-pager-pages > .rz-pager-element:not(.rz-state-active){
    background-color: transparent !important;
}

/* Overall header template styling */
.base-custom-radzen-grid-styling > .rz-group-header > .rz-custom-header {
    width: 100% !important;
    /* rz-group-header makes rz-custom-header share the same space with other Radzen generated components e.g. rz-column-picker. 
       So push them down to the next line and if we achive it we are left with some deadspace, this margin rule ensure
       that this deadspace is removed.*/
    margin-right: -1em;
}

.base-custom-radzen-grid-styling-header-top-part {
    width: 100% !important;
    margin-top: 1em;
}

.base-custom-radzen-grid-styling-header-bottom-part {
    width: calc(100% - 110px);
    /* NOTE: If base-custom-radzen-grid-styling-header-bottom-part does not have any items in it then
             it will not apply the spacing which 'Column Visibility Dropdown' depends on in such cases
             you need to make an :empty rule and apply margin-top:3.5em; to esnure that the table looks correct.
    */
    margin-top: 1.45em;
}

.base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
    width: 95%;
}

.base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer:empty  {
    margin-top: 3.5em;
}

@media (max-width: 1350px) {
    .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
        width: 85%;
    }
}

@media (max-width: 970px) {
    .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
        width: 90%;
        margin-bottom:0.5em;
    }
}

@media (max-width: 730px) {
    .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
        width: 85%;
    }
}

@media (max-width: 610px) {
    .base-custom-radzen-grid-styling-header-bottom-part .DatagridFilterDisplayer {
        width: 60%;
        display: none !important;
    }
}

.base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside > .rz-menu {
   background-color: transparent !important;
   border: none !important;
   padding: 0 !important;
   display: none;
}

.base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside > .rz-menu > .rz-navigation-item > .rz-navigation-item-wrapper > .rz-navigation-item-link {
     justify-content: end !important;
}

.base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside > .rz-menu > .rz-navigation-item > .rz-navigation-menu
{
    box-shadow: none !important;
}
/* --Column Visibility Dropdown settings--*/
/* If the table has a column picker, we minimize it with CSS.
   If we were to implement our own picker, we would need to implement our own custom visibility lifecycle, 
   hook it into Radzen’s functionality, and also control the rendering process, 
   which is way too much work for just changing the look and size of the column picker. */
.base-custom-radzen-grid-styling > .rz-group-header > .rz-column-picker > .rz-dropdown {
    max-width: 140px;
    position:absolute;
    right: 15px;
    height: 2.1em !important;
    margin-top: 1.45em;
}
.base-custom-radzen-grid-styling > .rz-group-header > .rz-column-picker > .rz-dropdown > .rz-dropdown-label  {
    margin-top: -0.3em;
}
/* if the table has only 1 part in its header then we need to adjust the dropdown correctly */
.only-one-part-header > .rz-group-header > .rz-column-picker > .rz-dropdown {
    margin-top: -1.2em !important;
}

.base-custom-radzen-grid-styling > .rz-group-header > .rz-column-picker > .rz-dropdown > .rz-dropdown-trigger > .rzi-chevron-down:before {
   color:var(--rz-primary);
}

.base-custom-radzen-grid-styling-header-top-part .header-top-part-leftside {
   width: 70%;
}

.SummaryTableHeader {
    margin-top: 1em;
    margin-bottom: 1em;
    background-color: var(--rz-grid-background-color);
    border-radius: 10px;
}

.SummaryTableHeader-Rightside {
    padding-left: 0.75em;
    padding-top: 0.5em;
    padding-bottom: 0.3em;
}

/* Global search field Quick search field i */
.queryInputField-darker-label > .rz-form-field-content > .rz-text-truncate {
    color: var(--rz-base-800);
    font-weight: 500;
}

.queryInputField > .rz-form-field-content{
   height: 36px !important;
}

.queryInputField {
    width: 100% !important;
    max-width: 280px;
    margin-top: -0.45em;
}

@media (max-width: 777px) 
{
    .base-custom-radzen-grid-desktop-only
    {
        display: none;
    }

    .base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside > .rz-menu {
        display: block;
    }

    .base-custom-radzen-grid-styling-header-bottom-part {
        margin-top: 1.5em;
    }
    .base-custom-radzen-grid-styling-header-top-part .header-top-part-rightside
    {
        width: 100% !important;
    }

    .base-custom-radzen-grid-styling > .rz-group-header > .rz-column-picker > .rz-dropdown {
        margin-top: 2.6em !important;
    }

    .queryInputField 
    {
        max-width: 100%;
    }

    .hideContentInDesktop {
        display: inline-block !important;
    }

}

/*----------Razden Responsive datagrid logic ----------*/
.razden-custom-responsive-grid .hideInDesktop {
    display: none !important;
}

.razden-custom-responsive-grid .razden-custom-responsive-grid-ResponsiveInputSize {
    width: 100%;
}

@media (max-width: 768px) {

    .razden-custom-responsive-grid .razden-custom-responsive-grid-ResponsiveInputSize {
        width: 100%;
        max-width: 230px;
    }

    /**You can do this in code but then u need to use JS (only possible to get window width that way) and that defeats the purpose of Blazor*/
    .rz-dialog-side
    { 
        width: 100% !important;
    }
    .razden-custom-responsive-grid
    {
        max-height:600px;
    }
    .razden-custom-responsive-grid .hideInDesktop {
        display: inline-block !important;
    }
    .razden-custom-responsive-grid .hideInMobile
    {
        display: none !important;
    }
    .razden-custom-responsive-grid .wrapWordsIfMobile {
        white-space: normal;
    }

    /* Inside row expansion, text that belongs together is covered inside <span> elements
       this ensure that this text breaks on by <span> for better redability*/
    .razden-custom-responsive-grid .razden-custom-responsive-grid-rowExpansion-Text-wrapping {
        display: flex;
        flex-wrap: wrap;
    }

    .razden-custom-responsive-grid .razden-custom-responsive-grid-rowExpansion-Text-wrapping > span {
        display: inline-block;
        word-break: break-all; /* Ensures words break within the span */
        margin-right: 7px; /* Adds space between words */
    }

    .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody .rz-column-title {
        font-weight: bold;
    }
    /* this fixes a UI book where the background color of the footer does not span the width of the table*/
    .razden-custom-responsive-grid > .rz-data-grid-data > table > tfoot td:last-child  {
        width: 100%;
    }

    .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > .rz-col-icon {
        display:flex;
        justify-content:end;
    }

    .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > .rz-col-icon > a {
        margin-right: 0.5em;
    }
    
}

@media screen and (min-width: 380px) and (max-width: 768px) {
    .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > td:not(.rz-col-icon) {
        display: flex;
        justify-content: space-between;
    }

    .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > td > .rz-column-title {
        flex: 0 0 35%;
        white-space: normal;
    }

    .razden-custom-responsive-grid > .rz-data-grid-data > table > tbody > tr > td > .rz-cell-data {
        flex: 0 0 65%;
        text-align: left;
        display: flex;
        justify-content: flex-end;
        white-space: normal;
    }
}

/*----------TableSavedSearchFilter Component START-----------------------*/
.SavedSearchFilterPicker > .rz-dropdown
{
    border: 1px solid var(--regla-primary) !important;
    color: var(--regla-primary) !important;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight:600;
}

.SavedSearchFilterPicker > .rz-dropdown > .rz-placeholder
{
    color: var(--regla-primary) !important;
    font-weight:600;
}

@media screen and (min-width: 777px) and (max-width: 830px) {
    .base-custom-radzen-grid-styling-header-top-part .header-top-part-leftside {
        max-width: 160px;
    }
}

/*----------TableSavedSearchFilter Component END-----------------------*/

/*----------LOGIN FORM START----------*/
.CustomLoginHeader {
    height: 100%;
    background: url('../Images/Regla-hero-bg-1024x576.jpg');
    background-repeat: no-repeat;
    background-position: center !important;
}

.CustomLoginHeader-text {
    margin-top: 40%;
}

@media (max-width:1023px) {

    .CustomLoginHeader-text {
        margin-top:13%;
        margin-left: 25%;
    }

    .CustomLoginHeader {
        height: 360px;
        background: url('../Images/Regla-hero-bg-768x432.jpg');
    }
}

@media (max-width:830px) {
    .CustomLoginHeader-text {
        margin-top: 15%;
    }
}

@media (max-width:680px) {
    .CustomLoginHeader-text {
        margin-left: 0;
        margin-top: 25%;
    }
}

.CustomLoginContent {
    max-width: 300px;
    min-width: 268px;
    margin: auto;
}

@media (max-width:1023px) {

    .LoginGapFixer {
        margin-top: -1em;
    }
}

.CustomLoginForm > .rz-form > .rz-form-row > .rz-form-input-wrapper > button {
    width: 100% !important;
    border-radius: 0 !important;
}

.CustomLoginForm-divider {
    display: flex;
    align-items: center;
    margin-top:0.6em;
}

.CustomLoginForm-divider::before, .CustomLoginForm-divider::after {
    flex: 1;
    content: '';
    padding: 0.5px;
    background-color: #888 !important;
    margin: 2px;
}

/*----------LOGIN FORM END----------*/

/* ----------Custom single dropdown button START ---------------- */
/* Radzen does not have a simple multi select button so what we do isntead 
   we take their splitbutton and hide the first part making it essentially a dropdown button */
.Custom-SingleDropDownBTN > :nth-child(1) {
    display:none;
}

.Custom-SingleDropDownBTN > .rz-button {
    border-radius: 3px !important;
    overflow: hidden; /* to achive the 3 dots in the button we need to push out the other icon and then hide it with display none */
}

.Custom-SingleDropDownBTN > .rz-button > i::before {
    content: "more_vert" !important;
    padding-left:1.12em;
}

/* ----------Custom single dropdown button END ---------------- */

.TableSummaryBadge {
    background-color: var(--regla-primary-darker) !important;
    font-weight: 500 !important;
    padding: 0.35em !important;
    text-transform: none !important; 
}

/*------------ Seperator ---------------- */
.separator {
    display: flex;
    align-items: center;
    text-align: center;
}

    .separator::before,
    .separator::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e0e1e4;
    }

    .separator:not(:empty)::before {
        margin-right: .25em;
    }

    .separator:not(:empty)::after {
        margin-left: .25em;
    }

.hideElement 
{
    display: none !important;
}

.hideContentInDesktop {
    display: none !important;
}

.datagrid-with-head-right > .rz-group-header {
    justify-content: end !important;
}

#blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.makeMousePointer {
    cursor: pointer !important;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.underlineTextOnHover:hover
{
    text-decoration: underline !important;
    cursor: pointer !important;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.modalWithPrimaryBackground > .rz-dialog-titlebar{
    background-color: var(--regla-background);
}
.modalWithPrimaryBackground > .rz-dialog-content {
    background-color: var(--regla-background);
}

.GlobalActionBTN
{
    width: 150px !important;
}

.modalWithNoMask {
    box-shadow: none !important;
    pointer-events: all !important;
}
.modalWithNoMask > .rz-dialog-titlebar {
   padding: 0.25em 0.25em 0.25em 1em !important;
}
.modalWithNoMask > .rz-dialog-titlebar > .rz-dialog-titlebar-close{
   margin-right: 0.5em;
   margin-top: 0.25em;
   z-index: 2;
}
.rz-dialog-wrapper:has(.modalWithNoMask) .rz-dialog-mask {
    display: none !important;
}
.rz-dialog-wrapper:has(.modalWithNoMask)
{
    pointer-events: none;
}

.toast {
    animation: toastFadeIn 4s;
    opacity: 0;
}

@keyframes toastFadeIn {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.Circle {
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
}

.Tooltip-Container > * {
    visibility: hidden;
}

.Tooltip-Container:hover > * {
    visibility: visible;
}

.Tooltip {
    cursor: default;
    /*transform: translate(-50%, 10%);*/
    transform: translate(calc(-50% + 0.5rem), 0.25rem);
}

    .Tooltip::before {
        border-bottom: 0.25rem solid #1d6aa5;
        border-left: 0.25rem solid transparent;
        border-right: 0.25rem solid transparent;
        content: "";
        height: 0px;
        left: 50%;
        position: fixed;
        top: -0.25rem;
        transform: translateX(-50%);
        width: 0px;
        z-index: 40;
    }

.validation-message {
    color: red;
}

.chk_modal + label {
    background-color: forestgreen;
    cursor: pointer;
    user-select: none;
}

.chk_modal:checked + label {
    background-color: darkred;
}

.chk_modal:checked + label {
    background-color: darkred;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

p {
    margin-bottom: 0px !important;
    margin-top: 0;
}

.drop-zone {
    border: 2px dashed #0087F7;
    border-radius: 5px;
    min-height: 100px;
    padding: 20px;
    width: 100%;
}

    .drop-zone.hover {
        border-style: solid;
    }

.ant-switch {
    z-index: 1;
}

.dark .ant-switch {
}

.ant-switch-checked {
    background-color: #22c55e !important;
}

.dark .ant-switch-checked {
    background-color: #15803d !important;
}

.hamButton {
    -webkit-animation-name: hamButton;
    -webkit-animation-duration: .3s;
    animation-name: hamButton;
    animation-duration: .3s;
}

.radzen-side-dialog-class {
    animation: 4s linear 0s radzen-side-dialog-slide;
    max-width: 400px;
    transition: all 4s ease-in-out;
    width: fit-content;
}

.radzen-side-dialog-class .rz-dialog-side-content {
    overflow-x: hidden;
}

.radzen-side-dialog-maxwidth {
    max-width: 100%;
}

.radzen-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    vertical-align: middle;
}


@keyframes radzen-side-dialog-slide {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes hamButton {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes hamButton {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/*table columns*/
.EmployeeColumns {
    grid-template-columns: minmax(0,50%) minmax(0,25%) minmax(0,25%);
}

.SummaryColumns {
    grid-template-columns: minmax(0,60%) minmax(0,40%);
}

.EmployeeBreakdownColumns {
    grid-template-columns: minmax(0,50%) minmax(0,25%) minmax(0,25%);
}

.DateBreakdownColumns {
    grid-template-columns: minmax(0,50%) minmax(0,25%) minmax(0,25%);
}

/*sm*/
@media (min-width: 640px) {
    .CompanyColumns {
        grid-template-columns: minmax(0,50%) minmax(0,25%) minmax(0,25%);
    }

    .SummaryColumns {
        grid-template-columns: minmax(0,50%) minmax(0,25%) minmax(0,25%);
    }

    .EmployeeColumns {
        grid-template-columns: minmax(0,40%) minmax(0,20%) minmax(0,20%) minmax(0,10%) minmax(0,10%);
    }
}

/*md*/
@media (min-width: 768px) {
    .EmployeeColumns {
        grid-template-columns: minmax(0,40%) minmax(0,12.5%) minmax(0,12.5%) minmax(0,15%) minmax(0,10%) minmax(0,10%);
    }

    .SummaryColumns {
        grid-template-columns: minmax(0,40%) minmax(0,20%) minmax(0,20%) minmax(0,20%);
    }

    .EmployeeBreakdownColumns {
        grid-template-columns: minmax(0,50%) minmax(0,25%) minmax(0,25%);
    }

    /*.EmployeeBreakdownColumns {
        grid-template-columns: 40% 20% 20% 20%;
    }*/

    .DateBreakdownColumns {
        grid-template-columns: minmax(0,30%) minmax(0,25%) minmax(0,25%) minmax(0,20%);
    }
}

/*lg*/
@media (min-width: 1024px) {
    .EmployeeColumns {
        grid-template-columns: minmax(0,25%) minmax(0,25%) minmax(0,10%) minmax(0,10%) minmax(0,10%) minmax(0,10%) minmax(0,10%);
    }

    .EmployeeBreakdownColumns {
        grid-template-columns: minmax(0,35%) minmax(0,20%) minmax(0,25%) minmax(0,20%);
    }

    .DateBreakdownColumns {
        grid-template-columns: minmax(0,10%) minmax(0,25%) minmax(0,15%) minmax(0,12.5%) minmax(0,12.5%) minmax(0,12.5%) minmax(0,12.5%);
    }

    .CompanyColumns {
        grid-template-columns: minmax(0,30%) minmax(0,20%) minmax(0,20%) minmax(0,15%) minmax(0,15%);
    }
}

/*xl*/
@media (min-width: 1280px) {
    .EmployeeColumns {
        grid-template-columns: minmax(0,20%) minmax(0,10%) minmax(0,20%) minmax(0,10%) minmax(0,10%) minmax(0,10%) minmax(0,10%) minmax(0,10%);
    }

    .EmployeeBreakdownColumns {
        grid-template-columns: minmax(0,20%) minmax(0,12.5%) minmax(0,12.5%) minmax(0,12.5%) minmax(0,10%) minmax(0,10%) minmax(0,7.5%) minmax(0,7.5%) minmax(0,7.5%);
    }

    .DateBreakdownColumns {
        grid-template-columns: minmax(0,10%) minmax(0,20%) minmax(0,10%) minmax(0,15%) minmax(0,10%) minmax(0,10%) minmax(0,10%) minmax(0,7.5%) minmax(0,7.5%);
    }
}

/*for razden*/
.menu-header-banner .rz-navigation-item-icon {
    display: none;
}

/*for razden*/
.menu-header-banner .rz-navigation-item-icon-children {
    display: none !important;
}

/*for razden*/
.children-of-menu .rz-navigation-item-icon {
    display:flex !important;
}

/*for razden*/
.children-of-menu .rz-navigation-item-icon-children {
    display: flex !important;
}

body {
    background-image: none !important;
}

/* ---------------------Animations ---------------------------*/

@keyframes fadeInFromLeft 
{
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Apply the animation to an element */
.fade-in-from-left {
  animation: fadeInFromLeft 0.25s ease-out forwards;
}


/* ---------------------Nullify Helpers---------------------- */
.remove-right-padding
{
    padding-right: 0em !important;
}