:root {
    --font-lexend: "Lexend", sans-serif;
    --font-nunito: "Nunito", sans-serif;
    --primary-color: 106, 39, 217;
    --secondary-btn-color: 245, 247, 248;
    --warning-color: 239, 148, 0;
    --success-color: 56, 178, 88;
    --info-color: 36, 99, 235;
    --info-color-1: 90, 195, 221;
    --info-color-2: 236, 72, 153;
    --error-color: 236, 78, 44;
    --error-color-1: 254, 86, 17;
    --error-color-2: 253, 106, 95;
    --dark-color: 31, 31, 33;
    --gray-color: 217, 217, 217;
    --gray-color-1: 230, 235, 240;
    --gray-color-2: 134, 134, 134;
    --gray-color-3: 210, 213, 218;
    --gray-color-4: 246, 246, 246;
    --dark-gray-color: 78, 97, 124;
    --dark-gray-color-1: 120, 120, 120;
    --dark-gray-color-2: 52, 64, 84;
    --bg-color: 245, 247, 248;
    --white: 255, 255, 255;
    --black: 0, 0, 0;
    --light-black: 24, 38, 39;
    --font-color: 93, 103, 103;
    --font-color-1: 38, 50, 56;
    --radius: 8px;
    --border-radius: 6px;
    --input-padding: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320))) calc(10px + (16 - 10) * ((100vw - 320px) / (1920 - 320)));
    --btn-padding: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320))) calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
    --sidebar-width: 280px;
    --header-height: 76px;
    --page-body-right-width: calc(340px + (400 - 340) * ((100vw - 1700px) / (1920 - 1700)));
    --responsive-page-body-right-width: 350px;
    --breadcrumb-color: 38, 50, 56;
    --border-color: 234, 236, 240;
    --border-color-1: 210, 208, 208;
    --border-color-2: 231, 231, 231;
    --border-color-3: 189, 189, 189;
    --table-font-color: 195, 53, 22;
    --table-bg-color: 206, 206, 206;
    --table-bg-color-1: 255, 216, 216;
    --table-bg-color-2: 195, 225, 254;
    --status-approved: 29, 193, 15;
    --status-reject: 228, 14, 14;
    --status-eligible: 219, 156, 33;
    --table-head-bg: 195, 225, 254;
    --custom-col-3: 382px;
    --pending-color: var(--warning-color);
    --pending-light-color: 255, 251, 237;
    --approved-bg-color: 236, 254, 242;
    --approved-border-color: 171, 239, 198;
    --reject-color: 234, 78, 44;
    --reject-light-color: 255, 218, 210;
    --registered-color: 79, 156, 249;
    --registered-light-color: 210, 229, 255;
    --badges-info-color: 48, 137, 241;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    position: relative;
    background-color: rgba(var(--bg-color), 1);
    width: 100%;
    height: 100%;
    font-family: var(--font-lexend);
    color: rgba(var(--dark-color), 1)
}

/* Typography css */
h1 {
    line-height: 1.25;
    margin-bottom: 0;
    font-size: calc(20px + 8*(100vw - 320px)/1600)
}

h2 {
    font-size: calc(20px + 6*(100vw - 320px)/1600);
    line-height: 1.25;
    margin-bottom: 0
}

h3 {
    font-size: 22px;
    margin-bottom: 0
}

h4 {
    font-size: 20px;
    margin-bottom: 0
}

h5 {
    font-size: 20px;
    margin-bottom: 0
}

h6 {
    font-size: 16px;
    margin-bottom: 0
}

p {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.36
}

ul {
    margin: 0;
    padding: 0
}

ul li {
    display: inline-block;
    font-size: 14px;
    line-height: 1.36
}

a {
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    line-height: 1.35;
    color: rgba(var(--primary-color), 1)
}

.extend{
    color: rgba(var(--primary-color), 1);
    border: none;
    background: none;
    text-decoration: underline;
    font-size: 13px;
    font-weight: 500;
    padding: 0;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* custom class */
.table-link-text {
    text-decoration: underline;
    background: transparent;
    border: 0;
    padding: 0;
    color: rgba(var(--primary-color), 1)
}

.max-min-w-76 {
    max-width: 76px;
    min-width: 76px;
    width: 76px;
}

.max-min-w-80 {
    max-width: 80px;
    min-width: 80px;
    width: 80px;
}

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

.max-min-w-150 {
    max-width: 220px;
    min-width: 220px;
    width: 220px;
}

.max-min-w-190 {
    max-width: 190px;
    min-width: 190px;
    width: 190px;
}

.max-min-w-346 {
    max-width: 346px;
    min-width: 346px;
    width: 346px;
}

.min-w-unset {
    min-width: unset !important;
}

.max-w-768 {
    max-width: 768px;
}

.max-w-600 {
    max-width: 600px;
}

.max-w-1300 {
    max-width: 1300px;
}

.max-w-800 {
    max-width: 800px;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-8 {
    grid-column: span 8 / span 8;
}
.ml-auto{
    margin-left: auto;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.line-clamp-3 * {
    display: contents;
}

.custom-modal-width {
    --bs-modal-width: 1640px;
    padding: 8px;
}

.custom-modal-width-1 {
    --bs-modal-width: 1292px;
    padding: 8px;
}

.custom-col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-xxl-3 {
    flex: 0 0 auto;
    width: 25%
}

.custom-col-3 {
    width: var(--custom-col-3)
}

.custom-col-9 {
    width: calc(100% - (var(--custom-col-3)))
}

.page-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: capitalize;
}

.emp-name-div h4 {
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    text-transform: capitalize;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    /* margin-bottom: 16px; */
    cursor: pointer;
}

.back-btn svg {
    width: 20px;
    height: 20px;
}

.p-sticky {
    position: sticky;
    top: 100px;
}

.py-20 {
    padding-block: 20px !important;
}

.py-12 {
    padding-block: 12px;
}

.px-24 {
    padding-inline: 24px;
}
.p-24 {
    padding: 24px !important;
}

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

.min-w-110 {
    min-width: 110px;
}

.min-w-120 {
    min-width: 120px;
}

.min-w-320 {
    min-width: 320px;
}

.min-w-200 {
    min-width: 200px;
}

/* text editor */
.lmg-text-editor {
    border-radius: var(--border-radius);
    border: 1px solid rgba(var(--gray-color), 1);
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: rgba(var(--primary-color), 1);
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: rgba(var(--primary-color), 1);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: rgba(var(--primary-color), 1);
}

.ql-snow.ql-toolbar .ql-formats {
    margin-right: 4px;
}

.ql-snow .ql-picker-label {
    padding-left: 2px;
}

.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
    width: 25px;
    padding: 3px;
}

.lmg-text-editor .ql-toolbar {
    border: 0;
    border-bottom: 1px solid rgba(var(--gray-color), 1);
}

.lmg-text-editor .editor-textarea {
    border: 0;
    border-radius: 0;
}

.lmg-text-editor .editor-textarea {
    font-family: var(--font-nunito);
    font-size: calc(14px + 2*(100vw - 320px) / 1600);
    line-height: 1.35;
    font-weight: 400;
    color: rgba(var(--dark-color), 1);
    min-height: 131px;
    max-height: 500px;
    overflow-y: auto;
}

/* file upload */
.form-radio-row {
    display: flex;
    gap: 10px;
}

.form-multifile-input {
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: var(--border-radius);
    padding: var(--input-padding);
    display: block;
    cursor: pointer;
    margin-bottom: 0;
}

.form-multifile-input .form-multifile-input-icon {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: var(--border-radius);
    padding: 6px;
    margin: 0 auto;
}

.form-multifile-input .form-multifile-input-icon svg {
    width: 100%;
    height: 100%;
}

.form-multifile-input p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(var(--primary-color), 1);
    margin-bottom: 0;
    margin-top: 10px;
    text-align: center;
    text-transform: none;
}

.form-multifile-input p span {
    font-size: 11px;
    font-weight: 400;
    color: rgba(var(--dark-color), 1);
    display: block;
}

.form-multifile-upload-list {
    margin-top: 12px;
}

.form-multifile-upload-list .form-multifile-upload-item {
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: var(--border-radius);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.form-multifile-upload-list .form-multifile-upload-item:last-child {
    margin-bottom: 0;
}


.form-multifile-upload-list .form-multifile-upload-item .form-multifile-upload-file-icon {
    min-width: 30px;
    width: 30px;
    height: 30px;
}

.form-multifile-upload-list.leave-file .form-multifile-upload-item .form-multifile-upload-item-text {
    flex: 1;
    width: calc(100% - 104px);
}

.form-multifile-upload-list .form-multifile-upload-item .form-multifile-upload-item-text {
    flex: 1;
    width: calc(100% - 74px);
}

.form-multifile-upload-list .form-multifile-upload-item .form-multifile-upload-item-text p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.form-multifile-upload-list .form-multifile-upload-item .form-multifile-upload-item-text span {
    font-size: 12px;
    font-weight: 400;
    color: rgba(var(--dark-color), 1);
    display: block;
}

.form-multifile-upload-list .form-multifile-upload-item .form-multifile-upload-success-icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    color: rgba(var(--success-color), 1);
}

.form-multifile-upload-list .form-multifile-upload-item .form-multifile-view-icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    color: rgba(var(--dark-gray-color-1), 1);
}

.form-multifile-upload-list .form-multifile-upload-item .form-multifile-upload-view-btn {
    min-width: 24px;
    width: 24px;
    height: 24px;
    color: rgba(var(--dark-color), 1);
}

.form-multifile-upload-list .form-multifile-upload-item .close-button {
    border: none;
    background-color: unset;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--dark-color), 1);
}

.form-multifile-upload-list .form-multifile-upload-item .close-button svg {
    width: 100%;
    height: 100%;
}

input[type="search"]::-webkit-search-cancel-button {
    width: 18px;
    height: 18px;
    display: block;
    background-image: url('../images/close-icon.svg');
    cursor: pointer;
    appearance: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.form-select-group {
    display: flex;
    flex-direction: column;
}

.form-select-group .error {
    order: 3;
}

#modal_module_doc .file-box {
    padding: var(--input-padding);
}

#modal_module_doc .file-box .file-name h5 {
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    line-height: 1.35;
}

.file-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-nunito);
    padding: 8px 10px;
    border-radius: var(--border-radius);
    width: 100%;
    border: 1px solid rgba(var(--gray-color), 1)
}

.file-box .file-name {
    display: flex;
    align-items: center;
    gap: 12px
}

.file-box .file-name .file-type {
    min-width: calc(24px + 3*(100vw - 320px)/1600);
    width: calc(24px + 3*(100vw - 320px)/1600);
    height: calc(24px + 3*(100vw - 320px)/1600)
}

.file-box .file-name .file-type img,
.file-box .file-name .file-type svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.file-box .file-name h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.15;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    color: rgba(var(--dark-color), 1)
}

.file-box .file-name p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: rgba(var(--dark-gray-color-1), 1)
}

.file-box .file-box-btn-row {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-box .file-box-btn-row .file-box-btn {
    color: rgba(var(--dark-gray-color-1), 1);
    min-width: calc(20px + 4*(100vw - 320px)/1600);
    width: calc(20px + 4*(100vw - 320px)/1600);
    height: calc(20px + 4*(100vw - 320px)/1600);
    margin-bottom: 0;
    cursor: pointer;
}

.file-box .file-box-btn-row .file-box-btn svg {
    width: 100%;
    height: 100%;
}

.file-box .doc-view {
    color: rgba(var(--dark-gray-color), 1);
    width: 20px;
    height: 20px;
    margin-left: auto;
}

.doc-view {
    color: rgba(var(--dark-gray-color), 1);
    width: 20px;
    height: 20px;
    margin-left: auto;
    display: inline-block;
}

.doc-view svg {
    width: 100%;
    height: 100%;
}

.file-box .doc-view svg {
    width: 100%;
    height: 100%;
}

.end-redirect {
    margin-top: 16px;
    font-size: calc(14px + 2*(100vw - 320px) / 1600);
    font-weight: 600;
    line-height: 1.35;
    font-family: var(--font-nunito);
    display: flex;
    width: max-content;
    margin-left: auto;
}

.center-redirect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    font-family: var(--font-nunito)
}

/* Tooltip css */
.tooltip.show {
    opacity: 1;
}

.tooltip>.tooltip-inner {
    background: #6A27D91A;
    max-width: 350px;
    border: 1px solid #6A27D91A;
    border-radius: 5px;
    color: #1F1F1F;
    font-family: var(--font-lexend);
    box-shadow: 0px 7px 18px 0px #1F1F2117;
    padding: 8px 10px;
    backdrop-filter: blur(20px)
}

.bs-tooltip-auto .tooltip-arrow {
    z-index: 9;
}

.top-right-part .top-employe-select {
    max-width: 280px;
    width: 100%;
}

/* Breadcrumb css */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0
}

.breadcrumb .breadcrumb-item {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--gray-color-2), 1);
    text-transform: capitalize
}

.breadcrumb .breadcrumb-item a {
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--gray-color-2), 1);
    text-transform: capitalize
}

.breadcrumb .breadcrumb-item:last-child,
.breadcrumb .breadcrumb-item:last-child a {
    color: rgba(var(--primary-color), 1);
}

.breadcrumb .breadcrumb-item+.breadcrumb-item:before {
    content: "";
    background-image: url("/assets/images/svg/right-arrow.svg");
    background-size: contain;
    width: 14px;
    height: 14px;
    margin-left: -12px;
    margin-top: 1px
}

/* Authentication css */
.auth-main {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center
}

.auth-main .left-content {
    position: relative;
    width: calc(500px + 224*(100vw - 992px)/928);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: calc(20px + 25*(100vw - 320px)/1600)
}

.auth-main .left-content .logo-wrapper {
    margin-bottom: 20px;
    /* height: calc(38px + 5*(100vw - 992px)/928);
    width: auto; */
    aspect-ratio: 180 / 43;
    max-width: 180px;
    width: 100%;
    height: auto;
}

.auth-main .left-content .logo-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.auth-main .left-content .auth-form {
    max-width: 480px;
    margin: auto;
    height: auto;
    width: 100%
}

.auth-main .left-content .auth-form .title {
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1)
}

.auth-main .left-content .auth-form .subtitle {
    margin-bottom: 18px
}

.auth-main .left-content .auth-form .subtitle p {
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    font-weight: 500;
    font-family: var(--font-nunito);
    color: rgba(var(--dark-color), 1)
}

.auth-main .left-content .auth-form .form-field {
    margin-top: 18px
}

.auth-main .left-content .auth-form .btn {
    margin-top: calc(16px + 6*(100vw - 320px)/1600);
    line-height: 1.25;
}

.auth-main .left-content .auth-form .toggle-password-field {
    position: relative
}

.auth-main .left-content .auth-form .toggle-password-field .toggle-password {
    border: none;
    background-color: unset;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(10px + 2*(100vw - 320px)/1600);
    background: rgba(var(--black), 0);
    padding: 0;
    border: 0;
    outline: none
}

.auth-main .left-content .auth-form .toggle-password-field .toggle-password svg {
    width: calc(20px + 4*(100vw - 320px)/1600);
    height: calc(20px + 4*(100vw - 320px)/1600)
}

.auth-main .left-content .auth-form .toggle-password-field .toggle-password .eye {
    display: block
}

.auth-main .left-content .auth-form .toggle-password-field .toggle-password .eye-slash {
    display: none
}

.auth-main .left-content .auth-form .toggle-password-field .toggle-password.hide .eye {
    display: none
}

.auth-main .left-content .auth-form .toggle-password-field .toggle-password.hide .eye-slash {
    display: block
}

.auth-main .left-content .auth-form label {
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    line-height: 1.25;
    font-weight: 500;
    font-family: var(--font-lexend);
    margin-bottom: calc(4px + 4*(100vw - 320px)/1600);
    color: rgba(var(--dark-color), 1);
}

.auth-main .right-content {
    margin: 20px 20px 20px 0;
    width: auto;
    height: calc(100vh - 40px);
    border-radius: 24px;
    border: 1px solid var(--gray-color-1);
    background: url("/assets/images/auth-bg.png"), rgba(var(--white), 1);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    flex: 1;
}

.auth-main .right-content .heading {
    margin-bottom: 59px;
    padding: calc(30px + 22*(100vw - 992px)/928) calc(30px + 44*(100vw - 992px)/928) 0
}

.auth-main .right-content .heading h1 {
    width: 100%;
    max-width: calc(440px + 464*(100vw - 992px)/928);
    margin-bottom: 12px;
    font-size: calc(20px + 8*(100vw - 992px)/928);
    font-weight: 400;
    line-height: 1.43;
    color: rgba(var(--dark-color), 1)
}

.auth-main .right-content .heading p {
    font-size: calc(16px + 4*(100vw - 992px)/928);
    line-height: 1.35;
    font-family: var(--font-nunito);
    font-weight: 400;
    color: rgba(var(--dark-color), 1)
}

.auth-main .right-content .right-image {
    aspect-ratio: 1003/648;
    max-width: 1003px;
    margin-top: auto;
    margin-bottom: 20px;
    padding-left: 36px;
    margin-left: auto
}

/* Button css */
.btn {
    padding: var(--btn-padding);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    width: 100%;
    color: rgba(var(--white), 1);
    border-radius: var(--border-radius);
    box-shadow: none !important;
    border: 1px solid;
    text-transform: capitalize;
    font-family: var(--font-nunito);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease-in-out;
}

.btn:focus,
.btn:focus-visible,
.btn:hover {
    outline: 0 !important;
    filter: brightness(1.1);
}

.btn svg {
    width: 20px;
    height: 20px;
}

.btn.btn-primary {
    background-color: rgba(var(--primary-color), 1);
    border-color: rgba(var(--primary-color), 1)
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:focus-visible .btn.btn-primary:active {
    background-color: rgba(var(--primary-color), 1);
    border-color: rgba(var(--primary-color), 1);
    color: rgba(var(--white), 1);
}

.btn.btn-secondary {
    background-color: rgba(var(--secondary-btn-color), 1);
    border-color: rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:focus-visible .btn.btn-secondary:active {
    background-color: rgba(var(--secondary-btn-color), 1);
    border-color: rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
    filter: brightness(1.05);
}

.btn.btn-success {
    background-color: rgba(var(--success-color), 1);
    border: rgba(var(--success-color), 1)
}

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active {
    background-color: rgba(var(--success-color), 1);
    border: rgba(var(--success-color), 1);
    color: rgba(var(--white), 1);
}

.btn.btn-gray {
    background-color: rgba(var(--bg-color), 1);
    border-color: rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
}

.btn.btn-gray:hover,
.btn.btn-gray:focus {
    background-color: rgba(var(--bg-color), 1);
    border-color: rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
}

.btn.btn-white {
    background-color: rgba(var(--white), 1);
    border-color: rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
}

.btn.btn-error {
    background-color: rgba(var(--error-color), 1);
    border-color: rgba(var(--error-color), 1)
}

.btn.btn-error-outline {
    color: rgba(var(--error-color), 1);
    background-color: rgba(var(--white),1);
    border-color: rgba(var(--error-color), 1)
}

.btn.btn-error-outline:hover,
.btn.btn-error-outline:focus,
.btn.btn-error-outline:focus-visible .btn.btn-error:active {
    background-color: rgba(var(--white),1);
    border-color: rgba(var(--error-color), 1);
    color: rgba(var(--error-color), 1);
}

.btn.btn-error:hover,
.btn.btn-error:focus,
.btn.btn-error:focus-visible .btn.btn-error:active {
    background-color: rgba(var(--error-color), 1);
    border-color: rgba(var(--error-color), 1);
    color: rgba(var(--white), 1);
}

.btn.btn-white:hover,
.btn.btn-white:focus {
    background-color: rgba(var(--white), 1);
    border-color: rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
}

.btn.btn-outline-primary {
    border: 1px solid rgba(var(--primary-color), 1);
    color: rgba(var(--primary-color), 1);
    background-color: rgba(var(--white), 1);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus {
    border: 1px solid rgba(var(--primary-color), 1);
    color: rgba(var(--primary-color), 1);
    background-color: rgba(var(--white), 1);
}

.btn.btn-outline {
    border: 1px solid rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1)
}

.btn.btn-outline:hover,
.btn.btn-outline:focus {
    border: 1px solid rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1)
}

/* Datepicker css */
.datepicker.dropdown-menu {
    border-radius: var(--border-radius);
    min-width: 245px;
    font-family: var(--font-lexend);
    padding: 8px;
}

.datepicker.dropdown-menu th,
.datepicker.dropdown-menu td {
    padding: 6px;
    width: 30px;
    height: 30px;
}

.datepicker.dropdown-menu th.dow {
    color: rgba(var(--dark-color), 0.8)
}

.datepicker.dropdown-menu .datepicker-days .table-condensed,
.datepicker.dropdown-menu .datepicker-months .table-condensed,
.datepicker.dropdown-menu .datepicker-years .table-condensed {
    width: 100%;
}

.datepicker.dropdown-menu thead tr:first-child th,
.datepicker.dropdown-menu tfoot tr th {
    cursor: pointer;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    color: rgba(var(--dark-color));
    line-height: 1.5;
}

.datepicker.dropdown-menu thead tr:first-child th:hover,
.datepicker.dropdown-menu tfoot tr th:hover,
.datepicker.dropdown-menu table tr td.day:hover,
.datepicker.dropdown-menu table tr td.day.focused {
    background-color: rgba(var(--primary-color), 0.1);
}

.datepicker.dropdown-menu thead tr:first-child th.datepicker-switch:hover {
    background-color: transparent;
}

.datepicker.dropdown-menu .datepicker-months .table-condensed tr:first-child th.prev,
.datepicker.dropdown-menu .datepicker-months .table-condensed tr:first-child th.next,
.datepicker.dropdown-menu .datepicker-years .table-condensed tr:first-child th.prev,
.datepicker.dropdown-menu .datepicker-years .table-condensed tr:first-child th.next,
.datepicker.dropdown-menu .datepicker-days .table-condensed thead tr:first-child th.prev,
.datepicker.dropdown-menu .datepicker-days .table-condensed thead tr:first-child th.next {
    font-size: 22px;
    width: 30px;
    line-height: 1;
}

.datepicker.dropdown-menu .datepicker-months .table-condensed tr td span,
.datepicker.dropdown-menu .datepicker-years .table-condensed tr td span {
    height: 45px;
    line-height: 45px;
}

.datepicker.dropdown-menu .datepicker-months .table-condensed tr td span:hover,
.datepicker.dropdown-menu .datepicker-years .table-condensed tr td span:hover {
    background-color: rgba(var(--primary-color), 0.1);
}

.datepicker.dropdown-menu .datepicker-days .table-condensed thead tr {
    vertical-align: middle;
}

.datepicker.dropdown-menu table tr td.active.day,
.datepicker.dropdown-menu table tr td.active.day:hover,
.datepicker.dropdown-menu table tr td .month.active,
.datepicker.dropdown-menu table tr td .month.active:hover,
.datepicker.dropdown-menu table tr td .year.active,
.datepicker.dropdown-menu table tr td .year.active:hover {
    background: rgba(var(--primary-color), 1);
}

.datepicker.dropdown-menu .datepicker-days .table-condensed thead tr th.datepicker-switch {
    line-height: 1;
}

.default-calendar .datepicker {
    width: 100%
}

.datepicker.dropdown-menu {
    z-index: 12;
}

.default-calendar .datepicker .datepicker-days .table-condensed {
    width: 100%
}

.default-calendar .datepicker .datepicker-days .table-condensed thead tr {
    margin-bottom: 5px
}

.default-calendar .datepicker .datepicker-days .table-condensed thead tr:first-child {
    display: none
}

.default-calendar .datepicker .datepicker-days .table-condensed thead tr th {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    height: 22px;
    text-transform: uppercase
}

.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td {
    width: 43px;
    height: 43px;
    color: rgba(var(--dark-color), 1);
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
}

.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td:hover,
.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td.focused {
    background-color: rgba(var(--black), 0)
}

.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td.active {
    background: none
}

.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td.old,
.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td.new {
    color: rgba(var(--dark-color), 0.5);
    pointer-events: none;
}

.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td:before {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 100%
}

.default-calendar .datepicker table tr td.today,
.default-calendar .datepicker table tr td.today:hover,
.default-calendar .datepicker table tr td.today.disabled,
.default-calendar .datepicker table tr td.today.disabled:hover {
    background: rgba(var(--primary-color), 0.1) !important;
    color: rgba(var(--primary-color), 1) !important;
}


.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td.present:before {
    background-color: rgba(var(--success-color), 1)
}

.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td.holiday:before {
    background-color: rgba(var(--warning-color), 1)
}

.default-calendar .datepicker .datepicker-days .table-condensed tbody tr td.absent:before {
    background-color: rgba(var(--error-color), 1)
}

.datepicker-div {
    display: flex;
    align-items: center;
    gap: 14px
}

.datepicker-range {
    position: relative
}

.top-right-part .datepicker-range {
    max-width: 280px;
    width: 100%;
}

.form-datepicker-box {
    position: relative;
}

.form-datepicker-box svg {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.form-datepicker-box #errDate_2 {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--error-color), 1);
    font-family: var(--font-nunito);
    margin-top: 4px;
    margin-bottom: 0px;
}


.form-datepicker-box button.close-btn{
    position: absolute;
    top: 14px;
    right: 40px;
    width: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    height: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    color: rgba(var(--dark-color), 1);
    padding: 0;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-datepicker-box button.close-btn svg{
   width: 100%;
    height: 100%;
    position: static;
}

.lmg-holiday-date {
    pointer-events: none;
    opacity: 0.5;
}

.datepicker-range .form-control {
    line-height: 1.25;
    padding: var(--input-padding);
}

.datepicker-range .range-svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(10px + 6*(100vw - 320px)/1600);
    width: calc(16px + 2*(100vw - 320px)/1600);
    height: calc(16px + 2*(100vw - 320px)/1600)
}

.datepicker-range .close-btn {
    display: none;
    padding: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    position: absolute;
    top: calc(11px + (14 - 11) * ((100vw - 320px) / (1920 - 320)));
    right: calc(32px + (40 - 32) * ((100vw - 320px) / (1920 - 320)));
    width: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    height: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)))
}

