﻿.ky-window {
    transform: translate(-50%,-50%)
}


.ky-popup-search > div {
    width: 100%
}

.ky-popup-search-icon {
    position: absolute;
    right: 2px;
    bottom: 2px;
    opacity: 0.3;
    z-index: 1;
}


/* grid */

.k-validation-summary {
    display: none;
}

.auth-grid .k-table-td.k-grid-edit-cell {
    padding-inline: var(--kendo-spacing-0, 0) !important;
}

.auth-grid .k-numerictextbox .k-input-spinner.k-spin-button {
    display: none;
}

.auth-grid .k-dropdownlist .k-button.k-input-button {
    display: none;
}

.auth-grid .k-dropdownlist .k-input-inner {
    padding-inline: 0.1rem;
}

.auth-grid .k-textbox .k-input-inner {
    padding-left: 0.5rem;
    padding-right: 0.125rem;
}

.auth-grid .k-filtercell .k-datepicker .k-clear-value {
    display: none;
}

.auth-grid .k-filtercell .k-numerictextbox .k-clear-value {
    display: none;
}

.auth-grid .k-input-solid:focus-within {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 50%, transparent);
}

.auth-grid .k-picker-solid:focus-within {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 50%, transparent);
}

.auth-grid tbody td div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.auth-grid tbody td .k-input-md .k-input-inner {
    padding-inline: 0.3rem;
}

.auth-grid tbody td .k-picker-md .k-input-inner {
    padding-inline: 0.1rem;
}

.auth-grid.k-grid .k-grid-sm td, .k-grid .k-grid-sm .k-table-td, .k-grid-sm td, .k-grid-sm .k-table-td {
    padding-inline: var(--kendo-spacing-1\.5, 0.5rem);
}

.auth-grid.fs-md .k-table-row {
    font-size: var(--ky-font-size-md, inherit);
}

.auth-grid.fs-lg .k-table-row {
    font-size: var(--ky-font-size-lg, inherit);
}

.auth-grid.fs-xl .k-table-row {
    font-size: var(--ky-font-size-xl, inherit);
}

/* form */

.ky-editform .k-numerictextbox .k-input-spinner.k-spin-button {
    display: none;
}

.ky-editform .custom-check-box {
    margin-top: 4px;
}

.ky-editform form {
    height: 100%;
}

:root {
    --ky-font-size-md: 1rem;
    --ky-font-size-lg: 1.25rem;
    --ky-font-size-xl: 1.5rem;
    --kendo-color-on-app-surface: black;
}

.image-shimmer {
    width: 100px;
    height: 100px;
    border-radius: 4px;
    background: linear-gradient( 180deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% );
    background-size: 100% 200%;
    animation: shimmer-vertical 1.5s linear infinite;
}

@keyframes shimmer-vertical {
    0% {
        background-position: 0 -200%;
    }

    100% {
        background-position: 0 200%;
    }
}

.image-placeholder {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #888;
}
