/*
#3874ff; OR var(--bs-primary) OR rgba(56, 116, 255, 1)
Root em (rem)
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color] [optional inset];

Bootstrap primary secondary success danger warning info light dark - breakpoints
Extra small (none) 0px
sm 576px
md 768px
lg 992px
xl 1200px
xxl 1400px

hover, normal
primary #3874ff, #376ae3
secondary #5a6268, #6c757d
success #24883b, #2ca749
info #1b8495, #22a2b7
warning #dfa721, #fec02a
danger #c62137, #da3348
light #e2e6ea, #f8f9fa
dark #23272b, #343a40

in Bootstrap 5, Flexbox (Flexible Box Layout) is a one-dimensional layout model in CSS that allows developers to design complex, flexible layouts with ease
Flex is usually best for one dimensional layouts (rows OR columns), whereas Grid is usually best for two dimensional layouts (rows AND columns)

Kendo
HTML encoded output #: ... #
Raw output #= ... #
Important Notes: No backticks, No ${...}, Logic uses # var ... #, Data output uses #= ... # This is exactly how Kendo templating must interpolate.

1rem=16px
Icon https://remixicon.com/ https://icon-sets.iconify.design/ri/
CSS Grid is for layout; Flexbox is for alignment
color shades https://www.color-hex.com/color/266fd9 https://www.colorhexa.com/323337 https://www.color-hex.com/color/000000
HTML Beautify https://www.freeformatter.com/html-formatter.html#before-output
JS beautifier at https://beautifier.io/
HEX to RGBA https://rgbacolorpicker.com/hex-to-rgba https://codebeautify.org/hex-to-rgba-converter
SVG color invert https://isotropic.co/tool/hex-color-to-css-filter/
Emoji https://emojipedia.org/spiral-calendar

.class = refers to a item with that class
.class.class2 = more specific, as that refers to an element with BOTH class names
.class3 .class.class2 = even more specific, as that refers to an element with both class names that's a DESCENDENT of an element with class3

//CSS Using attribute
<span data-category-id="8" class="badge-category" title="Test." > abc</span >
.badge-category[data-category-id="8"] {
    --category-badge-text-color: #ffffff;
}

Start of Expand -> show.bs.collapse-> Immediately when the show() instance method is called, before the panel begins expanding.-> Expand
End of Expand-> shown.bs.collapse-> After the collapse transition has finished and the panel is fully visible.-> Expand (Completed)
Start of Collapse-> hide.bs.collapse-> Immediately when the hide() instance method is called, before the panel begins collapsing.-> Collapse
End of Collapse-> hidden.bs.collapse-> After the collapse transition has finished and the panel is fully hidden (display: none).-> Collapse (Completed)

Key,Value,Result,Notes
Simple Reload,window.location.reload(),"Reloads the current page from the CACHE, if possible. This is the fastest method.",
Force Reload,(The true parameter is deprecated in most modern browsers; browsers ignore it and treat as simple reload) window.location.reload(true),Forces the browser to reload the page from the server (bypassing the cache). This is crucial after form submissions or updates.,
Alternative (Current URL),window.location.href = window.location.href,"Assigns the current URL back to the href property, forcing the browser to navigate and reload.",
Alternative (Assignment),window.location.assign(window.location.href),Equivalent to setting window.location.href.,

//nested rules
.largescreen {
    @media (min-width:1024px) {
        form.w-full {
            max-width: 85%;
            margin: auto;
        }
        article.text-token-text-primary > div > div.w-full {
            max-width: 100%;
        }
    }
    #thread-bottom > div > div {
        --thread-content-max-width: unset !important;
    }
}

x-root {
    --duration-short: 100ms;
    --duration-default: 200ms;
    --duration-announcement-bar: 250ms;
    --duration-medium: 200ms;
    --duration-long: 300ms;
    --duration-extra-long: 600ms;
    --duration-extended: 3s;
    --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
    --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
    --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
    font-size: calc(var(--font-body-scale) * 16px);
    letter-spacing: .3px;
    font-weight: var(--font-body-weight);
    transition: all var(--duration-long) ease;
}
gridEditable_ModeInline_EditedRow
to
.k-table-tbody > .k-table-row.k-grid-edit-row

shadow scroll top and bottom https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/
password / secret code reveal https://codepen.io/jh3y/pen/JjxPKXz
multiple pseudo https://stackoverflow.com/questions/75965513/css-outline-getting-covered-by-other-elements

https://higuma.github.io/bootstrap-4-css-customization/en/gradient+shadow.html

*/

/* #region Native override */

/*:root, [data-bs-theme=dark] {*/
/*--zbs-primary: #666cff;*/
/*--bs-primary: #3874ff;*/
/*--bs-heading-color: color-mix(in sRGB, #262b43 90%, #fff);*/
/*--bs-heading-color: #fff;*/
/*
     --ink-white: hsl(0, 0%, 100%);
    --ink-shadow1: 0 8px 15px 0px rgba(0, 0, 0, .15);
    --ink-shadow2: 0px 2px 4px -1px rgba(45, 55, 72, 0.1);
    --ink-shadow3: 0 2px 2px rgba(0, 42, 88, .08), 0 4px 4px rgba(0, 42, 88, .08), 0 8px 8px rgba(0, 42, 88, .08);
    --ink-shadow4: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    --ink-shadow-topnav: 0 0 20px rgba(0, 0, 0, .15);
    --ink-shadow-table-tr-hover: 1px 1px 10px 3px rgba(0, 0, 0, .05);
    */
/* ink
    --ink-width: 4px;
    --ink-width-minusOne: 3px;
    --ink-shadow0: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .3); */

/* Small and up (>=1 576px) */
@media (min-width: 1px) {
    .respInput-650px {
        /* background: blue; */
        width: 100% !important;
    }
}

/* Targets screens between 768px and 4001px */
@media (min-width: 768px) and (max-width: 4001.98px) {
    .respInput-650px {
        /* background: xyz; */
        width: 650px !important;
    }
}

/* Medium and up (>=768px) */
@media (min-width: 768px) {
}

/* Large and up (>=992px) */
@media (min-width: 992px) {
}

/* XL and up (>=1200px) */
@media (min-width: 1200px) {
    /* KEEP .layout-navbar-fixed body:not(.modal-open) .layout-content-navbar .layout-menu,
    .layout-menu-fixed body:not(.modal-open) .layout-content-navbar .layout-menu,
    .layout-menu-fixed-offcanvas body:not(.modal-open) .layout-content-navbar .layout-menu {
        box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22) !important;
    } */
}