.datepicker-range .close-btn.active {
    display: flex;
}

.datepicker-range .close-btn svg {
    width: 100%;
    height: 100%;
}

.datepicker-range .form-control.with-icon {
    padding-right: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daterangepicker {
    z-index: 20;
    font-family: var(--font-lexend);
    border-radius: var(--border-radius);
}

.modal-open .daterangepicker {
    z-index: 9999;
}

.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
    height: 32px;
}

.daterangepicker th.month {
    font-weight: 500;
    font-size: 14px;
    color: rgba(var(--dark-color), 1);
}

.daterangepicker .calendar-table th {
    font-weight: 500;
    font-size: 14px;
    color: rgba(var(--dark-color), 1);
}

.daterangepicker .calendar-table td {
    color: rgba(var(--dark-color), 0.9);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: rgba(var(--primary-color), 0.1);
}

.daterangepicker td.in-range {
    background-color: rgba(var(--primary-color), 0.1);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: rgba(var(--primary-color), 1);
    color: rgba(var(--white), 1);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    color: rgba(var(--dark-gray-color-1), 0.6);
}

.daterangepicker .drp-calendar {
    max-width: 276px;
}

.bootstrap-timepicker-widget table tbody tr td a {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bootstrap-timepicker-widget table tbody tr td a span,
.bootstrap-timepicker-widget table tbody tr td a span {
    background-size: cover;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
}

.bootstrap-timepicker-widget table tbody tr:first-child td a span {
    background-image: url("/assets/images/svg/arrow-up.svg");
}

.bootstrap-timepicker-widget table tbody tr:last-child td a span {
    background-image: url("/assets/images/svg/arrow-down.svg");
}

.bootstrap-timepicker-widget table td {
    height: auto;
    width: auto;
    min-width: unset;
}

.bootstrap-timepicker-widget table td input {
    font-size: 14px;
    line-height: 1.5;
    width: 35px;
    height: 30px;
    border: 1px solid rgba(var(--gray-color-1), 1);
    border-radius: 4px;
    text-align: center;
}
.search-form{
    max-width: 260px;
    width: 100%;
    margin-left: auto;
    position: relative; 
}
.search-form svg{
    width: 20px; 
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;    
}

/* Calendar css */
.calendar-container .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.calendar-container .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.fc .fc-view-harness {
    min-height: 300px;
}

.fc .fc-scrollgrid,
.fc .fc-scrollgrid table {
    width: 100% !important;
}

.fc .fc-scroller-liquid-absolute,
.fc .fc-scroller {
    scrollbar-width: none;
}

.fc-toolbar.fc-header-toolbar {
    flex-direction: row-reverse;
    margin-bottom: 16px !important;
}

.fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-child {
    display: none;
}

.fc-toolbar.fc-header-toolbar h2.fc-toolbar-title {
    color: rgba(var(--dark-color), 1);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

.fc-toolbar.fc-header-toolbar .fc-today-button {
    text-transform: capitalize;
    padding: calc(6px + (7 - 6) * ((100vw - 320px) / (1920 - 320))) calc(12px + (14 - 12) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
    height: unset;
    background: transparent;
    border: 1px solid rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
    box-shadow: unset;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    display: none;
}

.fc .fc-button-group>* {
    margin: 0;
}

.fc-button-group {
    display: flex;
    align-items: center;
    gap: calc(6px + (8 - 6) * ((100vw - 320px) / (1920 - 320)));
    margin-left: 0;
}

.fc-button-group button {
    background: transparent !important;
    color: rgba(var(--black), 1);
    box-shadow: none;
    border: 1px solid rgba(var(--gray-color), 1) !important;
    border-radius: 8px !important;
    width: calc(35px + (40 - 35) * ((100vw - 320px) / (1920 - 320)));
    height: calc(35px + (40 - 35) * ((100vw - 320px) / (1920 - 320)));
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    box-shadow: none !important;
}

.fc-button-group button .fc-icon {
    top: unset;
    margin: 0;
    height: unset;
}

.fc-button-group button .fc-icon::before {
    display: none;
}

.fc-button-group button .fc-icon.fc-icon-chevron-left,
.fc-button-group button .fc-icon.fc-icon-chevron-right {
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

.fc-button-group button .fc-icon.fc-icon-chevron-left {
    background-image: url("/assets/images/svg/left-angle.svg");
}

.fc-button-group button .fc-icon.fc-icon-chevron-right {
    background-image: url("/assets/images/svg/right-angle.svg");
}

.fc-view-harness .fc-view .fc-scrollgrid-section-header .fc-col-header .fc-day .fc-scrollgrid-sync-inner .fc-col-header-cell-cushion {
    padding: 12px 10px;
    font-weight: 400;
    color: rgba(var(--black), 1);
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
}

.fc .fc-daygrid-event {
    margin: 4px !important;
}

.fc .fc-daygrid-event.weekend {
    background-color: transparent !important;
    border: none !important;
}

.fc .fc-daygrid-event.weekend.fc-h-event .fc-event-main {
    color: rgba(var(--dark-gray-color-1), 1);
}

.fc .fc-daygrid-event.approved {
    background-color: rgba(var(--success-color), 0.1) !important;
    border-color: transparent !important;
}

.fc .fc-daygrid-event.approved.fc-h-event .fc-event-main {
    color: rgba(var(--success-color), 1) !important;
}

.fc .fc-daygrid-event.festival {
    background-color: rgba(var(--warning-color), 0.1) !important;
    border-color: transparent !important;
}

.fc .fc-daygrid-event.festival.fc-h-event .fc-event-main {
    color: rgba(var(--warning-color), 1) !important;
}

.fc .fc-daygrid-event.unpaid {
    background-color: rgba(var(--info-color), 0.1) !important;
    border-color: transparent !important;
}

.fc .fc-daygrid-event.unpaid.fc-h-event .fc-event-main {
    color: rgba(var(--info-color), 1) !important;
}

.fc .fc-daygrid-event.pending {
    background-color: rgba(var(--error-color), 0.1) !important;
    border-color: transparent !important;
}

.fc .fc-daygrid-event.pending.fc-h-event .fc-event-main {
    color: rgba(var(--error-color), 1) !important;
}

.fc-view-harness .fc-view .fc-scrollgrid-section-body .fc-daygrid-day.fc-day-sat .fc-daygrid-day-frame,
.fc-view-harness .fc-view .fc-scrollgrid-section-body .fc-daygrid-day.fc-day-sun .fc-daygrid-day-frame {
    background-color: rgba(var(--gray-color-4), 1);
}

.fc-view-harness .fc-view .fc-scrollgrid-section-body .fc-daygrid-day.fc-day-sat .fc-daygrid-day-frame:has(.fifth-saturdays),
.fc-view-harness .fc-view .fc-scrollgrid-section-body .fc-daygrid-day.fc-day-sun .fc-daygrid-day-frame:has(.fifth-saturdays) {
    background-color: transparent;
}

.fc-view-harness .fc-view .fc-scrollgrid-section-body .fc-daygrid-day.fc-day-sat .fc-daygrid-day-frame .fifth-saturdays,
.fc-view-harness .fc-view .fc-scrollgrid-section-body .fc-daygrid-day.fc-day-sun .fc-daygrid-day-frame .fifth-saturdays {
    display: none;
}

.fc-view-harness .fc-view .fc-scrollgrid-section-body .fc-daygrid-day .fc-scrollgrid-sync-inner .fc-daygrid-day-top {
    flex-direction: unset;
}

.fc-view-harness .fc-view .fc-scrollgrid-section-body .fc-daygrid-day .fc-scrollgrid-sync-inner .fc-daygrid-day-top .fc-daygrid-day-number {
    font-weight: 400;
    font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.25;
    padding: calc(4px + (10 - 4) * ((100vw - 320px) / (1920 - 320)));
    color: rgba(var(--dark-gray-color-1), 1);
    text-decoration: none;
}

.fc-view-container .fc-view .fc-head .fc-head-container .fc-row.fc-widget-header {
    border-right-width: 0 !important;
    margin-right: 0 !important;
}

.fc-view-container .fc-view .fc-body .fc-widget-content .fc-day-top .fc-day-number {
    float: unset;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    padding: 10px;
    display: block;
    color: rgba(var(--dark-gray-color-1), 1);
}

.fc-view-container .fc-view .fc-body .fc-widget-content .fc-scroller.fc-day-grid-container {
    height: 100% !important;
}

.fc-view-container .fc-view .fc-body .fc-widget-content .fc-scroller.fc-day-grid-container::-webkit-scrollbar {
    width: 0;
    height: 0
}

.fc .fc-day-other .fc-daygrid-day-top {
    opacity: 0.4;
}

.fc-event,
.fc-event-dot {
    background-color: rgba(var(--primary-color), 1);
    border-color: rgba(var(--primary-color), 1) !important;
}

.fc-event:hover,
.fc-event:focus,
.fc-event-dot:hover,
.fc-event-dot:focus {
    background-color: rgba(var(--primary-color), 1);
    border-color: rgba(var(--primary-color), 1) !important;
}

.fc-event {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.fc-daygrid-event-dot {
    display: none;
}

.fc-direction-ltr .fc-daygrid-event .fc-event-time {
    display: none;
}

.fc-daygrid-event {
    padding: calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320))) calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    white-space: normal;
}

.fc .fc-daygrid-body {
    width: 100% !important;
}

.fc .fc-scrollgrid-section-body table,
.fc .fc-scrollgrid-section-footer table {
    width: 100% !important;
}

.fc-daygrid-block-event .fc-event-time,
.fc-daygrid-block-event .fc-event-title {
    padding: 0;
}

.fc .fc-daygrid-day.fc-day-today {
    background: rgba(var(--primary-color), 0.1);
}

.upcoming-event h4 {
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 12px;
    text-transform: capitalize;
}

.upcoming-event .fc-daygrid-event {
    margin-bottom: 12px;
    padding: 0;
    border-radius: 6px;
}

.upcoming-event .fc-daygrid-event:last-child {
    margin-bottom: 0;
}

.upcoming-event .fc-daygrid-event .fc-event-main {
    display: flex;
    align-items: center;
    gap: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)));
    padding: 10px;
    width: 100%;
}

.upcoming-event .fc-daygrid-event .fc-event-main .date-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1;
    color: rgba(var(--white), 1);
    width: calc(35px + (40 - 35) * ((100vw - 320px) / (1920 - 320)));
    height: calc(35px + (40 - 35) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 6px;
    text-align: center;
    gap: 1px;
}
.upcoming-event .fc-daygrid-event .fc-event-main .date-box span{
    font-size: 12px;
}

.upcoming-event .fc-daygrid-event .fc-event-main .leave-data h5 {
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--font-color-1), 1);
    margin-bottom: 2px;
}

.upcoming-event .fc-daygrid-event .fc-event-main .leave-data p {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
}

.upcoming-event .fc-daygrid-event.festival {
    background-color: rgba(var(--warning-color), 0.1);
    border-color: rgba(var(--warning-color), 0.2) !important;
}

.upcoming-event .fc-daygrid-event.festival .date-box {
    background-color: rgba(var(--warning-color), 1);
}

.upcoming-event .fc-daygrid-event.approved {
    background-color: rgba(var(--success-color), 0.1);
    border-color: rgba(var(--success-color), 0.2) !important;
}

.upcoming-event .fc-daygrid-event.approved .date-box {
    background-color: rgba(var(--success-color), 1);
}

.upcoming-event .fc-daygrid-event.weekend {
    background-color: rgba(var(--dark-gray-color-1), 0.1);
    border-color: rgba(var(--dark-gray-color-1), 0.2) !important;
}

.upcoming-event .fc-daygrid-event.weekend .date-box {
    background-color: rgba(var(--dark-gray-color-1), 1);
}

.upcoming-event .fc-daygrid-event.pending {
    background-color: rgba(var(--error-color), 0.1);
    border-color: rgba(var(--error-color), 0.2) !important;
}

.upcoming-event .fc-daygrid-event.pending .date-box {
    background-color: rgba(var(--error-color), 1);
}

.upcoming-event .fc-daygrid-event.unpaid {
    background-color: rgba(var(--info-color), 0.1);
    border-color: rgba(var(--info-color), 0.2) !important;
}

.upcoming-event .fc-daygrid-event.unpaid .date-box {
    background-color: rgba(var(--info-color), 1);
}

/* Toast css */
.toast {
    border: 1px solid;
    background-color: rgba(var(--white), 1);
    max-width: 500px;
    width: auto;
}

.toast-body {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 400;
    color: rgba(var(--dark-color), 0.8);
    position: relative;
}

.toast-body:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 3px;
    height: calc(100% - 22px);
    border-radius: 10px;
}

.toast .toast-body .content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
}

.toast .toast-body .btn-close {
    margin-left: auto;
    width: 14px;
    min-width: 14px;
    height: 14px;
    padding: 0;
    opacity: 0.8;
}

.toast-body .toast-img-box {
    height: 32px;
    width: 32px;
    min-width: 32px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.toast-body .toast-img-box svg {
    width: 20px;
    height: 20px;
}

/* success toast */
.toast.success-toast {
    border-color: rgba(var(--success-color), 1);
    box-shadow: 0 0 5px rgba(var(--success-color), 0.2);
}

.toast.success-toast .toast-body:before {
    background-color: rgba(var(--success-color), 1);
}

.toast.success-toast .toast-body .toast-img-box {
    background-color: rgba(var(--success-color), 1);
    color: rgba(var(--white), 1);
    background-image: url('/assets/images/toast/success.png');
}

/* error toast */
.toast.error-toast {
    border-color: rgba(var(--error-color), 1);
    box-shadow: 0 0 5px rgba(var(--error-color), 0.2);
}

.toast.error-toast .toast-body:before {
    background-color: rgba(var(--error-color), 1);
}

.toast.error-toast .toast-body .toast-img-box {
    background-color: rgba(var(--error-color), 1);
    color: rgba(var(--white), 1);
    background-image: url('/assets/images/toast/error.png');
}

/* warning toast */
.toast.warning-toast {
    border-color: rgba(var(--warning-color), 1);
    box-shadow: 0 0 5px rgba(var(--warning-color), 0.2);
}

.toast.warning-toast .toast-body:before {
    background-color: rgba(var(--warning-color), 1);
}

.toast.warning-toast .toast-body .toast-img-box {
    background-color: rgba(var(--warning-color), 1);
    color: rgba(var(--white), 1);
    background-image: url('/assets/images/toast/warning.png');
}

/* info toast */
.toast.info-toast {
    border-color: rgba(var(--info-color), 1);
    box-shadow: 0 0 5px rgba(var(--info-color), 0.2);
}

.toast.info-toast .toast-body:before {
    background-color: rgba(var(--info-color), 1);
}

.toast.info-toast .toast-body .toast-img-box {
    background-color: rgba(var(--info-color), 1);
    color: rgba(var(--white), 1);
    background-image: url('/assets/images/toast/info.png');
}

/* Card css */
.tab-content .tab-card-footer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.tab-content .tab-card-footer .btn {
    width: fit-content;
    padding: 8px 20px;
    font-size: 14px;
}

.card {
    border: 1px solid rgba(var(--gray-color-1));
    border-radius: var(--border-radius);
    overflow: hidden
}

.card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background-color: rgba(var(--white));
    padding: 16px 20px;
    border-bottom: 1px solid rgba(var(--gray-color-1));
}

.card .card-header .button-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)));
}

.card .card-header .button-group .btn {
    width: fit-content;
    padding-block: calc(6px + (9 - 6) * ((100vw - 320px) / (1920 - 320)));
}

.card .card-header.card-header-1 {
    border-bottom: none;
}

.card .card-header.card-header-1 h6 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}

.card .card-header.card-button-header {
    padding: 10px 20px;
}

.card .card-header.card-button-header .btn {
    padding: 6px 22px;
    font-size: 14px;
    width: fit-content;
    margin-left: auto;
    white-space: nowrap;
}

.card .card-header.select-employee {
    padding: 9px 9px 9px 20px
}

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

.card .card-header .header-left .select2-container {
    min-width: 200px;
    width: -moz-max-content !important;
    width: max-content !important;
    z-index: 5;
}

.card .card-header .header-left .select2-container.select2-container--default .select2-selection--single {
    padding: 7px 12px;
}

.card .card-header .header-left .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 12px;
    color: rgba(var(--dark-gray-color-1), 1)
}

.card .card-header h6 {
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--dark-color), 1);
    line-height: 1.25;
    text-transform: capitalize;
}

.card .card-header .view {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(var(--primary-color), 1);
    line-height: 1.36;
    text-decoration: none;
    font-family: var(--font-nunito);
}

.card .card-header .view svg {
    width: 18px;
    height: 18px;
}

.card .card-body {
    background-color: rgba(var(--white));
    padding: 16px 20px
}

.tab-content .card .card-header h6 {
    font-size: 16px;
    color: rgba(var(--black), 1)
}

.total-amount {
    display: flex;
    align-items: center;
    gap: 10px;
}

.total-amount p {
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 400;
    line-height: 1.4;
    color: rgba(var(--dark-gray-color-1), 1);
}

.total-amount .amount {
    margin-left: auto;
    font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.4;
    color: rgba(var(--success-color), 1);
}

.total-amount .amount span {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--light-black), 1);
}

/* salary detail */
.salary-detail-list-box {
    display: flex;
    align-items: center;
    gap: calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
    position: relative;
}

.general-detail .salary-detail-list-box {
    position: static;
}

.salary-detail-list-box .icon-box {
    width: calc(35px + (40 - 35) * ((100vw - 320px) / (1920 - 320)));
    min-width: calc(35px + (40 - 35) * ((100vw - 320px) / (1920 - 320)));
    height: calc(35px + (40 - 35) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--primary-color), 0.1);
    color: rgba(var(--primary-color), 1);
}

.salary-detail-list-box .icon-box svg {
    width: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
    height: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
}

.salary-detail-list-box h4 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-gray-color-1), 1);
    margin-bottom: calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320)));
    font-family: var(--font-nunito);
    text-transform: capitalize;
}

.salary-detail-list-box p {
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 400;
    line-height: 1.3;
    color: rgba(var(--dark-color), 1);
    text-transform: capitalize;
}

