:root:root {
    --v-green: #00D15F;
    --v-green-light: #9CFFA3;
    --v-green-lighter: #E1F4EC;
    --v-green-dark: #009277;
    --v-green-darker: #02613F;
    --v-blue: #3700FF;
    --v-blue-light: #57E0FF;
    --v-blue-lighter: #E3EEFE;
    --v-on-blue-lighter: #89AEE4;
    --v-blue-dark: #283E8E;
    --v-blue-darker: #002833;
    --v-supplementary-purple: #8E71F4;
    --v-supplementary-grey: #CECBB8;
    --v-system-yellow: #FFD839;
    --v-system-orange: #FE8A25;
    --v-system-red: #ED2B3D;
    --v-neutral-darker: #232323;
    --v-neutral-dark: #505861;
    --v-neutral: #ADACAF;
    --v-neutral-light: #F0F0F0;
    --v-neutral-lighter: #F9F9F9;
    --v-nav-background-color: var(--v-green-lighter);
    --v-nav-color: var(--v-green-darker);
    /**/
    --rz-secondary: var(--v-green-darker) !important;
    --rz-secondary-light: var(--v-neutral-light) !important;
    --rz-secondary-lighter: var(--v-neutral-lighter) !important;
    --rz-secondary-dark: var(--v-neutral-dark) !important;
    --rz-secondary-darker: var(--v-neutral-darker) !important;
    --rz-primary: var(--v-green) !important;
    --rz-primary-light: var(--v-green-light) !important;
    --rz-primary-lighter: var(--v-green-lighter) !important;
    --rz-primary-dark: var(--v-green-dark) !important;
    --rz-primary-darker: var(--v-green-darker) !important;
    --rz-info: var(--v-blue) !important;
    --rz-info-light: var(--v-blue-light) !important;
    --rz-info-lighter: var(--v-blue-lighter) !important;
    --rz-on-info: var(--rz-base-100) !important;
    --rz-on-info-light: var(--rz-base-700) !important;
    --rz-on-info-lighter: var(--v-on-blue-lighter) !important;
    --rz-info-dark: var(--v-blue-dark) !important;
    --rz-info-darker: var(--v-blue-darker) !important;
    --rz-warning: #FFD839 !important;
    --rz-on-warning: var(--v-neutral-dark) !important;
    --rz-danger: #ED2B3D !important;
    /**/
    --rz-tabs-tab-color: var(--v-nav-color) !important;
    --rz-tabs-tab-hover-color: var(--v-nav-color) !important;
    --rz-tabs-tab-selected-top-border-color: var(--v-nav-color) !important;
    --rz-selectbar-selected-background-color: var(--v-nav-background-color) !important;
    --rz-selectbar-selected-border: var(--v-nav-background-color) !important;
    --rz-selectbar-selected-color: var(--v-nav-color) !important;
    /**/
    --rz-grid-header-text-transform: none;
    --rz-grid-header-font-size: 0.85rem;
}