/* XXL and up (>=1400px) */
@media (min-width: 1400px) {
}

:root {
    --ink-requiredBox-fontscale: 1;
}

/* Prevent the white flash by matching your theme background */
html {
    background-color: #ffffff;
    scroll-behavior: smooth;
}

/* Hide the body initially */
body.preload {
    opacity: 0;
    transition: opacity 1s ease-in;
}

/* #region Override template */

.KEEPbg-footer-theme {
    transition: all .25s cubic-bezier(.55, .085, .68, .53);
    box-shadow: inset 0px -10px 10px 0px rgba(0, 0, 0, .15)
}

code {
    margin: 0 2px 0 0;
}

.card {
    /* box-shadow: unset !important; */
}

    .card .card-header {
        background: linear-gradient(90deg, #ebf2fc 0%, #e6f4ea 100%);
        border-top: solid 4px var(--bs-primary);
        height: 78px;
    }

    KEEP.card .card-body:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, .05);
        transition: box-shadow .5s, border .5s;
        background-color: #f5f5f5;
    }

    .card hr {
        color: rgba(222, 222, 222, 0.6) !important;
        /* height: 1px;
        background-color: color-mix(in sRGB, #262b43 12%, #fff) !important; - False Positive in VS2022 as W3C
        border: none !important;
        opacity: 1 !important;
        */
    }

.navbarButtonCompanyList {
    box-shadow: var(--bs-navbar-search-shadow); /* 0 0.25rem 0.5rem -0.25rem rgba(38, 43, 67, 0.42) OR -1px 0px 1px rgba(0, 0, 0, 0.30); */
}

    .navbarButtonCompanyList:hover {
        color: #fff;
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

.window-scrolled .navbarButtonCompanyList {
    box-shadow: 0 -0.25rem 0.5rem -0.25rem rgba(38, 43, 67, 0.42);
    background-color: rgba(235, 242, 252, 1);
}

    .window-scrolled .navbarButtonCompanyList:hover {
        background-color: rgba(56, 116, 255, 1);
    }

.layout-navbar-fixed .window-scrolled .layout-navbar.navbar-detached {
    background: linear-gradient(90deg, #ebf2fc 0%, #e6f4ea 100%);
    /*KEEPbackground-color: rgba(28, 30, 33, 0.01);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1); 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border: solid 1px rgba(255, 255, 255, 0.18);
    border-bottom-left-radius: 12px;*/
}

.ink-section {
    color: var(--bs-primary);
    margin-bottom: 0.1rem !important;
    box-shadow: 0px 15px 10px 0px rgba(136, 159, 219, 0.05);
}

._KEEPink-sectionBox {
    transition: all .3s cubic-bezier(.25, .8, .25, 1);
    margin: 14px 0px 0px 0px;
    padding: 10px;
    background-color: rgba(96, 140, 247, 0.90);
    color: #fff;
    font-weight: 500;
    letter-spacing: .1em;
    display: inline-block; /* KEEP */
    height: 41px;
}

/* #endregion Override template */

/* #region Override Kendo controls */

KEEP.k-calendar .k-calendar-td.k-today .k-link {
    background-color: rgba(56, 116, 255, 1) !important;
}

/* Header (SU / SA) */
.k-calendar th.k-calendar-th {
    font-weight: 500;
}

    /* Change background for Saturday header */
    .k-calendar th.k-calendar-th[aria-label="Saturday"] {
        background-color: rgba(245, 245, 245, 1);
        color: rgba(36, 36, 36, 0.6);
    }

    /* Change background for Sunday header */
    .k-calendar th.k-calendar-th[aria-label="Sunday"] {
        background-color: rgba(245, 245, 245, 1);
        color: rgba(36, 36, 36, 0.6);
    }

/* Date cells */
.k-calendar tbody td.k-weekend {
    background-color: rgba(245, 245, 245, 0.2) !important;
    border-radius: 0px !important;
    color: rgba(36, 36, 36, 0.6);
}

KEEP.k-calendar .k-calendar-td:focus, .k-calendar .k-calendar-td.k-focus {
    box-shadow: inset 0 0 0 2px rgba(56, 116, 255, 1) !important;
}

.k-calendar .k-calendar-footer .k-button-text {
    color: rgba(56, 116, 255, 1) !important;
}

.k-dropdownlist button.k-input-button,
.k-datepicker button.k-input-button {
    box-shadow: -1px 0px 10px 0px #cccccc;
}

.k-calendar .k-calendar-td:hover:not(td.k-weekend),
.k-calendar .k-calendar-td.k-hover:not(td.k-weekend) {
    color: #ffffff !important;
}

/* #endregion Override Kendo controls */

@keyframes ani-scroll-indicator-glow {
    /* https://codepen.io/Cejay101/pen/oNrKzQw */
    0% {
        box-shadow: 0 0 5px #3498db, 0 0 10px #3498db, 0 0 15px #3498db, 0 0 20px #3498db, 0 0 25px #3498db;
    }

    50% {
        box-shadow: 0 0 20px #9b59b6, 0 0 30px #9b59b6, 0 0 40px #9b59b6, 0 0 50px #9b59b6, 0 0 60px #9b59b6;
    }

    100% {
        box-shadow: 0 0 5px #3498db, 0 0 10px #3498db, 0 0 15px #3498db, 0 0 20px #3498db, 0 0 25px #3498db;
    }
}

/* #region scroll-indicator */

/*.KEEPscroll-container {
    background-color: #b2d4ff;
    height: 4px;
    position: fixed;
    width: 100%;
    z-index: 1100 !important;
}*/

.scroll-indicator {
    /*animation: ani-scroll-indicator-glow 1s infinite;*/
    position: fixed;
    top: 0px; /* 64px */
    bottom: 0;
    z-index: 1100 !important;
    width: 0%;
    height: 4px !important; /* 4px */
    background-color: var(--bs-primary); /* KEEP #3450ff; #d9d9d9; */
    /*do not put will effect tabs matching background-image: linear-gradient(to bottom right, #3450ff, #07c0ff);*/
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0px 0px 2px 0px #cccccc;
    transition: 0.3s ease-out;
}

/* #endregion scroll-indicator */

/* #region back-to-top */

button.back-to-top {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bs-primary);
    height: 0px;
    width: 0px;
    overflow: hidden;
    border-radius: 50px;
    color: transparent;
    clear: both;
    visibility: hidden;
    position: fixed;
    cursor: pointer;
    display: block;
    border: none;
    right: 50px;
    bottom: 75px;
    font-size: 0px;
    z-index: 99;
    transition: all .3s ease-in-out;
    opacity: 1;
    outline-style: solid;
    outline-width: 1px;
    outline-color: var(--bs-primary);
    outline-offset: 4px;
}

    button.back-to-top:hover, button.back-to-top:active, button.back-to-top:focus {
        outline: 0 !important;
        opacity: 1;
        filter: drop-shadow(2px 2px 2px #ccc);
    }

    button.back-to-top::before, button.back-to-top::after {
        content: "";
        display: block;
        border-bottom: solid 10px rgba(25, 124, 244, 0.7);
        border-left: solid 10px transparent;
        line-height: 0;
        border-right: solid 10px transparent;
        height: 0;
        margin: 10px auto 17px;
        width: 0;
        border-radius: 20px;
        visibility: hidden;
    }

    button.back-to-top.show::after, button.back-to-top.show::before {
        visibility: visible;
    }

    button.back-to-top::after {
        border-bottom-color: #fff;
        position: relative;
        top: -24px;
    }

    button.back-to-top.show {
        display: block;
        color: var(--bs-primary);
        font-size: 25px;
        right: 40px; /* 67 */
        bottom: 6px;
        height: 40px;
        width: 40px;
        visibility: visible;
        opacity: .85;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
        transition: all 1s;
    }

        button.back-to-top.show:hover {
            box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
            opacity: 1;
            transform: scale(1.05);
        }

/* #endregion back-to-top */

.noLink {
    cursor: not-allowed;
}

/*KEEP LeftNavBar Shadow html.layout-navbar-fixed .menu-vertical {
    box-shadow: 3px 4px 12px 2px rgba(0, 0, 0, .3);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}*/

/* #region START: Audit */

.accordion-header {
    margin: -1px;
}

#auditTable {
    border: solid 1px var(--kendo-grid-border, var(--kendo-table-border, color-mix(in srgb, var(--kendo-color-border, rgba(36, 36, 36, 0.72)) 16%, transparent))) !important;
}

    #auditTable .auditData-lines {
        line-height: 1.8;
    }