.salary-detail-list-box input {
    border: none;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 400;
    line-height: 1.3;
    color: rgba(var(--dark-color), 1);
    text-transform: capitalize;
    width: 100%;
}

.salary-detail-list-box .view {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid rgba(var(--gray-color-1), 1);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--dark-color), 1);
    background-color: rgba(var(--white), 1);
    outline: none;
    margin-left: auto;
}

.salary-detail-list-box .view svg {
    width: 20px;
    height: 20px
}

.company-detail-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.company-detail-box .logo-box {
    width: calc(40px + (45 - 40) * ((100vw - 320px) / (1920 - 320)));
    min-width: calc(40px + (45 - 40) * ((100vw - 320px) / (1920 - 320)));
    height: calc(40px + (45 - 40) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--reject-color), 0.1);
}

.company-detail-box .logo-box img {
    height: calc(22px + (25 - 22) * ((100vw - 320px) / (1920 - 320)));
}

.company-detail-box h4 {
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 3px;
}

.company-detail-box span {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.25;
    color: rgba(var(--dark-gray-color-1), 1);
    display: inline-block;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 8px; 
}

.info-row button, .info-row.diary .btn {
    margin-left: auto;
    width: max-content;
    padding: calc(9px + (11 - 9) * ((100vw - 320px) / (1920 - 320))) 20px;
    white-space: nowrap;
} 

/* widget card */
.widget-card .widget-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
}

.widget-card .widget-detail {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
}

.widget-card .widget-img-box {
    width: calc(40px + (50 - 40) * ((100vw - 320px) / (1920 - 320)));
    height: calc(40px + (50 - 40) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--primary-color), 0.1);
    margin-bottom: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)));
}

.widget-card .widget-img-box svg {
    width: calc(24px + (32 - 24) * ((100vw - 320px) / (1920 - 320)));
    height: calc(24px + (32 - 24) * ((100vw - 320px) / (1920 - 320)));
    color: rgba(var(--primary-color), 1);
}

.widget-card .widget-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-gray-color-1), 1);
    margin-bottom: calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
}

.widget-card .widget-maintitle {
    font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 8px;
}

.widget-card .widget-desc {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.43;
    color: rgba(var(--dark-gray-color-1), 1);
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.widget-card .btn {
    width: fit-content;
    padding: 10px calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}

.widget-card .widget-price {
    font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
}

.widget-card .widget-salary-btn-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: calc(16px + (26 - 16) * ((100vw - 320px) / (1920 - 320)));
}

.widget-card .widget-badge {
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    font-weight: 600;
    line-height: 1.36;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    border: 1px solid;
    text-transform: capitalize;
    font-family: var(--font-nunito);
    padding: 7px 9px;
    border-radius: 6px;
    background-color: rgba(var(--primary-color), 0.1);
    color: rgba(var(--primary-color), 1);
    border: 1px solid transparent;
}

.widget-card .widget-badge svg {
    width: 20px;
    min-width: 20px;
    height: 20px;
}

.salary-detail-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 4px;
}

.salary-detail-box {
    border-bottom: 1px solid rgba(var(--border-color-2), 1);
    margin-bottom: 14px;
}

.salary-detail-box:last-child {
    border-bottom: none;
}

.salary-detail-box .detail-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.salary-detail-box .detail-box h6 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
}

.overall-amount-modal .salary-detail-box .detail-box h6 {
    color: rgba(var(--dark-gray-color-1), 1);
}

.salary-detail-box .detail-box span {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
}

.salary-detail-box p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-gray-color-1), 1);
}

.salary-detail-box p span {
    color: rgba(var(--dark-color), 1);
}

.salary-detail-box:last-child {
    margin-bottom: 0;
}

/* Policy css */
.policy-content .policy-title h2 {
    font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.policy-content b {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    padding-bottom: 12px;
    display: block;
}

.policy-content br {
    display: none;
}

.policy-content blockquote {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(var(--dark-gray-color-1), 1);
    font-family: var(--font-nunito);
}

.policy-content blockquote b {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    padding-bottom: 12px;
    display: block;
    font-family: var(--font-lexend);
}

.policy-content ul ul {
    padding-left: 20px;
    list-style-type: disc;
}

.policy-content ul ul li {
    font-size: 16px;
    line-height: 1.75;
    font-family: var(--font-nunito);
    font-weight: 300;
    color: rgba(var(--dark-gray-color-1), 1);
    display: list-item;
}

.policy-content ul ul li::marker {
    color: rgba(var(--light-black), 1);
}

.policy-content ul ul li b {
    font-size: 16px;
    font-weight: 400;
    color: rgba(var(--light-black), 1);
    font-family: var(--font-lexend);
    display: inline-block;
    padding: 0;
}

.policy-content .policy-sec {
    padding-bottom: 24px;
}

.policy-content .policy-sec h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    padding-bottom: 12px;
}

.policy-content .policy-sec p,
.policy-content .policy-sec ol li,
.policy-content .policy-sec ul.ul-list li {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(var(--dark-gray-color-1), 1);
    font-family: var(--font-nunito);
}

.policy-content .policy-sec ol {
    padding-left: 16px;
}

.policy-content .policy-sec ol li {
    color: rgba(var(--light-black), 1);
    line-height: 1.75;
}

.policy-content .policy-sec ul.ul-list {
    padding-left: 20px;
    padding-top: 12px;
}

.policy-content .policy-sec ul.ul-list li {
    display: list-item;
    font-family: var(--font-lexend);
    line-height: 1.75;
    color: rgba(var(--light-black), 1);
    font-weight: 400;
}

.policy-content .policy-sec ul.ul-list li span {
    font-weight: 300;
    color: rgba(var(--dark-gray-color-1), 1);
}

/* Dropdown css */
.dropdown {
    height: 100%;
    width: 100%
}

.dropdown .dropdown-toggle {
    border: none;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(var(--black), 0)
}

.dropdown .dropdown-toggle:after {
    display: none
}

.dropdown .dropdown-toggle svg {
    width: 20px;
    height: 20px
}

.dropdown .dropdown-menu {
    border: 1px solid rgba(var(--gray-color-1), 1);
    border-radius: var(--border-radius);
    padding: 8px 10px;
    height: max-content;
}

.dropdown .dropdown-menu li {
    display: block;
}

.dropdown .dropdown-menu li .dropdown-item {
    padding: 8px 8px 8px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--border-radius);
    background-color: rgba(var(--black), 0);
    color: rgba(var(--dark-gray-color), 1);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.37;
    font-family: var(--font-nunito);
    text-transform: capitalize;
}

.dropdown .dropdown-menu li .dropdown-item svg {
    width: 20px;
    height: 20px;
}

.dropdown .dropdown-menu li .dropdown-item:hover {
    background-color: rgba(var(--bg-color), 1);
    color: rgba(var(--dark-color), 1);
}

.dropdown .dropdown-menu li .dropdown-item:hover svg {
    color: rgba(var(--primary-color));
}

.dropdown .dropdown-menu li+li {
    margin-top: 4px;
}

/* Form Control css */
.form-control {
    font-family: var(--font-nunito);
    padding: var(--input-padding);
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    line-height: 1.35;
    border-radius: var(--border-radius);
    width: 100%;
    font-weight: 400;
    border: 1px solid rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1) !important;
    pointer-events: auto !important;
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

.form-control.error {
    color: rgba(var(--dark-color), 1) !important;
}

.form-control:disabled,
.form-control:read-only {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
}

.form-control::placeholder {
    color: rgba(var(--dark-gray-color-1), 1);
}

.form-control:hover,
.form-control:focus {
    box-shadow: none;
    outline: none;
    border-color: rgba(var(--gray-color), 1);
}

.form-control::-moz-placeholder {
    color: rgba(var(--font-color), 1);
}

.form-control::placeholder {
    color: rgba(var(--font-color), 1);
}

.form-control.auth-field {
    color: rgba(var(--dark-color), 1);
    border-radius: var(--radius);
    background-color: rgba(var(--white), 1);
}

.form-control.with-icon {
    padding-right: 46px;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    background-image: unset;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    box-shadow: none;
    outline: none;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: none;
    border-color: rgba(var(--gray-color), 1);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: rgba(var(--gray-color), 1);
    background-image: unset;
}

.form-group .invalid {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--error-color), 1);
    font-family: var(--font-nunito);
    margin-top: 4px;
    margin-bottom: 0px;
}

.form-group .position-relative button {
    border: none;
    background-color: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 13px;
    line-height: 1;
}

.form-group .position-relative svg {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 12px;
}

.form-group .document-file-input {
    height: 0;
    width: 0;
    overflow: hidden !important;
    opacity: 0;
    display: block;
}

.form-group .position-relative button svg {
    width: 20px;
    height: 20px;
    position: unset;
    transform: unset;
}

.form-group-change-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-group-change-profile-row .form-group-change-profile-img {
    min-width: 80px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 80px;
    border: 2px solid rgba(var(--white), 1);
    box-shadow: 0px 0 15px 1px rgba(var(--dark-color), 0.15);
}

.form-group-change-profile-row .form-group-change-profile-img img,
.form-group-change-profile-row .form-group-change-profile-img svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: rgba(var(--primary-color), 1);
}

.form-group-change-profile-row .btn input {
    display: none;
}

.form-group-change-profile-row .btn {
    padding: 8px 10px;
    font-size: 12px;
    width: fit-content;
    margin-bottom: 0;
}

.form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
    gap: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.form-footer .btn {
    width: fit-content;
}

.search-input {
    position: relative;
}

.search-input .form-control {
    padding-left: 50px;
}

.search-input .form-control::placeholder {
    color: rgba(var(--dark-gray-color-1), 1);
}

.search-input svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    width: calc(20px + 2*(100vw - 320px)/1600);
    height: calc(20px + 2*(100vw - 320px)/1600);
}

label {
    font-size: 14px;
    line-height: 1.25;
    font-weight: 400;
    text-transform: capitalize;
    margin-bottom: calc(4px + 4*(100vw - 320px)/1600);
    color: rgba(var(--black), 1);
    display: flex;
    align-items: center;
    gap: 2px;
}

label .required-field {
    color: rgba(var(--error-color), 1);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.form-group label .grade-chart,
.form-group label .label-span {
    color: rgba(var(--primary-color), 1);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 400;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.form-group label .grade-chart:focus-visible,
.form-group label .label-span:focus-visible {
    width: 20px;
    height: 20px;
}

.form-group label .label-span:focus-visible {
    outline: none;
}

.popover {
    --bs-popover-max-width: unset;
    border: 1px solid rgba(var(--gray-color), 1);
    font-family: var(--font-nunito);
}

.popover-grade-chart-image {
    /* width: 350px; */
    width: calc(280px + (350 - 280) * ((100vw - 320px) / (1920 - 320)));
    height: auto;
}

.clockpicker-popover .popover-title {
    color: rgba(var(--dark-gray-color-1), 1);
}

.clockpicker-popover .popover-content {
    background-color: rgba(var(--secondary-btn-color), 1);
    border-color: rgba(var(--gray-color), 1);
}

.clockpicker-plate {
    border-color: rgba(var(--gray-color), 1);
}

.clockpicker-tick {
    color: rgba(var(--light-black), 1);
    font-size: 14px !important;
}

.popover.clockpicker-popover .popover-title .clockpicker-span-hours.text-primary,
.popover.clockpicker-popover .popover-title .clockpicker-span-minutes.text-primary {
    color: rgba(var(--primary-color), 1) !important
}

.popover.clockpicker-popover .popover-title .clockpicker-span-hours,
.popover.clockpicker-popover .popover-title .clockpicker-span-minutes {
    color: rgba(var(--dark-gray-color-1), 1) !important;
}

.popover-content .clockpicker-plate .clockpicker-canvas .clockpicker-svg .clockpicker-canvas-bg {
    fill: rgba(var(--primary-color), 0.2) !important
}

.popover-content .clockpicker-plate .clockpicker-canvas .clockpicker-svg .clockpicker-canvas-bearing,
.popover-content .clockpicker-plate .clockpicker-canvas .clockpicker-svg .clockpicker-canvas-fg {
    fill: rgba(var(--primary-color), 0.2) !important
}

.clockpicker-canvas line {
    stroke: rgba(var(--primary-color), 0.2) !important
}

.clockpicker-tick.active,
.clockpicker-tick:hover {
    background-color: rgba(var(--primary-color), 0.2) !important
}

.form-group {
    margin-bottom: 14px;
    position: relative
}

.form-group label .view-doc-btn {
    margin-left: auto;
    font-size: 14px;
}

.form-group:last-child {
    margin-bottom: 0
}

.field-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    padding-block: calc(8px + (16 - 8) * ((100vw - 320px) / (1920 - 320)));
    margin-top: calc(18px + (24 - 18) * ((100vw - 320px) / (1920 - 320)));
    border-bottom: 1px solid rgba(var(--border-color), 1);
    color: rgba(var(--black), 1)
}

textarea.form-control {
    min-height: 100px;
}

.form-group .error {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--error-color), 1);
    font-family: var(--font-nunito);
    margin-top: 4px;
    margin-bottom: 0px;
}

.modal .modal-header p.info-text,
.form-group .info-text {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--dark-color), 0.8);
    font-family: var(--font-nunito);
    margin-top: 4px;
    margin-bottom: 0px;
}

.modal .modal-header.penalty{
    flex-direction: column;
    align-items: flex-start;
}
.modal .modal-header.penalty-btn .btn{
   width: max-content;
}

.form-group .form-multifile-input~.form-control {
    height: 0;
    margin: 0;
    overflow: hidden !important;
    padding: 0;
    border: 0;
}

/* toggle password css */
.toggle-password-field {
    position: relative
}

.toggle-password-field .toggle-password {
    border: none;
    background-color: unset;
    padding: 0;
    position: absolute;
    top: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320)));
    right: calc(10px + 2*(100vw - 320px)/1600);
    background: rgba(var(--black), 0);
    padding: 0;
    border: 0;
    outline: none
}

.toggle-password-field .toggle-password svg {
    width: calc(20px + 4*(100vw - 320px)/1600);
    height: calc(20px + 4*(100vw - 320px)/1600)
}

.toggle-password-field .toggle-password .eye {
    display: block
}

.toggle-password-field .toggle-password .eye-slash {
    display: none
}

.toggle-password-field .toggle-password.hide .eye {
    display: none
}

.toggle-password-field .toggle-password.hide .eye-slash {
    display: block
}

/* checkbox & radio */
.form-check {
    display: flex;
    align-items: center;
}

.form-check-label {
    font-size: 14px;
    font-weight: 400;
    margin-left: 8px;
    margin-bottom: 0px;
    color: rgba(var(--dark-color), 1);
    cursor: pointer;
}

[type='checkbox'],
[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-shrink: 0;
    height: 16px;
    width: 16px;
    color: #2563eb;
    background: #fff;
    border: 1px solid rgba(var(--gray-color), 1);
    margin: 0;
}

.form-check-input:focus {
    border-color: rgba(var(--gray-color), 1);
}

.form-check-input {
    transition-property: all;
    transition-duration: 100ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-duration: 100ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    width: 16px;
    height: 16px;
    position: relative;
}

.form-check-input[type="radio"]:checked {
    border-color: rgba(var(--primary-color), 1);
    background-color: rgba(var(--primary-color), 1);
}

[type='radio']:checked {
    background-image: url('../images/radio.svg');
}

.form-check-input[type="checkbox"]:focus,
.form-check-input[type="radio"]:focus {
    box-shadow: rgba(var(--white), 1) 0px 0px 0px 0px, rgba(var(--primary-color), 0.2) 0px 0px 0px 4px, rgba(var(--dark-color), 0.05) 0px 1px 2px 0px;
}

.form-check-input[type="checkbox"]:checked {
    background-color: rgba(var(--primary-color), 1);
    border: 1px solid rgba(var(--primary-color), 1);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/* Modal */
.modal {
    padding: 0;
    z-index: 999;
    padding: 6px !important;
    scrollbar-width: none;
}

.modal.add-employee .form-control,
.modal.add-branch .form-control {
    font-size: 14px;
    line-height: 1.5;
    padding: calc(10px + (11 - 10) * ((100vw - 320px) / (1920 - 320))) calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));
}

.modal .form-control {
    color: rgba(var(--light-black), 1);
}

.modal .form-control::placeholder {
    color: rgba(var(--dark-gray-color-1), 1);
}

.modal.add-employee .form-control::file-selector-button,
.modal.request-modal .form-control::file-selector-button,
.modal.leave-apply .form-control::file-selector-button {
    display: none;
}

.modal label {
    line-height: 1.43;
}

.modal .modal-dialog .modal-content {
    border-radius: var(--radius);
    border: none;
    overflow: hidden;
}

.modal .modal-dialog .modal-content .modal-header {
    border: none;
    padding: calc(20px + 10*(100vw - 320px)/1600);
}

.modal .modal-dialog .modal-content .modal-header .modal-title {
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.4;
    text-transform: capitalize;
}

.modal .modal-dialog .modal-content .modal-header .btn-close {
    opacity: 1;
    padding: 0;
    margin: 0;
    margin-left: auto;
    box-shadow: none;
    width: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
    height: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal .modal-dialog .modal-content .modal-header .modal-back-btn {
    padding: 0;
    margin-right: 8px;
    border: 0;
    box-shadow: none;
    width: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
    height: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal .modal-dialog .modal-content .modal-header .btn-close svg {
    width: 100%;
    height: 100%;
}

.modal .modal-dialog .modal-content .modal-body {
    padding: calc(20px + 10*(100vw - 320px)/1600)
}

.modal .modal-dialog .modal-content .modal-body .note {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--error-color), 1);
    margin-top: 14px;
}

.modal .modal-dialog .modal-content .modal-body .form-group .note {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--error-color), 1);
}

.modal .modal-dialog .modal-content .modal-body .modal-icon {
    width: calc(45px + 5*(100vw - 320px)/1600);
    height: calc(45px + 5*(100vw - 320px)/1600);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background-color: rgba(var(--primary-color), 0.2);
    margin-bottom: 12px
}

.modal .modal-dialog .modal-content .modal-body .modal-icon svg {
    color: rgba(var(--primary-color), 1);
    width: calc(30px + 5*(100vw - 320px)/1600);
    height: calc(30px + 5*(100vw - 320px)/1600)
}

.modal .modal-dialog .modal-content .modal-body .modal-detail textarea {
    margin-top: 12px;
}

.modal .modal-dialog .modal-content .modal-body .modal-detail .footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: none
}

.modal .modal-dialog .modal-content .modal-body .modal-title {
    font-size: calc(20px + 4*(100vw - 320px)/1600);
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--black), 1)
}

.modal .modal-dialog .modal-content .modal-body .modal-desc {
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    font-weight: 500;
    line-height: 1.37;
    color: rgba(var(--font-color), 1);
    font-family: var(--font-nunito);
    margin-top: calc(6px + 5*(100vw - 320px)/1600)
}

.modal .modal-dialog .modal-content .modal-body .modal-desc#link_text {
    word-break: break-all;
}

.modal .modal-dialog .modal-content .modal-body .btn {
    margin-top: 16px;
    font-family: var(--font-nunito)
}

.modal .modal-dialog .modal-content .modal-body .center-redirect {
    margin-top: calc(10px + 6*(100vw - 320px)/1600)
}

.modal .modal-dialog .modal-content .modal-footer {
    display: flex;
    padding: calc(20px + 10*(100vw - 320px)/1600);
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: none;
}

.modal .modal-dialog .modal-content .modal-footer .btn {
    width: 100%;
    margin: 0;
    padding: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320))) calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
    white-space: nowrap;
}

.modal.success-modal .modal-dialog .modal-content .modal-body .btn {
    margin-top: 24px;
}

.modal-backdrop {
    background-color: rgba(var(--black), 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 998;
}

.modal-backdrop.show {
    opacity: 1;
    background-color: rgba(var(--black), 0.5);
}

.input-form-dialog .modal-dialog .modal-content .modal-header,
.list-data-dialog .modal-dialog .modal-content .modal-header {
    padding: 24px 24px 12px 24px;
}

.input-form-dialog .modal-content .modal-header .modal-title,
.list-data-dialog .modal-content .modal-header .modal-title {
    font-size: 18px;
    font-weight: 400;
    color: rgba(var(--dark-color), 1);
    margin-right: 8px;
    display: flex;
}

.input-form-dialog .modal-content .modal-header .modal-title .modal-title-back-btn {
    width: 24px;
    height: 24px;
    color: rgba(var(--dark-color), 1);
    margin-right: 10px;
    background: transparent;
    border: 0;
    padding: 0;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-form-dialog .modal-content .modal-header .btn-close {
    width: 24px;
    height: 24px;
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-form-dialog .modal-dialog .modal-content .modal-footer,
.list-data-dialog .modal-dialog .modal-content .modal-footer {
    padding: 12px 24px 24px 24px;
}

.input-form-dialog .modal-dialog .modal-content .modal-body,
.list-data-dialog .modal-dialog .modal-content .modal-body {
    padding: 12px 24px;
}

.input-form-dialog .modal-dialog .modal-content .modal-body .row {
    row-gap: 14px;
}

.input-form-dialog .modal-dialog .modal-content .modal-body.raw-gap-0 .row {
    row-gap: 0;
}

.list-data-dialog .list-data-dialog-text-body .list-data-dialog-text-row {
    display: flex;
    border-bottom: 1px dashed rgba(var(--gray-color), 1);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.list-data-dialog .list-data-dialog-text-body .list-data-dialog-text-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.list-data-dialog-text-row .list-data-dialog-text-title {
    font-size: 14px;
    font-weight: 300;
    color: rgba(var(--black), 1);
}

.list-data-dialog-text-row .list-data-dialog-text-paragraph {
    font-size: 14px;
    font-weight: 400;
    color: rgba(var(--black), 1);
    margin-left: auto;
    font-family: var(--font-nunito);
    text-align: right;
}

.list-data-dialog-text-row .list-data-dialog-footer-title {
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--black), 1);
}

.alert-dialog .modal-btn-row {
    margin-top: 16px;
}

.alert-dialog .modal-dialog .modal-content .modal-body .btn {
    margin-top: 0;
}

.modal.modal-1 .modal-dialog .modal-content .modal-header {
    background-color: rgba(var(--gray-color), 1);
    padding: 18px;

}

.modal.modal-1 .modal-dialog .modal-content .modal-header .modal-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}

.modal.modal-1 .modal-dialog .modal-content .modal-body .table thead tr th:last-child,
.modal.modal-1 .modal-dialog .modal-content .modal-body .table tbody tr td:last-child {
    text-align: left;
}

.modal.modal-1 .modal-dialog .modal-content .modal-body #info_box_body .table {
    border-top: 1px solid rgba(var(--border-color-3), 1);
}

