/* vars */

:root {
    --npo-color-white: #ffffff;
    --npo-color-light: #d9d9d9;
    --npo-color-primary: #2d688e;
    --npo-color-secondary: #065074;
}

/* radzen */

:root {
    --rz-white: var(--npo-color-white);
    --rz-base: var(--npo-color-light);
    --rz-primary: var(--npo-color-primary);
    --rz-secondary: var(--npo-color-secondary);
    --rz-success: #2d688e;
    --rz-success-light: #527d99;
    --rz-success-lighter: #b2c9d7;
    --rz-badge-border-radius: 5px !important;
    --rz-badge-font-size: 10px !important;
    --rz-badge-font-weight: 700 !important;
    --rz-border-radius: 12px;
    --rz-button-border-radius: 7px;
}

.rz-button {
    border: .5px solid var(--rz-base-400) !important;
    box-shadow: none !important;
}

    .rz-button.rz-variant-text {
        border: none !important;
    }

.rz-data-grid.flex {
    flex: 0 1 auto !important;
    overflow: visible;
}

    .rz-data-grid.flex .rz-data-grid-data {
        max-height: none;
        overflow: visible;
    }

.rz-numeric-button,
.rz-datepicker-field-button,
.rz-datepicker .rz-button {
    border: none !important;
}

/* flex */

.flex-0 {
    flex: 0 0 !important;
}

.flex-1 {
    flex: 1 1 !important;
}

.flex-2 {
    flex: 2 2 !important;
}

.flex-3 {
    flex: 3 3 !important;
}

.flex-4 {
    flex: 4 4 !important;
}

.flex-scroll {
    flex: 1 1 !important;
    overflow: scroll;
    overflow-x: auto;
}

.flex-scroll-minimal {
    flex: 1 1 !important;
    overflow: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

    .flex-scroll-minimal:hover {
        scrollbar-color: var(--rz-base-400) transparent;
    }

.flex-noscroll {
    flex: 1 1 !important;
    overflow: hidden;
}

/* layout */

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.lines-v > div:not(:last-child) {
    border-bottom: .5px solid var(--rz-base-400);
}

.lines-v-soft > div:not(:last-child) {
    border-bottom: .5px solid var(--rz-base-200);
}

.lines-h > div:not(:last-child) {
    border-right: .5px solid var(--rz-base-400);
}

.cursor-pointer {
    cursor: pointer;
}

    .cursor-pointer i,
    .cursor-pointer label {
        cursor: inherit;
    }

/* animation */

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-fadein {
    animation: slideInFromLeft 0.3s ease-out forwards;
}

.anim-fadein-staggered > *:nth-child(1) {
    animation: slideInFromLeft 0.3s ease-out forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(2) {
    animation: slideInFromLeft 0.3s ease-out 0.03s forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(3) {
    animation: slideInFromLeft 0.3s ease-out 0.06s forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(4) {
    animation: slideInFromLeft 0.3s ease-out 0.09s forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(5) {
    animation: slideInFromLeft 0.3s ease-out 0.12s forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(6) {
    animation: slideInFromLeft 0.3s ease-out 0.15s forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(7) {
    animation: slideInFromLeft 0.3s ease-out 0.18s forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(8) {
    animation: slideInFromLeft 0.3s ease-out 0.21s forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(9) {
    animation: slideInFromLeft 0.3s ease-out 0.24s forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(10) {
    animation: slideInFromLeft 0.3s ease-out 0.27s forwards;
    opacity: 0;
}

.anim-fadein-staggered > *:nth-child(n+11) {
    animation: slideInFromLeft 0.3s ease-out 0.3s forwards;
    opacity: 0;
}

/* others */

td:has(.grid-field-wrapper) > .rz-cell-data {
    vertical-align: top;
}

.rz-data-grid tr.rz-datatable-edit > td {
    position: relative;
}

.rz-data-grid .rz-datatable-edit td {
    vertical-align: top !important;
}