#accordionAudit {
    font-family: var(--bs-body-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4rem;
}

    #accordionAudit .table > thead {
        box-shadow: 0 3px 2px -2px rgba(0, 0, 0, .1);
    }

    #accordionAudit .accordion-button {
        color: var(--bs-primary);
        /*KEEP background-color: #f2f2f3 !important;*/
    }

        #accordionAudit .accordion-button.collapsed {
            background: linear-gradient(90deg, #ebf2fc 0%, #e6f4ea 100%) !important;
            border-top: solid 4px var(--bs-primary);
        }


    #accordionAudit .accordion-body thead tr {
        background-color: rgba(235, 242, 252, 1);
    }

    #accordionAudit tbody tr {
        /* Smoothly animate all three properties background-color 0.02s ease 0.01s; duration 0.02s, delay 0.01s */
        transition: all 0.3s ease;
        opacity: 1 !important;
        border-bottom: solid 1px rgba(207, 208, 214, 0.4) !important; /* bottom line */
    }

        #accordionAudit tbody tr td:first-child {
            position: relative; /* REQUIRED */
            padding-left: 24px; /* space for icon */
        }

        #accordionAudit tbody tr td:first-child {
            position: relative;
            padding-right: 22px; /* reserve space on the right side */
        }

        /*#accordionAudit tbody tr:hover td:first-child::after {
            content: "";
            position: absolute;
            right: 6px;*/ /* 6px space from the text */
        /*top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: url('/ResourcesPortal/inkimages/icons/icn-audit-trHover.png') no-repeat center center;
            background-size: 16px 16px;
            opacity: 0.8;
        }*/

        /* Hovered row background + bottom line - see 990 and 473Audit */
        #accordionAudit tbody tr:hover {
            background-color: rgba(235, 242, 252, 0.7) !important;
            transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
            /*box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15) !important;*/
            border-bottom: solid 1px rgba(207, 208, 214, 1) !important; /* bottom line */
            /* box-shadow: inset 0 -1px 2px 0 rgba(192, 192, 192, 1) !important; inset horizontal vertical blur spread color */
            /* opacity: 1 !important; x-box-shadow: var(--bs-navbar-search-shadow); 0 3px 6px rgba(197, 197, 197, 1); border-left: solid 1px rgba(222, 226, 228, 1);
            border-right: solid 1px rgba(222, 226, 228, 1); */
        }

    #accordionAudit .bg-label-secondary {
        background-color: #eaf2f9 !important; /* #f2f2f3 */
    }

        #accordionAudit .bg-label-secondary:hover {
            background-color: #f2f2f3 !important;
            filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
        }

    #accordionAudit .badge.text-bg-success,
    #accordionAudit .badge.text-bg-danger {
        line-height: 0.7;
    }

#auditRefresh {
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}

    #auditRefresh:hover {
        opacity: 0.8;
    }

#KEEPaccordionAudit .avatar .avatar-initial {
    background-color: #f2f2f3 !important;
}

.auditChangedNew {
    color: #000;
    background-color: rgba(216, 235, 230, 0.6); /*#2ab01a1a*/
    padding: 2px;
}

    .auditChangedNew::before,
    .auditChangedNew::after {
        background-color: rgba(216, 235, 230, 0.6); /*#2ab01a1a rgba(212, 232, 254, 1)*/
        content: "\00a0"; /* non-breaking space */
        /* optional: match vertical alignment display: inline; */
    }

.auditChangedOld {
    color: #000;
    background-color: rgba(252, 232, 230, 0.6); /*#2ab01a1a*/
    padding: 2px;
}

    .auditChangedOld::before,
    .auditChangedOld::after {
        background-color: rgba(252, 232, 230, 0.6); /*#2ab01a1a rgba(212, 232, 254, 1)*/
        content: "\00a0"; /* non-breaking space */
        /* optional: match vertical alignment display: inline; */
    }

#accordionAudit .table .rgSorted {
    background-color: rgba(242, 242, 243, 0.3); /* rgba(245, 245, 245, 0.6); */
}