.modal.modal-1 .modal-dialog .modal-content .modal-body #info_box_body .table thead tr th,
.modal.modal-1 .modal-dialog .modal-content .modal-body #info_box_body .table tbody tr td {
    padding: 18px 12px;
}

.employee-data-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 15px 0;
}

.employee-data-list li {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    padding: 6px calc(12px + (28 - 12) * ((100vw - 320px) / (1920 - 320)));
    border-right: 1px solid rgba(var(--gray-color), 1);
    text-transform: capitalize;
    display: inline-block;
}

.employee-data-list li:last-child {
    border-right: none;
}

/* Pagination */
.pagination {
    margin-top: calc(20px + 4*(100vw - 320px)/1600);
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(30px + 10*(100vw - 320px)/1600);
    height: calc(30px + 10*(100vw - 320px)/1600);
    border-radius: 8px;
    background-color: rgba(var(--black), 0);
    border: none;
    box-shadow: none;
    outline: none;
    color: rgba(var(--dark-gray-color-1), 1);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    padding: 0
}

.pagination .page-item .page-link.active {
    color: rgba(var(--white), 1);
    background-color: rgba(var(--primary-color), 1)
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    width: unset;
    height: auto;
    gap: calc(3px + 3*(100vw - 320px)/1600);
    color: rgba(var(--dark-gray-color-2), 1);
    padding: calc(3px + 4*(100vw - 320px)/1600) calc(7px + 7*(100vw - 320px)/1600)
}

.pagination .page-item:first-child .page-link[aria-disabled=true],
.pagination .page-item:last-child .page-link[aria-disabled=true] {
    color: rgba(var(--dark-gray-color-1), 1)
}

/* Select2 css */
.dashboard-form-select~.select2-container {
    min-width: 140px
}

.dashboard-form-select~.select2-container.select2-container--default .select2-selection--single,
.dashboard-form-select~.select2-container.select2-container--default .select2-selection--multiple {
    border: 1px solid rgba(var(--gray-color-1), 1)
}

.dashboard-form-select~.select2-container.select2-container--default .select2-dropdown {
    border: 1px solid rgba(var(--gray-color-1), 1);
}

.dashboard-form-select~.select2-container.select2-container--default .select2-dropdown .select2-search.select2-search--dropdown .select2-search__field {
    border: 1px solid rgba(var(--gray-color-1), 1)
}

.form-group .select2 {
    width: 100% !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #e9ecef;
}

.select2-container.select2-container--default .select2-selection--single,
.select2-container.select2-container--default .select2-selection--multiple {
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: var(--border-radius);
    height: unset;
    outline: none;
    padding: var(--input-padding);
    padding-right: 40px;
}

.select2-container.select2-container--default .select2-selection--multiple {
    padding: calc(10px + (12 - 11) * ((100vw - 320px) / (1920 - 320))) 40px calc(10px + (12 - 11) * ((100vw - 320px) / (1920 - 320))) calc(10px + 6 * ((100vw - 320px) / (1920 - 320)));
    background-image: url("/assets/images/down-arrow.png");
    background-size: 20px;
    background-position: center right calc(7px + (14 - 7) * ((100vw - 320px) / (1920 - 320)));
    background-repeat: no-repeat;
    display: inline-flex;
    width: 100%;
    min-height: unset;
    max-height: 200px;
    overflow: auto;
}

.select2-container.select2-container--default .select2-selection--multiple::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.select2-container.select2-container--default .select2-selection--multiple-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(var(--black), 0);
    border-radius: 10px;
}

.select2-container.select2-container--default .select2-selection--multiple-webkit-scrollbar-thumb {
    background: rgba(var(--dark-gray-color), 0.2);
    border-radius: 10px;
}

.select2-container--default .select2-search--inline .select2-search__field {
    font-family: var(--font-nunito);
    margin: 0;
    height: 24px;
}

.select2-container--default .select2-search--inline .select2-search__field .select2-search.select2-search--inline {
    display: inline-block;
}

.select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    font-family: var(--font-nunito);
    padding: 6px 7px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 5px;
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: 4px;
    background-color: rgba(var(--gray-color-4), 1);
    color: rgba(var(--dark-color), 1);
}

.select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
    padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    width: 14px;
    height: 14px;
    background-image: url('/assets/images/svg/close.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0;
    position: unset;
    color: rgba(var(--dark-color), 1);
    border: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove span {
    display: none;
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: rgba(var(--dark-color), 1);
    line-height: 1.35;
    font-weight: 400;
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    font-family: var(--font-nunito);
    padding: 0;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: unset;
    white-space: unset;
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__placeholder {
    color: rgba(var(--font-color), 1);
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__arrow {
    background-image: url("/assets/images/down-arrow.png");
    background-size: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(7px + (14 - 7) * ((100vw - 320px) / (1920 - 320)));
    width: 20px;
    height: 20px
}

.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container.select2-container--default .select2-selection--multiple .select2-selection__arrow b {
    display: none
}

.select2-container.select2-container--default .select2-dropdown {
    border: 1px solid rgba(var(--gray-color), 1);
    border-top: none;
    z-index: 14;
}

.select2-container.select2-container--default .select2-dropdown .select2-search.select2-search--dropdown {
    padding: 6px
}

.select2-container.select2-container--default .select2-dropdown .select2-search.select2-search--dropdown .select2-search__field {
    outline: none;
    line-height: 1.35;
    font-weight: 400;
    font-size: 14px;
    font-family: var(--font-nunito);
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: 4px;
}

.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__options::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__options::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(var(--black), 0);
    border-radius: 10px
}

.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__options::-webkit-scrollbar-thumb {
    background: rgba(var(--dark-gray-color), 0.2);
    border-radius: 10px
}

.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__options .select2-results__option {
    color: rgba(var(--dark-color), 1);
    display: block;
    background-color: rgba(var(--black), 0);
    line-height: 1.35;
    font-weight: 400;
    font-size: 14px;
    font-family: var(--font-nunito);
    padding: 8px
}

.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--selected {
    background-color: rgba(var(--bg-color), 1);
    color: rgba(var(--dark-color), 1)
}

.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(var(--bg-color), 1);
    color: rgba(var(--dark-color), 1)
}

.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--disabled {
    opacity: 0.5;
}

/* Table css */
.lmg-lod-table .lmg-lod-table-title {
    max-width: 200px;
    min-width: 200px;
}

.lmg-lod-table .lmg-lod-table-type {
    max-width: 120px;
    min-width: 120px;
}

.lmg-lod-table thead tr th:nth-child(1),
.lmg-lod-table thead tr th:nth-child(2),
.lmg-lod-table thead tr th:nth-child(3) {
    min-width: 170px;
}

.lmg-leave-info-table thead tr th:last-child{
    text-align: left !important;
}

.table-top-panel {
    margin-bottom: calc(20px + 4*(100vw - 320px)/1600);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.table-top-panel.panel-2 {
    background-color: rgba(var(--white), 1);
    padding: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 8px;
}

.table-top-panel .top-right-part {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320)));
    margin-left: auto;
    width: 100%;
}

.table-top-panel .top-right-part .top-right-part-btn-row {
    display: flex;
    align-items: center;
    gap: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320)));
}

.table-top-panel .top-right-part .action-div .dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
    border-radius: var(--border-radius);
    background-color: rgba(var(--white), 1);
}

.table-top-panel .top-right-part .action-div .dropdown .dropdown-toggle svg {
    width: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
    height: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320)));
}

.table-top-panel .top-right-part .form-select-div {
    position: relative;
    min-width: 220px;
}

.table-top-panel .top-right-part .form-select-div .select2-container.select2-container--default .select2-selection--single {
    padding: calc(10px + 6*(100vw - 320px)/1600) 40px calc(10px + 4*(100vw - 320px)/1600) calc(10px + 6*(100vw - 320px)/1600);
}

.table-top-panel .top-right-part .form-select-div .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
}

.table-top-panel .top-right-part .form-select-div svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    width: calc(20px + 4*(100vw - 320px)/1600);
    height: calc(20px + 4*(100vw - 320px)/1600);
    z-index: 14;
    color: rgba(var(--dark-gray-color-1), 1);
}

.table-top-panel .top-right-part .form-select-div .form-select {
    width: 100%;
}

.table-top-panel .top-right-part .form-select-div .form-select~.select2-container {
    z-index: 9;
}

.table-top-panel .top-right-part .btn {
    width: -moz-max-content;
    width: max-content;
    padding: calc(9px + (11 - 9) * ((100vw - 320px) / (1920 - 320))) 20px;
    white-space: nowrap;
}

.dt-container .table-pagination-footer {
    display: flex;
    align-items: center;
    margin-top: calc(20px + 4*(100vw - 320px) / 1600);
}

.dt-container .table-pagination-footer .dt-length {
    width: 135px;
}

.dt-container .table-pagination-footer .dt-length>label {
    margin-bottom: 0;
}

.dt-container .table-pagination-footer .paging_simple_numbers {
    margin-top: 0;
    margin-left: auto;
}

.employee-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-box img,
.employee-box svg {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    object-fit: cover;
    color: rgba(var(--primary-color), 1);
}

.table {
    margin-bottom: 0;
}

.table tr {
    vertical-align: middle;
}

.table tr.saturday td {
    background-color: rgba(var(--table-bg-color-1), 1);
    color: rgba(var(--table-font-color), 1);
}

.table tr.sunday td {
    background-color: rgba(var(--table-bg-color), 1);
}

.table tr td:last-child,
.table tr th:last-child {
    text-align: center;
}

.table thead tr th {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: capitalize;
    padding: 12px;
    color: rgba(var(--dark-color), 1);
}

.table tbody tr td,
table.dataTable>tbody>tr>td {
    border-top: 1px solid rgba(var(--border-color), 1);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.36;
    border-bottom: none;
    color: rgba(var(--light-black), 1);
    padding: 12px;
    text-transform: capitalize;
    font-family: var(--font-nunito);
}

table.dataTable>tbody>tr>td[style*="color: #EC4E2C"] .emp-name {
    color: #EC4E2C;
}

table.dataTable>tbody>tr>td[style*="color: #EF9400"] .emp-name {
    color: #EF9400;
}

.table tbody tr td a,
table.dataTable>tbody>tr>td a {
    font-size: 14px;
}

table.dataTable>tbody>tr:first-child>* {
    border-top: 1px solid rgba(var(--border-color), 1);
}

.dt-container .dataTable {
    border: 1px solid rgba(var(--gray-color-1));
    border-radius: var(--border-radius);
    overflow: hidden;
    border-collapse: unset;
}

.card .card-body .dt-container .dataTable {
    border: none;
}

.table tbody tr td .emp-name {
    font-size: 14px;
    line-height: 1.36;
    color: rgba(var(--black), 1);
    font-weight: 600;
}

table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td {
    padding: 12px;
    border-bottom: none;
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: left;
}

div.dt-container.dt-empty-footer tbody>tr:last-child>* {
    border-bottom: 0;
}

.dt-container .paging_simple_numbers {
    margin-top: calc(20px + 4*(100vw - 320px) / 1600);
}

.dt-container .paging_simple_numbers nav {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px;
}

div.dt-container .paging_simple_numbers nav .dt-paging-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: calc(30px + 10*(100vw - 320px) / 1600);
    width: calc(30px + 10*(100vw - 320px) / 1600);
    height: calc(30px + 10*(100vw - 320px) / 1600);
    border-radius: 6px;
    background: rgba(var(--black), 0);
    border: 0 !important;
    box-shadow: none;
    outline: none;
    color: rgba(var(--dark-gray-color-1), 1);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    padding: 0;
    margin: 0;
}

div.dt-container .paging_simple_numbers nav .dt-paging-button:hover {
    background: rgba(var(--dark-color), 0.1);
    color: rgba(var(--dark-color), 1) !important;
}

div.dt-container .dt-paging .dt-paging-button:active {
    background: rgba(var(--dark-color), 0);
    box-shadow: none;
}

div.dt-container .paging_simple_numbers nav .dt-paging-button.previous,
div.dt-container .paging_simple_numbers nav .dt-paging-button.next {
    min-width: max-content;
    width: auto;
    height: auto;
    gap: calc(3px + 3*(100vw - 320px) / 1600);
    color: rgba(var(--dark-gray-color-2), 1);
    padding: calc(6px + 4*(100vw - 320px) / 1600) calc(7px + 7*(100vw - 320px) / 1600);
    border: 0 !important;
}

div.dt-container .dt-paging .ellipsis {
    padding: 0;
    width: calc(30px + 10*(100vw - 320px) / 1600);
    height: calc(30px + 10*(100vw - 320px) / 1600);
    display: flex;
    align-items: center;
    justify-content: center;
}

div.dt-container .paging_simple_numbers nav .dt-paging-button.current,
div.dt-container .paging_simple_numbers nav .dt-paging-button.current:hover {
    color: rgba(var(--white), 1) !important;
    background: rgba(var(--primary-color), 1);
}

div.dt-container .paging_simple_numbers nav .dt-paging-button.disabled,
div.dt-container .paging_simple_numbers nav .dt-paging-button.disabled:hover {
    color: rgba(var(--dark-color), 1) !important;
    opacity: 0.5;
}

div.dt-container .dt-search {
    position: relative;
    max-width: 260px;
    width: 100%;
    display: inline-flex;
}

div.dt-container .dt-search .dt-input {
    font-family: var(--font-nunito);
    padding: var(--input-padding);
    font-size: calc(14px + 2*(100vw - 320px) / 1600);
    line-height: 1.35;
    border-radius: var(--border-radius);
    width: 100%;
    font-weight: 400;
    border: 1px solid rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
    background: rgba(var(--white), 1);
    margin-left: 0;
    padding-left: 50px;
    outline: 0;
    margin-bottom: 0;
}

div.dt-container .dt-search label {
    background-image: url('../images/search-icon.svg');
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    width: calc(20px + 2*(100vw - 320px) / 1600);
    height: calc(20px + 2*(100vw - 320px) / 1600);
    margin: 0;
}


.leave-list-table tr td:last-child .lmg-badges {
    margin: 0 auto;
}

.table tbody tr td .action-div {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto;
}

.table tbody tr td .action-div .view,
.table tbody tr td .action-div .menu {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(var(--gray-color-1), 1);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--dark-color), 1);
    background-color: rgba(var(--white), 1);
    outline: none;
}

