/* Minification failed. Returning unminified contents.
(1021,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1022,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1023,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1024,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1025,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1026,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1027,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1028,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1029,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1030,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1031,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1032,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1043,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1044,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1047,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1051,26): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1052,39): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1057,30): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1058,36): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1059,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1060,33): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1069,34): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-lt'
(1070,29): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1071,36): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1077,39): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1082,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1101,25): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1108,25): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1114,25): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1125,26): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1131,43): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1140,34): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1144,34): run-time error CSS1039: Token not allowed after unary operator: '-row-hover'
(1151,25): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1163,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1168,22): run-time error CSS1039: Token not allowed after unary operator: '-rejected-bg'
(1172,22): run-time error CSS1039: Token not allowed after unary operator: '-row-hover'
(1176,22): run-time error CSS1039: Token not allowed after unary operator: '-row-hover'
(1216,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1269,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1287,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1288,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1293,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1302,26): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-lt'
(1303,28): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1304,21): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1311,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1312,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1313,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1333,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1346,30): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-lt'
(1347,25): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1352,22): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1357,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1358,32): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1362,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1370,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1371,32): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1372,26): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1373,21): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1385,30): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-lt'
(1386,32): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1387,25): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1412,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1413,32): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1435,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1436,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1437,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1438,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1444,26): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-lt'
(1445,28): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1446,21): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1455,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1517,24): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1518,22): run-time error CSS1039: Token not allowed after unary operator: '-surface'
(1519,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1520,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1529,22): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue-lt'
(1530,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1531,24): run-time error CSS1039: Token not allowed after unary operator: '-brand-blue'
(1544,21): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1561,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1562,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1563,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1564,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1565,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1566,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1567,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1568,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1569,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1570,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1571,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1572,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1573,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1574,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1591,22): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1599,18): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1608,21): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-placeholder'
(1616,22): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1618,22): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-border'
(1619,29): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1620,25): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-size'
(1621,27): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-family'
(1622,21): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-color'
(1623,26): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-bg'
(1625,27): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1630,32): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-focus-border'
(1631,30): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-focus-shadow'
(1636,25): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-placeholder'
(1645,21): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-placeholder'
(1651,18): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1652,18): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-border'
(1653,25): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1654,22): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-bg'
(1663,29): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1678,25): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-size'
(1679,27): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-family'
(1680,21): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-color'
(1681,27): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1686,21): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-arrow-w'
(1689,27): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-border'
(1690,31): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1690,50): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1691,26): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-arrow-bg'
(1698,28): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-focus-border'
(1699,26): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-focus-shadow'
(1704,18): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1705,18): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-border'
(1706,25): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1707,22): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-bg'
(1715,29): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1730,25): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-size'
(1731,27): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-family'
(1732,21): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-color'
(1733,27): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1743,21): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-arrow-w'
(1746,27): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-border'
(1747,31): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1747,50): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1748,26): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-arrow-bg'
(1755,28): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-focus-border'
(1756,26): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-focus-shadow'
(1767,18): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1768,18): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-border'
(1769,25): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1770,22): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-bg'
(1779,29): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1794,29): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-size'
(1795,31): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-family'
(1796,25): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-color'
(1797,31): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1807,24): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-focus-border'
(1808,22): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-focus-shadow'
(1820,18): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1822,25): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-radius'
(1823,21): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-size'
(1824,23): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-family'
(1827,28): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg'
(1828,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg'
(1842,18): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-h'
(1843,21): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-size'
(1844,23): run-time error CSS1039: Token not allowed after unary operator: '-ctrl-font-family'
 */
.ts-wrap {
    background: #F1F5F9;
    min-height: 100vh;
    padding-bottom: 24px;
}

.ts-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #F1F5F9;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #E2E8F0;
}

.ts-header-inner {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}



.ts-nav-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: #F8FAFC;
    cursor: pointer;
    font-size: 15px;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    border-radius: 6px;
}

    .ts-nav-btn:hover {
        background: #E2E8F0;
    }
.ts-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    gap: 8px;
}

.ts-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 14px;
}

.ts-user {
    font-size: 15px;
    font-weight: 600;
    color: #0F172A;
}

.ts-approver {
    font-size: 12px;
    color: #64748B;
    margin-left: auto;
}
.ts-month {
    font-size: 15px;
    font-weight: 600;
    color: #337ab7;
    min-width: 140px;
    text-align: center;
}


    .ts-approver strong {
        color: #334155;
    }

.ts-controls {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.ts-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 13px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    border: 1px solid #CBD5E1;
    background: #337ab7;
    color: #fff;
    white-space: nowrap;
    font-family: inherit;
    transition: background .12s;
}

    .ts-btn:not(:disabled):hover {
        background: #285f8f;
    }

    .ts-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }
.ts-btn-save {
    background: #A3C53A;
    border-color: #A3C53A;
    color: #F0FDF4;
}

    .ts-btn-save:hover {
        background: #A3C53A;
    }

.ts-btn-submit {
    background: #EFF6FF;
    border-color: #93C5FD;
    color: #1E40AF;
}

    .ts-btn-submit:hover {
        background: #DBEAFE;
    }

.ts-btn-bulk {
    background: #FFFBEB;
    border-color: #FCD34D;
    color: #92400E;
    font-weight: 600;
}

    .ts-btn-bulk:not(:disabled):hover {
        background: #FEF3C7;
    }

.ts-btn-approve {
    background: #F0FDF4;
    border-color: #86EFAC;
    color: #166534;
}

.ts-btn-reject {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #991B1B;
}

.ts-btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    font-size: 13px;
}

.ts-chk-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    background: #fff;
    user-select: none;
    margin-bottom: 0px !important;
}

    .ts-chk-label:hover {
        background: #F1F5F9;
    }

