.action-btn{
    width: 29px;
    height: 28px;
    border-radius: 9.3552px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
/* .choose-files {
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 15px;
    max-width: 155px !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
} */



/* Logo set */

.setting-logo {
    justify-content: center;
    height: 50px;
    width: 100%;
    margin: 30px 0px;
    /* text-align: left !important; */
}


.choose-files div {
    color: #fff;
    /* background: #584ED2 !important; */
    border: none;
    border-radius: 10px;
    padding: 8px 6px;
    max-width: 155px !important;
    font-size: 12px;
    font-weight: 500;
}

.file {
    position: relative !important;
    left: 0;
    opacity: 0;
    top: 0;
    bottom: 0;
    width: 80%;
    border: none;
    padding: 0;
    margin: 0;
    /* cursor: pointer; */
}

.nowrap {
    white-space: nowrap;
}


/* end logo  */


.dash-sidebar .main-logo {
    justify-content: center;
    min-height: 80px;
    max-height: 80px;
    width: 100%;
    min-width: 255px;
}
.dash-sidebar .m-header {
    height: 70px;
    display: flex;
    align-items: center;
    padding: 15px 20px;
}

.dash-sidebar .main-logo a img {
    object-fit: contain;
    width: auto !important;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* .custom_color_radio_button
{
    box-shadow: 0px 0px 0px 1px #000000;
} */


.lang-dropdown option {
    background-color: #fff;
    color: #000;
    text-align: center;
}




/* Star Rating */

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}
.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 23px;
    color: #ccc;
}
.rate:not(:checked)>label:before {
    content: '★ ';
}
.rate>input:checked~label {
    color: #FFC700;
}
.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #DEB217;
}
.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #C59B08;
}

/* End star rating */

/**job application show **/
.text-right {
    text-align: right !important;
}
.rating-stars ul {
    list-style-type: none;
    padding: 0;
}


.rating-stars ul > li.star {
    display: inline-block;
}

.rating-stars ul > li.star.selected > i.fa {
    color: #FF912C;
}

.rating-stars ul > li.star > i.fa {
    font-size: 1.5em;
    color: #ccc;
}

.rating-stars ul > li.star.hover > i.fa {
    color: #FFCC36;
}
.rating-stars ul > li.star.selected > i.fa {
    color: #FF912C;
}
.static-rating .voted {
    color: #ffcc00;
}
.static-rating-sm .star {
    font-size: 0.75rem;
}
/** job application show**/

/* plan */

.price-card {
    text-align: center;
    position: relative;
    margin-top: 30px;
}
.price-card.price-2 {
    color: #fff;
}
.price-card.price-2 .price-badge {
    color: #fff;
    background: #1C232F;
}
.price-card .p-price {
    font-size: 40px;
}
.price-card .price-badge {
    color: #fff;
    padding: 7px 24px;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}
.price-card .list-unstyled {
    display: inline-block;
}
.price-card .list-unstyled li {
    display: flex;
    align-items: center;
}
.price-card .list-unstyled li + li {
    margin-top: 8px;
}
.price-card .list-unstyled .theme-avtar {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #fff;
    margin-right: 15px;
}
/*plan */

#card-element {
    border: 1px solid #a3afbb !important;
    border-radius: 10px !important;
    padding: 10px !important;
}

/*** setting***/

.faq .accordion .accordion-item {
    border-radius: 10px;
    overflow: hidden;
    border: none;
    margin-bottom: 10px;
}

.faq .accordion .accordion-item .accordion-button {
    font-weight: 700 !important;
    padding: 1.3rem 1.25rem;
}

.faq .accordion .accordion-item .accordion-button span > i {
    font-size: 20px;
    margin-right: 8px;
}

.faq .accordion .accordion-item .accordion-button:not(.collapsed) {
    border-radius: 10px;
    background: transparent;
    box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
}

.faq .accordion .accordion-item .accordion-body {
    padding: 2.3rem 2.3rem 2.3rem 3rem;
}

#card-element {
    border: 1px solid #a3afbb !important;
    border-radius: 10px !important;
    padding: 10px !important;
}

.active_color {
    border: 2px solid #000 !important;
}

/* chat counter */
.message-counter {
    position: absolute;
    top: 3px;
    right: 4px !important;
    border-radius: 50%;
    font-size: 10px;
width: 15px !important;
    text-align: center !important;
    color: #fff !important;
}
.dash-card{
    height: 200px !important;
}

.timesheet-card{
    height: 84px !important;
}
.emp-card{
    height: 193px !important;
}
.set-card{
     height: 300px !important;
}
.status-badge{
    width: 71px !important;

}
.status-badde3{
    width: 66px !important;

}
.ticket-card{
    height: 239px !important;

}
.status-badde4{
    width: 67px !important;
}
.status-badge5{
    width: 80px !important;

}
.status-badge6{
    width: 92px !important;
}
.status-badge7{
    width: 101px !important;

}
.em-card{
    min-height: 506px !important;
}
.job-card{
    /* height: 567px !important; */

}
.job2-card{
    height: 509px !important;

}
.mon-card{
    height: 86px !important;
}
.card-635 {
    height: 741px !important;
}
.comp-card{
    height: 142px !important;

}
.drp-language .dropdown-toggle{
    color: #525B69;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0.7rem;
    margin: 0 7.5px;
    border-radius: 4px;
    position: relative;
    font-weight: 500;
    border-radius: 12px;
    border: 1px solid rgba(206, 206, 206, 0.2);
}
/* chat counter */
.choose-files {
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 15px;
    max-width: 155px !important;
    font-size: 12px;
    font-weight: 500;
    /* cursor: pointer; */
}

.table.modal-table td,
.table.modal-table th {
    white-space: normal;
}

.support-user{
    height: 40px;
    width: 40px;
}

.seo_image{
    height: 200px;
    width: 360px
}

.disabledCookie {
    pointer-events: none;
    opacity: 0.4;
}

/* Payment Settings css */
.setting-accordion .accordion-item {
    border: 1px solid #E0E6EF !important;
    border-radius: 7px;
}