.table tbody tr td button.deduct-modal{
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    background-color: transparent;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.table tbody tr td button.deduct-modal svg{
    width: 100%; 
    height: 100%
}

.table tbody tr td .action-div .view svg,
.table tbody tr td .action-div .menu svg {
    width: 20px;
    height: 20px
}

/* attendance table */
.table.attendance-table tr th,
.table.attendance-table tr td {
    text-align: center
}

.table.attendance-table tr th:first-child,
.table.attendance-table tr td:first-child {
    text-align: left
}

.table.attendance-table thead tr th {
    padding: 12px 20px;
    line-height: 1.25;
    color: rgba(var(--font-color), 1);
    background-color: rgba(var(--bg-color), 1)
}

.table.attendance-table thead tr th:nth-child(1) {
    padding-left: 24px;
    min-width: 250px
}

.table.attendance-table thead tr th:nth-child(2) {
    min-width: 125px
}

.table.attendance-table thead tr th:nth-child(3) {
    min-width: 135px
}

.table.attendance-table thead tr th:nth-child(4) {
    min-width: 152px
}

.table.attendance-table thead tr th:last-child {
    padding-right: 24px
}

.table.attendance-table tbody tr td {
    border-top: 1px solid rgba(var(--border-color), 1);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    padding: 9px 20px;
    border-bottom: none;
    color: rgba(var(--dark-color), 1)
}

.table.attendance-table tbody tr td:first-child {
    padding-left: 24px
}

.table.attendance-table tbody tr td:last-child {
    padding-right: 24px
}

.table.attendance-table tbody tr td:nth-child(2),
.table.attendance-table tbody tr td:nth-child(3),
.table.attendance-table tbody tr td:nth-child(4) {
    font-family: var(--font-nunito)
}

.table.attendance-table tbody tr td .user-box {
    display: flex;
    align-items: center;
    gap: 10px
}

.table.attendance-table tbody tr td .user-box img,
.table.attendance-table tbody tr td .user-box svg {
    min-width: 24px;
    width: 24px;
    height: 24px;
    border-radius: 100%;
}

.table.attendance-table tbody tr td .user-box h6 {
    font-weight: 400;
    color: rgba(var(--dark-color), 1)
}

.table.attendance-table tbody tr td.text-error {
    color: rgba(var(--error-color), 1)
}

/* Checkin checkout detail table */
.table.checkin-checkout-detail-table thead tr th:nth-child(1) {
    min-width: 110px
}

.table.checkin-checkout-detail-table thead tr th:nth-child(2) {
    min-width: 65px
}

.table.checkin-checkout-detail-table thead tr th:nth-child(3) {
    min-width: 90px
}

.table.checkin-checkout-detail-table thead tr th:nth-child(4) {
    min-width: 100px
}

.table.checkin-checkout-detail-table thead tr th:nth-child(5) {
    min-width: 98px
}

.table.checkin-checkout-detail-table thead tr th:nth-child(6) {
    min-width: 105px
}

.table.checkin-checkout-detail-table thead tr th:nth-child(7) {
    min-width: 95px
}

.table.checkin-checkout-detail-table thead tr th:nth-child(8) {
    min-width: 85px
}

.table.checkin-checkout-detail-table thead tr th:nth-child(9) {
    min-width: 105px
}

/* checkin checkout list table */
.table.checkin-checkout-list-table thead tr th {
    min-width: 110px
}

.table.checkin-checkout-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.checkin-checkout-list-table thead tr th:nth-child(2) {
    min-width: 250px
}

.table.checkin-checkout-list-table thead tr th:last-child {
    min-width: unset
}

/* salary list table */
.table.salary-list-table thead tr th:nth-child(1) {
    min-width: 90px;
    width: 90px;
}

.table.salary-list-table thead tr th:nth-child(2) {
    min-width: 150px
}

.table.salary-list-table thead tr th:nth-child(3) {
    min-width: 250px
}

.table.salary-list-table thead tr th:nth-child(4) {
    min-width: 90px
}

/* salary detail list table */
.table.salary-detail-list-table thead tr th:nth-child(1),
.table.salary-detail-list-table thead tr th:nth-child(2),
.table.salary-detail-list-table thead tr th:nth-child(3),
.table.salary-detail-list-table thead tr th:nth-child(4),
.table.salary-detail-list-table thead tr th:nth-child(5) {
    min-width: 170px;
}

.table.salary-detail-list-table thead tr th:nth-child(6) {
    min-width: 190px
}

.table.salary-detail-list-table thead tr th:nth-child(7) {
    min-width: 120px
}

/* branch list table */
.table.branch-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.branch-list-table thead tr th:nth-child(2) {
    min-width: 180px
}

.table.branch-list-table thead tr th:nth-child(3) {
    min-width: 130px
}

.table.branch-list-table thead tr th:nth-child(4) {
    min-width: 300px
}

.table.branch-list-table thead tr th:nth-child(5) {
    min-width: 160px
}

.table.branch-list-table thead tr th:nth-child(6),
.table.branch-list-table thead tr th:nth-child(8) {
    min-width: 170px
}

.table.branch-list-table thead tr th:nth-child(7) {
    min-width: 130px;
}

/* designation list table */
.table.designation-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.designation-list-table thead tr th:nth-child(2) {
    min-width: 200px
}

.table.designation-list-table tbody tr td .line-clamp-3 {
    max-width: 280px;
}

.table.designation-list-table thead tr th:nth-child(3) {
    min-width: 280px
}

.table.designation-list-table thead tr th:nth-child(4),
.table.designation-list-table thead tr th:nth-child(5),
.table.designation-list-table thead tr th:nth-child(7) {
    min-width: 130px
}

.table.designation-list-table thead tr th:nth-child(6),
.table.designation-list-table thead tr th:nth-child(8) {
    min-width: 170px
}

/* meeting list table */
.table.meeting-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.meeting-list-table thead tr th:nth-child(2) {
    min-width: 200px
}

.table.meeting-list-table thead tr th:nth-child(3) {
    min-width: 180px;
}

.table.meeting-list-table thead tr th:nth-child(4) {
    min-width: 120px
}

.table.meeting-list-table thead tr th:nth-child(5) {
    min-width: 170px
}

.table.meeting-list-table thead tr th:nth-child(6) {
    min-width: 170px
}

.table.meeting-list-table thead tr th:nth-child(7) {
    min-width: 160px
}

.table.meeting-list-table thead tr th:nth-child(8) {
    min-width: 250px;
    width: 100%;
}

.table.meeting-list-table thead tr th:last-child,
.table.meeting-list-table tbody tr td:last-child {
    text-align: left;
}

/* employee list table */
.table.employee-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.employee-list-table thead tr th:nth-child(2) {
    min-width: 140px
}

.table.employee-list-table thead tr th:nth-child(3) {
    min-width: 230px;
}

.table.employee-list-table thead tr th:nth-child(4) {
    min-width: 140px
}

.table.employee-list-table thead tr th:nth-child(5),
.table.employee-list-table thead tr th:nth-child(6) {
    min-width: 135px
}

.table.employee-list-table thead tr th:nth-child(7) {
    min-width: 120px
}

/* teams list table */
.table.team-list-table thead tr th:nth-child(1) {
    min-width: 70px;
}

.table.team-list-table thead tr th:nth-child(2) {
    min-width: 200px;
}

.table.team-list-table thead tr th:nth-child(3) {
    min-width: 250px;
}

.table.team-list-table thead tr th:nth-child(4) {
    min-width: 170px;
}

.table.team-list-table thead tr th:nth-child(5),
.table.team-list-table thead tr th:nth-child(6) {
    min-width: 210px;
}

.table.team-list-table thead tr th:nth-child(7) {
    min-width: 110px;
}

/* team detail table */
.table.team-detail-table thead tr th:nth-child(1) {
    min-width: 90px
}

.table.team-detail-table thead tr th:nth-child(2) {
    min-width: 200px
}

.table.team-detail-table thead tr th:nth-child(3) {
    min-width: 300px;
}

.table.team-detail-table thead tr th:nth-child(4) {
    min-width: 120px
}

/* module list table */
.table.module-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.module-list-table thead tr th:nth-child(2) {
    min-width: 170px
}

.table.module-list-table thead tr th:nth-child(3) {
    min-width: 200px;
}

.table.module-list-table thead tr th:nth-child(4) {
    min-width: 150px
}

.table.module-list-table thead tr th:nth-child(5) {
    min-width: 170px
}

.table.module-list-table thead tr th:nth-child(6) {
    min-width: 180px;
}

.table.module-list-table thead tr th:nth-child(7) {
    min-width: 150px
}

/* leave list table */
.table.leave-list-table thead tr th:nth-child(1) {
    min-width: 70px;
}

.table.leave-list-table thead tr th:nth-child(2) {
    min-width: 200px;
}

.table.leave-list-table thead tr th:nth-child(3) {
    min-width: 150px;
}

.table.leave-list-table thead tr th:nth-child(4) {
    min-width: 135px;
}

.table.leave-list-table thead tr th:nth-child(5) {
    min-width: 170px;
}

.table.leave-list-table thead tr th:nth-child(6) {
    min-width: 300px;
    max-width: 300px;
}

.table.leave-list-table tbody tr td .leave-list-table-reason {
    min-width: 300px;
    max-width: 300px;
}

.table.leave-list-table thead tr th:nth-child(7) {
    min-width: 170px;
}

.table.leave-list-table thead tr th:nth-child(8) {
    min-width: 110px;
}

/* Ot permission table */
.table.ot-permission-table thead tr th:nth-child(1) {
    min-width: 70px;
}

.table.ot-permission-table thead tr th:nth-child(2) {
    min-width: 120px;
}

.table.ot-permission-table thead tr th:nth-child(3) {
    min-width: 200px;
}

.table.ot-permission-table thead tr th:nth-child(4) {
    min-width: 140px;
}

.table.ot-permission-table thead tr th:nth-child(5) {
    min-width: 120px;
}

/* work from home table */
.table.wfh-list-table thead tr th:nth-child(1) {
    min-width: 70px;
}

.table.wfh-list-table thead tr th:nth-child(2) {
    min-width: 200px;
}

.table.wfh-list-table thead tr th:nth-child(3) {
    min-width: 200px;
}

.table.wfh-list-table thead tr th:nth-child(4),
.table.wfh-list-table thead tr th:nth-child(5) {
    min-width: 170px;
}

.table.wfh-list-table thead tr th:nth-child(6) {
    min-width: 150px;
}

/* seller list table */
.table.seller-list-table thead tr th:nth-child(1) {
    min-width: 70px;
}

.table.seller-list-table thead tr th:nth-child(2) {
    min-width: 200px;
}

.table.seller-list-table thead tr th:nth-child(3) {
    min-width: 230px;
}

.table.seller-list-table thead tr th:nth-child(4) {
    min-width: 130px;
}

.table.seller-list-table thead tr th:nth-child(5) {
    min-width: 110px;
}

/* banner list table */
.table.banner-list-table thead tr th:nth-child(1) {
    min-width: 70px;
}

.table.banner-list-table thead tr th:nth-child(2) {
    min-width: 200px;
}

.table.banner-list-table thead tr th:nth-child(3),
.table.banner-list-table thead tr th:nth-child(4),
.table.banner-list-table thead tr th:nth-child(5),
.table.banner-list-table thead tr th:nth-child(6),
.table.banner-list-table thead tr th:nth-child(7) {
    min-width: 170px;
}

.table.banner-list-table thead tr th:nth-child(8) {
    min-width: 130px;
}

/* video list table */
.table.video-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.video-list-table thead tr th:nth-child(2) {
    min-width: 200px
}

.table.video-list-table thead tr th:nth-child(3) {
    min-width: 170px
}

.table.video-list-table thead tr th:nth-child(4) {
    min-width: 160px
}

.table.video-list-table thead tr th:nth-child(5) {
    min-width: 160px
}

.table.video-list-table thead tr th:nth-child(6) {
    min-width: 200px
}

/* all Leads table */
.table.all-leads-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.all-leads-table thead tr th:nth-child(2) {
    min-width: 200px
}

.table.all-leads-table thead tr th:nth-child(3) {
    min-width: 190px
}

.table.all-leads-table thead tr th:nth-child(4) {
    min-width: 150px
}

.table.all-leads-table thead tr th:nth-child(5) {
    min-width: 220px
}

.table.all-leads-table thead tr th:nth-child(6) {
    min-width: 170px
}

.table.all-leads-table thead tr th:nth-child(7),
.table.all-leads-table thead tr th:nth-child(8) {
    min-width: 140px
}

.table.all-leads-table thead tr th:nth-child(9) {
    min-width: 170px
}

/*all guest card list table */
.table.all-guest-card-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.all-guest-card-list-table thead tr th:nth-child(2) {
    min-width: 170px
}

.table.all-guest-card-list-table thead tr th:nth-child(3) {
    min-width: 170px
}

.table.all-guest-card-list-table thead tr th:nth-child(4) {
    min-width: 170px
}

.table.all-guest-card-list-table thead tr th:nth-child(5) {
    min-width: 160px
}

.table.all-guest-card-list-table thead tr th:nth-child(6) {
    min-width: 170px
}

.table.all-guest-card-list-table thead tr th:nth-child(7) {
    min-width: 90px
}

/*all guest card list table */
.table.guest-card-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.guest-card-list-table thead tr th:nth-child(2) {
    min-width: 170px
}

.table.guest-card-list-table thead tr th:nth-child(3) {
    min-width: 170px
}

.table.guest-card-list-table thead tr th:nth-child(4) {
    min-width: 170px
}

.table.guest-card-list-table thead tr th:nth-child(5) {
    min-width: 130px
}

/* guest entry list table */
.table.guest-entry-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.guest-entry-list-table thead tr th:nth-child(2) {
    min-width: 140px
}

.table.guest-entry-list-table thead tr th:nth-child(3) {
    min-width: 170px
}

.table.guest-entry-list-table thead tr th:nth-child(4) {
    min-width: 140px
}

.table.guest-entry-list-table thead tr th:nth-child(5) {
    min-width: 270px
}

.table.guest-entry-list-table thead tr th:nth-child(6) {
    min-width: 170px
}

.table.guest-entry-list-table thead tr th:nth-child(7) {
    min-width: 120px
}

.table.guest-entry-list-table thead tr th:nth-child(8) {
    min-width: 200px
}

.table.guest-entry-list-table thead tr th:last-child,
.table.guest-entry-list-table tbody tr td:last-child {
    text-align: left;
}

.table.guest-entry-list-table tbody tr td.dt-empty {
    text-align: center;
}

/* area list table */
.table.area-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.area-list-table thead tr th:nth-child(2) {
    min-width: 200px;
    width: 100%;
}

.table.area-list-table thead tr th:nth-child(3) {
    min-width: 90px
}

/* territory list table */
.table.territory-list-table thead tr th:nth-child(1) {
    min-width: 200px
}

.table.territory-list-table thead tr th:nth-child(2),
.table.territory-list-table thead tr th:nth-child(3) {
    min-width: 160px;
}


/* week off request table */
.table.week-off-request-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.week-off-request-table thead tr th:nth-child(2) {
    min-width: 200px;
}

.table.week-off-request-table thead tr th:nth-child(3),
.table.week-off-request-table thead tr th:nth-child(4) {
    min-width: 170px
}

.table.week-off-request-table thead tr th:nth-child(5) {
    min-width: 300px;
    max-width: 300px;
}

.table.week-off-request-table tbody tr td .leave-list-table-reason {
    min-width: 300px;
    max-width: 300px;
}

.table.week-off-request-table thead tr th:nth-child(6) {
    min-width: 100px
}

/* mass leave table */
.table.mass-leave-table thead tr th:nth-child(1) {
    min-width: 70px;
}

.table.mass-leave-table thead tr th:nth-child(2) {
    min-width: 170px
}

.table.mass-leave-table thead tr th:nth-child(3) {
    min-width: 300px;
    max-width: 300px;
}

.table.mass-leave-table tbody tr td .leave-list-table-reason {
    min-width: 300px;
    max-width: 300px;
}

.table.mass-leave-table thead tr th:last-child {
    min-width: 180px;
    text-align: left;
}

.table.mass-leave-table tbody tr td:last-child {
    text-align: left;
}

.table.mass-leave-table tbody tr td.dt-empty {
    text-align: center;
}

.table.mass-leave-table tbody tr td:nth-child(3) {
    word-break: break-all;
}

/* request master table */
.table.request-master-table thead tr th:nth-child(1),
.table.request-master-table-1 thead tr th:nth-child(1) {
    min-width: 70px;
}

.table.request-master-table thead tr th:nth-child(2),
.table.request-master-table thead tr th:nth-child(3),
.table.request-master-table-1 thead tr th:nth-child(2),
.table.request-master-table-1 thead tr th:nth-child(3),
.table.request-master-table-1 thead tr th:nth-child(4) {
    min-width: 200px;
}

.table.request-master-table thead tr th:nth-child(5) {
    min-width: 90px;
}

.table.request-master-table-1 thead tr th:nth-child(5),
.table.request-master-table thead tr th:nth-child(4) {
    min-width: 170px;
}

.table.request-master-table tbody tr td .requestedby-text {
    color: rgba(var(--primary-color), 1);
    font-size: 12px;
}

/* employee leave table */
.table.employee-leave-table tbody tr th {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: capitalize;
    color: rgba(var(--dark-color), 1);
}

.table.employee-leave-table tbody tr:nth-last-child(1) td,
.table.employee-leave-table tbody tr:nth-last-child(2) td,
.table.employee-leave-table tbody tr:nth-last-child(3) td,
.table.employee-leave-table tbody tr:nth-last-child(4) td {
    border: none;
}

.table.employee-leave-table tbody tr:nth-last-child(1) th,
.table.employee-leave-table tbody tr:nth-last-child(2) th,
.table.employee-leave-table tbody tr:nth-last-child(3) th,
.table.employee-leave-table tbody tr:nth-last-child(4) th,
.table.employee-leave-table tbody tr:nth-last-child(5) th {
    border: none;
}

.table.employee-leave-table tbody tr th {
    line-height: 1.71;
}

.table.employee-leave-table thead tr th:nth-child(1) {
    min-width: 230px
}

.table.employee-leave-table thead tr th:nth-child(2) {
    min-width: 100px
}

.table.employee-leave-table thead tr th:nth-child(3) {
    min-width: 120px;
}

.table.employee-leave-table thead tr th:nth-child(4) {
    min-width: 125px
}

.table.employee-leave-table thead tr th:nth-child(5) {
    min-width: 105px
}

/* query list table */
.table.query-list-table thead tr th:nth-child(1),
.table.suggestion-list-table thead tr th:nth-child(1) {
    min-width: 70px;
}

.table.query-list-table thead tr th:nth-child(2),
.table.suggestion-list-table thead tr th:nth-child(2) {
    min-width: 300px;
    width: 100%;
}

.table.query-list-table thead tr th:nth-child(3),
.table.suggestion-list-table thead tr th:nth-child(3) {
    min-width: 120px
}

.table.query-list-table thead tr th:nth-child(4),
.table.suggestion-list-table thead tr th:nth-child(4) {
    min-width: 110px;
}

.table.query-list-table thead tr th:nth-child(5),
.table.suggestion-list-table thead tr th:nth-child(5) {
    min-width: 120px;
}

.table.employee-record-table thead tr th:nth-child(1) {
    min-width: 210px
}

.table.employee-record-table thead tr th:nth-child(2) {
    min-width: 350px
}

.table.employee-record-table thead tr th:nth-child(3) {
    min-width: 170px;
}

.table.employee-record-table thead tr th:nth-child(4),
.table.employee-record-table thead tr th:nth-child(5),
.table.employee-record-table thead tr th:nth-child(6),
.table.employee-record-table thead tr th:nth-child(7) {
    min-width: 150px
}

.table.employee-type-table thead tr th:nth-child(1) {
    min-width: 50px;
}
.table.employee-type-table thead tr th:nth-child(2) {
    min-width: 250px
}

.table.employee-type-table thead tr th:nth-child(3) {
    min-width: 150px;
}
.table.employee-type-table tbody tr td:last-child .lmg-badges {
    margin: 5px auto 0;
}

/* late attendance table */
.late-attendance-table-responsive {
    overflow-y: auto;
    max-height: 245px;
    height: 245px;
}

.late-attendance-table-responsive table thead {
    position: sticky;
    top: 0;
}

/* Timing table */
.timing-table-main h3{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 6px;
    color: rgba(var(--dark-color), 1);
}
.timing-table.table {
    border: 1px solid rgba(var(--border-color), 1);
    border-radius: var(--border-radius);
    overflow: hidden;
    border-spacing: 0;
    border-collapse: separate;
}

.timing-table thead tr th {
    color: rgba(var(--font-color), 1);
    background-color: rgba(var(--bg-color), 1);
    min-width: 100px;
}

.timing-table tbody tr td {
    color: rgba(var(--dark-color), 1);
}

.timing-table tbody tr td:last-child,
.timing-table thead tr th:last-child {
    text-align: left;
}
.timing-table tbody tr td[colspan="3"]:last-child {
    text-align: center;
}

/* work form home table */
.table.work-from-home-table thead tr th:nth-child(1) {
    min-width: 90px
}

.table.work-from-home-table thead tr th:nth-child(2) {
    min-width: 180px
}

.table.work-from-home-table thead tr th:nth-child(3) {
    min-width: 250px;
}

.table.work-from-home-table thead tr th:nth-child(4),
.table.work-from-home-table thead tr th:nth-child(5) {
    min-width: 140px
}

.table.work-from-home-table thead tr th:nth-child(6) {
    min-width: 120px
}

/* notification list table */
.table.notification-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.notification-list-table thead tr th:nth-child(2) {
    min-width: 200px
}

.table.notification-list-table thead tr th:nth-child(3) {
    min-width: 190px;
}

.table.notification-list-table thead tr th:nth-child(4) {
    min-width: 140px
}

/* payment list table */
.table.payment-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.payment-list-table thead tr th:nth-child(2) {
    min-width: 200px;
    width: 100%;
}

.table.payment-list-table thead tr th:nth-child(3) {
    min-width: 150px
}

/* business trip list table */
.table.business-trip-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.business-trip-list-table thead tr th:nth-child(2) {
    min-width: 160px
}

.table.business-trip-list-table thead tr th:nth-child(3) {
    min-width: 190px;
}

.table.business-trip-list-table thead tr th:nth-child(4) {
    min-width: 140px
}

.table.business-trip-list-table thead tr th:nth-child(5) {
    min-width: 170px
}

.table.business-trip-list-table thead tr th:nth-child(6) {
    min-width: 120px
}

/* chat history table */
.table.chat-history-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.chat-history-table thead tr th:nth-child(2) {
    min-width: 250px;
    width: 100%;
}

.table.chat-history-table thead tr th:nth-child(3) {
    min-width: 150px
}

.table.chat-history-table thead tr th:nth-child(4) {
    min-width: 150px
}

.table.chat-history-table thead tr th:nth-child(5) {
    min-width: 150px
}

/* crm feedback list table */
.table.crm-feedback-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.crm-feedback-table thead tr th:nth-child(2) {
    min-width: 250px;
    width: 100%;
}

.table.crm-feedback-table thead tr th:nth-child(3) {
    min-width: 100px
}

.table.crm-feedback-table thead tr th:nth-child(4) {
    min-width: 160px
}

/* employee covid response list table */
.table.employee-covid-response-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.employee-covid-response-table thead tr th:nth-child(2) {
    min-width: 200px
}

.table.employee-covid-response-table thead tr th:nth-child(3),
.table.employee-covid-response-table thead tr th:nth-child(4),
.table.employee-covid-response-table thead tr th:nth-child(5),
.table.employee-covid-response-table thead tr th:nth-child(7) {
    min-width: 100px;
}

.table.employee-covid-response-table thead tr th:nth-child(6) {
    min-width: 150px;
}

.table.employee-covid-response-table thead tr th:nth-child(8),
.table.employee-covid-response-table thead tr th:nth-child(9),
.table.employee-covid-response-table thead tr th:nth-child(10) {
    min-width: 120px;
}

.table.employee-covid-response-table thead tr th:nth-child(11),
.table.employee-covid-response-table thead tr th:nth-child(12) {
    min-width: 140px;
}

.table.employee-covid-response-table thead tr th:nth-child(13) {
    min-width: 130px;
}

.table.employee-covid-response-table thead tr th:nth-child(14) {
    min-width: 100px;
}

/* visitor covid response list table */
.table.visitor-covid-response-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.visitor-covid-response-table thead tr th:nth-child(2) {
    min-width: 200px
}

.table.visitor-covid-response-table thead tr th:nth-child(3) {
    min-width: 140px;
}

.table.visitor-covid-response-table thead tr th:nth-child(4) {
    min-width: 220px;
}

.table.visitor-covid-response-table thead tr th:nth-child(5) {
    min-width: 180px;
}

.table.visitor-covid-response-table thead tr th:nth-child(6) {
    min-width: 170px;
}

.table.visitor-covid-response-table thead tr th:nth-child(7),
.table.visitor-covid-response-table thead tr th:nth-child(8),
.table.visitor-covid-response-table thead tr th:nth-child(9),
.table.visitor-covid-response-table thead tr th:nth-child(10) {
    min-width: 350px;
}

.table.visitor-covid-response-table thead tr th:nth-child(11),
.table.visitor-covid-response-table thead tr th:nth-child(12),
.table.visitor-covid-response-table thead tr th:nth-child(13) {
    min-width: 150px;
}

/* faq detail table */
.table.faq-detail-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.faq-detail-table thead tr th:nth-child(2) {
    min-width: 250px;
}

.table.faq-detail-table thead tr th:nth-child(3) {
    min-width: 250px;
}

.table.faq-detail-table tbody tr td:nth-child(3) {
    word-break: break-all;
}

/* news table */
.table.news-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.news-table thead tr th:nth-child(2) {
    min-width: 250px
}

.table.news-table thead tr th:nth-child(3) {
    min-width: 170px;
}

/* holiday table */
.table.holiday-table thead tr th:nth-child(1) {
    min-width: 160px
}

.table.holiday-table thead tr th:nth-child(2) {
    min-width: 250px
}

.table.holiday-table thead tr th:last-child,
.table.holiday-table tbody tr td:last-child {
    text-align: center;
}

.table.holiday-table thead tr th:nth-child(3),
.table.holiday-table tbody tr td:nth-child(3) {
    min-width: 300px;
    text-align: left;

}

.table.holiday-table tbody tr td.dt-empty {
    text-align: center;
}

/* loan table */
.table.loan-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.loan-table thead tr th:nth-child(2) {
    min-width: 200px
}

.table.loan-table thead tr th:nth-child(3) {
    min-width: 160px;
}

.table.loan-table thead tr th:nth-child(4) {
    min-width: 140px
}

.table.loan-table thead tr th:nth-child(5) {
    min-width: 160px;
}

.table.loan-table thead tr th:nth-child(6) {
    min-width: 140px
}

/* query suggestion table */
.table.queries-suggestions-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.queries-suggestions-table thead tr th:nth-child(2) {
    min-width: 250px
}

.table.queries-suggestions-table thead tr th:nth-child(3) {
    min-width: 170px;
}

/* learning table */
.table.learning-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.learning-table thead tr th:nth-child(2) {
    min-width: 200px;
    width: 100%;
}

/* learning pdf table */
.table.learning-pdf-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.learning-pdf-table thead tr th:nth-child(2) {
    min-width: 200px;
}

.table.learning-pdf-table thead tr th:nth-child(3) {
    min-width: 300px;
    width: 100%;
}

/* policy list table */
.table.policy-list-table thead tr th:nth-child(1) {
    min-width: 70px
}

.table.policy-list-table thead tr th:nth-child(2) {
    min-width: 250px
}

.table.policy-list-table thead tr th:nth-child(3) {
    min-width: 170px;
}

.table.present-day-table tr th:first-child,
.table.present-day-table tr td:first-child,
.table.absent-day-table tr th:first-child,
.table.absent-day-table tr td:first-child,
.table.paid-leave-table tr th:first-child,
.table.paid-leave-table tr td:first-child,
.table.unpaid-leave-table tr th:first-child,
.table.unpaid-leave-table tr td:first-child,
.table.deduction-minute-table tr th:first-child,
.table.deduction-minute-table tr td:first-child,
.table.payable-working-minute-table tr th:first-child,
.table.payable-working-minute-table tr td:first-child {
    text-align: center
}

/* present day table */
.table.present-day-table thead tr th:nth-child(1) {
    width: 110px
}

.table.present-day-table thead tr th:nth-child(2) {
    min-width: 130px
}

.table.present-day-table thead tr th:nth-child(3) {
    min-width: 150px;
}

.table.present-day-table thead tr th:nth-child(4) {
    min-width: 90px;
}

.table.present-day-table thead tr th:nth-child(5),
.table.present-day-table thead tr th:nth-child(6),
.table.present-day-table thead tr th:nth-child(7),
.table.present-day-table thead tr th:nth-child(8) {
    min-width: 110px;
}

/* absent day table */
.table.absent-day-table thead tr th:nth-child(1) {
    min-width: 110px
}

.table.absent-day-table thead tr th:nth-child(2) {
    min-width: 130px
}

.table.absent-day-table thead tr th:nth-child(3) {
    min-width: 150px;
}

.table.absent-day-table thead tr th:nth-child(4) {
    min-width: 90px;
}

.table.absent-day-table thead tr th:nth-child(5) {
    min-width: 400px;
    width: 100%;
}

/* deduction minute table */
.table.deduction-minute-table thead tr th:nth-child(1) {
    min-width: 90px
}

.table.deduction-minute-table thead tr th:nth-child(2) {
    min-width: 120px
}

.table.deduction-minute-table thead tr th:nth-child(3) {
    min-width: 120px;
}

.table.deduction-minute-table thead tr th:nth-child(4) {
    min-width: 70px;
}

.table.deduction-minute-table thead tr th:nth-child(5) {
    min-width: 100px;
}

.table.deduction-minute-table thead tr th:nth-child(6) {
    min-width: 110px;
}

.table.deduction-minute-table thead tr th:nth-child(7) {
    min-width: 100px;
}

.table.deduction-minute-table thead tr th:nth-child(8) {
    min-width: 110px;
}

.table.deduction-minute-table thead tr th:nth-child(9) {
    min-width: 100px;
}

.table.deduction-minute-table thead tr th:nth-child(10) {
    min-width: 230px;
}

/* payable working minute table */
.table.payable-working-minute-table thead tr th:nth-child(1) {
    min-width: 90px;
}

.table.payable-working-minute-table thead tr th:nth-child(2) {
    min-width: 130px
}

.table.payable-working-minute-table thead tr th:nth-child(3) {
    min-width: 150px;
}

.table.payable-working-minute-table thead tr th:nth-child(4) {
    min-width: 90px;
}

.table.payable-working-minute-table thead tr th:nth-child(5) {
    min-width: 170px;
}

/* paid & unpaid table */
.table.paid-leave-table thead tr th:nth-child(1),
.table.unpaid-leave-table thead tr th:nth-child(1) {
    min-width: 110px
}

.table.paid-leave-table thead tr th:nth-child(2),
.table.unpaid-leave-table thead tr th:nth-child(2) {
    min-width: 170px
}

.table.paid-leave-table thead tr th:nth-child(3),
.table.unpaid-leave-table thead tr th:nth-child(3) {
    min-width: 250px;
    width: 100%;
}

.table.paid-leave-table thead tr th:nth-child(4),
.table.unpaid-leave-table thead tr th:nth-child(4) {
    min-width: 130px;
}

.table.paid-leave-table thead tr th:nth-child(5),
.table.unpaid-leave-table thead tr th:nth-child(5) {
    min-width: 130px;
}

/* leave status table */
.leave-status-table thead tr th {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.15;
    background-color: rgba(var(--table-bg-color-2), 1);
    min-width: 60px;
}

.leave-status-table thead tr th:first-child {
    min-width: 240px;
}

.leave-status-table tbody tr th,
.leave-status-table tbody tr td {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    border: none;
}

.leave-status-table tbody tr:nth-child(even) th,
.leave-status-table tbody tr:nth-child(even) td {
    background-color: rgba(var(--border-color), 1);
}

.leave-status-table tbody tr th.approved {
    color: rgba(var(--status-approved), 1);
}

.leave-status-table tbody tr th.reject {
    color: rgba(var(--status-reject), 1);
}

.leave-status-table tbody tr th.eligible {
    color: rgba(var(--status-eligible), 1);
}

/* salary tds table  */
.salary-tds-table-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.salary-tds-table-row table {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.salary-tds-table-row table tbody tr:first-child td {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: capitalize;
    color: rgba(var(--dark-color), 1);
}

.salary-tds-table-row table tbody tr,
.salary-tds-table-row table tbody tr td {
    background: transparent;
}

/* payment history table */
.table.payment-history-table tr th {
    background-color: rgba(var(--bg-color), 1);
    font-weight: 500;
}

/* payable amount table */
.table.payable-amount-table tbody tr td {
    border: none;
    padding: 8px 0;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    color: rgba(var(--dark-gray-color-1), 1);
    font-family: var(--font-lexend);
}

.table.payable-amount-table tbody tr td:last-child {
    font-weight: 500;
    text-align: end;
}

.table.payable-amount-table tbody tr td input {
    border: none;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    text-align: end;
    width: 120px;
}

.table.payable-amount-table tbody tr:last-child td:first-child {
    color: rgba(var(--light-black), 1);
}

/* payment history table */
.table.payment-history-table tr th:last-child,
.table.payment-history-table tr td:last-child {
    text-align: left;
}

.table.payment-history-table thead tr th:nth-child(1) {
    min-width: 210px;
}

.table.payment-history-table thead tr th:nth-child(2) {
    min-width: 150px;
}

.table.payment-history-table thead tr th:nth-child(3) {
    min-width: 160px;
}

.table.payment-history-table thead tr th:nth-child(4) {
    min-width: 160px;
}

.table.payment-history-table thead tr th:nth-child(5) {
    min-width: 190px;
}

.table.payment-history-table thead tr th:nth-child(6) {
    min-width: 180px;
}

.table.payment-history-table thead tr th:nth-child(7) {
    min-width: 160px;
}

.table.payment-history-table thead tr th:nth-child(8) {
    min-width: 190px;
}


/* Tabs css */
.nav.vertical-tabs {
    padding: 20px 22px;
    border-bottom: none;
}

.nav.vertical-tabs .nav-item {
    display: block;
    width: 100%;
}

.nav.vertical-tabs .nav-item.custom-nav-item {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: space-between;
    width: 100%;
}

.nav.vertical-tabs .nav-item .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    font-weight: 500;
    line-height: 1.37;
    padding: 14px 0;
    color: rgba(var(--dark-gray-color-1), 1);
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid rgba(var(--gray-color-1), 1);
    margin-bottom: 0;
    font-family: var(--font-nunito);
    position: relative;
    text-transform: capitalize;
}

.nav.vertical-tabs .nav-item .nav-link svg {
    width: 20px;
    height: 20px
}

.nav.vertical-tabs .nav-item .nav-link.active {
    color: rgba(var(--primary-color), 1);
}

.nav.vertical-tabs .nav-item .nav-link.active:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -22px;
    width: 2px;
    height: 22px;
    border-radius: 10px;
    background-color: rgba(var(--primary-color), 1);
}