#accordionAudit .border {
    border: unset !important; /* to remove white border between th */
}

#accordionAudit .table:not(.table-dark, .table-light) thead:not(.table-dark, .table-light) tr th {
    /*background: linear-gradient(135deg, rgba(34, 40, 52, 0.95) 0%, rgba(44, 50, 62, 0.9) 100%) !important;
    font-weight: 600;
    color: #fff !important;*/
    background: linear-gradient(135deg, rgba(40, 42, 66, 1) 0%, rgba(40, 42, 66, 0.95) 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#accordionAudit .auditType-customAdd,
.ri-add-box-fill {
    color: #fff !important;
    background-color: rgba(31, 163, 60, 1) !important;
}

#accordionAudit .ri-edit-2-fill {
    color: rgba(61, 118, 252, 0.85);
}

#accordionAudit .auditType-customEdit {
    color: #fff;
    background-color: rgba(93, 139, 250, 1) !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}

#accordionAudit .ri-delete-bin-7hard-line,
.k-grid .ri-delete-bin-7hard-line,
.k-grid .ri-delete-bin-3soft-line {
    color: rgba(253, 75, 78, 1);
}

#accordionAudit .auditType-customDestroy_Soft,
#accordionAudit .auditType-customDestroyHard {
    color: rgba(253, 75, 78, 1) !important;
    background-color: rgba(255, 226, 226, 1) !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}

#accordionAudit .auditType-customEdit_DisplayOrder {
    color: #fff;
    background-color: rgba(93, 139, 250, 0.75) !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}

#accordionAudit .auditType-customEdit_Restore,
.ri-inbox-unarchive-line {
    color: #fff !important;
    background-color: rgba(199, 133, 62, 1) !important;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
}

/* #region END: Audit */

/* #region START: tabs */

.layout-navbar-fixed .sticky-element {
    inset-block-start: 4.0rem;
}

.nav-align-top .nav-tabs .nav-link.active,
.nav-align-top .nav-tabs .nav-link.active:hover,
.nav-align-top .nav-tabs .nav-link.active:focus,
.nav-align-top .nav-tabs .nav-item.show .nav-link,
.nav-align-top .nav-tabs .nav-item.show .nav-link:hover,
.nav-align-top .nav-tabs .nav-item.show .nav-link:focus {
    box-shadow: 0px -4px 0px 0px var(--bs-primary) inset;
}

h4.card-header .menu-icon {
    flex-grow: 0;
    flex-shrink: 0;
    block-size: 1.975rem;
    font-size: 1.975rem;
    inline-size: 1.975rem;
    margin-inline-end: 0.5rem;
}

.nav-align-top:has(.nav-tabs),
.nav-align-right:has(.nav-tabs),
.nav-align-bottom:has(.nav-tabs),
.nav-align-left:has(.nav-tabs) {
    border-radius: 0.625rem 0.625rem 0 0 !important;
    padding: 0px 0px 0px 12px;
    background-color: #fff !important;
}

div:not(.nav-align-left):not(.nav-align-right) > .nav-tabs {
    background-color: #ebf2fc !important;
    border-top: solid 1px rgba(222, 222, 222, 1);
    border-left: solid 1px rgba(222, 222, 222, 1);
    border-right: solid 1px rgba(222, 222, 222, 1);
    border-bottom: solid 1px rgba(192, 192, 192, 1) !important;
    -webkit-transition: box-shadow 0.20s cubic-bezier(0.5, 0, 0.3, 1);
    transition: box-shadow 0.20s cubic-bezier(0.5, 0, 0.3, 1);
    box-shadow: var(--bs-navbar-search-shadow);
    margin: 20px 0px;
}

.nav-tabs li {
    margin-block-start: 0rem !important;
    border-right: solid 1px #dedede !important;
    background-color: transparent; /* rgba(211, 232, 255, 0.15) */
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    transition: border-bottom 0.2s;
}

    .nav-tabs .nav-link.active,
    .nav-tabs .nav-item.show .nav-link {
        color: var(--bs-primary);
        border-bottom: solid 4px var(--bs-primary);
    }

/* #endregion END: tabs */

/* #region START: userProfile */

#userProfile {
    outline-style: solid;
    outline-width: 1px;
    outline-color: var(--bs-primary);
    outline-offset: 4px;
}

    #userProfile:hover {
        outline-style: solid !important;
        outline-width: 1px !important;
        outline-color: var(--bs-primary) !important;
        outline-offset: 4px;
        box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.25) !important;
    }

.window-scrolled #layout-navbar #userProfile {
    outline: 0;
    box-shadow: 0 0.25rem 0.875rem 0 rgba(38, 43, 67, 0.16);
}

    .window-scrolled #layout-navbar #userProfile:hover {
        box-shadow: none !important;
    }

/* #endregion END: userProfile */

/* #endregion START: notification */

/* .k-notification {
} */

.k-child-animation-container {
    width: 110%; /* do not modify */
}

.k-notification-content {
    font-size: 15px;
    margin: 0px 0px 0px 20px;
}

.k-notification.k-notification-read {
    border-color: #ebebeb !important;
    border: solid 1px #ebebeb !important;
}

.k-notification .k-icon,
.k-notification .k-svg-icon,
.KEEPk-notification-success .k-notification-wrap .k-icon,
.KEEPk-notification-success .k-svg-icon {
    display: none !important;
}

.k-notification.k-notification-info {
    border: solid 1px #c3d9ff;
    border-left: 7px solid #c3d9ff;
    background: #e5ecf9 url('/ResourcesPortal/inkimages/icons/icn-info-sml.png') no-repeat scroll 7px 8px;
    color: #514721;
    padding: 6px 0px 6px 6px;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    box-shadow: 0 2px 10px rgba(50, 50, 50, 0.5);
}

.k-notification.k-notification-success {
    border: solid 1px #c6d880;
    border-left: 7px solid #c6d880;
    background: #e6efc2 url('/ResourcesPortal/inkimages/icons/icn-success-sml.png') no-repeat scroll 7px 8px;
    color: #264409;
    padding: 6px 0px 6px 6px;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    box-shadow: 0 2px 10px rgba(50, 50, 50, 0.5);
}