.ts-search {
    display: inline-flex;
    align-items: center;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

    .ts-search input {
        border: none;
        outline: none;
        padding: 5px 10px;
        font-size: 12px;
        background: transparent;
        color: #0F172A;
        width: 160px;
        font-family: inherit;
    }

    .ts-search button {
        border: none;
        border-left: 1px solid #CBD5E1;
        background: #F8FAFC;
        padding: 5px 8px;
        cursor: pointer;
        color: #64748B;
        font-size: 12px;
    }

        .ts-search button:hover {
            background: #E2E8F0;
        }

.ts-spacer {
    flex: 1;
}

.ts-menu {
    position: relative;
    display: inline-flex;
}

    .ts-menu.open .ts-dropdown {
        display: block;
    }

.ts-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 155px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    z-index: 200;
    overflow: hidden;
    margin-top: 2px;
}

    .ts-dropdown li {
        list-style: none;
        padding: 8px 14px;
        font-size: 12px;
        color: #374151;
        cursor: pointer;
    }

        .ts-dropdown li:hover {
            background: #F8FAFC;
        }

/* THE TABLE */
.ts-body {
    padding: 0 16px;
}

.ts-table-wrap {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.ts-table-scroll {
    overflow-x: auto;
}

    .ts-table-scroll::-webkit-scrollbar {
        height: 5px;
    }

    .ts-table-scroll::-webkit-scrollbar-track {
        background: #F1F5F9;
    }

    .ts-table-scroll::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 3px;
    }

.ts-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

    .ts-table .col-project {
        width: 190px;
        min-width: 150px;
    }

    .ts-table .col-total {
        width: 58px;
        min-width: 58px;
    }

    .ts-table .col-day {
        min-width: 38px;
        white-space: nowrap;
    } 

    .ts-table .col-delete {
        width: 36px;
        min-width: 36px;
    }

    .ts-table thead th {
        padding: 7px 4px;
        font-size: 11px;
        font-weight: 600;
        color: #64748B;
        text-align: center;
        border-bottom: 1px solid #E2E8F0;
        border-right: 1px solid #F1F5F9;
        background: #F8FAFC;
        white-space: nowrap;
    }

        .ts-table thead th.col-project {
            text-align: left;
            padding-left: 12px;
            border-right: 1px solid #E2E8F0;
        }

        .ts-table thead th.col-total {
            border-right: 1px solid #E2E8F0;
            color: #337ab7;
        }

        .ts-table thead th.col-delete {
            border-left: 1px solid #E2E8F0;
            border-right: none;
        }

.ts-th-day .ts-day-num {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.ts-th-day .ts-day-name {
    display: block;
    font-size: 9px;
    font-weight: 400;
    color: #94A3B8;
    text-transform: uppercase;
}

.ts-table thead th.ts-weekend {
    background: #FFFBEB;
    color: #B45309;
}

.ts-table thead th.ts-today {
    background: #EFF6FF;
    color: #337ab7;
}

/* tbody */
.ts-table tbody tr {
    border-bottom: 1px solid #F1F5F9;
}

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

    .ts-table tbody tr:hover {
        background: #FAFAFA;
    }

.ts-table td.ts-td-project {
    padding: 8px 12px;
    border-right: 1px solid #E2E8F0;
    vertical-align: middle;
    word-break: break-word;
}

.ts-proj-code {
    font-size: 12px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
}

.ts-proj-sub {
    font-size: 11px;
    color: #64748B;
    margin-top: 2px;
}

.ts-table td.ts-td-total {
    padding: 3px 2px;
    border-right: 1px solid #E2E8F0;
    text-align: center;
    vertical-align: middle;
    background: #F8FAFC;
}

.ts-table td.ts-td-day {
    padding: 3px 2px;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #F1F5F9;
}

    .ts-table td.ts-td-day.ts-weekend {
        background: #FFFBEB;
    }

.ts-table td.ts-td-delete {
    text-align: center;
    vertical-align: middle;
    border-left: 1px solid #E2E8F0;
    padding: 3px;
}

/* inputs */
.ts-day-input {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 1px;
    text-align: center;
    font-size: 12px;
    font-family: inherit;
    background: transparent;
    color: #0F172A;
    transition: border-color .12s, background .12s;
}

    .ts-day-input:hover {
        border-color: #CBD5E1;
        background: #F8FAFC;
    }

    .ts-day-input:focus {
        outline: none;
        border-color: #3B82F6;
        background: #EFF6FF;
    }

    .ts-day-input:disabled {
        background: transparent;
        color: #64748B;
        cursor: not-allowed;
        border-color: transparent;
    }

    .ts-day-input.ts-has-value {
        font-weight: 600;
    }

.ts-wknd-input {
    color: #B45309 !important;
}

.ts-row-total {
    font-weight: 700;
    color: #1E40AF;
    font-size: 12px;
}

.ts-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0px;
    height: 22px;
    border-radius: 4px;
    color: #94A3B8;
    font-size: 12px;
    transition: color .12s, background .12s;
}

    .ts-delete-btn:hover {
        color: #DC2626;
        background: #FEF2F2;
    }



.ts-table tfoot tr {
    background: #EFF6FF;
    border-top: 1px solid #BFDBFE;
}

.ts-table tfoot td {
    padding: 5px 4px;
    text-align: center;
    border-right: 1px solid #DBEAFE;
}

    .ts-table tfoot td.ts-tfoot-label {
        text-align: left;
        padding-left: 12px;
        font-size: 12px;
        font-weight: 600;
        color: #337ab7;
        border-right: 1px solid #BFDBFE;
    }

    .ts-table tfoot td.ts-tfoot-grand {
        border-right: 1px solid #BFDBFE;
        background: #EFF6FF;
    }