.nav.vertical-tabs .nav-item .nav-link:focus-visible,
.nav.horizontal-tab .nav-item .nav-link:focus-visible {
    box-shadow: none
}

.nav.vertical-tabs .nav-item:last-child .nav-link {
    border-bottom: none
}

.nav.horizontal-tab {
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: 8px;
    padding: 6px;
    width: max-content;
    background-color: rgba(var(--white), 1);
    gap: 4px;
}

.nav.horizontal-tab .nav-item .nav-link {
    width: 100%;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-nunito);
    line-height: 1.37;
    color: rgba(var(--dark-gray-color-1), 1);
    border-radius: 6px;
    text-align: center;
}

.nav.horizontal-tab .nav-item .nav-link:hover {
    background: rgba(var(--black), 0.08);
}

.nav.horizontal-tab .nav-item .nav-link.active {
    background-color: rgba(var(--primary-color), 1);
    color: rgba(var(--white), 1);
}

.p-0{
    padding: 0  !important;
}
.nav.horizontal-tab-1{
    border: none;
}

.nav.horizontal-tab-1 .nav-item .nav-link{
    border: none !important;
    padding: 16px 20px;
        font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: capitalize;
    padding: 12px;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 0;
    position: relative;
}
.nav.horizontal-tab-1 .nav-item .nav-link:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(var(--primary-color), 1);
    height: 2px;
    width: 100%;
    z-index: 1;
    opacity: 0;
}
.nav.horizontal-tab-1 .nav-item .nav-link.active{
    color: rgba(var(--primary-color), 1);
}
.nav.horizontal-tab-1 .nav-item .nav-link.active:before{
    opacity: 1;
}

/* Footer css */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: calc(100% - var(--sidebar-width));
    padding: 20px;
    margin-left: var(--sidebar-width);
    background-color: rgba(var(--white), 1);
    border-top: 1px solid rgba(var(--gray-color-1), 1);
    display: flex;
    align-items: center;
    gap: 4px
}

footer .footer-left p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.37;
    font-family: var(--font-nunito);
    letter-spacing: .5px
}

footer .footer-right {
    margin-left: auto
}

footer .footer-right p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.37;
    font-family: var(--font-nunito);
    letter-spacing: .5px;
    color: rgba(var(--black), 1)
}

footer .footer-right p span {
    font-weight: 600;
    color: rgba(var(--error-color), 1)
}

/* Header css */
header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 97;
    width: calc(100% - var(--sidebar-width));
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 20px 30px;
    margin-left: var(--sidebar-width);
    background-color: rgba(var(--white), 1);
    border-bottom: 1px solid rgba(var(--gray-color-1), 1)
}

header .header-left .page-detail {
    display: flex;
    align-items: center;
    gap: 8px
}

header .header-left .page-detail svg {
    width: 24px;
    height: 24px;
    color: rgba(var(--dark-color), 1);
}

header .header-left .header-logo a {
    aspect-ratio: 145 / 37;
    max-width: 145px;
    width: 100%;
    display: flex;
}

header .header-left .header-logo a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

header .header-right {
    margin-left: auto
}

header .header-right .navbar {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px
}

header .header-right .navbar .nav-item .nav-link {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--gray-color-1), 1)
}

header .header-right .navbar .nav-item .nav-link:focus-visible {
    box-shadow: none;
}

header .header-right .navbar .nav-item.profile-dropdown {
    width: unset;
    height: unset;
    border: none
}

header .header-right .navbar .nav-item.profile-dropdown .dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    outline: none;
    box-shadow: none;
}

header .header-right .navbar .nav-item.profile-dropdown .dropdown .dropdown-menu {
    max-width: 195px
}

header .header-right .navbar .nav-item.profile-dropdown .dropdown .dropdown-menu li:last-child {
    border-top: 1px solid rgba(var(--gray-color-1), 1);
    padding-top: 4px
}

header .header-right .navbar .nav-item.profile-dropdown .dropdown .dropdown-menu li:last-child .dropdown-item {
    color: rgba(var(--error-color), 1)
}

header .header-right .navbar .nav-item.profile-dropdown .dropdown .dropdown-menu li:last-child .dropdown-item svg {
    color: rgba(var(--error-color), 1)
}

header .header-right .navbar .nav-item.profile-dropdown .dropdown .dropdown-menu li:last-child .dropdown-item:hover {
    background-color: rgba(var(--bg-color), 1);
    color: rgba(var(--error-color), 1)
}

header .header-right .navbar .nav-item.profile-dropdown .dropdown .dropdown-menu li:last-child .dropdown-item:hover svg {
    color: rgba(var(--error-color))
}

header .header-right .navbar .nav-item>.nav-link svg {
    width: 20px;
    height: 20px;
    color: rgba(var(--dark-color), 1)
}

.profile-box {
    display: flex;
    align-items: center;
    gap: 8px
}

.profile-box .profile-image {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(var(--gray-color-1), 1);
    overflow: hidden
}

.profile-box .profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-box .profile-detail {
    text-align: left
}

.profile-box .profile-detail h3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    text-transform: capitalize;
}

.profile-box .profile-detail p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.36;
    color: rgba(var(--dark-color), 1);
    font-family: var(--font-nunito);
    text-transform: capitalize;
}

/* offcanvas css */
.offcanvas-xxl.show,
.offcanvas-lg.show {
    z-index: 99;
}

.offcanvas-lg .btn-close,
.offcanvas-xxl .btn-close {
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: none;
    outline: none;
    color: rgba(var(--dark-color), 1);
    opacity: 1;
}

.offcanvas-lg .btn-close {
    background-image: none;
}

.offcanvas-lg .btn-close svg,
.offcanvas-xxl .btn-close svg {
    width: 100%;
    height: 100%;
}

.offcanvas-backdrop {
    z-index: 98;
    transition: all 0.2s ease-in-out;
}

/* Sidebar css */
.sidebar-wrapper,
.offcanvas.offcanvas-start.sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(var(--white)) !important;
    width: var(--sidebar-width) !important;
    height: 100%;
    border-right: 1px solid rgba(var(--gray-color-1), 1);
}

.sidebar-wrapper .sidebar-logo-wrapper {
    padding: 16px 16px 20px;
    display: flex;
    align-items: center
}

.sidebar-wrapper .sidebar-logo-wrapper img {
    height: 35px;
    width: auto
}

.sidebar-wrapper .sidebar {
    padding: 0 16px 16px;
    overflow: auto;
    height: calc(100vh - 71px);
    scrollbar-width: none;
}

.sidebar-wrapper .sidebar li {
    display: block
}

.sidebar-wrapper .sidebar li a {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    background-color: rgba(var(--black), 0);
    color: rgba(var(--dark-gray-color), 1);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.36;
    font-family: var(--font-nunito);
    text-decoration: none;
    letter-spacing: .25px;
    text-transform: capitalize;
    border: 1ps solid rgba(var(--gray-color-1), 0.2)
}

.sidebar-wrapper .sidebar li a svg {
    width: 20px;
    height: 20px;
}

.sidebar-wrapper .sidebar li a .dropdown-arrow {
    margin-left: auto;
    transform: rotate(0deg);
    transition: all .2s ease
}

.sidebar-wrapper .sidebar li a:hover {
    background-color: rgba(var(--bg-color), 1);
    color: rgba(var(--dark-color), 1)
}

.sidebar-wrapper .sidebar .sidebar-item {
    margin: 3px 0px;
}

.sidebar-wrapper .sidebar .sidebar-item:first-child {
    margin-top: 0;
}

.sidebar-wrapper .sidebar .sidebar-item:last-child {
    margin-top: 0;
}

.sidebar-wrapper .sidebar li .sidebar-menu {
    display: none;
    padding: 4px 0 0 12px
}

.sidebar-wrapper .sidebar li .sidebar-menu li a {
    font-size: 14px;
    position: relative;
    padding-left: 30px
}

.sidebar-wrapper .sidebar li .sidebar-menu li a:before {
    content: "";
    background-color: rgba(var(--dark-color), 0.5);
    border-radius: 100%;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px
}

.sidebar-wrapper .sidebar li .sidebar-menu li a:hover:before {
    background-color: rgba(var(--dark-color), 1)
}

.sidebar-wrapper .sidebar li .sidebar-menu li.active a {
    color: rgba(var(--primary-color), 1);
    background-color: rgba(var(--black), 0)
}

.sidebar-wrapper .sidebar li .sidebar-menu li.active a:before {
    background-color: rgba(var(--primary-color), 1)
}

.sidebar-wrapper .sidebar li.active .sidebar-link {
    background-color: rgba(var(--bg-color), 1);
    color: rgba(var(--dark-color), 1)
}

.sidebar-wrapper .sidebar li.active .sidebar-link svg {
    color: rgba(var(--primary-color), 1)
}

.sidebar-wrapper .sidebar li.active .sidebar-link .dropdown-arrow {
    transform: rotate(180deg);
    transition: all .2s ease
}

.sidebar-wrapper .sidebar li.active .sidebar-menu {
    display: block
}

/* Profile css */
.page-wrapper .page-body {
    margin-left: var(--sidebar-width);
    padding: 20px;
    padding-bottom: 80px;
    letter-spacing: .25px
}

.page-wrapper .page-body .page-body-left {
    width: calc(100% - var(--page-body-right-width))
}

.page-wrapper .page-body-right {
    position: fixed;
    top: var(--header-height);
    right: 0;
    height: 100%;
    max-width: var(--page-body-right-width);
    width: 100%;
    background-color: rgba(var(--white), 1) !important;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.2s ease-in-out;
    border: none;
}

.page-wrapper .page-body-right .user-detail-box {
    height: 100%;
    overflow: auto;
    padding-bottom: 135px;
    scrollbar-width: none;
}

.page-wrapper .page-body-right .user-detail-box .btn-close {
    width: 16px;
    height: 16px;
    opacity: 1;
}

.page-wrapper .page-body-right .user-detail-box .select2-container {
    z-index: 999;
}

.page-wrapper .page-body-right .user-detail {
    padding: 20px;
    background: url("/assets/images/profile-bg.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;
    text-align: center
}

.page-wrapper .page-body-right .user-detail .img-box {
    color: rgba(var(--primary-color),1);
    /* background-color: rgba(var(--white), 1); */
}

.page-wrapper .page-body-right .user-detail .img-box img {
    width: 105px;
    height: 105px;
    border-radius: 100%;
    border: 3px solid rgba(var(--white), 1);
    box-shadow: 0px 0 15px 1px rgba(var(--dark-color), 0.15);
    margin: 0 auto;
    object-fit: cover;
}

.page-wrapper .page-body-right .user-detail h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .5px
}

.page-wrapper .page-body-right .user-detail p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.36;
    letter-spacing: .5px;
    font-family: var(--font-nunito)
}

.page-wrapper .page-body-right .detail-box {
    padding: 16px 20px
}

.page-wrapper .page-body-right .detail-box .title {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: rgba(var(--dark-color), 1);
}

.page-wrapper .page-body-right .detail-box .title svg {
    color: rgba(var(--dark-color), 1);
}

.page-wrapper .page-body-right .detail-box .title.svg-icon {
    justify-content: unset;
}

.page-wrapper .page-body-right .detail-box .title.svg-icon .title-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-wrapper .page-body-right .detail-box .title.svg-icon .title-btn svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-wrapper .page-body-right .detail-box .title:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -20px;
    height: 26px;
    width: 6px;
    border-radius: 0 10px 10px 0;
    background-color: rgba(var(--primary-color), 1)
}

.page-wrapper .page-body-right .detail-box .title h3 {
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.25
}

.page-wrapper .page-body-right .detail-box .data-list {
    border: 1px solid rgba(var(--gray-color-1), 1);
    border-radius: var(--border-radius);
    grid-template-columns: 1fr 1fr
}

.page-wrapper .page-body-right .detail-box .checkout-time {
    margin-top: 12px;
    font-family: var(--font-nunito);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1)
}

.page-wrapper .page-body-right .detail-box .data-list li p,
.page-wrapper .page-body-right .detail-box .data-list li span {
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.25
}

.page-wrapper .page-body-right .detail-box .data-list li.current p {
    color: rgba(var(--success-color), 1)
}

.page-wrapper .page-body-right .detail-box .data-list li.break p {
    color: rgba(var(--error-color), 1)
}

.page-wrapper .page-body-right .detail-box+.detail-box {
    border-top: 1px solid rgba(var(--gray-color-1), 1)
}

.page-wrapper .page-body-right .detail-box .reminder-list li {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25
}

.page-wrapper .page-body-right .detail-box .reminder-list li span {
    font-weight: 500;
    color: rgba(var(--error-color), 1)
}

.page-wrapper .page-body-right .detail-box .reminder-list li+li {
    margin-top: 8px
}

.page-wrapper .page-body-right .detail-box .arrival-count {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25
}

.page-wrapper .page-body-right .detail-box .arrival-count span {
    font-weight: 500;
    color: rgba(var(--error-color), 1)
}

.page-wrapper .page-body-right .detail-box .datalabel-list {
    margin-top: 16px;
    padding-left: 12px
}

.page-wrapper .page-body-right.all-offcanvas-right {
    opacity: 0;
    visibility: hidden;
}

.page-wrapper .employee-detail-box .employee-detail {
    display: flex;
    align-items: center;
    gap: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)));
    padding: 20px;
    border-bottom: 1px solid rgba(var(--gray-color-1), 1)
}

.page-wrapper .employee-detail-box .employee-detail .img-box {
    min-width: calc(40px + (50 - 40) * ((100vw - 320px) / (1920 - 320)));
    width: calc(40px + (50 - 40) * ((100vw - 320px) / (1920 - 320)));
    height: calc(40px + (50 - 40) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 100%;
    border: 2px solid rgba(var(--white), 1);
    box-shadow: 0px 0 15px 1px rgba(var(--dark-color), 0.15);
    overflow: hidden;
}

.page-wrapper .employee-detail-box .employee-detail .img-box img,
.page-wrapper .employee-detail-box .employee-detail .img-box svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: rgba(var(--primary-color), 1);
}

.page-wrapper .employee-detail-box .employee-detail h3 {
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: calc(4px + (6 - 4) * ((100vw - 320px) / (1920 - 320)));
    text-transform: capitalize;
}

.page-wrapper .employee-detail-box .employee-detail p {
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.36;
    font-family: var(--font-nunito)
}

.page-wrapper .employee-detail-box .employee-detail .employee-detail-qr-btn {
    min-width: calc(22px + (24 - 22) * ((100vw - 320px) / (1920 - 320)));
    width: calc(22px + (24 - 22) * ((100vw - 320px) / (1920 - 320)));
    height: calc(22px + (24 - 22) * ((100vw - 320px) / (1920 - 320)));
    margin-left: auto;
}

.page-wrapper .employee-detail-box .employee-detail .employee-detail-qr-btn svg {
    width: 100%;
    height: 100%;
}

/* Datalabel list css */
.datalabel-list {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 24px
}

.datalabel-list li {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--warning-color), 1)
}

.datalabel-list li:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -12px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: rgba(var(--warning-color), 1)
}

.datalabel-list li:first-child {
    color: rgba(var(--success-color), 1)
}

.datalabel-list li:first-child:before {
    background-color: rgba(var(--success-color), 1)
}

.datalabel-list li:last-child {
    color: rgba(var(--error-color), 1)
}

/* Data list css */
.data-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: calc(10px + 11*(100vw - 320px)/1600) calc(10px + 6*(100vw - 320px)/1600)
}

.data-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    gap: 8px
}

.data-list li p {
    font-size: calc(12px + 2*(100vw - 320px)/1600);
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    text-align: center
}

.data-list li span {
    font-size: calc(12px + 2*(100vw - 320px)/1600);
    font-weight: 500;
    line-height: 1.35;
    color: rgba(var(--dark-color), 1)
}

.data-list li:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -7px;
    width: 1px;
    height: 100%;
    opacity: .2;
    background: #1f1f21;
    background: linear-gradient(180deg, rgba(31, 31, 33, 0.3477766106) 0%, rgba(31, 31, 33, 0.924807423) 34%, rgba(31, 31, 33, 0.9836309524) 50%, rgba(31, 31, 33, 0.9444152661) 67%, rgba(31, 31, 33, 0.3925945378) 100%)
}

.data-list li:last-child:before {
    display: none
}

.datalabel-list li:last-child:before {
    background-color: rgba(var(--error-color), 1)
}