.k-notification.k-notification-warning {
    border: solid 1px #ffd324;
    border-left: 7px solid #ffd324;
    background: #fff6bf url('/ResourcesPortal/inkimages/icons/icn-warning-sml.png') no-repeat scroll 7px 8px;
    color: #514721;
    padding: 6px 0px 6px 6px;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    box-shadow: 0 2px 10px rgba(50, 50, 50, 0.5);
}

.k-notification.k-notification-error {
    /* dangererror */
    border: solid 1px #fbc2c4;
    border-left: 7px solid #fbc2c4;
    background: #fbe3e4 url('/ResourcesPortal/inkimages/icons/icn-error-sml.png') no-repeat scroll 7px 8px;
    color: #8a1f11;
    padding: 6px 0px 6px 6px;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    box-shadow: 0 2px 10px rgba(50, 50, 50, 0.5);
}

.k-notification-close-action {
    cursor: pointer;
    color: #fff;
    border: solid 1px #aeaeae;
    border-radius: 30px;
    background: #605f61;
    opacity: 0.2;
    position: relative;
    top: -18px;
    left: 6px;
}

/* #endregion END: notification */

/* #region START: form and actions */

.form-actions {
    padding: 16px 15px;
    background-color: #ebf2fc !important;
    border-top: solid 1px rgba(207, 208, 214, 1);
    border-left: solid 1px rgba(207, 208, 214, 1);
    border-right: solid 1px rgba(207, 208, 214, 1);
    border-bottom: solid 1px rgba(207, 208, 214, 1) !important;
    border-radius: 0.5rem !important;
    -webkit-transition: box-shadow 0.20s cubic-bezier(0.5, 0, 0.3, 1);
    transition: box-shadow 0.20s cubic-bezier(0.5, 0, 0.3, 1);
    box-shadow: 1px 1px 8px -4px rgba(38, 43, 67, 0.42) !important;
}

.form-actions button {
    margin: 0 5px 0 0 !important;
}

.btn:hover {
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
}

    .btn:hover span {
        filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
    }

.btn-label-danger-border {
    margin-left: 10px;
    border: solid 1px rgba(198, 33, 55, 0.2);
}

    .btn-label-danger-border:hover {
        border: solid 1px rgba(198, 33, 55, 1);
    }

.btn-label-warning-border {
    margin-left: 10px;
    border: solid 1px rgba(226, 169, 33, 0.6);
}

    .btn-label-warning-border:hover {
        border: solid 1px rgba(226, 169, 33, 1);
    }

/* #endregion END: form and actions */

/* #region START: required and error message */

.ink-datepicker {
    /* KEEP it just for error message in JS */
}

    .ink-datepicker::placeholder {
        padding-left: 1px;
        /* Note: Firefox often requires opacity: 1 to see color/style changes clearly */
        opacity: 1;
    }

.required {
    color: rgba(237, 14, 14, 1);
    font-size: 0.875rem;
}

.ink-requiredText {
    color: rgba(99, 100, 102, 1);
}

.requiredBox {
    background-color: rgba(251, 194, 196, 0.1) !important;
    border-radius: 0.5rem !important;
    font-size: calc(15px * var(--ink-requiredBox-fontscale, 1)) !important;
    border: solid 1px #fbc2c4 !important;
    border-left: 7px solid #fbc2c4 !important;
    background: #fbe3e4 url('/ResourcesPortal/inkimages/icons/icn-error-message16Light.png') no-repeat scroll 12px 10px;
    padding: 8px 12px 8px 36px !important;
}

.helpImage {
    position: relative;
    top: -2px;
}

.infoImage {
    position: relative;
    top: -2px;
}

.infoText {
    color: #b5b5b5;
}

.errorImage { /* KEEP class */
    position: relative;
    top: -2px;
}


/* KEEP this is for both side validation (server and client) */
.errorText,
.k-field-error,
.k-invalid-msg {
    background: url(/ResourcesPortal/inkimages/icons/icn-error-message16.png) no-repeat 0px 1px !important;
    color: rgba(237, 14, 14, 1) !important;
    padding: 0 0 0 18px !important;
}

.k-invalid,
span .k-datepicker.k-invalid,
.k-dropdownlist.k-invalid,
.k-dropdownlist.k-state-invalid {
    border: solid 1px rgba(237, 14, 14, 1) !important;
    border-left: 7px solid rgba(237, 14, 14, 1) !important;
}

/* #endregion END: required and error message */

/* #region START: grid */

.k-grid {
    /* border: solid 1px rgba(222, 222, 222, 1); */
    /* margin: 20px 0px; */
}

    /* Remove border from header */
    .k-grid .k-grid-header {
        border: none; /* header stays borderless */
    }

    .k-grid .k-grid-norecords {
        border: solid 1px #c3d9ff;
        border-left: 7px solid #c3d9ff;
        background: #e5ecf9 url(/ResourcesPortal/inkimages/icons/icn-info-sml.png) no-repeat scroll 12px 9px;
        color: #514721;
        animation-duration: 5s;
        animation-fill-mode: both;
        animation-name: fadeIn;
        box-shadow: 0 2px 10px rgba(50, 50, 50, 0.5);
        padding: 12px 0 0 12px;
        height: 40px;
    }

KEEP.k-table-td {
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}

/* Toolbar Add button */

.k-grid-toolbar,
.gridAOutsideToolbar,
#accordionAudit .accordion-header {
    border-width: 0px !important;
    background: linear-gradient(90deg, #e6f4ea 0%, #ebf2fc 100%);
}

.gridAOutsideToolbar {
    margin: 20px 0 0 0;
    padding: 7px;
}

.k-grid .k-grid-toolbar .k-grid-add,
.ink-gridAOutsideToolbar-addButton {
    color: #fff !important;
    background-color: rgba(42, 176, 26, 0.7) !important;
    border-color: rgba(42, 176, 26, 0.75) !important;
}

    .k-grid .k-grid-toolbar .k-grid-add:hover {
        background-color: rgba(42, 176, 26, 0.8) !important;
    }

.k-grid .k-toolbar-item .k-grid-search {
    width: 256px;
}

    .k-grid .k-toolbar-item .k-grid-search:hover,
    .k-grid .k-toolbar-item .k-grid-search:focus,
    .k-grid .k-toolbar-item .k-grid-search:active {
        background-color: #f5f493;
        -webkit-box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3);
        box-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3);
    }