.ts-footer-input {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #1E40AF;
    font-family: inherit;
    padding: 2px;
}

.ts-grand-input {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #337ab7;
    font-family: inherit;
    padding: 2px;
}

.ts-hide-weekends .ts-weekend {
    display: none !important;
}

.k-window div.k-window-content {
    overflow: hidden;
}

.k-edit-form-container {
    width: 96% !important;
}

.confirmationBoxMsg {
    padding: 10px 14px;
    color: #374151;
    font-size: 14px;
}

.ts-proj-name {
    font-weight: 400;
    color: #475569;
    font-size: 11px;
}

.ts-proj-code {
    font-size: 12px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.4;
    display: block;
}

.ts-proj-sub {
    font-size: 11px;
    color: #64748B;
    margin-top: 2px;
    display: block;
}

.ts-proj-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ts-group-addline-btn {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #337ab7;
    background: #DBEAFE;
    color: #337ab7;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 1px 0;
    transition: background .15s, transform .1s;
}

    .ts-group-addline-btn:hover {
        background: #BFDBFE;
        transform: scale(1.1);
    }
/* Dimmed state for non-active project groups */
.ts-group-row.ts-group-dimmed {
    opacity: 0.4;
    pointer-events: none;
}

.ts-group-row.ts-group-locked {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.ts-project-row.ts-row-locked {
    opacity: 0.35;
}

    .ts-project-row.ts-row-locked input,
    .ts-project-row.ts-row-locked button,
    .ts-project-row.ts-row-locked a {
        pointer-events: none;
        cursor: default;
    }

.ts-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.ts-badge-total {
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    color: #166534;
}

.ts-badge-holiday {
    background: #F3F0FF;
    border: 1px solid #C4B5FD;
    color: #5B21B6;
}


.ts-badge-hol {
    background: #FFF7ED;
    border: 1px solid #FDC888;
    color: #92400E;
}

.ts-badge-leave {
    background: #FFF1F2;
    border: 1px solid #FECDD3;
    color: #9F1239;
}
.flatpickr-calendar.inline {
    font-size: 14px;
}

.flatpickr-day {
    width: 42px;
}

.flatpickr-weekday {
    font-size: 13px;
}

.flatpickr-month {
    font-size: 16px;
}
/* Bulk panel: scrollable container, no outer page scroll */
.ts-bulk-panel-row > td {
    padding: 16px !important;
}

#bulk-configure-* {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}
.ts-btn-icon img {
    width: 18px;
    height: 15px;
    object-fit: contain;
}
.ts-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
#timesheet_searchbox .k-autocomplete {
    width: 356px;
}

#btn_menuAdd,
.ts-btn.ts-btn-icon {
    background-color: #337ab7 !important;
    color: #ffffff !important;
    border: none;
}

#btn_menuAdd:hover,
.ts-btn.ts-btn-icon:hover {
    background-color: #2a6496 !important;
}

