/* @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Outfit:wght@100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");

.metismenu a:hover {
    letter-spacing: 0;
}

* {
    font-family: "Rethink Sans", sans-serif;
}

body {
    /* font-family: "Roboto", sans-serif !important; */
    /* font-family: "Inter", sans-serif !important; */
    font-family: "Rethink Sans", sans-serif;

    /* font-family: "Manrope", sans-serif !important; */
    letter-spacing: 0;
}

.custom-sidebar-target#left-sidebar {
    padding: 20px 6px 20px 0px !important;
    background: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.custom-sidebar-target .brand-name {
    margin-left: 61px;
    font-weight: bold;
    font-size: 18px;
}

.login-broker-logo img {
    width: 100px;
}

.brand-name-repo {
    padding-bottom: 15px;
}

.custome-header-top .header-brand img {
    width: 83%;
    margin-top: 0px;
    margin-left: 5px;
}

.custome-header-top .header-brand img {
    width: 90%;
    margin-top: 0px;
}

.custom-sidebar-target .metismenu li {
    /* background: green; */
    margin-bottom: 6px !important;
    padding: 2px 13px;
    /* border-radius: 29px; */
}

.card-options.card-joiner-left {
    margin-top: 25px;
    justify-content: end;
}

.body-workflow {
    padding: 20px;
    padding-bottom: 0px;
}

.input-box-cover {
    margin-bottom: 25px;
}

.input-box-cover label {
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

.modal-footer.work-footer button {
    padding: 10px 30px;
}

.close-workflow {
    padding: 6px;
    padding-right: 15px;
}

span.close-work {
    font-size: 26px;
}

.modal-footer.work-footer {
    border-top: none;
    padding-top: 0px;
    padding-bottom: 15px;
}

h3.card-title.title-repo-text-re {
    font-size: 20px !important;
    font-weight: 600 !important;
}

.input-box-cover input,
.input-box-cover select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 5px;
}

form.card.repo-data-box-card {
    padding: 15px !important;
}

.average-working-tab-cover-wrapper .nav-tabs .nav-link.active {
    border-color: #e21e32;
    color: #e21e32;
    /* border-radius: 15px; */
    font-weight: 600;
    border: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.average-working-tab-cover-wrapper .nav-tabs .nav-link:hover {
    border-color: transparent !important;
}

.average-working-tab-cover-wrapper .nav-tabs .nav-link {
    transition: 0.3s border-color;
    font-weight: 400;
    border: 0;
    color: inherit;
    /* border-bottom: 3px solid transparent; */
    padding: 1px 13px;
    font-size: 14px;
}

.earnings-main-cover-wrapper {
    margin-top: 15px;
}

.average-working-tab-cover-wrapper .nav-tabs .nav-item {
    padding: 0px 5px;
}

.card-body-btn {
    display: flex;
    justify-content: end;
}

.card-body-btn button {
    padding: 8px 30px;
}

.second-repo-btn {
    justify-content: space-between !important;
}

button.btn.btn-primary.prev-repo-btn {
    background: #6a6a6a;
}

button.btn.btn-primary.prev-repo-btn:hover {
    background: #3f3f3f;
}

.choose-option-box h5 {
    margin-bottom: 13px;
}

input.mr-2.label-check-input {
    margin-top: -6px;
}

button.btn.btn-primary.flow-add-btn {
    padding: 9px 40px;
    margin-top: -3px;
}

.report-card h3 {
    font-size: 20px;
    margin-left: 7px;
    font-weight: 600;
    margin-top: 10px;
}

.report-card-attendence {
    box-shadow: 0px 2px 6px rgba(40, 90, 185, 0.1);
    border: 1px solid #00000012;
    background: #fff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    margin-top: 20px;
    padding-left: 20px;
}

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

.report-data-card {
    display: flex;
    align-items: center;
    gap: 15px;
}

.star-icon i {
    font-size: 20px;
}

.daterangepicker .drp-selected {
    display: none;
}

.form-data-copy-repo {
    height: 150px;
    overflow: auto;
}

.form-data-copy-repo::-webkit-scrollbar {
    width: 5px;
}

.form-data-copy-repo::-webkit-scrollbar-track {
    background: #ffffff;
}

.form-data-copy-repo::-webkit-scrollbar-thumb {
    background: #575757 !important;
    border-radius: 10px;
}

.report-check-test {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.report-check-test label {
    margin-bottom: 0px;
    font-size: 16px;
}

.report-data {
    justify-content: center;
    padding-top: 12px !important;
}

.report-content p {
    margin-bottom: 0px;
    font-size: 14px;
}

.report-content h5 {
    margin-bottom: 1px;
    font-size: 18px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #357ebd !important;
    border-color: transparent;
    color: #fff;
}

.modal-header .close:focus {
    outline: none !important;
}

button.applyBtn.btn.btn-sm.btn-primary {
    background: #d05a5a !important;
}

.div-data-repo-btn {
    background: transparent !important;
}

.address-title {
    margin-bottom: 15px;
}

.custom-controls-stacked {
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.average-working-tab-cover-wrapper ul#myTab {
    border: 1px solid #69696938;
    border-radius: 25px;
    padding: 5px;
    width: fit-content;
    margin: 0 auto;
    margin-left: -5px;
    display: flex;
    justify-content: space-between;
}

.input-box-cover input[type="radio"] {
    width: auto;
}

.red-bot {
    color: red;
}

.radio-workflow {
    display: flex;
    align-items: center;
    gap: 15px;
}

.custom-sidebar-target .metismenu span {
    display: flex;
    margin-left: 45px;
    margin-top: -24px;
    font-size: 14px;
}

.custom-sidebar-target .metismenu.grid span {
    margin-top: 10px;
    margin-left: 0px;
}

.custom-sidebar-target .metismenu span.child-span {
    margin-top: 0px !important;
    margin-left: 0px !important;
}

.custom-sidebar-target .metismenu {
    margin-top: 25px;
}

#left-sidebar .sidebar-nav::-webkit-scrollbar {
    width: 10px;
}

#left-sidebar .sidebar-nav::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#left-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background: #b3b0b0;
    border-radius: 6px;
}

#left-sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #8a8686;
}

.custom-sidebar-target .metismenu .active {
    /* background-image: linear-gradient(to right top, #ff5c52, #ed544b, #db4d45, #ca453e, #b93e38); */
    /* background-image: linear-gradient(to right top, #ff5c52, #ed544b75, #db4d45, #ca453e94, #b93e388a); */
    /* background: #ffe9e9; */
    background: rgb(238 200 200 / 7%);
    border-radius: 7px;
    margin-right: 9px;
    margin-right: 2px;
}

a#toggle-sidebar {
    margin-right: 7px;
}

.custom-sidebar-target .metismenu li:hover {
    background: #f0f4fa9e;
}

.custom-sidebar-target .metismenu i {
    text-align: center;
    height: 24px;
    align-content: center;
    border-radius: 6px;
}

.custom-sidebar-target .metismenu .active i {
    color: red;
    background: #fff;
}

.metismenu.extra-margin {
    margin-top: 40px !important;
}

.custom-sidebar-target .metismenu .active .sidebar-icons {
    display: block;
}

.sidebar-icons {
    width: 27px;
    background: #fff;
    border-radius: 5px;
    padding: 3px;
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
}

.custom-sidebar-target .metismenu .active>a {
    color: #fff;
    border: none;
}

.custom-sidebar-target .metismenu a:hover {
    border: none !important;
}

.custom-sidebar-target .metismenu .active a {
    color: #000 !important;
    border: none !important;
}

.custom-sidebar-target .metismenu .g_heading {
    display: none;
}

.custom-sidebar-target .metismenu .active img {
    display: none;
}

/* a#toggle-sidebar1 img {
    margin-left: 15px;
} */

.custom-width {
    width: 95%;
    left: 65px;
}

.custom-sidebar-target .metismenu {
    margin-top: 25px;
    margin-top: -5px;
    padding-top: 0px;
    margin-bottom: 25px;
    /* box-shadow: 0 -4px 6px -4px rgba(229, 225, 225, 0.982); */
}

.custom-sidebar-target .metismenu .metismenu.extra-margin {
    margin-top: 45px;
    padding-top: 17px;
    /* box-shadow: 0 -4px 6px -4px rgba(229, 225, 225, 0.982); */
}

.disable-menu-btn {
    display: none !important;
}

#left-sidebar {
    background-color: #fffdfd;
    border: none !important;
    transition: left 0.3s ease, width 0.3s ease;
    box-shadow: 0 2px 8px rgba(40, 90, 185, 0.1);
    z-index: 999;
}

button.btn.btn-primary.run-payroll-btn {
    padding: 10px;
    background: #d05a5a;
}

.data-repo-divs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 50%;
    margin: 0 auto;
}