.k-grid-header .k-table-th,
.k-grid thead.k-table-thead tr.k-table-row .k-table-th {
    background: linear-gradient(135deg, rgba(40, 42, 66, 1) 0%, rgba(40, 42, 66, 0.95) 100%);
    /*new-background: linear-gradient(135deg, rgba(40, 42, 65, 1) 0%, rgba(59, 62, 88, 0.7) 50%);*/
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* KendoGrid Grouping */

.k-table-row .k-group-cell {
    background-color: rgba(251, 251, 251, 1); /* rgba(222, 226, 228, 1) */
}

.nav .nav-link:not(.active):hover {
    border-bottom: solid 4px var(--bs-black) !important;
    color: #000000 !important;
}

.k-sort-icon {
    color: #fff !important;
}

.k-grouping-row {
    cursor: pointer !important;
}

KEEP.k-grouping-row .k-icon.k-svg-icon svg {
    display: none !important;
}

/* Expand icon (default) */
KEEP.k-grouping-row .k-svg-i-caret-alt-down::before {
    content: "" !important; /* Remove font icon */
    background: url('/ResourcesPortal/inkimages/icons/icn-treeminus-line.png') no-repeat center center !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    z-index: 10001;
}

/* Collapse icon */
KEEP.k-grouping-row .k-svg-i-caret-alt-right::before {
    content: "" !important;
    font-size: 20px;
    font-weight: bold;
    background: url('/ResourcesPortal/inkimages/icons/icn-treeplus-line.png') no-repeat center center !important;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.k-grid .k-table-tbody > .k-grouping-row td:first-child {
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, .1);
}

/* Active and Archive group row CSS */
.k-grid tr.k-grouping-row.groupActive > td,
.k-grid tr.k-grouping-row.groupActive > th {
    color: #008000;
    font-size: 0.8125rem;
    text-transform: uppercase;
    background-color: rgba(42, 176, 26, 0.1) !important;
    border-bottom: solid 1px rgba(42, 176, 26, 1) !important;
}

.k-grid tr.k-grouping-row.groupArchive > td,
.k-grid tr.k-grouping-row.groupArchive > th {
    color: var(--bs-heading-color);
    font-size: 0.8125rem;
    text-transform: uppercase;
    background-color: rgba(198, 132, 68, 0.1) !important;
    border-bottom: solid 1px rgba(198, 132, 68, 1) !important;
}

.k-grid .k-table-tbody .k-table-alt-row {
    background-color: rgba(245, 245, 245, 0.4);
}

/*KEEP when giving <td> cell line then grouping header row bottom line is NOT visible .k-grid .k-table-tbody .k-table-row .k-table-td,
    .k-grid .k-table-tbody .k-table-alt-row .k-table-td {
        border-color: rgba(222, 226, 228, 1) !important;
    }*/

/* Hovered row background + bottom line - see 990 and 473Audit */
.k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
.k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
    background-color: rgba(235, 242, 252, 0.7) !important;
    /* Smoothly animate all three properties background-color 0.02s ease 0.01s; duration 0.02s, delay 0.01s */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    /* Apply the Bootstrap shadow to the entire row */
    box-shadow: 1px 1px 0px 0 rgb(0. 0. 0, 0.10) !important;
    /* position: relative; Ensure the row stays on top during hover to show shadow correctly */
    /* z-index: 1; Ensure the row stays on top during hover to show shadow correctly */
    /* inset horizontal vertical blur spread color */
    /* box-shadow: inset 0 -1px 0px 0 rgba(207, 208, 214, 1) !important; bottom line */
    /* inset 0 1px 1px #cfcfcf !important; top line was #e6e6e6 */
    /* for in-depth inset 0 -1px 4px 0 rgba(192, 192, 192, 1) !important or box-shadow: inset 0 -1px 1px 0 rgba(192, 192, 192, 1) !important;
       1px 0 0: These are the offset values:
       1px - Horizontal shadow offset (moving the shadow to the right by 1px).
       0 - Vertical shadow offset (no vertical offset).
       0 - Blur radius (no blur, so it's a sharp line).
       inset shadows (first two values) create light lines on the left and right sides of the element, giving it a kind of "etched" look.
       The outer shadows (third and fourth values) create a subtle drop shadow that appears beneath the element, with one being softer and more subtle than the other.
        inset 0px -1px 0 rgba(192, 192, 192, 1), inset -1px 0 0 rgba(192, 192, 192, 1), 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    */
    /* x-box-shadow: inset 0 -1px 1px 0 rgba(192, 192, 192, 1), bottom
    inset 0 1px 1px 0 rgba(192, 192, 192, 0.1); top */
}

    /* td:nth-child(1) AND td:nth-child(n+2) */
    .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover > td:nth-child(1),
    .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover > td:nth-child(1) {
        box-shadow: unset !important;
        border-left: solid 1px rgba(230, 230, 230, 1) !important; /* optional: keep same BG */
        background-color: rgba(251, 251, 251, 1) !important; /* optional: keep same BG */
        border-bottom-width: 0px !important; /* optional: keep same BG */
        border-left-width: 0px !important; /* optional: keep same BG */
    }

/* Apply the bottom line to the TD inside the hovered row */
.k-grid .k-table-row:hover > td,
.k-grid tr:hover > td {
    /* box-shadow: inset 0 -1px 0px 0 rgba(207, 208, 214, 1) !important; */
    border-bottom: solid 1px rgba(207, 208, 214, 1) !important;
}

.xk-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover .k-table-td:not(.badge),
.xk-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover .k-table-td:not(.badge) {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2) !important;
}

.k-grid-edit-command,
.btnColumnCommandEditClass,
.k-grid-save-command,
.k-grid-cancel-command,
.btnColumnCommandDestroyHardClass,
.btnColumnCommandDestroySoftClass,
.btnColumnCommandRestoreClass {
    width: 60px !important;
}

/* EachRow edit button */
.k-grid .k-table-row .btnColumnCommandEditClass {
    color: #008000; /* #fff */
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.13) 0%, rgba(0, 184, 15, 0.1) 100%);
    border: solid 1px rgba(75, 173, 58, 0.5);
}


/* EachRow save button */
/*
.k-grid .k-grid-save-command {
    background-color: rgba(42, 176, 26, 1);
    border-color: #25b003;
 }
.k-grid .k-grid-save-command:hover {
    background-color: rgba(42, 176, 26, 0.8);
}
*/