#btn_menuAdd:disabled,
.ts-btn.ts-btn-icon:disabled {
    background-color: #337ab7 !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}


.ts-table th.ts-col-special,
.ts-table td.ts-col-special {
    background: #bfffc57d;
}

.ts-table thead th.ts-col-special {
    background: #bfffc57d !important;
    color: #92400E;
}

.ts-table tfoot td.ts-col-special {
    background: #bfffc57d !important;
}

.modern-popup-wrapper {
    background: #fff;  
    border-radius: 12px;
    max-width: 650px;
    margin: auto;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon-bg {
    background: #eef4ff;
    padding: 8px;
    border-radius: 8px;
}

.header-left legend {
    border: none;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a2b4b;
}

.close-popup {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
}

.stepper-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.step {
    font-size: 12px;
    color: #99a;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .step.active {
        color: #337ab7;
        font-weight: 600;
    }

.circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f0f2f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.step.active .circle {
    background: #0046af;
    color: #fff;
}

.line {
    height: 1px;
    background: #e0e4e9;
    flex-grow: 1;
    margin: 0 15px;
}


.form-section {
    margin-bottom: 25px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-circle {
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.period-controls {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modern-label {
    font-size: 12px;
    font-weight: 700;
    color: #444;
}

.modern-input {
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 10px 35px 10px 10px;
    background: #fff;
    min-width: 120px;
    outline: none;
}

.full-width {
    width: 100%;
}

.info-card {
    background: #f4f8ff;
    border-radius: 10px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

.info-icon {
    font-size: 24px;
}

.info-text p {
    margin: 0;
    font-size: 11px;
    color: #667;
}

.info-text strong {
    font-size: 14px;
    color: #1a2b4b;
}

.type-cards-container {
    display: flex;
    gap: 15px;
}

.type-card {
    flex: 1;
    border: 1px solid #e0e4e9;
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.1s ease, background-color 0.1s ease;
}

    .type-card.active {
        border: 2px solid #337ab7;
        background: #f9fbff;
    }

    .type-card input[type="radio"] {
        position: absolute;
        top: 18px;
        left: 15px;
    }

.card-body {
    margin-left: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-txt strong {
    font-size: 13px;
    display: block;
}

.card-txt p {
    font-size: 11px;
    color: #778;
    margin: 4px 0 0;
}

.card-icon-small {
    background: #f0f4ff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.popup-footer button{

}

#lblAlertMessge {
    color: red;
    font-size: 13px;
    display: block;
    text-align: center;
    margin-top: 10px;
}

.step.active,
.step.completed {
    color: #337ab7 !important;
    font-weight: 600;
}

    .step.active .circle,
    .step.completed .circle {
        background: #337ab7 !important;
        color: #fff !important;
    }

ts-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.ts-table .col-day {
    min-width: 38px; /* sets a floor so days don't get too squished */
    white-space: nowrap;
} 



/*timesheet grid css*/


:root {
    --brand-blue: #1a56db;
    --brand-blue-lt: #e8f0fe;
    --accent-green: #0e9f6e;
    --accent-red: #e02424;
    --text-primary: #111928;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --surface: #ffffff;
    --row-hover: #f5f8ff;
    --rejected-bg: rgba(224,36,36,.07);
    --radius-sm: 6px;
    --radius-md: 12px;
}

/* ── Wrapper ── */
.ts-grid-wrapper {
    width: 100% !important;
    font-family: inherit;
}

#Grd_timeSheet {
    width: 100% !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 6px 20px rgba(0,0,0,.05) !important;
    font-family: inherit !important;
    background: var(--surface) !important;
}

    #Grd_timeSheet .k-grid-toolbar {
        background: var(--surface) !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 12px 18px !important;
    }

        #Grd_timeSheet .k-grid-toolbar .k-button {
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            color: var(--text-primary) !important;
            border-radius: var(--radius-sm) !important;
            font-family: inherit !important;
            font-weight: 600 !important;
            font-size: 13px !important;
            padding: 6px 14px !important;
            box-shadow: none !important;
        }

            #Grd_timeSheet .k-grid-toolbar .k-button:hover {
                background: var(--brand-blue-lt) !important;
                color: var(--brand-blue) !important;
                border-color: var(--brand-blue) !important;
            }

    #Grd_timeSheet .k-grid-header {
        padding-right: 0 !important;
        background: #5bc0de1c !important;
        border-bottom: 2px solid var(--border) !important;
    }

        #Grd_timeSheet .k-grid-header th.k-header {
            background: #EFF6FF !important;
            color: var(--text-primary) !important;
            font-weight: 700 !important;
            font-size: 13px !important;
            padding: 14px 16px !important;
            border-right: none !important;
            border-bottom: none !important;
            white-space: nowrap;
            text-align: left !important;
        }

        #Grd_timeSheet .k-grid-header th .k-icon,
        #Grd_timeSheet .k-grid-header th .k-i-sort-asc-sm,
        #Grd_timeSheet .k-grid-header th .k-i-sort-desc-sm {
            display: none !important;
        }

        #Grd_timeSheet .k-grid-header th.k-header:not(.k-sort-asc):not(.k-sort-desc) .k-link[href]::after {
            content: " ⇅";
            font-size: 11px;
            color: var(--text-muted);
            opacity: .6;
            margin-left: 4px;
        }

        #Grd_timeSheet .k-grid-header th.k-sort-asc .k-link::after {
            content: " ↑" !important;
            color: var(--brand-blue) !important;
            opacity: 1 !important;
        }

        #Grd_timeSheet .k-grid-header th.k-sort-desc .k-link::after {
            content: " ↓" !important;
            color: var(--brand-blue) !important;
            opacity: 1 !important;
        }

        #Grd_timeSheet .k-grid-header table,
        #Grd_timeSheet .k-grid-content table {
            table-layout: fixed !important;
            width: 100% !important;
        }

    #Grd_timeSheet .k-grid-content {
        background: var(--surface) !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

        #Grd_timeSheet .k-grid-content tr {
            border-bottom: 1px solid var(--border) !important;
            transition: background .12s;
        }

            #Grd_timeSheet .k-grid-content tr:last-child {
                border-bottom: none !important;
            }

            #Grd_timeSheet .k-grid-content tr.k-alt {
                background: var(--surface) !important;
            }

            #Grd_timeSheet .k-grid-content tr:hover td {
                background: var(--row-hover) !important;
            }

        #Grd_timeSheet .k-grid-content td,
        .k-grid td {
            padding: 14px 16px !important;
            font-size: 13.5px !important;
            color: var(--text-primary) !important;
            border: none !important;
            vertical-align: middle !important;
            font-family: inherit !important;
            text-align: left !important;
        }

.k-grid th {
    border: none !important;
}

#Grd_timeSheet .k-grid-content tr td:first-child {
    color: var(--brand-blue) !important;
    font-weight: 600 !important;
}

#Grd_timeSheet tr.rejectedBgColor td {
    background: var(--rejected-bg) !important;
}

#Grd_timeSheet tr.rejectedBgColor:hover td {
    background: var(--row-hover) !important;
}

#Grd_timeSheet tr.approveBgColor:hover td {
    background: var(--row-hover) !important;
}

.ts-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    border-radius: 4px;
}

.ts-badge-approved {
    background: #F0FDF4;
    color: #166534;
}

.ts-badge-submitted {
    background: #FFF7ED;
    color: #92400E;
}

.ts-badge-rejected {
    background: #fef2f2;
    color: #b91c1c;
}

.ts-badge-pending {
    background: #FFF1F2;
    color: #9F1239;
}

.ts-grid-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: normal;
    font-family: inherit;
    cursor: pointer;
    border: none;
    text-decoration: none !important;
    transition: opacity .15s;
    vertical-align: middle;
    line-height: 1.3;
}

    .ts-grid-btn:hover {
        opacity: .88;
    }

.ts-btn-view {
    color: #fff !important;
    background: #5bc0de;
}

    .ts-btn-view:hover {
        background: #31b0d5;
    }

.ts-btn-approve {
    background: #0e9f6e;
    color: #fff !important;
}

.ts-btn-reject {
    background: #e02424;
    color: #fff !important;
}

.ts-btn-email {
    background: #5bc0de;
    color: #fff !important;
    border: 1px solid #46b8da;
}

    .ts-btn-email:hover {
        background: #31b0d5;
    }

    .ts-btn-email.sent {
        background: #fffbeb;
        color: #92400e !important;
        border-color: #fbbf24;
    }

