/* 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)*/

.classicReglaIframe {
    width: 100%;
    height: calc(100vh - 50px);
}

/* 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;
}

.rz-panel-menu .rz-navigation-item-active:before, .rz-panel-menu .rz-navigation-item-wrapper-active:before
{
    background-color: var(--rz-primary) !important;
}

.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) 
{
    .queryInputField 
    {
        max-width: 100%;
    }

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

}

/* ---------- Datagrid Filter Displayer START---------------------------- */
/* we want to hide the ugly scroll bar because 
   it takes to much space and does not look to good */
.FilterDisplay-ScrollContainer {
    overflow-y: scroll;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

.FilterDisplay-ScrollContainer::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

.FilterDisplay {
    display: flex;
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
    white-space: nowrap !important;
}

.FilterDisplay-Content-Wrapper {
    margin-left: 0.5em;
}

.FilterDisplay-MultiValueContent {
    display: flex;
}

.FilterDisplay-Label {
    inset-inline-end: auto;
    inset-block-start: var(--rz-form-field-label-floating-top);
    padding-block-start: 0;
    padding-block-end: 0;
    transform: translate(0, 0);
    color: #616161;
    background-color: var(--rz-form-field-label-floating-background-color);
    line-height: 1rem;
    max-width: calc(100% - 1.5rem);
}

.FilterDisplay-Content-bouble {
    display: flex;
    border: 1px solid black;
    padding: 0.3em 0.35em;
    color: var(--regla-primary);
    border-color: var(--regla-primary);
    border-radius: var(--rz-border-radius);
    margin-right: 0.5em;
}
/* ---------- Datagrid Filter Displayer END---------------------------- */


/*----------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;
}

/* --------------------companyPortalTable stylings that cannot be stored in component lvl css---------------------- */
.companyPortalTable-styling > .rz-data-grid-data tbody > .rz-data-row td:has(.companyPortal-green) {
    background-color: var(--regla-success-lighter) !important;
    color: var(--regla-success-dark) !important; 
}
.companyPortalTable-styling > .rz-data-grid-data tbody > .rz-data-row td:has(.companyPortal-white) {
    background-color: #ffffff !important;
    color: var(--regla-blue-800) !important;
}
.companyPortalTable-styling > .rz-data-grid-data tbody > .rz-data-row td:has(.companyPortal-yellow) {
    background-color: var(--regla-warning-lighter) !important; 
    color: var(--regla-warning-dark) !important;
}
.companyPortalTable-styling > .rz-data-grid-data tbody > .rz-data-row td:has(.companyPortal-red) {
    background-color: var(--regla-error-lighter) !important; 
    color: var(--regla-error-dark) !important;
}
.companyPortalTable-styling > .rz-data-grid-data tbody > .rz-data-row td:has(.companyPortal-unknown) {
    background-color: var(--regla-light-base-200) !important;
    color: var(--regla-neutral-dark) !important;
}
.companyPortalTable-styling > .rz-data-grid-data tbody > .rz-data-row td:has(.companyPortal-inactive) {
    background-color: var(--regla-light-base-400) !important;
    color: var(--regla-neutral-dark) !important;
}