:root {
    --bg-client: #20D489;
    --accent-client: oklch(96.7% 0.003 264.542);
    --primary-client: #0B4C99;
    --warning: oklch(68% 0.22 75);
    --warning-foreground: oklch(1 0 0);
    --success: oklch(52.7% 0.154 150.069);
    --success-foreground: oklch(1 0 0);
    --info: oklch(70% 0.15 230);
    --info-foreground: oklch(1 0 0);
}

html.swal2-height-auto,
body.swal2-height-auto {
  height: 100% !important;
}


.bg-client {
    background-color: var(--bg-client);
    border-inline-end-color: var(--bg-client);
}

.bg-client .kt-menu-title,
.bg-client .text-muted-foreground {
    color: var(--secondary);
}

.bg-client .kt-menu-item-active\:text-primary {
    .bg-client .kt-menu-item.active>.kt-menu-link & {
        color: var(--primary);
    }
}

.bg-client .kt-menu-item-active\:bg-accent\/60 {
    .bg-client .kt-menu-item.active & {
        @supports (color: color-mix(in lab, red, red)) {
            background-color:
                color-mix(in oklab, var(--accent-client) 60%, transparent);
        }
    }
}

.bg-client .kt-menu-accordion>.kt-menu-item>.kt-menu-link:hover {
    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--accent-client) 60%, transparent);
    }
}

.kt-btn-warning {
    background-color: var(--warning);
    color: var(--warning-foreground);

    &:hover {
        @media (hover: hover) {
            background-color: var(--warning);

            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--warning) 90%, transparent);
            }
        }
    }

    &.active {
        background-color: var(--warning);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--warning) 90%, transparent);
        }
    }
}

.kt-btn-success {
    background-color: var(--success);
    color: var(--success-foreground);

    &:hover {
        @media (hover: hover) {
            background-color: var(--success);

            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--success) 90%, transparent);
            }
        }
    }

    &.active {
        background-color: var(--success);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--success) 90%, transparent);
        }
    }
}

.kt-btn-info {
    background-color: var(--info);
    color: var(--info-foreground);

    &:hover {
        @media (hover: hover) {
            background-color: var(--info);

            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--info) 90%, transparent);
            }
        }
    }

    &.active {
        background-color: var(--info);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--info) 90%, transparent);
        }
    }
}

.kt-btn-outline {
    &.kt-btn-warning {
        border-color: var(--warning);

        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--warning) 10%, transparent);
        }

        background-color: var(--warning);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--warning) 10%, transparent);
        }

        color: var(--warning);

        &:hover {
            @media (hover: hover) {
                background-color: var(--warning);
            }
        }

        &:hover {
            @media (hover: hover) {
                color: var(--warning-foreground);
            }
        }

        &.active {
            border-color: var(--warning);
        }

        &.active {
            background-color: var(--warning);
        }

        &.active {
            color: var(--warning-foreground);
        }

        i {
            color: var(--warning);
        }

        svg {
            color: var(--warning);
        }

        &:hover,
        &.active {
            i {
                color: var(--warning-foreground);
            }

            svg {
                color: var(--warning-foreground);
            }
        }
    }

    &.kt-btn-success {
        border-color: var(--success);

        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--success) 10%, transparent);
        }

        background-color: var(--success);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--success) 10%, transparent);
        }

        color: var(--success);

        &:hover {
            @media (hover: hover) {
                background-color: var(--success);
            }
        }

        &:hover {
            @media (hover: hover) {
                color: var(--success-foreground);
            }
        }

        &.active {
            border-color: var(--success);
        }

        &.active {
            background-color: var(--success);
        }

        &.active {
            color: var(--success-foreground);
        }

        i {
            color: var(--success);
        }

        svg {
            color: var(--success);
        }

        &:hover,
        &.active {
            i {
                color: var(--success-foreground);
            }

            svg {
                color: var(--success-foreground);
            }
        }
    }

    &.kt-btn-info {
        border-color: var(--info);

        @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--info) 10%, transparent);
        }

        background-color: var(--info);

        @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--info) 10%, transparent);
        }

        color: var(--info);

        &:hover {
            @media (hover: hover) {
                background-color: var(--info);
            }
        }

        &:hover {
            @media (hover: hover) {
                color: var(--info-foreground);
            }
        }

        &.active {
            border-color: var(--info);
        }

        &.active {
            background-color: var(--info);
        }

        &.active {
            color: var(--info-foreground);
        }

        i {
            color: var(--info);
        }

        svg {
            color: var(--info);
        }

        &:hover,
        &.active {
            i {
                color: var(--info-foreground);
            }

            svg {
                color: var(--info-foreground);
            }
        }
    }
}

.kt-table {
    tfoot {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      background-color: var(--muted);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      &:last-child {
        &>tr {
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 0px;
          border-top: var(--border) solid;
        }
      }
      td {
        height: calc(var(--spacing) * 10);
        padding-inline: calc(var(--spacing) * 4);
        vertical-align: middle;
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
        color: var(--secondary-foreground);
      }
    }
}

.notif-table tr {
    border-bottom: 1px dashed var(--border);
}

.notif-table tr:last-child {
    border-bottom: none;
}