.ts-view-group {
    display: inline-flex;
    border-radius: var(--radius-sm);
    border: 1.5px solid #46b8da;
    overflow: hidden;
    vertical-align: middle;
}

    .ts-view-group .ts-btn-view {
        border-radius: 0;
        padding: 4px 10px;
    }

.ts-kebab-wrap {
    position: relative;
    display: inline-block;
}

.ts-kebab-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s;
    line-height: 1;
}

    .ts-kebab-btn:hover {
        background: var(--brand-blue-lt);
        border-color: var(--brand-blue);
        color: var(--brand-blue);
    }

.ts-kebab-menu {
    display: none;
    position: fixed;
    z-index: 99999;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    min-width: 165px;
    padding: 6px 0;
    font-family: inherit;
}

    .ts-kebab-menu.open {
        display: block;
    }

    .ts-kebab-menu a,
    .ts-kebab-menu button {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 9px 16px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: background .1s;
        font-family: inherit;
        box-sizing: border-box;
    }

        .ts-kebab-menu a:hover,
        .ts-kebab-menu button:hover {
            background: var(--brand-blue-lt);
            color: var(--brand-blue);
        }

.ts-kebab-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

#Grd_timeSheet .k-pager-wrap {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    padding: 12px 20px !important;
    font-family: inherit;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
}

    #Grd_timeSheet .k-pager-wrap .k-link {
        border-radius: var(--radius-sm) !important;
        border: 1px solid var(--border) !important;
        background: var(--surface) !important;
        color: var(--text-primary) !important;
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        text-decoration: none !important;
        transition: background .12s;
    }

        #Grd_timeSheet .k-pager-wrap .k-link:hover {
            background: var(--brand-blue-lt) !important;
            border-color: var(--brand-blue) !important;
            color: var(--brand-blue) !important;
        }

    #Grd_timeSheet .k-pager-wrap .k-state-selected {
        background: #3c7ab7 !important;
        color: #fff !important;
        border-color: #3c7ab7 !important;
        border-radius: 4px !important;
    }

#Grd_timeSheet .k-pager-numbers {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

    #Grd_timeSheet .k-pager-numbers .k-link,
    #Grd_timeSheet .k-pager-numbers .k-state-selected {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: var(--radius-sm) !important;
        border: 1px solid var(--border) !important;
        font-size: 13px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #Grd_timeSheet .k-pager-numbers li {
        display: inline-flex !important;
        align-items: center !important;
    }

    #Grd_timeSheet .k-pager-numbers .k-current-page {
        display: none !important;
    }

#Grd_timeSheet .k-pager-nav {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

    #Grd_timeSheet .k-pager-nav:hover {
        background: var(--brand-blue-lt) !important;
        border-color: var(--brand-blue) !important;
        color: var(--brand-blue) !important;
    }

    #Grd_timeSheet .k-pager-nav.k-state-disabled {
        opacity: 0.4 !important;
        pointer-events: none !important;
    }

#Grd_timeSheet .k-pager-info {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    margin-left: auto !important;
}

#Grd_timeSheet .k-pager-sizes .k-dropdown {
    border-radius: 8px !important;
    border: 1.5px solid #d1d5db !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

    #Grd_timeSheet .k-pager-sizes .k-dropdown .k-dropdown-wrap {
        border-radius: 8px !important;
        border: none !important;
        background: #fff !important;
        display: flex !important;
        align-items: center !important;
    }

    #Grd_timeSheet .k-pager-sizes .k-dropdown .k-input {
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #111928 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 4px !important;
        height: 32px !important;
        line-height: 32px !important;
    }

    #Grd_timeSheet .k-pager-sizes .k-dropdown .k-select {
        background: transparent !important;
        border: none !important;
        width: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        #Grd_timeSheet .k-pager-sizes .k-dropdown .k-select .k-icon {
            display: none !important;
        }

        #Grd_timeSheet .k-pager-sizes .k-dropdown .k-select::after {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-right: 2px solid #6b7280;
            border-bottom: 2px solid #6b7280;
            transform: rotate(45deg) translateY(-2px);
            border-radius: 1px;
        }

    #Grd_timeSheet .k-pager-sizes .k-dropdown:hover {
        border-color: #1a56db !important;
    }

.k-widget.k-tooltip {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
}

.k-state-selected,
#Grd_timeSheet .k-state-selected td {
    background: var(--brand-blue-lt) !important;
    color: var(--text-primary) !important;
    border-color: var(--brand-blue) !important;
}

.ts-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 32px;
    gap: 16px;
}

    .ts-illustration p {
        color: var(--text-muted);
        font-size: 14px;
        font-family: inherit;
        margin: 0;
        font-weight: 500;
    }




/*    timesheet page css*/

.k-window div.k-window-content {
    overflow: hidden;
}

:root {
    --ctrl-h: 34px;
    --ctrl-radius: 8px;
    --ctrl-border: 1px solid #d1d5db;
    --ctrl-bg: #ffffff;
    --ctrl-font-size: 13px;
    --ctrl-font-family: inherit;
    --ctrl-color: #111928;
    --ctrl-placeholder: #9ca3af;
    --ctrl-focus-border: #1a56db;
    --ctrl-focus-shadow: 0 0 0 3px rgba(26,86,219,.08);
    --ctrl-arrow-bg: #f9fafb;
    --ctrl-arrow-w: 34px;
    --btn-bg: #3c7ab7;
    --btn-hover-bg: #1748b5;
}

.ts-filter-bar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: 10px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .ts-filter-bar > div {
        height: var(--ctrl-h);
        display: flex;
        align-items: center;
    }