span.tag.tag-orange.salary-comp-orange {
    border-radius: 22px;
    padding: 0px 18px;
    font-size: 11px;
    background: #d05a5a;
    display: block;
    margin-bottom: 6px;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

h2.repo-font-data {
    font-size: 25px;
    text-align: center;
    margin-bottom: 0px;
}

/* .temp-data-repo {
    width: 60% !important;
} */

.page-header .right .nav-link {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    background: #8080800a;
    color: #d44a42 !important;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
        rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    border: 1px dashed #d44a42 !important;
    justify-content: center;
}

.video-data-box-repo-inner p {
    padding: 3px 5px;
}

.page-header {
    padding: 14px 0;
    padding: 5px 0;
}

.footer-custom.section-body {
    border: none;
}

.corporate-dashboard-hero-image {
    text-align: center;
    margin-bottom: -15px;
}

.header-profile-name-custome p {
    margin: 0;
    font-size: 14px;
    color: #e21e32;
}

.header-profile-name-custome {
    margin-left: 13px;
    margin-top: 4px;
}

.header-profile-name-custome h4 {
    font-size: 17px;
    margin-bottom: 0;
}

.custome-card {
    box-shadow: 0px 2px 6px rgba(40, 90, 185, 0.1);
    border: 1px solid #00000012;
    background: #fff;
    border-radius: 15px;
}

.custome-table th {
    font-weight: bold;
    color: #000 !important;
    font-size: 13px;
    text-align: center;
}

.custome-table td {
    padding: 5px 0px !important;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    font-size: 13px;
    padding: 10px 0px !important;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    font-size: 13px;
    text-wrap: nowrap;
}

tr.attendence-list-row {
    background: #ffffff00 !important;
}

.table-responsive .table td,
.table th {
    padding: 9px 10px;
    border-top: 1px solid #6969690a;
    font-size: 13px;
}

thead.highlight-header {
    background: #d05a5a;
    height: 44px;
    z-index: 1;
    position: relative;
    border: none;
}

.custome-table .table.table-striped tbody tr:nth-of-type(2n) {
    background-color: rgba(139, 139, 139, 0.03);
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: #000;
    content: ">";
    font-weight: bold;
}

.custome-card .card-title {
    font-weight: bold;
}

.breadcrumb {
    background: #f6f9fb;
    padding: 0.5rem 1.5rem;
    position: sticky;
    top: 50px;
    z-index: 99;
    box-shadow: 0 2px 5px rgba(40, 90, 185, 0.1);
}

.breadcrumb-wrapper i {
    font-size: 22px;
}

.custome-search-card {
    box-shadow: 0px 2px 6px rgba(40, 90, 185, 0.1);
    border: 1px solid #00000012;
    background: #fff;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    background-image: url(../images/geo-location-banner-bg.png) !important;
    /* background-image: linear-gradient(to right, #ffffff, #ffffff, #eff6ff, #eff6ff); */
    /* background: aliceblue; */
}

.custome-search-card-btn {
    margin-top: 0px;
    width: 60%;
    border-radius: 15px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.custome-search-card .card-title {
    font-weight: bold;
    font-size: 18px;
    margin-top: -7px;
    font-weight: bold;
    font-size: 18px;
    text-transform: capitalize;
}

.custome-search-card .card-body {
    padding: 10px 20px;
}

.custome-search-card .card-body .row {
    display: flex;
    align-items: center;
}

.custome-search-card .card-body input {
    margin-top: 15px;
}

.manage-shift-btn-cover .manage-staff-list-btn {
    margin-top: 27px;
}

.manage-shift-btn-cover .edit-staff-template-btn {
    margin-top: 27px;
}

.manage-shift-btn-cover button i {
    margin-right: 6px;
    margin-left: 5px;
}

.manage-shift-btn-cover button {
    width: 100% !important;
    padding: 7px 14px !important;
}

.shift-strip-box {
    border: 1px solid #69696929;
    border-radius: 8px;
    padding: 20px 15px;
    margin-bottom: 17px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.shift-timing-pills {
    border: 1px solid #69696924;
    margin-right: 10px;
    padding: 2px 11px;
    font-size: 12px;
    border-radius: 26px;
    background: aliceblue;
    color: black;
    font-weight: 500;
}

.shift-type-title h6 {
    margin-bottom: 0px;
}

.shift-strip-box {
    border: 1px solid #69696929;
    border-radius: 13px;
    padding: 20px 15px;
    margin-bottom: 30px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.shift-timing-btn button {
    width: 100%;
    /* margin: 5px; */
    border-radius: 5px;
    margin-right: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

#page_top {
    position: sticky;
    top: 0px;
    z-index: 999;
    /* border-bottom: 1px solid #69696912; */
    box-shadow: rgb(0 0 0 / 2%) 0px 3px 5px;
}

.video-data-box-repo-inner video {
    border-radius: 5px;
}

.breadcrumb-wrapper {
    position: sticky;
    top: 80px !important;
    /* z-index: 9999999; */
}

/* .custome-search-title {
    margin-top: 33px;
} */
.custome-search-title {
    margin-top: 10px;
}

.custome-card .card-header {
    border-bottom: 1px solid rgb(206, 206, 206);
    border-bottom: 1px solid rgb(206 206 206 / 35%);
}

.table-responsive td {
    text-align: center;
}

td.profile-img-box img {
    width: 40px;
}

/* .table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
} */

.table-responsive::-webkit-scrollbar {
    width: 12px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #555;
}

td.profile-img-box img {
    max-width: 55px !important;
}

.birthday-card-cover {
    background-image: url("../images/birth-bg-banner.png");
    /* background-size: cover; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 244px;
}

.birthday-card {
    padding: 15px;
    display: flex;
    align-items: center;
    padding-top: 55px;
}

.birthday-profile-pic {
    width: 280px;
    margin-right: 20px;
    margin-left: 25px;
    border: 8px solid white;
    border-radius: 10px;
}

.birthday-card-details p {
    font-size: 12px;
}

.birthday-card-details p {
    font-size: 11px;
    color: white;
    font-weight: 500;
}

p.designation-text {
    margin-bottom: 2px;
    font-weight: 600;
}

.birthday-card-details h6 {
    font-weight: 800;
    color: #e80938;
    margin-bottom: 3px;
}

.birthday-card-details h3 {
    font-size: 20px;
    font-weight: 700;
}

.work-anniversary-card-profile {
    width: 132px;
    height: 118px;
    margin: 0 auto;
    padding: 9px;
    padding-top: 7px;
}

.anniversary-greet-title h5 {
    font-weight: 700;
}

.work-anniversary-card-profile-cover {
    padding: 3px 26px;
}

.anniversary-detail-box p {
    margin-bottom: 11px;
    font-size: 12px;
    font-weight: 600;
}

.work-anniversary-card-profile img {
    border: 5px solid white;
    border-radius: 15px;
}

.anniversary-detail-box h5 {
    font-size: 18px;
    margin-bottom: 3px;
    font-weight: 700;
    color: #050505;
}

.work-anniversary-card-cover {
    background-image: url("../images/anniversary-bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.anniversary-greet-title {
    background-image: url("../images/anniversary-strip.png");
    padding: 0px 5px;
    background-position: center;
    background-size: 100%;
    /* margin: 0 auto; */
    background-repeat: no-repeat;
    margin-bottom: 9px;
    /* margin-top: -20px; */
    padding-top: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    color: #d0352d;
}

.birthday-card-details h5 {
    font-weight: 600;
}

td.long-designation {
    text-wrap: balance;
}

.anniversary-greet-title.birthday-greet {
    width: 77%;
}

span.designation {
    font-size: 13px;
}

.anniversary-greet-title h5 {
    margin-bottom: 3px;
    font-size: 17px;
    color: black;
}

.birthday-card-details h5,
h6 {
    text-transform: capitalize;
    font-size: 17px;
}

h5.greet-title.aniversary-title {
    font-size: 14px;
}

.birthday-card-details h6 {
    color: white;
}

button.import-btn {
    box-shadow: rgb(0 0 0 / 9%) 0px 3px 6px, rgb(0 0 0 / 8%) 0px 3px 1px;
}

button.export-btn {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

th.table-header-text {
    text-align: center;
}

a.table-link {
    color: #3c6bdd;
    font-weight: 600;
    text-decoration: underline;
}

.card-header h3.card-title {
    font-size: 16px;
    font-weight: 800;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

.footer-custom {
    position: fixed;
    width: 100%;
    bottom: 0;
    margin-top: 100px;
    background: white;
    border-top: 1px solid #69696940;
}

.footer-main-cover-wrapper {
    position: relative;
    padding: 15px;
    height: 62px;
    overflow: hidden;
}

.section-body {
    margin-bottom: 100px;
    position: relative;
    overflow: hidden;
}

.select-btn i {
    font-size: 15px;
    margin-left: 7px;
    margin-bottom: 0px;
}

/* input.checkbox-input {
	margin-right: 10px;
} */

.select-menu {
    position: relative;
    width: 140px !important;
    margin: 0 auto;
}

/* .select-menu {
	max-width: 330px;
	margin: 50px auto;
  } */
.select-menu .select-btn {
    display: flex;
    height: auto;
    background: #1a5089;
    padding: 7px 15px;
    font-size: 11px;
    color: white;
    font-weight: 800;
    font-weight: 600;
    border-radius: 5px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
        rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
        rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.select-menu .options {
    position: absolute;
    width: auto;
    display: none;
    overflow-y: auto;
    max-height: 295px;
    padding: 6px 10px;
    margin-top: 10px;
    border-radius: 8px;
    background: #f2f1fa;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-duration: 0.35s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.35s;
    -webkit-animation-fill-mode: both;
}

.select-menu .options .option {
    display: flex;
    /* justify-content: center; */
    cursor: pointer;
    padding: 6px 6px;
    padding-left: 0px;
    align-items: center;
    text-align: center;
    padding: 6px 7px;
    /* background: #fff; */
    padding-left: 0px;
    /* border-bottom: 1px solid #69696921; */
}

.option-icon {
    width: 20px;
    margin-right: 7px;
}

.select-menu .options .option i {
    margin-right: 6px;
    font-size: 12px;
}

.select-menu .options .option:hover {
    background: white;
    border-radius: 5px;
    border: 1px solid #2a2abb38;
    padding: 5px 12px;
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
    padding-left: 7px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.select-menu .options .option .option-text {
    font-size: 11px;
    color: rgba(27, 27, 27, 0.8);
    font-weight: 700;
}

.select-btn i {
    font-size: 25px;
    transition: 0.3s;
}

.select-btn i {
    font-size: 9px;
}

.select-menu.active .select-btn i {
    transform: rotate(-180deg);
}

.select-menu.active .options {
    display: block;
    opacity: 0;
    width: 100%;
    z-index: 10;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-duration: 0.4s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
}

i.fa.fa-cog.setting-icon {
    font-size: 14px;
    margin-left: -5px;
    margin-right: 5px;
    margin-bottom: -1px;
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 30px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    to {
        transform: translate3d(0, 20px, 0);
        opacity: 0;
    }
}

/* table.table-container {
    max-height: 400px;
    overflow-y: auto;
    position: relative;
}

.select-btn i {
font-size: 9px;
}

.select-menu.active .select-btn i {
transform: rotate(-180deg);
}
.select-menu.active .options {
display: block;
opacity: 0;
width: 100%;
z-index: 10;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
animation-duration: 0.4s;
animation-fill-mode: both;
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
}

i.fa.fa-cog.setting-icon {
font-size: 14px;
margin-left: -5px;
margin-right: 5px;
margin-bottom: -1px;
}

@keyframes fadeInUp {
from {
transform: translate3d(0, 30px, 0);
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes fadeInDown {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 20px, 0);
opacity: 0;
}
}

/* table.table-container {
max-height: 400px;
overflow-y: auto;
position: relative;
}

table.table-container {
width: 100%;
border-collapse: collapse;
} */

.table-container {
    max-height: 600px;
    /* Adjust as needed */
    overflow-y: auto;
    position: relative;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.table-container thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 99;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    position: sticky;
    top: 0;
    background: #d05a5a;
    z-index: 99;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

th.text-center.add-left-br {
    border-top-left-radius: 15px;
}

th.text-center.add-right-br {
    border-top-right-radius: 15px;
}

.dt-search {
    margin-bottom: 35px;
}

.table-container {
    max-height: 600px;
    overflow-y: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: #4949492b #f1f1f129;
}

.table-container.min-dashboard-height-table {
    max-height: 175px;
    overflow-y: auto;
}

button.btn.btn-icon.filter-btn {
    position: relative;
}

span.header-icon {
    width: 63px;
    height: 50px;
}

span.header-icon img {
    width: 100%;
    height: 100%;
}

h1.page-title.page-title-custome.page-header-title {
    font-size: 22px;
    margin-left: 10px;
    font-weight: 700;
    color: #d05a5a !important;
}

.collapsed-sidebar {
    width: 60px !important;
    /* Width when sidebar is collapsed */
}

.sidebar-nav ul {
    opacity: 1;
    transition: opacity 0.3s;
    /* Animation duration for opacity change */
}

/* .collapsed-sidebar .sidebar-nav ul {
opacity: 0;
} */

.collapsed-sidebar h5.brand-name span,
.collapsed-sidebar .sidebar-nav span {
    display: none;
}

button.support-btn {
    position: fixed;
    padding-left: 0px;
    right: 2px;
    border-radius: 50%;
    background: transparent;
    bottom: 65px;
    border: none;
    font-weight: 600;
    color: white;
    font-size: 12px;
    transition: all 0.3s;
    display: flex;
    /* z-index: 99999; */
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
}

button.support-btn span img {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-left: 3px;
}

.footer-sidebar {
    position: fixed;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    bottom: 66px;
    /* right: -17px !important; */
    right: -260px;
    width: 250px;
    height: 35%;
    background-color: #fefefe;
    border-radius: 10px;
    z-index: 9;
    /* color: #fff; */
    transition: right 0.3s ease-in-out;
}

.support-link-header h5 {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 1px;
}

span.close-support-btn {
    width: 25px;
    height: 24px;
    display: block;
    background: #d05a5a;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
    border-radius: 34%;
    margin-bottom: 5px;
    right: 6px;
    top: 8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.footer-sidebar h4 {
    font-size: 17px;
    margin-bottom: -9px;
    padding: 15px;
    padding-bottom: 8px;
    padding-top: 11px;
    font-weight: 700;
    border-bottom: 1px solid #69696959;
}

.sidebar-content {
    padding: 20px;
    padding-bottom: 9px;
    padding-top: 25px;
}

.footer-sidebar h4 span img {
    width: 30px;
    margin-right: 7px;
}

.support-link-header h5 {
    font-weight: 600;
}

.support-link-icon-box {
    width: 22px;
    margin-right: 15px;
}

.support-detail-content-box h5 {
    font-size: 15px;
    margin-bottom: 3px;
}

.support-detail-content-box p {
    font-size: 13px;
    letter-spacing: 0.8px;
}

.top-scrollbar {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.scroll-bar-content {
    height: 1px;
    /* 1px height to ensure it doesn't take up space */
}

.top-scrollbar::-webkit-scrollbar {
    height: 4px;
    /* Height of the scrollbar */
}

.top-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f170;
    /* Track background */
}

.top-scrollbar::-webkit-scrollbar-thumb {
    background: #88888834;
    /* Scrollbar thumb color */
    border-radius: 8px;
    /* Rounded corners */
}

.top-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Thumb color on hover */
}

.top-scrollbar {
    margin-bottom: 5px;
}

.form-footer button {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgb(0 0 0 / 26%) 0px 3px 7px -3px;
}

.login_div input {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.card-body.login_div .card-title {
    font-weight: 600;
    text-align: center;
}

.resend_btn {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgb(0 0 0 / 26%) 0px 3px 7px -3px;
}

.terms-checkbox span {
    margin-right: 10px;
}

.terms-checkbox p {
    margin-bottom: 0px;
}

span.login-edit-icon {
    position: absolute;
    right: 8px;
    top: 8px;
}

.form-group.login-input-box {
    position: relative;
}

.auth .auth_left {
    width: 100%;
    background-image: url(../images/login-bg.png) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth .auth_left .card {
    padding: 20px;
    right: 0px;
}

div#login-illustration-main-cover {
    width: 85%;
    justify-content: end;
    display: flex;
    margin-left: 62px;
}

.form-footer button span img {
    width: 20px;
    margin-bottom: 4px;
    margin-right: 3px;
    margin-top: 3px;
}

#resend_btn {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgb(0 0 0 / 26%) 0px 3px 7px -3px;
}

a.dropdown-item i {
    border: 1px solid #69696900;
    padding: 7px;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

a.dropdown-item.header-dropdown {
    padding: 0px;
    font-weight: 600;
}

.dropdown-menu.dropdown-menu-right.dropdown-menu-arrow.header-dropdown-box.show {
    left: 15px !important;
    top: 2px !important;
}

.repo-text-image-center {
    display: flex;
    justify-content: center;
}

.table-responsive {
    /* padding: 0px 10px; */
    background: white;
    border-radius: 15px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.table-responsive.min-height-table {
    min-height: 160px;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -2px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -2px;
}

.attendence-regularization-table-main-cover-wrapper {
    border-radius: 10px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -2px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -2px; */
}

.employee-table-container.pending-leaves-main-table.table-responsive.min-height-table {
    height: 160px;
    overflow-y: hidden;
}

.add-green {
    color: #2be42b;
}

ul.submenu-list a span {
    font-size: 12px !important;
    text-wrap: nowrap;
}

.employee-table-container.table-responsive.min-height-table:hover {
    overflow-y: auto;
}

.custome-search-card-btn.add-sales-btn {
    width: 85% !important;
}

.table-responsive table.table thead th b {
    font-weight: 500;
    color: white;
    font-size: 13px;
}

a.dropdown-link {
    display: flex;
    align-items: center;
}

a.dropdown-link img {
    width: 25px;
    margin-right: 10px;
}

.birthday-card-details {
    color: white;
}

.lightboxOverlay {
    z-index: 99999999;
    height: 100vh;
}

.lightbox {
    width: 100%;
    z-index: 99999999999;
    font-weight: 400;
    outline: 0;
    top: 650px !important;
    z-index: 99999999;
    height: 100vh !important;
    position: fixed;
}

.lightbox {
    width: 100%;
    z-index: 99999999999;
    font-weight: 400;
    outline: 0;
    top: 80px !important;
    position: fixed;
}

.lightbox .lb-image {
    width: 100% !important;
    height: 100% !important;
}

.lb-outerContainer {
    width: 480px !important;
    height: 500px !important;
}

.custom-alert-popup-box-cover .alert-popup-box {
    display: flex;
    justify-content: center;
    position: relative;
    background: white;
    border-radius: 15px;
    flex-direction: column;
}

/**
  Browser should support Houdini API
*/

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 90deg;
    inherits: false;
}

:root {
    --bg-background: #111827;
    --clr-card: #1f2937;
    --clr-1: #ea8569;
    --clr-2: #ea8569;
    --clr-3: #ea8569;
}

.custom-alert-popup-box-cover .alert-popup-box {
    position: relative;
    /* padding: 25px; */
    background: white;
    border-radius: 15px;
    height: 95%;
    box-shadow: 0 2px 3px rgb(0 0 0 / 11%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    animation: blinkTopBorder 1.5s infinite ease-in-out,
        blinkRightBorder 1.5s infinite ease-in-out,
        blinkBottomBorder 1.5s infinite ease-in-out,
        blinkLeftBorder 1.5s infinite ease-in-out;
    width: 100%;
    margin-left: 1px;
}

/* Gradient Border */
.custom-alert-popup-box-cover .alert-popup-box::after,
.custom-alert-popup-box-cover .alert-popup-box::before {
    content: " ";
    position: absolute;
    z-index: -1;
    inset: -0.5rem;
    background: conic-gradient(from var(--gradient-angle),
            var(--clr-card),
            var(--clr-1),
            var(--clr-2),
            var(--clr-3),
            var(--clr-2),
            var(--clr-1),
            var(--clr-card));
    border-radius: inherit;
    animation: rotate 2.5s linear infinite;
}

.custom-alert-popup-box-cover .alert-popup-box::after {
    filter: blur(3rem);
}

@keyframes rotate {
    0% {
        --gradient-angle: 0deg;
    }

    100% {
        --gradient-angle: 360deg;
    }
}

/* Blink Animations */
@keyframes blinkTopBorder {
    0% {
        border-top: 1px solid transparent;
    }

    50% {
        border-top: 1px solid var(--clr-1);
    }

    100% {
        border-top: 1px solid transparent;
    }
}

@keyframes blinkRightBorder {
    0% {
        border-right: 1px solid transparent;
    }

    50% {
        border-right: 1px solid var(--clr-2);
    }

    100% {
        border-right: 1px solid transparent;
    }
}

@keyframes blinkBottomBorder {
    0% {
        border-bottom: 1px solid transparent;
    }

    50% {
        border-bottom: 1px solid var(--clr-3);
    }

    100% {
        border-bottom: 1px solid transparent;
    }
}

@keyframes blinkLeftBorder {
    0% {
        border-left: 1px solid transparent;
    }

    50% {
        border-left: 1px solid var(--clr-2);
    }

    100% {
        border-left: 1px solid transparent;
    }
}

.alert-box-main-cover-wrappper form {
    width: 94% !important;
}

div#pf_details input {
    margin-bottom: 0px;
    width: 92%;
    padding: 8px 15px;
}

img.db-img-banner {
    margin-top: -15px;
    max-width: 62%;
    margin: 0 auto;
    display: flex;
}

.payroll-form-main-cover {
    border: 1px solid #00000012;
    padding: 25px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    border-radius: 25px;
    box-shadow: 0px 2px 6px rgba(40, 90, 185, 0.1);
}

.payroll-title {
    margin-bottom: 20px;
}

.payrol-input-box input {
    padding: 9px 10px;
    border-radius: 9px;
    width: 98%;
}

.address-title h5 {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 0px;
    margin-top: 4px;
}

td.text-balancing {
    text-wrap: balance;
}

button.add-employee-accordion-btn {
    border-radius: 7px;
    padding: 3px 10px;
}

.card-header.add-employee-card-header {
    padding: 13px 10px;
    width: 95%;
    padding-bottom: 5px;
    margin: 5px auto;
    border-radius: 6px;
    margin-bottom: 12px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

button.btn.btn-link.add-employee-accordion-btn i {
    font-size: 22px;
    font-weight: 800;
}

.add-employee-accordion-cover .card-body {
    padding: 15px 32px;
}

button.btn.btn-link.add-employee-accordion-btn i {
    transform: rotate(180deg);
}

button.btn.btn-link.collapsed.add-employee-accordion-btn i {
    transform: rotate(0deg);
    transition: all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.details span {
    text-wrap: nowrap;
}

/* dataTable Search --------------------- */
div.dt-container div.dt-search input {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

/* ---------------------Leave Templates --------------------- */
.leave-module-header-title {
    box-shadow: 0px 2px 6px rgba(40, 90, 185, 0.1);
    border: 1px solid #00000012;
    background: #fff;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    padding: 10px 25px;
    padding-top: 25px;
    background-image: url(../images/geo-location-banner-bg.png) !important;
}

.shift-module-header-title.leave-module-header-title {
    padding: 10px 25px;
    padding-top: 10px;
}

.leave-category-title {
    box-shadow: 0px 2px 6px rgba(40, 90, 185, 0.1);
    border: 1px solid #00000012;
    background: #fff;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    padding: 20px 25px;
    padding-top: 25px;
    margin-bottom: 25px;
    background-image: url(../images/geo-location-banner-bg.png) !important;
}

.leave-category-title h6 {
    margin-top: 10px;
}

.leave-category-content-box {
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    padding: 25px 30px;
    border-radius: 10px;
    margin-bottom: 35px;
}

.leave-category-header-title {
    margin-bottom: 22px;
    border-bottom: 1px solid #cf32291f;
    padding-bottom: 11px;
}

.leave-category-header-title p {
    margin-bottom: 0px;
    font-weight: 500;
}

.leave-module-title-content h4 {
    font-weight: bold;
    font-size: 18px;
    margin-top: -4px;
    /* text-transform: uppercase; */
}

.leave-module-btn-cover button {
    margin-top: 5px;
    border-radius: 8px;
    font-weight: 500;
    padding: 8px 16px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.leave-category-btn-box button {
    margin-top: 5px;
    border-radius: 8px;
    font-weight: 500;
    padding: 8px 16px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.leave-module-title-content p {
    color: dimgray;
}

.leave-box {
    padding: 28px 20px;
    border: 1px solid #69696912;
    border-radius: 11px;
    padding-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.leave-box p,
h4 {
    margin-bottom: 0px;
}

.template-btns button {
    width: 94%;
    margin: 0 auto;
    display: flex;
    padding: 7px 10px;
    text-align: center;
    justify-content: center;
    border-radius: 5px;
    color: white;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.leave-template-name h5 {
    font-size: 17px;
    margin-bottom: 0px;
    margin-top: 4px;
    color: #cf3229;
    font-weight: 700;
}

.leave-box p {
    color: #535252;
}

.template-main-form-box form ul {
    padding: 0px;
    list-style: none;
}

.template-main-form-box {
    box-shadow: 0px 2px 6px rgba(40, 90, 185, 0.1);
    border: 1px solid #00000012;
    background: #fff;
    border-radius: 15px;
    padding: 25px 30px;
    padding-top: 10px;
    padding-bottom: 0px;
}

.template-main-form-box form ul li {
    display: flex;
    border-bottom: 1px solid #cf322938;
}

.template-main-form-box form ul li {
    display: flex;
    border-bottom: 1px solid #cf322938;
    padding: 16px 0px;
    align-items: center;
}

.template-main-form-box form ul li label {
    margin-bottom: 0px;
    width: 250px;
    color: black;
    font-weight: 500;
    font-size: 16px;
}

button.policy-cycle-btn,
button.sandwich-leaves-btn {
    border: 1px solid #00000029;
    padding: 5px 15px;
    background: transparent;
    width: 90px;
    outline: none;
}

button.policy-cycle-btn:first-child,
button.sandwich-leaves-btn:first-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    margin-right: -5px;
    color: dimgray;
}

button.policy-cycle-btn:last-child,
button.sandwich-leaves-btn:last-child {
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

button.temp-active-btn {
    border: 1.5px solid red;
    color: #cb3128;
}

.delete-leave-cat-btn button {
    border-radius: 50%;
    margin-left: 14px;
    background: darkslateblue;
    color: white;
    border: none;
    padding: 4px 9px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.confetti {
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 97vw;
    height: 100vh;
    left: -140px;
    overflow: hidden;
    z-index: -1 !important;
    /* background: aliceblue; */
}

.days-per-year-input-box input::placeholder {
    text-align: right;
    /* Align placeholder text to the left */
    /* padding-left: 100px; */
}

.onborded-succesfully-mail {
    text-transform: initial;
}

.terms-checkbox p {
    text-wrap: wrap;
    font-size: 14px;
}

.terms-checkbox p a {
    text-decoration: underline;
    color: blue;
}

.department-accordion-cover-wrapper .card-header.add-employee-card-header {
    box-shadow: none;
}

.department-accordion-cover-wrapper .card-header.add-employee-card-header {
    box-shadow: none;
    border: none;
}

.department-accordion-cover-wrapper .card-body {
    padding-top: 0px;
}

/* STATUTORY CSS STARTS--------------------------------------- */
.statutory-list-main-cover .leave-box {
    padding: 15px;
    padding-top: 20px;
}

.stat-title-detail h5 {
    font-size: 17px;
    color: #2d2c34;
    font-weight: 600;
}

/* The switch - the box around the slider */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 45px;
    height: 20px;
    margin-top: 5px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 1;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background: #fff;
    transition: 0.4s;
    border-radius: 30px;
    border: 1px solid #ccc;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 1px solid #808080;
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    border-radius: 16px;
    left: 1.2px;
    top: 0;
    bottom: 0;
    background-color: white;
    box-shadow: 0 2px 5px #999999;
    transition: 0.4s;
}

input:checked+.slider {
    background-color: #d05a5a;
    border: 1px solid transparent;
}

input:checked+.slider:before {
    transform: translateX(1.3em);
}

.employee-porvident-right-card-cover {
    border: 1px solid #6969691f;
    padding: 19px 27px;
    border-radius: 17px;
    background: #f0f8ff36;
    padding-bottom: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.employee-header-input-box label {
    margin-bottom: 5px;
    font-size: 14px;
    color: #151519b5;
}

.employee-provident-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #6969693d;
    padding-bottom: 13px;
}

.employee-header-input-box h6 {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 21px;
}

ul.employee-provident-checkbox-list li {
    list-style: none;
    margin-bottom: 6px;
}

.employee-provident-list-box {
    margin-bottom: 18px;
}

.employee-provident-list-box span {
    margin-right: 5px;
}

ul.employee-provident-checkbox-list.disable-list li {
    opacity: 0.5;
    font-size: 14px;
}

.employee-contribution-content {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    padding-bottom: 0px;
}

p.employee-contribution-total-title {
    font-weight: 600;
    color: gray;
    font-size: 12px;
}

h5.employee-contribution-title {
    font-weight: 700;
    font-size: 14px;
}

hr.line {
    margin: 4px 0px;
}

.employee-contribution-total {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
}

.epf-calculation-card-cover {
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 8px;
    margin-top: 45px;
    box-shadow: 0px 0px 1px 0px;
    padding: 22px 24px;
    background-color: aliceblue;
}

.employee-contribution-cover {
    background-color: white;
    padding: 25px 26px;
    border-radius: 8px;
    padding-bottom: 3px;
    box-shadow: 0px 0px 2px 0px #b0b0b0;
    width: 100%;
}

.epf-calculation-card-title {
    padding: 4px 3px;
    font-weight: 700;
    font-size: 16px;
}

.epf-calculation-card-para {
    padding-bottom: 8px;
    padding-left: 3px;
    font-size: 12px;
}

h5.employee-contribution-sub-title {
    padding-top: 12px;
    font-weight: 700;
    font-size: 14px;
    padding-bottom: 3px;
}

p.employee-contribution-content-data {
    font-weight: 500;
    color: gray;
    font-size: 13px;
    padding-top: 3px;
}

.employee-contribution-content p {
    font-size: 12px;
}

.employee-contribution-total p {
    font-size: 12px;
}

.template-main-form-box form ul li label {
    margin-bottom: 0px;
    width: 250px;
    color: black;
    font-weight: 500;
    font-size: 16px;
}

.template-main-form-box form ul li {
    display: flex;
    border-bottom: 1px solid #0a0a0a24;
    padding: 16px 0px;
    align-items: center;
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease;
    /* Adjust duration and timing function as needed */
}

.week-days-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    /* background-color: #f9f9f9; */
    /* border: 1px solid #ddd; */
    font-family: Arial, sans-serif;
}

button.delete-category i {
    color: red;
    font-size: 22px;
}

.delete-leave-cat-btn button {
    border-radius: 50%;
    margin-left: 7px;
    background: transparent;
    color: white;
    border: none;
    padding: 4px 9px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
}

.manage-staff-list-btn.template-btns {
    margin-right: -15px;
    margin-left: 16px;
}

.shift-timing-btn {
    margin-left: 22px;
    margin-right: -29px;
}

.delete-leave-cat-btn {
    margin-left: 15px;
}

/* POLICY STYLES STARTS --------------------------- */

.employee-checkbox-content-card-box {
    /* border: 1px solid dimgray; */
    /* padding: 10px 25px; */
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    margin-bottom: 7px;
    border-radius: 15px;
    width: 95%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    overflow: hidden;
}

.employee-checkbox-title {
    text-align: center;
    padding: 9px 10px;
    background: aliceblue;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    margin-bottom: 0px;
    padding-bottom: 3px;
}

.employee-checkbox-title h5 {
    font-size: 16px;
    margin-top: 3px;
    color: darkslateblue;
    font-weight: 700;
}

.employee-checkbox-list-cover {
    padding: 5px 20px;
    height: 380px;
    overflow-y: scroll;
}

.employee-checkbox-list-cover::-webkit-scrollbar {
    width: 5px;
}

.employee-checkbox-list-cover::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.employee-checkbox-list-cover::-webkit-scrollbar-thumb {
    background: #2c63ca;
    border-radius: 10px;
}

.employee-checkbox-list-cover::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.employee-checkbox-content-list {
    border-bottom: 1px solid #69696929;
    padding: 7px 0px;
    font-size: 14px;
    display: flex;
}

.run-payrol-header-title h5 {
    color: darkslateblue;
    font-weight: 600;
}

.week-days-table th,
.week-days-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

.week-days-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.checkbox-label {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
}

.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    /* background-color: #eee; */
    border: 1px solid #ccc;
    border-radius: 3px;
}

.checkbox-label:hover input~.checkmark {
    background-color: #ccc;
}

.checkbox-label input:checked~.checkmark {
    background-color: #2196f3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-label input:checked~.checkmark:after {
    display: block;
}

.checkbox-label .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {

    .week-days-table th,
    .week-days-table td {
        font-size: 12px;
        padding: 8px;
    }
}

.policies-main-cover-wrapper .card-header {
    padding: 14px 25px;
    color: darkslateblue;
    padding-bottom: 13px;
    background: aliceblue;
    display: flex;
    justify-content: center;
    font-weight: 300;
}

.employee-info.emp-policy-info {
    border: 1px solid #fff7f7;
    padding: 10px 20px;
    margin-right: 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    padding-bottom: 5px;
}

.employee-info.emp-policy-info span {
    border-bottom: 1px solid #6969691a;
    display: block;
    padding: 6px 0px;
}

.employee-info.emp-policy-info span strong {
    width: 100px !important;
    /* background: antiquewhite; */
    display: block;
    color: #000;
}

.employee-info.emp-policy-info span img {
    width: 22px;
    margin-right: 12px;
}

.employee-info.emp-policy-info span {
    display: flex;
    align-items: center;
    color: dimgray;
}

.employee-info-list-cover {
    height: 300px;
    overflow-y: scroll;
}

.employee-info-list-cover::-webkit-scrollbar {
    width: 5px;
}

.employee-info-list-cover::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.employee-info-list-cover::-webkit-scrollbar-thumb {
    background: #a4a5e4;
    border-radius: 6px;
}

.employee-info-list-cover::-webkit-scrollbar-thumb:hover {
    background: #57529c;
}

.custom-file.upload-policy-file-box {
    width: 80%;
}

.pdf-input-box span {
    background: darkslateblue;
    color: white;
    padding: 5px 15px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    border-radius: 6px;
    margin-left: 10px;
    /* margin-top: 15px; */
}

.pdf-input-box {
    display: flex;
    align-items: center;
}

.custom-file.upload-policy-file-box {
    width: 71%;
}

.pdf-input-box span a {
    color: white;
    font-size: 13px;
}

span.edit-policy-icon {
    background: darkslateblue;
    border-radius: 18%;
    color: white;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

/* POLICES --------------------------- */
.policies-main-cover-wrapper .card-header {
    padding: 14px 25px;
    color: darkslateblue;
    padding-bottom: 13px;
    background: aliceblue;
    display: flex;
    justify-content: center;
    font-weight: 300;
}

.employee-info.emp-policy-info {
    border: 1px solid #fff7f7;
    padding: 10px 20px;
    margin-right: 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    padding-bottom: 5px;
}

.employee-info.emp-policy-info span {
    border-bottom: 1px solid #6969691a;
    display: block;
    padding: 6px 0px;
}

.employee-info.emp-policy-info span strong {
    width: 100px !important;
    /* background: antiquewhite; */
    display: block;
    color: #000;
}

.employee-info.emp-policy-info span img {
    width: 22px;
    margin-right: 12px;
}

.employee-info.emp-policy-info span {
    display: flex;
    align-items: center;
    color: dimgray;
}

.employee-info-list-cover {
    height: 300px;
    overflow-y: scroll;
}

.employee-info-list-cover::-webkit-scrollbar {
    width: 5px;
}

.employee-info-list-cover::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.employee-info-list-cover::-webkit-scrollbar-thumb {
    background: #a4a5e4;
    border-radius: 6px;
}

.employee-info-list-cover::-webkit-scrollbar-thumb:hover {
    background: #57529c;
}

.accept-reject-btns-cover.repo-cover-data-btn {
    margin-left: 35px;
}

.custom-file.upload-policy-file-box {
    width: 80%;
}

.pdf-input-box span {
    background: #ffedee;
    color: #d05a5a;
    padding: 5px 11px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    border-radius: 6px;
    margin-left: 10px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    /* margin-top: 15px; */
}

.pdf-input-box {
    display: flex;
    align-items: center;
}

.custom-file.upload-policy-file-box {
    width: 71%;
}

.pdf-input-box span a {
    color: white;
    font-size: 13px;
}

span.edit-policy-icon {
    background: #d05a5a;
    border-radius: 18%;
    color: white;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.down-rpo-btn {
    background-color: #d05a5a !important;
    color: white !important;
}

span.repo-sliver {
    color: #9f9f9f;
    font-size: 12px;
}

.shift-btn-repo {
    background-color: #d05a5a !important;
}

.employee-policy-search-box input {
    width: 80%;
    margin-right: 5px;
}

.employee-policy-search-box button {
    padding: 5px 15px;
    border-radius: 5px;
    background: darkslateblue;
    color: white;
    border: none;
    font-size: 13px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.employee-checkbox-content-card-box {
    /* border: 1px solid dimgray; */
    /* padding: 10px 25px; */
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    margin-bottom: 7px;
    border-radius: 15px;
    width: 95%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    overflow: hidden;
}

.employee-checkbox-title {
    text-align: center;
    padding: 9px 10px;
    background: aliceblue;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    margin-bottom: 0px;
    padding-bottom: 3px;
}

.employee-checkbox-title h5 {
    font-size: 16px;
    margin-top: 3px;
    color: darkslateblue;
    font-weight: 700;
}

.employee-checkbox-list-cover {
    padding: 5px 20px;
    height: 380px;
    overflow-y: scroll;
}

.employee-checkbox-list-cover::-webkit-scrollbar {
    width: 5px;
}

.employee-checkbox-list-cover::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.employee-checkbox-list-cover::-webkit-scrollbar-thumb {
    background: #2c63ca;
    border-radius: 10px;
}

.employee-checkbox-list-cover::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.employee-checkbox-content-list {
    border-bottom: 1px solid #69696929;
    padding: 7px 0px;
    font-size: 14px;
}

.employee-checkbox {
    width: 30px;
    border-right: 1px solid #69696961;
    display: inline-block;
    margin-right: 10px;
}

.birthday-dash-icon {
    width: 15px;
    height: 15px;
    background: white;
    border-radius: 6px;
    margin-left: -5px;
    margin-right: 3px;
}

/* AUTOCALCULATE SALARY UI CSS -------------------------- */

.salary-type-tab-cover .nav.nav-tabs .nav-link {
    padding: 0px;
    margin: 0px;
    margin-top: -1px;
    margin-bottom: -5px;
    color: #000000c9;
}

.salary-type-tab-cover .nav.nav-tabs .nav-link {
    padding: 0px;
    margin: 0px;
    margin-top: -1px;
    margin-bottom: -5px;
    color: #000000c9;
}

.salary-type-tab-cover .nav.nav-tabs .nav-link {
    padding: 5px 10px;
    margin: 0px;
    margin-top: -1px;
    color: #000000c9;
    border: 1px solid;
    border-radius: 5px;
    font-size: 14px;
    background: white;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #5f5f5f29;
    border: 1px solid #d05a5a;
}

.salary-type-tab-cover .nav.nav-tabs .nav-item {
    margin: 0px;
    padding: 4px 7px;
}

.salary-type-tab-cover .nav.nav-tabs .nav-link.active {
    padding: 6px 23px;
    margin: 5px;
    border-radius: 7px;
    font-size: 13px;
    background: #d05a5a;
    border: 1px solid black;
    color: white;
    font-weight: 600;
}

.salary-type-tab-cover .nav.nav-tabs {
    border-radius: 5px;
    border: none;
    background: transparent;
    width: 325px;
    padding: 3px 0px;
    display: flex;
    justify-content: space-around;
    margin: 15px 0px;
}

/* ADD SALARY TEMPATE UI ----------------- */
/* ADD SALARY TEMPATE UI ----------------- */
.salary-pills-card-box {
    border: 1px solid #69696912;
    border-radius: 12px;
    padding: 14px 25px;
    width: 90%;
    margin-left: 25px;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.lb-dataContainer {
    margin: 0 auto;
    padding-top: 5px;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-top: -542px;
}

.salary-template-pills {
    border: 1px solid #69696921;
    margin: 7px 9px;
    padding: 3px 14px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.salary-template-pills span {
    font-size: 12px;
}

.salary-pills-card-box {
    border: 1px solid #69696912;
    border-radius: 12px;
    padding: 14px 25px;
    width: 95%;
    margin-left: 25px;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.lb-dataContainer {
    margin: 0 auto;
    padding-top: 5px;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-top: -542px;
}

.salary-template-pills {
    border: 1px solid #69696921;
    margin: 7px 9px;
    padding: 7px 14px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.salary-template-pills span {
    font-size: 13px;
    margin-bottom: 3px;
}

.salary-temp-pills-title {
    border-bottom: 1px solid #69696929;
    padding: 10px 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

.salary-temp-pills-title h5 {
    color: #e21e32;
    font-weight: 600;
    margin-bottom: 0px;
}

tr.category-row {
    background: #f6f6f64a;
    height: 20px !important;
    color: black;
    font-weight: 600;
}

.salary-template-table-main-cover-wrapper .table-responsive .table td,
.table th {
    border-top: 1px solid #00000012;
}

/* ADD CTC UI STYLES ------------------------- */
.salary-ctc-table-earning {
    border: 1px solid;
    padding: 10px 22px;
    border-radius: 10px;
}

th.text-center.salary-dynamic-title {
    padding: 5px;
    background: darkslateblue;
    color: white;
    border-radius: 6px;
}

ul.salary-ctc-list-card li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

ul.salary-ctc-list-card {
    padding: 0px;
    list-style: none;
    margin-bottom: 0px;
}

.salary-ctc-table-earning {
    border: 1px solid #6969692b;
    padding: 10px 22px;
    border-radius: 10px;
    width: 90%;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

input.form-control:focus {
    border-color: #40a9ff;
    border-right-width: 1px !important;
    box-shadow: 0 0 0 2px #1890ff33;
    outline: 0;
}

h5.salary-ctc-table-header {
    background: darkslateblue;
    padding: 8px 5px;
    font-size: 17px;
    color: white;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 14px;
}

li.ctc-price-box {
    padding-top: 8px;
    border-top: 1px solid #6969694f;
    margin-bottom: -9px;
}

.salary-ctc-table-earning {
    border: 1px solid #6969692b;
    padding: 10px 22px;
    border-radius: 10px;
    width: 90%;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

input.form-control:focus {
    border-color: #40a9ff;
    border-right-width: 1px !important;
    box-shadow: 0 0 0 2px #1890ff33;
    outline: 0;
}

/* RUN PAYROLL ------------------------------------- */

.run-payrol-header-title {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 2px dotted #6969694f;
}

.run-payrol-main-cover-wrapper {
    width: 100%;
    margin-top: 25px;
}

.employee-checkbox {
    border-right: 1px solid #6969695c;
    margin-right: 15px;
}

.run-payroll-employee-list-main-cover-wrapper a {
    color: blue;
}

.run-payroll-employee-list-main-cover-wrapper .tooltip {
    position: relative;
}

/* Tooltip text */
.run-payroll-employee-list-main-cover-wrapper .tooltip .tooltiptext {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the tooltip text when hovering over the tooltip container */
.run-payroll-employee-list-main-cover-wrapper .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.run-payroll-info-card {
    border: 1px solid #69696930;
    padding: 0px 25px;
    border-radius: 10px;
    width: 260px;
    margin-top: 20px;
    margin-left: 21px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 6px;
    float: right;
    padding-bottom: 10px;
}

.run-payroll-info-head {
    background: #e04b4b;
    color: white;
    text-align: center;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 1px;
    margin-bottom: 9px;
}

.calendar-table {
    overflow: hidden;
    position: relative;
}

.card-body.calender-table {
    overflow-x: scroll;
}

.run-payroll-info-head h5 {
    margin-bottom: 0px;
    padding: 4px;
    font-size: 15px;
}

.run-payroll-list-cover-wrapper li {
    font-weight: 600;
    list-style: circle;
    font-size: 13px;
    margin-bottom: 3px;
}

.run-payroll-list-cover-wrapper li span {
    font-weight: 400;
    color: dimgray;
    margin-left: 5px;
}

.calendar-table {
    overflow: hidden;
    position: relative;
}

.card-body.calender-table {
    overflow-x: scroll;
}

.calendar-table.table-responsive .table td,
.table th {
    padding: 9px 10px;
    border: 1px solid #dee2e6;
}

.calendar-table tbody td:first-child {
    font-weight: bold;
}

.calendar-table tbody td:nth-child(even) {
    background-color: #f9f9f9;
}

.calendar-table tbody td:nth-child(odd) {
    background-color: #fff;
}

/* Adjustments for links within table cells */
.calendar-table tbody td a {
    color: blue;
    text-decoration: underline;
}

/* Example hover effect for table rows */
.calendar-table tbody tr:hover {
    background-color: #f0f0f0;
}

/* Ui Checkbox */
.ui-checkbox {
    --primary-color: #1677ff;
    --secondary-color: #fff;
    --primary-hover-color: #4096ff;
    /* checkbox */
    --checkbox-diameter: 18px;
    --checkbox-border-radius: 5px;
    --checkbox-border-color: #d9d9d9;
    --checkbox-border-width: 1px;
    --checkbox-border-style: solid;
    /* checkmark */
    --checkmark-size: 1.2;
}

.ui-checkbox,
.ui-checkbox *,
.ui-checkbox *::before,
.ui-checkbox *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ui-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--checkbox-diameter);
    height: var(--checkbox-diameter);
    border-radius: var(--checkbox-border-radius);
    background: var(--secondary-color);
    border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.ui-checkbox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
    box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
    border-radius: inherit;
    opacity: 0;
    -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
    -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
    transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

.ui-checkbox::before {
    top: 41%;
    left: 50%;
    content: "";
    position: absolute;
    width: 4px;
    height: 7px;
    border-right: 2px solid var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
    -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
        opacity 0.1s;
    -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}

/* actions */

.ui-checkbox:hover {
    border-color: var(--primary-color);
}

.ui-checkbox:checked {
    background: var(--primary-color);
    border-color: transparent;
}

.ui-checkbox:checked::before {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
    -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.ui-checkbox:active:not(:checked)::after {
    -webkit-transition: none;
    -o-transition: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    transition: none;
    opacity: 1;
}

.modal-content.report-modal {
    border-radius: 20px;
}

.daterangepicker {
    left: 440px !important;
    z-index: 9999999 !important;
}

.report-head-text strong {
    font-size: 23px;
}

.calendar-table-responsive.table-responsive .table td,
.table th {
    padding: 9px 10px;
    border: 1px solid #dee2e6c7;
}

.calendar-table tbody td:first-child {
    font-weight: bold;
}

.calendar-table tbody td:nth-child(even) {
    background-color: #f9f9f9;
}

.calendar-table tbody td:nth-child(odd) {
    background-color: #fff;
}

.calender-view-title-box {
    padding: 10px 13px;
    border: 1px solid #69696933;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background: #eef0f2;
    border-bottom: 1px solid #69696938;
}

.calender-view-title-box h4 {
    font-weight: 600;
    color: darkslateblue;
}

.table-responsive.calendar-table-responsive.table-container.employee-table-container {
    padding-bottom: 25px;
}

.calendar-table-responsive.table-container table {
    width: 4000px;
    border-collapse: collapse;
}

.salary-preview-responsive.table-container table {
    width: 1500px;
    border-collapse: collapse;
}

.payroll-btn-main-cover-wrapper button {
    padding: 8px 23px;
    border-radius: 25px;
    background: #5d5ded;
    color: white;
    border: none;
    font-size: 13px;
    margin: 0px 4px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.payroll-btn-main-cover-wrapper {
    display: flex;
    justify-content: end;
}

.run-payrol-header-title {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 2px dotted #6969694f;
}

.run-payrol-main-cover-wrapper {
    width: 100%;
    margin-top: 25px;
}

.employee-checkbox {
    border-right: 1px solid #6969695c;
    margin-right: 15px;
}

.run-payroll-employee-list-main-cover-wrapper a {
    color: blue;
}

.run-payroll-employee-list-main-cover-wrapper .tooltip {
    position: relative;
}

/* Tooltip text */
.run-payroll-employee-list-main-cover-wrapper .tooltip .tooltiptext {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the tooltip text when hovering over the tooltip container */
.run-payroll-employee-list-main-cover-wrapper .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.run-payroll-info-card {
    border: 1px solid #69696930;
    padding: 0px 25px;
    border-radius: 10px;
    width: 260px;
    margin-top: 20px;
    margin-left: 21px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 6px;
    float: right;
    padding-bottom: 10px;
}

.run-payroll-info-head {
    background: #e04b4b;
    color: white;
    text-align: center;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 1px;
    margin-bottom: 9px;
}

.run-payroll-info-head h5 {
    margin-bottom: 0px;
    padding: 4px;
    font-size: 15px;
}

.run-payroll-list-cover-wrapper li {
    font-weight: 600;
    list-style: circle;
    font-size: 13px;
    margin-bottom: 3px;
}

.run-payroll-list-cover-wrapper li span {
    font-weight: 400;
    color: dimgray;
    margin-left: 5px;
}

.calendar-table {
    overflow: hidden;
    position: relative;
}

.card-body.calender-table {
    overflow-x: scroll;
}

.calendar-table-responsive.table-responsive .table td,
.table th {
    padding: 9px 5px !important;
    border: 1px solid #dee2e6c7;
}

.calendar-table tbody td:first-child {
    font-weight: bold;
}

.calendar-table tbody td:nth-child(even) {
    background-color: #f9f9f9;
}

.calendar-table tbody td:nth-child(odd) {
    background-color: #fff;
}

.calender-view-title-box {
    padding: 10px 13px;
    border: 1px solid #69696933;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background: #eef0f2;
    border-bottom: 1px solid #69696938;
}

.calender-view-title-box h4 {
    font-weight: 600;
    color: darkslateblue;
}

.table-responsive.calendar-table-responsive.table-container.employee-table-container {
    padding-bottom: 25px;
}

.calendar-table-responsive.table-container table {
    width: 4000px;
    border-collapse: collapse;
}

.salary-preview-responsive.table-container table {
    width: 1500px;
    border-collapse: collapse;
}

.payroll-btn-main-cover-wrapper button {
    padding: 8px 23px;
    border-radius: 25px;
    background: #5d5ded;
    color: white;
    border: none;
    font-size: 13px;
    margin: 0px 4px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.payroll-btn-main-cover-wrapper {
    display: flex;
    justify-content: end;
}

.run-payrol-header-title {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 2px dotted #6969694f;
}

.run-payrol-main-cover-wrapper {
    width: 100%;
    margin-top: 25px;
}

.employee-checkbox {
    border-right: 1px solid #6969695c;
    margin-right: 15px;
}

.run-payroll-employee-list-main-cover-wrapper a {
    color: blue;
}

.run-payroll-employee-list-main-cover-wrapper .tooltip {
    position: relative;
}

/* Tooltip text */
.run-payroll-employee-list-main-cover-wrapper .tooltip .tooltiptext {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show the tooltip text when hovering over the tooltip container */
.run-payroll-employee-list-main-cover-wrapper .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.average-working-tab-cover-wrapper .nav-tabs .nav-link.active {
    border-color: #e21e32;
    font-size: 12px;
    color: #e21e32;
    font-weight: 600;
    margin-top: -2px;
    border: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.average-working-tab-cover-wrapper .nav-tabs .nav-link {
    transition: 0.3s border-color;
    font-weight: 400;
    border: 0;
    color: inherit;
    /* border-bottom: 3px solid transparent; */
    padding: 1px 13px;
    font-size: 13px;
    padding-top: 3px;
    margin-bottom: -2px;
}

.average-working-tab-cover-wrapper .nav-tabs .nav-item {
    padding: 0px 5px;
}

.average-working-tab-cover-wrapper ul#myTab {
    border: 1px solid #69696938;
    border-radius: 13px;
    padding: 1px 0px;
    width: fit-content;
    margin-left: -4px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 5px 6px;
}

.hleft {
    padding-bottom: 10px;
}

.average-working-title {
    border-bottom: 1px solid #69696929;
    margin-bottom: 10px;
}

.corporate-event-profile-pic.new-icon-box {
    width: 40px !important;
    /* background: #e6e6bb; */
    border-radius: 5px;
    /* margin-top: 12px; */
    /* height: 35px; */
    box-shadow: none;
    border: none;
}

.corporate-event-profile-pic.new-icon-box img {
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin-top: 4px;
    box-shadow: none;
}

.corporate-events-card-cover .card {
    height: 96%;
}

.corporate-events-card-cover {
    height: 100%;
}

.status-btn-cover-wrapper button {
    background: palegoldenrod;
    border: none;
    padding: 5px 11px;
    border-radius: 5px;
    margin: 0px 3px;
    width: 45px;
}

.status-btn-cover-wrapper button img {
    width: 100%;
}

button.decline-leave-btn {
    background: #6969692e;
}

.corp-leaves-table table {
    overflow-y: scroll;
}

.corp-leaves-wrapper::-webkit-scrollbar {
    width: 5px;
}

.employee-new-dashboard-wrapper {
    height: 280px;
    padding: 5px 0px;
    overflow: hidden;
    margin-bottom: 15px;
}

.corp-leaves-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.corp-leaves-wrapper::-webkit-scrollbar-thumb {
    background: #b3b0b0;
    border-radius: 6px;
}

tr.th-repo-head-repo th {
    text-align: center;
}

.corp-leaves-wrapper::-webkit-scrollbar-thumb:hover {
    background: #8a8686;
}

.card.card-repo-card {
    margin-top: 20px;
    padding-left: 10px;
}

.card-header.card-head-text-repo {
    padding-bottom: 0px;
    padding-top: 15px;
    padding-left: 0px;
}

.card-header.card-head-text-repo.repo-head-head {
    padding-left: 15px;
}

.card-header.card-head-text-repo h3 {
    font-size: 20px !important;
}

.card-options a button {
    padding: 6px 13px;
    margin: 5px;
    border-radius: 7px;
    font-size: 13px;
    background: #fff2f2;
    border: none;
    color: black;
    border: 1px solid #d05a5a;
    color: #d05a5a;
    font-weight: 600;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px;
}

.corp-leaves-wrapper.employee-new-dashboard-wrapper p {
    margin: 10px 20px;
    margin-bottom: 0px;
}

#toggleImage {
    transition: transform 0.3s ease;
    /* Smooth transition */
}

.rotated {
    transform: rotate(180deg);
    /* Rotate 180 degrees */
}

.corporate-events-list-cover.employee-events-content-card-box {
    height: 410px;
}

td.employee-action-box {
    display: flex;
    justify-content: center;
    width: 100%;
}

.run-payroll-info-card {
    border: 1px solid #69696930;
    padding: 0px 25px;
    border-radius: 10px;
    width: 260px;
    margin-top: 20px;
    margin-left: 21px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 6px;
    float: right;
    padding-bottom: 10px;
}

.run-payroll-info-head {
    background: #e04b4b;
    color: white;
    text-align: center;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 1px;
    margin-bottom: 9px;
}

.run-payroll-info-head h5 {
    margin-bottom: 0px;
    padding: 4px;
    font-size: 15px;
}

.run-payroll-list-cover-wrapper li {
    font-weight: 600;
    list-style: circle;
    font-size: 13px;
    margin-bottom: 3px;
}

.run-payroll-list-cover-wrapper li span {
    font-weight: 400;
    color: dimgray;
    margin-left: 5px;
}

.calendar-table {
    overflow: hidden;
    position: relative;
}

.card-body.calender-table {
    overflow-x: scroll;
}

.ui-checkbox {
    --primary-color: #1677ff;
    --secondary-color: #fff;
    --primary-hover-color: #4096ff;
    /* checkbox */
    --checkbox-diameter: 18px;
    --checkbox-border-radius: 5px;
    --checkbox-border-color: #d9d9d9;
    --checkbox-border-width: 1px;
    --checkbox-border-style: solid;
    /* checkmark */
    --checkmark-size: 1.2;
}

.ui-checkbox,
.ui-checkbox *,
.ui-checkbox *::before,
.ui-checkbox *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ui-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--checkbox-diameter);
    height: var(--checkbox-diameter);
    border-radius: var(--checkbox-border-radius);
    background: var(--secondary-color);
    border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.ui-checkbox::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
    box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
    border-radius: inherit;
    opacity: 0;
    -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
    -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
    transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

.ui-checkbox::before {
    top: 41%;
    left: 50%;
    content: "";
    position: absolute;
    width: 4px;
    height: 7px;
    border-right: 2px solid var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
    -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
        opacity 0.1s;
    -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
}

.ui-checkbox:hover {
    border-color: var(--primary-color);
}

.ui-checkbox:checked {
    background: var(--primary-color);
    border-color: transparent;
}

.ui-checkbox:checked::before {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
    -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
    -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.ui-checkbox:active:not(:checked)::after {
    -webkit-transition: none;
    -o-transition: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    transition: none;
    opacity: 1;
}

button.btn.delete-shift-btn {
    margin-bottom: 4px;
    margin-top: -5px;
}

button.btn.delete-shift-btn img {
    width: 32px;
}

button.btn.delete-shift-btn:focus {
    outline: none;
    box-shadow: none;
}

.edit-templates-btn-cover {
    display: flex;
}

.edit-templates-btn-cover button img {
    width: 28px;
    margin-top: -5px;
}

.edit-templates-btn-cover {
    display: flex;
    margin-left: 12px;
}

.template-main-title {
    margin-bottom: 15px;
}

.template-main-form-box button {
    margin-left: 5px;
    display: flex;
    margin-bottom: 15px;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.template-input-buttons {
    display: flex;
}

.dropdown.notification-drop-down {
    border: 1px solid #69696900;
    padding: 5px;
    border-radius: 5px;
    margin-right: 10px;
    width: 46px;
    box-shadow: rgb(50 50 105 / 7%) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.dropdown .dropdown-toggle i {
    font-size: 20px;
}

/* SideBar Scroller Starts ------------------ */

#left-sidebar .sidebar-nav {
    overflow: hidden;
}

#left-sidebar .sidebar-nav:hover {
    overflow-y: auto;
}

/* --------------------- EMPLOYEE RENOVATE DESIGN ------------------------------ */
.employee-search-input-box input {
    width: 34vw;
    margin-right: 15px;
    border-radius: 22px;
    padding: 8px 15px;
    border: none;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.employee-import-export-btn-main-cover button {
    padding: 6px 13px;
    margin: 5px;
    border-radius: 7px;
    font-size: 13px;
    background: #fff2f2;
    border: none;
    color: black;
    border: 1px solid #d05a5a;
    color: #d05a5a;
    font-weight: 600;
    align-items: center;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

/* .search-btn-box button {
    background: transparent
        linear-gradient(104deg, #ff4047 0%, #ff6d73 48%, #ff000a 100%) 0% 0%
        no-repeat padding-box;
    padding: 7px 12px;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
} */

.search-btn-box button {
    background: #d05a5a;
    padding: 7px 12px;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.corporate-event-profile-pic {
    width: 45px;
    height: 45px;
    border: 1px solid #6969697a;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

td.employee-card-details-lat .corporate-event-content-details h5 {
    font-size: 14px;
    width: 150px;
    text-wrap: wrap;
    text-align: start;
    margin-left: 10px;
}

td.employee-card-details-lat .corporate-list-box {
    display: flex;
    justify-content: center;
    border: none;
    align-items: center;
    margin-bottom: 0px;
    padding: 0px 10px;
}

td.employee-card-details-lat .corporate-event-profile-pic {
    width: 36px;
    height: 36px;
    border: 1px solid #6969690f;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

button.btn.btn-icon.emp-filter-btn.filter-btn {
    padding: 2px;
}

button.emp-filter-btn.filter-btn img {
    width: 25px;
}

.employee-header-btn-cover {
    display: flex;
    align-items: center;
}

.employee-header-btn-cover button {
    display: flex;
    border-radius: 5px;
    border: none;
    padding: 6px 13px;
    margin: 0px 6px;
    color: #d05a5a !important;
    font-size: 13px;
    border: 1px solid #d05a5a !important;
    background: #fff2f2;
    box-shadow: 0px 3px 6px #5f5f5f29;
}

.employee-header-btn-cover button:focus {
    outline: none;
}

.employee-header-btn-cover button:nth-of-type(1) {
    border: 1px solid blue;
}

.attendence-list-table-container table.table-container {
    min-width: 1000px !important;
    border-collapse: collapse;
}

.row.punch-in-cover-wrapper a {
    width: 40px;
    display: flex;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.row.punch-in-cover-wrapper a img {
    margin: 0 auto;
}

.row.punch-in-cover-wrapper {
    padding: 7px;
    padding-bottom: 0px;
    text-align: start;
}

.attendence-span-summary {
    text-wrap: wrap;
    display: flex;
    -webkit-line-clamp: 2;
    font-size: 12px;
    height: 32px !important;
    overflow: hidden;
    width: 200px;
    line-height: 16px;
    transition: height 0.3s ease;
}

.address {
    --address-height: 32px;
    height: var(--address-height);
    overflow: hidden;
    transition: height 0.3s ease;
}

.address.expanded {
    --address-height: clamp(32px, 60px, 60px);
}

.toggle-button {
    transition: transform 0.3s ease;
}

.row.punch-in-cover-wrapper button {
    background: transparent;
    border: none;
    padding: 0px;
    outline: none;
}

.row.punch-in-cover-wrapper button img {
    width: 15px;
}

.row.punch-in-cover-wrapper {
    text-align: start !important;
}

.accep-reject-btns-cover button {
    background: transparent;
    border: none;
}

.table-responsive.table-container.acknowledge-table-container {
    height: 200px;
}

.ack-search-title-box h3.card-title {
    color: #e21e32;
    font-weight: 600;
    font-size: 18px;
}

.edit-policy-main-cover-wrapper .modal-content {
    border-radius: 15px;
    padding: 12px 10px;
    width: 90%;
    margin: 0 auto;
}

.edit-policy-main-cover-wrapper .modal-content .modal-body {
    padding: 9px 12px;
}

.add-policy-title h6 {
    margin-bottom: 15px;
    font-size: 19px;
    font-weight: 600;
}

.add-policy-footer-btn {
    margin-top: 30px;
}

.add-policy-footer-btn button {
    padding: 5px 25px;
    border-radius: 5px;
    border: 1px solid #6969693d;
    font-weight: 600;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    background: white;
}

.add-policy-footer-btn button.add-bg-blue {
    background: #d05a5a;
}

button.add-design-btn span {
    width: 20px;
    height: 21px;
    background: #d05a5a;
    margin-right: 7px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
}

.add-policy-input-box input {
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgb(183 162 162 / 5%) 0px 1px 1px 0px;
    padding: 8px 10px;
    border-radius: 6px;
}

button.add-design-btn {
    margin: 5px;
    border-radius: 7px;
    font-size: 13px;
    /* margin: 0 auto; */
    background: #fff2f2;
    border: none;
    border: 1px solid #d05a5a;
    color: #d05a5a;
    font-weight: 600;
    display: flex;
    justify-content: center;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px;
}

button.alert-form-btn-box.add-design-btn {
    margin-top: 20px;
    padding: 7px 30px;
}

.delete-designation-btn-cover button {
    padding: 4px 15px;
    border: 1px solid #69696987;
    border-radius: 5px;
    background: white;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    border-radius: 7px;
}

button.add-design-btn span i {
    color: white;
    font-size: 10px;
}

.delete-designation-btn-cover button span img {
    width: 21px;
    margin-left: -5px;
    margin-right: 10px;
}

span.form-info {
    font-size: 12px;
    color: red;
}

.employee-search-input-box select {
    margin-right: 15px;
    border-radius: 5px;
    padding: 7px 15px;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
        rgba(17, 17, 26, 0.1) 0px 0px 8px;
    border: none;
    width: 240px;
}

#left-sidebar .sidebar-nav:hover {
    overflow-y: auto;
}

.template-main-title button {
    margin-bottom: 15px;
    box-shadow: rgb(0 0 0 / 10%) 0px 3px 6px, rgb(0 0 0 / 5%) 0px 3px 6px;
    border-radius: 6px;
}

.template-main-form-box button {
    margin-bottom: 15px;
    width: auto;
    padding: 7px 20px;
    display: block;
    box-shadow: rgb(0 0 0 / 10%) 0px 3px 6px, rgb(0 0 0 / 5%) 0px 3px 6px;
}

.add-policy-input-box select {
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgb(183 162 162 / 5%) 0px 1px 1px 0px !important;
    padding: 8px 10px;
    border-radius: 7px;
}

.accept-reject-btns-cover button {
    background: transparent;
    border: none;
    outline: none;
}

table.leave-application-table {
    width: 100%;
}

/* DROP DOWN TOGGLE FUNCTIONALITY ----------------------------- */
.leave-reason-container {
    position: relative;
}

.attendence-span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: start;
    width: 97%;
    width: 270px;
    padding-right: 10px;
    font-size: 13px;
    /* max-height: 3em; */
    line-height: 1.5em;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.custom-controls-stacked {
    width: 150px;
}

.action-btns-cover {
    width: 200px;
}

.attendence-span.expanded {
    -webkit-line-clamp: unset;
    /* Remove clamping */
    max-height: none;
    /* Allow content to expand */
}

.attendence-span.expanded img {
    transform: rotate(180deg);
}

.toggle-btn {
    display: block;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    font-size: 0.875em;
    /* Adjust based on your design */
}

.leave-reason-container button#toggleButton {
    background: transparent;
    border: none;
    display: inline-block;
    float: right;
    margin-left: -7px;
    outline: none;
    margin-top: -25px;
}

.leave-reason-container button#toggleButton img {
    width: 15px;
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: none;
}

.employee-import-export-btn-main-cover a {
    color: white;
}

@media screen and (max-width: 1200px) {
    #left-sidebar {
        left: 0px;
        width: 230px;
    }

    .page {
        left: 230px;
        width: calc(100% - 230px);
    }

    #page_top {
        left: 230px;
    }

    .custom-width {
        width: 93%;
        left: 65px;
    }
}

button.back-to-home-btn {
    padding: 3px 6px;
    border-radius: 6px;
    background: transparent;
    border: none;
    margin-top: 3px;
}

.down-repo-btn {
    background-color: #d05a5a;
}

button.back-to-home-btn:focus {
    outline: none;
}

.template-main-title h5 {
    font-weight: 600;
    color: #cf3229;
}

.template-setting-title h6 {
    padding: 10px 0px;
    border-bottom: 1px solid #69696930;
    color: #cf3229;
    width: 21%;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 9px;
    font-size: 18px;
}

ul.submenu-list img {
    width: 24px;
}

.modal-content.report-modal {
    border-radius: 20px;
    height: 450px;
}

.report-head-text strong {
    font-size: 23px;
}

.modal-header .close:focus {
    outline: none !important;
}

.custome-table .page-item.active .page-link {
    background-color: #fffbfb;
    font-weight: 700;
    box-shadow: 0px 3px 6px #55555554;
    border: 2px solid #d05a5a;
    color: black;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

.custome-table li.page-item.disabled {
    opacity: 0.4;
}

.custome-table .page-item .page-link {
    color: black;
    border-radius: 50% !important;
    font-weight: 600;
    margin: 5px;
    width: 30px;
    border: 1px solid #c0c0c0;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.custome-table .cuatom-pagination-cover-box {
    margin-top: 10px;
    position: fixed;
    bottom: 0;
    left: 250px;
    width: 84%;
    display: flex;
    padding: 10px 22px;
    justify-content: space-between;
    align-items: center;
    background: white;
}

.cuatom-pagination-cover-box span.form-label {
    width: fit-content;
    margin-right: 11px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.page-count-cover select {
    width: fit-content;
    border: 1px solid dimgray;
    border-radius: 8px;
}

.pagination-wrapper nav ul.pagination {
    margin-bottom: 0px;
}

.page-count-cover .form-group {
    margin-bottom: 8px;
}

.pagination-wrapper {
    margin-right: 30px;
}

.report-content p {
    font-size: 13px;
}

.card-footer button {
    background: #d05a5a;
}

.table-responsive button {
    padding: 3px;
}

td.text-balancing.description-span {
    width: auto;
}

td.text-balancing.description-span span {
    width: auto;
    text-align: center;
}

button#toggleButton {
    border: none;
    background: transparent;
    outline: none;
}

button#toggleButton img {
    width: 13px;
}

.employee-checkbox-button button {
    background-color: #d05a5a;
}

.employee-checkbox-button {
    margin-right: 16px;
    margin-top: 20px !important;
}

td.add-custom-width {
    width: 110px;
}

.employee-action-box {
    width: 200px;
}

.attendence-regularization-table-main-cover-wrapper {
    margin-top: 20px;
}

td.employee-action-box button {
    background: transparent;
    border: none;
    outline: none;
}

.average-working-tab-cover-wrapper.category-repo-tabs ul.nav.nav-tabs li.nav-item {
    padding: 2px 5px;
    margin: 3px 3px;
    /* border-radius: 27px; */
}

.average-working-tab-cover-wrapper.category-repo-tabs .nav-tabs .nav-link.active {
    border: 1px solid #e21e32;
    padding: 5px 17px;
}

.average-working-tab-cover-wrapper ul#myTab .average-working-tab-cover-wrapper.category-repo-tabs ul#myTab {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px !important;
}

.data-switch-tabs-repo.average-working-tab-cover-wrapper .nav-tabs .nav-item a {
    padding: 5px 20px;
    margin-bottom: 15px;
}

.add-repo-btn-cox {
    padding: 7px 25px !important;
}

.year-data-repo-boxs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* margin-top: -20px; */
}

.form-group.text-repo-data-year label {
    font-size: 15px;
    margin-bottom: 0px;
    font-weight: 500;
}

.year-data-select {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.form-group.text-repo-data-year {
    width: 100%;
    margin-bottom: 25px !important;
}

p.comment-text {
    margin-bottom: 5px;
}

.employee-checkbox-list-cover:hover::-webkit-scrollbar-thumb {
    background: #2c63ca !important;
}

.repo-card-bnt button {
    padding: 10px 30px;
    border-radius: 10px;
}

.repo-body-card-repo-data {
    display: flex;
    align-items: center;
    gap: 5px;
}

.repo-card-bnt {
    text-align: center;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
}

p.repo-p-text {
    width: 160px;
    margin-bottom: 0px;
}

.repo-body-card-repo-data p {
    margin-bottom: 10px;
    font-size: 16px;
}

.body-repo-card-body {
    padding: 0px;
}

.body-repo-card-body h2 {
    margin-bottom: 0px;
    margin-top: 10px;
}

.employee-checkbox-list-cover::-webkit-scrollbar-thumb {
    background: #f1f1f1 !important;
}

.data-switch-tabs-repo.average-working-tab-cover-wrapper {
    margin-left: 10px;
    margin-bottom: 20px;
}

.employee-redesign-header-main-cover-wrapper {
    margin-top: 35px !important;
}

button.add-policy-btn.bg-danger.delete-popup-btn.text-white:focus {
    outline: none;
}

button.add-policy-btn.bg-danger.delete-popup-btn.text-white:focus-visible {
    outline: none;
}

.dropdown-menu {
    max-height: 100% !important;
}

/* .drop-box-repo{ */

.drop-box-repo {
    max-height: 200px !important;
}

.add-policy-title.delete-header-title h6 {
    font-size: 15px;
    text-transform: math-auto;
}

h3.card-title-box {
    width: 98%;
}

h3.card-title-box h5 {
    font-size: 16px;
}

input.form-control.date-input-box {
    width: 18vw;
    border-radius: 7px;
}

.alert .close {
    outline: none;
    border: none;
    background: none;
}

.alert .close:focus {
    outline: none;
    box-shadow: none;
}

.modal {
    z-index: 99999 !important;
}

.modal-content.delete-popup-content-cover {
    padding: 0px;
    border-radius: 15px;
}

.modal-header.delete-pop-up-header {
    padding: 10px 15px;
    padding-bottom: 10px;
    background: #d05a5a;
    border-top-right-radius: 13px;
    border-top-left-radius: 13px;
    color: white;
    display: flex;
    align-items: center;
}

.modal-header.delete-pop-up-header h5 {
    font-size: 17px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.modal-content.delete-popup-content-cover .modal-body {
    padding: 20px;
}

.modal-header.delete-pop-up-header button {
    background: transparent;
    color: white;
    border: none;
    font-weight: bold;
    font-size: 18px;
}

button.delete-popup-btn {
    background: #f6142b !important;
}

.employee-import-export-btn-main-cover button {
    outline: none;
}

/* form.alert-form-box {
    width: 35%;
    margin-right: 9px;
} */

span#pf-deadline {
    font-size: 14px;
    margin-bottom: 10px;
}

/* PROFILE NEW UI ----------------------------- */

.profile-img-box {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: 4px solid white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin-bottom: 20px;
}

.profile-details-section-box ul {
    padding: 0px;
    list-style: none;
    padding-top: 15px;
}

.profile-details-section-box ul li {
    font-weight: 500;
    border: 1px solid #6969690d;
    background: white;
    padding: 9px 13px;
    border-radius: 8px;
    margin-bottom: 18px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.profile-left-section-card-cover {
    padding: 20px;
    border-radius: 25px;
    width: 95%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    background: linear-gradient(179.95deg, #ff7684 28.82%, #ab1928 120.13%);
}

.profile-right-content-card-cover li {
    list-style: none;
    padding: 14px 14px;
    margin-bottom: 21px;
    width: 97%;
    border-radius: 10px;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
        rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

.profile-right-content-card-cover.profile-address-box-cover li {
    min-height: 100px;
}

.profile-right-section-cover-wrapper {
    margin-top: 23px;
    padding-left: 15px;
}

.profile-new-cover-wrapper {
    border: 1px solid #69696947;
    padding: 20px 20px;
    padding-top: 20px;
    border-radius: 27px;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    margin-bottom: 25px;
}

h3.card-title.custom-attendence-title {
    text-transform: math-auto;
}

td.text-balancing .leave-reason-container span.attendence-span {
    text-wrap: balance;
    text-align: center;
}

.auth_left .form-footer button {
    background-color: #d05a5a !important;
}

span.regularised-box-cover {
    background: white;
    color: #353535;
    border-radius: 10px;
    padding: 5px 12px;
    font-size: 10px;
    width: 78px;
    border: 1px solid #e21e32;
    box-shadow: rgb(50 50 93 / 10%) 0px 2px 5px -1px,
        rgb(0 0 0 / 14%) 0px 1px 3px -1px;
}

.employee-section-onboarding-title-box {
    display: flex;
    justify-content: center;
    border-top: 1px solid red;
    margin-bottom: 25px;
    margin-top: 25px;
}

.employee-section-onboarding-title-box h4 {
    font-size: 13px;
    width: fit-content;
    border: 1px solid #da4646b3;
    padding: 3px 20px;
    border-radius: 16px;
    margin-top: -13px;
    background: white;
    color: #e21e32 !important;
    font-weight: 600;
    box-shadow: rgb(60 64 67 / 12%) 0px 1px 2px 0px,
        rgb(60 64 67 / 12%) 0px 2px 6px 2px;
}

.employee-onboarding-details-box p {
    color: dimgray;
}

.employee-onboarding-details-box p b {
    color: black;
}

.employee-onboarding-modal-content-cover .modal-content {
    width: 85%;
    margin: 0 auto;
    border-radius: 25px;
}

.employee-onboarding-modal-content-cover .modal-content .modal-body {
    padding: 20px 35px;
}

.employee-onboarding-details-box {
    margin-bottom: 24px;
}

.employee-onboarding-header-details h3 {
    font-size: 35px;
    margin-bottom: 15px;
}

.onboarding-employee-profile-box {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #e21e32 !important;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.steps-wrapper {
    max-width: 400px;
    width: 100%;
    justify-content: center;
    /* background: lightgray; */
    display: flex;
    margin: 20px auto;
}

:root {
    --color-primary: #d05a5a;
}

.steps {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: relative !important;
    z-index: 1;
}

.step {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgb(222, 222, 222);
    border-radius: 50%;
    color: rgb(135, 135, 135);
    background: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 600;
    transition: 200ms ease;
    z-index: 99999;
    transition-delay: 0ms;
}

.step.active {
    color: #d05a5a;
    border-color: #d05a5a;
    transition-delay: 100ms;
    border: 2.5px solid;
}

.progress-bar {
    position: absolute;
    width: 100%;
    height: 4px;
    background: rgb(231 226 226) !important;
    z-index: 9;
}

.progress {
    width: 0px;
    height: 100%;
    background: #d05a5a;
    transition: 300ms ease;
}

.buttons {
    margin-block-start: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.custom-btn:hover {
    color: #fff !important;
}

.custom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: #d05a5a;
    color: white;
    cursor: pointer;
    transition: 200ms linear;
}

.custom-btn:active {
    transform: scale(0.9);
}

.custom-btn:disabled {
    cursor: not-allowed;
    background: #d05a5a;
    opacity: 0.7;
    pointer-events: none;
}

.form-container {
    max-width: 500px;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.form-content {
    overflow: hidden;
    position: relative;
    height: 100vh;
}

.form-step {
    position: absolute;
    width: 100%;
    top: 0;
    left: 100%;
    opacity: 0;
    transition: 300ms ease;
}

.form-step.active {
    left: 0;
    opacity: 1;
}

.form-step.previous {
    left: -100%;
    opacity: 0;
}

.form-step.previous.active {
    left: 0;
    opacity: 1;
}

/* Input Ui Css */
/* From Uiverse.io by SelfMadeSystem */
/* Hide the default checkbox */
.container-checked-repo input {
    display: none;
}

.container-checked-repo {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 17px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 5px;
}

label.repo-font-data {
    margin-bottom: 0px;
}

/* Create a custom checkbox */
.checkmark-text-repo {
    position: relative;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    /* height: 1.3em; */
    /* width: 1.3em; */
    background-color: #2196f300;
    border-radius: 0.25em;
    transition: all 0.25s;
}

/* When the checkbox is checked, add a blue background */
.container-checked-repo input:checked~.checkmark-text-repo {
    background-color: #2196f3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-text-repo:after {
    content: "";
    position: absolute;
    transform: rotate(0deg);
    border: 0.1em solid black;
    left: 0;
    top: 0;
    width: 1.05em;
    height: 1.05em;
    border-radius: 0.25em;
    transition: all 0.25s, border-width 0.1s;
}

/* Show the checkmark when checked */
.container-checked-repo input:checked~.checkmark-text-repo:after {
    left: 7px;
    top: 4px;
    width: 5px;
    height: 0.5em;
    border-color: #fff0 white white #fff0;
    border-width: 0 0.15em 0.15em 0;
    border-radius: 0em;
    transform: rotate(45deg);
}

/* From Uiverse.io by adamgiebl */
.repo-btn-sub {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #d05a5a;
    background: transparent;
    cursor: pointer;
    transition: ease-out 0.5s;
    border: 2px solid #d05a5a;
    border-radius: 10px;
    border-color: #d05a5a !important;
    box-shadow: inset 0 0 0 0 #d05a5a;
}

.repo-btn-sub:hover {
    color: white;
    box-shadow: inset 0 -100px 0 0 #d05a5a;
}

.repo-btn-sub:active {
    transform: scale(0.9);
}

.no-data-message {
    text-align: center;
    padding: 20px;
    font-size: 1.2em;
    color: #888;
}

/* custom Revamp tables css ---------------------------------- */

table.table.custom-revamp-table td {
    font-size: 13px;
    color: dimgray;
    font-weight: 400;
}

table.table.custom-revamp-table thead.highlight-header {
    background: #d05a5a;
    /* background: #d05a5ac2; */
    height: 44px;
    z-index: 1;
    position: relative;
    color: white;
}

table.table.custom-revamp-table thead.highlight-header th {
    border: none !important;
    min-width: 125px;
}

table.table.custom-revamp-table thead.highlight-header th.add-left-br {
    min-width: 50px !important;
}

/* Wrapper for table and custom scrollbar */
.custome-table {
    position: relative;
    margin-bottom: 20px;
}

/* Top scrollbar container */
.custom-top-scrollbar {
    overflow-x: auto;
    overflow-y: hidden;
    height: 8px;
    background-color: #ffffff2b;
    margin-bottom: 5px;
    border-radius: 21px;
}

/* Sync scrollbar content */
.custom-scroll-bar-content {
    height: 1px;
}

/* Table responsive wrapper */
.table-responsive {
    overflow-x: auto;
    margin-bottom: 10px !important;
}

.custom-revamp-table th,
.custom-revamp-table td {
    text-align: center;
    padding: 10px;
    white-space: nowrap;
}

/* Optional: styling for table */
.custom-revamp-table {
    width: 100%;
    border-collapse: collapse;
}

/* Custom scrollbar */
.custom-top-scrollbar::-webkit-scrollbar {
    height: 6px;
    /* Height of the scrollbar */
}

/* Custom scrollbar track (background) */
.custom-top-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f19d;
    border-radius: 10px;
}

/* Custom scrollbar thumb (the draggable part) */
.custom-top-scrollbar::-webkit-scrollbar-thumb {
    background-color: #7e7f8063;
    border-radius: 10px;
    border: 2px solid #f1f1f13a;
}

/* Hover effect on scrollbar thumb */
.custom-top-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #e7a4a4 !important;
    /* Darker color on hover */
}

tr.test th {
    border: none;
}

thead.highlight-header tr th {
    border: none;
}

/* --------------------- LEAVE REASON CSS ------------------------------ */

button.leave-reason-btn {
    font-size: 11px;
    padding: 4px 9px;
    background: aliceblue;
    color: black;
    border: none;
    font-weight: 500;
}

button.show-attendence-detail-info-btn {
    background: #8f7895 !important;
    border: black !important;
    color: white;
    /* padding: 5px; */
    border-radius: 50%;
    width: 17px;
    font-weight: 700;
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px !important;
    border: none;
}

.punch-details-data {
    width: 100%;
    display: flex;
    justify-content: center;
}

.attendence-details-punch-header {
    display: flex;
    align-items: center;
}

.attendence-punch-profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
}

.attendence-details-punch-location-cover span {
    font-size: 13px;
    margin-top: 5px;
}

.attendence-details-card {
    border: 1px solid #69696947;
    padding: 8px 15px;
    border-radius: 9px;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

span.close-modal-pop-up-icon {
    background: #ffc0c0;
    width: 20px;
    display: flex;
    height: 20px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0px;
    padding: 0px;
    font-weight: bolder;
}

.modal.custom-modal-popup .modal-header {
    padding: 13px;
    padding-bottom: 7px;
}

.custom-modal-popup .modal-content {
    border-radius: 20px;
}

.custom-modal-popup .modal-content h5 {
    font-size: 18px;
    color: #e73e3e;
    font-weight: 600;
}

.bg-grey {
    background-color: #e9ecef !important;
}

.shift-rule-in {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.shift-rule-bg-grey {
    /* background-color: #e9ecef; */
    border-bottom-right-radius: 13px;
    border-top-right-radius: 13px;
    background-color: #e9ecef;
    border: 1px solid red;
}

.shift-btn {
    background: #d05a5a !important;
}

td.off.disabled {
    text-decoration: none !important;
}

.comment-badge-custom {
    border-radius: 3px;
    color: #ffffff;
    background-color: #dd6565;
    transition: background-color 0.3s;
    font-size: 10px;
}

.comment-badge-custom:hover {
    background-color: #df5252;
}

.modal-header.success-popup-content-cover {
    padding: 10px 15px;
    padding-bottom: 10px;
    background: #0a5272;
    border-top-right-radius: 13px;
    border-top-left-radius: 13px;
    color: white;
    display: flex;
    align-items: center;
}

p#leaveReasonText {
    font-size: 14px;
}

/* NEW DASHBOARD CSS ---------------------------- */
/*
.dashboard-card-box {
    border-radius: 12px;
    padding: 9px 15px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    background: white;
    border: 1px solid #6969691f;
} */

.dashboard-card-box {
    border-radius: 12px;
    padding: 9px 15px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    background: white;
    border: 1px solid #d05a5a2e;
}

.dashbord-hero-card-content-count {
    font-size: 25px;
    font-weight: 600;
    width: 40px;
    height: 40px;
    background: #d05a5a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: white;
    border: 2px solid black;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.dashboard-card-left-box h6 {
    font-size: 14px;
    font-weight: 500;
}

.dashbord-hero-card-content-count-cover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    margin-top: 5px;
}

.dashbord-hero-card-content p {
    font-size: 12px;
    color: #948f8fd4;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.dashbord-hero-card-content-count-pills {
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 5px;
    font-weight: 600;
    background: lightgoldenrodyellow;
}

.dashboard-hero-card-header span {
    font-size: 13px;
    color: #db4e4e;
    font-weight: 600;
}

.birthday-anniversary-img-box {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: #e7e1e1;
}

.employee-graph-box-main-cover {
    width: 100%;
    background: white;
    border-radius: 13px;
    padding: 15px 15px;
    height: 100%;
    padding-right: 5px;
    border: 1px solid #d05a5a05;
    /* box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; */
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    margin-bottom: 0px;
}

section.dashboard-middle-section {
    margin-top: 12px;
    margin-bottom: 12px;
}

.employee-count-graph-box-header h5 {
    font-size: 16px;
    margin-bottom: 0px;
}

.employee-count-graph-box-header span {
    font-size: 13px;
    color: #696969d4;
    display: flex;
    align-items: center;
    margin: 1px 1px;
}

.employees-graph-content-list ul {
    padding: 0px;
    margin-top: 20px;
}

.employees-graph-content-list ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    margin-right: 9px;
    border-bottom: 1px solid #69696917;
    padding-bottom: 9px;
}

.employees-graph-content-list ul li {
    width: 94%;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 22px;
}

.employees-graph-list-count-box {
    font-size: 13px;
    font-weight: 500;
    margin-right: 8px;
    color: dimgray;

    width: fit-content;
}

.employees-graph-list-department-box {
    font-weight: 500;
    font-size: 13px;
}

.birthday-anniversary-box-main-cover {
    width: 100%;
    border: 1px solid #d05a5a2e;
    border-radius: 13px;
    padding: 15px 15px;
    background: white;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.birthday-anniversary-list-card-content-cover {
    display: flex;
    align-items: center;
}

.birthday-anniversary-header-rev h6 {
    font-size: 16px;
}

.birthday-anniversary-list-card-content {
    margin-left: 10px;
}

.birthday-anniversary-list-card-content h6 {
    font-size: 13px;
    margin-bottom: -3px;
    font-weight: 500;
    padding-bottom: 0px;
}

.birthday-anniversary-list-card-content span {
    font-size: 10px;
    color: #838181d4;
}

.birthday-anniversary-list-card {
    padding-bottom: 14px;
    border-bottom: 1px solid #69696945;
    margin-bottom: 7px;
    padding-top: 9px;
}

.birthday-anniversary-list-cover-wrapper {
    margin-top: 20px;
    padding-right: 10px;
    height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Webkit scrollbar styles */
.birthday-anniversary-list-cover-wrapper::-webkit-scrollbar {
    width: 8px;
    /* Width of the vertical scrollbar */
}

.birthday-anniversary-list-cover-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Track color */
    border-radius: 10px;
}

.birthday-anniversary-list-cover-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    /* Thumb color */
    border-radius: 10px;
}

.birthday-anniversary-list-cover-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Thumb color on hover */
}

.birthday-anniversary-list-cover-wrapper::-webkit-scrollbar-button {
    display: none;
    /* Hides the scrollbar buttons */
}

p.anniversary-pills-today {
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-size: 11px;
    border: 1px solid #bdabab5c;
    padding: 1px 9px;
    border-radius: 9px;
    color: #1d1c19;
    color: black;
    background: #d05a5a08;
    font-weight: 500;
}



.reports-vertical-main-cover-wrapper {
    width: 28%;
    border: 1px solid #69696930;
    border-radius: 13px;
    padding: 10px 15px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.dashbord-hero-card-content-count-pills.count-pill-color2 {
    background: aliceblue;
}

.dashbord-hero-card-content-count-pills.count-pill-color3 {
    background: #a177e4;
    color: white;
}

/* .dashboard-report-list {
    padding: 20px;
    background-color: #f4f7fc;
} */

.dashboard-report-card {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 8px;
    padding: 9px;
    margin: 10px 0px;
    padding-right: 3px;
    margin-right: 8px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 5px;
    margin-bottom: 15px;
    border: 1px solid #69696900;
}

.dashboard-report-icon {
    background-color: #e6f5fb;
    padding: 10px;
    border-radius: 12px;
}

.dashboard-report-icon img {
    width: 21px;
    height: 21px;
    margin-bottom: 10px;
}

.dashboard-report-details {
    flex-grow: 1;
    margin-left: 15px;
}

.dashboard-report-details h4 {
    font-size: 12px;
    margin: 0;
    font-weight: 400;
}

.dashboard-report-time {
    font-size: 12px;
    color: #888;
}

.dashboard-report-arrow img {
    width: 16px;
    height: 16px;
}

.dashboard-report-card:hover {
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
}

.dashboard-report-icon {
    background-color: #90626a;
    padding: 5px;
    border-radius: 7px;
    width: 30px;
    height: 30px;
}

/* EMPLOYEE DASHBOARD CUSTOM TABLE ----------------------------- */

.swiper-container.dashboard-date-slider {
    width: 100%;
    /* padding-bottom: 10px; */
    margin-bottom: 20px;
    overflow: hidden;
    background: #f7f7f747;
    padding: 2px 20px;
    border-radius: 15px;
    position: relative;
}

.dashboard-date-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    /* font-weight: bold; */
    text-align: center;
    flex-direction: column;
    border-right: 1px solid #6969691f;
    margin: 0px 2px !important;
}

.dashboard-date-slider .swiper-slide.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.dashboard-date-slider .swiper-slide.swiper-slide-active {
    background: #d05a5a;
    border-radius: 5px;
    color: white;
}

.swiper-slide.swiper-slide-active .swiper-day-name {
    color: white;
}

.swiper-day-name {
    font-size: 11px;
    font-weight: 400;
    color: #696969d6;
}

.swiper-day {
    font-weight: 500;
    font-size: 14px;
}

.swiper-slide.active {
    background-color: #0066ff;
    color: white;
}

.swiper-button-prev,
.swiper-button-next {
    color: #0066ff;
}

.dashboard-employee-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.dashboard-employee-table th,
.dashboard-employee-table td {
    padding: 15px;
    text-align: left;
}

.dashboard-employee-table th {
    background-color: #f4f7fc;
}

.dashboard-employee-table td {
    border-bottom: 1px solid #f4f7fc;
}

.dashboard-status {
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

.dashboard-status.dashboard-confirmed {
    background-color: #dff0d8;
    color: #3c763d;
}

.dashboard-status.dashboard-pending {
    background-color: #fcf8e3;
    color: #8a6d3b;
}

.dashboard-status.dashboard-cancelled {
    background-color: #f2dede;
    color: #a94442;
}

/* Position and style for Next and Previous buttons */
.swiper-button-prev,
.swiper-button-next {
    position: absolute !important;
    top: 22px !important;
    z-index: 10 !important;
    width: 30px !important;
    height: 100% !important;
    background-color: rgb(250 250 250);
    color: #121010 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
    cursor: pointer !important;
}

.swiper-button-next {
    right: -4px !important;
}

/* Add hover effect to the buttons */
/* .swiper-button-prev:hover, .swiper-button-next:hover {
    background-color: rgba(0, 102, 255, 1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
} */

.swiper-button-prev {
    left: -4px !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 14px !important;
    /* Adjust size of the arrows */
    color: black !important;
    /* Ensure arrow color is white for visibility */
    font-weight: bold !important;
    /* Optional: make it bold */
    display: block !important;
    content: "";
    /* Prevent from overriding icon */
}

/* Swiper's default icon content (this should fix icon rendering issues) */
.swiper-button-prev::after {
    content: "<" !important;
}

.swiper-button-next::after {
    content: ">" !important;
}

table.revamp-table th {
    background: white;
    border-bottom: 0px;
    border: 0px;
    /* text-align: center; */
}

.dashboard-hero-card-header img {
    width: 20px;
    margin-right: 5px;
}

section.employee-dashboard-table-main-cover-wrapper {
    padding: 15px;
    background: white;
    margin-top: 13px;
    border: 1px solid #d05a5a2e;
    border-radius: 14px;
    min-height: 330px;
    /* box-shadow: rgba(0, 0, 0, 0.1) 1px 0px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1px 1px; */
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.dashboard-container h6 {
    margin-bottom: 20px;
}

/* table.table.revamp-table td {
    padding: 8px 5px;
    padding-bottom: 0px;
} */

table.table.revamp-table th {
    font-size: 13px !important;
    color: #353537;
    font-weight: 400;
    letter-spacing: 0.2px;
}

table.table.revamp-table tbody tr {
    border-bottom: 1px solid #6969690d;
}

table.table.revamp-table td .accept-reject-btns-cover button {
    padding: 0px 5px;
}

table.table.revamp-table tbody td {
    font-size: 12px;
    padding: 10px 12px;
    color: #373434;
}

table.table.revamp-table td .accept-reject-btns-cover button img {
    width: 22px;
}

/* Container for Announcements */
.dashboard-announcements-container {
    background-color: #fff;
    border-radius: 15px;
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-top: 0px;
    height: 100%;
}

/* Header with Title and View All link */
.dashboard-announcements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.dashboard-announcements-header h3 {
    font-size: 16px;
    margin: 0;
}

.dashboard-view-all {
    font-size: 11px;
    color: #7f7f7f;
    text-decoration: none;
    font-weight: 500;
    margin-right: 10px;
}

.dashboard-view-all:hover {
    color: #000;
    text-decoration: underline;
}

/* Individual Announcement Item */
.dashboard-announcement-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.dashboard-announcement-icon {
    background-color: #d9f2f0;
    border-radius: 50%;
    margin-right: 15px;
    color: #00bfa6;
    font-size: 17px;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-announcement-icon i {
    font-size: 16px !important;
}

/* Announcement Details */
.dashboard-announcement-details {
    flex-grow: 1;
}

.dashboard-announcement-details p {
    font-size: 14px;
    margin: 0 5px 5px 0;
    text-align: center;
}

.no-anniversaries-box p {
    text-align: center;
}

.dashboard-payroll-content-box p {
    font-size: 15px;
    color: dimgray;
    margin-top: 0px;
}

.dashboard-announcement-time {
    font-size: 12px;
    color: #8c8c8c;
}

.dashboard-calendar-container {
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    max-height: 270px;
    margin-bottom: 13px;
    border: 1px solid #d05a5a29;
    overflow-y: scroll;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.dashboard-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 7px;
    border-bottom: 2px solid #e0e0e061;
    background: white;
    z-index: 9;
    position: relative;
    margin-top: -17px;
}

.dashboard-task-header h2 {
    font-size: 13px;
    color: #333;
    margin-bottom: 0px;
}

.dashboard-add-task-btn {
    background-color: #d05a5a;
    color: white;
    border: none;
    font-size: 19px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.dashboard-time span {
    font-size: 15px;
    color: #403939;
    font-weight: 600;
}

.dashboard-task-name {
    font-size: 12px;
    font-weight: 400;
    margin-top: 10px;
    color: dimgray;
}

.dashboard-tasks-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    white-space: nowrap;
}

.dashboard-tasks {
    display: inline-flex;
    animation: scrollHorizontal 95s linear infinite;
}

.dashboard-tasks:hover {
    animation-play-state: paused;
}

.dashboard-tasks .dashboard-task-card {
    /* background-color: #f3fbff5e; */
    border-left: 4px solid #d05a5a;
    border-radius: 5px;
    padding: 15px;
    margin-right: 15px;
    display: inline-block;
    width: 250px;
    min-height: 138px;
    margin-top: 15px;
    border-radius: 11px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    border: 1px solid #69696903;
    border-left: 4px solid #90626a;
}

.dashboard-report-list a {
    color: black;
}

@keyframes scrollHorizontal {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.dashboard-tasks::after {
    content: attr(data-clone);
    /* Clones the content */
    display: inline-flex;
}

p.anniversary-pills-today.birth-date-pills {
    background: #ddf3fc;
    color: darkslateblue;
    font-weight: 600;
}

thead.t-head-test {
    position: sticky !important;
    top: 0 !important;
}

/* .employees-graph-content-list {
    max-height: 200px !important;
} */

/* .employees-graph-content-list:hover {
    overflow-y: scroll;
} */

/* Scrollbar */
.employees-graph-content-list::-webkit-scrollbar {
    width: 5px !important;
}

/* Track */
.employees-graph-content-list::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
    /* Color of the track */
    border-radius: 10px !important;
    /* Rounded corners */
}

/* Handle */
.employees-graph-content-list::-webkit-scrollbar-thumb {
    background: #007bff !important;
    /* Color of the scrollbar thumb */
    border-radius: 10px !important;
    /* Rounded corners */
}

/* Handle on hover */
.employees-graph-content-list::-webkit-scrollbar-thumb:hover {
    background: #0056b3 !important;
    /* Darker color on hover */
}

/* Optional: Style the scrollbar corner */
.employees-graph-content-list::-webkit-scrollbar-corner {
    background: #f0f0f0 !important;
    /* Color of the scrollbar corner */
}

tr.distributer-table-head th {
    color: white;
    font-weight: 500;
}

tr.distributer-table-head th {
    text-align: center;
}

.info-text {
    margin-top: 0px;
    /* font-size: 18px; */
    background: #d05a5a;
    padding: 5px;
    color: white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-left: 12px;
}

.mySwiper {
    height: 100%;
}

/* .swiper-container.distributor-dashboard-slider {
    height: 55vh;
} */
.distributor-news-source-clover {
    font-size: 14px;
    color: grey;
}

.repo-clover-h2 h2 {
    font-size: 20px !important;
}

.distributor-news-summary-clover-repo {
    font-size: 14px;
}

.swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
}

.punch-in-pills {
    border: 1px solid #008000ab;
    padding: 2px 10px;
    float: right;
    font-size: 11px;
    border-radius: 4px;
    background: #acf0ac;
}

.punch-out-pills {
    border: 1px solid #ee4f4f;
    padding: 2px 10px;
    float: right;
    font-size: 11px;
    border-radius: 4px;
    background: blanchedalmond;
}

.fixed-employee-name {
    position: sticky !important;
    left: 0;
    z-index: 999 !important;
    background: white !important;
}

.fixed-employee-name-header {
    position: sticky !important;
    left: 0;
    z-index: 999 !important;
}

.sidebar-illustration-cover-wrapper {
    position: absolute;
    bottom: 40px;
    left: 0px;
    right: 10px;
}

form.onboarding-form-main-cover-wrapper {
    width: 100%;
}

button.bulk_delete.delete-category {
    box-shadow: 0px 2px 6px rgba(40, 90, 185, 0.1);
}

table.dataTable thead th {
    text-align: center !important;
    /* Center align the header text */
}

/* Center align table body cells */
table.dataTable tbody td {
    text-align: center !important;
    /* Center align the body text */
}

.delete-rule-btn {
    margin-top: 29px;
}

.shift-rule-icon-card {
    /* border: 1px solid; */
    display: flex;
    justify-content: center;
    /* align-items: baseline; */
    /* border-radius: 5px; */
    padding: 15px 8px;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
    border-radius: 12px;
    background: white;
    /* border: 1px dashed #fb6a6a; */
}

.shift-rule-card-content {
    margin-top: 4px;
}

.shift-rule-btn-cover a button span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 11px;
}

.shift-rule-btn-cover a button span i {
    padding: 5px 10px;
    background: white;
    border-radius: 6px;
    color: black;
}

.shift-rule-btn-cover a button {
    width: 100%;
    background: #15a4e4;
    color: white;
    padding: 6px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

.row.card-body.shift-rule-card-body {
    padding: 14px 10px;
}

.shift-rule-card-content h4 {
    font-size: 22px;
    margin-bottom: 5px;
    color: black;
    font-weight: 500;
}

.card.shift-rule-card-cover {
    border-radius: 11px;
}

.input-cover {
    border-radius: 10px;
    padding: 11px 12px;
    box-shadow: 0px 4px 6px -1px #d3d3d385;
    font-weight: 500;
    color: #a3a3a3;
    font-size: 12px;
    height: 42px;
    border: none;
}

.form-cov label {
    font-weight: 600;
    margin-left: 11px;
    font-size: 13px;
}

.form-footer {
    display: flex;
    justify-content: space-between;
}

button.btn.cancel-btn-cov {
    border: 1px solid #00b5ff;
    padding: 7px 22px;
    font-weight: 600;
    border-radius: 7px;
    box-shadow: 0px 1px 7px 0px lightgray;
    text-transform: uppercase;
}

.title-cover {
    font-weight: 700;
    color: #00b5ff;
}

.Send-btn-cov {
    text-transform: uppercase;
    font-weight: 600;
    padding: 7px 20px;
}

.form-contnet-cov {
    padding: 13px;
    border-radius: 12px;
}

.form-covers {
    margin-bottom: 0px;
}

.doc-cov {
    box-shadow: 0px 4px 7px -1px #d3d3d3a6;
    padding: 14px 7px;
    display: flex;
    justify-content: space-around;
    border-radius: 13px;
    align-items: center;
    margin-bottom: 15px;
    border: none;
}

.doc-cov p {
    font-size: 12px;
    padding-top: 13px;
    font-weight: 600;
}

.doc-cov-img {
    text-align: center;
    width: 16%;
}

.doc-cov-img img {
    width: 100%;
}

.category-tab {
    border: none;
    box-shadow: 0px 2px 7px -2px lightgray;
    font-size: 13px;
    color: black;
    border: none;
    margin-bottom: 10px !important;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 19px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.form-control.document-cov-input {
    border-color: #e8e9e9;
    font-size: 14px;
    height: auto;
    padding: 15px;
    padding: 21px !important;
    text-align: center;
    box-shadow: 0px 2px 3px 0px lightgray !important;
    border: none;
    border-radius: 12px;
    width: 96% !important;
    color: black;
}

.form-control.document-cov-input {
    padding: 15px !important;
}

.document-cov label {
    margin-left: 10px !important;
}

.form-group.document-cov {
    margin-bottom: 18px;
}

button.video-play-btn img {
    position: absolute;
    width: 15%;
    z-index: 1;
    left: 124px;
    top: 83px;
}

.video-cover {
    position: relative;
}

.video-time-cov {
    background: #989898;
    height: 29px;
    width: 56px;
    border-radius: 0px 10px 0px 6px;
    position: absolute;
    bottom: 6px;
    color: white;
    padding-top: 6px;
    padding-left: 7px;
    font-size: 13px;
}

.video-time-cov-box {
    position: relative;
}

button.video-play-btn {
    border: none;
    background: none;
}

.video-data-box-repo-inner video {
    border-radius: 5px;
    /* background-color: #bbdbf7; */
}

.error {
    color: red;
    font-size: 12px;
}

span.check_staff_list {
    cursor: pointer;
    color: #d05a5a;
}

/* SETTINGS  ------------------------ */
.settings-header h1 {
    color: #444;
    margin-right: auto;
}

.settings-company-info {
    display: flex;
    align-items: center;
}

.settings-company-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.settings-company-details h2 {
    font-size: 18px;
    color: #333;
}

.settings-company-details p {
    font-size: 14px;
    color: #666;
}

.settings-user-info {
    position: absolute;
    right: 20px;
    text-align: right;
}

.settings-user-info p {
    font-size: 16px;
    color: #333;
}

.settings-user-info span {
    font-size: 14px;
    color: #888;
}

.settings-modules h3,
.settings-custom-services h3 {
    font-size: 18px;
    color: #333;
    margin: 20px 0 10px;
}

.settings-modules-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.dashboard-navigate-grid {
    grid-template-columns: repeat(6, 1fr);
    margin-top: 15px;
}

.dashboard-navigate-grid span {
    font-size: 12px;
    line-height: 14px;
}

.dashboard-navigate-grid .settings-module {
    height: 105px;
}

.settings-module {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 115px;
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    color: #333;
    cursor: pointer;
    text-align: center;
}

.dashboard-feature-content-inner-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 135px;
    background-color: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    color: #333;
    cursor: pointer;
    text-align: center;
}

.settings-module i {
    font-size: 24px;
    color: #d05a5a;
    margin-bottom: 5px;
}

#settings-add-custom-service {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
}

.settings-module span {
    margin-bottom: -17px;
    margin-top: 10px;
}

.btn-primary:hover {
    color: #fff;
    background-color: #d05a5a;
    border-color: black;
}

ul.submenu-list li {
    margin-left: -25px;
}

img.settings-banner-img {
    width: 32%;
    margin: 15px auto;
    display: flex;
    margin-bottom: 30px;
}

a.setting-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

a.setting-link:hover {
    color: black;
    font-weight: 500;
}

.btn-primary.focus,
.btn-primary:focus {
    color: #fff;
    background-color: #d05a5a;
    border-color: #d05a5a;
    box-shadow: none;
}

.btn-primary:hover {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(208, 90, 90) !important;
}

.settings-module button {
    background: transparent;
    border: gainsboro;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: dimgray;
    width: 100%;
    height: 100%;
}

button.setting-link:hover span {
    font-weight: 700;
}

.metismenu .has-arrow.arrow-c:after {
    content: "\f067";
    margin-right: -19px;
    margin-top: 0px;
    background: #d05a5a;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    align-items: center;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 9px;
}

.corporate-slider-box img {
    width: 100%;
}

.employee-dashboard-feature-cover {
    border: 1px solid dimgray;
    padding: 2px 24px;
    border-radius: 15px;
    padding-bottom: 15px;
}

.eemployee-dashboard-feature-icon h6 {
    font-size: 13px;
    /* margin-right: 33px; */
    font-weight: 500;
    margin-top: 8px;
    margin-left: 12px;
}

.employee-dahboard-feature-box {
    display: flex;
}

.employee-dashabord-feature-count span {
    border-radius: 50%;
    font-size: 14px;
    position: relative;
    border: 1px solid #6969693d;
    margin: 0 auto;
    width: 45px;
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: center;
}

.employee-dahboard-feature-box {
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
}

.eemployee-dashboard-feature-icon {
    display: flex;
    align-items: center;
    width: fit-content;
    /* background: aliceblue; */
    text-align: center;
    margin-top: 5px;
}

/* .employee-dahboard-feature-box.employee-dashboard-middle-feature-box {
    border-right: 1px solid;
    border-left: 1px solid dimgray;
    padding: 15px;
} */

.employee-dahboard-feature-box {
    padding: 10px 5px;
    border-right: 1px solid #69696933;
}

.employee-dashboard-feature-cover h6.employee-feature-title {
    font-size: 15px;
    text-align: center;
    background: #d05a5a;
    padding: 8px;
    color: white;
    width: 45%;
    margin: 0 auto;
    margin-bottom: 17px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

h6.dashboard-feature-inner-title {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 0px;
    width: fit-content;
    border-bottom: 2px dashed #424040;
    padding: 5px 15px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 15px;
}

.dashboard-feature-content-title-cover p {
    margin-bottom: 5px;
    font-size: 13px;
    margin-top: 11px;
}

/* Dashboard Revamp changes ---------------- */

.dashboard-feature-inner-cover-wrapper {
    border-radius: 14px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    overflow: hidden;
}

.dashboard-feature-count-box {
    font-weight: 600;
    font-size: 16px;
    background: #f14a4a05;
    padding: 2px 10px;
    border-radius: 25px;
    margin-left: -8px;
}

.dashboard-feature-content-title-cover span {
    background: #ffedee;
    width: 33px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 50%;
    margin-bottom: 8px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.dashboard-feature-content-title-cover span img {
    width: 18px;
    margin: 0 auto;
}

button.btn-icon.corporate_image img {
    width: 25px;
    height: 25px;
}

.card.card-repo-card.corporate-search-card-box {
    padding: 10px 20px;
}

.module-search-btn-cover button {
    padding: 6px 23px;
    margin: 5px;
    border-radius: 7px;
    font-size: 13px;
    background: #fff2f2;
    border: none;
    color: black;
    border: 1px solid #d05a5a;
    color: #d05a5a;
    font-weight: 600;
    margin-top: 27px;
}

.card.card-repo-card.corporate-search-card-box form {
    margin-bottom: 0px;
}

.policy-stepper-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding: 20px; */
    position: relative;
    margin-top: 45px;
}

.policy-step {
    display: flex;
    align-items: center;
    margin-bottom: 45px;
    position: relative;
    cursor: pointer;
}

.policy-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: white;
    color: #00000094;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #d05a5a4a;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
        rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
        rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
        rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
        rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
        rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
    font-weight: bold;
    margin-right: 10px;
    position: relative;
    z-index: 1;
    font-size: 13px;
}

.policy-step-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.policy-step::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    width: 2px;
    height: 50px;
    background-color: #dddddd78;
    z-index: 0;
}

.policy-step:last-child::before {
    display: none;
}

.policy-page-content {
    margin-top: 20px;
}

.policy-page {
    display: none;
}

.policy-page.active {
    display: block;
}

.policy-step.active .policy-step-number {
    background-color: #d05a5a;
    color: white;
    border: 1px solid black;
}

.policy-step.active .policy-step-title {
    color: #28a745;
    font-weight: 700;
}

.policy-page-content {
    padding: 20px 25px;
    min-height: 500px;
    /* border: 1px solid; */
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.add-policy-main-cover-wrapper {
    width: 99%;
}

.modal-header.deactive-modal-header {
    background: #eb4432;
    color: white;
}

.close {
    color: black !important;
    font-size: 28px;
    margin: 0px auto;
    padding: 8px 10px !important;
    background: transparent;
    opacity: 1;
}

.modal-body.deactive-body-cover {
    padding: 26px;
}

.deactive-body-points li {
    font-size: 14px;
    margin-bottom: 10px;
}

.d-flex.justify-content-end.deactive-modal-.footer {
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.deactive-body-points {
    padding-left: 24px;
    margin-bottom: 16px;
    margin-top: 14px;
}

.modal-content {
    border: none;
}

.modal-body.deactive-body-cover h6 {
    font-weight: bold;
}

.btn.btn-primary.deactivate-btn {
    font-size: 14px;
    padding: 8px 19px;
    padding-bottom: 10px;
    font-weight: 600;
    border-radius: 6px;
}

.modal-header.deactive-modal-header h6 {
    font-weight: bold;
}

.modal-header.deactive-modal-header button span {
    color: white !important;
}

table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order::after {
    opacity: 1 !important;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::after,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order::after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order::before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order::after {
    left: 0;
    opacity: 1 !important;
    line-height: 9px;
    font-size: 0.8em;
}

.dt-column-order {
    color: white !important;
}

.date-input {
    padding: 12px;
    border: none;
    border-radius: 9px;
    box-shadow: 0px 2px 4px 0px lightgray;
}

.btn.btn-primary.common-btn-style {
    padding: 6px 13px;
    margin: 5px;
    border-radius: 7px;
    font-size: 13px;
    background: #fff2f2;
    border: none;
    color: black;
    border: 1px solid #d05a5a;
    color: #d05a5a;
    font-weight: 600;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.alert-popup-box button.close::before {
    font-size: 15px;
}

.alert-popup-box .alert .close {
    outline: none;
    border: none;
    background: #ffedee;
    width: fit-content;
    padding: 3px 0px;
    padding-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-top: 11px;
    margin-right: 8px;
}

a.download-file-btn {
    background: #ffedee;
    padding: 4px 12px;
    border-radius: 5px;
    color: #d05a5a;
    font-weight: 600;
    font-size: 13px;
}

.address-title {
    text-align: center;
    /* Center-align the title */
    position: relative;
    /* Ensure the pseudo-elements are positioned correctly */
}

.address-title h5 {
    display: flex;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: fit-content;
    background: white;
    padding: 0px 15px;
    font-size: 16px;
    font-weight: 400;
    color: black;
}

.address-title h5 span {
    margin-left: 16px;
    font-size: 14px;
}

.address-title::before,
.address-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 0.5px;
    background-color: #00000014;
    transform: translateY(-50%);
}

.address-title::before {
    left: 0;
    /* Position to the left */
}

.address-title::after {
    right: 0;
    /* Position to the right */
}

.alert {
    border: none;
    border-radius: 10px;
    font-size: 14px;
    padding-right: 15px;
    background: #ffedee70;
    color: #181717;
    font-weight: 500;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.alert .close {
    margin: 0px auto;
    padding: 0px !important;
    background: transparent;
    opacity: 1;
    font-size: 12px;
    position: relative;
    margin-left: 16px;
    background: #d05a5a;
    width: 23px;
    height: 23px;
    color: white !important;
    border-radius: 50%;
}

/* TIME SHEET REVAMP ----------------------------- */

form#timesheet-settings-form input {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    padding: 7px 15px;
    border-radius: 5px;
}

form#timesheet-settings-form select {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    padding: 7px 15px;
    border-radius: 5px;
}

button.btn.btn-link.add-task-btn {
    background: #ffedee;
    padding: 0px 10px !important;
    width: fit-content !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.add-project-form-main-cover-wrapper {
    padding: 20px 25px;
}

.add-project-form-main-cover-wrapper input {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border: 1px solid #6969691f;
    border-radius: 6px;
    padding: 7px 10px;
}

.template-name-box input {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border: 1px solid #6969691f;
    border-radius: 6px;
    padding: 7px 10px;
    width: 100%;
}

.add-project-form-main-cover-wrapper .select2-container--default .select2-selection--multiple {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px !important;
    border: 1px solid #6969691f !important;
    border-radius: 6px !important;
    padding: 0px 10px !important;
}

.add-project-form-main-cover-wrapper select {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border: 1px solid dimgray;
    border-radius: 6px;
}

.edit-policy-form-cover.add-task-main-cover-wrapper .component-input-box {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.edit-policy-form-cover.add-task-main-cover-wrapper input {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border: 1px solid #6969691f;
    border-radius: 6px;
    padding: 7px 10px;
}

.modal-header.delete-pop-up-header h6 {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.leave-module-title-content {
    margin-bottom: 15px;
    margin-top: 15px;
}

.time-sheet-header-box select {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border: 1px solid #6969691f;
    border-radius: 6px;
    padding: 7px 10px;
}

.time-sheet-header-box input {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    border: 1px solid #6969691f;
    border-radius: 6px;
    padding: 7px 10px;
}

.dt-layout-row label {
    margin-left: 12px !important;
}

.time-sheet-banner-img img {
    width: 80%;
    margin: 0 auto;
    display: flex;
}

.template-name-cover-wrapper {
    margin-bottom: 29px !important;
}

.template-name-cover-wrapper p {
    margin-bottom: 3px;
    font-size: 17px;
    font-weight: 500;
}

thead.t-head-test.highlight-header th {
    color: white;
}

.form-group.custom-select-form-group select {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 6px 19px;
}

.form-group.custom-select-form-group {
    margin-right: 10px;
}

input.form-control.date-input-box.highlight-select {
    border: 1px dashed #8f3d8b;
}

.epf-tabs-main-cover-wrapper .nav-item {
    padding: 5px 8px;
    background: #ffedee;
    margin: 5px;
    border-radius: 19px;
    font-weight: 400;
}

.epf-tabs-main-cover-wrapper .nav-item a {
    color: black;
}

.compliance-btn-cover-wrapper {
    display: flex;
    justify-content: end;
}

.compliance-btn-cover-wrapper button {
    background: #d05a5a !important;
    padding: 7px 23px;
    border-radius: 8px;
    margin-right: 10px;
    font-size: 13px;
    font-weight: 500;
}

.epf-tabs-main-cover-wrapper .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background: #d05a5a;
    padding: 2px 21px;
    border-radius: 25px;
    width: 100%;
}

table#epfTable thead th {
    color: white;
    border: 1px solid #efdcdc;
}

table#lwfTable thead th {
    color: white;
    border: 1px solid #efdcdc;
}

table#esiTable thead th {
    color: white;
    border: 1px solid #efdcdc;
}

table#ptTable thead th {
    color: white;
    border: 1px solid #efdcdc;
}

/* REVAMP DASHBOARD CSS ---------------------- */


canvas.custom-dashboard-chart {
    width: 250px !important;
    height: 250px !important;
    margin: 0 auto;
    margin-bottom: 25px;
    margin-top: 30px;
}

canvas.custom-dashboard-chart.custom-stats-chart {
    width: 270px !important;
    height: 270px !important;
}

.card.employee-graph-box-main-cover.dashboard-charts-box-cover {
    height: 380px !important;
}

h3.chart-header-title {
    font-size: 16px;
    margin-bottom: 0px;
    border-bottom: 1px solid #6969692e;
    width: 80%;
    padding-bottom: 7px;
}

.custom-chart-header {
    display: flex;
    align-items: center;
}

.custom-chart-header img {
    width: 35px;
}

.custom-chart-header.monthly-stats-header img {
    width: 32px;
    margin-right: 9px;
}

img.employee-department-icon {
    width: 30px;
    margin-right: 10px;
}

.employee-graph-box-main-cover.dashboard-charts-box-cover {
    height: 380px;
}

.progress-bar-container {
    background: #f0f0f091;
    border-radius: 10px;
    height: 10px;
    width: 100px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: #625483;
    border-radius: 10px;
    transition: width 0.3s ease;
    position: absolute;
    top: 0;
}

.dashboard-header-hero-section {
    width: 100%;
    background: white;
    border-radius: 13px;
    padding: 25px;
    height: 95%;
    border: 1px solid #d05a5a05;
    /* box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px; */
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    align-items: center;
    display: flex;
    position: relative;
}

.dashboard-hero-banner img {
    width: 70%;
    position: absolute;
    right: 35px;
    bottom: -28px;
}


li.dashboard-feature-stylish-pills-box a p {
    margin-bottom: 0px;
    font-size: 13px;
    font-weight: 500;
    color: black;
}

li.dashboard-feature-stylish-pills-box {
    list-style: none;
    margin-bottom: 30px;
}

.feature-custom-line {
    width: 97%;
    height: 1px;
    background: #0000000d;
    margin-left: 15px;
    margin-top: -18px;
}

li.dashboard-feature-stylish-pills-box a {
    display: flex;
    align-items: center;
    border: 1px solid #69696912;
    padding: 4px 15px;
    border-radius: 42px;
    gap: 10px;
    width: fit-content;
    background: white;
    z-index: 99;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}


.dashboard-feature-list-box ul li:first-child {
    margin-left: -40px;
}

.dashboard-feature-list-box ul li:nth-child(3) {
    margin-left: -25px;
}

.dashboard-feature-list-box ul li:nth-child(2) {
    /* background-color: #ffe4e1; */
    margin-left: 28px;
}

.dashboard-feature-banner-cover img {
    width: 45%;
    margin: 25px auto;
    margin-top: -5px;
}


.pill-btn {
    width: 25px;
    height: 25px;
    background: #ffe4e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    margin-right: -7px;
}

.payroll-btn {
    background: #625483 !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    padding: 3px;
}


.payroll-banner-cover img {
    margin-top: 30px;
}

img.no-announcement-banner {
    width: 40%;
    margin: 0 auto;
    display: flex;
    margin-top: 40px;
}

.month-statistics-pop-box-cover {
    display: flex;
    margin-top: -50px !important;
    margin-bottom: 20px;
}

.month-stats-title-box h6 {
    font-size: 12px;
    text-align: center;
    border: 1px solid #69696957;
    padding: 8px 6px;
    font-weight: 500;
    border-radius: 10px;
}

.vertical-line {
    width: 1px;
    height: 180px;
    background: #00000029;
    margin: 0 auto;
}

.month-stats-count-box {
    border: 1px solid #69696936;
    padding: 4px 15px;
    border-radius: 22px;
    font-size: 17px;
    text-align: center;
}

.month-statistics-card-cover {
    display: flex;
    align-items: end;
    justify-content: end;
    height: 100%;
}

/* First box vertical line */
.month-statistics-pop-box-cover .row>.col-lg-4:nth-child(1) .vertical-line {
    height: 170px;

}

/* Second box vertical line */
.month-statistics-pop-box-cover .row>.col-lg-4:nth-child(2) .vertical-line {
    height: 80px;

}

/* Third box vertical line */
.month-statistics-pop-box-cover .row>.col-lg-4:nth-child(3) .vertical-line {
    height: 140px;

}

.month-stats-count-box {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    padding: 3px 30px !important;
    width: fit-content;
    margin: 0 auto;
    color: #625483;
    font-weight: 600;
}

.employees-graph-content-list ul#employees-list {
    overflow-y: scroll;
    height: 300px;
}

/* EMPLOYEE DOC CSS ----------------------- */

.employee-inner-doc-box {
    width: fit-content;
    border: 1px solid #69696940;
    padding: 8px;
    border-radius: 8px;
}

.employee-inner-doc-box img {
    width: 40px;
}

.employee-document-card {
    border: 1px solid #69696940;
    padding: 10px 15px;
    width: 250px;
    border-radius: 8px;
}

.employee-doc-title h5 {
    font-size: 14px;
    background: #d05a5a;
    padding: 4px 15px;
    color: white;
    margin: 0 auto;
    text-align: center;
    border-radius: 5px;
}

.employee-title-left-box {
    width: 10%;
    height: 25px;
    background: black;
    border-top-right-radius: 20px;
}

.employee-title-right-box {
    width: 10%;
    height: 25px;
    background: black;

}

.employee-doc-header-box {
    display: flex;
}

.employee-doc-title {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 12px;
}

.employee-doc-header-box {
    display: flex;
}

.documents-cards-cover-wrapper {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* EMPLOYEE DOCS CUSTOM CSS ====================== */

.select2-container .select2-selection--multiple {
    border: 1px solid #e29e9e5c !important;
    padding: 5px 2px !important;
    border-radius: 14px;
    background: #d4bdbd08;
}

li.select2-selection__choice {
    border: 1px solid #fff !important;
    padding: 4px 13px !important;
    border-radius: 32px !important;
    margin: 5px !important;
    font-size: 13px;
    background: #fff4f4e8 !important;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    display: flex;
    align-items: center;
    gap: 5px !important;
}

span.select2-selection__choice__remove {
    background: red;
    width: 13px;
    height: 13px;
    color: white !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 50% !important;
}

.select-revamp-input {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px !important;
    padding: 9px 10px;
    border-radius: 10px;
}

button.generate-doc-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gen-left-btns-cover {
    display: flex;
    gap: 7px;
}

button.all-in-one-btn {
    color: white;
    border-radius: 9px;
    background: #d05a5a;
}

/* CUSTOM DOCUMNET CSS ======================== */

.document-card {
    border: 1px solid dimgray;
    display: flex;
    align-items: center;
}

.document-img-box img {
    width: 50px;
    margin: 10px;
}

.doc-cover-wrapper h5 {
    font-size: 15px;
}

.doc-cover-wrapper p {
    margin-bottom: 0px;
    font-size: 13px;
}

.document-card button {
    border: none;
    border-radius: 10px;
    width: 30px;
    height: 30px;
    margin: 0 10px;
    background: #d05a5a;
}

.document-card {
    border: 1px solid #69696936;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 10px;
}

.home-filter-cover select {
    box-shadow: rgb(0 0 0 / 2%) -4px 2px 7px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    border-radius: 6px;
}

.home-filter-cover label {
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 500;
}
.separator-line {
    border: 0.1px dashed #6969693b;
    margin: 15px 0px;
}

.cmn-back-home {
    float: right;
    display: flex;
    justify-content: end;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
}

.cmn-back-home a {
    font-size: 13px;
    border: 1px solid #69696942;
}

a.view-asset-doc {
    border: 1px solid #69696966;
    padding: 3px 10px;
    border-radius: 7px;
    font-weight: 600;
}

.select2-container {
    z-index: 1 !important;
}
.sidebar.custom-sidebar-target .right {
    display: none;
}

a.mobile-header-brand {
    display: none;
}

@media screen and (min-width: 330px) and (max-width : 480px) {

    #header_top {
        width: 70px;
        padding: 0px;
        background: transparent;
        border: none;
    }

    .metismenu.extra-margin {
        margin-top: 0px !important;
    }

    a.mobile-header-brand {
        display: flex;
    }

    .sidebar.custom-sidebar-target .right {
        display: flex;
    }

    a#toggle-sidebar1 img {
        width: 25px !important;
        display: flex !important;
        margin: 0 !important;
        position: absolute;
        left: 8px;
        top: 20px;
    }

    h1.page-title.page-title-custome.page-header-title {
        font-size: 15px;
    }

    .collapsed-sidebar.custom-sidebar-target#left-sidebar a.mobile-header-brand img {
        display: none;
    }

    .custom-sidebar-target#left-sidebar a.mobile-header-brand img {
        display: flex;
    }

    /* .page-header .right {
        display: inherit !important;
    } */

    .page {
        left: 0px !important;
        width: 100%;
        /* z-index: -99999; */
        top: 0px !important;
        margin-top: 0px !important;
        padding: 0px;
    }

    .collapsed-sidebar.custom-sidebar-target#left-sidebar {
        left: -70px;
    }

    .dashboard-hero-banner img {
        width: 80%;
        position: inherit !important;
        margin: 0 auto;
        display: flex;
    }

    .month-statistics-pop-box-cover .row>.col-lg-4:nth-child(3) .vertical-line {
        height: 50px;
    }

    .month-statistics-pop-box-cover .row>.col-lg-4:nth-child(1) .vertical-line {
        height: 50px;
    }

    .month-statistics-pop-box-cover .row>.col-lg-4:nth-child(2) .vertical-line {
        height: 50px;
    }

    .month-statistics-pop-box-cover {
        margin-top: 20px !important;
        margin-bottom: 0px;
    }

    .card.employee-graph-box-main-cover.dashboard-charts-box-cover {
        height: auto !important;
        margin-bottom: 20px;
    }

    .dashboard-header-hero-section {
        padding: 25px 20px;
    }

    .dashboard-feature-list-box ul li:first-child {
        margin-left: 0px;
    }

    .dashboard-feature-list-box ul li:nth-child(2) {
        margin-left: 50px;
    }

    .dashboard-feature-list-box ul li:nth-child(3) {
        margin-left: 0px;
    }

    .payroll-banner-cover img {
        margin-top: 0px;
        width: 60%;
        margin-left: auto;
    }

    .payroll-banner-cover {
        display: flex;
    }

    .employee-graph-box-main-cover {
        margin-top: 20px;
    }

    .employee-graph-box-main-cover {
        margin-top: 20px;
        height: auto;
        margin-bottom: 15px;
    }

    span.header-icon {
        width: 50px;
        height: 50px;
        margin-left: 25px;
    }

    .custom-sidebar-target#left-sidebar {
        z-index: 9999;
        height: 100vh;
    }

    #header_top .header-brand {
        margin: 0 15px 0 0;
        display: none;
    }

    .dashboard-feature-banner-cover img {
        width: 30%;
        margin: 25px auto;
        margin-top: 20px;
    }

    /* //EMPLOYEE PAGE STARTS --------------------- */
    .employee-import-export-btn-main-cover {
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }

    .template-main-form-box form ul li {
        align-items: start;
        flex-direction: column;
        gap: 9px;
    }

    .template-main-form-box .template-input-box {
        flex-direction: column !important;
        display: flex;
        align-items: start !important;
        gap: 10px;
    }

    .template-input-box .template-input-dates {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center !important;
        gap: 7px;
    }

    .leave-category-title h6 {
        margin-top: 0px;
    }

    .template-main-form-box {
        padding: 25px 20px;
    }

    .leave-category-title {
        padding: 15px 25px;
        padding-top: 15px;
    }

    .disable-menu-btn {
        display: flex !important;
    }

    .leave-category-main-cover-box {
        overflow-x: scroll;
    }

    .leave-category-main-cover-box table {
        min-width: 700px;
    }

    .geo-modules-tab-cover-wrapper .nav-tabs {
        gap: 10px;
    }

    .tracking-user-card select {
        margin-bottom: 11px;
    }

    .auth {
        height: 100%;
        overflow-y: scroll;
    }

    .auth .auth_left {
        height: auto;
        padding: 15px 5px;
    }

    .auth .auth_left .card {
        padding: 20px 10px;
        right: 0px;
    }

    .card-header.card-head-text-repo {
        flex-direction: column;
    }

    .metismenu ul a {
        padding: 5px;
        font-size: 12px !important;
    }

    .custom-sidebar-target .metismenu li {
        margin-bottom: 0px !important;
        padding: 2px 10px !important;
    }

    span.custom-btn-fix {
        display: flex;
        min-width: 120px;
    }

    .employee-search-main-cover-wrapper {
        flex-direction: column;
        gap: 11px;
    }

    .employee-search-input-box select {
        width: 100%;
    }

    .employee-search-input-box input {
        width: 100%;
    }

    .report-card-attendence.report-section {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 10px;
    }

    .custom-sidebar-target .metismenu span {
        margin-left: 32px;
        font-size: 13px;
    }

    .sidebar-icons {
        width: 25px;
        margin-bottom: 2px;
        /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
    }

    a.mobile-header-brand img {
        width: 60px;
        position: absolute;
        left: 15px;
    }

    #left-sidebar .sidebar-nav {
        margin-top: 70px;
    }

    .header-profile-name-custome h4 {
        font-size: 13px;
    }

    .custome-notification.notification {
        margin-left: 10px;
        margin-top: 80px;
        position: absolute;
        left: 0px;
    }

    ul.dropdown-menu.dropdown-menu-right.drop-box-repo.show {
        width: 200px;
        overflow-x: scroll;
        font-size: 12px !important;
    }

    ul.dropdown-menu .dropdown-item {
        color: #333537;
        font-size: 11px;
        padding: 6px;
        margin: 0 10px;
        width: fit-content;
    }

    .dropdown .dropdown-toggle i {
        font-size: 15px;
    }

    .header-profile-name-custome {
        position: relative;
        right: -28px;
    }
}