.setting-accordion .accordion-header {
    background: #F8F8F8;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}

.setting-accordion .accordion-header .accordion-button {
    background: #F8F8F8 !important;
    display: flex;
    justify-content: space-between;
    border-radius: 7px;
    box-shadow: none;
    border-bottom: 1px solid transparent;
}

.setting-accordion .accordion-header .accordion-button:not(.collapsed) {
    border-color: #E0E6EF;
}

.setting-accordion .accordion-header .accordion-button span {
    flex: 1;
}

.setting-accordion .accordion-header .accordion-button::after {
    margin: 0 0 0 5px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath opacity='0.4' d='M12 22.4146C17.5228 22.4146 22 17.9374 22 12.4146C22 6.8917 17.5228 2.41455 12 2.41455C6.47715 2.41455 2 6.8917 2 12.4146C2 17.9374 6.47715 22.4146 12 22.4146Z' fill='%2325314C'/%3E%3Cpath d='M15.5301 12.8845C15.2371 12.5915 14.762 12.5915 14.469 12.8845L12.749 14.6045V8.41455C12.749 8.00055 12.413 7.66455 11.999 7.66455C11.585 7.66455 11.249 8.00055 11.249 8.41455L11.249 14.6035L9.52908 12.8835C9.23608 12.5905 8.76104 12.5905 8.46804 12.8835C8.17504 13.1765 8.17504 13.6516 8.46804 13.9446L11.468 16.9446C11.537 17.0136 11.62 17.0684 11.711 17.1064C11.802 17.1444 11.9001 17.1646 11.9981 17.1646C12.0961 17.1646 12.1929 17.1444 12.2849 17.1064C12.3769 17.0684 12.4591 17.0136 12.5281 16.9446L15.5281 13.9446C15.8231 13.6516 15.8231 13.1775 15.5301 12.8845Z' fill='%2325314C'/%3E%3C/svg%3E");
    background-size: 24px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.setting-accordion .accordion-item:not(:last-of-type) {
    margin-bottom: 15px;
}

/* Job Stage Start */
.theme-detail-card {
    padding: 15px;
    border: 1px solid #DAE8F9;
    border-radius: 14.7699px;
    -webkit-border-radius: 14.7699px;
    -moz-border-radius: 14.7699px;
    -ms-border-radius: 14.7699px;
    -o-border-radius: 14.7699px;
}

.theme-detail-card .setting-block {
    padding: 15px;
    border: 1px dashed #DAE8F9;
    border-radius: 14.7699px;
    -webkit-border-radius: 14.7699px;
    -moz-border-radius: 14.7699px;
    -ms-border-radius: 14.7699px;
    -o-border-radius: 14.7699px;
}

/* JOB PAGE START */
.job-wrapper .navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.job-banner {
    position: relative;
    background-color: unset;
}

.job-banner .job-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.job-banner .job-banner-bg img {
    width: 100%;
    height: 100%;
}

.job-banner .job-banner-content {
    padding: 5.9% 0;
    max-width: 360px;
    width: 100%;
    margin: auto;
}

.placedjob-section .section-title {
    padding: 35px 25px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    margin-top: -20px;
    text-align: center;
}

.job-card-body {
    padding: 15px;
    border-radius: 15px;
    background: linear-gradient(277.29deg, rgba(111, 217, 67, 0.09) 0.99%, rgba(111, 217, 67, 0) 100.89%);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border: 1px solid #6FD943;
}

.placedjob-section {
    padding-bottom: 80px;
    background-color: unset;

}

.job-content .container {
    max-width: 1540px;
}

@media screen and (max-width:767px) {
    .job-banner .job-banner-content {
        padding: 10% 0;
    }
}

@media screen and (max-width:575px) {
    .job-banner .job-banner-content {
        padding: 21% 0;
    }
}

.job-card{
    display: flex;
    flex-wrap: wrap;
}
.job-card .job-card-body{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.job-card .job-card-body h5{
    flex: 1;
}

/* JOB PAGE END */


/* apply job section */

.apply-job-section {
    padding-bottom: 80px;
    background-color: unset;

}

.apply-job-section .apply-job-wrapper{
    padding: 35px 25px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    margin-top: -20px;
}

@media screen and (max-width:767px) {
    .job-banner .job-banner-content {
        padding: 10% 0;
    }
    .apply-job-section .apply-job-wrapper{
        padding: 35px 15px;
    }
}

@media screen and (max-width:575px) {
    .job-banner .job-banner-content {
        padding: 26% 0;
    }
}

/* apply job section */

/* create button icon */
a > i.ti-plus{
    color: #FFFFFF;
}

/* a > i.icon_desc {
    color:#51459d;
} */

/* custom dark-mode && rtl css */

[dir="rtl"] .dash-sidebar {
    left: auto !important;
}

[dir="rtl"] .dash-header {
    left: 0;
    right: 280px;
}
[dir="rtl"] .dash-header:not(.transprent-bg) .header-wrapper {
    padding: 0 0 0 30px;
}

[dir="rtl"] .dash-header:not(.transprent-bg):not(.dash-mob-header)~.dash-container {
    margin-left: 0px;
}

[dir="rtl"] .me-auto.dash-mob-drp {
    margin-right: 10px !important;
}

[dir="rtl"] .me-auto {
    margin-left: 10px !important;
}


[dir="rtl"] .header-wrapper .ms-auto {
    margin-left: 0 !important;
}

/* header mobile view issue */
/* [dir="rtl"] .dash-header {
    left: 0 !important;
    right: 280px !important;
} */

[dir="rtl"] .list-group-flush>.list-group-item .float-end {
    float: left !important;
}

/*  custom End dark-mode && rtl css  */

.fc .fc-toolbar-title {
    font-size: 1.25em;
    margin: 0;
}

/* mobile view */
/* .ps--active-y  {
    height: 100vh !important;
} */

/*date:19-jun-2023*/
body.no-scroll{
    overflow: hidden;
    position: relative;
}

.auth-wrapper .navbar .navbar-brand{
    display: block;
    width: 100%;
    max-width: 150px;
}
.auth-wrapper .navbar .navbar-brand img{
    width: 100%;
}
@media (max-width: 1024px) {
    .ps {
        height: 100vh !important;
    }
}

.ps {
    overflow: hidden !important;
    overflow-anchor: none;
    touch-action: auto;
}

/* Nav scroller */
.dash-sidebar .navbar-content{
    height: calc(100vh - 70px);
}
/* Auth Mobile responsive */
@media screen and (max-width:767px){
    .auth-wrapper{
        align-items: flex-start !important;
    }
    .auth-wrapper .auth-content{
        min-height: unset !important;
    }
    .auth-wrapper .auth-content .card{
        min-height: calc(100vh - 110px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .auth-wrapper .auth-content .card .card-body{
        flex: unset;
    }
}

/* seo image */
.img_setting {
    filter: drop-shadow(2px 3px 7px #011C4B);
}

/* Ai selected text */
@media screen and (max-width:400px) {
    .selected_text{
        margin-top: 2px;
    }
}

.simplebar-content{
    text-align: initial;
}

/* theme customize */
.color-wrp .color-picker-wrp input[type="color"] {
    background-color: #fff;
    height: 55px;
    cursor: pointer;
    border-radius: 3px;
    margin: 0px;
    padding: 0px;
    border: 0;
    margin-bottom: 5px;
    margin-left: 5px;
}

.color-wrp{
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.color-wrp .theme-color{
    margin: 0;
    width: 200px;
}
.color-wrp .color-picker-wrp{
    width: 70px;
}

/* google recapcha  */

.grecaptcha-badge{
    z-index: 2;
 }.border-grey {
    border: 1px solid #CBCBCB
 !important;
 }
 .upgrade-line hr {
    flex: 1;
 }

  /* border-color */

  body.theme-1 .border-primary {
    border-color: #0CAF60 !important;
}

body.theme-2 .border-primary {
    border-color: #584ED2 !important;
}

body.theme-3 .border-primary {
    border-color: #6FD943 !important;
}

body.theme-4 .border-primary {
    border-color: #145388 !important;
}

body.theme-5 .border-primary {
    border-color: #B9406B !important;
}

body.theme-6 .border-primary {
    border-color: #008ECC !important;
}

body.theme-7 .border-primary {
    border-color: #922C88 !important;
}

body.theme-8 .border-primary {
    border-color: #C0A145 !important;
}

body.theme-9 .border-primary {
    border-color: #48494B !important;
}

body.theme-10 .border-primary {
    border-color: #0C7785 !important;
}

body.theme-1 .btn-addnew-project {
    border-color: var(--theme1-color);
}
body.theme-2 .btn-addnew-project {
    border-color: var(--theme2-color);
}
body.theme-3 .btn-addnew-project {
    border-color: var(--theme3-color);
}
body.theme-4 .btn-addnew-project {
    border-color: var(--theme4-color);
}
body.theme-5 .btn-addnew-project {
    border-color: var(--theme5-color);
}
body.theme-6 .btn-addnew-project {
    border-color: var(--theme6-color);
}
body.theme-7 .btn-addnew-project {
    border-color: var(--theme7-color);
}
body.theme-8 .btn-addnew-project {
    border-color: var(--theme8-color);
}
body.theme-9 .btn-addnew-project {
    border-color: var(--theme9-color);
}
body.theme-10 .btn-addnew-project {
    border-color: var(--theme10-color);
}
body.custom-color .btn-addnew-project {
    border-color: var(--color-customColor);
}

body.custom-color .border-primary {
    border-color: var(--color-customColor) !important;
}

/*  all Cancel button background change*/

.modal-footer .btn.btn-light,
.btn.custom-cancel-btn {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

/* All model close button css */

.btn-close:focus,
.btn-close:hover {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(81, 69, 157, 0.25);
    opacity: 1;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -ms-border-radius: 0.25rem;
    -o-border-radius: 0.25rem;
}

/* All model close button css */

/* Dashboard set link css */

.card.stats-wrapper {
    margin-bottom: 24px;
}

.dash-info-card .card-body.stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dash-info-card .card-body.stats .text-muted {
    text-align: left;
}

.dash-info-card .card-body.stats h6 a,
.dash-info-card.appoint-dash .stats h5 a {
    color: #000;
}

/* Dashboard set link css */

/* templates css */

.invoice-row {
    gap: 20px 0;
}
.language-sidebar .list-group-item {
    padding: 10px 25px;
}

/* templates css */

/* All buttons css */

.dt-buttons a span i{
    padding: 9px !important;
    background: #3ec9d6 !important;
    color: #ffff !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    display: flex;
    align-items: center;
}
.dt-buttons a span i.ti-eye,
.dt-buttons a span i.ti-key,
.dt-buttons a span i.fa-comment {
    background: #ffa21d !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-pencil {
    background: #3ec9d6 !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-trash {
    background: #ff3a6e !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-caret-right,
.dt-buttons a span i.ti-copy,
.dt-buttons a span i.ti-arrow-back-up,
.dt-buttons a span i.ti-download {
    background: #6fd943 !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-arrows-right-left {
    background: #1c232f !important;
    color: #ffff !important;
}
.dt-buttons a span i.ti-crosshair {
    background: #6c757d !important;
    color: #ffff !important;
}

/* All buttons css */

/* Ticket prority and status css */

.ticket-set{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding: 0.5rem !important;
    width: 90%;
}

/* Ticket prority and status css */

/* this css for badge */

.badge {
    border-radius: 4px !important;
}

/* this css for badge */

/* Tooltip radius  */

.tooltip-inner {
    border-radius: 4px !important;
    text-transform: capitalize;
}

/* Tooltip radius  */

/* hrm system setup tab */
.hrm_setup_tab li {
    flex: 0 0 auto !important;
}

.information-tab {
    padding: 10px !important;
    gap: 5px !important;
    border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -ms-border-radius: 5px !important;
    -o-border-radius: 5px !important;
    overflow: hidden !important;
}

body.theme-1 .information-tab {
    background-color: #0CAF6030;
}

body.theme-2 .information-tab {
    background-color: #584ED230;
}

body.theme-3 .information-tab {
    background-color: #6FD94330;
}

body.theme-4 .information-tab {
    background-color: #14538830;
}

/* Theme 4 Primary Background */
body.theme-4 .bg-primary {
    background: linear-gradient(135deg, #004aad 0%, #003d8a 100%) !important;
    color: #ffffff !important;
}

/* Theme 4 Additional Elements */
body.theme-4 .btn-primary {
    background: linear-gradient(135deg, #004aad 0%, #003d8a 100%) !important;
    border-color: #004aad !important;
    color: #ffffff !important;
}

body.theme-4 .btn-primary:hover {
    background: linear-gradient(135deg, #003d8a 0%, #002d6b 100%) !important;
    border-color: #003d8a !important;
    color: #ffffff !important;
}

body.theme-4 .text-primary {
    color: #004aad !important;
}

body.theme-4 .card-header {
    background: linear-gradient(135deg, #004aad 0%, #003d8a 100%) !important;
    color: #ffffff !important;
}

body.theme-4 .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #004aad 0%, #003d8a 100%) !important;
    color: #ffffff !important;
}

body.theme-4 .badge.bg-primary {
    background: linear-gradient(135deg, #004aad 0%, #003d8a 100%) !important;
    color: #ffffff !important;
}

body.theme-4 .progress-bar {
    background: linear-gradient(90deg, #004aad 0%, #003d8a 100%) !important;
}

body.theme-4 .form-control:focus,
body.theme-4 .form-select:focus {
    border-color: #004aad !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 173, 0.25) !important;
}

body.theme-4 .form-check-input:checked {
    background-color: #004aad !important;
    border-color: #004aad !important;
}

body.theme-5 .information-tab {
    background-color: #B9406B30;
}

body.theme-6 .information-tab {
    background-color: #008ECC30;
}

body.theme-7 .information-tab {
    background-color: #922C8830;
}

body.theme-8 .information-tab {
    background-color: #C0A14530;
}

body.theme-9 .information-tab {
    background-color: #48494B30;
}

body.theme-10 .information-tab {
    background-color: #0C778530;
}

.information-tab .nav-item .nav-link {
    background-color: #FFFFFF;
}

.information-tab>.nav-item>a>.nav-link.active {
    border-radius: 4px !important;
}

.information-tab>.nav-item>a>.nav-link:focus,
.information-tab>.nav-item>a>.nav-link.active,
.information-tab>.nav-item>a>.show>.nav-link {
    border-radius: 4px !important;
}

.information-tab>.nav-item>a>.nav-link.active,
.nav-pills .show>.nav-link,
.nav-pills .nav-link:focus {
    border-radius: 4px !important;
}

/* hrm system setup tab */

/* IMPORT DATA TABLE SELECT CSS */

.import-data-table select{
    width: auto;
    padding-right: 35px;
    min-width: 100%;
}

/* IMPORT DATA TABLE SELECT CSS */

.btn-addnew-project .proj-add-icon {
    border-radius: 5px !important;
}

/* report payroll status css */

.payroll-set{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding: 0.5rem !important;
    width: 35%;
}

.payroll-status{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding: 0.5rem !important;
}

/* report payroll status css */

/* on board status css */

.onboard-status{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding: 0.5rem !important;
    width: 35%;
}

/* on board status css */

/* contract status css */

.contract-status{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding: 0.5rem !important;
    width: 50%;
}

/* contract status css */

/* zoommeeting status css */

.zoommeeting-status{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding: 0.5rem !important;
    width: 40%;
}

/* zoommeeting status css */

/* Payslip design css */

.flex-1{
    flex: 1;
}
.row-gap-1{
    row-gap: 20px;
}

/* Payslip design css */

/* Enhanced Sidebar and Submenu Styles */
.dash-sidebar {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    border-right: 1px solid #e9ecef;
}

.dash-navbar {
    padding: 0;
}

.dash-item {
    margin: 2px 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.dash-item:hover {
    transform: translateX(2px);
}

.dash-link {
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #495057;
    position: relative;
    overflow: hidden;
}

.dash-link:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    color: #212529;
    text-decoration: none;
}

.dash-item.active .dash-link {
    background: linear-gradient(135deg, #004aad 0%, #0056b3 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 74, 173, 0.3);
}

.dash-item.active .dash-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #fda912;
}

.dash-micon {
    margin-right: 12px;
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.dash-mtext {
    font-size: 14px;
    font-weight: 500;
}

.dash-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.dash-item.dash-hasmenu.dash-trigger .dash-arrow {
    transform: rotate(180deg);
}

/* Enhanced Submenu Styles */
.dash-submenu {
    background: rgba(248, 249, 250, 0.8);
    border-radius: 8px;
    margin: 4px 0;
    padding: 8px 0;
    border-left: 3px solid #e9ecef;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dash-submenu {
    min-width: 200px;
}

.dash-submenu .dash-item {
    margin: 1px 0;
    padding: 0 8px;
}

.dash-submenu .dash-link {
    padding: 10px 16px 10px 32px;
    font-size: 13px;
    color: #6c757d;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Cairo', sans-serif;
    display: flex;
    align-items: center;
}

.dash-submenu .dash-link::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #adb5bd;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dash-submenu .dash-item.active .dash-link::before {
    background: #004aad;
    width: 8px;
    height: 8px;
}

.dash-submenu .dash-link:hover {
    background: rgba(0, 74, 173, 0.1);
    color: #004aad;
    padding-left: 36px;
}

.dash-submenu .dash-item.active .dash-link {
    background: rgba(0, 74, 173, 0.15);
    color: #004aad;
    font-weight: 600;
}

/* Nested Submenu */
.dash-submenu .dash-submenu {
    background: rgba(233, 236, 239, 0.6);
    margin: 2px 0;
    border-left: 2px solid #dee2e6;
    min-width: 200px;
}

/* Sidebar Section Headers */
.dash-section-header {
    padding: 15px 20px 8px 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    border-bottom: 1px solid rgba(108, 117, 125, 0.2);
    margin-bottom: 10px;
    font-family: 'Cairo', sans-serif;
}

.dash-section-header:first-child {
    margin-top: 0;
}

.dash-section-header:not(:first-child) {
    margin-top: 20px;
}

.dash-submenu .dash-submenu .dash-link {
    padding-left: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Cairo', sans-serif;
    display: flex;
    align-items: center;
}

.dash-submenu .dash-submenu .dash-link::before {
    left: 36px;
}

/* Logo and Header Improvements */
.dash-sidebar .main-logo {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dash-sidebar .m-header {
    background: transparent;
}

/* Scrollbar Styling */
.dash-sidebar .navbar-content::-webkit-scrollbar {
    width: 4px;
}

.dash-sidebar .navbar-content::-webkit-scrollbar-track {
    background: transparent;
}

.dash-sidebar .navbar-content::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 2px;
}

.dash-sidebar .navbar-content::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

/* APEX TECHNOLOGY Brand Colors - Blue Navy (#004aad) */
:root {
    --apex-primary: #004aad;
    --apex-secondary: #fda912;
    --apex-light: #e6efff;
    --apex-dark: #003d8a;
}

/* Icon Font Fixes */
.fa, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 900;
}

.ti, [class^="ti-"], [class*=" ti-"] {
    font-family: "tabler-icons" !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.feather {
    font-family: "feather" !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.material-icons {
    font-family: "Material Icons" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

/* Ensure icons display properly */
.dash-micon i {
    font-family: inherit !important;
}

.dash-micon .ti {
    font-family: "tabler-icons" !important;
}

.dash-micon .fa {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome" !important;
}

.dash-micon .feather {
    font-family: "feather" !important;
}

/* Additional icon fixes for all icon types */
[class*="icon-"] {
    font-family: inherit !important;
}

/* Ensure all icon elements maintain their font families */
i[class*="fa-"], 
i[class*="ti-"], 
i[class*="feather"],
i[class*="material-icons"],
span[class*="fa-"],
span[class*="ti-"],
span[class*="feather"],
span[class*="material-icons"] {
    font-family: inherit !important;
}

/* Specific fixes for common icon classes */
.fa-home, .fa-user, .fa-cog, .fa-bell, .fa-search, .fa-plus, .fa-edit, .fa-trash, .fa-eye, .fa-download, .fa-upload {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome" !important;
}

.ti-home, .ti-user, .ti-settings, .ti-bell, .ti-search, .ti-plus, .ti-edit, .ti-trash, .ti-eye, .ti-download, .ti-upload {
    font-family: "tabler-icons" !important;
}

/* Fix for dashboard icons */
.dash-micon i[class*="ti-"] {
    font-family: "tabler-icons" !important;
}

.dash-micon i[class*="fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* Global icon fixes - Override any font-family conflicts */
i, .icon, [class*="icon-"] {
    font-family: inherit !important;
}

/* Force icon fonts for specific elements */
i.fa, i[class*="fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome", sans-serif !important;
}

i.ti, i[class*="ti-"] {
    font-family: "tabler-icons", sans-serif !important;
}

i.feather, i[class*="feather"] {
    font-family: "feather", sans-serif !important;
}

i.material-icons, i[class*="material-icons"] {
    font-family: "Material Icons", sans-serif !important;
}

/* Ensure dashboard menu icons work */
.dash-micon i {
    font-family: inherit !important;
}

.dash-micon i.ti-home {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-user {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-users {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-receipt {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-clock {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-3d-cube-sphere {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-wallet {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-school {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-user-plus {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-license {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-device-floppy {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-ticket {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-calendar-event {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-calendar-time {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-video {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-medical-cross {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-file {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-pray {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-messages {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-table {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-settings {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-arrow-down-right-circle {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-gift {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-shopping-cart {
    font-family: "tabler-icons", sans-serif !important;
}

.dash-micon i.ti-chart-bar {
    font-family: "tabler-icons", sans-serif !important;
}

/* Professional Table Styles - Enhanced */
.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 0;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 74, 173, 0.08);
    border: 1px solid rgba(0, 74, 173, 0.1);
    font-family: 'Cairo', sans-serif;
}

.table thead th {
    background: linear-gradient(135deg, #004aad 0%, #003d8f 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    padding: 20px 16px;
    border: none;
    text-align: center;
    position: relative;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Cairo', sans-serif;
}

.table thead th:first-child {
    border-top-left-radius: 16px;
}

.table thead th:last-child {
    border-top-right-radius: 16px;
}

.table thead th::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #fda912 0%, #ff8c00 50%, #fda912 100%);
    opacity: 0.8;
}

.table thead th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* Sortable column indicators */
.table thead th.sortable {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.table thead th.sortable:hover {
    background: linear-gradient(135deg, #003d8f 0%, #002d6b 100%);
    transform: translateY(-1px);
}

.table thead th.sortable::after {
    content: '↕';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.table thead th.sortable:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* Table header icons styling */
.table thead th i {
    font-size: 16px;
    opacity: 0.9;
    transition: all 0.3s ease;
    vertical-align: middle;
}

.table thead th:hover i {
    opacity: 1;
    transform: scale(1.1);
    color: #fda912;
}

.table tbody tr {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(0, 74, 173, 0.08);
    position: relative;
    background: #ffffff;
}

.table tbody tr:nth-child(even) {
    background: linear-gradient(135deg, rgba(0, 74, 173, 0.02) 0%, rgba(253, 169, 18, 0.01) 100%);
}

.table tbody tr:hover {
    background: rgba(0, 74, 173, 0.05);
    transform: none;
    box-shadow: none;
    border-left: none;
    z-index: 1;
}

/* Removed hover effects */

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

.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 16px;
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
}

.table tbody td {
    padding: 18px 16px;
    vertical-align: middle;
    border: none;
    font-size: 14px;
    color: #2c3e50;
    text-align: center;
    position: relative;
    font-weight: 500;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.table tbody td:first-child {
    font-weight: 700;
    color: #004aad;
    text-align: right;
    padding-right: 20px;
}

.table tbody td:last-child {
    padding-left: 20px;
}

/* Status badges styling */
.table tbody td .badge {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table tbody td .badge.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.table tbody td .badge.bg-warning {
    background: linear-gradient(135deg, #fda912 0%, #ff8c00 100%) !important;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(253, 169, 18, 0.3);
}

.table tbody td .badge.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%) !important;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.table tbody td .badge.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%) !important;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

/* Action buttons in tables */
.table .Action {
    text-align: center;
    white-space: nowrap;
    padding: 8px 12px;
    min-width: 120px;
}

.table .action-btn {
    display: inline-block;
    margin: 0 3px;
    position: relative;
    vertical-align: middle;
}

/* Ensure action buttons stay inline */
.table .dt-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
}

.table .dt-buttons span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.table .action-btn .btn {
    padding: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-family: 'Cairo', sans-serif;
}

.table .action-btn .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.table .action-btn .btn:hover::before {
    transform: translateX(100%);
}

.table .action-btn .btn:hover {
    transform: none;
    box-shadow: none;
}

.table .action-btn .btn:active {
    transform: translateY(-1px) scale(1.02);
    transition: all 0.1s ease;
}

.table .action-btn .btn i {
    font-size: 16px;
    transition: all 0.3s ease;
}

.table .action-btn .btn:hover i {
    transform: scale(1.1);
}

/* Enhanced action button styles with better visual hierarchy */
.table .action-btn .btn {
    position: relative;
    z-index: 1;
}

.table .action-btn .btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    z-index: -1;
}

.table .action-btn .btn:hover::after {
    width: 100%;
    height: 100%;
}

/* Tooltip enhancement for action buttons */
.table .action-btn .btn[data-bs-toggle="tooltip"] {
    position: relative;
}

.table .action-btn .btn[data-bs-toggle="tooltip"]:hover {
    z-index: 1000;
}

/* Focus states for accessibility */
.table .action-btn .btn:focus {
    outline: 2px solid #004aad;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 74, 173, 0.2);
}

/* Disabled state */
.table .action-btn .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.table .action-btn .btn:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Special action button variants */
.table .action-btn .btn.btn-edit {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

.table .action-btn .btn.btn-edit:hover {
    background: linear-gradient(135deg, #138496 0%, #5a32a3 100%);
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.4);
}

.table .action-btn .btn.btn-delete {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.table .action-btn .btn.btn-delete:hover {
    background: linear-gradient(135deg, #c82333 0%, #d63384 100%);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
}

.table .action-btn .btn.btn-view {
    background: linear-gradient(135deg, #fda912 0%, #ff8c00 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(253, 169, 18, 0.3);
}

.table .action-btn .btn.btn-view:hover {
    background: linear-gradient(135deg, #e0990f 0%, #e67e00 100%);
    box-shadow: 0 8px 25px rgba(253, 169, 18, 0.4);
}

/* Loading state for action buttons */
.table .action-btn .btn.loading {
    position: relative;
    color: transparent !important;
}

.table .action-btn .btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Fix for action buttons stacking issue */
.table tbody td.Action {
    vertical-align: middle;
    text-align: center;
}

.table tbody td.Action .dt-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
}

.table tbody td.Action .dt-buttons span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Force inline display for action buttons */
.table .action-btn {
    display: inline-flex !important;
    vertical-align: middle;
    margin: 0 2px;
}

/* Enhanced responsive design for tables */
@media (max-width: 1200px) {
    .table thead th {
        padding: 16px 12px;
        font-size: 14px;
    }
    
    .table tbody td {
        padding: 16px 12px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .table {
        border-radius: 12px;
        font-size: 13px;
    }
    
    .table thead th {
        padding: 12px 8px;
        font-size: 12px;
        letter-spacing: 0.3px;
    }
    
    .table tbody td {
        padding: 12px 8px;
        font-size: 12px;
    }
    
    .table .Action {
        min-width: 100px;
        padding: 4px 8px;
    }
    
    .table .action-btn {
        margin: 0 1px;
    }
    
    .table .action-btn .btn {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .table .action-btn .btn i {
        font-size: 12px;
    }
    
    .table tbody tr:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (max-width: 576px) {
    .table {
        border-radius: 8px;
        font-size: 12px;
    }
    
    .table thead th {
        padding: 10px 6px;
        font-size: 11px;
    }
    
    .table tbody td {
        padding: 10px 6px;
        font-size: 11px;
    }
    
    .table .Action {
        min-width: 80px;
        padding: 2px 4px;
    }
    
    .table .action-btn .btn {
        min-width: 28px;
        height: 28px;
        font-size: 11px;
    }
    
    .table .action-btn .btn i {
        font-size: 11px;
    }
}

/* Print styles for tables */
@media print {
    .table {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .table thead th {
        background: #f8f9fa !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
    }
    
    .table tbody tr {
        break-inside: avoid;
    }
    
    .table .action-btn {
        display: none;
    }
}

/* Specific action button colors with APEX branding */
.table .btn-outline-primary {
    background: linear-gradient(135deg, rgba(0, 74, 173, 0.1) 0%, rgba(0, 74, 173, 0.05) 100%);
    color: #004aad;
    border: 2px solid rgba(0, 74, 173, 0.2);
    box-shadow: 0 2px 8px rgba(0, 74, 173, 0.1);
}

.table .btn-outline-primary:hover {
    background: #004aad;
    color: #ffffff;
    border-color: #004aad;
    box-shadow: none;
}

.table .btn-sm.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.table .btn-sm.bg-success:hover {
    background: #28a745 !important;
    box-shadow: none;
}

.table .btn-sm.bg-warning {
    background: linear-gradient(135deg, #fda912 0%, #ff8c00 100%) !important;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(253, 169, 18, 0.3);
}

.table .btn-sm.bg-warning:hover {
    background: #fda912 !important;
    box-shadow: none;
}

.table .btn-sm.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%) !important;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.table .btn-sm.bg-danger:hover {
    background: #dc3545 !important;
    box-shadow: none;
}

.table .btn-sm.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%) !important;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

.table .btn-sm.bg-info:hover {
    background: #17a2b8 !important;
    box-shadow: none;
}

/* Table responsive wrapper - Enhanced */
.table-responsive {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 74, 173, 0.08);
    background: #ffffff;
    border: 1px solid rgba(0, 74, 173, 0.1);
    position: relative;
}

.table-responsive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #004aad 0%, #fda912 50%, #004aad 100%);
    z-index: 1;
}

/* Table loading state */
.table-loading {
    position: relative;
    overflow: hidden;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 74, 173, 0.1) 50%, transparent 100%);
    animation: shimmer 2s infinite;
    z-index: 5;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Empty state styling */
.table-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
    background: linear-gradient(135deg, rgba(0, 74, 173, 0.02) 0%, rgba(253, 169, 18, 0.01) 100%);
}

.table-empty-state i {
    font-size: 48px;
    color: #004aad;
    margin-bottom: 16px;
    opacity: 0.6;
}

.table-empty-state h4 {
    color: #004aad;
    font-weight: 600;
    margin-bottom: 8px;
}

.table-empty-state p {
    color: #6c757d;
    font-size: 14px;
}

/* Card wrapper for tables */
.card .card-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid #e9ecef;
    padding: 20px 24px;
}

/* Dashboard Cards Grid Layout Enhancement */
.dash-info-card {
    margin-bottom: 2rem;
    position: relative;
}

/* Card Hover Effects - Enhanced */
.dash-info-card:hover {
    cursor: pointer;
}

.dash-info-card:hover .card-body.stats h3 {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Card Progress Indicators */
.dash-info-card .card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 74, 173, 0.1);
    border-radius: 0 0 20px 20px;
    overflow: hidden;
}

.dash-info-card .card-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--apex-primary) 0%, var(--apex-secondary) 100%);
    border-radius: 0 0 20px 20px;
    transition: width 0.8s ease;
    position: relative;
}

.dash-info-card .card-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: progressShine 2s infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Card Value Animations */
.dash-info-card .card-body.stats h3 {
    transition: all 0.3s ease;
}

.dash-info-card:hover .card-body.stats h3 {
    text-shadow: 0 4px 8px rgba(0, 74, 173, 0.2);
}

/* Card Icon Animations */
.dash-info-card .theme-avtar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-info-card:hover .theme-avtar {
    animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) scale(1.1) rotate(5deg);
    }
    40% {
        transform: translateY(-10px) scale(1.15) rotate(8deg);
    }
    60% {
        transform: translateY(-5px) scale(1.12) rotate(6deg);
    }
}

/* Card Text Animations */
.dash-info-card .card-body.stats .text-muted {
    transition: all 0.3s ease;
}

.dash-info-card:hover .card-body.stats .text-muted {
    color: var(--apex-primary);
    transform: translateX(5px);
}

/* Card Background Patterns */
.dash-info-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 74, 173, 0.03) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.dash-info-card:hover::after {
    opacity: 1;
}

/* Card Border Glow Effect */
.dash-info-card {
    position: relative;
}

.dash-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-secondary) 50%, var(--apex-primary) 100%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dash-info-card:hover::before {
    opacity: 1;
}

/* Card Content Fade In Animation */
.dash-info-card .card-body > * {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.dash-info-card .card-body .d-flex {
    animation-delay: 0.1s;
}

.dash-info-card .card-body .text-muted {
    animation-delay: 0.2s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Stats Counter Animation */
.dash-info-card .card-body.stats h3 {
    counter-reset: number;
}

.dash-info-card .card-body.stats h3::before {
    content: counter(number);
    counter-increment: number;
    animation: countUp 2s ease-out;
}

@keyframes countUp {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Card Responsive Enhancements */
@media (max-width: 1200px) {
    .dash-info-card {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 992px) {
    .dash-info-card .card-body {
        padding: 1.5rem;
    }
    
    .dash-info-card .card-body.stats h3 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .dash-info-card {
        margin-bottom: 1rem;
    }
    
    .dash-info-card .card-body.stats {
        min-height: 120px;
    }
}

/* Card Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .dash-info-card {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .dash-info-card .card-body.stats h6 {
        color: #ecf0f1;
    }
    
    .dash-info-card .card-body.stats .text-muted {
        color: #bdc3c7;
    }
}

/* Card Print Styles */
@media print {
    .dash-info-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .dash-info-card:hover {
        transform: none;
        box-shadow: none;
    }
}

.card .card-header.card-body {
    padding: 0;
}

.card .card-header.card-body .table-responsive {
    box-shadow: none;
    border-radius: 0;
}

/* Empty state for tables */
.table tbody tr td[colspan] {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-style: italic;
}

/* Loading state for tables */
.table-loading {
    position: relative;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Status badges in tables */
.table .badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table .badge.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.table .badge.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%) !important;
}

.table .badge.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%) !important;
}

.table .badge.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%) !important;
}

.table .badge.bg-primary {
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%) !important;
}

/* Avatar in tables */
.table .theme-avtar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%);
}

/* DataTables customization */
.dataTables_wrapper {
    padding: 0;
}

.dataTables_filter {
    margin-bottom: 20px;
}

.dataTables_filter input {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.dataTables_filter input:focus {
    border-color: var(--apex-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 173, 0.25);
    outline: none;
}

.dataTables_length select {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.dataTables_length select:focus {
    border-color: var(--apex-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 173, 0.25);
    outline: none;
}

.dataTables_info {
    color: #6c757d;
    font-size: 14px;
    margin-top: 16px;
}

.dataTables_paginate {
    margin-top: 20px;
}

.dataTables_paginate .paginate_button {
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin: 0 2px !important;
    color: var(--apex-primary) !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
}

.dataTables_paginate .paginate_button:hover {
    background: var(--apex-light) !important;
    border-color: var(--apex-primary) !important;
    color: var(--apex-dark) !important;
}

.dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%) !important;
    border-color: var(--apex-primary) !important;
    color: #ffffff !important;
}

/* Mobile responsive tables */
@media (max-width: 768px) {
    .table thead th,
    .table tbody td {
        padding: 12px 8px;
        font-size: 13px;
    }
    
    .table .action-btn .btn {
        padding: 0;
        font-size: 13px;
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    
    .table .action-btn .btn i {
        font-size: 14px;
    }
    
    .table-responsive {
        border-radius: 8px;
    }
}

/* Primary Button Styles */
.btn-primary {
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%);
    border-color: var(--apex-primary);
    color: #ffffff;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--apex-dark) 0%, var(--apex-primary) 100%);
    border-color: var(--apex-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 74, 173, 0.3);
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 173, 0.25);
}

/* Card Headers */
.card-header {
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%);
    color: #ffffff;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.card-header h5,
.card-header h6 {
    color: #ffffff;
    margin: 0;
    font-weight: 600;
}

/* Card header text color - Force white color */
.card .card-header h5, 
.card .card-header .h5 {
    color: #ffffff !important;
}

/* Navigation Active States */
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%);
    color: #ffffff;
}

/* Badge Styles */
.badge.bg-primary {
    background: var(--apex-primary) !important;
}

/* Progress Bars */
.progress-bar {
    background: linear-gradient(90deg, var(--apex-primary) 0%, var(--apex-dark) 100%);
}

/* Form Controls Focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--apex-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 173, 0.25);
}

/* Checkbox and Radio */
.form-check-input:checked {
    background-color: var(--apex-primary);
    border-color: var(--apex-primary);
}

/* Links */
a {
    color: var(--apex-primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--apex-dark);
}

/* Dashboard Stats Cards - Enhanced Design */
.dash-info-card {
    border: none;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 20px rgba(0, 74, 173, 0.08);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dash-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--apex-primary) 0%, var(--apex-secondary) 50%, var(--apex-primary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dash-info-card:hover::before {
    opacity: 1;
}

.dash-info-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 74, 173, 0.2);
    border-color: rgba(0, 74, 173, 0.1);
}

.dash-info-card .card-body {
    padding: 2rem;
    position: relative;
    z-index: 2;
}

/* Card Content Layout */
.dash-info-card .card-body.stats {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 140px;
}

.dash-info-card .card-body.stats .d-flex {
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* Card Numbers - Enhanced */
.dash-info-card .card-body.stats h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 74, 173, 0.1);
    font-family: 'Cairo', sans-serif;
}

/* Card Icons - Enhanced */
.dash-info-card .theme-avtar {
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%);
    color: #ffffff;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 74, 173, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.dash-info-card .theme-avtar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.dash-info-card:hover .theme-avtar::before {
    transform: translateX(100%);
}

.dash-info-card .theme-avtar i {
    color: #ffffff;
    font-size: 24px;
    z-index: 2;
    position: relative;
    transition: all 0.3s ease;
}

.dash-info-card:hover .theme-avtar {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 30px rgba(0, 74, 173, 0.4);
}

.dash-info-card:hover .theme-avtar i {
    transform: scale(1.1);
}

/* Card Text - Enhanced */
.dash-info-card .card-body.stats .text-muted {
    text-align: right;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
    font-family: 'Cairo', sans-serif;
}

.dash-info-card .card-body.stats h6 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    font-family: 'Cairo', sans-serif;
}

.dash-info-card .card-body.stats h6 a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.dash-info-card .card-body.stats h6 a:hover {
    color: var(--apex-primary);
}

/* Card Links - Enhanced */
.dash-info-card .card-body.stats h6 a,
.dash-info-card.appoint-dash .stats h5 a {
    color: #2c3e50;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.dash-info-card .card-body.stats h6 a::after,
.dash-info-card.appoint-dash .stats h5 a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--apex-primary) 0%, var(--apex-secondary) 100%);
    transition: width 0.3s ease;
}

.dash-info-card .card-body.stats h6 a:hover::after,
.dash-info-card.appoint-dash .stats h5 a:hover::after {
    width: 100%;
}

.dash-info-card .card-body.stats h6 a:hover,
.dash-info-card.appoint-dash .stats h5 a:hover {
    color: var(--apex-primary);
    transform: translateX(2px);
}

/* Card Animation on Load */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dash-info-card {
    animation: cardSlideIn 0.6s ease-out;
}

.dash-info-card:nth-child(1) { animation-delay: 0.1s; }
.dash-info-card:nth-child(2) { animation-delay: 0.2s; }
.dash-info-card:nth-child(3) { animation-delay: 0.3s; }
.dash-info-card:nth-child(4) { animation-delay: 0.4s; }
.dash-info-card:nth-child(5) { animation-delay: 0.5s; }
.dash-info-card:nth-child(6) { animation-delay: 0.6s; }

/* Card Status Indicators */
.dash-info-card .card-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #28a745;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* Card Loading State */
.dash-info-card.loading {
    position: relative;
    overflow: hidden;
}

.dash-info-card.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Responsive Design for Cards */
@media (max-width: 768px) {
    .dash-info-card .card-body {
        padding: 1.5rem;
    }
    
    .dash-info-card .card-body.stats h3 {
        font-size: 2rem;
    }
    
    .dash-info-card .theme-avtar {
        width: 50px;
        height: 50px;
    }
    
    .dash-info-card .theme-avtar i {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .dash-info-card .card-body {
        padding: 1rem;
    }
    
    .dash-info-card .card-body.stats h3 {
        font-size: 1.8rem;
    }
    
    .dash-info-card .theme-avtar {
        width: 45px;
        height: 45px;
    }
    
    .dash-info-card .theme-avtar i {
        font-size: 18px;
    }
}

/* Table Styles */
.table thead th {
    background: var(--apex-light);
    color: var(--apex-dark);
    border-bottom: 2px solid var(--apex-primary);
    font-weight: 600;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 74, 173, 0.05);
}

/* Employee Detail Cards - Enhanced Design */
.employee-detail-card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 74, 173, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: 'Cairo', sans-serif;
}

.employee-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--apex-primary) 0%, var(--apex-secondary) 50%, var(--apex-primary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.employee-detail-card:hover::before {
    opacity: 1;
}

.employee-detail-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 74, 173, 0.2);
    border-color: rgba(0, 74, 173, 0.1);
}

/* Card Headers */
.employee-detail-card .card-header {
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%);
    border: none;
    border-radius: 20px 20px 0 0;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.employee-detail-card .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.employee-detail-card:hover .card-header::before {
    transform: translateX(100%);
}

.employee-detail-card .card-header .d-flex {
    position: relative;
    z-index: 2;
}

/* Card Icons */
.employee-detail-card .card-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.employee-detail-card .card-icon i {
    font-size: 24px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.employee-detail-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}

.employee-detail-card:hover .card-icon i {
    transform: scale(1.1);
}

/* Card Titles */
.employee-detail-card .card-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    font-family: 'Cairo', sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Card Body */
.employee-detail-card .card-body {
    padding: 2rem;
    background: #ffffff;
    position: relative;
    z-index: 2;
}

/* Info Items */
.employee-detail-card .info-item {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid rgba(0, 74, 173, 0.05);
    transition: all 0.3s ease;
}

.employee-detail-card .info-item:hover {
    background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);
    border-color: rgba(0, 74, 173, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 74, 173, 0.1);
}

.employee-detail-card .info-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--apex-primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Cairo', sans-serif;
}

.employee-detail-card .info-value {
    font-size: 0.95rem;
    color: #2c3e50;
    font-weight: 500;
    line-height: 1.4;
    font-family: 'Cairo', sans-serif;
}

/* Document Links */
.employee-detail-card .document-link {
    color: var(--apex-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    background: rgba(0, 74, 173, 0.05);
    transition: all 0.3s ease;
    font-weight: 500;
}

.employee-detail-card .document-link:hover {
    color: var(--apex-dark);
    background: rgba(0, 74, 173, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 74, 173, 0.2);
}

.employee-detail-card .document-link i {
    font-size: 14px;
}

/* Empty State */
.employee-detail-card .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.employee-detail-card .empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.employee-detail-card .empty-state p {
    font-size: 1rem;
    margin: 0;
    font-style: italic;
    font-family: 'Cairo', sans-serif;
}

/* Card Type Specific Colors */
.employee-detail-card.personal-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.employee-detail-card.company-card .card-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.employee-detail-card.document-card .card-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.employee-detail-card.bank-card .card-header {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .employee-detail-card .card-body {
        padding: 1.5rem;
    }
    
    .employee-detail-card .card-header {
        padding: 1rem;
    }
    
    .employee-detail-card .card-icon {
        width: 40px;
        height: 40px;
        margin-left: 10px;
    }
    
    .employee-detail-card .card-icon i {
        font-size: 20px;
    }
    
    .employee-detail-card .card-title {
        font-size: 1.1rem;
    }
    
    .employee-detail-card .info-item {
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .employee-detail-card .card-body {
        padding: 1rem;
    }
    
    .employee-detail-card .card-header {
        padding: 0.75rem;
    }
    
    .employee-detail-card .card-icon {
        width: 35px;
        height: 35px;
        margin-left: 8px;
    }
    
    .employee-detail-card .card-icon i {
        font-size: 18px;
    }
    
    .employee-detail-card .card-title {
        font-size: 1rem;
    }
}

/* Animation for card loading */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.employee-detail-card {
    animation: cardFadeIn 0.6s ease-out;
}

.employee-detail-card:nth-child(1) { animation-delay: 0.1s; }
.employee-detail-card:nth-child(2) { animation-delay: 0.2s; }
.employee-detail-card:nth-child(3) { animation-delay: 0.3s; }
.employee-detail-card:nth-child(4) { animation-delay: 0.4s; }

/* Modal Styles */
.modal-header {
    background: linear-gradient(135deg, var(--apex-primary) 0%, var(--apex-dark) 100%);
    color: #ffffff;
    border-bottom: none;
}

.modal-header .btn-close {
    filter: invert(1);
}

/* Alert Styles */
.alert-primary {
    background-color: var(--apex-light);
    border-color: var(--apex-primary);
    color: var(--apex-dark);
}

/* Breadcrumb */
.breadcrumb-item.active {
    color: var(--apex-primary);
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--apex-primary);
    border-color: var(--apex-primary);
}

.page-link {
    color: var(--apex-primary);
}

.page-link:hover {
    color: var(--apex-dark);
    background-color: var(--apex-light);
    border-color: var(--apex-primary);
}

/* Dropdown */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--apex-light);
    color: var(--apex-dark);
}

/* Tabs */
.nav-tabs .nav-link.active {
    background-color: var(--apex-primary);
    border-color: var(--apex-primary) var(--apex-primary) #fff;
    color: #ffffff;
}

.nav-tabs .nav-link:hover {
    border-color: var(--apex-light) var(--apex-light) var(--apex-primary);
    color: var(--apex-dark);
}

/* Header Styles */
.dash-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid var(--apex-light);
    box-shadow: 0 2px 4px rgba(0, 74, 173, 0.1);
}

/* Footer */
.dash-footer {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-top: 1px solid var(--apex-light);
    color: var(--apex-dark);
}

/* Loading and Animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 74, 173, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 74, 173, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 74, 173, 0);
    }
}

.btn-primary:active {
    animation: pulse 0.6s;
}

/* Advanced Table Enhancements */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 74, 173, 0.02);
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff;
}

/* Table sorting indicators */
.table thead th.sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.table thead th.sortable:hover {
    background: linear-gradient(135deg, var(--apex-dark) 0%, var(--apex-primary) 100%);
}

.table thead th.sortable::before {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid rgba(255, 255, 255, 0.6);
    opacity: 0.5;
}

.table thead th.sortable::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.6);
    opacity: 0.5;
    margin-top: 2px;
}

.table thead th.sorting_asc::before {
    opacity: 1;
}

.table thead th.sorting_desc::after {
    opacity: 1;
}

/* Table row selection */
.table tbody tr.selectable {
    cursor: pointer;
}

.table tbody tr.selected {
    background: linear-gradient(135deg, rgba(0, 74, 173, 0.1) 0%, rgba(0, 74, 173, 0.05) 100%);
    border-left: 4px solid var(--apex-primary);
}

/* Table animations */
@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.table tbody tr {
    animation: fadeInRow 0.3s ease-out;
}

/* Table search enhancement */
.table-search-container {
    position: relative;
    margin-bottom: 20px;
}

.table-search-container .search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.table-search-container .search-input:focus {
    border-color: var(--apex-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 173, 0.25);
    outline: none;
}

.table-search-container .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 16px;
}

/* Table export buttons */
.table-export-buttons {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.table-export-buttons .btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.table-export-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Table loading spinner */
.table-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--apex-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Table empty state */
.table-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.table-empty-state .empty-icon {
    font-size: 48px;
    color: #dee2e6;
    margin-bottom: 16px;
}

.table-empty-state .empty-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

.table-empty-state .empty-description {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 24px;
}

/* Table filters */
.table-filters {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.table-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.table-filters .filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-filters .filter-group select,
.table-filters .filter-group input {
    padding: 8px 12px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.3s ease;
}

.table-filters .filter-group select:focus,
.table-filters .filter-group input:focus {
    border-color: var(--apex-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 173, 0.25);
    outline: none;
}

/* Table bulk actions */
.table-bulk-actions {
    background: var(--apex-light);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: none;
    align-items: center;
    gap: 12px;
    border-left: 4px solid var(--apex-primary);
}

.table-bulk-actions.show {
    display: flex;
}

.table-bulk-actions .bulk-info {
    font-size: 14px;
    color: var(--apex-dark);
    font-weight: 500;
}

.table-bulk-actions .btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

/* Table responsive improvements */
@media (max-width: 576px) {
    .table {
        font-size: 12px;
    }
    
    .table thead th,
    .table tbody td {
        padding: 8px 6px;
    }
    
    .table .action-btn .btn {
        padding: 0;
        font-size: 12px;
        min-width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    
    .table .action-btn .btn i {
        font-size: 13px;
    }
    
    .table .action-btn {
        margin: 0 2px;
    }
    
    .table-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .table-export-buttons {
        justify-content: center;
    }
}

/* Table hover effects for touch devices */
@media (hover: none) {
    .table tbody tr:hover {
        background: transparent;
        transform: none;
        box-shadow: none;
    }
    
    .table tbody tr:active {
        background: linear-gradient(135deg, rgba(0, 74, 173, 0.1) 0%, rgba(0, 74, 173, 0.05) 100%);
    }
}