.ts-search-wrap {
    position: relative;
    width: 296px;
    height: var(--ctrl-h) !important;
    flex-shrink: 0;
}

    .ts-search-wrap .ts-search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ctrl-placeholder);
        font-size: 13px;
        pointer-events: none;
        z-index: 1;
    }

    .ts-search-wrap input.form-control {
        width: 100% !important;
        height: var(--ctrl-h) !important;
        padding: 0 30px 0 32px !important;
        border: var(--ctrl-border) !important;
        border-radius: var(--ctrl-radius) !important;
        font-size: var(--ctrl-font-size) !important;
        font-family: var(--ctrl-font-family) !important;
        color: var(--ctrl-color) !important;
        background: var(--ctrl-bg) !important;
        box-shadow: none !important;
        line-height: var(--ctrl-h) !important;
        box-sizing: border-box !important;
    }

        .ts-search-wrap input.form-control:focus {
            border-color: var(--ctrl-focus-border) !important;
            box-shadow: var(--ctrl-focus-shadow) !important;
            outline: none !important;
        }

        .ts-search-wrap input.form-control::placeholder {
            color: var(--ctrl-placeholder) !important;
        }

    .ts-search-wrap .form-control-clear {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--ctrl-placeholder);
        z-index: 1;
    }

.ts-filter-bar .k-datepicker {
    width: 100% !important;
    height: var(--ctrl-h) !important;
    border: var(--ctrl-border) !important;
    border-radius: var(--ctrl-radius) !important;
    background: var(--ctrl-bg) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

    .ts-filter-bar .k-datepicker .k-picker-wrap,
    .ts-filter-bar .k-datepicker .k-dropdown-wrap {
        height: 100% !important;
        border: none !important;
        border-radius: var(--ctrl-radius) !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .ts-filter-bar .k-datepicker .k-input {
        flex: 1 !important;
        height: 100% !important;
        padding: 0 8px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: var(--ctrl-font-size) !important;
        font-family: var(--ctrl-font-family) !important;
        color: var(--ctrl-color) !important;
        line-height: var(--ctrl-h) !important;
    }

    .ts-filter-bar .k-datepicker .k-select {
        flex-shrink: 0 !important;
        width: var(--ctrl-arrow-w) !important;
        height: 100% !important;
        border: none !important;
        border-left: var(--ctrl-border) !important;
        border-radius: 0 var(--ctrl-radius) var(--ctrl-radius) 0 !important;
        background: var(--ctrl-arrow-bg) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ts-filter-bar .k-datepicker:focus-within {
        border-color: var(--ctrl-focus-border) !important;
        box-shadow: var(--ctrl-focus-shadow) !important;
    }

.ts-filter-bar .k-dropdown {
    width: 100% !important;
    height: var(--ctrl-h) !important;
    border: var(--ctrl-border) !important;
    border-radius: var(--ctrl-radius) !important;
    background: var(--ctrl-bg) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

    .ts-filter-bar .k-dropdown .k-dropdown-wrap {
        height: 100% !important;
        border: none !important;
        border-radius: var(--ctrl-radius) !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .ts-filter-bar .k-dropdown .k-input {
        flex: 1 !important;
        height: 100% !important;
        padding: 0 8px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: var(--ctrl-font-size) !important;
        font-family: var(--ctrl-font-family) !important;
        color: var(--ctrl-color) !important;
        line-height: var(--ctrl-h) !important;
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    .ts-filter-bar .k-dropdown .k-select {
        flex-shrink: 0 !important;
        width: var(--ctrl-arrow-w) !important;
        height: 100% !important;
        border: none !important;
        border-left: var(--ctrl-border) !important;
        border-radius: 0 var(--ctrl-radius) var(--ctrl-radius) 0 !important;
        background: var(--ctrl-arrow-bg) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ts-filter-bar .k-dropdown:focus-within {
        border-color: var(--ctrl-focus-border) !important;
        box-shadow: var(--ctrl-focus-shadow) !important;
    }

    .ts-filter-bar .k-dropdown .k-state-disabled,
    .ts-filter-bar .k-dropdown-wrap.k-state-disabled {
        opacity: .55;
        pointer-events: none;
    }

.ts-filter-bar .k-multiselect {
    width: 100% !important;
    height: var(--ctrl-h) !important;
    border: var(--ctrl-border) !important;
    border-radius: var(--ctrl-radius) !important;
    background: var(--ctrl-bg) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

    .ts-filter-bar .k-multiselect .k-multiselect-wrap {
        height: 100% !important;
        min-height: unset !important;
        border: none !important;
        border-radius: var(--ctrl-radius) !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        flex-wrap: nowrap !important;
    }

        .ts-filter-bar .k-multiselect .k-multiselect-wrap .k-input {
            height: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            font-size: var(--ctrl-font-size) !important;
            font-family: var(--ctrl-font-family) !important;
            color: var(--ctrl-color) !important;
            line-height: var(--ctrl-h) !important;
            flex: 1 !important;
            min-width: 80px !important;
        }

#ddlStatus .k-multiselect-wrap .k-button {
    display: none !important;
}

.ts-filter-bar .k-multiselect:focus-within {
    border-color: var(--ctrl-focus-border) !important;
    box-shadow: var(--ctrl-focus-shadow) !important;
}


.ts-btn-search,
.ts-btn-reset,
.ts-btn-add,
.ts-export-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: var(--ctrl-h) !important;
    padding: 0 16px !important;
    border-radius: var(--ctrl-radius) !important;
    font-size: var(--ctrl-font-size) !important;
    font-family: var(--ctrl-font-family) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: 1px solid var(--btn-bg) !important;
    background: var(--btn-bg) !important;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .18s, border-color .18s !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.ts-inactive-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ctrl-h);
    font-size: var(--ctrl-font-size);
    font-family: var(--ctrl-font-family);
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
}

input[type="radio"],
input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}

.ts-filter-bar .ctrl-search {
    width: 260px;
    flex-shrink: 0;
}

.ts-filter-bar .ctrl-date {
    width: 160px;
    flex-shrink: 0;
}

.ts-filter-bar .ctrl-status {
    width: 155px;
    flex-shrink: 0;
}

.ts-filter-bar .ctrl-bunit {
    width: 175px;
    flex-shrink: 0;
}

.ts-filter-bar .ctrl-user {
    width: 160px;
    flex-shrink: 0;
}

.ts-filter-bar .ctrl-bulk {
    width: 200px;
    flex-shrink: 0;
}
.delete-confirmation-popup {
    text-align: center;
    padding: 18px 15px 15px;
    max-width: 340px;
    margin: 0 auto;
}

    .delete-confirmation-popup .delete-icon {
        width: 55px;
        height: 55px;
        background: #fdeceb;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
    }

        .delete-confirmation-popup .delete-icon i {
            font-size: 24px;
            color: #f05b4f;
        }

    .delete-confirmation-popup .title {
        font-size: 20px;
        font-weight: 600;
        color: #2f3a4c;
        margin-bottom: 12px;
    }

    .delete-confirmation-popup .confirmationBoxMsg {
        font-size: 14px;
        color: #7a7a7a;
        margin-bottom: 20px;
        border-top: 1px solid #eee;
        padding-top: 15px;
        line-height: 1.5;
    }

    .delete-confirmation-popup .btn-area {
        display: flex;
        justify-content: center;
        gap: 10px;
    }
.btn-save-Timesheet {
    background: #5bc0de;
    border-radius: 6px;
    padding: 4px 17px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    border: 1px solid transparent;
}

    .btn-save-Timesheet:hover {
        color: #fff;
        background-color: #269abc;
        border-color: #1b6d85;
    }

.btn-clear-timesheet{
    background: #fff;
    border: 1px solid black;
    border-radius: 6px;
    padding: 3px 17px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.btn-clear-timesheet:hover {
    background: #f5f5f5;
}


/*Add Line Page Changes*/

#atsOuter {
    display: flex;
    gap: 0;
    font-family: inherit;
    font-size: 13px;
    color: #111827;
    min-height: 420px;
}

#atsLeft {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-right: 16px;
}

#atsSearchBar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

    #atsSearchBar input[type="text"] {
        flex: 1;
        height: 36px;
        padding: 0 12px 0 36px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 13px;
        color: #111827;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 11px center;
        outline: none;
        transition: border-color .15s, box-shadow .15s;
    }

        #atsSearchBar input[type="text"]:focus {
            border-color: #337ab7;
            box-shadow: 0 0 0 3px rgba(26,86,219,.09);
        }

        #atsSearchBar input[type="text"]::placeholder {
            color: #9ca3af;
        }

    #atsSearchBar button {
        height: 36px;
        padding: 0 18px;
        background: #337ab7;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s;
    }

        #atsSearchBar button:hover {
            color:white;
            background:#286090;
            border-color:#204d74;
        }