.icon-data-list {
    height: 213px;
    overflow: auto
}

.icon-data-list .icon-data-list-image {
    min-width: 44px;
    width: 44px;
    height: 44px;
    color: rgba(var(--primary-color), 1);
}

.icon-data-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.icon-data-list li .list-detail-box {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.icon-data-list li svg {
    width: 24px;
    height: 24px
}

.icon-data-list li .list-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.icon-data-list li .list-detail .icon-box {
    min-width: 44px;
    width: 44px;
    height: 44px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.icon-data-list li .list-detail .lmg-badges.renew-badge {
    font-size: 10px;
    line-height: 1;
    padding: 4px 4px;
}

.icon-data-list li .list-detail img {
    min-width: 44px;
    width: 44px;
    height: 44px;
    border-radius: 100%;
    object-fit: cover;
}

.icon-data-list li .list-detail a {
    text-decoration: none;
}

.icon-data-list li .list-detail h6,
.icon-data-list li .list-detail .quick-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 2px;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    text-decoration: none;
    text-transform: capitalize;
}

.icon-data-list li .list-detail p {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.36;
    font-family: var(--font-nunito);
    color: rgba(var(--dark-color), 1);
    text-transform: capitalize;
}

.icon-data-list li .date {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    font-family: var(--font-nunito);
    color: rgba(var(--dark-color), 1);
    white-space: nowrap;
}

.icon-data-list li .date.today {
    color: rgba(var(--success-color), 1);
    font-weight: 600
}

.icon-data-list li .date.tomorrow {
    color: rgba(var(--error-color), 1);
    font-weight: 600
}

.icon-data-list li.primary .icon-box {
    background-color: rgba(var(--primary-color), 0.1)
}

.icon-data-list li.primary .icon-box svg {
    color: rgba(var(--primary-color), 1)
}

.icon-data-list li.success .icon-box {
    background-color: rgba(var(--success-color), 0.1)
}

.icon-data-list li.success .icon-box svg {
    color: rgba(var(--success-color), 1)
}

.icon-data-list li.error .icon-box {
    background-color: rgba(var(--error-color), 0.1)
}

.icon-data-list li.error .icon-box svg {
    color: rgba(var(--error-color), 1)
}

.icon-data-list li.error-1 .icon-box {
    background-color: rgba(var(--error-color-1), 0.1)
}

.icon-data-list li.error-1 .icon-box svg {
    color: rgba(var(--error-color-1), 1)
}

.icon-data-list li.error-2 .icon-box {
    background-color: rgba(var(--error-color-2), 0.1)
}

.icon-data-list li.error-2 .icon-box svg {
    color: rgba(var(--error-color-2), 1)
}

.icon-data-list li.warning .icon-box {
    background-color: rgba(var(--warning-color), 0.1)
}

.icon-data-list li.warning .icon-box svg {
    color: rgba(var(--warning-color), 1)
}

.icon-data-list li.info .icon-box {
    background-color: rgba(var(--info-color), 0.1)
}

.icon-data-list li.info .icon-box svg {
    color: rgba(var(--info-color), 1)
}

.icon-data-list li.info-1 .icon-box {
    background-color: rgba(var(--info-color-1), 0.1)
}

.icon-data-list li.info-1 .icon-box svg {
    color: rgba(var(--info-color-1), 1)
}

.icon-data-list li.info-2 .icon-box {
    background-color: rgba(var(--info-color-2), 0.1)
}

.icon-data-list li.info-2 .icon-box svg {
    color: rgba(var(--info-color-2), 1)
}

.icon-data-list li.secondary .icon-box {
    background-color: rgba(var(--secondary-color), 0.1)
}

.icon-data-list li.secondary .icon-box svg {
    color: rgba(var(--secondary-color), 1)
}

.icon-data-list li+li {
    margin-top: 12px
}

.icon-data-list li .arrow {
    transform: translateX(-5px);
    transition: all .2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    color: rgba(var(--primary-color), 1)
}

.icon-data-list li:hover .arrow {
    transform: translateX(0);
    transition: all .2s ease-in-out;
    opacity: 1;
    visibility: visible
}

.icon-data-list.quick-link li .list-detail {
    align-items: center
}

.team-member {
    display: flex;
    align-items: center;
    gap: calc(10px + (26 - 10) * ((100vw - 320px) / (1920 - 320)));
}

.team-member h4 {
    font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 8px;
}

.team-member .team-lead {
    border-left: 1px solid rgba(var(--border-color-1), 1);
    padding-left: calc(10px + (26 - 10) * ((100vw - 320px) / (1920 - 320)));
}

.team-member .team-lead h5 {
    font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 400;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 8px;
}

/* avatar css */
.avatar-group {
    display: flex;
    align-items: center;
}

.avatar-group .avatar {
    width: 35px;
    min-width: 35px;
    height: 35px;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-group .avatar.more {
    background-color: rgba(var(--dark-gray-color-1), 1);
    color: rgba(var(--white), 1);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
}

.avatar-group .avatar+.avatar {
    margin-left: -15px;
}

/* Chart css */
#attendance {
    margin-bottom: -48px;
}

.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path {
    -webkit-clip-path: inset(0% 4% 0% 0% round 4px);
    clip-path: inset(0% 4% 0% 0% round 4px)
}

::-webkit-inner-spin-button {
    display: none;
}

.apexcharts-text tspan {
    font-family: var(--font-nunito) !important;
}

.form-select2-box {
    position: relative;
}

.form-select2-box.custom-height .select2-container.select2-container--default .select2-dropdown {
    max-height: 250px;
    height: 100%;
    overflow: auto;
}

/* Custom scroll css */
.custom-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.custom-scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(var(--black), 0);
    border-radius: 10px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--dark-gray-color), 0.2);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(var(--black), 0);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(var(--black), 0);
    border-radius: 10px;
}

.modal::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.modal::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(var(--black), 0);
    border-radius: 10px;
}

.modal::-webkit-scrollbar-thumb {
    background: rgba(var(--dark-gray-color), 0.2);
    border-radius: 10px;
}

/* switch css */
.switch-div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.switch-div .switch-div-check {
    display: none;
}

.switch-div:has(.switch .switch-toggle:checked) .switch-div-check {
    display: block;
}

.switch-div:has(.switch .switch-toggle:checked) .switch-div-uncheck {
    display: none;
}

.switch {
    width: 40px;
    height: 22px;
    overflow: hidden;
    border-radius: 20px;
}

.switch .switch-toggle {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 0;
}

.switch .switch-toggle:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--gray-color-3), 1);
}

.switch .switch-toggle:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: rgba(var(--white), 1);
    transform: translateX(0);
    transition: all 0.2s ease-in-out;
    z-index: 1;
    border-radius: 100%;
    box-shadow: 0px 2px 4px 0px #2727271A;
}

.switch .switch-toggle:checked:after {
    background-color: rgba(var(--primary-color), 1);
}

.switch .switch-toggle:checked:before {
    transform: translateX(18px);
    transition: all 0.2s ease-in-out;
}

.text-info {
    color: rgba(var(--info-color), 1) !important;
}

.text-light-black {
    color: rgba(var(--light-black), 1) !important;
}

.text-error,
.text-error input {
    /* color: rgba(var(--error-color), 1) !important; */
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--error-color), 1);
    font-family: var(--font-nunito);
    margin-top: 4px;
    margin-bottom: 0px;
}

.text-success,
.text-success input {
    color: rgba(var(--success-color), 1) !important;
}

/* Status css */
.lmg-badges {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.57;
    padding: 2px 8px;
    text-align: center;
    width: fit-content;
    border-radius: 4px;
    border: 1px solid currentColor;
}

.lmg-badges.active,
.lmg-badges.replied,
.lmg-badges.approved,
.lmg-badges.paid {
    color: rgba(var(--success-color), 1);
    background-color: rgba(var(--success-color), 0.1);
}

.lmg-badges.registered,
.lmg-badges.primary {
    color: rgba(var(--primary-color), 1);
    background-color: rgba(var(--primary-color), 0.1);
}

.lmg-badges.blocked,
.lmg-badges.not-replied,
.lmg-badges.reject,
.lmg-badges.not-paid,
.lmg-badges.inactive {
    color: rgba(var(--reject-color), 1);
    background-color: rgba(var(--reject-color), 0.1);
}

.lmg-badges.pending,
.lmg-badges.onhold {
    color: rgba(var(--pending-color), 1);
    background-color: rgba(var(--pending-light-color), 1);
}

.lmg-badges.info {
    color: rgba(var(--badges-info-color), 1);
    background-color: rgba(var(--badges-info-color), 0.1);
}

/* No data css */
.no-data {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.no-data.mention-no-data{
    display: flex;
        align-items: center;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        height: 100%;
        justify-content: center;
        padding-block: 70px;
}

.no-data .no-data-img svg {
    width: 90px;
    height: 90px;
    color: rgba(var(--primary-color), 1);
}
.no-data.mention-no-data .no-data-img svg {
    width: 120px;
    height: 120px;
    color: rgba(var(--primary-color), 1);
}

.no-data .no-data-img img {
    width: calc(180px + (220 - 180) * ((100vw - 320px) / (1920 - 320)));
    height: calc(180px + (220 - 180) * ((100vw - 320px) / (1920 - 320)));
}

.no-data.mention-no-data p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    font-family: var(--font-lexend);
    text-align: center;
}

.table tr td .no-data {
    padding-block: 30px;
}

/* Alert message css */
.lmg-alert-message {
    background: #1F1F2115;
    border: 1px solid rgba(var(--dark-color), 1);
    border-radius: var(--border-radius);
    padding: 4px 8px 4px 12px;
    font-family: var(--font-nunito);
    font-weight: 500;
    display: flex;
    align-items: center;
}

.lmg-alert-message span {
    min-width: 8px;
    width: 8px;
    height: 8px;
    display: block;
    background: rgba(var(--dark-color), 1);
    border-radius: 10px;
    box-shadow: 0 0 0 4px #1F1F2147;
    margin-right: 10px;
}

.lmg-alert-message.lmg-alert-error {
    background: #EC4E2C15;
    border-color: rgba(var(--error-color), 1);
}

.lmg-alert-message.lmg-alert-error span {
    background: rgba(var(--error-color), 1);
    box-shadow: 0 0 0 4px #EC4E2C47;
}

/* Validation css */
.password-required-text-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    margin-top: 12px;
}

.password-required-text-box .password-required-text {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-nunito);
    color: rgba(var(--dark-color), 1);
}

.password-required-text-box .password-required-text svg {
    width: 20px;
    height: 20px;
    margin-right: 4px;
}

.password-required-text-box .password-required-text .password-required-true-icon,
.password-required-text-box .password-required-text.active .password-required-wrong-icon {
    display: none;
}

.password-required-text-box .password-required-text.active .password-required-true-icon {
    display: block;
}

.password-required-text-box .password-required-text.active {
    color: rgba(var(--success-color), 1);
}

.checkin-checkout-dialog .checkin-checkout-dialog-header .checkin-checkout-dialog-icon {
    width: 50px;
    height: 50px;
    background: rgba(var(--primary-color), 0.1);
    border-radius: 5px;
    color: rgba(var(--primary-color), 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.checkin-checkout-dialog .checkin-checkout-dialog-header .checkin-checkout-dialog-icon svg {
    width: 32px;
    height: 32px;
}

.checkin-checkout-dialog .checkin-checkout-dialog-header .checkin-checkout-dialog-heading {
    font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 12px;
}

.checkin-checkout-dialog .checkin-checkout-dialog-footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.checkin-checkout-dialog .modal-dialog .modal-content .modal-body .checkin-checkout-dialog-footer .btn {
    margin-top: 0px;
}

::-webkit-calendar-picker-indicator {
    display: none;
}

.tagify.form-control {
    background: transparent;
    display: flex;
}

.tagify.form-control .tagify__input {
    margin: 0;
    margin-top: 3px;
    display: inline-block;
    min-width: unset;
}

.tagify.form-control .tagify__input:first-child {
    padding: 0;
    margin: 0;
}

.tagify__tag>div {
    padding: 0;
}

.tagify__tag>div::before {
    display: none;
}

.tagify__tag:focus div::before,
.tagify__tag:hover:not([readonly]) div::before {
    --tag-bg-inset: -2.5px;
    --tag-bg: rgba(var(--gray-color-4), 1);
}

.tagify.form-control .tagify__tag {
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    font-family: var(--font-nunito);
    padding: 6px 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: 4px;
    background-color: rgba(var(--gray-color-4), 1);
    color: rgba(var(--dark-color), 1);
}

.tagify.form-control .tagify__tag__removeBtn {
    width: 14px;
    height: 14px;
    background: url('/assets/images/svg/close.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0;
    position: unset;
    color: rgba(var(--dark-color), 1);
    border: none;
    margin: 0;
}

.tagify.form-control .tagify__tag-text {
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    font-family: var(--font-nunito);
    color: rgba(var(--dark-color), 1);
}

.animate-main{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: 12px;
    width: 12px;
    height: 12px;
    position: relative;
}

.animate-main .animate-div{
    display: inline-flex;
    min-width: 7px;
    width: 7px;
    height: 7px;
    background-color: rgba(var(--error-color), 1);
    border-radius: 100%;
}

.animate-main .animate-ping{
    background-color: rgba(var(--error-color), 1);
    border-radius: 100%;
    animation: ping 1s cubic-bezier(0,0,.2,1) infinite;
    opacity: 0.75;
    width: 11px;
    height: 11px;
    min-width: 11px;
    position: absolute;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.warning-box{
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    color: rgba(var(--warning-color), 1);
    border: 1px solid rgba(var(--warning-color), 1);
    padding: 12px 16px;
    background-color: rgba(var(--white), 1);
    margin-bottom: 16px;
    line-height: 1.25;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
}

.warning-box svg{
    width: 20px;
    height: 20px;
}

.info{
    font-size: 13px;
    color: rgba(var(--primary-color), 1);
    font-weight: 500;
    margin-left: 2px;
}

.tds-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 5px;
    border: 1px solid rgba(var(--warning-color), 1);
    padding: 12px 16px;
    background-color: rgba(var(--white), 1);
    margin-bottom: 24px;
}
.tds-box .note{
    line-height: 1.25;
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    color: rgba(var(--warning-color), 1);
    
}
.tds-box .info{
    line-height: 1.25;
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320))); 
    color: rgba(var(--reject-color), 1);
   
}
.tds-box.info{
    background-color: rgba(var(--reject-color), 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tds-box.info .increment-by-whom{
  width: 100%;
}

.increment-by-whom p {
    color: rgba(var(--dark-color), 1);
}

.increment-by-whom p span {
    color: rgba(var(--reject-color), 0.8) !important;
}

.tds-box svg{
    width: 20px;
    height: 20px;
}

/* Team List page css start */
.new-emp-box-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}
.new-emp-box{
    display: flex;
    align-items: center;
    gap: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)));
    padding: 20px;
    border: 1px solid rgba(var(--gray-color-1));
    border-radius: var(--border-radius);
    background-color: rgba(var(--white), 1);
    text-align: left;
    width: 100%;
}
.new-emp-box-row .new-emp-box{
    height: 100%;
}
.new-emp-box .new-emp-box-img{
    min-width: calc(40px + (50 - 40) * ((100vw - 320px) / (1920 - 320)));
    width: calc(40px + (50 - 40) * ((100vw - 320px) / (1920 - 320)));
    height: calc(40px + (50 - 40) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 100%;
    border: 2px solid rgba(var(--white), 1);
    box-shadow: 0px 0 15px 1px rgba(var(--dark-color), 0.15);
    overflow: hidden;
}
.new-emp-box .new-emp-box-img img,
.new-emp-box .new-emp-box-img svg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: rgba(var(--primary-color), 1);
}
.new-emp-box .new-emp-box-text{
    flex: 1;
    width: calc(100% - calc(40px + (50 - 40) * ((100vw - 320px) / (1920 - 320))));
}
.new-emp-box .new-emp-box-name{
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.25;
    color: rgba(var(--dark-color), 1);
    margin-bottom: 2px;
    text-transform: capitalize;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.new-emp-box .new-emp-box-designation{
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-nunito);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.new-emp-box .new-emp-box-email{
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-nunito);
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.emp-detail-dialog.modal .modal-dialog .modal-content .modal-header {
    border-bottom: 1px solid rgba(var(--gray-color-1));
    padding: 20px calc(20px + 10*(100vw - 320px)/1600);
}
.emp-detail-dialog.modal .modal-dialog .modal-content .modal-header .btn-close {
    min-width: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
}
.emp-detail-dialog .modal-header .new-emp-box{
    padding: 0;
    border: 0;
    border-radius: 0;
    width: calc(100% - calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320))));
}
.emp-detail-dialog .emp-detail-dialog-paragraph{
    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 500;
    line-height: 1.36;
    font-family: var(--font-nunito);
    margin-bottom: 16px;
}
.emp-detail-dialog .emp-detail-dialog-paragraph:last-child{
    margin-bottom: 0;
}
.emp-detail-dialog .emp-detail-dialog-arrow-row{
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 12px;
}
.emp-detail-dialog .emp-detail-dialog-arrow-row .carousel-control-next,
.emp-detail-dialog .emp-detail-dialog-arrow-row .carousel-control-prev{
    position: relative;
    left: 0;
    right: auto;
}
.emp-detail-dialog .emp-detail-dialog-arrow-row .carousel-control-next,
.emp-detail-dialog .emp-detail-dialog-arrow-row .carousel-control-prev{
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(var(--black), 0);
    border: 1px solid rgba(var(--gray-color-1));
    box-shadow: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    margin: 0;
    min-width: max-content;
    width: auto;
    height: auto;
    gap: calc(3px + 3*(100vw - 320px) / 1600);
    color: rgba(var(--dark-color), 1);
    padding: calc(6px + 4*(100vw - 320px) / 1600) calc(7px + 7*(100vw - 320px) / 1600);
}
.emp-detail-dialog .emp-detail-dialog-arrow-row .carousel-control-next{
    margin-left: auto;
}
/* Team List page css end */

.accordion .accordion-item{
    margin-bottom: 12px;
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: 5px;
    overflow: hidden;
}

.accordion .accordion-item:last-child{
    margin-bottom: 0;
}

.accordion .accordion-item .accordion-header .accordion-button{
    padding: 14px;
    background-color: rgba(var(--bg-color), 1);
    border-color: rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
    box-shadow: none;
    outline: none;
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    line-height: 1.35;
}

.accordion .accordion-item .accordion-header .accordion-button .btn-data{
    flex-direction: column;
    align-items: flex-start;
}

.accordion .accordion-item .accordion-header .accordion-button::after{
  background-size: 16px;
  filter: brightness(0);
}

.accordion-body{
    padding: 14px;
}

.input-form-dialog .modal-dialog .modal-content .modal-body .accordion-body .row {
    row-gap: 0;
}

.increment-by-whom{
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}

.increment-by-whom p {
    font-size: 14px;
    line-height: 1.25;
    font-weight: 400;
    color: rgba(var(--dark-color), 1);
}

.increment-by-whom p span {
    color: rgba(var(--dark-color), 0.8);
}

.data-overview{
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(var(--dark-color), 0.8);
}

.data-overview p span{
    margin-left: 2px;
}

.restricted-data{
    pointer-events: none;
    opacity: 0.7;
}

