:root{
    --black: #181919;
    --white: #FFFFFF;
    --dark: #9d9999;
    --body-color: #0e0f0f;
    --primary: #13601d;
    --table-color: #DEE2E6;
    --gray-200: #313131;
    --gray-light: #474545;
    --font-color: #7c7a7a;
    --body-font-color: #9d9999;
    --body-font-dark: #9d9999;
    --primary-dark: #fdd540;
}
/* :root{
    --black: #181919;
    --white: #FFFFFF;
    --dark: #9d9999;
    --body-color: #0e0f0f;
    --primary: #6CBE45;
    --table-color: #DEE2E6;
    --gray-200: #313131;
    --gray-light: #474545;
    --font-color: #7c7a7a;
    --body-font-color: #e2e2e2;
    --body-font-dark: #c6c6c6;
} */
*{
    scrollbar-color: var(--primary);
}
body.dark-mode{
    background-color: var(--body-color);
    color: var(--body-font-dark);
}
.authentication-form{
    padding: 30px 70px;
    box-shadow: 0px 0px 5px -3px #000;
    border-radius: 30px;
    border: 1px solid #DBDFE2;
    margin-top: 40px;
    background-color: #fff;

}
.account-pages .login-logo{
    width: 56%;
}
.text-primary{color: #13601d !important;}
body[data-sidebar-color="dark"] .text-primary{color: #fdd540 !important;}
.btn-primary{
    background-color: #13601d;
    border-color: #13601d;
}
.btn-primary:hover{
    background-color: #000;
    border-color: #000;
}
body[data-sidebar-color="dark"] .btn-primary{
    background-color: #13601d;
    border-color: #13601d;
    color: #fff;
}
.btn-warning{
    background-color: #fdd540;
    border-color: #fdd540;
}
body[data-sidebar-color="dark"] .btn-warning{
    color: var(--primary);
}
.btn-warning:hover{
    color: #13601d;
}
.form-check-input:checked{
    background-color: #fdd540;
    border-color: #fdd540;
}
/* .account-pages .forget-link{
    color: #6c757d;
}
.account-pages .forget-link:hover{
    color: #6CBE45;
} */
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
}
.button-menu-mobile i{font-size: 26px;}
.auth-user-testimonial h2{padding: 0px 0px;font-size: 38px;margin-bottom: 20px;}
.lead{font-size: 14px;font-weight: bold;color: #000;}
.text-dark{color: #000 !important;}
.h100{height: 100vh;}
.border-end{height: 100%;}
.profile-nav{
    background: transparent;
    border-radius: 0;
    /* padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px; */
    padding: 0px 20px;
}
.profile-nav  .nav-link.active, .profile-nav .show > .nav-link{
    box-shadow: none;
    border-top: 3px solid #13601d;
    border-radius: 0;
}
.employee-details label{color: #6c757d;}
.employee-details .employee-address-box{
    border: 1px solid #6c757d;
    position: relative;
    padding: 20px;
    margin-top: 25px;
}
.employee-details .employee-address-box .address-main-heading{
    position: absolute;
    top: -20px;
    left: 20px;
    background-color: #fff;
}
.employee-details h5 {
    font-size: 14px;
    margin-top: 3px;
    margin-bottom: 0px;
}
.employee-details .main-title{margin-bottom: 25px;}
.employe-profile p{margin-bottom: 5px;}
.employe-profile {margin-bottom: 20px;padding-left: 20px;}
.employe-list{
    border-bottom: 1px solid #efefef;
    display: flex;
    padding: 10px;
}
.employe-list-box{
    height: 680px;
    overflow-y: auto;
    overflow-x: hidden;
}
.employe-list.active{
    background-color: #efefef;
}
.employe-list:hover{
    background-color: #efefef;
}
.employe-list-card .card-body{
    padding-left: 13px;
    padding-right: 13px;
}
.employe-list .avatar{
    border-radius: 50%;
    width: 35px;
    height: 35px;
}
.employe-list p{
    font-size: 12px;
}
.employe-tab-content{
    padding-left: 20px;
    padding-right: 20px;
    /* overflow-y: auto; */
    /* height: 500px; */
}
.contact-admin .employe-tab-content{
    padding-left: 0px;
    padding-right: 0px;
    /* overflow-y: auto; */
    /* height: 500px; */
    padding-top: 0px;
}
.employe-list-box .label-1{padding-left: 20px; margin-bottom: 5px;}
.employe-list-box .label-2{padding-left: 25px;margin-bottom: 5px;}
.employe-list-card .search-area{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 0px 15px;
    margin-bottom: 15px;
}
.employe-list-card .search-area form{
    width: 100%;
}
.employe-list-card .search-area .filter{
    border: 1px solid #ced4da;
    padding: 0px 10px;
    font-size: 22px;
    border-radius: 0.25rem;
}
.other-icons{
    display: flex;
    gap: 10px;
    padding: 0px 15px;
    margin-bottom: 0px;
    align-items: center;
    justify-content: center;
}
.other-icons span{
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 16px;
    padding: 0px 5px;
}
.nav-second-level .menuitem-active {
    /* background-color: #151515; */
    /* background-color: #464646; */
    background-color: #13601d;
    /* background-color: #14361D; */
    color: var(--white);
    border-radius: 8px;
}
.nav-second-level .menuitem-active a{
    color: var(--white) !important;
}
.nav-second-level .menuitem-active .dash::before {
    border-color: var(--white);
}
body[data-sidebar-color="dark"] #sidebar-menu li:hover .nav-second-level li:hover .dash::before {
    border-color: var(--white);
}
.nav-second-level li {
    padding-left: 10px;
}

#sidebar-menu > ul > li ul{
    padding-left: 0px;
    padding-right: 0px;
}
#sidebar-menu #side-menu  .menuitem-active  a{
    background-color: #fff;
    color: #000;
    border-radius: 8px;
}
#sidebar-menu #side-menu  .menuitem-active  a {
    background-color: #13601d;
    color: #fff;
    border-radius: 8px;
}
#sidebar-menu .menuitem-active:hover .collapse .nav-second-level a{
    background-color: transparent;
    color: #4b4b5a;
}
#sidebar-menu #side-menu li .collapse .nav-second-level .menuitem-active  .active {
    background-color: #13601d;
    color: #fff;
}
#sidebar-menu #side-menu .collapse .nav-second-level  li a{
    color: #4b4b5a;
}
#sidebar-menu #side-menu  .collapse .nav-second-level  li:hover a{
    color: #fff;
}
#sidebar-menu #side-menu .collapse .nav-second-level  li{
    margin-top: 5px;
    transition: all 0.4s ease-in-out 0s;
}
#sidebar-menu #side-menu .collapsing .nav-second-level  li{
    margin-top: 5px;
    transition: all 0.4s ease-in-out 0s;
}
#sidebar-menu li{
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 8px;
}
#sidebar-menu > ul > li a{
    padding: 5px 6px;
    font-size: 13px;
    color: #fff;
    display: flex;
}
#sidebar-menu > ul > li > a i{font-size: 14px;}
#sidebar-menu li a:hover{
    background-color: #464646;
    border-radius: 8px;
}
#sidebar-menu li:hover a:first-child{
    background-color: #151515;
    border-radius: 8px;
}
#sidebar-menu li:hover a:first-child{
    /* background-color: #151515; */
    background-color: #13601d;
    border-radius: 8px;
    color: var(--white);
}
#sidebar-menu li:hover .nav-second-level li a:first-child{
    background-color: transparent;
    border-radius: 8px;
}
#sidebar-menu li:hover .nav-second-level li:hover {
    background-color: #464646 !important;
    /* background-color: #14361D !important; */
    border-radius: 8px;
}
#sidebar-menu #side-menu li .collapse .nav-second-level li a{
    color: #9097a7;
    background-color: transparent;
    display: flex;
}
#sidebar-menu #side-menu li .collapsing .nav-second-level li a{
    color: #fff;
    background-color: transparent;
}
.nav-second-level a {
    padding-left: 0px !important;
    padding-right: 20px !important;
}
.nav-second-level li {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* a{color: #1d1d1d;} */
a{color: #13601d;}
a:hover{color: #14361D;}
body[data-sidebar-color="dark"] a{color: #fdd540;}
body[data-sidebar-color="dark"] a:hover{color: var(--white);}
.red-btn{background-color: #b7040c;}
.green-btn{background-color: #13601d;}
.orange-btn{background-color: #ffa500;}
.purple-btn{background-color: #800080;}
.yellow-btn{background-color: #e1e11b;}
.sky-btn{background-color: #05c2c2;}
.red-btn:hover{background-color: #000;color:#fff;}
.green-btn:hover{background-color: #000;color:#fff;}
.orange-btn:hover{background-color: #000;color:#fff;}
.purple-btn:hover{background-color: #000;color:#fff;}
.yellow-btn:hover{background-color: #000;color:#fff;}
.sky-btn:hover{background-color: #000;color:#fff;}
.border-red{border-color: #b7040c;}
.border-green{border-color: #13601d;}
.border-orange{border-color: #ffa500;}
.border-purple{border-color: #800080;}
.border-yellow{border-color: #e1e11b;}
.border-sky{border-color: #05c2c2;}
.red-bg{background-color: #b7040c;}
.green-bg{background-color: #13601d;}
.orange-bg{background-color: #ffa500;}
.purple-bg{background-color: #800080;}
.yellow-bg{background-color: #e1e11b;}
.sky-bg{background-color: #05c2c2;}
.light-red-bg{background-color: #e6434b !important;}
.light-orange-bg{background-color: #ffb630 !important;}
.light-purple-bg{background-color: #772877 !important;}
.light-sky-bg{background-color: #3ab0b0 !important;}
.card-red{
    border-color: #b7040c;
    color: #b7040c;
}
.card-green{
    border-color: #13601d !important;
    color: #13601d;
}
.card-orange{
    border-color: #ffa500 !important;
    color: #ffa500;
}
.card-purple{
    border-color: #800080 !important;
    color: #800080;
}
.card-yellow{
    border-color: #e1e11b !important;
    color: #e1e11b;
}
.card-sky{
    border-color: #05c2c2 !important;
    color: #05c2c2;
}
.card-red .num{
    color: #b7040c;
}
.card-green .num{
    color: #13601d;
}
.card-orange .num{
    color: #ffa500;
}
.card-purple .num{
    color: #800080;
}
.card-yellow .num{
    color: #e1e11b;
}
.card-sky .num{
    color: #05c2c2;
}
.font-red{color: #b7040c;}
.font-green{color: #13601d;}
.font-orange{color: #ffa500;}
.font-purple{color: #800080;}
.font-yellow{color: #e1e11b;}
.font-sky{color: #05c2c2;}
.card-header{
    background-color: #fff;
}
.header-short{
    padding-top: 0px;
    padding-bottom: 0px;
}
.exception .card-height{
    height: 500px;
    overflow-y: auto;
}
.exception .exception-box {
    height: 100%;
}
.exception .exception-box .card{
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
}
.exception .exception-box .card .card-body{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.exception .exception-box .card .card-body .num{
    margin: 0px;
}
.exception .row > *{
    margin-bottom: 20px;
}
.emp-status table tbody td img{
    border-radius: 50%;
}
.emp-status table tbody tr{
    vertical-align: middle;
    width: 100%;
    display: inline-flex
}
.emp-status table tbody td .sec-time{
    font-size: 12px;
    white-space: nowrap;
}
.emp-status table thead tr{
    background-color: var(--black);
    /* color: #fff; */
}
.ac-dc{position: relative;}
.ac-dc::before{
    position: absolute;
    content: '\f148';
    font-family: bootstrap-icons !important;
    width: 1em;
    font-size: 12px;
    height: 1em;
    color: #fff;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
}
.ac-dc::after{
    position: absolute;
    content: '\f128';
    font-family: bootstrap-icons !important;
    width: 1em;
    left: 7px;
    top: 6px;
    font-size: 12px;
    height: 1em;
    color: #fff;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
}
.left-side-menu{width: 190px; background-color: #3d3d3d;}
.content-page{margin-left: 190px;padding: 0 5px 65px 5px;}
.logo-box{
    width: 190px;
    background-color: #fff;
    border-right: none;
    padding: 0;
}
.logo-box .logo-lg{padding: 0px 24px;}
.logo-box .logo-sm{padding: 0px 8px;}
.sch-status{text-transform: uppercase;}
.emp-status .table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.scrollable-body {
    display: block;
    max-height: 400px;  /* Adjust the height to your needs */
    overflow-y: auto;
    overflow-x: hidden;
}
.header-short .input-sm{
    height: 30px;
    font-size: 12px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.who-out-list{height: 200px;overflow-y: auto;overflow-x: hidden;padding-left: 20px;padding-right: 20px;}
.who-out-list .who-list-box {border-bottom: 1px solid #efefef;margin-bottom: 10px;padding-bottom: 8px;}
.who-out-list .who-list-box p{margin-bottom: 0;}
.who-out-list .who-list-box span{font-size: 12px;}
.who-out-list .who-list-box .icon{font-size: 18px;}
/* .who-out-list .who-list-box img{width: 25%;height: auto;margin-right: 10px;} */
.who-out-list .who-list-box img{margin-right: 10px;}
.who-out-list .who-list-box .name{margin-bottom: 0px;margin-top: 0px;}
.who-out-list .who-list-box .profile .avatar{display: flex;align-items: center;text-align: center;justify-content:center;border: 1px solid #6c757d;margin-right: 10px;margin-top: 0px;margin-bottom: 0px;}
.who-out-list .who-out-main-title{display: flex;border-bottom: 1px solid #ebeef5;padding-bottom: 8px;margin-bottom: 10px;}
.who-out-list .who-out-main-title h4{margin-bottom: 0px;margin-top: 4px;}
.who-out-list .who-out-main-title span{margin-bottom: 0px;color: #6c757d;margin-top: 5px;margin-left: 15px;}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li > a{padding: 7px 4px;min-height: 38px;}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu {margin-top: 15px;}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul ul{padding: 0px;}
.employe-list-card .other-icons{justify-content: left;margin-bottom: 10px;}
.btn-check:focus + .btn-primary, .btn-primary:focus{
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle{
    background-color: #000;
    border-color: #000;
}
.menu-arrow{line-height: 1.4rem;}
.page-item.active .page-link{
    background-color: #13601d;
    border-color: #13601d;
}
.page-link:hover{
    background-color: #000;
    border-color: #000;
    color: #fff;
}
.dash{
    position: relative;
}
.dash::before{
    position: absolute;
    content: '';
    border-bottom: 1px solid #fff;
    width: 10px;
    top: 50%;
    transition: all 0.4s ease-in-out 0s;
}
.dash:hover::before{
    width: 20px;
    transition: all 0.4s ease-in-out 0s;
}
.dash span{
    margin-left: 20px;
    transition: all 0.4s ease-in-out 0s;
}
.dash:hover span{
    margin-left: 25px;
    transition: all 0.4s ease-in-out 0s;
}
#sidebar-menu #side-menu li .collapse .nav-second-level .menuitem-active .active span{
    margin-left: 25px;
}
#sidebar-menu #side-menu li .collapse .nav-second-level .menuitem-active .active.dash::before{
    width: 20px;
}
/* Remove the default appearance of checkboxes */
.l-d-switch input[type="checkbox"] {
    display: none;
}

/* Style for the label when checked */
.l-d-switch input[type="checkbox"] + label .bi-sun {
    color: #fff; /* Set sun icon color for light mode */
}

.l-d-switch input[type="checkbox"] + label .bi-moon {
    color: #2c3e50; /* Set moon icon color for dark mode */
}

/* Style the icon labels */
.l-d-switch label i {
    font-size: 18px; /* Icon size */
    cursor: pointer; /* Make it clickable */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

/* Add some spacing between the icons */
.form-switch {
    margin-right: 10px;
}

/* .l-d-switch #sun-icon {
    display: none;
} */
.form-switch .sun{
    position: absolute;
    top: 15px;
    left: 0;
}
.form-switch .moon{
    position: absolute;
    top: 15px;
    left: 0;
}
body[data-sidebar-color=dark] .card .card-header{
    background-color: var(--black);
    border-color: var(--gray-200) ;
}
.employee-contact{
    border: 1px solid #e2e7f1;
    /* border: 1px solid #6c757d; */
    position: relative;
    padding: 20px;
    margin-top: 25px;
}
.employee-contact .employees-main-heading{
    position: absolute;
    top: -20px;
    left: 20px;
    background-color: #fff;
}
.contact-admin .employee-contact{
    border: 1px solid #6c757d;
    position: relative;
    margin-top: 25px;
    background: #ffffff;
    border-radius: 6px;
    padding: 0px 0px 10px 0px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    margin-top: 30px;
    border-radius: .25rem;
}
.contact-admin .employee-contact-header{
    padding: 15px 28px 15px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 0px;
    border-bottom: 1px solid #7f7f7f12;
    background-color: #7f7f7f12;
}
.contact-admin .employee-contact-body{
    padding: 0px 28px 0px 28px;
}
.contact-admin .employee-contact .employee-contact{
    box-shadow: none;
    margin-top: 35px !important;
    margin-bottom: 17px;
}
.contact-admin .employee-contact .employees-main-heading{
    position: unset;
    background-color: transparent;
    top: -23px;
    left: 20px;
    font-size: 24px;
    margin: 0;
    color: #000;
}
.opt-group {
    transition: all 0.5s ease-out;
    opacity: 0;
}
.opt-group.show {
    opacity: 1;
}
.opt-group .plus{
    transition: all 0.9s ease;
    opacity: 0;
    /* position: absolute; */
    right: 0;
}
.opt-group a i{
   line-height: 0;
}
.opt-group.show .plus{
    transition: all 0.9s ease;
    opacity: 1;
}
.employe-list-card{
    position: relative;
}
.add-new .open-opt{
    background-color: #800080;
    color: #fff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
    position: relative;
    z-index: 1;
}
.add-new .open-opt span{
    line-height: 0;
}
.opt-group .plus a{
    color: #fff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.opt-group .plus{
    display: flex;
    gap: 5px;
    justify-content: right;
}
.opt-group .plus span{
    background-color: #fff;
    box-shadow: 0px 0px 2px 0px #000;
    padding: 0px 10px;
    line-height: 30px;
}
.sys-user-mail .user-mail-box{
    border-bottom: 1px solid #ddd;
    padding: 4px 10px;
    display: flex;
    justify-content: space-between;
}
.sys-user-mail {
    height: 500px;
    overflow-y: auto;
}
.sys-user-mail .user-mail-box .other-content{
    display: flex;
    gap: 5px;
}
.add-new-content ul {
    position: absolute;
    right: 0;
    margin-bottom: 0px;
    bottom: 30px;
}
.add-new-content ul li{
    list-style-type: none;
    margin-bottom: 10px;
}
.employee-contact-details .employe-box{
    border: 1px solid #000;
    padding: 10px;
}
.display-flex{
    display: flex;
    align-items: center;
    gap: 10px;
}
.mw-auto{
    min-width: auto;
}
.emp-profile input[type="file"] {
    display: none;
    cursor: pointer;
}
.profile-pic img {

    border: 1px solid #ddd;
    border-radius: 50%;
    object-fit: cover;
    transition: all .3s ease;
}
.profile-pic .pro-img {
    position: absolute;
    right: 0;
    bottom: -1px;
    color: #1d1d1d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity .3s ease;
    border-radius: 50%;
    font-size: 20px;
}
.profile-pic {
    display: inline-block;
    /* border-radius: 50%; */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
}
.employe-list-card .nav-item .nav-link {
    padding: 8px 10px;
}
.sr{width: 4% !important;}
.w5{width: 5% !important;}
.w20{width: 20% !important;}
.w15{width: 15% !important;}
.w10{width: 10% !important;}
.date{width: 10% !important;}
.action{width: 8% !important;}
.note{width: 18% !important;}
.amount{text-align: center;}
.status-right{text-align: right;}
.invoice-card .payment-box{
    border: 1px solid #ddd;
    padding: 10px;
}
.profile-sub-nav .nav-link.active, .profile-sub-nav .show > .nav-link {
    box-shadow: none;
    background-color: #13601d;
    border-radius: 0;
    color: #fff;
}
.profile-sub-nav .nav-item:first-child .nav-link{
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.profile-sub-nav .nav-item:last-child .nav-link{
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
.profile-sub-nav .nav-item{
    border-right: 1px solid #fff;
}
.profile-sub-nav .nav-item:last-child {
    border-right: none;
}
.profile-sub-nav .nav-link{
    box-shadow: none;
}
.profile-sub-nav {
    background: #ddd;
    border-radius: .25rem;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}
table.dataTable td{
    color: #000;
}
table.dataTable td h5{
    color: #000;
    font-weight: 400;
}
table.dataTable td p{
    /* color: #4b4b5a; */
    color: #000;
}
.btn-dark-green{
    background-color: #14361d;
    color: #fff;
}
.btn-dark-green:hover{
    background-color: #000;
    color: #fff;
}
table.dataTable thead > tr > th{
    vertical-align: baseline;
}
.textarea-height{
    height: 38px;
}
.sidebar-nav{
    background: transparent;
    border-radius: 0;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #13601d;
}
.nav-tabs li a.active{
    box-shadow: none;
    border-bottom: 0 !important;
    border: 1px solid #13601d;
    border-radius: 0;
    color: #13601d;
}
.sidebar-nav .nav-item.show .nav-link, .sidebar-nav .nav-link.active{
    color: #13601d;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.sidebar-nav li a{
    border-color: #13601d !important;
}
.sidebar-nav .nav-link:hover {
    color: #13601d;
}
.nav-link:focus, .nav-link:hover {
    color: #13601d;
}
.contact-nav{
    background: transparent;
    border-radius: 0;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #ddd;
    gap: 2px;
}
.contact-nav .nav-item.show .nav-link, .contact-nav .nav-link.active{
    color: #13601d;
    background-color: #fff;
}
.contact-nav li a{
    border-color: #ddd !important;
}
.contact-nav .nav-link:hover {
    color: #13601d;
}
.form-select{
    background-position: right 0.6rem center;
}
.dt-responsive .form-select{
    padding: .45rem 1.7rem .45rem .9rem;
}
.dt-responsive table thead tr th{
    text-align: center;
    background-color: #ddd;
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #000;
    background-color: #e7e7e7;
    border-color: #e7e7e7;
}
body[data-sidebar-color="dark"] .btn-primary.disabled, body[data-sidebar-color="dark"] .btn-primary:disabled {
    background-color: #e7e7e7;
    border-color: #e7e7e7;
    color: #000;
}
.close-round{
    padding: 5px 7px;
    border-radius: 50%;
    line-height: 17px;
}
.table-text{
    text-align: center;
}
.table-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.contact-nav .nav-item{
    margin-bottom: -1px;
}
.sub-tab{
    border: 1px solid #ddd;
    border-top: none;
}
.sub-tab .dt-responsive{
    /* padding-bottom: 20px; */
}
.dt-responsive > .dataTables_wrapper > .row .col-sm-12 {
    overflow-x: auto;
}
#side-menu li .nav-second-level li a{
    font-size: 12px;
}
#side-menu li .nav-second-level li a{
    font-size: 12px;
}
.contact-nav .nav-item:first-child  .nav-link{
    border-top-left-radius: 0.25rem;
}
.contact-nav .nav-item:last-child .nav-link {
    border-top-right-radius: 0.25rem;
}
.contact-nav .nav-item .nav-link{
    background-color: #ddd;
    border-radius: 0;
}
.contact-nav .nav-item .nav-link.active{
    background-color: #fff;
}
.membership-card .membership-card-holder{
    color: #b7040c;
    font-size: 20px;
}
.membership-card{
    text-align: center;
    margin-bottom: 10px;
}
.membership-card .member-id{
    font-size: 14px;
    color: #000;
    font-weight: normal;
}
.membership-card .membership-date{
    font-size: 14px;
    color: #000;
    font-weight: normal;
}
.membership-info-body{
    padding-left: 0px;
    margin-top: 20px;
}
.membership-info-body li{
    display: flex;
    width: 100%;
    margin-bottom: 8px;
}
.membership-info-body li:last-child{
    margin-bottom: 0px;
}
.membership-info-body li label{
    max-width: 200px;
    min-width: 200px;
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
}
.membership-info-body li p{
    margin-bottom: 0px;
    width: 100%;
    white-space: nowrap;
}
.paid{
    background-color: #c6f9c6;
    color: #13601d;
    padding: 4px 6px;
    border-radius: 5px;
    white-space: nowrap;
}
.unpaid{
    background-color: #f0b5b8;
    color: #b7040c;
    padding: 4px 6px;
    border-radius: 5px;
    white-space: nowrap;
}
.half-paid, .paused{
    background-color: #ffe4b4;
    color: #ffa500;
    padding: 4px 6px;
    border-radius: 5px;
    white-space: nowrap;
}
.s-active{
    background-color: #c6f9c6;
    color: #13601d;
    padding: 4px 6px;
    border-radius: 5px;
    white-space: nowrap;
}
.s-inactive{
    background-color: #f0b5b8;
    color: #b7040c;
    padding: 4px 6px;
    border-radius: 5px;
    white-space: nowrap;
}
.w8{width: 8% !important;}
.invoice-info-body{
    padding-left: 0px;
    margin-bottom: 0px;
}
.invoice-info-body li{
    display: flex;
    width: 100%;
    margin-bottom: 8px;
}
.invoice-info-body li:last-child{
    margin-bottom: 0px;
}
.invoice-info-body li label{
    max-width: 150px;
    min-width: 150px;
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
}
.invoice-info-body li p{
    margin-bottom: 0px;
    width: 100%;
    white-space: nowrap;
}
.invoice-transetions{
    float: right;
    text-align: right;
}
.invoice-transetions .transetion-status{
    color: #13601d;
    text-transform: uppercase;
    margin-top: 2px;
}
.invoice-payer-detail{
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.invoice-payer-detail .payer-name{
    color: #13601d;
}
.invoice-payer-detail .payer-name span{
    color: #4b4b5a;
    font-weight: normal;
}
.invoice-other-detail .invoice-other-title{
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}
.invoice-card .table{
    margin-top: 60px;
    position: relative;
}
.paid-img-table{
    position: absolute;
    left: 50%;
    right: auto;
    width: 200px;
    z-index: 0;
    top: -10px;
    margin: auto;
    opacity: 0.5;
    top: 50%;
    transform: translate(-50%, -50%);
}
.header-div p{
    margin-bottom: 0px;
    line-height: 18px;
}
.header-div h6{
   margin-bottom: 5px;
}
body[data-sidebar-color="dark"] .employe-list.active{background-color: var(--black);}
body[data-sidebar-color="dark"] .employe-list:hover{background-color: var(--black);}
body[data-sidebar-color="dark"] .employee-contact .employees-main-heading{background-color: var(--black) !important; color: var(--body-font-dark); padding: 3px 3px;}
body[data-sidebar-color="dark"] .contact-admin .employee-contact-header{background-color: var(--black);}
body[data-sidebar-color="dark"] .employee-contact-body{background-color: var(--black);}

body[data-sidebar-color="dark"] .contact-nav .nav-item .nav-link.active{background-color: var(--black);border-color: var(--gray-200) !important;}
body[data-sidebar-color="dark"] .contact-nav {border-color: var(--gray-200) !important;}
body[data-sidebar-color="dark"] .contact-nav .nav-item .nav-link{background-color: var(--gray-200);}
/* body[data-sidebar-color="dark"] table.dataTable td{color: #acbfd2;} */
body[data-sidebar-color="dark"] .dt-responsive table thead tr th{background-color: var(--gray-200);}
body[data-sidebar-color="dark"] table.dataTable td h5{color: #fff;}
body[data-sidebar-color="dark"] table.dataTable td p{color: #8c98a5 ;}
body[data-sidebar-color="dark"] .tab-content{padding-bottom: 20px;border-color: var(--gray-200); background-color: var(--black) !important;}
body[data-sidebar-color="dark"] .contact-admin .sub-tab{background-color: var(--black);}
body[data-sidebar-color="dark"] .roles-card .employee-contact-header{background-color: var(--black); border-bottom: 1px solid var(--gray-200);}
body[data-sidebar-color="dark"] .roles-card .employee-contact{background-color: var(--black); border-color: var(--black);}
body[data-sidebar-color="dark"] .contact-nav .nav-item.show .nav-link, body[data-sidebar-color="dark"] .contact-nav .nav-link.active{color: var(--primary-dark);}
body[data-sidebar-color="dark"] .site-set .employee-contact-header{background-color: var(--black); border-bottom: 1px solid var(--gray-200); }
body[data-sidebar-color="dark"] .site-set .employee-contact{border: 1px solid var(--black); background: var(--black);}
body[data-sidebar-color="dark"] .user-edit-profile .employee-contact-header{background-color: var(--black); border-bottom: 1px solid var(--gray-200); }
body[data-sidebar-color="dark"] .user-edit-profile .employee-contact{border: 1px solid var(--black); background: var(--black);}
body[data-sidebar-color="dark"] .card.side-donations .card-body .employe-tab-content{background-color: var(--black);}
body[data-sidebar-color="dark"] .website-card .employee-contact-header{background-color: var(--black); border-bottom: 1px solid var(--gray-200); }
body[data-sidebar-color="dark"] .website-card .employee-contact{background-color: var(--black); border: 1px solid var(--black);}
body[data-sidebar-color="dark"] .modal-footer{border-top: 1px solid var(--gray-200);}
body[data-sidebar-color="dark"] .ck.ck-button.ck-on, a.ck.ck-button.ck-on{background: var(--gray-light);}
body[data-sidebar-color="dark"] .tags-input{background-color: var(--black); color: #94a0ad;}
body[data-sidebar-color="dark"] .tag{background-color: var(--gray-light) !important;}
body[data-sidebar-color="dark"] .tags-container{border-color: var(--gray-light);}
body[data-sidebar-color="dark"] .contact-dashboard .employee-contact-header{background-color: var(--black); border-bottom: 1px solid var(--gray-200);}
body[data-sidebar-color="dark"] .contact-dashboard .employee-contact{background-color: var(--black); border: 1px solid var(--black);}
body[data-sidebar-color="dark"] .contact-edit-pro .employee-contact-header{background-color: var(--black); border-bottom: 1px solid var(--gray-200);}
body[data-sidebar-color="dark"] .contact-edit-pro .employee-contact{background-color: var(--black); border: 1px solid var(--black);}
body[data-sidebar-color="dark"] .contact-credit .employee-contact-header{background-color: var(--black); border-bottom: 1px solid var(--gray-200);}
body[data-sidebar-color="dark"] .contact-credit .employee-contact{background-color: var(--black); border: 1px solid var(--black);}
body[data-sidebar-color="dark"] .ck.ck-toolbar{border: 1px solid var(--gray-200); }
body[data-sidebar-color="dark"] .btn-secondary{background-color: #313131;  color: #928f8f; border-color: #313131;}
body[data-sidebar-color="dark"] .fc-theme-standard .fc-scrollgrid{border: 1px solid var(--gray-light);}
body[data-sidebar-color="dark"] .fc .fc-button-primary{background-color: var(--gray-light) !important; border-color: var(--gray-light);}

body[data-sidebar-color="dark"] .membership-card{border-color: var(--gray-200);}
body[data-sidebar-color="dark"] .left-side-menu #sidebar-menu > ul > li > a:active, body[data-sidebar-color="dark"] .left-side-menu #sidebar-menu > ul > li > a:focus, body[data-sidebar-color="dark"] .left-side-menu #sidebar-menu > ul > li > a:hover{
    color: #fff;
}
body[data-sidebar-color="dark"] #sidebar-menu li:hover .nav-second-level li:hover{background-color: #13601d  !important;}
.dark-mode .nav-pills > li > a, .dark-mode .nav-tabs > li > a{
    color: var(--body-font-dark);
}
.tag{
    background-color: #13601d !important;
}
.footer{left: 190px;}
.employe-list .sub-name{
    font-size: 12px;
    margin-top: 2px;
    margin-bottom: 0px;
    font-weight: normal;
}
.inpo-expo-btn{
    display: flex;
    align-items: center;
    gap: 10px;
    float: right;
    /* margin-bottom: 20px; */
}
.employee-contact:first-child{
    margin-top: 15px;
}
#pills-donation-sub-tab:focus:focus-visible{
    outline: none;
}
/* body[data-sidebar-color="dark"] #sidebar-menu #side-menu li .collapse .nav-second-level li a{
    color: #fff;
} */
body[data-sidebar-color="dark"] #sidebar-menu #side-menu li .collapsing .nav-second-level li a{
    color: var(--body-font-color);
}
body[data-sidebar-color="dark"] .dash::before{
    border-bottom: 1px solid var(--dark);
}
body[data-sidebar-color="dark"][data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu .menuitem-active .active{
    color: #fff ;
}
body[data-sidebar-color="dark"][data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu .menuitem-active:hover .active{
    color: #fff ;
    background-color: #13601d;
}
body[data-sidebar-color="dark"] .navbar-custom .button-menu-mobile{
    color: var(--body-font-color) ;
}
body[data-sidebar-color="dark"] .employe-list{
    border-bottom-color: var(--gray-200) ;
}
body[data-sidebar-color="dark"] .employe-list-card .search-area .filter{
    border-color: var(--dark) ;
    color: var(--body-font-dark) !important;
}
body[data-sidebar-color="dark"] .font-red{color: #ca3232;}
.total-recode p{
    padding-left: 10px;
    font-size: 13px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.employee-contact.invoice-card .table{
    margin-top: 15px;
    position: relative;
    margin-bottom: 0px;
}
.employee-contact.invoice-card .invoice-info-body li p{
    white-space: normal;
}
#pills-log .employee-contact{margin-bottom: 20px;}
.partially-text{text-align: right;}
.invoice-transetions .transetion-status.half-paid-text {
    color: #ffa500;
}
.invoice-transetions .transetion-status.unpaid-text {
    color: #b7040c;
}
.account-pages .card{border: 0px;}
.filter-dropdown .dropdown-item:focus, .filter-dropdown .dropdown-item:hover{
    color: #4b4b5a;
}
.filter-dropdown .dropdown-item .form-check:hover{
    color: #13601d;
}
body[data-sidebar-color="dark"] .filter-dropdown .dropdown-item .form-check:hover{
    color: var(--primary-dark);
}
.filter-dropdown .dropdown-item .form-check{
    padding-left: 40px;
}
.payment.card-details{
    background-color: #f2f2f2;
    color: #000;
    padding: 15px;
}
.payment.card-details ul li{
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}
.payment.card-details ul li:last-child{
    border-bottom:none;
}
.payment.card-details ul {
    padding-left: 0px;
    margin-bottom: 0px;
}
.payment.card-details ul li .total-amount{
    text-align: right;
}
.payment.card-details ul li .invoice-data p{
    padding-left: 15px;
}
.payment.card-details ul li .invoice-data h6 , .payment.card-details ul li  h5 , .payment.card-details ul li  h6 {
    color: #000;
}
.payment.card-details .card-details-heading {
    color: #000;
}
.w-40{
    width: 40% !important;
}
.cal_dis_field{
	border: 0px;
  font-weight: 700;
  color: #4b4b5a;
  pointer-events: none;
  user-select: none;
  /* width: 70%; */
}
.ck.ck-toolbar{border-top: 0px !important;}
.minmize_cls{
    height: 6% !important;
}
.mymodal {
    display: flex !important; /* Required to properly align modal */
    justify-content: flex-end; /* Push to right */
    align-items: flex-end;
    z-index: -1;
}
.mymodal.show {
    z-index: 1060;
}
.mymodal .modal-dialog{
    margin: 0;
}
.minmize_cls.mymodal {
    align-items: unset;
    top: auto;
    bottom: 0;
}
.minmize_cls.mymodal .modal-dialog{
    margin: 0 0 0 auto;
}
.modalMinimize{
    cursor: pointer;
}
.btn-secondary{
    background-color: #ddd;
    color: #000;
    border-color: #ddd;
}
.btn-secondary:hover{
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.mymodal.modal-static .modal-dialog{
    transform: scale(1);
}
.mymodal .ck .ck-content{min-height: 270px;max-height: 270px;}
.mymodal .modal-header{border-bottom: 1px solid #ebeef5;}
.mymodal .modal-footer{border-top: 1px solid #ebeef5;}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm){
    background-color: #13601d !important;
    color: #fff !important;
    border-color: #13601d !important;
    font-size: .875rem !important;
    padding: .45rem .9rem !important;
    border-radius: .25rem !important;
}
div:where(.swal2-icon).swal2-warning{
    border-color: #13601d !important;
    color: #13601d !important;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel){
    background-color: #ddd !important;
    color: #000 !important;
    font-size: .875rem !important;
    padding: .45rem .9rem !important;
    border-radius: .25rem !important;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):focus-visible{
    box-shadow: none !important;
}
div:where(.swal2-container) h2:where(.swal2-title){
    color: #4b4b5a !important;
    font-size: 20px !important;
    padding: 1em 1.6em 0em !important;
}
div:where(.swal2-container) div:where(.swal2-actions):not(.swal2-loading) .swal2-styled:hover{
    background-image: unset !important;
    background-color: #000 !important;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel):hover{
    background-color: #5c636a !important;
    color: #fff !important;
}
div:where(.swal2-container) div:where(.swal2-html-container){
    color: #4b4b5a !important;
    font-size: 20px !important;
    padding: 1em 1.6em 0em !important;
}
div:where(.swal2-container) input:where(.swal2-input):focus, div:where(.swal2-container) input:where(.swal2-file):focus, div:where(.swal2-container) textarea:where(.swal2-textarea):focus{
    box-shadow: none !important;
    border-color: #000 !important;
}
div:where(.swal2-container) .swal2-input{
    border-color: #000 !important;
}
div:where(.swal2-icon){
    margin: 1.3em auto .6em !important;
}
div:where(.swal2-container) div:where(.swal2-validation-message){
    color: #4b4b5a !important;
}
div:where(.swal2-container) div:where(.swal2-validation-message)::before {
    background-color: #ff5c75 !important;
}
.custom-warning .swal2-warning {
    color: orange !important;
    border-color: orange !important;
}
.mymodal .modal-dialog{
    width: 700px;
}
.minmize_cls.mymodal .modal-dialog-scrollable{
   height: unset;
}
.cal_dis_field:focus-visible {
    outline: 0;
}
.cal_dis_field {
    margin-left: -3px;
    padding: 0;
}
.cal_dis_field {
    border: 0px;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
    /* width: 25%; */
}
.employe-box .form-check.display-flex{
    white-space: nowrap;
}
.w-33{width: 33%;}
.employe-box .form-check.display-flex .edit_cal_discount_radio {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.employe-box .membership_discount_expiry_date {
    padding: 0.15rem 0.3rem;
    /* max-width: 40%; */
  width: 100%;
}
.cal_dis_field{
    margin-left: -3px;
    padding: 0;
}
.employe-box .form-check span {
    width: 100%;
    max-width: 80px;
    min-width: 80px;
    white-space: break-spaces;
}
.cal_dis_field:focus-visible {
    outline: 0;
}
.employe-list-box{scrollbar-width: thin;}
.void{
    background-color: #ddd;
    color: #4b4b5a;
    padding: 4px 6px;
    border-radius: 5px;
    white-space: nowrap;
}
.payment-settlement table td p{margin-bottom: 0;color: #000;}
.payment-settlement table td{color: #000;}
.payment-settlement table td input{color: #000;}
.w12{width: 12%;}
#invoice-table_wrapper table tbody .btn{
    white-space: nowrap;}
table.dataTable td .light-font{color: #6c757d ;}
.remove-child {
    /* margin-top: 10px;
    margin-right: 10px; */
    margin-top: -18px;
    margin-right: -18px;
    padding: 0.38rem 0.7rem;
    border-radius: 100px;
}
.contact-invoice div.dataTables_wrapper div.dataTables_info{
    padding-left: 15px;

}
.contact-invoice div.dataTables_wrapper div.dataTables_filter{
    padding-right: 15px;
    display: none;
}
.contact-payment div.dataTables_wrapper div.dataTables_filter{
    padding-right: 15px;
    display: none;
}
.contact-dashboard .payment-card{
    transition: all 0.3s ease-in-out 0s;
    text-align: center;
}
.contact-dashboard .payment-card:hover{
    transition: all 0.3s ease-in-out 0s;
}
.contact-dashboard .payment-card:hover .dollar{
    opacity: 1;
    transition: all 0.3s ease-in-out 0s;
}
.contact-dashboard .payment-card .dollar {
    font-size: 46px;
    color: #13601d;
    opacity: 0.4;
    border: 1px solid #13601d;
    border-radius: 100%;
    padding: 0px 16px;
    line-height: 46px;
    transition: all 0.3s ease-in-out 0s;
}
.contact-dashboard .transaction-card {
    background: #ffffff;
    padding: 15px 20px;
    border-left: 5px solid #13601d;
    border-radius: 8px;
    box-shadow: 0px 0px 12px -9px #000;
}
.contact-dashboard .transaction-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.contact-dashboard .trans-id {
    font-weight: bold;
    color: #000;
}
.contact-dashboard .transaction-detail p {
    margin: 6px 0;
}
.contact-dashboard .trans-date{
    color: #000;
    margin-bottom: 0px;
}
.contact-dashboard .employee-contact{
    border-color: #ddd;
    margin-top: 40px;
}
.contact-dashboard .employee-contact:first-child{
    margin-top: 15px;
}
.contact-dashboard .employe-profile{
    margin-bottom: 0;
}
.contact-dashboard .transactions-section .row > *{
    margin-bottom: 20px;
}
.contact-dashboard .transactions-section .row > *:last-child{
    margin-bottom: 00px;
}
.contact-dashboard .transactions-section .row > *:nth-last-child(2){
    margin-bottom: 00px;
}
.contact-dashboard .trans-id-date{
    display: flex;
    gap: 10px;
}
.contact-dashboard .invoices-section .row > *{
    margin-bottom: 20px;
}
.contact-dashboard .invoices-section .row > *:last-child{
    margin-bottom: 00px;
}
.contact-dashboard .invoices-section .row > *:nth-last-child(2){
    margin-bottom: 00px;
}
.contact-dashboard .invoice-card {
    background: #ffffff;
    padding: 15px 20px;
    border-left: 5px solid #13601d;
    border-radius: 8px;
    box-shadow: 0px 0px 12px -9px #000;
}
.contact-dashboard .invoice-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.contact-dashboard .invo-id {
    font-weight: bold;
    color: #000;
}
.contact-dashboard .invoice-detail p {
    margin: 6px 0;
}
.contact-dashboard .invo-date{
    color: #000;
    margin-bottom: 0px;
}
.contact-dashboard .invo-id-date{
    display: flex;
    gap: 10px;
}
.contact-dashboard .payment-card  {
    text-align: left;
}
.contact-dashboard .payment-card  h6, .contact-dashboard  .payment-card  h3, .contact-dashboard  .payment-card  h4{
    color: #fff;
}
.contact-dashboard .payment-card i {
    font-size: 66px;
    color: #fff;
    opacity: 0.5;
    position: absolute;
    bottom: -17px;
    right: -4px;
}
.px-14{
    padding-left: 14px !important;
    padding-right: 14px !important;
}
.employe-tab-content .sub-tab{
    padding-bottom: 20px;
}
body[data-sidebar-color="dark"] .contact-dashboard .transaction-card{background-color: var(--gray-200);}
body[data-sidebar-color="dark"] .contact-dashboard .transaction-card .trans-date{color: #dee2e6;}
body[data-sidebar-color="dark"] .contact-dashboard .transaction-card .trans-id{color: #dee2e6;}
body[data-sidebar-color="dark"] .contact-dashboard .invoice-card{background-color: var(--gray-200);}
body[data-sidebar-color="dark"] .contact-dashboard .invoice-card .invo-date{color: #dee2e6;}
body[data-sidebar-color="dark"] .contact-dashboard .invoice-card .invo-id{color: #dee2e6;}
.button-tabs{
    gap: 6px;
    border-top: none !important;
}
.button-tabs .nav-item .nav-link{
    border: 1px solid #13601d;
}
.button-tabs .nav-link.active, .button-tabs .show > .nav-link{
    background-color: #13601d;
    color: #fff;
    border-radius: 0.25rem;
}
.table .btn.font-red:hover{
    color:#b7040c;
}
.table .btn.font-red{
    padding: 0;
    line-height: 0;
}
.f-red-hover:hover{color: #b7040c;}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > .collapse > ul, body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > .collapsing > ul{
    background-color: #3d3d3d;
    width: 200px;
    padding: 0px 10px;
}
body[data-sidebar-size="condensed"] .nav-second-level .menuitem-active{
    background-color: #464646;
}
body[data-sidebar-color="dark"][data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul > li.menuitem-active:hover > a{
    background-color: #13601d;
}
body[data-sidebar-color="dark"][data-sidebar-size="condensed"] #wrapper .left-side-menu #sidebar-menu > ul > li:hover > a{
    background-color: #13601d;
}
body[data-sidebar-color="dark"][data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > .collapse > ul, body[data-sidebar-color="dark"][data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > .collapsing > ul{
    background-color: var(--body-color);
    width: 200px;
    padding: 0px 10px;
}
body[data-sidebar-size="condensed"] #sidebar-menu #side-menu a{
    line-height: 24px;
}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li > a i{
    line-height: 24px;
    font-size: 16px;
    margin-right: 10px;
    margin-left: 7px;
}
body[data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li:hover > a{
    background-color: #13601d;
    color: #fff;
}
body[data-sidebar-color="dark"][data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li > a i{
    margin-right: 10px;
    margin-left: 7px;
}
body[data-sidebar-color="dark"][data-sidebar-size="condensed"] .left-side-menu #sidebar-menu > ul > li{
    padding-left: 14px;
    padding-right: 14px;
}
.card-container{
    position: relative;
    width: 100%;
    height: 240px;
    perspective: 1000px;
}
.card-container .credit-card{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
.card-container .credit-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 20px;
    background: linear-gradient(to right, #4776E6, #8E54E9);
    color: white;
}
.card-container .credit-card-front .credit-card-title{
    font-size: 24px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.card-container .credit-card-front .credit-gradient{
    width: 40px;
    height: 30px;
    background: linear-gradient(to bottom, #d0a343, #ffd700);
    border-radius: 5px;
    margin-top: 20px;
}
.card-container .credit-card-front .credit-card-number{
    font-size: 18px;
    letter-spacing: 2px;
    margin-top: 20px;
    font-family: 'Courier New', monospace;
}
.card-container .credit-card-front .credit-card-holder{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.card-container .credit-card-front .credit-card-holder .holder-title{font-size: 12px;}
.card-container .credit-card-front .credit-card-holder .holder-name{
    font-size: 14px;
    margin-top: 5px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}
.card-container .credit-card-front .credit-card-holder .credit-card-date{
    font-size: 14px;
    margin-top: 5px;
    font-family: 'Courier New', monospace;
}
.card-container .credit-card-back{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 20px;
    background: linear-gradient(to right, #4776E6, #8E54E9);
    color: white;
    transform: rotateY(180deg);
}
.card-container .credit-card-back .credit-back-gradient{
    background-color: #000;
    height: 40px;
    margin: 20px 0;
}
.card-container .credit-card-back .credit-back-cvv{
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.card-container .credit-card-back .credit-back-cvv .cvv{
    background-color: white;
    padding: 5px 10px;
    border-radius: 4px;
    color: #333;
    font-family: 'Courier New', monospace;
}
.card-container .credit-card-back .credit-back-text{
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
}
.float-right{
    float: right;
}
.period-set{
    /* display:block; */
}
.year-set{
    display:inline;
}
.for-set{
    display:inline;
}
.input-set{
    width:93%;
    display:inline;
}
.d-inline{
    display: inline;
}
.y-middle{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.submit-btn-register {
    background-color: #13601d;
    color: #fff;
    width: 100%;
}
.submit-btn-register:hover {
    background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
    background-color: #13601d;
    color: #fff;
  }
  .reset-pass{
    color: #13601d;
    font-weight: bold;
    text-align: center;
    font-size: 25px;
    margin-bottom: 0;
    margin-top: 25px;
  }

.clockpicker-button.am-button , .clockpicker-button.pm-button{
    color: #000 !important;
    background-color: transparent;
    border-color: #ccc;
}
.clockpicker-button{
    background-color: #13601d;
    border-color: #13601d;
}
.event-description .ck.ck-toolbar{
    border-top: 1px solid #ccc !important;
}
.event-description .ck.ck-content {
    height: 400px;
}
.ck-restricted-editing_mode_standard.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred:focus-visible {
    outline: none;
}
.ck-restricted-editing_mode_standard.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred:focus {
    outline: none;
}
.event-information textarea{
    height: 150px;
}
.event-notes{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.event-notes p{
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    display: flex;
    gap: 10px;
}
.event-notes p::before{
    content: '|';
    padding-right: 0px;
}
.event-notes .form-switch .form-check-input{
    margin-left: 10px;
    float: right;
    height: 1.3rem;
    width: 3em;
    margin-top: 0;
}
.event-notes .form-switch{
    padding-left: 0px;
}
.event .form-check-input{
    margin-top: 0.15rem !important;
}
.event-check{
    max-width: 300px;
    padding-right: 10px;
    width: 100%;
}
.event-lable{
    display: flex;
    gap: 0px 10px;
    margin: 6px 0px;
}
.event-lable .fa-calendar-days , .event-lable .fa-font{
    color: #13601d;
}
.event-lable .fa-asterisk {
    color: #b7040c;
}
.event-lable .fa-envelope {
    color: #0000FF;
}
.custom-field-lable{
    display: flex;
    border: 1px solid #ccc;
    padding: 12px;
    margin-top: 12px;
}
.custom-field-lable:first-child{
    margin-top: 0px;
}
.custom-field-lable a{
    max-width: 300px;
    padding-right: 10px;
    width: 100%;
    margin-bottom: 0px;
}
.custom-field-lable i{
    color: #13601d;
    line-height: 16px;
}
.bg-success{
    background-color: #13601d !important;
}
.custom-field-lable .badge{
    margin-right: 20px
}
.custom-new-lable{
    display: flex;
    gap: 0px 10px;
    margin: 6px 0px;
}
.custom-new-lable i{
    color: #13601d;
    max-width: 18px;
    width: 100%;
    min-width: 18px;
}
.custom-new-lable .fa-asterisk {
    color: #b7040c;
}
.custom-new-lable .fa-envelope {
    color: #13601d;
}
.custom-field-add{
    border: 1px solid #ddd;
    padding: 0px 20px;
    border-top: 0px;
}
.custom-field-btn{
    display: flex;
    gap: 0px 10px;
}
.custom-field-btn a{
    position: relative;
}
.custom-field-btn a::after{
    content: '|';
    padding-left: 10px;
}
.custom-field-btn a:last-child::after{
    content: '';
}
.custom-field-btn a.disabled{
    color: #4b4b5a !important;
}
.badge{
    line-height: 14px;
}
.m-cf-70{
    margin-left: 70px;
}
.add-event .form-check .form-check-label {
    display: inline;
}
.text-success{
    color: #13601d !important;
}
.ticket-label{float: right;text-align: right;white-space: nowrap;}

.modal-footer{
    border-top: 1px solid #ebeef5;
}
.modal-header{
    border-bottom: 1px solid #ebeef5;
}
.membership-levels{
    border: 1px solid #ccc;
    padding: 5px;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 10px;
}
.member-group{
    border: 1px solid #ccc;
    padding: 5px;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 10px;
}
.restricted .row > * {
    display: flex;
    flex-direction: column;
}
.cancellation label{
    display: flex;
    align-items: center;
    gap: 0 10px;
}
.cancellation label input{
    width: 100px;
}
.cancellation .form-check-input{
    margin-top: 10px !important;
}
ul.edit-details-info{
    padding-left: 0;
}
ul.edit-details-info li{
    list-style-type: none;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
ul.edit-details-info li label{
    max-width: 100px;
    width: 100%;
    text-align: right;
    color: #424e5a;
}
ul.edit-details-info li p{
    color: #000;
    margin-bottom: 0;
}
ul.list-ticket-info{
    padding-left: 0;
}
ul.list-ticket-info li{
    list-style-type: none;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
ul.list-ticket-info li label{
    max-width: 160px;
    width: 100%;
    text-align: right;
    color: #424e5a;
    position: relative;
    padding-right: 10px;
}
ul.list-ticket-info li p{
    color: #000;
    margin-bottom: 0;
}
.emp-status table thead th {
  color: var(--dark);
}
.event-lable i{
    color: #13601d;
}
.ticket-dt-table table thead tr th{
    text-align: left;
}
.registrants-dt-table table thead tr th{
    text-align: left;
}
.registrants-dt-table table thead tr th span{
    display: block;
    font-size: 12px;
    color: #aaa;
}
.registrants-dt-table table tbody tr td span{
    display: block;
    font-size: 12px;
    color: #aaa;
}
.registrants-dt-table table tbody tr td .balance{
    margin-bottom: 8px;
    color: #13601d;
}
.registrants-dt-table {
    margin-top: -42px;
}
ul.list-ticket-info li label::before {
    content: ':';
    float: right;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-53%);
}
.event-notes p i {
    line-height: 18px;
}
.registrants-filter {
    position: relative;
    z-index: 1;
}
.event-title{
    border-bottom: 1px solid #ddd;
    padding-left: 13px;
    padding-right: 13px;
}
.event-title h1{
    margin: 0px;
    font-size: 28px;
}
.dark-mode .dropdown-item:focus, .dark-mode .dropdown-item:hover{
    background-color: transparent;
}
.dark-mode .filter-dropdown .dropdown-item:focus, .dark-mode .filter-dropdown .dropdown-item:hover {
    color: var(--dark);
}
.w-54{
    width: 54%;
}
.dark-mode .cal_dis_field{
    background-color: transparent;
    color: var(--body-font-dark);
}
.dark-mode .ck.ck-editor__main > .ck-editor__editable{
    background-color: transparent;
    border-color: #6c757d !important;
}
.dark-mode .ck.ck-toolbar {
    background-color: transparent;
    border-color: #6c757d;
}
.dark-mode .ck.ck-toolbar > .ck-toolbar__items{
    background-color: transparent;
    border-color: #6c757d;
}
.dark-mode .ck.ck-icon.ck-icon_inherit-color, .dark-mode .ck.ck-icon.ck-icon_inherit-color *, .dark-mode .ck-reset_all :not(.ck-reset_all-excluded *), .ck.ck-reset_all{
    color: var(--body-font-color);
}
.dark-mode .ck.ck-button:not(.ck-disabled):hover, .dark-mode a.ck.ck-button:not(.ck-disabled):hover{
    background-color: #212529;
}
.dark-mode .ck.ck-splitbutton.ck-splitbutton_open > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover), .dark-mode .ck.ck-splitbutton:hover > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover){
    background-color: #212529;
}
.dark-mode .mymodal .modal-header, .dark-mode .mymodal .modal-footer{
    border-color: #313131;
}
.dark-mode a:hover{
    color: #13601d;
}
.impo-expo{
    width: 16px;
    height: 16px;
}
#exportBtn {
  display: flex;
  gap: 4px;
  align-items: center;
}
#importButton {
  display: flex;
  gap: 4px;
  align-items: center;
}
.label-col {
  flex: 0 0 195px;
}
.dark-mode .membership-card .member-id{
    color: #fff;
}
.dark-mode .membership-card .membership-date{
    color: #fff;
}
body[data-sidebar-color="dark"] .flatpickr-calendar{
    background-color: var(--body-color);
    box-shadow: none;
    border: 1px solid var(--gray-light);
}
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white);
}
body[data-sidebar-color="dark"] .flatpickr-day.inRange, body[data-sidebar-color="dark"] .flatpickr-day.prevMonthDay.inRange, body[data-sidebar-color="dark"] .flatpickr-day.nextMonthDay.inRange, body[data-sidebar-color="dark"] .flatpickr-day.today.inRange, body[data-sidebar-color="dark"] .flatpickr-day.prevMonthDay.today.inRange, body[data-sidebar-color="dark"] .flatpickr-day.nextMonthDay.today.inRange, body[data-sidebar-color="dark"] .flatpickr-day:hover, body[data-sidebar-color="dark"] .flatpickr-day.prevMonthDay:hover, body[data-sidebar-color="dark"] .flatpickr-day.nextMonthDay:hover, body[data-sidebar-color="dark"] .flatpickr-day:focus, body[data-sidebar-color="dark"] .flatpickr-day.prevMonthDay:focus, body[data-sidebar-color="dark"] .flatpickr-day.nextMonthDay:focus{
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: var(--white);
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){
    box-shadow: -10px 0 0 #e6e6e6;
}
.flatpickr-day.today{
    border-color:  var(--primary) !important;
}
body[data-sidebar-color="dark"] .flatpickr-day.today{
    border-color:  var(--primary-dark) !important;
}
body[data-sidebar-color="dark"] .flatpickr-calendar.arrowTop::before, body[data-sidebar-color="dark"]  .flatpickr-calendar.arrowTop::after {
    border-bottom-color: #424e5a;
}
body[data-sidebar-color="dark"] .flatpickr-months .flatpickr-prev-month, body[data-sidebar-color="dark"] .flatpickr-months .flatpickr-next-month , body[data-sidebar-color="dark"] .flatpickr-months .flatpickr-month{
    color: var(--body-font-color);
    fill: var(--body-font-color);
}
.flatpickr-day.today:hover, .flatpickr-day.today:focus{
    background-color: var(--primary);
    border-color: var(--primary);
}
body[data-sidebar-color="dark"] .flatpickr-day.today:hover, body[data-sidebar-color="dark"] .flatpickr-day.today:focus{
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}
body[data-sidebar-color="dark"] span.flatpickr-weekday{
    color: var(--body-font-color);
}
body[data-sidebar-color="dark"] .flatpickr-day{
    color: var(--body-font-color);
}
body[data-sidebar-color="dark"]  .flatpickr-day:hover{
    color: var(--white);
}
body[data-sidebar-color="dark"] div:where(.swal2-container) div:where(.swal2-popup){
    background: #212529;
}
body[data-sidebar-color="dark"] div:where(.swal2-container) h2:where(.swal2-title), body[data-sidebar-color="dark"] div:where(.swal2-container) div:where(.swal2-html-container){
    color: var(--white) !important;
}
.dark-mode .btn-primary:hover{
    color: var(--white);
}
.event .tab-content{
    padding-bottom: 20px;
}
body[data-sidebar-color="dark"] .flatpickr-time input, body[data-sidebar-color="dark"] .flatpickr-time .flatpickr-time-separator, body[data-sidebar-color="dark"] .flatpickr-time .flatpickr-am-pm{
    color: var(--white);
}
body[data-sidebar-color="dark"] .flatpickr-time input:hover, body[data-sidebar-color="dark"] .flatpickr-time .flatpickr-am-pm:hover, body[data-sidebar-color="dark"] .flatpickr-time input:focus, body[data-sidebar-color="dark"] .flatpickr-time .flatpickr-am-pm:focus{
    background-color: rgba(0,0,0,0.15);
}
body[data-sidebar-color="dark"] .flatpickr-time .numInputWrapper span.arrowDown::after {
    border-top-color: var(--white);
}
body[data-sidebar-color="dark"] .flatpickr-time .numInputWrapper span.arrowUp::after{
    border-bottom-color: var(--white);
}
body[data-sidebar-color="dark"] .numInputWrapper:hover{
    background: rgba(0,0,0,0.15);
    border-color: #6c757d;
}
body[data-sidebar-color="dark"] .flatpickr-calendar.hasTime .flatpickr-time{
    border-color: #6c757d;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{
    background-color: #13601d;
    border-color: #13601d;
    background-image: none !important;
}
.event #eventForm .form-check label {
    display: inline;
}
.dark-mode .navbar-custom{
    background-color: var(--black) !important;
    border-color: transparent;
    box-shadow: 0px 0px 16px #313131;
}
.dark-mode .emp-status thead, .dark-mode .emp-status tbody, .dark-mode .emp-status tfoot, .dark-mode .emp-status tr, .dark-mode .emp-status td, .dark-mode .emp-status th{
    border-color: var(--gray-200) !important;
}
.dark-mode thead, .dark-mode tbody, .dark-mode tfoot, .dark-mode tr, .dark-mode td, .dark-mode th{
    border-color: var(--gray-light) !important;
}
.dark-mode .emp-status table thead tr , .dark-mode .table > :not(caption) > * > *{
    background-color: var(--black);
}
.dark-mode .who-out-list .who-out-main-title {
    border-color: var(--gray-200);
}
.dark-mode .who-out-list .who-list-box{
    border-color: var(--gray-200);
}
.dark-mode .card{
    background-color: var(--black);
    border-color: var(--black);
}
.dark-mode .exception .exception-box .card{
    border-color: #acbfd2;
}
.dark-mode input[type="search"]{
    background-color: var(--black);
    border-color: var(--gray-200);
}
.dark-mode table.dataTable th, .dark-mode table th{
    color: var(--font-color);
}
.dark-mode table.dataTable td, .dark-mode table td{
    color: var(--dark);
}
body[data-sidebar-color="dark"] .employe-list-card .card-header{
    border-color: var(--gray-200);
}
.dark-mode .total-recode p{
    border-color: var(--gray-200);
    color: var(--body-font-dark);
}
.dark-mode .dropdown-menu{
    background-color: var(--body-color);
}
.dark-mode .dropdown-item{
    color: var(--dark);
}
.dark-mode .h1, .dark-mode .h2, .dark-mode .h3, .dark-mode .h4, .dark-mode .h5, .dark-mode .h6, .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6{
    color: var(--body-font-dark);
}
.dark-mode .employe-list h5{
    color: var(--dark) !important;
}
.dark-mode .employe-list h6, .dark-mode .employe-list p{
    color: var(--body-font-color) !important;
    opacity: 0.8;
}
.dark-mode .nav-pills .nav-link{
    color: var(--dark);
}
.dark-mode .nav-pills .nav-link:hover{
    color: var(--body-font-dark);
}
.dark-mode .nav-pills .nav-link.active, .dark-mode .nav-pills .show > .nav-link{
    background-color: var(--black);
    color: var(--body-font-dark);
}
.dark-mode .form-control , .dark-mode .form-select{
    background-color: var(--black);
    border-color: var(--gray-light);
}
.dark-mode .dt-responsive table thead tr th{
    background-color: #212529;
    color: var(--body-font-dark);
    border-color: var(--gray-light) !important;
}
.dark-mode .employe-tab-content .dt-responsive table tbody tr td{
    border-color: var(--gray-light) !important;
}
.dark-mode .notification-list .noti-title{
    border-bottom: 1px solid var(--gray-light);
}
.dark-mode .notification-list .notify-item{
    border-bottom: none;
}
.notification-list .noti-icon-badge{
    min-width: 1.2rem;
    min-height: 1rem;
    transform: translate(20%, 0%);
    aspect-ratio: 1/1;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
}
table.dataTable > thead .sorting::before, table.dataTable > thead .sorting::after, table.dataTable > thead .sorting_asc::before, table.dataTable > thead .sorting_asc::after, table.dataTable > thead .sorting_desc::before, table.dataTable > thead .sorting_desc::after, table.dataTable > thead .sorting_asc_disabled::before, table.dataTable > thead .sorting_asc_disabled::after, table.dataTable > thead .sorting_desc_disabled::before, table.dataTable > thead .sorting_desc_disabled::after {
    bottom: 0.9em !important;
}
body[data-sidebar-size="condensed"]:not([data-layout="compact"]){
    min-height: unset;
}
.dark-mode .input-group-text{
    background-color: #212529;
    border-color: var(--gray-200);
}
.dark-mode .btn-primary:hover{
    background-color: var(--gray-light);
    border-color: var(--gray-light);
}
.ck-body-wrapper{
    position: relative;
}
.dark-mode .ck.ck-input, .dark-mode .ck-widget.raw-html-embed{
    background-color: var(--gray-200);
}
.dark-mode .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .dark-mode .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover, .dark-mode .ck .ck-widget:hover{
    outline-color: var(--gray-200) !important;
}
.dark-mode .ck.ck-input{
    border-color: var(--black);
    color: var(--white);
}
.dark-mode .ck.ck-input:focus{
    border-color: var(--black);
    box-shadow: 0 0 0 3px #212529;
}
.dark-mode .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected.ck-widget_with-selection-handle > .ck-widget__selection-handle{
    background-color: var(--gray-200);
}
.dark-mode .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle, .dark-mode .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle{
    background-color: var(--gray-200);
}
.dark-mode .modal-content{
    background-color: var(--black);
}
.dark-mode .form-check-input:checked{
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}
.dark-mode .btn-secondary:hover{
    background-color: var(--gray-200);
    border-color: var(--gray-200);
    color: var(--body-font-dark);
}
.btn-check:focus + .btn-secondary, .btn-secondary:focus{
    background-color: #ddd;
    color: #000;
    border-color: #ddd;
}
.dark-mode .form-check-input{
    background-color: var(--black);
}
.dark-mode .flatpickr-monthDropdown-months {
    background: #1e1e1e !important;
    color: #fff !important;
}

.dark-mode .flatpickr-monthDropdown-months option {
    background: #1e1e1e !important;
    color: white !important;
}
.employe-profile .row > :last-child .border-end {
  border: none !important;
}
.dark-mode .employee-contact{
    border-color: var(--gray-200);
    background-color: var(--black);
}
body[data-sidebar-color="dark"] .left-side-menu{
    /* border-right-color: var(--gray-200); */
    box-shadow: 0px 0px 16px #313131;
}
body[data-sidebar-color="dark"] .logo-box{
    box-shadow: 0px 0px 16px #000;
}
#results .employe-list > * {
  align-items: center;
}
.dark-mode .list-group-item{
    background-color: var(--gray-200);
    border-color: var(--gray-200);
}
.dark-mode .border-end, .dark-mode .border-top, .dark-mode .border-left, .dark-mode .border-righ{
    border-color: var(--gray-200) !important;
}
body[data-sidebar-color="dark"] .contact-nav .nav-item .nav-link:focus-visible, body[data-sidebar-color="dark"] .contact-nav .nav-item .nav-link:focus, body[data-sidebar-color="dark"] .contact-nav .nav-item .nav-link:focus-within {
  outline: none;
  border-color: var(--gray-200) !important;
}
.dark-mode .employee-contact-details .employe-box{
    border-color: var(--gray-200);
}
.dark-mode .payment-settlement table td p{
    color: var(--body-font-dark);
}
.dark-mode .payment-settlement table td{
    color: var(--body-font-dark);
}
.dark-mode .payment-settlement table td input{
    color: var(--body-font-dark);
}
.dark-mode .modal-header{
    border-bottom-color: var(--gray-200) ;
}
.dark-mode #invoice-template table th, .dark-mode #invoice-template table td, .dark-mode .employee-contact-details table td, .dark-mode .employee-contact-details table th{
    background: transparent;
}
.invoice-payer-detail{
    border-color: var(--gray-200);
}
.dark-mode ul.edit-details-info li label{
    color: var(--body-font-dark);
}
.dark-mode ul.edit-details-info li p{
    color: var(--font-color);
}
::-webkit-scrollbar-thumb {
    border-radius: none !important;
    background: var(--primary);
}
.dark-mode .custom-field-btn a.disabled{
    color: var(--body-font-dark) !important;
}
.dark-mode .custom-field-btn a::after{
    color: var(--primary);
}
.dark-mode .img-thumbnail{
    background-color: var(--gray-200);
    border-color: var(--gray-200);
}
.ui-sortable-handle label {
    cursor: grab;
}
.pay-sel-btn{
    float: right;
}
table.dataTable > tbody > tr.child span.dtr-title{
    min-width: 35% !important;
    max-width: 35%;
}
table.dataTable > tbody > tr.child ul.dtr-details > li{
    display: flex;
}
table.dataTable > tbody > tr.child ul.dtr-details{
    width: 100%;
}
table.dataTable > tbody > tr.child span.dtr-data {
    word-break: break-word;
}
table.dataTable > tbody > tr.child span.dtr-data p{
    margin-bottom: 5px;
}
#newNotesModal .modal-dialog , #notesEmailModal .modal-dialog{
    display: flex;
    margin-top: auto;
}
#my-events-table small{
    font-size: 0.80rem;
}
 .employee-contact .employee-contact .employee-contact-header{
    background: #fff;
    color: #fff;
    padding: 13px 28px 13px 28px;
    font-weight: 600;
    border-bottom-color: transparent;
    margin-bottom: 0px;
    position: relative;
}
 .employee-contact .employee-contact .employee-contact-header .employees-main-heading{
    font-size: 20px;
    position: absolute;
    top: -12px;
    left: 24px;
    background: #fff;
    padding-left: 5px;
    padding-right: 5px;
}
.card.emp-main-card{
    background-color: transparent;
    border: none;
    border-radius: unset;
    box-shadow: none;
}
.card.emp-main-card .card-body.emp-main-body{
    padding: 0 0.80rem;
}
.employee-contact.no-header{
    padding: 20px 0px 20px 0px;
}
.contact-admin .sub-tab {
    background-color: #fff;
    padding: 25px 28px 25px 28px;
}
.sub-tab .dt-responsive:first-child{
    padding-bottom: 0;
}
.sub-tab #div_payment_list.dt-responsive{
    padding-bottom: 0;
}
.contact-admin .employe-tab-content.sub-tab{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 25px;
    padding-bottom: 25px;
}
#pills-donation-sub .dt-responsive{
    padding-bottom: 0;
}
#pills-recurring-donation .dt-responsive{
    padding-bottom: 0;
}
#pledge-donation-listing .dt-responsive{
    padding-bottom: 0;
}
.contact-admin .employe-tab-content.sub-tab .employee-contact{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 25px;
    box-shadow: none;
}
.contact-admin .employe-tab-content.sub-tab .employee-contact .employees-main-heading{
    position: absolute;
    top: -13px;
    background-color: #fff;
    padding: 0px 6px;
}
.contact-admin .employe-tab-content.sub-tab .invoice-other-detail .employee-contact {
    margin-top: 20px !important;
}
.total_settled{margin-top: 15px;}
#paid-donation .table{
    margin-bottom: 20px;
}
#paid-payment > :last-child {
    margin-bottom: 10px;
}
#pills-log .dt-responsive{
    padding-bottom: 20px;
}
.employee-contact.pb-25{
    padding-bottom: 25px;
}
.side-donations .dt-responsive{
    padding-bottom: 20px !important;
}
.card.side-donations{
    background: transparent;
    border: none;
}
.side-donations .card-body {
    padding: 0;
    border: none;
}
.card.side-donations .card-body .employe-tab-content{
    background-color: #fff;
}
.employe-list-card.event .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.employe-list-card.event .card-body .employe-tab-content .employee-contact{
    padding-bottom: 10px;
}
.employe-list-card.event .card-body .employe-tab-content .employee-contact ul.edit-details-info{
    margin-bottom: 0;
}
.employe-list-card.user-card{
    background-color: transparent;
    border: none;
}
.employe-list-card.user-card .card-body {
    padding-left: 0;
    padding-right: 0;
}
.employe-list-card.user-card .employe-list-card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.employe-list-card.membership-seting{
    background-color: transparent;
    border: none;
}
.employe-list-card.membership-seting .card-body{
    padding: 0;
}
.employe-list-card.membership-seting .employe-tab-content.sub-tab{
    background-color: #fff;
}
.employe-list-card.membership-seting .employe-tab-content.sub-tab .dt-responsive{
    padding-bottom: 15px;
}
.employe-list-card.tender-card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.employe-list-card.donation-type-card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.employe-list-card.expense-card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.employe-list-card.pay-card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.employe-list-card.mag-invo-card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.roles-card{
    background-color: transparent;
    border: none;
}
.roles-card .card-body {
    padding-left: 0;
    padding-right: 0;
}
.roles-card .employe-list-card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.employe-list-card.event-regis .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.employe-list-card.intel-expe-card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.roles-card .employee-contact{
    border: 1px solid #6c757d;
    position: relative;
    margin-top: 25px;
    background: #ffffff;
    border-radius: 6px;
    padding: 0px 0px 10px 0px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    margin-top: 30px;
    border-radius: .25rem;
}
.roles-card .employee-contact-header{
    padding: 15px 28px 15px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 0px;
    border-bottom: 1px solid #7f7f7f12;
    background-color: #7f7f7f12;
}
.roles-card .employee-contact-body{
    padding: 0px 28px 0px 28px;
}
.roles-card .employee-contact .employee-contact{
    box-shadow: none;
    margin-top: 35px !important;
    margin-bottom: 17px;
}
.roles-card .employee-contact .employees-main-heading{
    position: unset;
    background-color: transparent;
    top: -23px;
    left: 20px;
    font-size: 24px;
    margin: 0;
    color: #000;
}
.site-set .employee-contact{
    border: 1px solid #6c757d;
    position: relative;
    background: #ffffff;
    border-radius: 6px;
    padding: 0px 0px 4px 0px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    margin-top: 30px;
    border-radius: .25rem;
}
.site-set .employee-contact-header{
    padding: 15px 28px 15px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 0px;
    border-bottom: 1px solid #7f7f7f12;
    background-color: #7f7f7f12;
}
.site-set .employee-contact-body{
    padding: 0px 28px 0px 28px;
}
.site-set .employee-contact .employee-contact{
    box-shadow: none;
    margin-top: 35px !important;
    margin-bottom: 17px;
}
.site-set .employee-contact .employees-main-heading{
    position: unset;
    background-color: transparent;
    top: -23px;
    left: 20px;
    font-size: 24px;
    margin: 0;
    color: #000;
}
.site-set .card-header {
    padding: 15px 28px 15px 28px;
}
.card{
    overflow: hidden;
}
.contact-dashboard .employee-contact{
    border: 1px solid #6c757d;
    position: relative;
    margin-top: 25px;
    background: #ffffff;
    border-radius: 6px;
    padding: 0px 0px 25px 0px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    margin-top: 30px;
    border-radius: .25rem;
}
.contact-dashboard .employee-contact-header{
    padding: 15px 28px 15px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 0px;
    border-bottom: 1px solid #7f7f7f12;
    background-color: #7f7f7f12;
}
.contact-dashboard .employee-contact-body{
    padding: 0px 28px 0px 28px;
}
.contact-dashboard .employee-contact .employee-contact{
    box-shadow: none;
    margin-top: 35px !important;
    margin-bottom: 17px;
}
.contact-dashboard .employee-contact .employees-main-heading{
    position: unset;
    background-color: transparent;
    top: -23px;
    left: 20px;
    font-size: 24px;
    margin: 0;
    color: #000;
}
.contact-dashboard {
    margin-bottom: 20px;
}
.contact-edit-pro .employee-contact{
    border: 1px solid #6c757d;
    position: relative;
    margin-top: 25px;
    background: #ffffff;
    border-radius: 6px;
    padding: 0px 0px 10px 0px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    margin-top: 30px;
    border-radius: .25rem;
}
.contact-edit-pro .employee-contact-header{
    padding: 15px 28px 15px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 0px;
    border-bottom: 1px solid #7f7f7f12;
    background-color: #7f7f7f12;
}
.contact-edit-pro .employee-contact-body{
    padding: 0px 28px 0px 28px;
}
.contact-edit-pro .employee-contact .employee-contact{
    box-shadow: none;
    margin-top: 35px !important;
    margin-bottom: 17px;
}
.contact-edit-pro .employee-contact .employees-main-heading{
    position: unset;
    background-color: transparent;
    top: -23px;
    left: 20px;
    font-size: 24px;
    margin: 0;
    color: #000;
}
.contact-membership{
    margin-bottom: 20px;
}
.contact-membership .employee-contact{
    border: 1px solid #6c757d;
    position: relative;
    margin-top: 25px;
    background: #ffffff;
    border-radius: 6px;
    padding: 0px 0px 25px 0px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    margin-top: 30px;
    border-radius: .25rem;
}
.contact-membership .employee-contact-header{
    padding: 15px 28px 15px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 0px;
    border-bottom: 1px solid #7f7f7f12;
    background-color: #7f7f7f12;
}
.contact-membership .employee-contact-body{
    padding: 0px 28px 0px 28px;
}
.contact-membership .employee-contact .employee-contact{
    box-shadow: none;
    margin-top: 35px !important;
    margin-bottom: 17px;
}
.contact-membership .employee-contact .employees-main-heading{
    position: unset;
    background-color: transparent;
    top: -23px;
    left: 20px;
    font-size: 24px;
    margin: 0;
    color: #000;
}
.contact-credit .employee-contact{
    border: 1px solid #6c757d;
    position: relative;
    margin-top: 25px;
    background: #ffffff;
    border-radius: 6px;
    padding: 0px 0px 25px 0px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    margin-top: 30px;
    border-radius: .25rem;
}
.contact-credit .employee-contact-header{
    padding: 15px 28px 15px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 0px;
    border-bottom: 1px solid #7f7f7f12;
    background-color: #7f7f7f12;
}
.contact-credit .employee-contact-body{
    padding: 0px 28px 0px 28px;
}
.contact-credit .employee-contact .employee-contact{
    box-shadow: none;
    margin-top: 35px !important;
    margin-bottom: 17px;
}
.contact-credit .employee-contact .employees-main-heading{
    position: unset;
    background-color: transparent;
    top: -23px;
    left: 20px;
    font-size: 24px;
    margin: 0;
    color: #000;
}
.contact-donation-card .employe-tab-content{
    background-color: #fff;
}
.contact-donation-card .dt-responsive{
    padding-bottom: 20px !important;
}
.contact-invoice .employe-tab-content{
    background-color: #fff;
}
.contact-invoice .dt-responsive{
    padding-bottom: 20px !important;
}
.contact-finac .employe-tab-content{
    background-color: #fff;
}
.contact-finac .dt-responsive{
    padding-bottom: 20px !important;
}
.contact-event-list.employe-tab-content{
    background-color: #fff;
}
.contact-event-list .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.contact-event-regs.employe-tab-content{
    background-color: #fff;
}
.contact-event-regs .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.website-card .employee-contact{
    border: 1px solid #6c757d;
    position: relative;
    margin-top: 25px;
    background: #ffffff;
    border-radius: 6px;
    padding: 0px 0px 4px 0px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    margin-top: 30px;
    border-radius: .25rem;
}
.website-card .employee-contact-header{
    padding: 15px 28px 15px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 0px;
    border-bottom: 1px solid #7f7f7f12;
    background-color: #7f7f7f12;
}
.website-card .employee-contact-body{
    padding: 0px 28px 0px 28px;
}
.website-card .employee-contact .employee-contact{
    box-shadow: none;
    margin-top: 35px !important;
    margin-bottom: 17px;
}
.website-card .employee-contact .employees-main-heading{
    position: unset;
    background-color: transparent;
    top: -23px;
    left: 20px;
    font-size: 24px;
    margin: 0;
    color: #000;
}
.website-card .card-header {
    padding: 15px 28px 15px 28px;
}
.website-card .dt-responsive{padding-bottom: 20px;}
.website-card.card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.website-card-two.card .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.website-card.card .card-body .dt-responsive{padding-bottom: 0px;}
.website-card-two.card .card-body .employee-contact{
    padding: 30px 20px 6px;
}
.form-image-view{
    margin-top: 10px;
}
.form-image-view img{
    max-height: 150px;
}
#positions-table .btn-primary{
    white-space: nowrap;
}
.contact-admin .employe-list-card{
    overflow: visible;
}


/* -------- preloader --------- */

 /* Loader full-screen background */
 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #ffffff;
     /* Light background */
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 99999;
     transition: opacity 0.4s ease;
     overflow-x: hidden;
 }

 /* Spinner */
 .spinner {
     width: 45px;
     height: 45px;
     border: 4px solid #ccc;
     border-top-color: #000;
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 /* Animation */
 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* Hide smoothly */
 #preloader.fade-out {
     opacity: 0;
     pointer-events: none;
     overflow-x: hidden;
 }


 .dots-loader {
     display: flex;
     gap: 6px;
 }

 .dots-loader span {
     width: 10px;
     height: 10px;
     background: #000;
     border-radius: 50%;
     animation: bounce 0.6s infinite alternate;
 }

 .dots-loader span:nth-child(2) {
     animation-delay: 0.2s;
 }

 .dots-loader span:nth-child(3) {
     animation-delay: 0.4s;
 }

 @keyframes bounce {
     to {
         opacity: 0.3;
         transform: translateY(-8px);
     }
 }

/* -------- preloader --------- */
body[data-sidebar-color="dark"] .event-description .ck.ck-toolbar {
    border: 1px solid var(--gray-200) !important;   /* red border */
}
.dark-mode .ck.ck-editor__main > .ck-editor__editable{
    border: 1px solid var(--gray-200) !important;   /* red border */
}


.email-note-modal td .img-thumbnail{
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
}
.email-note-modal td i {
     color:var(--primary);
     font-size: 36px;
}
/*  */
.fc .fc-button-primary{
    background-color: #13601d;
    border-color: #13601d;
}
.fc .fc-button-primary:focus{
    box-shadow: unset;
}
.ck.ck-button.ck-on, a.ck.ck-button.ck-on{
    color: #000 !important;
    background: var(--ck-color-button-default-hover-background) !important;
}
.ck.ck-button:active, .ck.ck-button:focus, a.ck.ck-button:active, a.ck.ck-button:focus{
    outline: unset !important;
    box-shadow: unset !important;
    border: unset !important;
}
.website-event-table .w-8{
    width: 8% !important;
}
.director-contact .w-8{
    width: 8% !important;
}
.publication-table .w-8{
    width: 8% !important;
}
.contact-event-regs .w-8{
    width: 8% !important;
}
.employe-list-card .search-area .filter-dropdown.show {
    overflow-y: auto;
    max-height: calc(100vh - 17vh);
}
.website-card.employe-list-card {
    margin-bottom: 30px;
} 
.contact-donation-card form .employee-contact .employees-main-heading {
    position: absolute;
    top: -15px;
    background: #fff;
}
.contact-donation-card form .employee-contact {
    padding: 20px;
}
.contact-credit.contact-invoice .card-body{
    padding-left: 20px;
    padding-right: 20px;
}
.contact-credit.contact-invoice .employee-contact-body{
    padding-left: 20px;
    padding-right: 20px;
}
.contact-credit.conatct-payment .employe-tab-content{
    padding-left: 0px;
    padding-right: 0px;
}
.content-page .content {
    margin-bottom: 30px;
}
#sidebar-menu > ul > li > a > span{
    margin-right: 10px;
}
.menu-arrow{
    margin-right: 0px;
}
.list-group-item{
    word-break: break-word;
}

.user-edit-profile .employee-contact{
    border: 1px solid #6c757d;
    position: relative;
    background: #ffffff;
    border-radius: 6px;
    padding: 0px 0px 4px 0px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    margin-top: 30px;
    border-radius: .25rem;
}
.user-edit-profile .employee-contact-header{
    padding: 15px 28px 15px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 0px;
    border-bottom: 1px solid #7f7f7f12;
    background-color: #7f7f7f12;
}
.user-edit-profile .employee-contact-body{
    padding: 0px 28px 0px 28px;
}
.user-edit-profile .employee-contact .employee-contact{
    box-shadow: none;
    margin-top: 35px !important;
    margin-bottom: 17px;
}
.user-edit-profile .employee-contact .employees-main-heading{
    position: unset;
    background-color: transparent;
    top: -23px;
    left: 20px;
    font-size: 24px;
    margin: 0;
    color: #000;
}
.user-edit-profile .card-header {
    padding: 15px 28px 15px 28px;
}
.contact-dashboard .card-body .row > *{
    display: flex;
    flex-direction: column;
}
.contact-dashboard .card-body .row > * .payment-card{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.contact-dashboard .card-body .row > * .payment-card .row{
    height: 100%;
}