#divProjectList .k-grid {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-family: inherit !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

#divProjectList .k-grid-header {
    padding-right: 0 !important;
}

    #divProjectList .k-grid-header table,
    #divProjectList .k-grid-content table {
        border-collapse: collapse !important;
        width: 100% !important;
    }

#divProjectList .k-grid th {
    background: #EFF6FF !important;
    color: #333 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border-color: #dbeafe !important;
    border-bottom: 2px solid #dbeafe !important;
    padding: 9px 14px !important;
}

    #divProjectList .k-grid th.k-hierarchy-cell {
        background: #EFF6FF !important;
        border-color: #dbeafe !important;
        width: 34px !important;
    }

#divProjectList .k-grid td {
    border-color: #e5e7eb !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 9px 14px !important;
    vertical-align: middle !important;
    color: #111827 !important;
    font-size: 13px !important;
}

    #divProjectList .k-grid td.k-hierarchy-cell {
        width: 34px !important;
        padding: 0 0 0 10px !important;
        text-align: center !important;
    }

#divProjectList .k-grid .k-icon.k-plus,
#divProjectList .k-grid .k-icon.k-minus {
    color: #337ab7 !important;
    font-size: 14px !important;
}

#divProjectList .k-grid tr.k-master-row:hover td,
#divProjectList .k-grid tr:hover td {
    background: #f5f7ff !important;
}

#divProjectList .k-grid tr.k-state-selected td {
    background: #dbeafe !important;
    color: #111827 !important;
}

#divProjectList .k-grid tr.k-state-selected:hover td {
    background: #bfdbfe !important;
}

#divProjectList .k-grid tr.k-alt td {
    background: #fafafa !important;
}

#divProjectList .k-grid tr.k-alt:hover td {
    background: #f5f7ff !important;
}

#divProjectList .k-grid .k-i-sort-asc-sm,
#divProjectList .k-grid .k-i-sort-desc-sm {
    color: #337ab7 !important;
}

#divProjectList .k-grid tr {
    cursor: pointer;
}

#divProjectList > div.k-grid > .k-grid-content {
    overflow-y: auto !important;
}

    #divProjectList > div.k-grid > .k-grid-content::-webkit-scrollbar {
        width: 5px;
    }

    #divProjectList > div.k-grid > .k-grid-content::-webkit-scrollbar-track {
        background: #f9fafb;
    }

    #divProjectList > div.k-grid > .k-grid-content::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 4px;
    }

        #divProjectList > div.k-grid > .k-grid-content::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