.doc-view-div{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.docu-view{
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
    color: rgba(var(--primary-color),1);
}

.pdf-view svg{
    width: 20px;
    height: 20px;
    color: rgba(var(--primary-color),1);
}

.purchase-form .purchase-title{
    font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 8px;
    line-height: 1.25;
    font-weight: 500;
    color: rgba(var(--black), 1);
}
.purchase-form .form-action{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 12px;
    margin-left: auto;
}
.purchase-form .form-action .btn{
    width: max-content;
    padding: calc(9px + (11 - 9) * ((100vw - 320px) / (1920 - 320))) 20px;
}

.form-file {
    font-family: var(--font-nunito);
    padding: var(--input-padding);
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    line-height: 1.35;
    border-radius: var(--border-radius);
    width: 100%;
    font-weight: 400;
    border: 1px solid rgba(var(--gray-color), 1);
    background-color: rgba(var(--white), 1);
    color: rgba(var(--dark-color), 1) !important;
    min-height: calc(39px + (48 - 39) * ((100vw - 320px) / (1920 - 320)));
}

.form-file::file-selector-button {
    display: none;
}

.form-file::-webkit-file-upload-button {
    display: block;
    width: 0;
    height: 0;
    margin-left: -100%;
    -webkit-appearance: none;
    margin-inline-end: 0;
    padding-block: 0px;
    padding-inline: 0px;
    border-width: 0px;
}

/* Rating css */

.rate{
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-top: 4px;
    padding-inline: 6px;
    /* color: rgba(var(--dark-color), 1); */
    line-height: 1.5;
    /* border: 1px solid rgba(var(--warning-color),1); */
    /* border-radius: 5px; */
    /* padding: 4px 8px; */
    cursor: pointer;
    width: max-content;
    background-color: rgba(var(--warning-color),1) !important;
    color: rgba(var(--white), 1) !important; 
}

.rate svg{
    width: 12px;
    height: 12px; 
    color: rgba(var(--white),1);
    fill: rgba(var(--white),1);
}
    .rating { 
        border: none;
        display: flex;
        align-items: center;
        /* justify-content: flex-end; */
        flex-direction: row-reverse;
        gap: 6px;
    }

    .rating > input { display: none; } 
    /* .rating > label:before { 
    margin-top: 2px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    content: "";
    background: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='transparent' stroke='grey' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.7299 3.50989L15.4899 7.02989C15.7299 7.51989 16.3699 7.98989 16.9099 8.07989L20.0999 8.60989C22.1399 8.94989 22.6199 10.4299 21.1499 11.8899L18.6699 14.3699C18.2499 14.7899 18.0199 15.5999 18.1499 16.1799L18.8599 19.2499C19.4199 21.6799 18.1299 22.6199 15.9799 21.3499L12.9899 19.5799C12.4499 19.2599 11.5599 19.2599 11.0099 19.5799L8.01991 21.3499C5.87991 22.6199 4.57991 21.6699 5.13991 19.2499L5.84991 16.1799C5.97991 15.5999 5.74991 14.7899 5.32991 14.3699L2.84991 11.8899C1.38991 10.4299 1.85991 8.94989 3.89991 8.60989L7.08991 8.07989C7.61991 7.98989 8.25991 7.51989 8.49991 7.02989L10.2599 3.50989C11.2199 1.59989 12.7799 1.59989 13.7299 3.50989Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: center center;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
    } */

    /* .rating > .half:before { 
    content: "\f089";
    position: absolute;
    } */

    .rating > label { 
        /* color: #fff;  */
        /* float: right; */
        /* margin:4px 1px 0px 0px; */
        /* background-color:#D8D8D8; */
        /* border-radius:15px; */
        /* height:25px; */
        width: 20px;
        height: 20px;
        margin: 0;
        background: transparent !important;
        cursor: pointer;
    }

    /***** CSS Magic to Highlight Stars on Hover *****/

    /* .rating:not(:checked) > label:hover ~ label { 
        background: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='transparent' stroke='white' strokeWidth='1.5' stroke:inecap=round strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.7299 3.50989L15.4899 7.02989C15.7299 7.51989 16.3699 7.98989 16.9099 8.07989L20.0999 8.60989C22.1399 8.94989 22.6199 10.4299 21.1499 11.8899L18.6699 14.3699C18.2499 14.7899 18.0199 15.5999 18.1499 16.1799L18.8599 19.2499C19.4199 21.6799 18.1299 22.6199 15.9799 21.3499L12.9899 19.5799C12.4499 19.2599 11.5599 19.2599 11.0099 19.5799L8.01991 21.3499C5.87991 22.6199 4.57991 21.6699 5.13991 19.2499L5.84991 16.1799C5.97991 15.5999 5.74991 14.7899 5.32991 14.3699L2.84991 11.8899C1.38991 10.4299 1.85991 8.94989 3.89991 8.60989L7.08991 8.07989C7.61991 7.98989 8.25991 7.51989 8.49991 7.02989L10.2599 3.50989C11.2199 1.59989 12.7799 1.59989 13.7299 3.50989Z'/%3e%3c/svg%3e") !important;
        cursor:pointer;
        
    } 

    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label:before {
        background: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='#ff0000' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.7299 3.50989L15.4899 7.02989C15.7299 7.51989 16.3699 7.98989 16.9099 8.07989L20.0999 8.60989C22.1399 8.94989 22.6199 10.4299 21.1499 11.8899L18.6699 14.3699C18.2499 14.7899 18.0199 15.5999 18.1499 16.1799L18.8599 19.2499C19.4199 21.6799 18.1299 22.6199 15.9799 21.3499L12.9899 19.5799C12.4499 19.2599 11.5599 19.2599 11.0099 19.5799L8.01991 21.3499C5.87991 22.6199 4.57991 21.6699 5.13991 19.2499L5.84991 16.1799C5.97991 15.5999 5.74991 14.7899 5.32991 14.3699L2.84991 11.8899C1.38991 10.4299 1.85991 8.94989 3.89991 8.60989L7.08991 8.07989C7.61991 7.98989 8.25991 7.51989 8.49991 7.02989L10.2599 3.50989C11.2199 1.59989 12.7799 1.59989 13.7299 3.50989Z'/%3e%3c/svg%3e") !important;
    }  */

    .rating > input:checked + label:hover,
    .rating > label:hover ~ input:checked ~ label,
    .rating > input:checked ~ label:hover ~ label { 
        color: #EF9400;
        cursor:pointer;
    }
    .rating > label:hover ~ label > svg,
    .rating > label:hover > svg,
    .rating > input:checked ~ label:hover ~ label > svg,
    .rating > input:checked ~ label > svg {
        fill: #EF9400;
        color: #EF9400;
    }
    
    /* .rating label[style="background-color: rgb(126, 211, 33);"]{ 
        color: #EF9400;
    } 
    .rating label[style="background-color: rgb(126, 211, 33);"] > svg { 
        fill: #EF9400;
    }  */
    .hold-deduct-modal .modal-header{
        background-color: rgba(var(--gray-color), 1);
        padding: 18px !important;
    }
    .list-desc{
        list-style: disc;
        padding-left: 20px;
    }
    .list-desc li{
        margin-bottom: 8px;
        display: list-item; 
    }
    .list-desc li:last-child{
        margin-bottom: 0; 
    }

    .total-time-svg{
        width: 18px;
        height: 18px;
        color: rgba(var(--dark-color), 1);
    }

.time-btn{
    display: flex;
    align-items: center;
    gap: 12px;
}


/* employee Diary */

.diary-header .btn {
    padding: 7px 14px;
    font-size: 14px;
    width: max-content;
    white-space: nowrap;
} 

.diary-header .arrow-btn-grp{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.diary-header .arrow-btn-grp .arrow-btn{
    border: none;
    background-color: transparent;
    border: 1px solid rgba(var(--gray-color), 1);
    border-radius: var(--border-radius);
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diary-header .arrow-btn-grp .arrow-btn img{
    width: 16px;
    height: 16px;
}

.diary-header .diary-search-div{
    position: relative;
}

.diary-header .diary-search-div .search-icon{
    background-image: url('../images/search-icon.svg');
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 13px;
    width: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    height: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    margin: 0;
}

.diary-header .diary-search-div .form-control{
    font-size: 14px;
    padding: 8px 16px 8px 40px;
    line-height: 1;
}

.diary-header .diary-search-div button.close-btn{
    position: absolute;
    top: 10px;
    right: 14px;
    width: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    height: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
    color: rgba(var(--dark-color), 1);
    padding: 0;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.diary-header .diary-search-div button.close-btn svg{
    width: 100%;
    height: 100%;
}

/* .diary-header .arrow-btn-grp .edit-btn
.diary-header .arrow-btn-grp .add-btn{
    width: 16px;
    height: 16px;
} */


.diary-sec .mention-section {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin: 16px 0;
    background-color: #ffffff;
    padding: 10px;
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */
}
.diary-sec .mention-image-tag {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
}
.diary-sec .mention-section:first-child {
    margin-top: 0;
}

.diary-sec .mention-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    /* border-bottom: 1px solid #e0e0e0; */
    background-color: #6565650D;
    border-radius: 6px;
}

.diary-sec .mention-header-div {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.diary-sec .mention-date {
    font-size: 13px;
    font-weight: 500;
    color: rgba(var(--dark-color), 1);
    margin-left: auto;
}

.diary-sec .mention-delete-btn {
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
    padding: 0 0.5rem;
    margin-left: auto;
}

.diary-sec .mention-delete-btn:hover i {
    color: #DA3A2C;
}

.diary-sec .mention-item {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
}

.diary-sec .diary-search {
        position: relative;
    max-width: 260px;
    width: 100%;
}

.diary-sec .diary-search input{
    font-family: var(--font-nunito);
    padding: var(--input-padding);
    font-size: calc(14px + 2 * (100vw - 320px) / 1600);
    line-height: 1.35;
    border-radius: var(--border-radius);
    width: 100%;
    font-weight: 400;
    border: 1px solid rgba(var(--gray-color), 1);
    color: rgba(var(--dark-color), 1);
    background: rgba(var(--white), 1);
    margin-left: 0;
    padding-left: 50px;
    outline: 0;
}

.diary-sec .diary-search label{
    background-image: url(../images/search-icon.svg);
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    width: calc(20px + 2 * (100vw - 320px) / 1600);
    height: calc(20px + 2 * (100vw - 320px) / 1600);
    margin: 0;
}


.diary-sec .mention-header-info .mention {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--dark-color), 1);
}

.diary-sec .mention-header-info .mention-role {
    display: block;
    font-size: 12px; 
    color: rgba(var(--dark-color), 0.8);
}

.diary-sec .mention-section-content {
    padding: 16px 0;
    min-height: 50px;
    outline: none;
}

.diary-sec .mention-section-content p {
    margin: 0;
    min-height: 24px;
}

.diary-sec .mention-avatar {
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(var(--primary-color), 0.1);
    color: rgba(var(--primary-color), 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.diary-sec .mention-avatar span{
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--primary-color), 1);
}

.diary-sec .nav.vertical-tabs .nav-item .nav-link {
    /* justify-content: space-between; */
}

.diary-sec .nav.vertical-tabs .nav-item .nav-link.active {
    color: rgba(var(--primary-color), 1);
}

.diary-sec .nav.vertical-tabs .nav-item .nav-link.active span {
    color: rgba(var(--primary-color), 1);
}

.diary-sec .nav.vertical-tabs .nav-item .nav-link.active p {
    color: rgba(var(--primary-color), 1);
}

.diary-sec .nav.vertical-tabs .nav-item .nav-link p {
    font-size: 14px;
    font-weight: 600;
    color: rgba(var(--dark-color), 1);
}

.diary-sec .nav.vertical-tabs .nav-item .nav-link span {
    font-size: 12px;
    font-weight: 500;
    color: rgba(var(--dark-gray-color-1), 1)
}

.diary-sec .nav.vertical-tabs .nav-item .nav-link .color-box{
    width: 12px;
    height: 12px;
    border-radius: 100%;
    /* margin-left: auto; */
    background-color: transparent;
}




/* media queries */
@media(max-width: 1699px) {
    .col-8 {
        width: 100%;
    }

    .col-4 {
        width: 50%;
    }

    .col-3 {
        width: 50%;
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 33.333333%;
    }

    .page-wrapper .page-body .page-body-left {
        width: calc(100% - var(--responsive-page-body-right-width));
    }

    .page-wrapper .page-body .page-body-right,
    .page-wrapper .page-body-right.all-offcanvas-right {
        max-width: var(--responsive-page-body-right-width);
    }

    .row-cols-5>* {
        width: 25%;
    }

    .custom-col-6 {
        width: 100%;
    }
}

@media(max-width: 1399px) {
    .card .card-header.diary-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .calendar-container .col-xxl-8 {
        width: 100%;
    }

    .calendar-container .col-xxl-4 {
        width: 100%;
    }

    .salary-tds-table-row {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .nav.horizontal-tab .nav-item .nav-link {
        padding-inline: 24px;
    }

    .page-wrapper .page-body .page-body-left {
        width: 100%
    }

    .page-wrapper .page-body .page-body-right,
    .page-wrapper .page-body-right.all-offcanvas-right {
        visibility: hidden;
        transform: translateX(100%);
        transition: all 0.2s ease-in-out;
    }

    .page-wrapper .page-body .page-body-right .user-detail-box,
    .page-wrapper .page-body-right.all-offcanvas-right .user-detail-box {
        padding-bottom: 0;
    }

    .data-list {
        gap: 8px
    }

    .page-wrapper .page-body .page-body-right,
    .page-wrapper .page-body-right.all-offcanvas-right {
        top: 0;
    }

    .page-wrapper .page-body .page-body-right.show,
    .page-wrapper .page-body-right.all-offcanvas-right.show {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
        transition: all 0.2s ease-in-out;
    }

    .row-cols-5>* {
        width: 33.333333%;
    }
}

@media(max-width: 1199px) {
    .auth-main .left-content .auth-form {
        max-width: 450px;
        width: 100%;
    }

    .table-top-panel.panel-2,
    .table-top-panel.panel-3 {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .top-right-part {
        margin-left: unset !important;
    }

    .table-top-panel.panel-3 .top-right-part {
        width: max-content;
    }

    .nav.vertical-tabs .nav-item .nav-link.active:before {
        display: none;
    }

    .nav.vertical-tabs {
        flex-wrap: nowrap;
        overflow: auto;
        padding: 4px 0
    }

    .nav.vertical-tabs .nav-item {
        display: inline-block;
        width: max-content;
    }

    .nav.vertical-tabs .nav-item .nav-link {
        white-space: nowrap;
        padding: 10px;
        border: none;
        width: max-content;
    }

    .page-wrapper .page-body .employee-detail-box .employee-detail {
        padding: 12px
    }

    .col-xxl-3 {
        width: 50%
    }

    .custom-col-3 {
        width: 100%
    }

    .custom-col-9 {
        width: 100%
    }

    .row-cols-5>* {
        width: 50%;
    }
}

@media(max-width: 991px) {
    .icon-data-list li .arrow {
        display: none
    }

    .auth-main .right-content {
        display: none
    }

    .auth-main .left-content {
        width: 100%
    }

    .auth-main{
        height: auto;
    }

    footer {
        margin-left: 0;
        width: 100%
    }

    header .header-right .navbar {
        gap: 12px
    }

    header {
        margin-left: 0;
        width: 100%;
        padding: 14px 20px;
    }

    .page-wrapper .page-body .employee-detail-box .employee-detail {
        margin-left: 0;
        width: 100%
    }

    .page-wrapper .page-body {
        margin-left: 0;
        width: 100%
    }

    .page-wrapper .page-body .page-body-right {
        max-width: 320px;
    }

    .table-top-panel .top-right-part {
        flex-wrap: nowrap;
    }


    .table-top-panel.check-in-out-list {
        flex-direction: column;
        align-items: flex-start;
    }

    .table-top-panel.check-in-out-list .top-right-part {
        flex-wrap: wrap;
    }

    .table-top-panel.check-in-out-list .top-right-part .top-right-part-btn-row {
        width: 100%;
        justify-content: center;
    }

    .top-right-part .top-employe-select {
        width: auto;
        flex: 1;
    }

    .top-right-part .form-datepicker-box {
        width: auto;
        flex: 1;
    }

    .top-right-part .top-employe-select .select2-container {
        width: 100% !important;
    }

    .top-right-part .datepicker-range {
        max-width: 100%;
        flex: 1;
    }

    .top-right-part.single-field .datepicker-range:first-child {
        max-width: 280px;
        flex: unset;
    }

    .table-top-panel .top-right-part .form-select-div {
        width: auto;
        flex: 1;
    }

    .top-right-part .form-select-div .select2-container {
        width: 100% !important;
    }

    .table-top-panel .top-right-part .dt-search {
        max-width: 100%;
        flex: 1;
    }

    .table-top-panel .top-right-part.single-field .dt-search {
        max-width: 260px;
    }

    .auth-main .left-content .auth-form {
        margin: 20px auto 0;
    }
}

@media(max-width:767px) {
    .fc-toolbar.fc-header-toolbar h2.fc-toolbar-title {
        font-size: 16px;
    }

    .fc-view-harness .fc-view .fc-scrollgrid-section-header .fc-col-header .fc-day .fc-scrollgrid-sync-inner .fc-col-header-cell-cushion {
        padding: 4px;
        font-size: 12px;
    }

    .fc-view-container .fc-view .fc-body .fc-widget-content .fc-day-top .fc-day-number {
        padding: 4px;
        font-size: 12px;
    }

    .card .card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .card .card-button-header {
        flex-direction: unset;
        align-items: center;
    }

    .page-body-left .card .card-header {
        flex-direction: unset;
        align-items: unset;
    }

    .card .card-header.chart {
        flex-direction: column;
        align-items: flex-start
    }

    .card .card-header.chart .header-left {
        margin-left: unset
    }

    .card .card-header .datalabel-list {
        margin-left: unset;
        padding-left: 12px
    }

    .total-amount {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .total-amount .amount {
        margin-left: unset;
    }

    .search-input .form-control {
        padding-block: 12px;
    }

    .table-top-panel.panel-3 .top-left-part {
        width: 100%;
    }

    .table-top-panel.panel-3 .top-left-part .nav.horizontal-tab {
        overflow: auto;
        width: 100%;
        flex-wrap: nowrap;
    }

    .table-top-panel.panel-3 .top-left-part .nav.horizontal-tab .nav-item {
        white-space: nowrap;
    }

    footer {
        flex-direction: column;
        padding-block: 12px;
        text-align: center;
        position: unset
    }

    footer .footer-right {
        margin-left: unset
    }

    header {
        padding: 16px 20px
    }

    header .page-heading {
        position: absolute;
        top: 69px;
        left: 0;
        background-color: rgba(var(--bg-color), 1);
        width: 100%;
        padding: 20px
    }

    .page-wrapper .page-body {
        padding-bottom: 20px;
    }

    .col-3 {
        width: 100%
    }

    .col-4 {
        width: 100%
    }

    .col-xxl-3 {
        width: 100%
    }

    .icon-data-list li .list-detail .icon-box,
    .icon-data-list li .list-detail img,
    .icon-data-list li .list-detail .icon-data-list-image {
        min-width: 35px;
        width: 35px;
        height: 35px;
    }

    .icon-data-list li .list-detail svg {
        min-width: 22px;
        width: 22px;
        height: 22px;
    }

    .icon-data-list {
        height: 180px;
    }

    .row-cols-5>* {
        width: 100%;
    }

    .table-top-panel .top-right-part {
        flex-wrap: wrap;
    }

    .table-top-panel .top-right-part .top-right-part-btn-row {
        width: 100%;
        justify-content: center;
    }

    .table-top-panel .top-right-part.single-field .top-right-part-btn-row {
        justify-content: unset;
        width: auto;
    }


    .table-top-panel .top-right-part.single-field .top-right-part-btn-row:nth-child(3) {
        width: 100%;
        justify-content: center;
    }

    .table-top-panel .top-right-part.single-field .dt-search {
        max-width: unset;
    }

    .queries-suggestions-table-box .table-top-panel,
    .salary-list-table-box .table-top-panel,
    .queries-suggestions-table-box .table-top-panel {
        flex-direction: column;
        align-items: unset;
    }

    .nav.horizontal-tab {
        width: 100%;
    }

    .nav.horizontal-tab li {
        width: 100%;
        flex: 1;
    }

    .dt-container .table-pagination-footer {
        flex-direction: column;
        gap: 16px;
    }

    .dt-container .table-pagination-footer .paging_simple_numbers {
        margin-inline: auto;
    }

    div.dt-container .paging_simple_numbers nav .dt-paging-button.previous span,
    div.dt-container .paging_simple_numbers nav .dt-paging-button.next span {
        display: none;
    }
}

@media(max-width: 575px) {
    .doc-view-div{
        flex-direction: column;
    }
    .datepicker-range {
        width: 100%;
    }

    .fc-clear,
    .fc-center {
        display: none !important;
    }

    .card .card-header {
        padding: 16px
    }

    .card .card-header.chart .header-left {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px
    }

    .card .card-header.chart .header-left .select2-container {
        width: 100% !important;
        max-width: unset
    }

    .card .card-body {
        padding: 16px
    }

    .custom-modal-width {
        padding: 0;
    }

    .custom-modal-width-1 {
        padding: 0;
    }

    .pagination {
        justify-content: center
    }

    .table-top-panel {
        flex-wrap: wrap;
        gap: 12px;
    }

    .table-top-panel .top-right-part {
        margin-left: unset;
        width: 100%;
        justify-content: start;
    }

    .table-top-panel.panel-2 .profile-box .profile-detail h3 {
        display: -webkit-box;
        width: 100%;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
    }

    .dt-container .paging_simple_numbers nav {
        justify-content: center;
        gap: 0;
    }

    header .header-left .page-detail svg {
        margin-top: 0
    }

    header .header-right .navbar {
        gap: 8px;
    }

    .team-member {
        flex-direction: column;
        align-items: flex-start;
    }

    .team-member .team-lead {
        padding-left: 0;
        border-left: none;
    }

    .top-right-part .top-employe-select,
    .top-right-part .datepicker-range,
    .top-right-part .form-datepicker-box,
    .top-right-part .diary-search {
        width: 100%;
        flex: unset;
    }
    .diary-sec .diary-search{
        max-width: unset;
    }

    .table-top-panel .top-right-part .top-right-part-btn-row .btn {
        flex: 1;
        padding-inline: 9px;
    }

    .table-top-panel .top-right-part.single-field .top-right-part-btn-row {
        width: 100%;
        justify-content: center;
    }

    .table-top-panel .top-right-part .form-select-div {
        width: 100%;
        flex: unset;
    }

    .table-top-panel .top-right-part .dt-search {
        max-width: unset;
    }

    .top-right-part.single-field .datepicker-range:first-child {
        max-width: unset;
        width: 100%;
    }

    .info-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-row button {
        margin-left: unset;
    }

    .fc-daygrid-event {
        padding: 0;
        font-size: 0;
        width: 6px;
        height: 6px;
        border-radius: 100%;
    }

    .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{
        min-height: 1rem;
    }

    .fc .fc-daygrid-event.approved{
        background-color: rgba(var(--success-color), 1) !important;
    }

    .fc .fc-daygrid-event.weekend{
        background-color: rgba(var(--dark-gray-color-1), 1) !important;
    }

    .fc .fc-daygrid-event.unpaid{
        background-color: rgba(var(--info-color), 1) !important;
    }
    
    .fc .fc-daygrid-event.pending{
        background-color: rgba(var(--error-color), 1) !important;
    }

    .fc .fc-daygrid-event.festival{
        background-color: rgba(var(--warning-color), 1) !important;
    }

    .upcoming-event .fc-daygrid-event{
        padding: calc(2px +(4 - 2)*((100vw - 320px) /(1920 - 320))) calc(4px +(8 - 4)*((100vw - 320px) /(1920 - 320)));
        font-size: 12px;
        height: unset;
        width: unset;
    }

    .diary-sec .mention-header-div{
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }
    .diary-sec .mention-header-div .mention-date{
        margin-left: unset;
    }
}

@media(max-width: 563px) {
    .daterangepicker .drp-calendar.left {
        padding-right: 8px;
    }
}

@media(max-width: 480px) {
    .increment-by-whom{
        flex-direction: column;
        align-items: flex-start;
    }
    
    .auth-main .left-content .auth-form {
        width: 100%
    }

    .modal.salary-slip-modal .modal-dialog .modal-content .modal-footer {
        flex-wrap: wrap;
    }

    .page-wrapper .page-body .page-body-right .user-detail .img-box img {
        width: 80px;
        height: 80px;
    }

    .default-calendar .datepicker .datepicker-days .table-condensed tbody tr td {
        width: 35px;
        height: 35px;
    }

    .card .card-header.card-button-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .card .card-header.card-button-header .btn {
      width: 100%;
      margin-left: unset;
    }
}

@media(max-width: 420px) {
    .icon-data-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;   
    }

    .icon-data-list li .date {
        padding-left: 43px;
    }

    .icon-data-list li .list-detail div p{
        padding-left: 0;
    }
}