/* EachRow cancel button */
/*
.k-grid .k-table-row .k-grid-cancel-command {
    color: rgba(0, 0, 0, 0.7);
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.09) 0%, rgba(229, 120, 11, 0.2) 97%);
    border: solid 1px rgba(0, 0, 0, 0.1);
}
.k-grid .k-table-row .k-grid-cancel-command:hover {
    color: #000;
    border: solid 1px rgba(0, 0, 0, 0.2);
}
.k-grid .k-table-row .k-grid-cancel-command {
    background-color: rgba(108, 117, 125, 0.02);
}
.k-grid .k-table-row .k-grid-cancel-command:hover {
    background-color: rgba(108, 117, 125, 0.05);
}
*/

/* EachRow delete button */
.k-grid .btnColumnCommandDestroyHardClass,
.k-grid .btnColumnCommandDestroySoftClass {
    color: var(--bs-btn-hover-color);
    border: solid 1px var(--bs-btn-hover-border-color);
}

/* EachRow restore button */
.k-grid .btnColumnCommandRestoreClass {
    color: rgba(241, 160, 63, 1); /* var(--bs-btn-hover-color) */
    border: solid 1px rgba(199, 133, 62, 0.7);
}

/* #region END: grid */

/* #region STRAT icon-square */

.icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #fbfbfb;
    border: solid 1px #bbb;
    border-radius: 5px;
    margin: 0 2px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

    .icon-square:hover {
        background-color: #f9f9f9;
        box-shadow: 1px 0 4px #bbb;
    }

    .icon-square i {
        color: #444; /* Icon color */
        font-size: 16px; /* Icon size */
        pointer-events: none; /* Ensures click is handled by .icon-square span */
    }

/* green */
.k-grid .btnMoveUp {
    color: #686868; /* #137333;*/
    background-color: #2ab01a1a; /*#e6f4e1*/
}

/* red */
.k-grid .btnMoveDown {
    color: #686868;
    background-color: #fce8e6; /* #fce8e6 */
}

/* #endregion END icon-square */

/* #region START: text with color */

.text-inkYellow {
    color: #f79000 !important;
}

.text-inkGreen {
    color: #008000 !important;
}

.text-inkRed {
    color: #ff0000 !important;
}

.amountGreen {
    color: #008000 !important;
}

.amountRed {
    color: #ff0000 !important;
}

/* #endregion END: text with color */

.menu .app-brand {
    height: 64px;
}

    .menu .app-brand .app-brand-text {
        margin: 0px 0px 0px 10px;
    }

    .menu .app-brand .app-brand-logo img {
        padding-left: 11px;
    }

.layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-header,
.layout-menu-collapsed .layout-menu:not(:hover) .menu-block,
.menu-collapsed:not(:hover) .menu-inner > .menu-header,
.menu-collapsed:not(:hover) .menu-block {
    margin-inline-start: -20px !important;
}

/* #region START: spinner */

#spinnerLoaderContainer {
    position: fixed !important;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(61, 118, 252, 1);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    height: 70px;
}

/* #region END: spinner */

/* #region START: row selected for edited/delete/restore background-color */

tr.k-table-row.linkGrid_CUPopup,
tr.k-table-alt-row.linkGrid_CUPopup {
    background-color: rgba(169, 199, 241, 0.5) !important; /* linkGrid_Edit rgba(221, 235, 213, 1) */
}

tr.k-table-row.linkGrid_DPopup,
tr.k-table-alt-row.linkGrid_DPopup {
    background-color: rgba(252, 232, 230, 1) !important; /* DestroyHard rgba(253, 61, 68, 0.1), DestroySoft rgba(253, 75, 78, 0.5) */
}

tr.k-table-row.linkGrid_RPopup,
tr.k-table-alt-row.linkGrid_RPopup {
    background-color: rgba(198, 132, 68, 0.3) !important; /* Restore rgba(199, 133, 62, 0.5) */
}

.gridJustUpdatedRow {
    background-color: #fff3cd !important; /*  Bootstrap warning bg (soft yellow) */
    transition: background-color 1.2s ease-out;
}

/* #endregion END: row selected for edited/delete/restore background-color */

/* #region Kendo window */

.k-window,
.k-window:focus,
.k-window.k-window-focused {
    outline: none !important;
    box-shadow: none !important;
}

/* #customDestroyHard_WrapperId.k-window,
#customDestroySoft_WrapperId.k-window {
    border-bottom: solid 6px rgba(222, 85, 80, 1) !important;
    border-radius: 0.625rem !important;
}

#customDestroyHard_WrapperId .k-window-titlebar,
#customDestroySoft_WrapperId .k-window-titlebar {
    background-color: rgba(222, 85, 80, 1) !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
*/

#customRestore_WrapperId.k-window {
    border-bottom: solid 6px rgba(199, 133, 62, 1) !important;
    border-radius: 0.625rem !important;
}

#customRestore_WrapperId .k-window-titlebar {
    background-color: rgba(199, 133, 62, 1) !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

TODOAK.k-window-title {
    color: #ffffff !important;
    /* text-shadow: 1px 0px 4px #000000; */
}

.k-window-titlebar-actions {
    filter: drop-shadow(1px 1px 2px rgba(61, 135, 251, 1))  /* drop-shadow(1px 1px 2px #fff); */
}

.k-window .ri-delete-bin-3soft-line,
.k-window .ri-delete-bin-7hard-line,
.k-window .ri-inbox-unarchive-line {
    color: #fff;
    position: relative;
    top: 3px;
}

#customDestroyHard_WrapperId .k-window-title {
    color: #fff !important;
}

#customDestroyHard_WrapperId .k-window-titlebar {
    box-shadow: var(--bs-navbar-search-shadow);
    color: #fff;
    background-color: rgba(222, 85, 80, 1) !important; /* linear-gradient(90deg, #dc5453 0%, #ce5b61 100%) !important; */
    border-color: rgba(222, 85, 80, 0.8) !important
}

#customDestroyHard_WrapperId #inTemplate_Grid_YesButton,
#customDestroySoft_WrapperId #inTemplate_Grid_YesButton {
    color: #fff;
    background-color: rgba(222, 85, 80, 1) !important;
    border-color: rgba(222, 85, 80, 0.8) !important;
}

#customDestroyHard_WrapperId #inTemplate_Grid_NoButton:hover,
#customDestroyHard_WrapperId #inTemplate_Grid_YesButton:hover {
    box-shadow: 0 15px 18px -9px #000;
}