.rz-tabview-nav {
    @extend .rz-tabview-nav;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.rz-grid-table thead th .rz-column-title-content {
    @extend .rz-grid-table thead th .rz-column-title-content;
    /*width: 100%;
    transform: rotate(45deg);
    height: calc(var(--bs-body-font-size) * 4.5);
    margin-left: -15px;
    margin-top: 20px;
    margin-right: 5px;
    padding-top: 15px;*/
    /*padding-left: 0.5rem;
    padding-right: 0.5rem;*/
    text-align: left;
    font-size: calc(var(--rz-grid-header-font-size) * 1.03);
    white-space: break-spaces;
}
    /*@media (min-width: 1600px) {
                html {
                    transform: scale(1.075);
                    transform-origin: top center;
                }
            }
            @media (min-width: 1800px) {
                html {
                    transform: scale(1.15);
                    transform-origin: top center;
                }
            }*/
    .valid.modified:not([type=checkbox]) {
    outline: 0px solid #26b050;
}

.rz-series-data-label {
    fill: var(--rz-on-primary);
    font-size: 12px;
}

a.rz-navigation-item-link.active span {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-color: var(--v-nav-color) !important;
}

.rz-dropdown-chips .rz-chip .rz-chip-text {
    @extend .rz-dropdown-chips .rz-chip .rz-chip-text;
    text-overflow: ellipsis;
}


.rz-messages-warning {
    display: inline-block;
    color: var(--rz-black);
    font-size: var(--rz-form-error-font-size);
    padding: var(--rz-validator-text-padding);
}

.rz-message-warning-popup {
    position: absolute;
    background-color: var(--rz-warning);
    transform: var(--rz-validator-transform);
    box-shadow: 0 6px 14px 0 rgba(255, 255, 123, 0.3);
    padding: var(--rz-validator-padding);
    border-radius: var(--rz-border-radius);
    color: var(--rz-black);
    pointer-events: none;
}

    .rz-message-warning-popup:before {
        content: "";
        border: var(--rz-validator-pointer-size) solid transparent;
        border-bottom-color: var(--rz-warning);
        position: absolute;
        inset-block-start: calc(-2 * var(--rz-validator-pointer-size));
        inset-inline-start: calc(var(--rz-border-radius) + var(--rz-validator-pointer-size) / 2);
    }

.rz-series-data-label {
    @extend .rz-series-data-label;
    fill: var(--rz-chart-axis-label-color);
}

.rz-column-title-content:has(> div) {
    width:100%;
}

.v-field-group {
    margin-top: 0.25rem;
}
    .v-field-group .rz-fieldset-legend {
        @extend .rz-fieldset-legend;
        margin-block: var(--rz-fieldset-legend-margin-block);
        margin-inline: 0.375rem 0;
        padding-block: calc(var(--rz-fieldset-legend-padding-block)*0.375);
        padding-inline: calc(var(--rz-fieldset-legend-padding-inline)*0.375);
    }
    .v-field-group .rz-fieldset-legend-text {
        @extend .rz-fieldset-legend-text;
        font-size: 0.8125rem;
        font-weight:600;
    }
    .v-field-group .rz-fieldset-content {
        @extend .rz-fieldset-content;
        padding: calc(var(--rz-fieldset-padding)*0.375);
        padding-top: calc(var(--rz-fieldset-padding)*0.125);
    }

.v-text-overflow-clip * {
    text-overflow: clip !important;
}
.v-text-overflow-ellipsis {
    text-overflow: ellipsis !important;
    white-space: nowrap;
    overflow:hidden;
}
.v-text-overflow-ellipsis * {
    text-overflow: ellipsis !important;
}
.v-overflow-ellipsis {
    overflow: hidden;
    position: relative;
    
}
.v-overflow-ellipsis::after {
    content: "...";
    position: absolute;
    bottom: -5px;
    right: 5px;
    
    font-size: 18px;
    height:20px;
}

.v-overflow-fade-out {
    overflow: hidden;
    display: block;
    position: relative;
    /* Apply a fade-out effect */
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
}

.v-text-overflow-reset * {
    text-overflow: initial !important;
}
.v-disabled-text * {
    color: var(--rz-base-500) !important;
    font-style:italic;
}
.v-overflow-hidden {
    overflow:hidden
}
.v-overflow-x-hidden {
    overflow-x: hidden
}
.v-overflow-y-hidden {
    overflow-y: hidden
}

@keyframes fadeInSwell {
    0% {
        transform: scale(1.0);
        opacity: 0;
    }

    30% {
        transform: scale(1.0);
    }

    65% {
        transform: scale(1.02);
    }

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

.animation-fadeInSwell {
    animation: 1.5s fadeInSwell;
}
@keyframes flashElement {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

.animation-flashElement {
    animation: 1s flashElement;
}


@keyframes slideDown {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(100%);
    }
}

.animation-slideDown {
    animation: 1.5s slideDown;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}

.animation-slideInFromRight {
    animation: 0.5s slideInFromRight;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

.animation-slideInFromLeft {
    animation: 0.5s slideInFromLeft;
}

@keyframes pulseBgToWarning {
    0% {
        background-color: inherit; /* Start with the element's current background color */
    }

    50% {
        background-color: var(--rz-warning-light); /* Transition to red */
        color: var(--rz-warning-darker);
        box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-warning-darker);
        border-color: var(--rz-warning-darker);
        outline-color: var(--rz-warning-darker);
    }

    100% {
        background-color: inherit; /* Return to the original color */
    }
}

/* Class to trigger the animation */
.animation-pulse-warning {
    animation: pulseBgToWarning 2s ease-in-out infinite;
}