#divProjectList .k-grid-toolbar {
    display: none !important;
}

#divProjectList .k-pager-wrap {
    display: none !important;
}

#divProjectList .k-grid th {
    background: #EFF6FF !important;
    color: #333 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border-color: #dbeafe !important;
    border-bottom: 2px solid #dbeafe !important;
    padding: 9px 14px !important;
}

    #divProjectList .k-grid th.k-hierarchy-cell {
        background: #EFF6FF !important;
        border-color: #dbeafe !important;
        width: 34px !important;
    }

#divProjectList .k-detail-cell .k-grid {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 2px solid #bfdbfe !important;
    border-bottom: none !important;
    width: 100% !important;
}

#divProjectList .k-detail-cell .k-grid-header,
#divProjectList .k-detail-cell .k-grid-header-wrap {
    width: 100% !important;
    border: none !important;
}

    #divProjectList .k-detail-cell .k-grid-header table,
    #divProjectList .k-detail-cell .k-grid-content table {
        width: 100% !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }



#divProjectList .k-detail-cell .k-grid-content {
    overflow: visible !important;
}

#divProjectList .k-detail-cell .k-grid tr:last-child td {
    border-bottom: none !important;
}

#divProjectList .k-detail-cell .k-grid tr {
    cursor: default !important;
}

#divProjectList .k-detail-cell .k-grid th:last-child,
#divProjectList .k-detail-cell .k-grid td:last-child {
    width: 60px !important;
    text-align: center !important;
}

#divProjectList .k-detail-cell .k-grid-content input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 17px !important;
    height: 17px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 50% !important;
    background: #fff !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: middle !important;
    position: relative !important;
    transition: border-color .15s, background .15s !important;
}

    #divProjectList .k-detail-cell .k-grid-content input[type="checkbox"]:hover {
        border-color: #337ab7 !important;
    }

    #divProjectList .k-detail-cell .k-grid-content input[type="checkbox"]:checked {
        border-color: #337ab7 !important;
        background: #337ab7 !important;
    }

        #divProjectList .k-detail-cell .k-grid-content input[type="checkbox"]:checked::after {
            content: '' !important;
            display: block !important;
            width: 6px !important;
            height: 6px !important;
            border-radius: 50% !important;
            background: #fff !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
        }

#divProjectList .k-detail-cell .k-grid-header input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 15px !important;
    height: 15px !important;
    accent-color: #337ab7 !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: middle !important;
    border: none !important;
    background: none !important;
    border-radius: 3px !important;
}

#atsAddBtnWrap {
    text-align: center;
    margin-top: 14px;
}

.ats-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 26px;
    background: #337ab7;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none !important;
}

    .ats-btn-add:hover {
        color: white;
        background: #286090;
        border-color: #204d74;
    }

#atsRight {
    width: 320px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ats-right-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.ats-right-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b7280;
    margin-bottom: 2px;
}

.ats-right-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ats-right-title svg {
        width: 14px;
        height: 14px;
        stroke: #337ab7;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

#atsSelEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 8px;
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
    padding: 24px 16px;
}

    #atsSelEmpty svg {
        width: 30px;
        height: 30px;
        stroke: #d1d5db;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

#atsSelList {
    flex: 1;
    overflow-y: auto;
    max-height: 260px;
    padding: 0;
}

    #atsSelList::-webkit-scrollbar {
        width: 4px;
    }

    #atsSelList::-webkit-scrollbar-track {
        background: #f9fafb;
    }

    #atsSelList::-webkit-scrollbar-thumb {
        background: #c7d2fe;
        border-radius: 4px;
    }

        #atsSelList::-webkit-scrollbar-thumb:hover {
            background: #a5b4fc;
        }

.ats-sel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background .12s;
    cursor: default;
}

    .ats-sel-row:last-child {
        border-bottom: none;
    }

    .ats-sel-row:hover {
        background: #f5f8ff;
    }

.ats-sel-mid {
    flex: 1;
    min-width: 0;
}

.ats-sel-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ats-sel-ref {
    font-size: 11px;
    color: #6b7280;
    margin-top: 1px;
}

.ats-sel-proj-tag {
    font-size: 10px;
    font-weight: 600;
    color: #337ab7;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 5px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

#atsSelCount {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

    #atsSelCount strong {
        color: #337ab7;
        font-weight: 700;
    }

#divProjectList .k-detail-row > td.k-detail-cell {
    padding: 10px 16px 12px 16px !important;
    background: #f0f4ff !important;
    border-bottom: 2px solid #dbeafe !important;
    border-top: none !important;
}

#divProjectList .k-detail-cell .k-grid {
    border: 1px solid #dbeafe !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    width: 100% !important;
    background: #fff !important;
}

#divProjectList .k-detail-cell .k-grid-header {
    border-radius: 10px 10px 0 0 !important;
    overflow: hidden !important;
    border-bottom: 2px solid #dbeafe !important;
    padding-right: 0 !important;
}

#divProjectList .k-detail-cell .k-grid-header-wrap {
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
}

#divProjectList .k-detail-cell .k-grid-content {
    overflow: visible !important;
    border-radius: 0 0 10px 10px !important;
}

#divProjectList .k-detail-cell .k-grid tr:last-child td:first-child {
    border-bottom-left-radius: 10px !important;
}

#divProjectList .k-detail-cell .k-grid tr:last-child td:last-child {
    border-bottom-right-radius: 10px !important;
}

#divProjectList .k-detail-cell .k-grid tr:last-child td {
    border-bottom: none !important;
}

.ts-nav-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.k-widget.k-window {
    position: fixed !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
}

.k-window-content {
    overflow-y: auto !important;
    max-height: calc(100vh - 140px) !important;
}

.k-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}