#customDestroyHard_WrapperId .k-window-content {
    border-bottom: solid 4px rgba(222, 85, 80, 1) !important;
}

/* TODOAK: move to Restore */
#XcustomCRUD_WrapperId button:hover {
    box-shadow: 0 15px 18px -9px #000;
}

#XcustomRestore_WrapperId #inTemplate_Grid_YesButton {
    color: #fff;
    background-color: rgba(222, 85, 80, 1) !important;
    border-color: rgba(199, 133, 62, 1) !important;
}


/* #endregion Kendo window */

/*.cursor-pointer  is in in core.css:20353 */
.cursor-no-drop {
    cursor: no-drop !important;
}

/* #region badge */

.badge.text-bg-success {
    background-color: rgba(31, 163, 60, 1) !important;
}

/* #endregion badge */

/* #region badge in grid */

.k-table-td .badge i.ri {
    position: relative;
    top: 1px;
}

.k-table-td .badge .ink-badge-text {
    position: relative;
    top: -1px;
}

.k-table-td .badge.bg-label-dark {
    border: solid 1px rgba(188, 189, 189, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.k-table-td .badge.bg-label-success {
    border: solid 1px rgba(61, 137, 62, 0.3);
    box-shadow: 2px 2px 10px 3px rgba(0, 0, 0, 0.1);
}

/* #endregion badge in grid */

/* #region customCRUD in window */

/* When row get edited in grid then highlight edited row */
#customCRUD_WrapperId.k-window,
#windowId_FormPartialUpdateA.k-window,
#windowId_FormPartialUpdateB.k-window {
    border-bottom: solid 2px rgba(223, 223, 228, 1) !important;
    border-radius: 0.70rem !important; /* special to match radius of main form */
    /* x-background: #f7f7f9 !important; */
}

#customCRUD_WrapperId .k-window-titlebar,
#windowId_FormPartialUpdateA .k-window-titlebar,
#windowId_FormPartialUpdateB .k-window-titlebar {
    /* background-color: rgba(24, 95, 161, 1) !important; */
    background: linear-gradient(90deg, #ebf2fc 0%, #e6f4ea 100%);
    border-top: solid 4px var(--bs-primary);
    box-shadow: var(--bs-navbar-search-shadow);
    border-radius: 0.625rem 0.625rem 0px 0px !important;
}

#customCRUD_WrapperId .k-window-title,
#windowId_FormPartialUpdateA .k-window-title,
#windowId_FormPartialUpdateB .k-window-title { /* same as .k-window-title */
    color: var(--bs-primary) !important;
}

#customCRUD_WrapperId .k-window-titlebar-actions,
#windowId_FormPartialUpdateA .k-window-titlebar-actions
#windowId_FormPartialUpdateB .k-window-titlebar-actions {
    filter: drop-shadow(1px 1px 2px #fff);
}

#customCRUD_WrapperId .k-window-actions,
#windowId_FormPartialUpdateA .k-window-actions,
#windowId_FormPartialUpdateB .k-window-actions {
    background-color: rgba(24, 95, 161, 0.1) !important;
    border-top: solid 1px #c9c9c9;
}

/*---*/
.k-window .custom-popup-editor {
    margin: 30px 15px; /* Added side margin for breathing room */
}

    .k-window .custom-popup-editor .k-form-field {
        margin-bottom: 5px !important;
        font-weight: 600 !important;
        color: #555 !important;
    }

    .k-window .custom-popup-editor .k-tooltip-error {
        border: solid 1px #e3dadb !important;
    }
/* #endregion customCRUD in window */

.xw-30pc {
    width: 30% !important;
}

.w-40pc {
    width: 40% !important;
}

.w-60pc {
    width: 60% !important;
}

.w-90pc {
    width: 90% !important;
}

.w-100px {
    width: 100px;
}

.ink-moduleA {
    background-color: rgba(24, 154, 55, 0.2) !important;
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
}

.ink-moduleA-light {
    background-color: rgba(24, 154, 55, 0.1);
}

.ink-moduleB {
    background-color: rgba(1, 85, 158, 0.2) !important;
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
}

.ink-moduleB-light {
    background-color: rgba(1, 85, 158, 0.1);
}

.ink-moduleC {
    background-color: rgba(245, 96, 33, 0.2) !important;
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
}

.ink-moduleC-light {
    background-color: rgba(245, 96, 33, 0.1);
}

.ink-moduleD {
    background-color: rgba(255, 202, 42, 0.2) !important;
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 1px 2px 2px);
}

.ink-moduleD-light {
    background-color: rgba(255, 202, 42, 0.1);
}

.ink-grid-link {
    font-weight: 500;
    cursor: pointer;
    text-decoration: none !important;
    color: #3874ff !important;
}

    .ink-grid-link:hover {
        color: rgba(var(--bs-primary-rgb), 0.8) !important;
        /* zcolor: #2474e5 !important; */
        /* text-shadow: 0px 0px 1px #2474e5; */
    }

XXXinput.k-input-inner:focus,
XXXspan.k-dropdownlist:focus {
    -webkit-box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .075);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .075);
}

tr.rowArchive {
    background-color: rgba(249, 191, 191, 0.15) !important;
}

/*.k-grid .k-table-td:hover {
    box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.12);
}*/

.KEEPgrid-hover:hover {
    box-shadow: inset 0 -1px 0 0 rgba(100, 121, 143, 0.20) !important;
    /* box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color] [optional inset];*/
}

.tooltip .tooltip-inner {
    background-color: #ffc;
    color: #333;
    border: 1px solid #999;
    box-shadow: rgba(0, 27, 71, 0.24) 0px 8px 20px 0px;
    padding: 4px;
    font-size: 14px;
}

.tooltip .tooltip-arrow,
.tooltip .arrow,
.tooltip .tooltip-arrow::before,
.tooltip .arrow::before,
.tooltip .tooltip-arrow::after,
.tooltip .arrow::after {
    display: none !important;
}

.ink-tooltip {
    color: rgba(25, 104, 252, 0.6) !important; /* rgba(100, 116, 149, 1) */
    padding: 10px 10px 10px 10px !important; /* IMP: do not change */
}

    .ink-tooltip:hover {
        color: rgba(25, 104, 252, 1) !important;
    }

.ink-info {
    padding: 4px !important;
    background-color: rgba(245, 245, 247, 1) !important;
}