/*!
 * SlickGrid Alpine Theme
 * (c) 2009-2016 Michael Leibman
 * michael{dot}leibman{at}gmail{dot}com
 * original project: https://github.com/mleibman/slickgrid
 * project forked as: https://github.com/6pac/slickgrid
 *
 * Distributed under MIT license.
 * All rights reserved.
 */
@keyframes fade {

    0%, to {
        background: none
    }

    50% {
        background: var(--alpine-row-highlight-fade-animation, 1s linear)
    }
}

#myGrid,
.slick-container {
    background-color: var(--alpine-grid-bgcolor, #fff);
    border-color: var(--alpine-border-color, #dae1e7);
    border-radius: var(--alpine-border-radius, 0);
    border-style: solid;
    border-width: var(--alpine-border-width, 1px);
    box-sizing: border-box;
    color: var(--alpine-font-color, #181d1f);
    font-family: var(--alpine-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    font-size: var(--alpine-font-size, 13px)
}

    #myGrid.bottom-rounded,
    .slick-container.bottom-rounded {
        border-bottom-left-radius: .25rem;
        border-bottom-right-radius: .25rem
    }

    #myGrid .text-center,
    .slick-container .text-center {
        text-align: center
    }

.slick-viewport {
    background-color: var(--alpine-bg-color, #fff)
}

    .slick-viewport .grid-canvas {
        outline: 0;
        position: relative
    }

.slick-range-decorator {
    border: var(--alpine-range-border, 3px solid #000);
    cursor: cell;
    z-index: 9999
}

.slick-row.slick-state-active,
.slick-row.ui-widget-content {
    border: 0;
    position: absolute;
    width: 100%
}

.slick-row.slick-state-active {
    background: var(--alpine-cell-selected-bg-color, #d4ebfd)
}

.slick-row .selected {
    background-color: var(--alpine-cell-selected-bg-color, #d4ebfd);
    color: var(--alpine-cell-selected-color, #181d1f);
    z-index: 10
}

.slick-row.odd {
    background-color: var(--alpine-odd-row-color, #fbfbfb)
}

.slick-row:hover {
    background-color: var(--alpine-row-mouse-hover-color, #e8f4fe)
}

.slick-row.highlight-animate {
    animation: fade var(--alpine-row-highlight-fade-animation, 1s linear);
    background: var(--alpine-row-highlight-background-color, #d9edfd) !important
}

.slick-groupby-remove {
    padding-right: 10px
}

.slick-group {
    background-color: var(--alpine-header-bg-color, #f8f8f8);
    border-bottom: 2px solid var(--alpine-border-color, #dae1e7)
}

    .slick-group .slick-cell {
        padding-left: 4px;
        padding-right: 4px;
        text-align: left !important
    }

.slick-group-toggle {
    background-color: currentColor;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    height: 1em;
    margin-right: 5px;
    opacity: var(--alpine-group-icon-opacity, .8);
    width: 1em
}

    .slick-group-toggle.expanded {
        --alpine-group-expanded-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"/%3E%3C/svg%3E');
        -webkit-mask: var(--alpine-group-expanded-icon-svg) no-repeat;
        mask: var(--alpine-group-expanded-icon-svg) no-repeat;
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%
    }

    .slick-group-toggle.collapsed {
        --alpine-group-collapsed-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z"/%3E%3C/svg%3E');
        -webkit-mask: var(--alpine-group-collapsed-icon-svg) no-repeat;
        mask: var(--alpine-group-collapsed-icon-svg) no-repeat;
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%
    }

.slick-group-totals {
    background: var(--alpine-bg-color, #fff);
    color: var(--alpine-font-color, #181d1f)
}

.slick-group-toggle-all {
    background-color: currentColor;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    height: 1em;
    margin-right: 5px;
    opacity: var(--alpine-group-icon-opacity, .8);
    width: 1em
}

    .slick-group-toggle-all.collapsed {
        --alpine-group-collapsed-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z"/%3E%3C/svg%3E');
        -webkit-mask: var(--alpine-group-collapsed-icon-svg) no-repeat;
        mask: var(--alpine-group-collapsed-icon-svg) no-repeat;
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%
    }

    .slick-group-toggle-all.expanded {
        --alpine-group-expanded-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"/%3E%3C/svg%3E');
        -webkit-mask: var(--alpine-group-expanded-icon-svg) no-repeat;
        mask: var(--alpine-group-expanded-icon-svg) no-repeat;
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%
    }

.slick-cell {
    align-items: var(--alpine-cell-align-items, center);
    border-color: var(--alpine-cell-border-color, #dae1e7);
    border-radius: var(--alpine-cell-border-radius, 0);
    border-style: solid;
    border-width: var(--alpine-cell-border-width, 0 1px 1px 0);
    cursor: default;
    display: var(--alpine-cell-display, block);
    justify-content: var(--alpine-cell-justify-content, flex-start);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    padding: var(--alpine-cell-padding, 2px 4px);
    position: absolute;
    text-overflow: var(--alpine-cell-text-overflow, ellipsis);
    vertical-align: middle;
    white-space: nowrap;
    z-index: 1
}

    .slick-cell.selected {
        background-color: var(--alpine-cell-selected-bg-color, #d4ebfd);
        color: var(--alpine-cell-selected-color, #181d1f)
    }

        .slick-cell.selected span a {
            color: #fff
        }

    .slick-cell.active { 
        color: black !important;
    }

    .slick-cell.highlighted {
        background: #87cefa;
        background: rgba(0, 0, 255, .2);
        transition: all .5s
    }

    .slick-cell.flashing {
        border: 1px solid red
    }

    .slick-cell.editable {
        border-style: solid;
        overflow: visible;
        z-index: 11
    }

    .slick-cell:focus {
        outline: none
    }

.slick-selection {
    border: 2px dashed #000;
    position: absolute;
    z-index: 10
}

.slick-header {
    background-color: var(--alpine-header-bg-color, #f8f8f8);
    border-bottom: 1px solid var(--alpine-border-color, #dae1e7);
    color: var(--alpine-header-color, #181d1f);
    font-weight: var(--alpine-header-font-weight, bold)
}

    .slick-header.slick-state-default {
        border-left: 0;
        overflow: hidden;
        width: 100%
    }

.grid-header {
    background-color: var(--alpine-header-bg-color, #f8f8f8);
    border-color: var(--alpine-top-header-border-color, #dae1e7);
    border-style: solid;
    border-width: var(--alpine-top-header-border-width, 1px 1px 0 1px);
    box-sizing: border-box;
    font-family: var(--alpine-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    font-size: var(--alpine-top-header-font-size, 15px);
    font-weight: var(--alpine-top-header-font-weight, bold);
    height: 35px;
    padding: var(--alpine-top-header-padding, 8px 6px 0 8px)
}

.slick-resizable-handle {
    border: 0;
    box-shadow: var(--alpine-header-resizable-handle-box-shadow, inset 0 0 0 1px #dde2eb);
    cursor: col-resize;
    display: block;
    font-size: .1px;
    height: var(--alpine-header-resizable-handle-height, 50%);
    position: absolute;
    right: 0;
    top: var(--alpine-header-resizable-handle-top, 25%);
    width: 2px
}

.slick-reorder-guide,
.slick-reorder-proxy {
    background: blue;
    display: inline-block
}

.slick-reorder-proxy {
    cursor: move;
    filter: alpha(opacity=15);
    opacity: .15
}

.slick-reorder-guide {
    filter: alpha(opacity=70);
    height: 2px;
    opacity: .7
}

.slick-preheader-panel .slick-header-column,
.slick-topheader-panel .slick-header-column {
    border-color: #dae1e7;
    border-style: solid;
    border-width: th
}

.slick-header-column-active .slick-header-menubutton,
.slick-header-column:hover > .slick-header-menubutton {
    display: inline-block
}

.slick-header-column {
    align-items: var(--alpine-header-align-items, flex-start);
    border-color: var(--alpine-header-border-color, #cad6e0);
    border-style: solid;
    border-width: thin;
    display: var(--alpine-header-display, inline-flex);
    height: var(--alpine-header-column-height, calc(23px*var(--alpine-header-name-row-count, 1)));
    justify-content: var(--alpine-header-justify-content, flex-start);
    line-height: var(--alpine-header-column-line-height, 23px);
    margin: 0;
    overflow: hidden;
    padding: 4px;
    position: relative;
    vertical-align: var(--alpine-header-vertical-align, top);
    white-space: pre-wrap
}

    .slick-header-column .slick-header-menubutton {
        background-color: var(--alpine-header-bg-color, #f8f8f8);
        background-image: none;
        bottom: 0;
        cursor: pointer;
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        width: var(--alpine-header-menubutton-width, 18px)
    }

        .slick-header-column .slick-header-menubutton .caret {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px dashed;
            display: inline-block;
            height: 0;
            margin-left: 4px;
            margin-top: 7px;
            vertical-align: middle;
            width: 0
        }

        .slick-header-column .slick-header-menubutton.filtered {
            color: var(--alpine-header-menubutton-filtered-color, #3490dc)
        }

    .slick-header-column .slick-sort-indicator,
    .slick-header-column .slick-sort-indicator-numbered {
        color: var(--alpine-sort-indicator-color, #3490dc);
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .slick-header-column .slick-sort-indicator {
        background-image: none;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        display: inline-block;
        height: 0;
        margin: var(--alpine-sort-indicator-margin, 5px 0 0 3px);
        vertical-align: middle;
        width: 0
    }

    .slick-header-column .slick-sort-indicator-asc {
        border-bottom: 4px dashed
    }

    .slick-header-column .slick-sort-indicator-desc {
        border-top: 4px dashed
    }

    .slick-header-column .slick-sort-indicator-numbered {
        font-size: var(--alpine-sort-numbered-font-size, 10px)
    }

    .slick-header-column.unorderable {
        background-color: var(--alpine-header-unorderable-bg-color, #f0f0f0)
    }

.slick-header-columns {
    cursor: default;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    white-space: nowrap
}

    .slick-header-columns .slick-state-hover {
        background: var(--alpine-header-name-hover-bg-color, hsla(0, 0%, 74%, .267))
    }

.slick-column-name,
.slick-sort-indicator {
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.slick-column-name {
    display: var(--alpine-header-name-display, block);
    flex-grow: var(--alpine-header-name-flex-grow, 0);
    overflow: var(--alpine-header-name-overflow, hidden);
    text-overflow: var(--alpine-header-name-text-overflow, ellipsis);
    white-space: nowrap
}

.slick-footerrow,
.slick-headerrow {
    background-color: var(--alpine-header-footer-bg-color, #fff);
    position: relative
}

    .slick-footerrow.slick-state-default,
    .slick-headerrow.slick-state-default {
        border-left: 0;
        overflow: hidden;
        width: 100%
    }

.slick-footerrow-columns,
.slick-headerrow-columns {
    cursor: default;
    overflow: hidden;
    position: relative;
    white-space: nowrap
}

.slick-headerrow-columns {
    background-color: var(--alpine-headerrow-bg-color, #f8fafc);
    /*border-bottom: 1px solid var(--alpine-border-color, #dae1e7);*/
    text-align: center
}

.slick-footerrow-column,
.slick-headerrow-column {
    cursor: default;
    padding: 4px;
    position: absolute;
    vertical-align: middle;
    white-space: nowrap;
    z-index: 1
}

.slick-footerrow-column {
    border-color: var(--alpine-footerrow-border-color, #dae1e7);
    border-radius: var(--alpine-footerrow-border-radius, 0);
    border-style: solid;
    border-width: var(--alpine-footerrow-border-width, 1px 1px 1px 0);
    float: left;
    font-size: var(--alpine-footerrow-font-size, 12px);
    line-height: 20px;
    margin: 0;
    overflow: ellipsis
}

.slick-headerrow-column {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden
}

    .slick-headerrow-column input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid #a6b3bf;
        box-sizing: border-box;
        color: var(--alpine-font-color, #181d1f);
        height: 100%;
        width: 100%
    }

.slick-header-menu {
    background: var(--alpine-header-bg-color, #f8f8f8);
    border: 1px solid var(--alpine-border-color, #dae1e7);
    border-bottom-left-radius: var(--alpine-border-radius, 0);
    border-bottom-right-radius: var(--alpine-border-radius, 0);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    color: var(--alpine-font-color, #181d1f);
    cursor: default;
    display: inline-block;
    font-family: var(--alpine-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    font-size: var(--alpine-font-size, 13px);
    margin: 0;
    min-width: 175px;
    padding: 4px !important;
    position: absolute;
    z-index: 100000
}

    .slick-header-menu label {
        font-weight: 400
    }

    .slick-header-menu button {
        border: 1px solid transparent;
        border-radius: .25rem;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        font-size: var(--alpine-font-size, 13px);
        font-weight: 400;
        line-height: 1.428571429;
        margin: 2px;
        outline: 0;
        overflow: visible;
        padding: 6px 14px;
        text-align: center;
        text-transform: none;
        touch-action: manipulation;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        vertical-align: middle;
        white-space: nowrap
    }

        .slick-header-menu button,
        .slick-header-menu button:hover {
            background-color: transparent;
            color: var(--alpine-font-color, #181d1f)
        }

            .slick-header-menu button:hover {
                border-color: var(--alpine-border-color, #dae1e7)
            }

            .slick-header-menu button.active.focus,
            .slick-header-menu button.active:focus,
            .slick-header-menu button.active:hover,
            .slick-header-menu button:active.focus,
            .slick-header-menu button:active:focus,
            .slick-header-menu button:active:hover {
                background-color: transparent;
                border-color: var(--alpine-border-color, #dae1e7);
                color: var(--alpine-font-color, #181d1f)
            }

    .slick-header-menu input.input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-sizing: border-box;
        color: var(--alpine-font-color, #181d1f);
        padding: .5rem .75rem;
        width: 100%
    }

    .slick-header-menu .filter,
    .slick-header-menu input.input {
        border: 1px solid var(--alpine-border-color, #dae1e7);
        border-radius: .25rem
    }

    .slick-header-menu .filter {
        background: var(--alpine-bg-color, #fff);
        height: 200px;
        margin-bottom: 5px;
        margin-top: 5px;
        max-height: 200px;
        max-width: 300px;
        overflow: scroll;
        padding: 4px;
        white-space: nowrap
    }

        .slick-header-menu .filter label {
            display: block;
            font-size: var(--alpine-font-size, 13px)
        }

.slick-header-menuitem-disabled {
    color: silver
}

.slick-header-menuitem {
    align-items: center;
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0
}

    .slick-header-menuitem .slick-header-menuicon {
        background-position: 50%;
        background-repeat: no-repeat;
        display: inline-block;
        height: 16px;
        margin-right: 4px;
        vertical-align: middle;
        width: 16px
    }

        .slick-header-menuitem .slick-header-menuicon.sort-asc,
        .slick-header-menuitem .slick-header-menuicon.sort-desc {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            display: inline-block;
            height: 0;
            margin-left: 8px;
            margin-top: 0;
            vertical-align: middle;
            width: 0
        }

        .slick-header-menuitem .slick-header-menuicon.sort-asc {
            border-bottom: 4px dashed
        }

        .slick-header-menuitem .slick-header-menuicon.sort-desc {
            border-top: 4px dashed
        }

    .slick-header-menuitem .slick-header-menucontent {
        display: inline-block;
        flex-grow: 1;
        font-size: var(--alpine-font-size, 13px);
        margin: var(--alpine-menu-content-margin, 2px 4px);
        vertical-align: middle
    }

    .slick-header-menuitem:hover {
        border-color: var(--alpine-border-color, #dae1e7)
    }

.slick-pane {
    box-sizing: border-box;
    outline: 0;
    overflow: hidden;
    position: absolute;
    width: 100%
}

.slick-pane-header {
    display: block
}

.slick-pager {
    align-items: center;
    background-color: var(--alpine-pager-bg-color, #f8f8f8);
    border-color: var(--alpine-pager-border-color, #dae1e7);
    border-radius: var(--alpine-pager-border-radius, 0);
    border-style: solid;
    border-width: var(--alpine-pager-border-width, 0 1px 1px 1px);
    box-sizing: border-box;
    color: var(--alpine-font-color, #181d1f);
    display: inline-flex;
    font-family: var(--alpine-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    font-size: var(--alpine-font-size, 13px);
    height: var(--alpine-pager-height, 40px);
    padding: 4px;
    vertical-align: middle;
    width: 100%
}

    .slick-pager .sgi {
        cursor: pointer
    }

        .slick-pager .sgi.sgi-state-disabled,
        .slick-pager .slick-icon-state-disabled {
            cursor: var(--alpine-pager-button-cursor-disabled, default)
        }

    .slick-pager .slick-pager-nav {
        height: 100%
    }

        .slick-pager .slick-pager-nav .slick-icon-container {
            margin: var(--alpine-pager-button-margin, 0 2px)
        }

        .slick-pager .slick-pager-nav .sgi-container {
            align-items: center;
            display: inline-flex;
            height: 100%
        }

    .slick-pager .slick-pager-settings,
    .slick-pager .slick-pager-status {
        display: inline-block;
        font-size: var(--alpine-font-size, 13px);
        padding: var(--alpine-pager-padding, 6px)
    }

    .slick-pager .slick-pager-settings {
        align-items: center;
        -moz-column-gap: 1px;
        column-gap: 1px;
        display: flex;
        float: right;
        margin-left: auto
    }

        .slick-pager .slick-pager-settings a {
            cursor: pointer;
            padding: 0 2px 2px;
            text-decoration: underline
        }

.percent-complete-bar {
    border-radius: 3px;
    display: inline-block;
    height: 6px
}

.slick-cell-menu,
.slick-columnpicker,
.slick-context-menu,
.slick-gridmenu,
.slick-header-menu {
    background-color: var(--alpine-menu-bg-color, #fbfbfb);
    border: var(--alpine-menu-border, 1px solid #babfc7);
    border-radius: var(--alpine-menu-border-radius, 2px);
    box-shadow: var(--alpine-menu-box-shadow, none);
    color: var(--alpine-menu-color, #181d1f);
    font-family: var(--alpine-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    font-size: var(--alpine-font-size, 13px)
}

    .slick-cell-menu button.close,
    .slick-columnpicker button.close,
    .slick-context-menu button.close,
    .slick-gridmenu button.close,
    .slick-header-menu button.close {
        background: var(--alpine-menu-close-btn-background, transparent);
        border: var(--alpine-menu-close-btn-border, 1px solid #babfc7);
        cursor: pointer
    }

.slick-cell-menu,
.slick-context-menu {
    box-sizing: content-box
}

.slick-cell.selected.editable {
    background-color: #fff;
    border-radius: var(--alpine-cell-editable-border-radius, 3px)
}

.slick-cell.editable {
    box-shadow: var(--alpine-cell-editable-box-shadow, inset 0 0 0 2px #3490dc)
}

.slick-cell.hidden {
    display: none
}

input.editor-checkbox,
input.editor-percentcomplete,
input.editor-text {
    border: 0;
    height: 100%;
    margin: 0;
    outline: 0;
    padding: 0
}

input.editor-percentcomplete,
input.editor-text {
    width: 100%
}

input.editor-text {
    background: #fff
}

input.editor-percentcomplete {
    background: transparent;
    float: left
}

.editor-percentcomplete-picker {
    cursor: pointer;
    display: inline-block;
    overflow: visible;
    position: relative;
    z-index: 1000
}

    .editor-percentcomplete-picker .editor-percentcomplete-picker-icon {
        background-color: currentColor;
        color: inherit;
        display: inline-block;
        font-size: 18px;
        height: 1em;
        width: 1em;
        --alpine-percent-complete-picker-icon-svg: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z"/%3E%3C/svg%3E');
        -webkit-mask: var(--alpine-percent-complete-picker-icon-svg) no-repeat;
        mask: var(--alpine-percent-complete-picker-icon-svg) no-repeat;
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%
    }

    .editor-percentcomplete-picker:hover .editor-percentcomplete-helper {
        display: block
    }

input[type=range].editor-percentcomplete-slider {
    background-color: #ccc;
    left: 15px;
    position: absolute;
    top: 125px;
    transform: rotate(270deg);
    transform-origin: left
}

.editor-percentcomplete-helper {
    display: none;
    height: 140px;
    left: -9px;
    overflow: visible;
    padding-left: 9px;
    position: absolute;
    top: -3px;
    width: 120px
}

.editor-percentcomplete-wrapper {
    background: #f9f9f9;
    border: 1px solid gray;
    height: 98px;
    padding: 20px 8px;
    position: relative;
    width: 100%;
    width: 120px
}

.editor-percentcomplete-buttons {
    float: right
}

    .editor-percentcomplete-buttons button {
        margin-bottom: 4px;
        width: 80px
    }

.editor-percentcomplete-slider {
    float: left
}

.editor-percentcomplete-helper:hover {
    display: block
}

select.editor-yesno {
    margin: 0;
    vertical-align: middle;
    width: 100%
}

.slick-composite-editor-modal,
.slick-composite-editor-modal input,
.slick-composite-editor-modal textarea {
    font-family: var(--alpine-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif)
}

.slick-large-editor-text {
    background: var(--alpine-large-editor-bg-color, #fff);
    border: var(--alpine-large-editor-border, 2px solid #b0b0b0);
    border-radius: var(--alpine-large-editor-border-radius, 8px);
    padding: 5px;
    z-index: 10000
}

    .slick-large-editor-text button {
        margin-left: 2px
    }

    .slick-large-editor-text button,
    .slick-large-editor-text textarea {
        color: var(--alpine-large-editor-color, #181d1f);
        font-family: var(--alpine-large-editor-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
        font-size: var(--alpine-large-editor-font-size, 13px)
    }

button.slick-btn {
    border: var(--alpine-button-border, 1px solid #ccc);
    border-radius: var(--alpine-button-radius, 2px);
    cursor: pointer;
    padding: var(--alpine-button-padding, 2px 4px)
}

    button.slick-btn.slick-btn-default {
        background-color: var(--alpine-button-bg-color, #fff)
    }

        button.slick-btn.slick-btn-default:hover {
            background-color: var(--alpine-button-default-hover-color, rgba(68, 68, 68, .1));
            border: var(--alpine-button-default-hover-border, 1px solid #9c9c9c)
        }

    button.slick-btn.slick-btn-primary {
        background-color: var(--alpine-button-primary-bg-color, #fff);
        border-color: var(--alpine-button-primary-border-color, #2196f3);
        color: var(--alpine-button-primary-color, #2196f3)
    }

        button.slick-btn.slick-btn-primary:active {
            background-color: var(--alpine-button-primary-active-color, #2196f3)
        }

        button.slick-btn.slick-btn-primary:hover {
            background-color: var(--alpine-button-primary-hover-color, rgba(33, 150, 243, .1))
        }
.ui-widget {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1em !important;
}

.slick-resizable-handle {
    box-shadow: none !important;
}

.slick-header-column {
    height: auto !important;
    line-height: 1.6em !important;
    padding: 6px;
    border-right: 1px solid silver;
    border-left: 0px !important;
    border-top: 1px !important;
    border-bottom: 1px !important;
    color: white;
    text-align: center;
    font-size: 15px !important;
    background-color: #0066b3 !important;
}

.slick-header-columns {
    /*  height: 35px !important;  Container chứa các cột */
}

.slick-column-name {
    width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slick-cell,
.slick-headerrow-column,
.slick-footerrow-column {
    position: absolute;
    border: 1px solid transparent;
    border-right: 1px dotted silver;
    border-bottom-color: silver;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    vertical-align: middle;
    z-index: 1;
    padding: 1px 2px 1px 2px !important;
    margin: 0;
    white-space: nowrap;
    cursor: default;
    font-size: 14px !important;
}

.slick-row {
    line-height: 23px;
}

    .slick-row.active {
        color: black !important;
        background-color: #e9ecef !important;
    }

.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg,
.navbar > .container-md,
.navbar > .container-sm,
.navbar > .container-xl,
.navbar > .container-xxl {
    flex-wrap: unset;
}


.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.number-input {
    text-align: right;
}

.modal-header {
    padding: .5rem 1rem !important;
    color: #fff;
    background: linear-gradient(135deg, #1e66d1 0%, #2e86b0 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
}

.btn-close {
    color: white !important;
}
[v-cloak] {
    display: none;
}

body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
    /* tránh lệch layout khi bootstrap auto cộng padding */
}

.form-check-label {
    font-size: 14px;
    color: black;
}

.draggable-modal .modal-header {
    cursor: move;
    user-select: none;
    transition: background-color 0.2s ease;
}

    .draggable-modal .modal-header:hover {
        background-color: #f8f9fa;
    }

    .draggable-modal .modal-header.dragging {
        background-color: #e9ecef;
    }

.modal-dialog.dragging {
    transition: none !important;
    transform-origin: center;
}

.modal-dialog {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* Custom Modal Animations */
.modal.fade .modal-dialog {
    transition: all 0.3s ease-out;
}

/* Fade Effect (default Bootstrap) */
.modal.fade.show .modal-dialog {
    transform: none;
}

/* Scale Effect */
.modal.scale .modal-dialog {
    transform: scale(0.7);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal.scale.show .modal-dialog {
    transform: scale(1);
}

/* Slide Down Effect */
.modal.slide-down .modal-dialog {
    transform: translateY(-100vh);
    transition: all 0.4s ease-out;
}

.modal.slide-down.show .modal-dialog {
    transform: translateY(0);
}

/* Slide Up Effect */
.modal.slide-up .modal-dialog {
    transform: translateY(100vh);
    transition: all 0.4s ease-out;
}

.modal.slide-up.show .modal-dialog {
    transform: translateY(0);
}

/* Slide Left Effect */
.modal.slide-left .modal-dialog {
    transform: translateX(-100vw);
    transition: all 0.4s ease-out;
}

.modal.slide-left.show .modal-dialog {
    transform: translateX(0);
}

/* Slide Right Effect */
.modal.slide-right .modal-dialog {
    transform: translateX(100vw);
    transition: all 0.4s ease-out;
}

.modal.slide-right.show .modal-dialog {
    transform: translateX(0);
}

/* Flip Effect */
.modal.flip .modal-dialog {
    transform: rotateY(-90deg);
    transition: all 0.5s ease-out;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.modal.flip.show .modal-dialog {
    transform: rotateY(0deg);
}

/* Zoom Effect */
.modal.zoom .modal-dialog {
    transform: scale(0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modal.zoom.show .modal-dialog {
    transform: scale(1);
}

/* Bounce Effect */
.modal.bounce .modal-dialog {
    transform: scale(0.3);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modal.bounce.show .modal-dialog {
    transform: scale(1);
}

/* Rotate Effect */
.modal.rotate .modal-dialog {
    transform: scale(0.7) rotate(-180deg);
    transition: all 0.5s ease-out;
}

.modal.rotate.show .modal-dialog {
    transform: scale(1) rotate(0deg);
}

/* Enhanced Backdrop Animation */
.modal .modal-backdrop {
    transition: opacity 0.3s ease-out;
}

.modal.show .modal-backdrop {
    opacity: 0.5;
}

/* Glow Effect for Special Modals */
.modal.glow.show .modal-dialog .modal-content {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
    animation: glow-pulse 2s ease-in-out infinite alternate;
}

@keyframes glow-pulse {
    from {
        box-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
    }

    to {
        box-shadow: 0 0 40px rgba(102, 126, 234, 0.8);
    }
}

/* Shake Effect for Error Modals */
.modal.shake .modal-dialog {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {

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

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}


.btn-demo {
    background: linear-gradient(45deg, #667eea, #764ba2);
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 5px;
}

    .btn-demo:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        color: white;
    }

.modal-icon {
    margin-right: 8px;
    color: #667eea;
}


.drag-indicator {
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #6c757d;
    font-size: 14px;
}



/*SELECT */

.select-input {
    position: relative;
    width: 100%;
    color: black !important
}

/* Base selection styles */
.select-input__selection {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    position: relative;
    color: #212529;
}

/* Size variants - similar to Bootstrap form-control sizes */
.select-input--sm .select-input__selection {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.select-input--normal .select-input__selection {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
}

.select-input--lg .select-input__selection {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 3rem 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}

.select-input__selection:hover {
    border-color: #adb5bd;
}

.select-input__selection:focus {
    border-color: #3b87d3 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: 0;
}

.select-input__selection.focused {
    border-color: #3b87d3 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.select-input__selection.disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.select-input--disabled {
    pointer-events: none;
}

.select-input__rendered {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-input__placeholder {
    color: #6c757d;
}

.select-input__single-value {
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Arrow positioning by size */
.select-input--sm .select-input__arrow {
    position: absolute;
    right: 0.5rem;
}

.select-input--normal .select-input__arrow {
    position: absolute;
    right: 0.75rem;
}

.select-input--lg .select-input__arrow {
    position: absolute;
    right: 1rem;
}

.select-input__arrow {
    transition: transform 0.15s ease-in-out;
    color: #6c757d;
}

    .select-input__arrow.opened {
        transform: rotate(180deg);
    }

/* Clear button positioning by size */
.select-input--sm .select-input__clear {
    position: absolute;
    right: 1.5rem;
}

.select-input--normal .select-input__clear {
    position: absolute;
    right: 2rem;
}

.select-input--lg .select-input__clear {
    position: absolute;
    right: 2.5rem;
}

.select-input__clear {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease-in-out;
    z-index: 1;
    color: #6c757d;
}

    .select-input__clear:hover {
        opacity: 1;
        color: #dc3545;
    }

.select-input__dropdown {
    position: absolute !important;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: none;
    min-width: 100%;
    width: max-content;
    max-width: 600px;
}

    .select-input__dropdown.show {
        display: block;
        animation: slideDown 0.15s ease-out;
    }

/* Debug: Always show dropdown for testing */
.select-input--debug .select-input__dropdown {
    display: block !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Search field sizes */
.select-input__search {
    padding: 0.5rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.select-input__search-field {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #fff;
}

.select-input--sm .select-input__search-field {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.select-input--normal .select-input__search-field {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
}

.select-input--lg .select-input__search-field {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

.select-input__search-field:focus {
    outline: none;
    border-color: #3b87d3 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.select-input__results {
    overflow-y: auto;
    position: relative;
    /* Chiều cao sẽ được tính động dựa vào pageSize */
}

/* Table scroll body: tbody scroll, thead fixed - Fixed alignment */
.select-input__table-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    max-height: inherit;
    /* Inherit from parent results container */
}

/* Header container - fixed */
.select-input__table-header-container {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8f9fa;
    flex-shrink: 0;
    overflow: hidden;
}

/* Body container - scrollable */
.select-input__table-body-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    max-height: calc(100% - 40px);
    /* Account for header height */
}

.select-input__table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    margin: 0;
}

/* Header table */
.select-input__table-header-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    margin: 0;
}

/* Body table */
.select-input__table-body-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    margin: 0;
}

.select-input__table-row {
    border-bottom: 1px solid #dee2e6;
}

    .select-input__table-row:last-child {
        border-bottom: none;
    }

.select-input__table-cell,
.select-input__table-header th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    box-sizing: border-box;
    border: none;
}

/* Option sizes */
.select-input__option {
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.select-input--sm .select-input__option {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.select-input--normal .select-input__option {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
}

.select-input--lg .select-input__option {
    padding: 0.625rem 1rem;
    font-size: 1.25rem;
}

.select-input__option:last-child {
    border-bottom: none;
}

.select-input__option:hover,
.select-input__option.highlighted {
    background-color: #f8f9fa;
}

.select-input__option.selected {
    background-color: #0d6efd;
    color: #fff;
}

.select-input__loading {
    padding: 0.75rem;
    text-align: center;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .select-input__loading .spinner {
        width: 1rem;
        height: 1rem;
        border: 2px solid #f3f4f6;
        border-top: 2px solid #0d6efd;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.select-input__message {
    padding: 0.75rem;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Choice tags sizes */
.select-input__choice {
    background-color: #0d6efd;
    color: #fff;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.select-input--sm .select-input__choice {
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
}

.select-input--normal .select-input__choice {
    padding: 0.125rem 0.5rem;
    font-size: 0.875rem;
}

.select-input--lg .select-input__choice {
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
}

.select-input__choice-remove {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease-in-out;
    margin-left: 0.25rem;
}

    .select-input__choice-remove:hover {
        opacity: 1;
    }

/* Footer button styles */
.select-input__footer {
    border-top: 1px solid #dee2e6;
    background-color: #f8f9fa;
    display: block !important;
    /* Ensure footer is always visible */
}

.select-input__footer-button {
    width: 100%;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    color: #0d6efd;
    font-weight: 500;
    display: block !important;
    /* Ensure button is visible */
}

.select-input--sm .select-input__footer-button {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

.select-input--normal .select-input__footer-button {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
}

.select-input--lg .select-input__footer-button {
    padding: 0.625rem 1rem;
    font-size: 1.25rem;
}

.select-input__footer-button:hover {
    background-color: #e9ecef;
    color: #0a58ca;
}

.select-input__footer-button:active {
    background-color: #dee2e6;
}

/* Table layout styles - Updated for better alignment */
.select-input__table-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    position: sticky;
    top: 0;
    z-index: 5;
}

    .select-input__table-header th {
        text-align: left;
        background: #f8f9fa;
        position: sticky;
        top: 0;
    }

.select-input__table-row {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

    .select-input__table-row:hover {
        background-color: #0d6efd;
        color: #fff;
    }

    .select-input__table-row.highlighted {
        background-color: #0d6efd;
        color: #fff;
    }

    .select-input__table-row.selected {
        background-color: #0d6efd;
        color: #fff;
    }

.select-input__table-cell img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.select-input__table-cell .badge {
    font-size: 0.75rem;
}

/* Sub fields styling */
.select-input__main-text {
    font-weight: bold;
}

.select-input__sub-fields {
    font-size: 0.75em;
    font-weight: normal;
    color: #6c757d;
    margin-top: 0.25rem;
    line-height: 1.2;
}

.select-input__option .select-input__sub-fields {
    margin-top: 0.25rem;
}

/* Responsive table */
@media (max-width: 576px) {
    .select-input__table-cell {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }

        .select-input__table-cell img {
            width: 24px;
            height: 24px;
        }
}

.select-input__results::-webkit-scrollbar {
    width: 6px;
}

.select-input__results::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.select-input__results::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .select-input__results::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

.select-input__table-body-container::-webkit-scrollbar {
    width: 6px;
}

.select-input__table-body-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.select-input__table-body-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    .select-input__table-body-container::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

@media (max-width: 576px) {
    .select-input__dropdown {
        max-height: 250px;
    }

    .select-input__results {
        max-height: 150px;
    }

    .btn-group {
        gap: 0.25rem;
    }

        .btn-group .btn {
            flex: 1;
            min-width: auto;
        }
}

/*END SELECT */

@media (max-width: 576px) {
    .select-input__dropdown {
        max-height: 250px;
    }

    .select-input__results {
        max-height: 150px;
    }

    .btn-group {
        gap: 0.25rem;
    }

        .btn-group .btn {
            flex: 1;
            min-width: auto;
        }
}


@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1150px;
    }
}


@media (min-width: 1400px) {
    .modal-xl {
        max-width: 1350px;
    }
}

@media (min-width: 1600px) {
    .modal-xl {
        max-width: 1500px;
    }
}

/* DateTimePicker Styles */

.datetime-input-container {
    position: relative;
}

.datetime-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: white;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
    padding: 1rem;
    min-width: 300px;
    margin-top: 4px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.calendar-cell {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

    .calendar-cell:hover {
        background-color: var(--bs-secondary-bg);
    }

    .calendar-cell.selected {
        background-color: var(--bs-primary);
        color: white;
    }

    .calendar-cell.other-month {
        color: var(--bs-secondary-color);
    }

.calendar-header {
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: 12px;
}

.month-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.month-year-cell {
    padding: 8px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

    .month-year-cell:hover {
        background-color: var(--bs-secondary-bg);
    }

    .month-year-cell.selected {
        background-color: var(--bs-primary);
        color: white;
    }

.year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.number-input {
    text-align: right;
    font-family: 'Courier New', monospace;
}

/* Autocomplete Editor Styles */
.autocomplete-dropdown {
    font-size: 14px;
    border-radius: 4px;
}

    .autocomplete-dropdown::-webkit-scrollbar {
        width: 6px;
    }

    .autocomplete-dropdown::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .autocomplete-dropdown::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

        .autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

.autocomplete-item {
    transition: background-color 0.15s ease;
}

    .autocomplete-item:hover {
        background-color: #f0f0f0 !important;
    }

    .autocomplete-item:last-child {
        border-bottom: none !important;
    }

.autocomplete-new {
    font-weight: 500;
}

    .autocomplete-new i {
        margin-right: 4px;
    }

.text-overflow-hidden {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.modal-body {
    background-color: #f1f2f3e3 !important;
}

.btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 0.2rem !important;
    --bs-btn-padding-x: 0.2rem !important;
    --bs-btn-font-size: 0.875rem !important;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}