/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Set padding to keep content from hitting the edges */
/*.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
/*.dl-horizontal dt {
    white-space: normal;
}*/

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

/*--- font-face
------------------------- static ------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Thin.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Thin.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-ExtraLight.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-ExtraLight.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Light.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Light.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Regular.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Regular.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Medium.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Medium.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-SemiBold.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-SemiBold.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Bold.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Bold.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-ExtraBold.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-ExtraBold.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Black.ttf") format("woff2");
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/Inter/static/Inter-Black.ttf") format("woff2");
}

/* ----------------------- variable ----------------------- */

@font-face {
    font-family: 'Inter var';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Inter/Inter-roman.var.woff2') format('woff2');
    font-named-instance: 'Regular';
}

@font-face {
    font-family: 'Inter var';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Inter/Inter-roman.var.woff2') format('woff2');
    font-named-instance: 'Italic';
}

:root {
    --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
    --bs-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
}

.card {
    --tblr-card-spacer-x: 1rem !important;
}

body {
    font-feature-settings: "cv03", "cv04", "cv11" !important;
    /*zoom: 1.15;*/
    -moz-transform: scale(3);
    -moz-transform-origin: 0 0;
    font-size: 13.8px !important;
}

.page-body {
    margin: 15px 10px 15px 15px !important;
}

.card-body {
    background-color: transparent;
    padding: 13px 13px !important;
}

.card-header, .card-footer {
    padding: 7px 13px !important;
}

.k-toolbar {
    background-color: white !important;
}

.k-grid, .k-grid-container {
    border-radius: 6px !important;
}

.k-toolbar {
    border-radius: 6px 6px 0px 0px !important;
}

.k-table-th {
    font-weight: 500 !important;
}

.k-edit-buttons {
    margin: 0px -7px -12px !important;
    float: right !important;
}

.dropdown-menu-column {
    font-size: 13px;
}

.card-title {
    font-size: inherit !important;
}

.field-validation-error {
    color: orangered;
}

input::placeholder {
    font-size: 12.8px !important;
}

.readOnly {
    color: #5e6b7f !important;
    background-color: #f3f3f3 !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

    .readOnly option, .readOnly optgroup {
        display: none;
    }

@media print {
    #main-card {
        border: none !important;
    }

    #main-page-body {
        margin: 0px !important;
    }
}

.stc {
    position: -webkit-sticky;
    position: sticky;
    background-color: #ffe8d2 !important;
    z-index: 999;
    box-shadow: 0px 0px 0px 0.03px inset !important;
}

.table tbody td {
    font-size: .8rem;
}

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

.btn-group-sm > .btn, .btn-sm {
    --tblr-btn-padding-y: 0.2rem !important;
    --tblr-btn-padding-x: 0.6rem !important;
    --tblr-btn-font-size: 0.8rem !important;
    --tblr-btn-border-radius: var(--tblr-border-radius) !important;
    --tblr-btn-icon-size: 1.1rem !important;
}

.form-control-sm, .form-select-sm {
    min-height: calc(1.4285714286em + 0.54rem + calc(var(--tblr-border-width) * 2)) !important;
    padding: .125rem .35rem !important;
    font-size: .75rem !important;
    border-radius: var(--tblr-border-radius) !important;
}

/*.form-select-sm {
    padding-top: .25rem;
    padding-bottom: .25rem;
}
*/
body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

.highlighted {
    background-color: #ff00003b !important;
}
th{
    font-weight:600 !important;
}

/* Tom Select is styled with Bootstrap variables (--bs-*) that Tabler does not define, so its box lost its border and
   its dropdown was see-through. Map them to the Tabler equivalents so it looks like the other form fields, as in the legacy HRMS. */
.ts-wrapper,
.ts-dropdown {
    --bs-body-bg: var(--tblr-bg-forms, var(--tblr-bg-surface, #fff));
    --bs-body-color: var(--tblr-body-color, #1d273b);
    --bs-border-color: var(--tblr-border-color, #dadfe5);
    --bs-border-color-translucent: var(--tblr-border-color-translucent, rgba(4, 32, 69, 0.14));
    --bs-border-width: 1px;
    --bs-border-radius: var(--tblr-border-radius, 4px);
    --bs-border-radius-sm: var(--tblr-border-radius-sm, 2px);
    --bs-border-radius-lg: var(--tblr-border-radius-lg, 6px);
    --bs-secondary-bg: var(--tblr-bg-surface-secondary, #f6f8fb);
    --bs-tertiary-bg: var(--tblr-bg-surface-tertiary, #f6f8fb);
}
.ts-dropdown {
    z-index: 1060;
}
/* Option colours taken from the legacy HRMS dropdown: grey on hover, red for the selected item. */
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    color: #424242;
    background-color: #ececec;
}
.ts-dropdown .option.selected,
.ts-dropdown .option.selected.active,
.ts-dropdown .option.selected:hover {
    color: #fff;
    background-color: #ff6358;
}
.ts-dropdown .option.selected.active,
.ts-dropdown .option.selected:hover {
    background-color: #eb5b51;
}
.ts-wrapper.focus .ts-control {
    border-color: #90b5e2;
    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
}

/* Time list opened by the clock button on time boxes (legacy Kendo look: times every 30 minutes). */
.hrms-time-list {
    position: fixed;
    z-index: 2000;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background-color: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #dadfe5);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.hrms-time-list li {
    padding: 0.35rem 0.75rem;
    color: #424242;
    cursor: pointer;
}
.hrms-time-list li:hover {
    background-color: #ececec;
}
.hrms-time-list li.selected {
    color: #fff;
    background-color: #ff6358;
}
.hrms-time-list li.selected:hover {
    background-color: #eb5b51;
}
.hrms-time-btn {
    background-color: #f0f0f0;
}

/* Compact grid: the look of the plain tables on the approval pages (bordered, small, uppercase headers). */
.hrms-grid-compact.tabulator {
    font-family: inherit;
    font-size: inherit;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    background: transparent;
}
.hrms-grid-compact .tabulator-header {
    background: var(--tblr-bg-surface-tertiary, #f6f8fb);
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    color: var(--tblr-secondary, #667382);
}
.hrms-grid-compact .tabulator-header .tabulator-col {
    background: transparent;
    border-right: 1px solid var(--tblr-border-color, #e6e7e9);
}
.hrms-grid-compact .tabulator-header .tabulator-col .tabulator-col-content {
    padding: .25rem .5rem;
}
.hrms-grid-compact .tabulator-header .tabulator-col .tabulator-col-title {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.hrms-grid-compact .tabulator-row {
    background: transparent;
    min-height: 0;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.hrms-grid-compact .tabulator-row .tabulator-cell {
    padding: .25rem .5rem;
    border-right: 1px solid var(--tblr-border-color, #e6e7e9);
    font-size: inherit;
}
.hrms-grid-compact .tabulator-row:hover {
    background: var(--tblr-table-hover-bg, rgba(0, 0, 0, .04));
}
.hrms-grid-compact .tabulator-row.tabulator-row-even {
    background: transparent;
}