:root {
    --bg-light-gray: #f2f2f2;
    --dark-black: #222;
}



.application-login-section {
    background-color: #fff;
    height: 100vh;
    width: 100%;
     display: flex;
    justify-content: space-between;
    align-items: center; 
     /*background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0.296) 100%), url(../img/baner/1.jpg);*/
    backdrop-filter: blur(10px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 

}

.auth-left-cs {
    /*background-image: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, #22222200 100%), url(../img/baner/special/1.jpg);*/
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    height: 100vh;
    width: 50%;
    display: flex;
    justify-content: Center;
    align-items: center;
}

.auth-left-cs video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-left {
    width: 30%;
    background-color: #fff;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 1px solid #113b85;
    padding: 20px;
}

.login-field-box {
    max-width: 500px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;

}

.login-field-box img {
    width: 180px;
}

.auth-left .login-field-box h2 {
    font-weight: 600;
    color: #000;
    font-size: 35px;
}

.auth-left .login-field-box p {
    text-align: center;
    line-height: 27px;
    font-size: 15px;
    color: #000;
}

.auth-left .login-field-box input {
    height: 55px;
}

#rememberMe {
    width: 18px !important;
    height: 18px !important;
    border-color: #222 !important;
}

.login-box-latest {
   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 100%; */
    margin: auto;
    /*margin-top: -120px;*/
    background-color: #fff;
    /*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
    border-radius: 25px;
}

.login-box-latest .btn--form {
    width: 75%;
    border-radius: 40px;
    color: #fff;
    background-color: #13889C;
}

.login-box-latest .btn--form:hover {
    background-color: #0d6b7b;
}

/*.login-box-latest .btn--form.color-1 {*/
/*    background-color: #ea5050;*/
/*}*/
/*.login-box-latest .btn--form.color-1:hover {*/
/*    background-color: #b52424;*/
/*}*/

/*.login-box-latest .btn--form.color-2 {*/
/*    background-color: #45c73e;*/
/*}*/
/*.login-box-latest .btn--form.color-2:hover {*/
/*    background-color: #1d9017;*/
/*}*/

/*.login-box-latest .btn--form.color-3 {*/
/*    background-color: #5489d1;*/
/*}*/
/*.login-box-latest .btn--form.color-3:hover {*/
/*    background-color: #1e4884;*/
/*}*/
.login-box-latest .btn--form-login {
    width: 60%;
    border-radius: 10px;
    background-color: #0d6efd;
}

.login-box-latest .btn--form-login:hover {
    border-radius: 40px;
     background-color: #166e82;
}

.login-box-latest h4 {
    font-size: 18px;
    text-align: center;
    line-height: 34px;
    font-weight: 600;

}

.login-box-latest input[type="text"],
.login-box-latest input[type="password"] {
    height: 50px !important;
    /*padding:0 !important;*/
    border: 0 !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
    color: #000 !important;
    font-weight: 300 !important;

}

.login-box-latest input[type="text"]::placeholder,
.login-box-latest input[type="password"]::placeholder {
    color: #000 !important;

}

.login-box-latest input[type="text"]:focus,
.login-box-latest input[type="password"]:focus {
    border-bottom: 2px dashed #ccc !important;
}

.login-screen-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;

}

.login-screen-left h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 600;
}

.login-screen-left p {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.sidebar-cont {
    position: relative;
    height: 100%;

}

.sidebar-profile {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    /* top: 100%; */
    background-color: #3b3b3b;
}

.sidebar-profile .side-profile-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    gap: 10px;
}

.sidebar-profile .side-profile-box img {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px dashed #fff;
}

.sidebar-profile .side-profile-box .side-profile-dt {
    padding-left: 10px;
}

.sidebar-profile .side-profile-box .side-profile-dt h3 {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.sidebar-profile .side-profile-box .side-profile-dt p {
    margin: 0;
    font-size: 12px;
    margin-top: 2px;
    color: #20cc20;
    font-weight: 600;
}

.header-top-cs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    padding-right: 20px;

}

.header-top-cs .header-section-dt h3 {
    font-size: 27px;
    font-weight: 500;
    color: #000;
    margin: 0;
}

.header-top-cs .header-section-dt p {
    font-size: 14px;
    margin: 0;
    color: #858585;
    font-weight: 400;
}

.header-top-cs .header-section-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    width: 56%;
}

.header-top-cs .header-section-right a {
    font-size: 16px;
    border: 1px solid #ababab;
    min-width: 45px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    background: #ffffff6b;
}

.header-top-cs .header-section-right a i {
    color: #000;
}

.section-top-padding {
    padding-top: 20px;
}

.progress-bar {
    background-color: #025187 !important;
}

.dashboard-top-section select {
    height: 45px;
    /* background-color: #eeeeee; */
    border: 0;
    outline: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-black);
    border: 1px solid #9f9b9b;
}

.dashboard-top-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dashboard-top-section ul li {
    margin: 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: #9a9a9a;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.dashboard-top-section ul li span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-top-section ul li span.bg_Gray {
    background-color: #ababab;
}

.dashboard-top-section ul li span.bg_Orange {
    background-color: #ea8436;
}

.dashboard-top-section ul li span.bg_Green {
    background-color: #16a816;
}

.dashboard-list-btns ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 20px;
}

.dashboard-list-btns ul li {
    margin-right: 5px;
}

.dashboard-list-btns ul li a {
    padding: 7px 11px;
    text-decoration: none;
    font-size: 14px;
    /* border: 1px solid #025187; */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    border-radius: 5px;
    transition: 0.5s;
}

/* 
.dashboard-list-btns ul li a.active {
    background-color: #025187;
    color: #fff;
} */

.dashboard-list-btns ul li a:hover {
    /* background-color: #025187;
    color: #fff; */
    border-radius: 40px;
}

.dashboard-list-btns ul li a.bg_1 {
    background-color: #39B27C;
}

.dashboard-list-btns ul li a.bg_2 {
    background-color: #1a7bb9;
}

.dashboard-list-btns ul li a.bg_3 {
    background-color: #f8d347;
}

.dashboard-list-btns ul li a.bg_4 {
    background-color: #b52323;
}

.dashboard-list-btns ul li a.bg_5 {
    background-color: #cb4ec9;
}

.dashboard-list-btns ul li a.bg_6 {
    background-color: #7a339e;
}

.dashboard-project-view {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.dashboard-project-view h3 {
    /* background-color: #afce333b; */
    color: #000;
    border: 1px solid #222;
    padding: 15px 15px;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    width: 100%;
    border-radius: 5px;
}

.dashboard-project-view h3 span {
    margin-left: 15px;
}

.dashboard-project-view ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px 0 0 30px;
}

.dashboard-project-view ul li {
    width: 47%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    margin-bottom: 30px;
    font-size: 16px;
    /* font-weight: 600; */
    color: #000;
}

.dashboard-project-view ul li:nth-child(even) {
    padding-left: 40px;
}

.dashboard-project-view ul li:nth-child(even)::before {
    left: 13px;
}

.dashboard-project-view ul li span {
    font-weight: 400;
    font-size: 14px;
    color: #575656;
}

.dashboard-project-view ul li::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #aec942;
    border-radius: 50%;
    border: 4px solid #d9e89d;
    position: absolute;
    left: -27px;
    top: 4px;

}

/* canvas#doughnut {
    width: 300px !important;
    height: 300px !important;
    margin: auto;
} */

.flex-col-bet {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-view-bottom .col-lg-4 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.project-view-bottom .project-view-bottom-icon {
    width: 50px;
    height: 50px;
    border: 1px solid #025187;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-view-bottom .project-view-bottom-icon i {
    font-size: 18px;
    color: #025187;
}

.project-view-bottom .project-view-bottom-dt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.project-view-bottom .project-view-bottom-dt h4 {
    font-size: 25px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.project-view-bottom .project-view-bottom-dt p {
    margin: 0;
    font-size: 16px;
    color: #575656;
    font-weight: 600;
}

.border-right-cs {
    border-right: 1px solid #ccc;
}

.add-project-btn {
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 600;
    height: 37px;
    background-color: #113b85;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: fit-content;
    transition: 0.5s;
}

.add-project-btn:hover {
    border-radius: 40px;
    color: #fff;

}

.dashboard-top-section {
    margin-bottom: 30px;
}

.project-progress-main-container {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.project-process-box ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-process-tree-box {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 3;
}

.project-process-tree-box span {
    font-size: 15px;
    font-weight: 400;
}

.project-process-tree-box h6 {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.project-process-tree-box i {
    font-size: 20px;
}

.project-process-tree-box i.fs_30 {
    font-size: 30px;
}

.project-process-tree-box-short {
    position: absolute;
    padding: 10px;
    background-color: #e9fd98ed;
    border: 1px solid #025187;
    top: -73px;
    width: 185px;
    border-radius: 10px;

}

.project-process-tree-box-short span {
    width: 25px;
    height: 25px;
    background-color: #e9fd98ed;
    border: 1px solid #025187;
    border-left: 0;
    border-top: 0;
    display: flex;
    margin: auto;
    margin-bottom: -22px;
    rotate: 46deg;
}

.project-process-tree-box-short p {
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    margin: 0;
}

.project-process-box {
    position: relative;
}

.project-process-box .project-process-line {
    width: 100%;
    height: 4px;
    background-color: #d5d5d5;
    position: absolute;
    left: 0px;
    top: 45px;
}

.project-process-box .project-process-line-2 {
    width: 50%;
    /* height: 4px; */
    border: 2px dashed #15ee3a;
    position: absolute;
    left: 0px;
    top: 45px;
}

.v-none {
    visibility: hidden;
}

.project-process-tree-box i.fa-circle-check {
    color: #2ec517;
    background: #fff;
}

.project-process-tree-box i.fa-stopwatch {
    color: #d5af15;
    background: #fff;
}

.project-process-tree-box i.fa-circle-info {
    color: #f70e0e;
    background: #fff;
}

.dashboard-project-container p {
    margin-bottom: 0;
    font-size: 19px;
    font-weight: 500;
    color: #000;
}

.dashboard-project-container p span {
    font-size: 14px;
    font-weight: 400;
}

.dashboard-project-container p span i {
    margin: 0 10px;
}

.main-table-container {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
     box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; 
     background: rgba(255, 255, 255, 0.771); 
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.main-table-container {
       position: relative !important;
    width: 100% !important;
    padding: 24px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%) !important;
    border: 1px solid #e7edf5 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 25px rgba(1, 42, 107, 0.06), 0 1px 4px rgba(0, 0, 0, 0.10) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
}
.main-table-container::after {
    content: "" !important;
    position: absolute !important;
    width: 190px !important;
    height: 190px !important;
    top: -105px !important;
    right: -65px !important;
    border-radius: 50% !important;
    background: rgba(1, 42, 107, 0.035) !important;
    border: 1px solid rgba(1, 42, 107, 0.045) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}
.main-table-container-top-btns-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.main-table-container-top-btns-box a {
    width: fit-content;
    padding: 6px 13px;
    border-radius: 5px;
    font-size: 14px;
    color: #fff;
    background-color: #e04d4d;
    text-decoration: none;
    font-weight: 600;
    transition: 0.5s;
    border: 1px solid #e04d4d;
}

.main-table-container-top-btns-box a i {
    margin-left: 5px;
}

.main-table-container-top-btns-box a:hover {
    border-radius: 40px;
    background-color: transparent;
    color: #e04d4d;
    border: 1px dashed #e04d4d;
}

.main-table-container-top-filter input,
.main-table-container-top-filter select {
    height: 37px;
    border-radius: 4px;
    font-size: 15px;
}

.main-table-container-top-filter label {
    font-weight: 600;
    margin-bottom: 5px;
}


.entry-select {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
}

.entry-select p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #000;
}

.entry-select select {
    width: 100px;
    background-color: #efefef;
    border: 0;
}

.table_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
}

.table_bottom p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #000;
    white-space: nowrap;
}

.table-pagination .page-item {
    margin: 0 5px;
}

.table-pagination .page-item .page-link {
    border-radius: 10% !important;
    padding: 0;
    padding: 4px 11px;
    font-size: 14px;
    border: 0;
    color: #222;
}

.table-pagination .page-item .page-link.page_active {
    background-color: #222;
    color: #fff;
}

.table-pagination .pagination {
    margin: 0;
}

.td-project-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

}

.td-project-box img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: cover;
}

.td-project-box .td-project-info {
    padding-left: 10px;
}

.td-project-box .td-project-info h3 {
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: #000;

}

.td-project-box .td-project-info p {
    font-size: 14px;
    text-align: left;
    color: #636363bf;
    font-weight: 400;
}

.td-project-dt h3 {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #000;
    margin-bottom: 2px;
    line-height: 22px;
}

.td-project-dt small {
    font-size: 13px;
    text-align: center;
    color: #636363bf;
    font-weight: 500;
}

.action-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

tr td div.action-box a {
    font-size: 13px;
    font-weight: 500;
    padding: 4px 15px;
    white-space: nowrap;
    color: #fff !important;
    background-color: #089748;
    border-radius: 30px;
    border-radius: 25px !important;
}

.action-box a.dlt {
    background-color: #970808;
}

.action-box a.view {
    background-color: #2c6c74;
}

.action-box a.cstm {
    background-color: #c7ad19;
}

.action-box a.dropdown-toggle {
    border-radius: 2px;
}

.action-box .dropdown ul li a {
    padding: 8px;
    background-color: transparent;
    color: #000 !important;
    font-size: 12px;
}

.action-box .dropdown ul li a i {
    font-size: 15px;
}

.action-box .dropdown ul li a.edit {
    color: #027009 !important;
}

.action-box .dropdown ul li a.dlt {
    color: #b23939 !important;
}

.action-box .dropdown ul li a.cstm {
    color: #707002 !important;
}

.action-box .dropdown ul li a.cstm1 {
    color: #027049 !important;
}

.action-box .dropdown ul li a.cstm2 {
    color: #023970 !important;
}

.action-box .dropdown ul li a.cstm3 {
    color: #70025a !important;
}

.action-box .dropdown ul li a.cstm4 {
    color: #704d02 !important;
}

.badge-progess {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 15px;
    white-space: nowrap;
    color: #3fc943 !important;
    background-color: #6dd47f3d;
    border-radius: 30px;
}

.badge-completed {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 15px;
    white-space: nowrap;
    color: #45c50a !important;
    background-color: #94f26875;
    border-radius: 30px;
}

.badge-cancelled {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 15px;
    white-space: nowrap;
    color: #d63b35 !important;
    background-color: #e36b6733;
    border-radius: 30px;
}

td.department-project-td {
    min-width: 250px;
}

.progres-cs {
    width: 80%;
    margin: auto;
    height: 9px;
}

.modal-form-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.modal-form-btns button {
    width: 110px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #236c64;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;

}

.modal-form-btns button:first-child {
    background-color: #970808;
}

.modal-form-btns button:hover,
.modal-form-btns a.pdf-download:hover {
    border-radius: 40px;
}

.modal-form-btns a.pdf-download {
    width: 180px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #b23939;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;
}

.table-csv-btns {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-csv-btns ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-csv-btns ul li {
    margin: 0 4px;
}

.table-csv-btns ul li a {
    padding: 4px 15px;
    background-color: #b23939;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.5s;
}

.table-csv-btns ul li a:hover {
    border-radius: 40px;
}

.dashboard-project-team {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.dash-team-box-top h3 {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    color: #000;
    margin-bottom: 5px;
}

.dash-team-box-top p {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
    color: #6a6a6a;
}

.project-team-main-container {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* background-color: #f7f7f7; */
}

.project-team-main-container h3 {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    color: #000;
    margin-bottom: 5px;
}

.project-team-main-container p {
    font-size: 13px;
    margin: 0;
    font-weight: 500;
    color: #6a6a6a;
}

.project-team-main-container ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.project-team-main-container ul li img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
}

.project-team-main-container ul li {
    margin-left: -10px;
}

.eclipse-btn {
    font-size: 23px;
    color: #000;
}

.df-flex {
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.dasboard-project-bottom-right {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

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

.header-display p {
    color: #025187;
    margin: 5px;
    font-size: 1.2rem;
    word-spacing: 0.5rem;
}

pre {
    padding: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 1.2rem;
    color: #025187;
}

.days,
.week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: auto;
    /* padding: 0 20px; */
    justify-content: space-between;

}

.week div,
.days div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    width: 2.5em;
    border-radius: 100%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* .days div:hover {
    background:#f2f2f2;
    color: rgb(40, 201, 25);
    cursor: pointer;
  } */
.week div {
    opacity: 0.5;
}

.current-date {
    background-color: var(--accent);
    color: var(--white);
}

.display-selected {
    margin-bottom: 10px;
    /* padding: 20px 20px; */
    text-align: center;
}

.calendar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.dasboard-project-bottom-right h3 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.dashboard-leads-box {
    padding: 10px;
    /* border: 1px solid #ccc; */
    border-radius: 5px;
    background-color: #efefef;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.dashboard-leads-box img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
}

.dash-leads-dt {
    padding-left: 20px;
    width: 100%;
}

.dash-leads-dt h6 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin-bottom: 0px;
}

.dash-leads-dt h6 span {
    font-weight: 400;
    font-size: 13px;
    background-color: #9ca380;
    border-radius: 40px;
    padding: 4px 9px;
    color: #fff;
}

.dash-leads-dt small {
    font-weight: 500;
    font-size: 13px;
    color: #676464;
}

.project-main-overview {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.btn-common {
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 600;
    height: 37px;
    background-color: #e04d4d;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 20px; */
    width: fit-content;
    transition: 0.5s;
}

.btn-common:hover {
    border-radius: 40px;
    color: #fff;

}

.btn-more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    color: #000;
}

.widget-title {
    font-size: 28px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.project-dashboard-main-box .project-main-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.project-dashboard-main-box .project-main-title img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover;
}

.project-dashboard-main-box .project-main-title h3 {
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

.project-dashboard-main-box {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.project-main-desc {
    padding-top: 10px;
}

.project-main-desc p {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 10px;
}

.project-main-desc span {
    background: antiquewhite;
    color: #d7442b;
    padding: 8px 19px;
    font-weight: 600;
    border-radius: 40px;
    font-size: 14px;
}

.df-flex-col-bet {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.project-step {
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
}

.project-step ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.project-step ul li {
    margin: 7px 0;
}

.project-step ul li a {
    padding: 10px 15px;
    display: flex;
    width: 100%;
    background-color: #eff4db;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #BDD460;
    border-radius: 40px;
    color: #000;
    font-size: 17px;
    font-weight: 600;
}

.project-step ul li a span {
    width: 40px;
    height: 40px;
    background-color: #d8dec0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.project-step ul li a.active {
    background-color: #8aa034;
    color: #fff;
}

.project-step ul li a.active span {
    background-color: #fff;
    color: #BDD460;
}

.project-create-step {
    /* padding: 15px; */
    background-color: #fff;
    margin: 20px 0 40px 0;
    /* border: 1px solid #ccc; */
    border-radius: 8px;


}

.project-create-step ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;

}

.project-create-step ul li a {
    color: #909090;
    font-weight: 600;
    font-size: 16px;

}

.project-create-step ul li a span {
    width: 180px;
    height: 5px;
    background-color: #c7c7c7;
    display: flex;
    border-radius: 10px;
    margin-bottom: 10px;
}

.project-create-step ul li a.active span {
    background-color: #113b85;
}

.project-create-step ul li a.active {
    color: #000;
}

.project-create-container {

    padding: 20px;
    background-color: #ffffffdb;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.o-f-p {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: #000;
    margin-bottom: 5px;
}

.project-create-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 19px;
}

.project-create-btns a {
    padding: 6px 20px;
    background-color: #113b85;
    border: 1px solid #113b85;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border-radius: 4px;
    text-decoration: none;
    align-items: center;
    display: flex;
    justify-content: center;
    transition: 0.5s;
    border-radius: 40px;

}

.project-create-btns a:hover {
    background-color: #023970;
    color: #fff;
    border-radius: 40px;
}

.project-create-btns a:first-child {
    background-color: transparent;
    color: #b23939;
    border-color: #b23939;
}

.project-create-btns a:first-child:hover {
    background-color: #b23939;
    color: #fff;
}


.project-preview-table tr th {
    padding: 15px;
}

.project-preview-table tr th .project-prev-td {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #5f5f5f;
}

.project-preview-table tr td {
    font-size: 15px;
    line-height: 28px;
    font-weight: 600;
    padding: 15px;
}

.project-success {
    border-radius: 15px;
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.project-success img {
    width: 200px;
}

.project-success h3 {
    margin: 20px 0;
    font-size: 25px;
    color: #000;
    font-weight: 600;
}

.project-success a {
    width: 100px;
    background-color: #b23939;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    text-decoration: none;
    transition: 0.5s;
}

.project-success a:hover {
    border-radius: 40px;
}

.mt_70 {
    margin-top: 70px !important;
}

.project-updates-top h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
}

.project-updates-top p {
    font-size: 15px;

}

.project-sidebar {
    /* background-color: #fff; */
    padding: 5px;
    /* border: 1px solid #ccc; */
    border-radius: 5px;
    /* position: sticky;
    top: 100px; */
}

.project-sidebar ul {
    padding: 15px;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgb(80 78 78 / 14%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(7px);
    border-radius: 10px;
}

.project-sidebar ul li a {
    padding: 5px 23px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background-color: #ffffff3d !important;
    /* border-bottom: 1px solid #2222222b; */
    border: 1px solid #ffffff3d !important;
    font-weight: 500;
    border-radius: 5px;
}

.project-sidebar ul li a.active {
    background-color: #fff !important;
    color: #222 !important;
    border-radius: 40px;
}

.project-sidebar ul li a:hover {
    border-radius: 40px;
}

.project-sidebar ul li a.a-disable {
    background-color: #d2d2d2;
    color: #000;
}

.project-sidebar ul li a.bg-nav-top-1 {
    background-color: #ffc107;
    border-color: #ffc107;
}

.project-sidebar ul li a.bg-nav-top-2 {
    background-color: #b528da;
    border-color: #b528da;
}

.project-sidebar ul li a.bg-nav-top-3 {
    background-color: #2fb4c8;
    border-color: #2fb4c8;
}

.project-sidebar ul li a.bg-nav-top-4 {
    background-color: #e045c0;
    border-color: #e045c0;
}

.project-sidebar ul li a.bg-nav-top-5 {
    background-color: #fd7f0d;
    border-color: #fd7f0d;
}

.project-list-container-main h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-list-container-main-member {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.project-list-container-main-member-img {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.project-list-container-main-member-img img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.project-list-container-main-member p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.project-list-container-main-member p span {
    padding: 3px 10px;
    border-radius: 5px;
    background: #025187;
    font-weight: 500;
    color: #ffff;
    font-size: 11px;
    margin-left: 10px;
}

.project-list-container-main-member-img p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333333;
}

.project-list-container-main-desc h5 {
    color: #025187;
    font-size: 15px;
    font-weight: 600;
}

.project-list-container-main-desc p {
    margin-bottom: 4px;
    font-size: 14px;
    color: #000;
}

h4.info-text-proect-view {
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

h4.info-text-proect-view i {
    font-size: 15px;
    color: #025187;
}

.project-main-over-view {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.project-over-main-img {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-over-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.project-over-main-dt h2 {
    font-weight: 600;
    color: #000;
    font-size: 25px;
}

.project-over-main-dt h3 {
    font-weight: 600;
    color: #454545;
    font-size: 16px;
}

.project-over-main-dt h3.date-h3 i {
    font-size: 15px;
    margin-right: 5px;
}

.project-over-main-dt h3.date-h3 span {
    color: red;
}

.project-over-main-dt p {
    font-size: 15px;
}

.project-over-main-dt p strong {
    color: #4b4b4b;
}

.project-over-view-tasks {
    /* background-color: #f2f2f2; */
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
}

.project-over-view-tasks-mem-img {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.project-over-view-tasks-mem-img img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
}

.project-over-view-tasks-dt h3 {
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

.project-over-view-tasks-dt ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.project-over-view-tasks-dt ul li {
    width: 49%;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.project-over-view-tasks-dt ul li a {
    color: #000;
}

.project-over-view-tasks-dt ul li span {
    color: red;
    margin-left: 10px;
}


.task-progress {
    width: 49%;
    margin: unset;
    height: 9px;
    background: #fff;
    border: 1px solid #ccc;
    margin-right: 5px;
}

.project-task-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.project-task-top select {
    width: 200px;
    height: 40px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
}

.project-task-top .project-team-main-container {
    padding: 0;
    border: 0;
}

.project-task-main-box {
    background-color: #fff;
    padding: 20px;
    /* border: 1px solid #ccc; */
    border-radius: 10px;
    margin: 10px 0;
}

.project-task-badge-add {
    background-color: #efefef;
    /* border: 1px solid #ccc; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
}

.project-task-badge-add p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.project-task-badge-add a {
    width: 35px;
    height: 35px;
    background-color: #025187;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.project-task-badge-add a:hover {
    background-color: #b23939;
}

.project-task-main-container {
    background-color: #eeeeee;
    padding: 20px;
    /* border: 1px solid #ccc; */
    border-radius: 15px;
}

.project-task-main-container h6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.project-task-main-container h6 a {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #6e6e6e;
    color: #000;
    border-radius: 50%;
    rotate: -40deg;
    font-size: 14px;
}

.project-task-main-container h6 a:hover {
    background-color: #025187;
    color: #fff;
}

.project-task-main-container-dt h3 {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.project-task-main-container-dt p {
    font-size: 14px;
    color: #222;
    line-height: 25px;
}

.project-task-main-container-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-task-main-container-bottom .project-team-main-container {
    padding: 0;
    background-color: transparent;
    border: 0;
}

.project-task-main-container-bottom small {
    font-size: 13.5px;
}

.project-task-main-container.bg_success {
    background-color: #a1dca261;
}

.project-task-main-container.bg_wrn {
    background-color: #efcf6d59;
}

.task-status {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.task-status ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.task-status label {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.task-status label i {
    width: 25px;
}

.task-status label span {
    padding: 5px 18px;
    background-color: #26a660;
    color: #fff;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

.modal-btn-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.modal-btn-footer .btn-common {
    width: 120px;
    border-radius: 10px;
}

.modal-btn-footer .btn-common:hover {
    border-radius: 40px;
}

.modal-btn-footer a.btn-cancel {
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 600;
    height: 37px;
    background-color: transparent;
    color: #b23939;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 120px;
    transition: 0.5s;
    border-radius: 10px;
    border: 1px solid #b23939;
}

.modal-btn-footer a.btn-cancel:hover {
    background-color: #b23939;
    color: #fff;
    border-radius: 40px;
}

.modal-title-cs {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.create-members-preview ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.create-members-preview ul li a {
    padding: 4px 6px;
    background-color: #f7f7f7;
    border-radius: 40px;
    color: #000;
    border: 1px solid #ccc;
}

.create-members-preview ul li a i {
    margin-right: 5px;
    color: #2c6c74;

}

.project-doc-main-container {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 10px 0;
}

.project-doc-container {
    background-color: #eeeeee;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #adadad;
}

.project-doc-container h3 {
    font-size: 17px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    color: #000;
}

.project-doc-container h3 a {
    color: #000;
}

.project-doc-box {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-doc-box i {
    font-size: 35px;
    color: #737373;
}

.pop_add_user_profile img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.pop_add_user_profile {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.pop_add_user_profile input {
    display: none;
}

.pop_add_user_profile label {
    width: 140px;
    height: 40px;
    background-color: #025187;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pop_add_user_profile a {
    width: 140px;
    height: 40px;
    background-color: #eeeeee;
    color: #222;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}

.pop_add_user_profile_top {
    padding-top: 20px;
}

.pop_add_user_profile_top p {
    margin: 0;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
}

.project-calendar-main {
    background-color: #fff;
    margin: 0;
    padding-right: 0;
}

.project-calendar-filter h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

.project-calendar-filter ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-calendar-filter ul li {
    margin: 10px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.project-calendar-filter ul li input {
    width: 18px;
    height: 18px;
}

.project-calendar-filter ul li label {
    font-weight: 600;
    color: #444444;
}

.project-calendar-top-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    gap: 10px;
}

.project-calendar-top-left button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #025187;
    background-color: #f7f7f7;
    color: #025187;
    transition: 0.5s;
}

.project-calendar-top-left button:hover {
    background-color: #025187;
    color: #fff;
}

.project-calendar-top-left p {
    margin: 0;
    font-weight: 600;
    font-size: 17px;
}

.project-calendar-top-right {
    padding-top: 15px;
}

.project-calendar-top-right ul {

    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;

}

.project-calendar-top-right ul li a {
    padding: 7px 20px;
    background-color: #f7f7f7;
    color: #000;
    border-right: 1px solid #ccc;
}

.project-calendar-top-right ul li:last-child a {
    border-right: 0;
}

.project-calendar-top-right ul li:first-child a {
    background-color: #025187;
    color: #fff;
}

.project-calendar-top-right ul li a:hover {
    background-color: #025187;
    color: #fff;
}

.border-bottom-cs {
    border-bottom: 1px solid #ccc;
}

.calender-table thead tr th {
    text-align: center;
    padding: 15px 5px;
    font-weight: 600;
    color: #3a3a3a;
    border: 1px solid #ccc;
    width: 200px;
}

.calender-table tbody tr td {
    border: 1px solid #ccc;
    min-width: 100px;
}

.calender-table tbody tr td .td-calendar-box {
    max-width: 200px;
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.calender-table tbody tr td .td-calendar-box p {
    font-size: 16px;
    margin-bottom: 3px;
    font-weight: 600;
    color: #000;
}

.calender-table tbody tr td .td-calendar-box p.disable-p {
    color: #7c7c7c;
}

.calender-table tbody tr td .td-calendar-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.calender-table tbody tr td .td-calendar-box ul li {
    margin-bottom: 5px;
}

.calender-table tbody tr td .td-calendar-box ul li a {
    font-size: 12px;
    font-weight: 600;
    background-color: #f7f7f7;
    color: #000;
    padding: 4px 7px;
    border-radius: 5px;
    white-space: nowrap;

}

.calender-table tbody tr td .td-calendar-box ul li a.pink-a {
    background-color: #f39ace61;
    color: #ce0a7c;
}

.calender-table tbody tr td .td-calendar-box ul li a.green-a {
    background-color: #a9f39a61;
    color: #31c014d1;
}

.calender-table tbody tr td .td-calendar-box ul li a.orange-a {
    background-color: #f3d89a61;
    color: #d99c0de9;
}

.calender-table tbody tr td .td-calendar-box ul li a.blue-a {
    background-color: #9adbf361;
    color: #1c96c2;
}

.calender-table {
    overflow-x: auto;
}

.calender-table::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
.calender-table::-webkit-scrollbar-track {
    background-color: #f7f7f7;
    border-radius: 10px;
}

/* Handle */
.calender-table::-webkit-scrollbar-thumb {
    background: #025187;
    border-radius: 10px;
}

.project-activiy-main-container {
    background-color: #fff;
    padding: 10px;
}

.project-activiy-top ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: 5px; */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 20px;
}

.project-activiy-top ul li a {
    padding: 7px 11px;
    text-decoration: none;
    font-size: 14px;
    /* border: 1px solid #025187; */
    color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    /* border-radius: 5px; */
    transition: 0.5s;
    width: 150px;
    text-transform: uppercase;
    height: 50px;

}

.project-activiy-top ul li a:hover,
.project-activiy-top ul li a.active {
    background-color: #025187;
    color: #fff;
}

.project-activiy-top-left {
    padding-top: 15px;
}

.project-activiy-top-left p {
    margin: 0;
    font-weight: 600;
    font-size: 17px;
}


.project-activiy-top-right ul {

    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;

}

.project-activiy-top-right ul li a {
    padding: 10px 20px;
    /* background-color: #f7f7f7; */
    color: #000;
    border: 1px solid #ccc;
}

.project-activiy-top-right ul li:last-child a {
    border-right: 0;
}

.project-activiy-top-right ul li:first-child a {
    background-color: #025187;
    color: #fff;
}

.project-activiy-top-right ul li a:hover {
    background-color: #025187;
    color: #fff;
}

.td-project-name {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.td-project-name span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #cce85b;
}

.td-project-name span.round-gray {
    background-color: #ccc;
}

.color-green {
    color: #16a816;
}

.f-size {
    font-size: 18px;
}

.sidebar-radio input {
    border: 1px solid #696969;
}

.sidebar-radio .form-check {
    margin: 10px 0;
}

.sidebar-radio .form-check label {
    font-weight: 600;
    font-size: 15px;
    color: #000;
}

.project-access-main {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.project-access-top h3 {
    font-weight: 600;
    color: #000;
    margin-bottom: 5px;
}

.project-access-top p {
    font-size: 15px;
    font-weight: 500;
}

.project-access-top-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    padding-right: 15px;
}

.project-access-top-search input {
    border: 0;
    font-size: 14px;
    font-weight: 500;
}

.access-admin span {
    font-size: 11px;
    font-weight: 600;
    padding: 5px;
    background-color: #a9f39a61;
    color: #31c014d1;

    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: auto;
    margin-top: 5px;
}

td.access-tb-field {
    max-width: 100px;
}

.access-tb-field input,
.access-tb-field select {
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 2px;
}

.proeject-view-bottom-cs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    column-gap: 20px;

}

.btn-view-cs {
    width: 120px;
    margin-top: 20px;
}

.btn-more {
    font-weight: 600;
    color: #288dd1;
    text-decoration: underline;
}

.project-create-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}

.project-create-field label {
    white-space: nowrap;
    font-weight: 500;
}

.project-create-field input,
.project-create-field textarea {
    width: 75%;
}

.w-80 {
    width: 76%;
    margin: 0;
}

.w-100-inp input {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.btn-vw-project {
    background-color: transparent;
    border: 1px solid #222;
    color: #222;
}

.btn-vw-project:hover {
    background-color: #113b85;
    border-color: #113b85;
}

.project-view-date {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: fit-content;
    margin-top: 23px;
}

.project-view-date p {
    margin: 0;
    color: #000;
    font-size: 15px;
}

.project-view-date .col-3 {
    width: 120px;
}

.project-view-date small {
    font-weight: 600;
    margin-bottom: 10px;
}

.project-view-date .icon-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.task-modal-head small {
    font-weight: 600;
    color: #a7a7a7;
}

.task-create-field {
    display: flex;
    justify-content: flex-start;
    align-items: center;

}

.task-create-field label {
    white-space: nowrap;
    width: 190px;
    font-weight: 600;
    color: #444444;
}

.task-create-field label i {
    width: 25px;
}

.task-create-field input {
    width: 40%;
}

.task-create-attach {
    margin: 0;
    padding: 0;
    list-style: none;
}

.task-create-attach li {
    margin: 10px 0;
}

.task-create-attach li a {
    font-size: 14px;
    font-weight: 600;
    color: #444444;
}

.task-create-attach li a i {
    width: 25px;
}

.border-top-cs {
    border-top: 1px solid #ccc;
}

.h-border {
    height: 55px;
    border-bottom: 1px solid #ccc;
    margin-left: -10px;
    margin-right: -12px;
}

.shadow-table tr th {
    background-color: transparent;
    color: #222;
    border: 0;
}

/* .shadow-table tbody tr{
   border-bottom: 1px solid #ccc;
} */

.shadow-table tbody tr {
    border: 0;
    box-shadow: 0px 15px 10px -15px #111;
    box-shadow: 5px -15px 10px -17px #111;

}

/* .shadow-table tr td:first-child{
    box-shadow: -15px 0px 10px -15px #111; 
}
.shadow-table tr td:last-child{
    box-shadow: 15px 0px 10px -15px #111;  
} */
.btn-loadMore {
    margin: auto;
    display: flex;
    width: 130px;
    border-radius: 5px;
    margin-top: 20px;
}

.bg-th tr th {
    background-color: #025187;
    color: #fff;
}




/* Department */

.w-110 {
    width: 110px;
}

.pt_30 {
    padding-top: 30px;
}

.department-tab-btns {
    background-color: #fff;
    padding: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    margin-top: 5px;
}

.department-tab-btns ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.department-tab-btns ul li a {
    padding: 7px 15px;
    color: #414040;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.department-tab-btns ul li a:hover,
.department-tab-btns ul li a.active {
    background-color: #72871d;
    color: #fff;
}

.department-middle-box {
    background-color: #fff;
    padding: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    margin-top: 10px;
}

.department-middle-box select {
    height: 45px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    font-size: 15px;
    font-weight: 600;

}

.department_call_box {
    padding: 14px;
    border: 1px solid #6a6a6a;
    border-radius: 10px;
    margin: 12px 0;
}

.department_call_top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.department_call_top img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.department_call_top-title p {
    margin: 0;
    font-weight: 600;
    color: #000;
    font-size: 18px;
}

.department_call_top-title p span {
    font-size: 13px;
    color: #878686;
}

.department_call_top-title p span i {
    margin: 0 10px;
}

.department_bottom_desc {
    padding-top: 15px;
}

.department_bottom_desc p {
    font-size: 15px;
    line-height: 25px;
    color: #000;
}

.department_bottom_desc a {
    width: 150px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #222;
    color: #222;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    transition: 0.5s;
}

.department_bottom_desc a i {
    margin-right: 10px;
}

.department_bottom_desc a:hover {
    background-color: #72871d;
    color: #fff;
    border-color: #72871d;
}

.department_call_right {
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
}

.department_call_date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.department_call_date p {
    font-weight: 600;
}

.department_call_right a {
    color: #000;
    text-decoration: underline;
    font-weight: 600;
    font-size: 15px;
}

.department_call_right a:hover {
    color: #025187;
}

.form-title {
    font-size: 24px;
    font-weight: 600;
    color: #000;
}

.department-project-form {
    background-color: #f2f2f2;
    margin: 10px 0;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

.department-project-form input {
    background-color: #fff;
}

.department-project-form input:focus {
    background-color: #fff;
}

.department_note_box {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 10px 0;
}

.department_note_box p {
    margin: 0;
    font-size: 15px;
    line-height: 25px;
}

.department_logo img {
    width: 200px;
}

.department_form_top_sale {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.department_form_top_sale label {
    white-space: nowrap;
    font-weight: 600;
    color: #000;
}

.department_form_top_sale input {
    background-color: #cfcfcf;
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.department_form_top_sale input:focus {
    background-color: #cfcfcf;
}

.department_form_right {
    background-color: #fff;
    padding: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    margin-top: 10px;
}

.department_form_right ul {
    list-style: none;
    padding: 0;
    margin: 0;

}

.department_form_right ul li {
    margin: 10px 0;
}

.department_form_right ul li a {
    width: 100%;
    padding: 7px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dfdfdf;
    font-weight: 600;
    color: #000;
    transition: 0.5s;
    border-radius: 5px;
    font-size: 15px;
}

.department_form_right ul li a:hover {
    background-color: #6b7e23;
    color: #fff;
}

.form_department input {
    height: 40px;
}



.check-with-label:checked+.label-for-check {
    border: 1px solid #025187;
    color: #025187;
    background-color: #fff;
}

.department_doc_select .label-for-check {
    width: 100%;
    height: 90px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 60px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    padding-right: 20px;
    background-color: #fff;

}

.department_doc_select {
    position: relative;
    margin: 10px 0;
}

.department_doc_select input {
    position: absolute;
    top: 33px;
    left: 25px;
    width: 25px;
    height: 25px;
    border-radius: 50% !important;
}

.department_doc_select .check-label-1 {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.department_doc_select .check-label-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.department_doc_select .check-label-1 p {
    font-size: 13px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
    color: #54687B;
    margin: 0;
    margin-top: 10px;
}

.department_doc_select input[type="radio"] {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 23px;
    height: 23px;
    padding: 3px;
    /* background-color only for content */
    background-clip: content-box;
    border: 1px solid #025187;
    background-color: #fff;
    border-radius: 50%;
}

/* appearance for checked radiobutton */
.department_doc_select input[type="radio"]:checked {
    background-color: #025187;
}

.department_file_name p {
    font-weight: 600;
    color: #000;
    font-size: 19px;
    margin: 0;
    margin-bottom: 5px;
}

.check-with-label:checked+.label-for-check .department_file_name p {
    color: #72871d;
}

.department_file_name small {
    color: #000;
    text-decoration: underline;
}

.dpt_file_selected,
.dpt_file_select {
    font-size: 17px;
    font-weight: 600;
}

.dpt_file_selected {
    color: #6b7e23;
}

.dpt_file_selected {
    display: none;
}

.check-with-label:checked+.label-for-check .dpt_file_selected {
    display: block;
}

.check-with-label:checked+.label-for-check .dpt_file_select {
    display: none;
}

.department_doc_table {
    background-color: #fff;
    padding: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    margin-top: 10px;
}

.department_doc_table ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.department_doc_table ul li a {
    width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #323232;
    font-size: 14px;
    font-weight: 600;
}

.department_doc_table ul li a.active {
    border: 1px solid #323232;
}

.department_doc_table ul li a:hover {
    background-color: #dbdbdb;
}

.department_doc_table_search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border: 1px solid #222;
    border-radius: 5px;
    padding: 0 10px;
    gap: 5px;
}

.department_doc_table_search input {
    border: 0;
    font-size: 14px;
    font-weight: 600;
    height: 37px;
}

.department_doc_table table tr th {
    background-color: #FFDEC4;
    /* text-align: center; */
    font-size: 17px;
    padding: 10px 6px;
}

.department_doc_table table tr td {
    padding: 13px 5px;
    vertical-align: middle;
}

.dept_file_table tr td input {
    width: 22px;
    height: 22px;
}

.dept-td-file-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.dept-td-file-box i {
    width: 30px;
    height: 30px;
    background-color: #cfcfcf;
    color: #767676;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dept-td-file-box p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #444444;
}

.dept_file_table .td-icon-text {
    font-size: 15px;
}

.dept_file_table .td-icon-text i {
    font-size: 14px;
    margin-right: 5px;
}

.dept_file_table tr td a {
    color: #000;
}

.meet-contract-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.meet-contract-name p {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.meet-contract-name img {
    width: 40px;
}

.dept_meet-field-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 75%;
    gap: 10px;
}

.dept_meet-field-box input {
    width: 250px;
}

.dept_meet-field-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dept_meet-field-box ul li {
    white-space: nowrap;
    background-color: #dcdcdc;
    padding: 5px 15px;
    border-radius: 40px;
    font-weight: 600;
    color: #000;
}

.dept_meet-field-box ul li a {
    color: #000;
    margin-left: 10px;
}

.dept_meet_attendees ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.dept_meet_attendees ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #a3a1a1;
    margin: 10px 0;
}

.dept_meet_attendees_left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.dept_meet_attendees_left span {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6b7e23;
    color: #fff;
    border-radius: 50%;
}

.dept_meet_attendees_left_member h3 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
}

.dept_meet_attendees_left_member small {
    font-weight: 600;
}

.dept_meet_attendees ul li a {
    font-size: 15px;
    font-weight: 600;
    color: #696969;
}

.w-fit {
    width: fit-content !important;
}

.section-title span {
    font-size: 14px;
}

.section-title {
    font-size: 23px;
    /* background-color: #799700; */
    color: #fff;
    /* padding: 14px; */
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 15px;
}

.margin-top-70 {
    margin-top: 70px !important;
}

.shadow-box {
    background-color: #ffffffc9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    background: rgb(255 255 255 / 73%);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.o-f-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.o-f-check input {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.o-f-check label {
    font-weight: 600;
}

.shadow-box .box-title {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
}

.save-btn {
    width: 110px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #e04d4d;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;
    margin: auto;
}

.save-btn:hover {
    border-radius: 40px;
}


.user-view-left {
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
}

.user-basic-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.user-basic-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.user-basic-info {
    background-color: #ebf7bc;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #BDD460;
}

.user-basic-info h3 {
    font-size: 25px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.user-basic-info p {
    margin: 0;
    font-size: 13px;
}

.user-view-left ul {
    margin: 0;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.user-view-left ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    border-bottom: 1px solid #ccc;
}

.user-view-left ul li:last-child {
    border-bottom: 0 !important;
}

.user-view-left ul li span.badge {
    background-color: #16a816;
}

.user-view-left ul li a.user-edit-btn {
    padding: 5px 20px;
    border-radius: 40px;
    background-color: #e52d2d;
    color: #fff;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.user-view-left ul li a.user-edit-btn:hover {
    background-color: #b23939;
}

.user-view-container {
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
}

.user-view-box {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 10px;
}

.user-view-box h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 30px;
    color: #ea8436;
}

.user-view-box ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.user-view-box ul li {
    width: 33%;
    margin: 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.user-view-box ul li span {
    font-weight: 400;
    margin-left: 10px;
    color: #5f5f5f;
}

.user-view-box ul li span.Yellow-badge {
    background-color: #da9f21;
    color: #fff;
    padding: 0px 10px;
    border-radius: 40px;
}

.user-view-address ul li {
    width: 49%;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    margin: 4px 0;
}

.user-view-address ul li span {
    color: red;
}

.user-view-address ul {
    justify-content: space-between;
}

.user-view-address ul li .adrress-user strong {
    font-weight: 600;
}

.user-view-address ul li .adrress-user p {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    margin-top: 10px;
}


.modal-btn-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.modal-btn-box a {
    width: 100px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 15px;
}

.bg-default {
    background-color: #089748 !important;
}

.bg-epn-red {
    background-color: #dd4b39 !important;
}

.modal-btn-box a:hover {
    border-radius: 40px;
}

.modal-not h3 {
    text-align: center;
    font-size: 17px;
    margin-top: 30px;
    font-weight: 500;
    line-height: 30px;

}

.permissions-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.permissions-box ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin: 12px 0;
    width: 33%;
}

.permissions-box ul li label {

    color: #000;
    font-size: 14px;
}

.permissions-box ul li input {
    width: 16px;
    height: 16px;
}

.input-tb-field input,
.input-tb-field select {
    font-size: 14px;
    font-weight: 500;
    height: 37px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.nowrap-table tr th {
    white-space: nowrap;
}

.salary-bottom {
    background-color: #f7f7f7;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.salary-bottom input,
.salary-bottom textarea {
    background-color: #fff;
}

.salary-bottom input:focus,
.salary-bottom textarea:focus {
    background-color: #fff;
}

.salary-print-section {
    background-color: #f2f2f2;
    padding: 50px;
    min-height: 100vh;
}

.salary-print-widget {
    background-color: #fff;
    /* padding: 12px; */
    border-radius: 10px;
    /* border: 1px solid #ccc; */
}

.salary-print-widget h3 {
    font-size: 19px;
    margin: 0;
    font-weight: 600;
}

.salary-print-widget h3 span {
    color: #b23939;
}

.salary-print-table {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}

.form-check-cs p {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
    color: #ad1919;
}

.form-check-cs .form-check {
    margin: 15px 0;
}

.form-check-cs .form-check input {
    width: 18px;
    height: 18px;
    border: 1px solid #222;
}

.form-check-cs .form-check label {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.Attendance-tab-btns {
    box-shadow: none;
    padding: 0;
    margin-bottom: 15px;
}

.Attendance-tab-btns ul li a {
    width: fit-content;
    background-color: #e8e8e8;
}

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

.Attendance-top-title a {
    padding: 7px 15px;
    background-color: #b23939;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
}

.Attendance-top-title a i {
    margin-right: 5px;
}

.Attendance-top-title a:hover {
    border-radius: 40px;
}

.mbsc-scroller-wheel-item div {
    display: none;
}

.input-tb-label-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
}

.input-tb-label-check input {
    width: 18px;
    height: 18px;
}

.input-tb-label-check label {
    font-size: 16px;
    font-weight: 600;
    color: #000;

}

.Attendance-add-table tr th {
    white-space: nowrap;
    min-width: 180px;
}

.file-cs-cstm input {
    border-color: #8e8e8e;
}

.file-cs-cstm input::file-selector-button {
    background-color: #BDD460 !important;
}

.filter-cs-20 h3 {
    font-size: 17px;
    font-weight: 600;
    color: #ea8436;
}

.filter-cs-20 .col-lg-20 {
    width: 20%;
}

.hrm-dashboard-widget {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    height: 100%;
}

.hrm-dashboard-widget h3 {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
}

.hrm-dashboard-widget-inner p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.hrm-dashboard-widget-inner .widget-inner-hrm {
    background-color: #ebf5c447;
    border: 1px solid #c2da634d;
    border-radius: 5px;
    padding: 10px;
    height: 100%;
}

.hrm-dashboard-widget-inner .widget-inner-hrm h6 {
    font-weight: 600;
    color: #000;
    margin: 0;
    line-height: 20px;
    font-size: 14px;
}

.hrm-dashboard-widget-inner .widget-inner-hrm h5 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    margin-top: 10px;
    color: #b23939;

}

.hrm-dashboard-widget-inner tr th {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 10px;
    background-color: #f2f2f2;
    text-align: center;
}

.hrm-dashboard-widget-inner table {
    margin: 10px 0;
}

.hrm-dashboard-widget-inner tr td {
    font-size: 14px;
    text-align: center;
}

.hrm-dash-left-table tr th,
.hrm-dash-left-table tr td {
    text-align: left !important;
}

.hrm-dashboard-widget h3 {
    display: flex;
    align-items: center;
}

.hrm-dashboard-widget h3 span {
    min-width: 33px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #afa21c;
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    margin-right: 5px;
}

.hrm-dashboard-widget h3 span.icon-bg-1 {
    background-color: #39B27C;
}

.hrm-dashboard-widget h3 span.icon-bg-2 {
    background-color: #1a7bb9;
}

.hrm-dashboard-widget h3 span.icon-bg-3 {
    background-color: #b52323;
}

.hrm-dashboard-widget h3 span.icon-bg-4 {
    background-color: #cb4ec9;
}

.hrm-dashboard-widget h3 span.icon-bg-5 {
    background-color: #14aa11;
}

.hrm-dashboard-widget h3 span.icon-bg-6 {
    background-color: #7a339e;
}

.hrm-settings-container {
    display: flex;
    justify-content: flex-start;
    /* align-items: center; */
}

.hrm-settings-container ul.hrm-settings-nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 25%;
    border: 1px solid #a9a9a9;
    border-radius: 10px;
    overflow: hidden;
    height: fit-content;
}

.hrm-settings-container ul.hrm-settings-nav li {
    width: 100%;
}

.hrm-settings-container ul.hrm-settings-nav li button {
    width: 100%;
    margin: 0 !important;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #a9a9a9;
    height: 60px;
    font-size: 18px;
    font-weight: 500;
}

.hrm-settings-container ul.hrm-settings-nav li button:hover {
    background-color: #99ae42;
    color: #fff;
}

.hrm-settings-container ul.hrm-settings-nav li button.active {
    border: 1px solid #BDD460;
}

.hrm-settings-container ul.hrm-settings-nav li:last-child button {
    border-bottom: 0px solid #a9a9a9;
}

.hrm-settings-container .tab-content {
    width: 75%;
    padding-left: 20px;
}

.small-label small {
    font-size: 12px;
    font-weight: 500;
    color: #877e7e;
}

.status-green,
.status-blue,
.status-orange,
.status-red {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    white-space:nowrap;
}

.status-green::before,
.status-blue::before,
.status-orange::before,
.status-red::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
    flex-shrink: 0;
}

.status-green {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #089748;
}

.status-blue {
    background-color: #effaff;
    border: 1px solid #bae6fd;
    color: #087697;
}

.status-orange {
    background-color: #fffaf0;
    border: 1px solid #fed7aa;
    color: #e49629;
}

.status-red {
    background-color: #fff5f5 !important;
    border: 1px solid #fecaca !important;
    color: #e42929 !important;
}
.uploadFIleDocument {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 15px;
    padding-top: 0;

    gap: 10px;
    margin-bottom: 10px;
}

.uploadFIleDocument .uploadFIleDocument-action-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #089712;
    color: #fff;
    border: 0;
    margin-top: 15px;
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uploadFIleDocument .uploadFIleDocument-action-btn:hover {
    background-color: #027009;
}

.uploadFIleDocument .uploadFIleDocument-action-btn.bg-danger:hover {
    background-color: #b23939 !important;
}

.uploadFIleDocument input {
    background-color: #fff !important;
    height: 37px;
}

.uploadFIleDocument input::file-selector-button {
    height: 37px;
}

.td-check-field {
    display: flex;
    justify-content: center;
    align-items: center;
}

.td-check-field input {
    width: 18px;
    height: 18px;
}

.badge-font .badge {
    font-size: 14px;
    margin: 2px;
}

.leave-activity h3 {
    padding: 5px 13px;
    background-color: #bbf7d6c6;
    border: 1px solid #089748;
    color: #089748;
    border-radius: 40px;
    font-size: 17px;
    font-weight: 600;
    width: fit-content;
}

.leave-activity h4 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.leave-activity h4 span {
    color: red;
}

.leave-manage-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.leave-manage-tabs ul li a {
    width: 150px;
}

.Probation-manage-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.Probation-manage-tabs ul li a {
    width: fit-content;
}

.flex-input-pop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

}

.flex-input-pop label {
    white-space: nowrap;
    font-weight: 500;
    color: #000;
}

.flex-input-pop input,
.flex-input-pop select,
.flex-input-pop textarea {
    height: 37px;
    background-color: #ededed;
    border: 0;
    max-width: 300px;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
}

.flex-input-pop input:focus,
.flex-input-pop select:focus,
.flex-input-pop textarea:focus {
    background-color: #ededed;
}

.flex-input-pop textarea {
    height: 70px;
}

.review-note {
    background-color: #fbdede;
    border: 1px solid #e42929;
    color: #e42929;
    border-radius: 10px;
    padding: 10px 20px;
}

.review-note ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    gap: 30px;
}

.review-note ul li {
    font-weight: 500;
    font-size: 14px;
}

.review-pop-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.review-pop-preview label {
    white-space: nowrap;
    font-weight: 500;
    color: #000;
    width: 300px;
    font-size: 16px;
}

.review-pop-preview ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.review-pop-preview ul li {
    font-size: 17px;
    margin: 0 5px;
    font-weight: 500;
}

.review-pop-preview ul li i {
    color: #ef9b34;
}

.review-pop-preview p {

    width: 100%;
    font-size: 13px;
    margin: 0;

}

.review-pop-preview {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}

.check-select-colored ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
}

.check-select-colored ul li a {
    padding: 5px 15px;
    background-color: #14aa11;
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
}

.check-select-colored ul li a.orange {
    background-color: orange;
}

.check-select-colored ul li a.red {
    background-color: red;
}

.employee-basic-info {
    background-color: #83d99673;
    border: 1px solid #7ae391;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.employee-basic-widget {
    background-color: #fff;
    padding: 5px 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    height: 100%;
}

.employee-basic-widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.employee-basic-widget ul li {
    margin: 10px 0;
    font-weight: 500;
    color: #000;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.employee-basic-widget ul li span.blue {
    color: #0ebe11;
}

.employee-basic-widget ul li span.red {
    color: #d30e0e;
}

.e-performance-widget {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.e-performance-widget .review-pop-preview {
    padding: 0;
    border: 0;
    width: 100%;
}

.e-performance-widget .review-pop-preview label {
    font-size: 15px;
}

.payslip-logo {
    display: flex;
    justify-content: center;
    align-items: center;

}

.payslip-logo img {
    width: 200px;
}

.payslip-logo h3 {
    font-size: 25px;
    font-weight: 600;
    color: #000;
}

.payslip-widget {
    background-color: #a9f9bb73;
    border: 1px solid #7ae391;
    padding: 5px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.payslip-widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.payslip-widget ul li {
    margin: 12px 0;
    font-weight: 600;
    color: #000;
    font-size: 15px;
}

.payslip-widget ul li span {
    font-weight: 400;
    margin-left: 10px;
}

.payslip-table-bottom ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

}

.payslip-table-bottom ul li {
    width: 33%;
    background-color: #f2f2f2;
    padding: 10px;
    margin: 13px 0;
    border: 1px solid #ccc;
    font-weight: 600;
    color: #000;
    justify-content: space-between;
    align-items: center;
    display: flex;
    border-radius: 10px;
    font-size: 14px;
}

.pay-slip-amount {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.pay-slip-amount h3 {
    font-weight: 600;
    font-size: 25px;
}

.pay-slip-amount h4 {
    font-size: 18px;
}

.sign-payslip {
    height: 80px;
    border-top: 1px solid #222;
    display: flex;
    justify-content: center;
    align-items: end;
    font-weight: 600;
    font-size: 15px;
    color: #000;
}

.payroll-edit-top h3 {
    font-weight: 600;
    color: #000;
    font-size: 25px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.payroll-edit-box {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 12px;
}

.payroll-edit-box input,
.payroll-edit-box textarea,
.payroll-edit-box select {
    background-color: #fff !important;
}

.payroll-edit-box h3,
.payroll-edit-tb-box h3 {
    font-size: 22px;
    font-weight: 600;
    color: #dd6422;
}

.payroll-edit-table tr td {
    max-width: 150px;
}

.payroll-edit-tb-box p {
    font-weight: 600;
    color: #000;
    margin-top: 10px;
    font-size: 16px;
}

.payroll-edit-box p {
    font-weight: 600;
    color: #000;
    font-size: 18px;
}

.payroll-view-top-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #000;
    font-size: 17px;
    margin: 20px 0;
}

.payroll-tb-widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
    padding: 0 15px;
}

.payroll-tb-widget ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #000;
    margin: 12px 0;
}

.bonus_track_top ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.bonus_track_top ul li {
    padding: 10px 15px;
    background-color: #ff737345;
    color: #ad1f1fd9;
    border: 1px solid #ad1f1f7a;
    width: 25%;
    border-radius: 7px;
    font-weight: 600;
    font-size: 15px;
}

.employee_salary_bonus {
    background-color: #f7f7f7;
    padding: 5px 15px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

.employee_salary_bonus ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.employee_salary_bonus ul li {
    margin: 15px 0;
    font-weight: 600;
    color: #000;
    font-size: 16px;
}

.employee_salary_bonus ul li:first-child span {
    color: #16a816;
}

.employee_salary_bonus ul li span {
    color: red;
    margin-left: 10px;
}

.chart-tree-container {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    max-width: 1000px;
    margin: auto;
}

.chart-tree-top {
    padding: 6px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    min-width: 180px;
    position: relative;
}

.chart-tree-top::before {
    content: '';
    width: 0.1px;
    height: 80px;
    background-color: #b8afaf;
    position: absolute;
    left: 50%;
    top: 100%;
}

.chart-tree-top img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.chart-tree-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.chart-tree-info p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #39B27C;
}

.chart-tree-ul {
    width: 90%;
}

.chart-tree-ul ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-top: 79px;
    gap: 20px;
    /* border-top: 1px solid #b8afaf; */
    padding-top: 20px;
    position: relative;
}

.chart-tree-ul ul::before {
    content: '';
    width: 80%;
    height: 1px;
    background-color: #b8afaf;
    position: absolute;
    left: 10%;
    top: 0;
}

.chart-tree-ul ul li .chart-tree-top::after {
    content: '';
    width: 1px;
    height: 20px;
    background-color: #b8afaf;
    position: absolute;
    left: 50%;
    bottom: 100%;
}

.chart-tree-ul2 {
    width: 100%;
}

.chart-tree-ul2 ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-top: 79px;
    gap: 100px;
    /* border-top: 1px solid #b8afaf; */
    padding-top: 20px;
    position: relative;
}

.chart-tree-ul2 ul li {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-left: -80px;
    position: relative;

}

.chart-tree-ul2 ul li::before {
    content: '';
    width: 51.5%;
    height: 1px;
    background-color: #b8afaf;
    position: absolute;
    top: -20px;
    left: 24.3%;
}

.chart-tree-ul2 ul li .chart-tree-top::before {
    display: none;
}

.chart-tree-ul2 ul li .chart-tree-top::after {
    content: '';
    width: 1px;
    height: 20px;
    background-color: #b8afaf;
    position: absolute;
    left: 50%;
    bottom: 100%;
}


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

.btn-title-top a {
    padding: 7px 15px;
    background-color: #b23939;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
}

.btn-title-top a i {
    margin-right: 5px;
}

.btn-title-top a:hover {
    border-radius: 40px;
}

.salary-table tr td input {
    min-width: 110px;
}

.tooltip-btn {
    border: 0;
    background-color: transparent;
    color: #1c96c2;
}

.tooltip-inner {
    background-color: #1c96c2 !important;
    color: #fff !important;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #1c96c2 !important;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-right-color: #1c96c2 !important;
}

.view-current-performance {
    background-color: #cbf8ce;
    border-color: #027009;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #77ce7d;
}

.view-current-performance .review-pop-preview {
    padding-bottom: 0;
    border-bottom: 0;
    padding: 10px 0;
}

.currnt-performance-title {
    color: #027009;
    font-size: 18px;
    text-align: center;
}

.view-Previous-performance {
    background-color: #fff0da;
    border-color: #027009;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #faad3d;
}

.view-Previous-performance .review-pop-preview {
    padding-bottom: 0;
    border-bottom: 0;
    padding: 10px 0;
}

.Previous-performance-title {
    color: #cb7f0a;
    font-size: 18px;
    text-align: center;
}

.currnt-perfo-info {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.currnt-perfo-info ul {
    width: 100%;
    padding: 0 30px;
}

.currnt-perfo-info ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 15px 0;
    font-weight: 500;
    color: #000;
}

.currnt-perfo-info table {
    margin-top: 30px;

}

.currnt-perfo-info table tr th {
    padding: 8px 10px !important;
}

.currnt-perfo-info table tr td {
    padding: 8px 10px !important;
    font-size: 14px;
}

.view-attendance-table tr td i.fa-circle-check {
    color: #199521;
    font-size: 23px;
}

.view-attendance-table tr td {
    font-size: 16px;
}

.view-attendance-table tr td i.fa-circle-xmark {
    color: #b23939;
    font-size: 23px;
}

.salery-print-top-ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}

.salery-print-top-ul li {
    font-size: 17px;
    font-weight: 600;
    background-color: #f7f7f7;
    width: 24%;
    padding: 10px 15px;
    border-radius: 5px;
    color: #fff;

}

.salery-print-top-ul li span {
    margin-left: 5px;
    /* color: #dc3545; */
}

.salery-print-top-ul li.bg-1 {
    background-color: #1a7bb9;
}

.salery-print-top-ul li.bg-2 {
    background-color: #b52323;
}

.salery-print-top-ul li.bg-3 {
    background-color: #cb4ec9;
}

.salery-print-top-ul li.bg-4 {
    background-color: #7a339e;
}

.performancec-tooltip-btns-ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.performancec-tooltip-btns-ul ul li button {
    color: #000;
    font-weight: 600;
}

.performancec-tooltip-btns-ul ul li button i {
    color: #1a7bb9;
}

.radio-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding-top: 10px;
}

.radio-label,
.radio-container label {
    font-weight: 500;
    color: #000;
    font-size: 14px;
}

.radio-container input {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #222 !important;
}

.tb-checkox input {
    width: 18px;
    height: 18px;
}

a.bg-blue-cs {
    background-color: #288dd1 !important;
    color: #fff !important;
    border-color: #288dd1 !important;
}

.late-entry {
    padding: 2px 13px;
    background-color: #fbdede;
    border: 1px solid #e42929;
    color: #e42929;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
}

.early-entry {
    padding: 2px 13px;
    background-color: #bbf7d6c6;
    border: 1px solid #089748;
    color: #089748;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
}

.attendance-leave-badge ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.attendance-leave-badge ul li {
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background-color: violet;
    border-radius: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.attendance-leave-badge ul li span {
    margin-left: 10px;
    background-color: #fff;
    color: #000;
    padding: 0 2px;
    border-radius: 5px;
}

.attendance-leave-badge ul li.s-leave {
    background-color: #dc891d;
}

.attendance-leave-badge ul li.p-leave {
    background-color: #0da09e;
}

.attendance-leave-badge ul li.c-leave {
    background-color: #a00d0d;
}

.performance-edit-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.performance-edit-btn a {
    background-color: #b23939;
    padding: 4px 15px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
}

.reviewer-history {
    background-color: #fff;
    padding: 5px 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    height: 100%;
    margin-top: 10px;
    padding-top: 10px;
}

.reviewer-history h3 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    text-align: center;
}

.reviewer-history table {
    margin: 0;
    margin-bottom: 10px;
}

img.bonus-flag-performance {
    width: 60px;
    margin: auto;
    display: flex;
}



.searchDropDown a:hover {
    background-color: #ddd;
}

.showDrop {
    display: block;
}


.inner-tabs-cs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.inner-tabs-cs {
    box-shadow: none;
    padding: 0;
    margin-bottom: 15px;
}

.inner-tabs-cs ul li a {
    width: fit-content;
    background-color: #e8e8e8;
}

.tb-form-field input,
.tb-form-field select {
    font-size: 12px;
    border: 1px solid #222;
    border-radius: 3px;
    height: 35px;
}

.print-box-widget {
    padding: 10px;
    /* background-color: var(--bg-light-gray); */
    border: 1px solid #ccc;
    border-radius: 10px;
}

.print-box-widget h5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;

}

.print-inner-widget {
    background-color: var(--bg-light-gray);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.print-inner-widget ul {
    padding: 0;
    margin: 0;
    list-style: none;

}

.print-inner-widget ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-weight: 500;
    font-size: 15px;
    color: #000;
}

.print-trio-ul ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.print-trio-ul ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-weight: 500;
    font-size: 15px;
    color: #000;
    background-color: var(--bg-light-gray);
    border-radius: 5px;
    width: 33%;
    border: 1px solid #ccc;
}

.print-trio-ul-bg ul li {
    background-color: #a9f9bb73;
    border: 1px solid #7ae391;
}

table tr td.td-text-danger {
    color: red !important;
}


.multiple-items-container {
    padding: 15px;
    background-color: #f2f8d8;
    border-radius: 7px;
    border: 1px solid #BDD460;
}

.multiple-items-container input,
.multiple-items-container select {
    height: 37px;
    background-color: #fff;
    border-radius: 5px;
}

.multiple-items-container input:focus,
.multiple-items-container select:focus {
    background-color: #fff;
}

.multi-add-dlt-btns {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.multi-add-dlt-btns button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #25a925;
    color: #fff;
}

.multi-add-dlt-btns button.multie-dlt {
    background-color: red;
}

.bottom-container-fields {
    padding: 15px;
    background-color: #f2f8d8;
    border-radius: 7px;
    border: 1px solid #BDD460;
}

.bottom-container-fields input,
.bottom-container-fields select {
    height: 37px;
    background-color: #fff;
    border-radius: 5px;
}

.bottom-container-fields input:focus,
.bottom-container-fields select:focus,
.bottom-container-fields textarea:focus {
    background-color: #fff;
}

.bottom-container-fields textarea {
    background-color: #fff;
}

.bottom-container-fields-ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bottom-container-fields-ul ul li {
    margin: 10px 0;
    background-color: #f7f7f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.info-top-widget {
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;

}

.info-top-widget h5 {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
}

.info-top-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 20px;

}

.info-top-widget ul li {
    margin: 15px 0;
    font-weight: 500;
    color: #000;
}

.info-top-widget ul li span {
    font-weight: 300;
    margin-left: 10px;
}

.five-col-row .col-lg-20 {
    width: 20%;
}

.top-btns-cs {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    padding-bottom: 10px;
}

.top-btns-cs a {
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background-color: #ea8436;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.5s;
}

.top-btns-cs a:hover {
    border-radius: 40px;
}

.print-title {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
}

.remark-box {
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #ccc;
}

.remark-box h3 {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.remark-box p {
    font-size: 14px;
    margin: 0;
}

.delivery-track-title {
    text-align: center;
    font-weight: 600;
    font-size: 23px;
    line-height: 30px;
    color: #BDD460;
}

.track-container {
    padding: 30px 0;
    /* border-radius: 10px;
   
    background-color: rgba(13, 162, 56, 0.06);
    border: 1px solid rgba(13, 162, 56, 0.21); */
}

.track-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex-wrap: wrap; */
    gap: 13px;
}

.track-container ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 19%;
}

.track-container ul li .track-img {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    gap: 6px;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}

.track-container ul li .track-img p {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.track-container ul li.track-active .track-img {
    border: 2px dashed #bdd460;
    background-color: #bdd46069;
}

.track-container ul li .track-img img {
    width: 70px;
}

.track-container ul li .track-img img.w__80 {
    width: 80px;
}

.track-bottom {
    padding-top: 20px;
}

.track-bottom p {
    margin: 0;
    margin-top: 12px;
    font-size: 15px;

}

.project-widget-container {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
}


.invoice-short-top ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 20px
}

.invoice-short-top ul li {
    width: 49%;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    font-weight: 600;
    color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.invoice-short-top ul li:nth-child(even) {
    justify-content: flex-end;

}

.color-green {
    color: #19c419;
}

.color-red {
    color: red;
}

.color-orange {
    color: #d8a304;
}

.project-modal-documents-content h1 {
    font-size: 21px;
    font-weight: 600;
    color: #023970;

}

.gallery-label {
    margin-bottom: 10px;
}

.gallery-label img {
    width: 100%;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
    cursor: pointer;
}

.gallery-main-img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 4px;
}

#expandedImg,
#srcExpandImg,
#svcExpandImg,
#productsvcImgExpnd,
#typeExpandImg {
    display: none;
}

.gallery-col {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
}

.document-feedback {
    background-color: #f7f7f7;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-bottom: 8px;

}

.document-feedback-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.document-feedback-top img {
    width: 40px;
    height: 40px;
    border: 3px solid #023970;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.document-feedback-top span {
    font-weight: 600;
    color: #000;
}

.document-feedback-top ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.document-feedback-top ul li {
    margin: 10px 0;
    font-weight: 500;
    color: #000;
    font-size: 15px;

}

.document-feedback-top ul li i {
    color: #ef9b34;
}

.document-feedback-text {
    padding: 10px;
}

.document-feedback-text p {
    margin: 0;
    margin-top: 10px;
    font-size: 15px;
    color: #000;

}

.upload-doc-img img {
    width: 150px;
    height: 100px;
    border-radius: 10px;
    margin-top: 10px;
    object-fit: cover;
}


.dashboard-customer-widget {
    background-color: #e2f0f9;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #a5aad8;
}

.dashboard-customer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-customer-widget ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
    font-weight: 500;
    font-size: 15px;
    color: #000;
}

.dashboard-customer-widget a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    background-color: #025187;
    color: #fff;
    text-decoration: none;
    height: 40px;
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.5s;

}

.dashboard-customer-widget a:hover {
    border-radius: 40px;
}

.dashboard-project-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/*.dashboard-project-btns a:last-child{*/
/*    background-color: #b23939;*/
/*}*/
/*.dashboard-project-btns a:first-child{*/
/*     background-color: #025187 !important;*/
/*}*/
.dashboard-project-btns a {
    font-size: 14px;
    font-weight: 500;
    width: unset;
    padding: 5px 10px;
    height: unset;
}

/*.dashboard-project-btns a.green-color{*/
/*    background-color:#239f04 !important;*/
/*}*/
.dashboard-project-btns a.red-color {
    background-color: #b23939 !important;
}

.dashboard-project-btns a.dark-orange-color {
    background-color: #987318 !important;
}

.dashboard-project-btns a.blue-color {
    background-color: #113b85 !important;
}

.project_view_doc_img {
    background-color: #fff;
    border-radius: 5px;
}

.project_view_doc_img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
}


.prev-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 15px;
    background-color: #f7f7f7;
}

.prev-logo img {
    width: 200px;
}


.invoice-prev-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.invoice-prev-title h3 {
    color: #000;
    font-size: 25px;
    font-weight: 600;
    margin: 0;
}

.invoice-sign {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 50px;

}

.invoice-sign p {
    padding-top: 10px;
    margin-top: 30px;
    border-top: 1px solid #7f7f7f;
    font-size: 15px;
    font-weight: 600;
    width: 30%;
    text-align: center;
}

.invoice-info-bottom ul {
    padding: 0;
    margin: 0;
    list-style: none;

}

.invoice-info-bottom ul li {
    margin: 13px 0;
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
}

.invoice-info-cnt ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;

}

.invoice-info-cnt ul li {

    font-size: 15px;
    margin: 8px 0;
    font-weight: 600;

}

.invoice-info {
    background-color: #fff;
    padding: 4px 15px;
    border-radius: 10px;
    height: 100%;
    /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
    border: 1px solid #fff;
}

.invoice-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-top: 10px;
}

.invoice-info ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.invoice-info ul li {
    font-size: 14px;
    margin: 13px 0;
    font-weight: 500;
    color: #171717;
}

.invoice-info ul li span {
    font-weight: 400;
}



.invoice_bottom_pay {
    /*box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;*/
    /*padding:12px;*/
    /*border-radius:12px;*/
}

.invoice_bottom_pay ul {
    padding: 0;
    margin: 0;
    /*display:flex;*/
    list-style: none;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

}

.invoice_bottom_pay ul li {
    border: 0;
    border: 1px solid #ccc;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    padding: 10px;
    width: 100%;
    background-color: #f7f7f7;
    border-radius: 5px;
    margin-bottom: 10px;

}

/*.invoice_bottom_pay ul li:last-child{*/
/*    border-bottom:0 !important;*/
/*}*/

.invoice_bottom_pay ul li span {
    font-weight: 400;
}

.term-ul-invoice {
    margin-top: 0;
    height: 100%;
    background-color: #f7f7f7;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.term-ul-invoice h3 {
    font-size: 17px;
    font-weight: 700;
    color: #000;

}

.vat-dt p {
    font-size: 15px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}


.invoice_gen_basic {
    padding: 8px 15px;
    background-color: #b0b0b00f;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 100%;
    margin: 0;
}

.invoice_gen_basic ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.invoice_gen_basic ul li {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    margin: 15px 0;

}

.invoice_gen_basic ul li span {
    font-weight: 400;
    margin-left: 5px;
}


.flex-check-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 18px;
}

.flex-check-box input {
    width: 18px;
    height: 18px;
}

.flex-check-box label {
    margin: 0;
    margin-top: 2px;
}

.flex-between-list ul {
    padding: 0;
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px
}

.flex-between-list ul li {
    width: 32%;
    padding: 10px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;

}

.invoice-title-h2 h2 {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 15px;
    margin-top: 15px;
    color: #f8b042;
    /* display: flex
; */
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    text-align: left;
    /* background: #ec881121; */
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}


.invoice_gen_last_box {
    background-color: #f7f7f7;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #2f509e47;
}

.invoice_gen_last_box h2 {
    margin-top: 0;
    padding-top: 2px;
}

.invoice_gen_last_box input,
.invoice_gen_last_box select,
.invoice_gen_last_box textarea {
    background-color: #fff;
}

.invoice_gen_last_box input:focus,
.invoice_gen_last_box select:focus,
.invoice_gen_last_box textarea:focus {
    background-color: #fff;

}

.invoice_gen_last_box input[type='checkbox'] {
    border: 1px solid #ccc;
}

.invoice_gen_last_box input[type='checkbox']:focus {
    background-color: transparent;
}


.customer-project-widget a:hover {
    border-radius: 40px;
}

.project-top-view-main {
    background-color: #ffffffb3;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: rgb(255 255 255 / 73%);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.project-top-view-main ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.project-top-view-main ul li {
    width: 33%;
    margin: 13px 0;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;

}

.project-top-view-main ul li p {
    margin: 0;
}

.project-top-view-main ul li span {
    font-weight: 500;
}

.project-main-view-right {
    background-color: #fff;
    border-radius: 5px;
}

.project-main-view-right img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.project-main-view-right a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65%;
    background-color: #025187;
    color: #fff;
    text-decoration: none;
    height: 40px;
    border-radius: 5px;
    margin: auto;
    margin-top: 10px;
    transition: 0.5s;
}

.project-main-view-right a:hover {
    border-radius: 40px;
}

.image-updating-list {
    padding: 15px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 10px;
    max-width: 350px;
    overflow: auto;
}

.image-updating-list ol {
    padding: 0 15px;
    margin: 0;
}

.image-updating-list ol li {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: #b23939;
}

.image-updating-list ol p {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: #b23939;
    margin-left: -16px;
}

.project-status-green {
    padding: 3px 13px;
    background-color: #039445;
    border: 1px solid #089748;
    color: #fff;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
}

.project-status-orange {
    padding: 3px 13px;
    background-color: #ffc107;
    border: 1px solid #ffc107;
    color: #fff;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
}

.project-status-red {
    padding: 3px 13px;
    background-color: #f1606e;
    border: 1px solid #f1606e;
    color: #fff;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
}


.user-dropdown-top .dropdown-toggle {
    width: fit-content !important;
    padding: 0 18px;
    background: #ffffff6b;
    color: #fff !important;
    border-radius: 40px !important;
    font-weight: 300;
}

.user-dropdown-menu li a {
    border: 0 !important;
    text-align: left;
    color: #222;
    justify-content: flex-start !important;
    font-size: 14px !important;
    font-weight: 500;
}



.text-editor-cs .ck.ck-editor__main>.ck-editor__editable {
    height: 300px !important;
}

.phase-group {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px 6px;
    margin: 0;
    margin-bottom: 10px;
}

.phase-group input,
.phase-group select {
    background-color: #fff !important;
}

.phase-group input:focus,
.phase-group select:focus {
    background-color: #fff !important;
}

.doc-group {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px 6px;
    margin: 0;
    margin-bottom: 10px;
}

.doc-group input,
.doc-group select {
    background-color: #fff !important;
}

.doc-group input:focus,
.doc-group select:focus {
    background-color: #fff !important;
}

.doc-view-file {
    padding: 3px 10px;
    border-radius: 40px;
    background-color: #43be5f;
    font-size: 13px;
    color: #fff;
}

.doc-view-file:hover {
    background-color: #29873f;
    color: #fff;
}

.doc-file-view-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    background-color: #fff;
    height: 45px;
    border: 1px solid #222;
    border-radius: 5px;
    padding: 0 15px;

}

.doc-dlt {
    padding: 3px 10px;
    border-radius: 40px;
    background-color: #ff1919;
    font-size: 13px;
    color: #fff;
}

.doc-dlt:hover {
    background-color: #b23939;
}

.doc-folder-create {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

}

.doc-folder-create input {
    height: 45px;
    font-size: 13px;
    border-color: #222;
    background-color: transparent;
    color: #222 !important;
    width: 400px;
    background-color: #fff !important;
}

.doc-folder-create button {
    width: 150px;
    height: 45px;
    background-color: #239f04 !important;
    color: #fff;
    border-radius: 8px;
    border-color: #239f04;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s;

}

.doc-folder-create button:hover {
    border-radius: 40px;
}

.textarea-h-45 {
    height: 45px;
}

.project-view-main-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.project-view-main-top h3,
.project-view-main-top h4 {
    font-size: 19px;
    font-weight: 600;
    margin: 0;
}

.project-view-main-top h3 span {
    color: #ea3a3a;
}

.project-view-info {
    background-color: #fffaeb;
    border: 1px solid #f6e9c2;
    padding: 5px 15px;
    border-radius: 15px;
    height: 100%;
}

.project-view-info ul {
    display: unset;
    list-style: none;
    padding: 0;
    margin: 0;

}

.project-view-info ul li {
    width: 100%;
    margin: 17px 0;
    font-weight: 600;
    font-size: 15.5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.project-view-info ul li span {
    margin-left: 10px;
    font-weight: 400;
    color: #6c6c6c;
}

.project-view-info ul li p {
    margin: 0;
}


.box-title-center {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
    text-align: center;
}


.edit-btn-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 111px;
    background-color: #37a90a;
    color: #fff;
    text-decoration: none;
    height: 36px;
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.5s;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}

.edit-btn-main:hover {
    border-radius: 40px;
}

.edit-btn-main-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    background-color: #3f97f6;
    color: #fff;
    text-decoration: none;
    height: 40px;
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.5s;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-left: auto;
}

.edit-btn-main-icon:hover {
    border-radius: 40px;
}


.project-view-accordion .accordion-item {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 11px;
    overflow: hidden;
}

.project-view-accordion .accordion-item .accordion-button {
    font-size: 18px;
    font-weight: 600;
}

.project-view-accordion .accordion-item .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #025187;
}

.doc-folder-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222;
    padding-right: 10px;
}

.doc-folder-top h3 {
    border: 0 !important;
}

.doc-folder-top input {
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.file-dlt-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    border: 0;
    margin-top: 15px;
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.file-dlt-btn:hover {
    background-color: #b23939;
}

.view-document p {
    font-size: 16px;
    margin: 6px 0;
}

.view-document p strong {
    font-weight: 500;
}



.plus-cs-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #22b922;
    color: #fff;
    border: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

.plus-cs-btn:hover {
    background-color: #158115;
}

.minus-cs-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    border: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

.minus-cs-btn:hover {
    background-color: #b23939;
}

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

.invoice_field_form input,
.invoice_field_form select {
    background-color: #fff;
}

.invoice_field_form input:focus,
.invoice_field_form select:focus {
    background-color: #fff;
}


.reset-btn {
    width: 110px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #b23939;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;

}

.reset-btn:hover {
    border-radius: 40px;
    color: #fff;
}

.search-btn {
    width: 110px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #0f2f5d  ;
    color: #fff;
    border-radius: 10px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;

}

.search-btn:hover {
    border-radius: 40px;
    color: #fff;
}

.project-view-desc ul li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.project-view-desc ul li span {
    margin: 0 !important;
}

.project-view-desc ul li h1,
.project-view-desc ul li h2,
.project-view-desc ul li h3,
.project-view-desc ul li h4,
.project-view-desc ul li h5,
.project-view-desc ul li h6,
.project-view-desc ul li h1 strong,
.project-view-desc ul li h2 strong,
.project-view-desc ul li h3 strong,
.project-view-desc ul li h4 strong,
.project-view-desc ul li h5 strong,
.project-view-desc ul li h6 strong {
    font-size: 20px;
    color: #b23939;
    font-weight: 500;
}

.project-view-desc ul li p {
    font-size: 15px;
    line-height: 25px;
}

.project-view-main-top h5.project-status-badge {
    font-size: 15px;
}

.project-view-collapse {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.survey-title {
    text-align: center;
    color: #f99905;
}

.survay-rating-section {
    padding: 15px;
    background-color: #f7f7f7f7;
    border-radius: 15px;
    border: 1px solid #ccc;
}

.suravey-rating-box {
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 7px;
    border: 1px solid #ccc;
}

.text-inp textarea {
    height: 100px;
}

.radio-comtent-list ul {
    padding: 0;
    margin: 0;
    list-style: none;
    padding-left: 10px;

}

.radio-comtent-list ul li {
    margin: 10px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;

}

.radio-comtent-list ul li input {
    width: 18px;
    height: 18px;
}

.back-btn-csr {
    background-color: #d94242 !important;
}

.back-btn-csr:hover {
    background-color: #b23939 !important;
    color: #fff !important;
}


.folder-wrapper-cs {
    background-color: #fff6db;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f6e4b0;
}

.folder-wrapper-cs h3 {
    background: #ffffff7a;
    color: #000 !important;
}

.pagination-custom .table_bottom {
    margin: 12px 0;
}

.table_bottom svg {
    width: 30px;
}


.table_bottom .table-pagination {
    width: 100%;
    justify-content: flex-end;
    display: flex;
}

.table_bottom .table-pagination nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table_bottom .table-pagination nav div:last-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.image-table tr td img {
    width: 100px;
    height: 70px;
    border-radius: 7px;
    object-fit: cover;
}

.main-table-container .chart h3{
   font-size: 16px;
    color: #0f0905;
    font-weight: 600;
}
.page-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px !important;
}
.page-title h3{
    font-size: 20px;
    color: #000;
}
.page-title h3 span{
    font-size: 15px;
}
.page-title{
    padding: 10px 0;
    padding-top: 0;
}
.active-toggle{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.max-width-250 td{
    max-width: 250px;
}


.action-btns{
    display: flex !important
;
    justify-content: center !important;
    align-items: center;
    gap:5px;
}

.action-btns .btn-delete{
   min-width: 30px;
    height: 30px;
    background-color: #f9e2e2;
    color: #fff;
   border-radius: 20%;
    display: flex
;
    justify-content: center;
    align-items: center;
    border: 0;
    font-size:13px;
    text-decoration:none;
}
.action-btns i{
    color: #fff;
}
.action-btns .btn-delete i{
    color: #d92f2f;
}
.action-btns .btn-edit{
   min-width: 30px;
    height: 30px;
    background-color: #d7fadc;
    color: #fff;
  border-radius: 20%;
    display: flex
;
    justify-content: center;
    align-items: center;
    border: 0;
    font-size:13px;
    text-decoration:none;
}
.action-btns .btn-edit i{
    color: #17922a;
}
.action-btns .btn-view{
   min-width: 30px;
    height: 30px;
    background-color: #d7eaf2;
    color: #fff;
   border-radius: 20%;
    display: flex
;
    justify-content: center;
    align-items: center;
    border: 0;
    font-size:13px;
    text-decoration:none;
}
.action-btns .btn-view i{
    color:#1c83b1;
}
.action-btns .btn-cstm{
  
    height: 30px;
    padding:10px;
    background-color: #b2b815;
    color: #fff;
   border-radius: 5px;
    display: flex
;
    justify-content: center;
    align-items: center;
    border: 0;
    font-size:13px;
    text-decoration:none;
    color: #fff !important;
}
.action-btns .btn-nowrap{
    white-space:nowrap;
    border-radius:5px;
    font-size:13px;
    color:#fff;
}
.action-btns .full-width-btn{
    white-space:nowrap;
    border-radius:5px;
    font-size:13px;
    color:#fff !important;
     height: 30px;
     background-color: #2fa9bc;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 10px;
}
.action-btns .btn-nowrap i{
    margin-right:3px !important;
}


.submit-btn{
       width: 150px;
    height: 40px;
   background: #0c6c0d;
    border: 0;
    display: flex
;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: 0.5s;
    border-radius: 5px;
    font-size:15px;
    text-decoration:none;
    margin:10px auto;
}
.submit-btn:hover{
      border-radius:40px;
}

.price-select{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.price-select select{
    width: 80px;
}
.nowrap{
    white-space: nowrap;
}
.table-img-logo tr td img{
    width: 100px;
    height:  80px;
    object-fit: cover;
    border-radius: 5px;
}

.cms-field-container h3{
    margin: 10px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e126f;
}
td div.text-line-3{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.modal-btn-box{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 30px;
}
.modal-btn-box button{
  width: 80px;
  height: 33px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-size: 15px;
  border: 0;
}
.bg-default{
  background-color: #000 !important;
}
.bg-epn-red{
  background-color: #dd4b39  !important;
}

.time-to-select{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
h3.setting-title{
    font-size: 18px;
    font-weight: 600;
}

.backup-container ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.backup-container ul li{
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.backup-container ul li label{
    font-size: 15px;
    font-weight: 600;
    color: #000;
}
.backup-container ul li button{
    width: fit-content;
    padding: 7px 15px;
    border: 0;
    border-radius: 40px;
    background-color: #027009;
    color: #fff;
    font-size: 15px;
}
.bg-modal-btn{
    background-color: #236c64 !important;
}
.page-title-btn h3{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page-title-btn h3 a{
    padding: 7px 15px;
    font-size: 15px;
    background-color: #1e126f;
    border-radius: 5px;
    color: #fff;
    transition: 0.5s;
}
.page-title-btn h3 a:hover{
    border-radius: 40px;
}


/* UGE */


.login-img-right{
    width: 100%;
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.login-img-right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}



@media screen and (min-width:1200px){
    .container-max-cs{
        max-width: 1800px  !important;
    }
}
.login-overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
  /* background: #13889C;
background: linear-gradient(170deg, rgba(19, 136, 156, 0.41) 0%, rgba(1, 7, 8, 0.27) 100%); */
}

.btns-header-top{
    display: none;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
}
.btns-header-top a{
       padding: 10px 15px !important;
    font-size: 13px !important;
    background-color: #18a0b8 !important;
    color: #fff !important;
    border-color: #13889C !important;
    height: 35px !important;
    transition: 0.5s;
}
.btns-header-top a:hover{
    border-radius: 40px;
}
.btns-header-top a.bg1{
    background-color: #3961b2 !important;
     border-color: #3961b2 !important;
}
.btns-header-top a.bg2{
    background-color: #dab522 !important;
     border-color: #dab522 !important;
}
.btns-header-top a.bg3{
    background-color: #269e68 !important;
     border-color: #269e68 !important;
}
ul.qk-action-btns{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}
ul.qk-action-btns li{
    width: 25%;
}
ul.qk-action-btns li a{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #025187;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    transition: 0.5s;
}
ul.qk-action-btns li a:hover{
    border-radius: 40px;
}
ul.bottom-dashboard-list{
     list-style: none;
    margin: 0;
    padding: 0;
   
}
ul.bottom-dashboard-list li{
    margin-bottom: 15px;
}
ul.bottom-dashboard-list li:last-child{
    margin-bottom: 0;
}
ul.bottom-dashboard-list li a{
    font-size: 14px !important;
    background-color: #ccc;
    font-size: 15px;
    color: #000;
    padding: 4px 15px;
    border: 1px solid #ccc;
    border-radius: 40px;
}
ul.company-check-box{
     list-style: none;
    margin: 0;
    padding: 0;
}
ul.company-check-box li{
    margin: 14px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
ul.company-check-box li input{
    width: 20px;
    height: 20px;
}
ul.company-check-box li label{
    font-size: 15px;
    color: #000;
    margin: 0;
}
.office-time{
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    margin-top: 25px;
    border: 1px solid #ccc;
}
.office-time h6{
    font-weight: 600;
    color: #c35d0f;
}
h5.title-cs-bnk{
    font-size: 17px;
    font-weight: 600;
    color: #043783;
}
h6.title-cs-bnk{
    font-size: 15px;
    font-weight: 600;
    color: #043783;
}
a.viewFilesbtn{
    background-color: #113b85;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 7px 15px;
    color: #fff;
    border-radius: 40px;
    font-size: 15px;
}
.bg-filter{
    background-color: #025187 !important;
}
.btn-flex{
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    align-items: center;
}
.btn-flex a,.btn-flex button{
    margin: unset;
}
.filter-btns-top{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.td-select select{
    font-size: 14px;
    border-color: #22222217;
    background-color: #efefef;
    color: #222 !important;
    border-radius: 11px;
}
.mobile-flex{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.mobile-flex select{
    width: 100px;
}
.min-width-150{
    min-width: 250px;
}
.w-fit-content{
    width: fit-content;
}

.advanced-search-content .modal-header{
    padding-bottom: 10px;
}
.advanced-search-content .modal-header h1{
    font-size: 17px !important;
    font-weight: 600;
}

.advanced-search-box{
    background-color: #f7f7f7;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
}
.advanced-box div{
    margin: 8px 0;
}
.advanced-box label{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: #000;
}
.advanced-box label input{
    margin-top:2px;
    width: 18px;
    height: 18px;
}
.advanced-search-box .o-f-inp input,.advanced-search-box .o-f-inp select{
    background-color: #fff;
}

ul.qk-filters{
       list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
ul.qk-filters li a{
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 5px 10px;
    font-size: 14px;
    color: #000;
    border-radius: 10px;
}

.check-label{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.check-label input{
    width: 18px;
    height: 18px;
}
.check-label label{
    font-size: 14px;
    color: #000;
}
.flex-filter-both{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.flex-filter-both div:first-child{
    width: 75%;
}




.range-slider {
    width: 100%;
    margin: auto;
    text-align: center;
    position: relative;
    height: 4em;
}

/* .range-slider svg,
.range-slider input[type=range] {
	position: absolute;
	left: 0;
	bottom: 0;
} */

.rng-input[type=number] {
    border: 0;
    font-size: 1.6em;
    -moz-appearance: textfield;
    font-size: 12px;
}

.rng-input[type=number]::-webkit-outer-spin-button,
.rng-input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.rng-input[type=number]:invalid,
.rng-input[type=number]:out-of-range {
    color: #ff6347;
}

.rng-input {
    border: 0;
    font-size: 1.6em;
    -moz-appearance: textfield;
    font-size: 12px;
}

.rng-input::-webkit-outer-spin-button,
.rng-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.rng-input:invalid,
.rng-input:out-of-range {
    color: #ff6347;
}

.type-rng-inp[type=range] {
    -webkit-appearance: none;
    width: 100%;
}

.type-rng-inp[type=range]:focus {
    outline: none;
}

.type-rng-inp[type=range]:focus::-webkit-slider-runnable-track {
    background: #18a0b8;
}

.type-rng-inp[type=range]:focus::-ms-fill-lower {
    background: #18a0b8;
}

.type-rng-inp[type=range]:focus::-ms-fill-upper {
    background: #18a0b8;
}

.type-rng-inp[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    animate: 0.2s;
    background: #18a0b8;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

.type-rng-inp[type=range]::-webkit-slider-thumb {
    z-index: 2;
    position: relative;
    border: 1px solid #286276;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -9px;
}

.type-rng-inp[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: #18a0b8;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

.type-rng-inp[type=range]::-moz-range-thumb {
    z-index: 2;
    position: relative;
    border: 1px solid #07395b;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #18a0b8;
    cursor: pointer;
}

.type-rng-inp[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.type-rng-inp[type=range]::-ms-fill-lower,
.type-rng-inp[type=range]::-ms-fill-upper {
    background: #18a0b8;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

.type-rng-inp[type=range]::-ms-thumb {
    z-index: 2;
    position: relative;
    border: 1px solid #18a0b8;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #a1d0ff;
    cursor: pointer;
}

.price-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
}

.price-top input {
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
    width: 50%;
    margin-top: 10px;
    background-color: transparent;
}

.pos-inp {
    position: absolute;
    left: 0;
    bottom: 22px;
}

.range-slider label {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    text-align: left;
    width: 100%;
}

.program-left-filter{
    background-color: #ffffff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: rgba(255, 255, 255, 0.908);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.program-filter-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.program-filter-top label{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}
.program-filter-top label input{
    width: 20px;
    height: 20px;

}
.program-filter-top select{
    width: 150px;
    height: 40px;
    border-radius: 40px;
    font-size: 14px;
}
.program-info-container{
     background-color: #ffffff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: rgba(255, 255, 255, 0.908);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.program-info-container h3{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
    gap: 10px;
}
.program-info-container h3 a {
    text-decoration: none;
    font-size: inherit;
    color: #000;
}
.program-info-container h3 input{
    width: 18px;
    height: 18px;
}
.program-info-top ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
    margin: 20px 0;
}

.program-info-top ul li span{
    padding: 7px 15px;
    background-color: red;
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
    display: flex;
}
.program-info-top ul li span i{
    margin-right: 5px;
}
.program-info-top ul li span.bg-1{
    background-color: #18a0b8;
}
.program-info-top ul li span.bg-2{
    background-color: #18b857;
}
.program-info-top ul li span.bg-3{
    background-color: #b2b818;
}

.program-info-second ul{
     display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}
.program-info-second ul i{
    color: #113b85;
    margin-right: 10px;
}
.program-info-second ul li{
    font-size: 15px;
}

.program-info-second ul li img{
    width: 25px;
    height: 25px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
}
.program-info-bottom{
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding:5px 15px;
    border-radius: 15px;
    height: 100%;
}
.program-info-bottom ul{
    padding: 0;
    margin:  0;
    list-style: none;
}
.program-info-bottom ul li{
    margin: 10px 0;
    font-size: 15.5px;
    color: #000;
}
.program-info-bottom ul li small{
    background-color: #8a9fb4;
    color: #fff;
    padding: 5px 10px;
    border-radius: 40px;
}
.program-info-bottom-second ul{
      padding: 0;
    margin:  0;
    list-style: none;
}
.program-info-bottom-second ul li .btn{
    font-size: 14px;
    background-color: #dbf8d2;
    color: #000;
    border-color: #dbf8d2;
}
.program-info-bottom-second ul li{
    margin: 10px 0;
}

.program-details-left{
      background-color: #ffffff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: rgba(255, 255, 255, 0.908);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    position: sticky;
    top: 70px;
}
.program-dt-logo{
    background-color: #deecfb;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.program-dt-logo img{
    width: 250px;
}
.program-details-left h3{
    margin: 10px 0;
    font-size: 18px;
}
ul.program-details-left-ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.program-details-left-ul li{
    margin: 10px 0;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.program-info-bottom-third li .btn{
    text-align: left;
    display: flex;
    justify-content:space-between;
    align-items: center;
}
a.progrm-dt-a{
    font-size: 14px;
    text-align: center;
    margin: 10px auto;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.program-container-right h3{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size:22px;
}
.program-container-right h3 span{
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}
.list-program-dt ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.list-program-dt ul li{
    width: 47%;
    font-size: 15px;
    font-weight: 500;
    color: #000;
    border-bottom: 1px solid #ccc;
    padding: 7px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list-program-dt ul li span{
    font-weight: 400;
    color: #6d6d6d;
}
.program-dt-right-bottom ul{
    padding-left: 0;
    padding-left: 20px;
}
.program-dt-right-bottom ul li{
    font-size: 13px;
    margin-bottom:7px;
}

.enq-center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 60vh;
}
.enq-center img{
    width:450px;
}
.enq-center h3{
    font-size: 35px;
    font-weight: 600;
    color: #000;
    margin: 0;
}
.enq-center p{
    font-size: 16px;
    margin: 10px 0;

}
.enq-center a{
    padding: 7px 15px;
    background-color: #113b85;
    color: #fff;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    font-size: 15px;
    transition: 0.5s;
}
.enq-center a:hover{
    border-radius: 40px;
}
.form-fied-checkbox div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}
.form-fied-checkbox div label{
   display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px; 
}
.form-fied-checkbox div label input{
    width: 18px;
    height: 18px;
}



/* Container */
.txn-container {
  width: fit-content;
  margin: auto;
}

/* Row Card */
.txn-row {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Header Row (FLEX — no grid issues) */
.txn-header {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 10px;
}

/* Columns */
.txn-col {
  font-size: 14px;
  white-space: nowrap;
  min-width: 180px;
}

/* Status colors */
.txn-credit {
  color: #00a86b;
  font-weight: 500;
}

.txn-debit {
  color: orange;
  font-weight: 500;
}

/* Arrow button */
.txn-arrow {
  flex: 0 0 35px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  background: #113b85;
  user-select: none;
  transition: transform 0.3s ease;
  color: #fff;
}

/* Rotate when active */
.txn-arrow.active {
  transform: rotate(180deg);
}

/* Hidden details */
.txn-details {
  display: none;
  padding: 10px;
  border-top: 1px solid #ddd;
  background: #fafafa;
}

/* Inner table */
.txn-details table {
  width: 100%;
  border-collapse: collapse;
}

.txn-details th,
.txn-details td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  font-size: 14px;
}

.txn-details th {
  background-color: #e0eff3;
    color: #2a7c9b;
    border: 1px solid #a1bde566;
    font-size: 13px;
    padding: 15px 10px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
}
.txn-details td{
        color: #222 !important;
    border: 0;
    border: 1px solid #dadada;
    text-align: center;
    padding: 15px 12px !important;
    font-size: 14px;
    font-weight: 400;
}
.txn-header-cs div{
    font-weight: 600;
    color: #000;
}

.profile-preview{
  background-color: #f2f2f2;
  padding:25px;
  border-radius: 10px;
  height: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: center;


}
.profile-preview ul{
  padding: 0;
  list-style: none;
}
.profile-preview ul li{
  margin: 15px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}
.profile-preview ul li span{
  font-weight: 400;
}
.permission-Bottom ul li label{
    font-size: 15px;
    font-weight: 600;
}
.permission-top ul li label{
    width: 100%;
    font-size: 14.5px;
    font-weight: 400;
    
}
.permission-top ul li{
    margin: 7px 0 !important;
}
.permission-top ul li:nth-child(2) label{
    white-space: nowrap;
    min-width: 100px;
}
.permission-top ul li:last-child label{
    white-space: nowrap;
    min-width: 80px;
}
.permission-Bottom ul{
    padding-left: 0 !important;
  
}
.permission-top ul{
  gap: 80px !important;
}
.permission-Bottom ul li{
    margin-top: 15px;
}
.settings-save-btn{
    padding-top: 25px;
}
.settings-save-btn button{
    margin: 0;
}
.settings-form{
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 20px;
    background-color: #f7f7f7;
}
.settings-form input,.settings-form select{
    background-color: #fff;
}
.tab-studet-tg{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-studet-tg ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}
.tab-studet-tg ul li a {
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    color: #000;
    font-weight: 500;
}
.tab-studet-tg ul li a span{
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tab-studet-tg ul li a.active span{
    background-color: #13889C;
    border-color: #113b85;
    color: #fff;
}
a.stps{
    background-color: #039445;
    color: #fff;
    padding: 7px 15px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    gap: 10px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 400;
}
.student-info-add-cont{
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 15px;
}
.student-info-add-cont input,.student-info-add-cont select,.student-info-add-cont textarea{
    background-color: #fff !important;
}
.student-info-add-cont h5{
    font-size: 20px;
    color: #023970;
    margin: 10px 0;
}
a.add-field-exp{
    width: 35px;
    height: 35px;
    background-color: #027009;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    border-radius: 50%;
}

.app-info-left{
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 10px;
}
.app-info-left h5{
    font-size: 15px;
    color: #089748;
}
.app-info-left ul{
    margin: 0;
    padding: 0;
}
.app-info-left ul li{
    margin: 10px 0;
    font-size: 15px;
    list-style: none;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.app-info-left ul li span{
    max-width: 250px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.app-info-right{
    background-color: #f7f7f7;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 12px;
}
.app-info-right-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.app-info-right-top small{
    font-size: 13px;
}
.app-info-right-top span{
    background-color: #ffe0e0;
    color: red;
    padding: 7px 15px;
    border-radius: 5px;
    font-size: 14px;
    border-radius: 40px;
}
.app-info-right-bottom h5 a{
    font-size: 18px;
}
.app-info-right-bottom h4{
    margin: 7px 0;
    font-size: 20px;
    
}
.app-info-right-bottom p{
    font-size: 15px;
    margin: 5px 0;
    color: #7e7a7a;
}
.app-info-right-bottom-2{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.app-info-right-bottom-2 a{
    background-color: #039445;
    color: #fff;
    padding: 7px 15px;
    font-size: 13px;
    border-radius: 7px;
}





.msger {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 100%;
    height: calc(100% - 50px);
    border-radius: 5px;
    background-color: #fff;
    padding: 15px;
    margin-top: 10px;
    border-radius: 10px;
}

.msger-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    color: #666;
    border-bottom: 1px solid #ccc;
}

.msger-chat {
    /* flex: 1; */
    overflow-y: scroll;
    padding: 10px;
    height: 400px;
}

.msger-chat::-webkit-scrollbar {
    width: 3px;
}

.msger-chat::-webkit-scrollbar-track {
    background: #fff;
}

.msger-chat::-webkit-scrollbar-thumb {
    background: #bdbdbd;
}

.msg {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}

.msg:last-of-type {
    margin: 0;
}

.msg-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background: #ddd;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
  
}

.msg-bubble {
    max-width: 450px;
    padding: 15px;
    border-radius: 15px;
    background: #f2f2f2;
}

.msg-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.msg-info-name {
    margin-right: 10px;
    font-weight: 500;
    font-size: 13px;
    font-family: var(--font-main);
}

.msg-text {
    font-family: var(--font-main);
}

.msg-info-time {
    font-size: 0.85em;
}

.left-msg .msg-bubble {
    border-bottom-left-radius: 0;
}

.right-msg {
    flex-direction: row-reverse;
}

.right-msg .msg-bubble {
    background: #7ca4a3;
    color: #fff;
    border-bottom-right-radius: 0;
}

.right-msg .msg-img {
    margin: 0 0 0 10px;

}

.msger-inputarea {
    display: flex;
    padding: 10px;
    border-top: var(--border);
    background: #fff;
}

.msger-inputarea * {
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 1em;
}

.msger-input {
    flex: 1;
    background: #f2f2f2 !important;
    outline: none;
    border: none;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.msger-send-btn {
    margin-left: 10px;
    background: #13889C;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: background 0.23s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}

.msger-send-btn i {
    padding: 0;
}

.msger-send-btn:hover {
   background: #13889C;
}

.msger-chat {
    background-color: #fcfcfe;

}

.chat-img-bx {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 4px;
}

.chat-img-bx img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.msger-header-title h3 {
    font-size: 17px;
    font-weight: 500;
    margin-left: 10px;
    margin-bottom: 0;
}

.file-attch {
    background-color: #f2f2f2;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.title-search-field h5{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #025187;
}
.title-search-field h5 input{
    width: 300px;
    height: 45px;
    font-size: 15px;
    border-radius: 7px;
}
.title-search-field p{
    font-size: 14px;
    color: #000;
}
.p-info-top-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #222;
    margin-bottom: 15px;
}
.p-info-top-container a.dlt{
    min-width: 35px;
    height: 35px;
    background-color: red;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.p-info-c-top{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.p-info-c-top select{
      width: 300px;
    height: 45px;
    font-size: 15px;
    border-radius: 7px;
}
.p-info-c-top a.dtv{
     background-color: #039445;
    color: #fff;
    padding: 7px 15px;
    font-size: 13px;
    border-radius: 7px;
}
.program-upload-btns{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
}
.program-upload-btns a{
    padding: 7px 15px;
    font-size: 14px;
    background-color: #023970;
    color: #fff;
    border-radius: 7px;
}

h3.title-spa{
    font-size: 20px;
   margin: 0;
   margin-bottom: 15px;
    font-weight: 600;
    color: #000;
}

.g-settings-left{
    padding:5px 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    background: rgba(255, 255, 255, 0.908);
    background: #ffffffc7;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    position: sticky;
    top: 80px;
    left: 0;
}
.g-settings-left ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.g-settings-left ul li{
    margin: 10px 0;
    border-bottom: 1px solid #ccc;
}
.g-settings-left ul li a{
    padding: 7px;
    font-size: 15px;
    color: #000;
    display: flex;
}
.g-settings-left ul li a:hover{
    background-color: #f7f7f7;
}
.g-settings-right{
     padding: 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    background: rgba(255, 255, 255, 0.908);
    background:#ffffffc7;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.g-settings-right h3{
    font-size: 18px;
    font-weight: 600;
}
.g-settings-right p{
    font-size: 14px;
}
html{
    scroll-padding-top:4.5rem;
}
input.fieldCheck{
    width: 18px;
    height: 18px;
}
button.exp-btn{
    border: 0;
    background-color: #109896;
    width: 150px;
    padding: 7px 15px;
    height: 40px;
    border-radius: 7px;
    color: #fff !important;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #109896;
    transition: 0.5s;
    margin-left: 10px;
    font-size: 15px;
}
button.exp-btn:hover{
    border-radius: 40px;
}
img.img-td{
    width: 120px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 5px solid #ccc;
}
.min-width-350.tds{
    min-width: 350px;
}
.masters-btns ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.masters-btns ul li{
    width:24%;

}
.masters-btns ul li a{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    transition: 0.5s;
}
.masters-btns ul li a:hover{
    border-radius: 40px;
}
button.tgle-cs-btns{
    min-width: 30px;
    height: 30px;
    background-color: #d9e7fc;
    color: #0d6efd;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    font-size: 13px;
    text-decoration: none;
}
button.tgle-cs-btns i{
    color:#0d6efd;
}
.dromenu-cs li a.dropdown-item{
    color: #000 !important;
    padding: 10px !important;
}
.dromenu-cs li a.dropdown-item:hover{
    background-color: #f2f2f2;
}




.toggle-btn[type="checkbox"] {
  position: relative;
  width: 40px;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: gray;
  outline: none;
  border-radius: 2rem;
  cursor: pointer;
  border: none;
  /* box-shadow: inset 0 0 5px rgb(0 0 0 / 50%); */
  background-color: #c0bdbd !important;
}
.toggle-btn:focus{
  border: none !important;
  outline: none !important;
}

.toggle-btn[type="checkbox"]::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff !important;
  border: 1px solid #222;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
}

.toggle-btn[type="checkbox"]:checked::before {
  transform: translateX(100%);
  background: #fff !important;
}

.toggle-btn[type="checkbox"]:checked {
  background: #409717 !important;
}
.v-preview{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0eff2;
    padding: 15px;
    border-radius: 15px;
    position: relative;
}
.v-preview img{
    width: 160px;
    border-radius: 20px;
}
.v-preview span{
    padding: 7px 15px;
    border-radius: 40px;
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #039445;
    color: #fff;
}
.v-title{
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0;
    text-align: center;
}
.v-preview-widget {
    background-color: #faf9f98c;
    border: 1px solid #cccccc75;
    padding:5px 15px;
    border-radius: 10px;
    height: 100%;
}
.v-preview-widget ul{
    padding: 0;
    list-style: none;
    margin: 0;
}
.v-preview-widget ul li{
   margin: 10px 0;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3px;
    border-bottom: 1px solid #cccccc54;
    padding: 6px 0;
    margin-top: 8px;

}
.v-preview-widget ul li span{
    font-weight: 400;
    font-size: 14px;
}
.v-document-view{
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 15px;
}

.v-document-view h6,.v-preview-widget h6{
    font-weight: 600;
    color: #000;
    font-size: 17px;
}
.v-doc-preview{
    background-color: #fff;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ccc;
}
.v-doc-preview img{
    width: 100%;
    height: 120px;
    border-radius: 10px;
    object-fit: contain;
}
.v-doc-preview a{
    padding: 7px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    width: fit-content;
    background-color: #043783;
    color: #fff;
    font-size: 14px;
    border-radius: 40px;
    margin-bottom: 0;
}
.wrap-ul ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrap-ul ul li{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.v-preview-bottom ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.v-preview-bottom ul li{
    font-weight: 600;
    color: #000;
}
.v-preview-bottom ul li select{
    width: 250px;
    font-size: 14px;
    border: 1px solid #ccc;
    height: 45px;
}

.sub-active{
  background: #0e0e0d5c;
    color: #fff !important;
}




.lock-title {
    text-align: center;
    font-size: 20px;
    margin: 0;
    color: #000;
    margin-top: 0;
    
    font-weight: 600;
    color: #000;
}
.lock-modal-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px 30px;
    gap: 10px;
}
.lock-modal-footer button, .lock-modal-footer a{
    width: 100px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s;
    border-radius: 4px;
    text-decoration: none  !important;
    border: 0;
}
.lock-modal-footer a{
    background-color:#109896;
    color: #fff;
  
}
.lock-modal-footer button{
    background-color: #E5D8CB;
    color: #222;
}
.lock-modal-footer button:hover, .lock-modal-footer a:hover{
    border-radius: 40px;
}

.modal{
    background-color: #1d505340;
    backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}


#lockedAccount i{
    font-size: 40px;
    color: #027009;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 7px;
}
.company-days-listing{
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;
  
    border-radius: 15px;
}
.company-days-listing ul{
    
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-wrap: wrap;
    
}
.company-days-listing ul li{
    width: 33%;
}
.company-days-listing h6{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #c35d0f;
}

.company-days-listing h6 label{
    font-size: 16px;
    color: green;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.company-days-listing h6 label input{
    width: 18px;
    height: 18px;
}

.add-modal-field{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

}
.add-modal-field button{
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #089712;
    color: #fff;
    border: 0;
}
#leadFieldModal3 h5,#leadFieldModal2 h5,#leadFieldModal1 h5{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
.mn-0{
    min-width: unset !important;
}

.select2-container--default .select2-selection--multiple{
        height: 45px !important;
    font-size: 14px !important;
    border-color: #22222217 !important;
    background-color: #efefef !important;
    color: #222 !important;
    border-radius: 11px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    font-size: 13px;
}

.form-control:disabled,.form-select:disabled{
    background-color: #e7e7e7;
    cursor: not-allowed;
}

#convertDealModal2 i,#successModal i {
    font-size: 40px;
    color: #027009;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 7px;
}
.flex-check{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
}
.flex-check input{
    width: 18px;
    height: 18px;
}

.student-preview-profile img{
    width: 100%;
    height: 200px;
    border-radius: 15px;
    object-fit: cover;
}
.s-preview-widget ul{
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.s-preview-widget ul li{
    flex-direction: row;
    width: 50%;
}
.s-preview-widget h3{
    font-size: 22px;
    margin-top: 5px;
    margin-bottom: 0;
}
.s-preview-widget ul li{
    margin: 8px 0;
}

.s-preview-address h6{
     font-size: 17px;
     color: #235294;
    margin-top: 5px;
    margin-bottom: 0;
}
.s-preview-address ul li{
    flex-direction: row;
}
.s-preview-address ul li label{
    min-width: 160px;
}

.s-doc-preview p{
    text-align: center;
    font-weight: 600;
    margin: 0;

}
.s-doc-preview small{
    display: block;
    font-size: 13px;
    text-align: center;
}
.desc-program-dt{
    background-color: #eef4f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
}
.desc-program-dt h6{
    font-size: 16px;
    margin: 5px 0;
    color: #000;
    font-weight:600 ;
}
.desc-program-dt p,.p-b-para{
    margin: 0;
    font-size: 14px;
}
ul.p-dt-ul{
    margin: 0;
}
.p-dt-ul li{
     margin: 5px 0;
    font-size: 14px; 
}
.u-details-preview {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.u-details-preview h6{
    font-size: 16px;
    margin: 5px 0;
    color: #000;
    font-weight:600 ;
}
.u-details-preview ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.u-details-preview ul li{
    margin: 0 0;
    width: 49%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 15.5px;
    padding-right: 20px;
}
.u-details-preview ul li label{
    font-weight: 600;
    color: #000;
    white-space: nowrap;
    margin-right: 10px;
    min-width: 150px;
}


.table-over {
  overflow: auto;
  position: relative;
}

.table-over .dropdown {
  position: static;
}

.table-over .dropdown-menu {
  position: absolute;
}




.invoice-info{
  background-color: #f2f2f2;
  padding:4px 15px;
  border-radius: 10px;
  height: 100%;
}
.invoice-info h4{
  font-size: 16px;
  font-weight: 700;
  color: #012970;
  margin-top: 10px;
}
.invoice-info ul{
  padding: 0;
  margin: 0;
  list-style: none;
}
.invoice-info ul li{
  font-size: 14px;
  margin: 13px 0;
  font-weight: 500;
}
.invoice-info ul li span{
  font-weight: 400;
}

.applicant-details {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 12px;
}
.applicant-details input,.applicant-details textarea,.applicant-details select{
    background-color: #fff !important;
}
.applicant-details h3{
    font-size: 18px;
    color: #109896;

}
.td-field select,.td-field input{
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #222;
    width: 180px;
    margin: 0 auto;
}
.invoice-info-bottom-cs ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.invoice-info-bottom-cs ul li{
    width: 32.6%;
    margin: 0;
}




/*Preview pages*/

.wo-preview-top {
    display: flex;
    justify-content: center;
    align-items: Center
}

.wo-preview-top img {
    width: 300px;
}

.preview-container-center h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

.line-hr {
    width: 100%;
    height: 2px;
    background-color: #000;
    margin: 25px 0;
    display: flex;
    margin-top: 2px;

}

.preview-container-center h4 {
    font-size: 18px;
    color: #000;
    font-weight: 700;
}

.preview-container-center p {
    font-size: 15px;
    margin: 5px 0;
}

.preview-container-center-right table tr,
.preview-container-center-right table tr th,
.preview-container-center-right table tr td {
    border: 0 !important;
}

.preview-container-center-right table tr th,
.preview-container-center-right table tr td {
    padding: 5px 0 !important;
    font-size: 15px;
    font-weight: 400;
}

.preview-container-center-right table tr th {
    text-transform: uppercase;
}

.preview-container-center-bottom table tr th {
    border: 0 !important;
    border-top: 1px solid #222 !important;
    border-bottom: 1px solid #222 !important;
    padding: 5px;
    background-color: transparent;
    font-size: 16px;
    text-align: center;
}

.preview-container-center-bottom table tr td {
    border: 0;
    padding: 5px;
    background-color: transparent;
    font-size: 16px;
    text-align: center;
}

.preview-bottom-left table tr td {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
}

.preview-bottom-right ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.preview-bottom-right ul li {
    display: flex;
    justify-content: space-between;
}

.preview-bottom-right table tr th {
    font-size: 16px;
    font-weight: 600;
    padding: 0px !important;
}

.preview-bottom-right table tr td {
    font-weight: 300 !important;
    padding: 0px !important;
}

.preview-bottom-right table tr td.pdt,
.preview-bottom-right table tr th.pdt {
    padding-top: 35px !important;
}

.preview-bottom-right table tr td .line-cs {
    height: 0.5px;
    width: 100%;
    background-color: #000;
}

.preview-bottom-btns {
    display: Flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding-top: 20px;
}

.preview-bottom-btns a,
.preview-bottom-btns button {
    margin: unset !important;
}


.wo-preview-top-2 {
    flex-direction: column;
    align-items: flex-start;
}

.wo-preview-top-2 .line-cs-2 {
    height: 0.8px;
    width: 100%;
    background-color: #000;
    margin: 3px 0;
}

.preview-container-center-two ul {
    margin: 0;
    list-style: none;
    padding: 0;
}

.preview-container-center-two ul li {
    margin: 7px 0;
    font-size: 15px;
    font-weight: 400;
    color: #000;
}

.p-tag p {
    color: #000;
    font-weight: 500;
}

.preview-container-center h2 {
    font-size: 25px;
    margin: 10px 0;
    color: #000;
    margin-top: 30px;
}

.figures-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.figures-list ul li {
    padding: 7px 15px;
    border-radius: 10px;
    margin: 5px 0;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.figures-list ul li.bg1 {
    background-color: #ff6300;
}

.figures-list ul li.bg2 {
    background-color: #094fb6;
}

.figures-list ul li.bg3 {
    background-color: #19871a;
}

.figures-list ul li.bg4 {
    background-color: #e61b1b;
}

.figures-list ul li.bg5 {
    background-color: #875119;
}


.label-between {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px
}


.label-between button {
    background: #31b331 !important;
    border-color: #31b331 !important;
    padding: 5px 15px;
    border-radius: 40px;
}

.center-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.center-text p{
    text-align: center;
}

.remark-invoice{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.remark-invoice h3{
    font-size: 16px;
    margin-bottom: 2px;
    font-weight: 600;
}
.remark-invoice p{
    font-size: 13px;
    color: #323232;
}

.flex-radio{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.flex-radio label{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.flex-radio input{
    width: 18px;
    height: 18px;
}


.login-btns-index{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}
.login-btns-index a{
    width:300px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #5BC1D7;
    color: #fff;
    margin: 5px 0;
    border-radius: 7px;
    font-size: 14px;
    transition: 0.5s;
}
.login-btns-index a.bg1{
    background-color: #0f5f70;
}
.login-btns-index a.bg2{
    background-color: #49a25f;
}

.login-btns-index a:hover{
    border-radius: 40px;
}

/* Wrapper */
/* .ax-preview-wrap {
    max-width: 1150px;
    margin: auto;
    padding: 30px;
} */

/* Section Card */
.ax-card {
    background: #fff;
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    
}

/* Title */
.ax-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Section Heading */
.ax-head {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #4f46e5;
    border-left: 4px solid #4f46e5;
    padding-left: 10px;
}

/* Grid */
.ax-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* Field */
.ax-label {
    font-size: 12px;
    color: #6b7280;
}

.ax-value {
    font-size: 14px;
    font-weight: 500;
}

/* Document Box */
.ax-doc {
    padding: 10px 14px;
    background: #eef2ff;
    border-radius: 8px;
    font-size: 13px;
}

/* Buttons */
.ax-actions {
    text-align: right;
}

.ax-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.ax-edit { background: #e5e7eb; }
.ax-submit { background: #4f46e5; color: #fff; }

.input-edit{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.input-edit button{
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b23939;
    color: #fff;
    border: 0;
}



/* Wrapper */
/* .cn-preview-shell {
    max-width: 1200px;
    margin: auto;
    padding: 30px;
} */

/* Header */
.cn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.cn-title {
    font-size: 24px;
    font-weight: 600;
}

/* Card */
.cn-box {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* Section Title */
.cn-section {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #000;
    text-transform: uppercase;
}

/* Grid */
.cn-flex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 10px;
}

/* Field */
.cn-label {
    font-size: 11px;
    color: #94a3b8;
}

.cn-value {
    font-size: 14px;
    font-weight: 500;
}

/* Highlight Strip */
.cn-highlight {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
}
.cn-highlight .cn-label{
    color: #fff;
}

/* Document Tag */
.cn-tag {
    background: #f2f2f2;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    display: inline-block;
}

/* Action Buttons */
.cn-actions {
    text-align: right;
}

.cn-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.cn-edit {
    background: #334155;
    color: white;
}

.cn-submit {
    background: #22c55e;
    color: white;
}



/* Title */
.csx-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Card */
.csx-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
}

/* Section */
.csx-head {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Grid */
.csx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 15px;
}

/* Field */
.csx-label {
    font-size: 12px;
    color: #6b7280;
}

.csx-value {
    font-size: 14px;
    font-weight: 500;
}

/* Docs */
.csx-doc {
    border: 1px dashed #d1d5db;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
}

/* Actions */
.csx-actions {
    text-align: right;
}

.csx-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.csx-edit {
    background: #e5e7eb;
}

.csx-submit {
    background: #111;
    color: #fff;
}


/* SYSCON */

.main-index-box{
    width:100%;
}
.login-screen-top-img {
    min-width: 50%;
    width: 50%;
    height: 100vh;
    border-radius: 0;
    /* background-image:linear-gradient(348deg,rgba(0, 39, 95, 0.46) 0%, rgba(0, 39, 95, 0.46) 100%),url(../img/baner/1.jpg) ; */
    background-image: linear-gradient(348deg, rgb(1 9 10 / 9%) 0%, rgb(1 13 15 / 21%) 100%), url(../img/baner/3.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction:column;
    padding:30px;
}
.login-screen-top-img h2{
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    margin: 0;
}
.login-screen-top-img p{
    color:#fff;
    font-size:16px;
    /*text-align:center;*/
}





.login-mtop{
    margin-top: -180px;
}


.modal-mark-icon{
    margin: auto;
    font-size: 30px;
    color: red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cnt-modal-cs{
    border-radius: 25px !important;
}

.title-w-sec{
     font-size: 17px !important;
    font-weight: 600 !important;
    color: #025187 !important;
    padding-left: 10px !important;
    border-left: 5px solid #025187 !important;
}







/* CARD */
.dp-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

/* HEADER */
.dp-title {
    font-size: 26px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 20px;
}

/* GRID */
.dp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

/* METRIC BOX */
.dp-metric-box {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.dp-metric-box:hover {
    transform: translateY(-5px);
}

.dp-label {
    font-size: 13px;
    color: #6b7280;
}

.dp-value {
    font-size: 22px;
    font-weight: bold;
    color: #111827;
    margin-top: 5px;
}

/* SCORE SECTION */
.dp-score-area {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* CIRCLE */
.dp-score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(#4f46e5 90%, #e5e7eb 0%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-score-inner {
    width: 110px;
    height: 110px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-score-text {
    font-size: 28px;
    font-weight: bold;
    color: #4f46e5;
}

/* RATING BADGE */
.dp-rating-badge {
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
}

.dp-excellent {
    background: #dcfce7;
    color: #16a34a;
}

.dp-good {
    background: #dbeafe;
    color: #2563eb;
}

.dp-average {
    background: #fef9c3;
    color: #ca8a04;
}

.dp-poor {
    background: #fee2e2;
    color: #dc2626;
}

/* TABLE */
.dp-table {
    margin-top: 30px;
    width: 100%;
    border-collapse: collapse;
}

.dp-table th {
    text-align: left;
    padding: 12px;
    background: #f9fafb;
    font-size: 14px;
}

.dp-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
}

.btns-driver-bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
    gap: 10px;
}

.btns-driver-bottom a{
    padding: 7px 15px;
    background-color: #025187;
    color: #fff;
    font-size: 14px;
    border-radius: 7px;
    transition: 0.5s;
}
.btns-driver-bottom a:hover{
    border-radius: 40px;
}
.btns-driver-bottom a.bg1{
    background-color: #00a825;
}
.btns-driver-bottom a.bg2{
    background-color: #8335c2;
}
.btns-driver-bottom a.bg3{
    background-color: #9c711c;
}
.btns-driver-bottom a.bg4{
    background-color: #bf2323;
}



/* CARD */
.dpd-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* TITLE */
.dpd-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* SUMMARY GRID */
.dpd-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.dpd-box {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: white;
    padding: 15px;
    border-radius: 12px;
    transition: 0.3s;
}

.dpd-box:hover {
    transform: translateY(-5px);
}

.dpd-label {
    font-size: 13px;
    opacity: 0.9;
}

.dpd-value {
    font-size: 22px;
    font-weight: bold;
    margin-top: 5px;
}

/* FILTERS */
.dpd-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.dpd-input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    outline: none;
}

/* TABLE */
.dpd-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.dpd-table th {
    text-align: left;
    background: #f3f4f6;
    padding: 12px;
    font-size: 14px;
}

.dpd-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
}

/* BADGES */
.dpd-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.dpd-excellent { background:#dcfce7; color:#16a34a; }
.dpd-good { background:#dbeafe; color:#2563eb; }
.dpd-average { background:#fef9c3; color:#ca8a04; }
.dpd-poor { background:#fee2e2; color:#dc2626; }




/* CARD */
.dpdx-card {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* TITLE */
.dpdx-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* GRID */
.dpdx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* METRIC CARD */
.dpdx-metric {
    border-radius: 16px;
    padding: 20px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dpdx-metric:hover {
    transform: translateY(-6px);
}

/* ICON CIRCLE */
.dpdx-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    font-size: 18px;
    margin-bottom: 12px;
}

/* TEXT */
.dpdx-label {
    font-size: 14px;
    opacity: 0.9;
}

.dpdx-value {
    font-size: 26px;
    font-weight: bold;
    margin-top: 5px;
    margin-left: auto;
}

/* BACKGROUND VARIANTS */
.dpdx-blue { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.dpdx-green { background: linear-gradient(135deg, #16a34a, #22c55e); }
.dpdx-orange { background: linear-gradient(135deg, #ea580c, #f97316); }
.dpdx-red { background: linear-gradient(135deg, #dc2626, #ef4444); }
.dpdx-yellow { background: linear-gradient(135deg, #ca8a04, #facc15); }
.dpdx-purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }

/* DECORATIVE SHAPE */
.dpdx-metric::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    top: -30px;
    right: -30px;
}




/* CONTAINER */
.dpx-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
}

/* CARD */
.dpx-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* TITLE */
.dpx-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* GRID */
.dpx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

/* ITEM BOX */
.dpx-item {
    background: #f9fafb;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dpx-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* COLORS */
.dpx-blue { background:#3b82f6; }
.dpx-green { background:#22c55e; }
.dpx-orange { background:#f97316; }
.dpx-red { background:#ef4444; }
.dpx-purple { background:#8b5cf6; }
.dpx-yellow { background:#eab308; }

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

.dpx-table th {
    background: #f3f4f6;
    padding: 12px;
    text-align: left;
    font-size: 14px;
}

.dpx-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
}

/* BADGES */
.dpx-badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.dpx-open { background:#fee2e2; color:#dc2626; }
.dpx-progress { background:#fef9c3; color:#ca8a04; }
.dpx-closed { background:#dcfce7; color:#16a34a; }

/* BUTTON */
.dpx-btn {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    margin-right: 10px;
    font-size: 14px;
    color: #fff !important;
}

.dpx-call { background:#16a34a; }
.dpx-whatsapp { background:#25D366; }
.it-color-cs i{
    color: #025187;
    font-size: 22px;
}




/* Card */
.route-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Header */
.route-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.route-title {
    font-size: 20px;
    font-weight: 500;
}

.route-time {
    color: #b23939;
    font-size: 14px;
    font-weight: 500;
}

/* Timeline */
.timeline {
    position: relative;
    margin-left: 15px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    width: 3px;
    height: 100%;
    background: #dfe6f1;
}

/* Stop */
.stop {
    position: relative;
    padding: 15px 15px 15px 40px;
    margin-bottom: 10px;
    border-radius: 10px;
    transition: 0.3s;
}

.stop:hover {
    background: #f1f5ff;
}

/* Dot */
.stop::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 20px;
    width: 16px;
    height: 16px;
    background: #c5d1ff;
    border-radius: 50%;
    border: 3px solid white;
}

/* Active stop */
.stop.active {
    background: #eef3ff;
}

.stop.active::before {
    background: #4a6cf7;
}

/* Stop text */
.stop-name {
    font-weight: 500;
}

.stop-time {
    font-size: 13px;
    color: #777;
}

/* Badge */
.badge-cs {
    background: #4a6cf7;
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 8px;
}
.min-width-route  td{
    min-width: 150px !important;
}
.min-width-route td.nomin{
    min-width: unset !important;
}

td.w-min-c {
    min-width: 220px !important;
}

.gmap-select{
    width: 100%;
    height: 250px;

}
.gmap-select iframe{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
/* 
.col-20 .col-lg-4{
    width: 20%;
} */

.min-width-150  td{
    min-width: 150px;
}

td.nomin{
    min-width: unset !important;
}

.oem-dt-box{
    background-color: #eef4f7;
    padding: 12px;
    border-radius: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
}
.oem-dt-box h3{
    font-size: 18px;
    font-weight:600 ;
    margin: 0;
}

.widget-preview-sys{
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 10px;
}
.widget-preview-sys ul li{
    width: 100%;
    padding: 0;
    border: 0;
}



/* Wrapper */
.holiday-calendar-wrapper {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    /* background: rgba(255, 255, 255, 0.771); */
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* Card */
.holiday-calendar-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
}

/* Header */
.holiday-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.holiday-calendar-header h4 {
    margin: 0;
    font-weight: 600;
    color: #000;
}

/* Controls */
.holiday-calendar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
}

.hc-btn {
    background: #0d6efd;
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.hc-btn:hover {
    background: #0b5ed7;
}

/* Calendar Grid */
.holiday-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

/* Day Cell */
.hc-day {
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    color: #000;
    border:1px solid #ccc;
}

/* Header Days */
.hc-day-name {
       font-weight: bold;
    background: transparent;
    color: #fff;
    min-height: unset !important;
    background-color: #283e55;
}

/* Weekend */
.hc-weekend {
    background: #afcaf2;
}

/* Holiday */
.hc-holiday {
    background: #e77373;
    border: 1px solid #ccc;
}

/* Today */
.hc-today {
    border: 2px solid #ccc;
}

/* Legend */
.holiday-legend {
    margin-top: 15px;
    display: flex;
    gap: 20px;
    font-size: 14px;
}
.holiday-legend span{
    color: #000;
}

.legend-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
}

.holiday-dot {
    background: red;
}

.weekend-dot {
    background: #446390;
}


/* Holiday name inside box */
.hc-holiday-name {
    font-size: 10px;
    margin-top: 5px;
    line-height: 1.2;
    color: #000;
    font-weight: 500;
}

/* Better spacing */
.hc-day {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Hover effect */
.hc-day:hover {
    transform: scale(1.05);
    transition: 0.2s;
    cursor: pointer;
}
.row-col-5 .col-lg-3{
    width: 20%;
}







.payroll-add-box{
  background-color: #c5d9eb;
  border-radius: 10px;
  padding: 20px;
 }
 .pay-roll-add-dlt{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
 }
 .pay-roll-add-dlt button{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  transition: 0.5s;
 }
 .pay-roll-add-dlt button.payroll-add{
  background-color: #00b253;
  color: #fff;
  border: 1px solid #00b253;
 }
 .pay-roll-add-dlt button.payroll-add:hover{
  background-color: transparent;
  color: #00b253;
 }
 .pay-roll-add-dlt button.payroll-dlt{
  background-color: #b23939;
  color: #fff;
  border: 1px solid #b23939;
 }
 .pay-roll-add-dlt button.payroll-dlt:hover{
  background-color: transparent;
  color: #b23939;
 }
 .payroll-view-top ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 .payroll-view-top ul li{
  font-size: 16px;
  font-weight: 600;
  padding: 7px 15px;
  background-color: red;
  color: #fff;
  border-radius: 10px;

 }
 
 .payroll-view-info{
  background-color: #f7f7f7;
  padding: 20px;
  margin: 10px 0;
  border-radius: 15px;
 }
 .payroll-view-info ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
 }
 .payroll-view-info ul li{
  width: 50%;
  margin: 15px 0;
  font-size: 16px;
  font-weight: 600;
 }
 .payroll-view-info ul li span{
  font-weight: 400;
  margin-left: 10px;
 }
 .payroll-table th{
  min-width: 180px;
 }
 .payroll-table th:first-child{
  min-width: 80px !important;
 }

 .payroll-print-section{
  background-color: #c5d9eb;
  min-height: 100vh;
  padding: 50px;
 }
 .payroll-print-preview{
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
 }
 .payroll-print-table tr th{
   font-size: 15px;
   padding: 12px;
   color: #012970;
 }
 .payroll-print-table tr td{
  padding: 12px;
  font-size: 14px;
 }
 .print-btn-cs{
  width: 100px;
  border: 0;
  height: 35px;
  background-color: #b23939;
  border-radius: 5px;
  color: #fff;
  transition: 0.5s;
 }
 .print-btn-cs:hover{
  border-radius: 40px;
 }




.ps_container {
    width: 800px;
    margin: 10px 0;
    background: #fff;
    padding: 25px;
    border: 1px solid #ddd;
    border-radius: 25px;
}

/* Header */
.ps_header {
    text-align: center;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}

.ps_company {
    font-size: 22px;
    font-weight: bold;
}
.ps_company img{
    width: 200px;
}
.ps_title {
    font-size: 16px;
    margin-top: 5px;
}

/* Sections */
.ps_section {
    margin-top: 20px;
}

.ps_section h3 {
    background: #f1f1f1;
    padding: 8px;
    font-size: 14px;
}

/* Grid */
.ps_grid {
    display: flex;
    flex-wrap: wrap;
}

.ps_item {
    width: 50%;
    margin: 5px 0;
    font-size: 13px;
}

/* Tables */
.ps_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.ps_table th, .ps_table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.ps_table th {
    background: #f7f7f7;
}

/* Summary */
.ps_summary {
    margin-top: 15px;
}

.ps_summary div {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

.ps_net {
    font-size: 18px;
    font-weight: bold;
    color: green;
    border-top: 2px solid #000;
    padding-top: 10px;
}

/* Footer */
.ps_footer {
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}


.filters-complaint{
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 12px;
    margin: 10px 0;
}

.multi-btns{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.multi-btns button{
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 0;
    background-color: #0ebe11;
    color: #fff;
}

/* 
.wa-container {
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
} */

.wa-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  max-width: 700px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid #eaeaea;
}

.wa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wa-title {
  font-size: 20px;
  margin: 0;
}

.wa-badge {
  background: #25D366;
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
}

.wa-description {
  margin: 12px 0 18px;
  color: #555;
  font-size: 14px;
}

.wa-section {
  margin-bottom: 18px;
}

.wa-section h3 {
  margin-bottom: 8px;
  font-size: 15px;
  color: #333;
}

.wa-list {
  padding-left: 18px;
  color: #444;
  font-size: 14px;
}

.wa-list li {
  margin-bottom: 6px;
}

.wa-preview {
  background: #f4fdf7;
  border-left: 4px solid #25D366;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #222;
}

.wa-footer {
  text-align: right;
}

.wa-btn {
  background: #ccc;
  color: #666;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: not-allowed;
  font-size: 14px;
}

.coming-soon-sec {
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: #ffffff; */
    position: relative;
    overflow: hidden;
}

/* Text styling */
.coming-soon-sec h1 {
    font-size: 50px;
    color: #222;
    letter-spacing: 4px;
    font-weight: 600;
    z-index: 2;
    animation: fadeInUp 1.5s ease forwards;
}

/* Floating shapes */
.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.2;
    animation: float 10s infinite ease-in-out;
}

/* Different shapes */
.shape1 {
    width: 120px;
    height: 120px;
    background: #0072ff;
    top: 10%;
    left: 20%;
}

.shape2 {
    width: 80px;
    height: 80px;
    background: #00c6ff;
    bottom: 15%;
    right: 25%;
    animation-duration: 12s;
}

.shape3 {
    width: 150px;
    height: 150px;
    background: #ff7eb3;
    top: 60%;
    left: 10%;
    animation-duration: 14s;
}

.shape4 {
    width: 100px;
    height: 100px;
    background: #8e44ad;
    top: 20%;
    right: 10%;
    animation-duration: 11s;
}

/* Floating loop animation */
@keyframes float {
    0% {
        transform: translateY(0px) translateX(0px);
    }
    50% {
        transform: translateY(-30px) translateX(20px);
    }
    100% {
        transform: translateY(0px) translateX(0px);
    }
}

/* Text entry */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.field-table tr td select,.field-table tr td input{
    height: 40px;
    border-radius: 5px;
}

.field-table-cs tr td {
    text-align: left !important;
}
.field-table-cs tr td select,.field-table-cs tr td input{
    border: 1px solid #22222282;
    box-shadow: none !important;
    font-size: 15px;
}



.dor-wrap {
  /* max-width: 1200px; */
  margin: 30px auto;
  margin-top: 0;
  padding: 20px;
  background-color: #e6edf7;
  border-radius: 10px;
}

/* Header */
.dor-header {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 25px;
}

.dor-header h2 {
  margin: 0;
}

/* Section */
.dor-section {
  margin-bottom: 25px;
}

.dor-section-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #000;
}

/* Grid */
.dor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* Card */
.dor-card {
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.dor-label {
  font-size: 12px;
  color: #565353;
}

.dor-value {
  font-size: 15px;
  font-weight: 600;
  margin-top: 4px;
  color: #000;
}

/* Auto */
.dor-auto {
  color: #504d4d;
  font-style: italic;
}

/* Wide */
.dor-wide {
  grid-column: span 4;
}

@media(max-width:768px){
  .dor-grid { grid-template-columns: 1fr; }
}

.vehicle-short-preview {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 15px;
}

.vehicle-short-preview ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.vehicle-short-preview ul li{
    width: 33%;
    margin: 10px 0;
    font-weight: 600;
    color: #000;
}
.vehicle-short-preview ul li span{
    font-weight: 400;
    margin-left: 10px;
}

.vehicle-short-preview h4{
    font-size: 18px;
    font-weight: 600;
    color: #0072ff;
}

.xl-table tr th{
    background-color: #ccc ;
    font-weight: 600;
    padding: 7px 15px !important;
}
.xl-table tr td{
    color: #000 !important;
    padding: 15px 15px !important;
    font-size: 14px;
}
.bt-ween-print{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bt-ween-print a{
    background-color: #b23939;
    border-color: #b29339;
    display: flex;
}


.main-index-box {
    position: relative;
    margin: 0 auto;
    padding: 55px 45px 38px;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.06);

    /*box-shadow:*/
    /*    0 25px 70px rgba(0, 0, 0, 0.12),*/
    /*    0 5px 20px rgba(0, 0, 0, 0.05);*/

    text-align: center;
    isolation: isolate;
    height:100vh;
        display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Background shapes */

.welcome-shapes {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.shape-1 {
    width: 220px;
    height: 220px;
    top: -120px;
    right: -90px;
    background: rgba(0, 105, 92, 0.09);
}

.shape-2 {
    width: 150px;
    height: 150px;
    bottom: -90px;
    left: -70px;
    background: rgba(0, 105, 92, 0.07);
}

.shape-3 {
    width: 70px;
    height: 70px;
    top: 35%;
    left: -35px;
    background: rgba(0, 105, 92, 0.05);
}

/* Content */

.welcome-content {
    position: relative;
    z-index: 2;
}

/* Logo */

.logo-wrap {
    width: 105px;
    height: 105px;
    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border-radius: 50%;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.10);

    border: 5px solid rgba(0, 105, 92, 0.08);
}

.logo-wrap img {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

/* Welcome label */

.welcome-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 14px;

    color: #00695c;
    background: rgba(0, 105, 92, 0.08);

    border-radius: 50px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.welcome-label i {
    font-size: 12px;
}

/* Heading */

.main-index-box h1 {
    margin: 16px 0 8px;

    color: #173b38;

    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

/* Subtitle */

.main-index-box p {
    /*max-width: 390px;*/
    margin: 0 auto 30px;

    color: #71807e;

    font-size: 14px;
    line-height: 1.7;
}

/* Buttons */

.main-index-box-btns {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.login-btn {
       position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 68px;
    padding: 10px 16px;
    color: #fff;
    background: #165fcc;
    border: 0;
    border-radius: 15px;
    text-decoration: none;
    text-align: left;
    box-shadow: 0 8px 20px #18a0b824;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.login-btn:hover {
    color: #fff;
    background: #165fcc;

    transform: translateY(-3px);

}

/* Staff button */

.staff-btn {
      color: #198754;
    background: #e0f5eb;
    border: 1px solid rgba(0, 105, 92, 0.10);
    box-shadow: none;
}

.staff-btn:hover {
    color: #00695c;
    background: #e3f3f0;

    box-shadow: 0 10px 25px rgba(0, 105, 92, 0.12);
}

/* Icon circle */

.btn-icon {
    flex: 0 0 45px;

    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #0d6efd;
    background: #fff;

    font-size: 17px;
}

.staff-btn .btn-icon {
    color: #fff;
    background: #198754;
}

/* Button text */

.login-btn span:not(.btn-icon) {
    display: flex;
    flex-direction: column;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.login-btn small {
    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.7px;

    opacity: 0.65;
    text-transform: uppercase;
}

/* Arrow */

.login-btn .arrow {
    margin-left: auto;

    font-size: 13px;

    transition: transform 0.25s ease;
}

.login-btn:hover .arrow {
    transform: translateX(4px);
}

/* Route decoration */

.route-line {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 30px;

    opacity: 0.35;
}

.route-line span {
    flex: 1;
    height: 1px;
    background: #00695c;
}

.route-line i {
    color: #00695c;
    font-size: 14px;
}

.profile-view-cs {
    position: relative;

    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 0px;

    padding: 15px;

    background: #ffffff;
    border: 1px solid #e8eeee;
    border-radius: 10px;

    overflow: hidden;
}

/* Decorative background */

.profile-view-cs::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background: rgba(0, 105, 92, 0.055);

    pointer-events: none;
}


/* ==========================================
   AVATAR SECTION
========================================== */

.profile-avatar-section {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 8px 15px 0;

    text-align: center;
}


/* Avatar */

.profile-avatar-wrap {
    position: relative;

    width: 125px;
    height: 125px;

    margin-bottom: 18px;
}

.profile-avatar-wrap img {
    width: 125px;
    height: 125px;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    background: #f1f7f6;

    border: 5px solid #ffffff;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 105, 92, 0.12);
}


/* Camera button */

.profile-avatar-upload {
    position: absolute;

    right: 2px;
    bottom: 2px;

    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: #00695c;

    border: 3px solid #ffffff;
    border-radius: 50%;

    font-size: 14px;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.25);

    transition: all 0.2s ease;
}

.profile-avatar-upload:hover {
    background: #00564c;
    transform: scale(1.08);
}


/* Action buttons */

.profile-avatar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.profile-upload-btn,
.profile-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 36px;

    padding: 0 13px;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: all 0.2s ease;
}

.profile-upload-btn {
    color: #00695c;
    background: #eaf7f4;

    border: 1px solid rgba(0, 105, 92, 0.10);
}

.profile-upload-btn:hover {
    color: #ffffff;
    background: #00695c;
}

.profile-remove-btn {
    width: 36px;

    color: #dc3545;
    background: #fff2f3;

    border: 1px solid rgba(220, 53, 69, 0.10);
}

.profile-remove-btn:hover {
    color: #ffffff;
    background: #dc3545;
}


/* ==========================================
   INFORMATION SECTION
========================================== */

.profile-info-section {
    position: relative;

    padding: 5px 5px 5px 15px;

    border-left: 1px solid #edf1f0;
}


/* Heading */

.profile-info-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 13px;
}

.profile-info-label {
    display: block;

    margin-bottom: 5px;

    color: #8a9997;

    font-size: 10px;
    font-weight: 600;
}

.profile-info-heading h4 {
    margin: 0;

    color: #173b38;

    font-size: 17px;
    font-weight: 500;
}


/* Active badge */

.profile-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 11px;

    color: #16805f;
    background: #edf9f4;

    border-radius: 50px;

    font-size: 11px;
    font-weight: 700;
}

.profile-status i {
    font-size: 10px;
}


/* ==========================================
   PROFILE DETAILS
========================================== */

.profile-preview-cs {
    display: flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    gap: 8px;
}

.profile-detail {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;

    padding: 15px;

    background: #f8faf9;

    border: 1px solid #edf2f0;
    border-radius: 13px;

    transition: all 0.2s ease;
    width:48.8%;
}



/* Detail icon */

.profile-detail-icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

       color: #0d6efd;
    background: #d8ecfb;

    border-radius: 10px;

    font-size: 14px;
}


/* Text */

.profile-detail > div:last-child {
    min-width: 0;
}

.profile-detail small {
    display: block;

    margin-bottom: 3px;

    color: #8b9896;

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.profile-detail strong {
    display: block;

    max-width: 100%;

    color: #293d3a;

    font-size: 13px;
    font-weight: 500;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.modal-btns-last {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    padding-top: 18px;
    margin-top: 8px !important;

    border-top: 1px solid #edf1f0;
}


/* Common button styling */

.modal-btn-1,
.modal-btn-2 {
    min-width: 105px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 20px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition:
        all 0.2s ease;
}


/* ==========================================
   CLOSE BUTTON
========================================== */

.modal-btn-1 {
    color: #667572;
    background: #f3f6f5;

    border: 1px solid #e3e9e7;
}

.modal-btn-1:hover {
    color: #3f4f4c;
    background: #e8eeec;

    border-color: #d8e1de;

    transform: translateY(-1px);
}


/* ==========================================
   PRIMARY / SUBMIT BUTTON
========================================== */

.modal-btn-2 {
    color: #ffffff;
    background: #1e4b78;

    border: 1px solid #1e4b78;
}

.modal-btn-2:hover {
    color: #ffffff;
    background: #1e4b78;

    border-color: #1e4b78;

    transform: translateY(-1px);
}

.modal-btn-2:active,
.modal-btn-1:active {
    transform: translateY(0);
}


/* ==========================================
   OPTIONAL ICON SUPPORT
========================================== */

.modal-btn-1::before {
    content: "\f00d";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    font-size: 11px;
}

.modal-btn-2::before {
    content: "\f00c";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    font-size: 11px;
}


/* ==========================================
   DISABLED STATE
========================================== */

.modal-btn-1:disabled,
.modal-btn-2:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


#resetFilters,.fil-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 40px;
    padding: 0 16px;

       color: #dc3545;
    background: #ffecee;
    border: 1px solid #dc354573;
    border-radius: 9px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#resetFilters::before,.fil-btn::before {
    content: "\f021";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    font-size: 11px;
}

#resetFilters:hover,.fil-btn:hover {
    color: #fff;
    background: #dc3545;

    border-color: rgba(0, 105, 92, 0.18);

    transform: translateY(-1px);
}


/* ==========================================
   ACTION BUTTON GROUP
========================================== */

.btns-group-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;

    margin-left: auto !important;
}


/* ==========================================
   COMMON BUTTON STYLE
========================================== */

.btns-group-container .add-btn,
.btns-group-container .bk-btn,
.btns-group-container .filter-btnss,
.btns-group-container .exp-btn,
.btns-group-container .imp-btn,
.btns-group-container .holiday-btn
{
    height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    padding: 0 17px !important;

    border-radius: 9px !important;

    font-size: 13px !important;
    font-weight: 400 !important;

    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;

    transition:
        all 0.2s ease !important;
}


/* ==========================================
   ADD TRIP NATURE
========================================== */

.btns-group-container .add-btn {
    color: #ffffff !important;
    background: #0f2f5d !important;

    border: 1px solid #0f2f5d !important;
}

.btns-group-container .add-btn::before {
    content: "\f067" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 11px !important;
}

.btns-group-container .add-btn:hover {
    color: #ffffff !important;
    background: #0f2f5d !important;

    border-color: #0f2f5d !important;

    transform: translateY(-2px) !important;
}

.btns-group-container .add-btn:active {
    transform: translateY(0) !important;
}
.btns-group-container .bk-btn {
    color: #ffffff !important;
    background: #dc3545 !important;

    border: 1px solid #dc3545 !important;
}

.btns-group-container .bk-btn::before {
    content: "\f060" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 11px !important;
}

.btns-group-container .bk-btn:hover {
    color: #ffffff !important;
    background: #dc3545 !important;

    border-color: #dc3545 !important;

    transform: translateY(-2px) !important;
}

.btns-group-container .bk-btn:active {
    transform: translateY(0) !important;
}


/* ==========================================
   EXPORT BUTTON
========================================== */

.btns-group-container .exp-btn {
    color: #fff !important;
    background: #00695c !important;

    border: 1px solid rgba(0, 105, 92, 0.14) !important;
}

.btns-group-container .exp-btn::before {
    content: "\f56d" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 11px !important;
}

.btns-group-container .exp-btn:hover {
   border-radius:40px;

    transform: translateY(-2px) !important;

    box-shadow: 0 7px 16px rgba(0, 105, 92, 0.16) !important;
}

.btns-group-container .exp-btn:active {
    transform: translateY(0) !important;
}

.btns-group-container .filter-btnss {
    color: #fff !important;
    background: #2563eb !important;

    border: 1px solid rgba(37, 99, 235, 0.14) !important;
}

.btns-group-container .filter-btnss::before {
    content: "\f0b0" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 11px !important;
}

.btns-group-container .filter-btnss:hover {
   border-radius:40px;

    transform: translateY(-2px) !important;

    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.18) !important;
}

.btns-group-container .filter-btnss:active {
    transform: translateY(0) !important;
}
.btns-group-container .imp-btn {
    color: #fff !important;
    background: #2a74a6 !important;
    border: 1px solid rgba(22, 163, 74, 0.14) !important;
}

.btns-group-container .imp-btn::before {
    content: "\f093" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 11px !important;
}

.btns-group-container .imp-btn:hover {
    border-radius: 40px;

    transform: translateY(-2px) !important;

    box-shadow: 0 7px 16px rgba(22, 163, 74, 0.18) !important;
}

.btns-group-container .imp-btn:active {
    transform: translateY(0) !important;
}

.btns-group-container .holiday-btn {
    color: #fff !important;
    background: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.14) !important;
}

.btns-group-container .holiday-btn::before {
    content: "\f133" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 11px !important;
}

.btns-group-container .holiday-btn:hover {
    border-radius: 40px;

    transform: translateY(-2px) !important;

    box-shadow: 0 7px 16px rgba(245, 158, 11, 0.20) !important;
}

.btns-group-container .holiday-btn:active {
    transform: translateY(0) !important;
}
.table-over-cs{
    overflow:auto;
}


/* ==========================================
   DEPOT ASSIGNMENT CARD
========================================== */

.depot-assignment-card {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 105px;

    padding: 20px 22px;
    padding-left: 72px;

    background: #ffffff;

    border: 1px solid #e6eeec;
    border-radius: 16px;


    overflow: hidden;
    isolation: isolate;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}




/* ==========================================
   Decorative Shapes
========================================== */

.depot-assignment-card::after {
    content: "";

    position: absolute;

    width: 115px;
    height: 115px;

    right: -50px;
    bottom: -65px;

    border-radius: 50%;

    background: rgba(0, 105, 92, 0.055);

    z-index: -1;

    transition: transform 0.3s ease;
}


/* Additional shape */

.depot-assignment-card {
    background-image:
        radial-gradient(
            circle at 95% 10%,
            rgba(0, 105, 92, 0.055) 0,
            rgba(0, 105, 92, 0.055) 2px,
            transparent 3px
        );
    background-size: 14px 14px;
    background-position: right top;
}


/* ==========================================
   Label
========================================== */

.depot-assignment-card span {
    display: block;

    margin-bottom: 5px;

    color: #8a9997;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ==========================================
   Location Name
========================================== */

.depot-assignment-card strong {
    display: block;

    color: #173b38;

    font-size: 16px;
    font-weight: 750;

    line-height: 1.35;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_length label,div.dataTables_wrapper div.dataTables_filter label{
    font-size:13px;
    color:#000;
}
div.dataTables_wrapper div.dataTables_filter input,div.dataTables_wrapper div.dataTables_length select{
    border:1px solid #222;
    box-shadow:none;
}

.nav-tabs-custom {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #eef1f5;
    gap: 0;
}

/* Tab item */
.nav-tabs-custom .nav-item {
    margin: 0;
    padding: 0;
}

/* Tab button */
.nav-tabs-custom .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin: 0;
    padding: 13px 18px 12px;

    border: 0 !important;
    border-radius: 0;

    background: transparent;
    color: #7b8798;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

/* Remove Bootstrap focus background */
.nav-tabs-custom .nav-link:focus {
    outline: none;
    box-shadow: none;
}

/* Hover */
.nav-tabs-custom .nav-link:hover {
    color: #4285f4;
    background-color: transparent;
}

/* Active tab */
.nav-tabs-custom .nav-link.active {
    color: #4285f4;
    background-color: transparent;
    font-weight: 600;
}

/* Active blue underline */
.nav-tabs-custom .nav-link::after {
    content: "";
    position: absolute;

    left: 5px;
    right: 5px;
    bottom: -1px;

    height: 3px;
    border-radius: 3px 3px 0 0;

    background-color: transparent;

    transition: background-color 0.2s ease;
}

.nav-tabs-custom .nav-link.active::after {
    background-color: #4285f4;
}

/* ================================
   Optional Icons
   ================================ */

.nav-tabs-custom .nav-link i,
.nav-tabs-custom .nav-link svg {
    width: 15px;
    height: 15px;
    font-size: 14px;
    flex-shrink: 0;
    color: #8995a6;
}

.nav-tabs-custom .nav-link.active i,
.nav-tabs-custom .nav-link.active svg {
    color: #4285f4;
}

.nav-tabs-custom .nav-link:hover i,
.nav-tabs-custom .nav-link:hover svg {
    color: #4285f4;
}

/* ================================
   First Tab Alignment
   ================================ */

.nav-tabs-custom .nav-item:first-child .nav-link {
    padding-left: 5px;
}


.btn-flex-cs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Common button style */
.btn-flex-cs .btn-cancel-cs,
.btn-flex-cs .btn-prev-cs,
.btn-flex-cs .btn-next-cs,
.btn-flex-cs .btn-submit-cs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 42px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Cancel */
.btn-cancel-cs {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-cancel-cs:hover {
    background: #f3f4f6;
    color: #111827;
}

/* Previous */
.btn-prev-cs {
    background: #6b7280;
    color: #ffffff;
    border: 1px solid #6b7280;
}

.btn-prev-cs:hover {
    background: #4b5563;
    border-color: #4b5563;
}

/* Next */
.btn-next-cs {
    background: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
}

.btn-next-cs:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* Submit / Update */
.btn-submit-cs {
    background: #16a34a;
    color: #ffffff;
    border: 1px solid #16a34a;
}

.btn-submit-cs:hover {
    background: #15803d;
    border-color: #15803d;
}

/* Focus */
.btn-flex-cs a:focus,
.btn-flex-cs button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.oem-repeat-card h6{
    margin-bottom: 15px !important;
    color: #0c3e87;
}

.oem-repeat-card{
        padding: 14px;
    background-color: #eef4f7;
}


.btn-group-print-cs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 4px 0;
}

/* Common */
.btn-group-print-cs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Back */
.btn-back-print-cs {
    color: #475467 !important;
    background: #f2f4f7;
    border: 1px solid #eaecf0;
}

.btn-back-print-cs:hover {
    color: #344054 !important;
    background: #e4e7ec;
    border-color: #d0d5dd;
}

.btn-back-print-cs i {
    font-size: 13px;
}

/* Download PDF */
.btn-download-print-cs {
    color: #fff !important;
    background: linear-gradient(135deg, #f04438, #d92d20);
    border: 1px solid #d92d20;
    box-shadow: 0 4px 10px rgba(217, 45, 32, 0.20);
}

.btn-download-print-cs:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #d92d20, #b42318);
    box-shadow: 0 6px 15px rgba(217, 45, 32, 0.28);
    transform: translateY(-2px);
}

.btn-download-print-cs i {
    font-size: 14px;
}

/* Click effect */
.btn-group-print-cs a:active {
    transform: scale(0.97);
}


.btn-back-cs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #ffffff;
    color: #344054 !important;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none !important;
    line-height: 1.4;
    transition: all 0.25s ease;
}

.btn-back-cs i {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.btn-back-cs:hover {
    background: #f8fafc;
    color: #101828 !important;
    border-color: #98a2b3;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

.btn-back-cs:hover i {
    transform: translateX(-3px);
}

.btn-back-cs:active {
    transform: scale(0.97);
}

.btn-back-cs:focus {
    outline: none;
}


.oem-depo-widget {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Left accent line */
.oem-depo-widget::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: #2563eb;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}

/* Hover */
.oem-depo-widget:hover {
    border-color: #d0d5dd;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
    transform: translateY(-2px);
}

.oem-depo-widget:hover::before {
    transform: scaleY(1);
}

/* Icon box */
.oem-widget-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 17px;
    transition: all 0.3s ease;
}

.oem-depo-widget:hover .oem-widget-icon {
    background: #2563eb;
    color: #ffffff;
    transform: scale(1.05);
}

/* Content */
.oem-widget-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oem-widget-content span {
    display: block;
    color: #667085;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.oem-widget-content strong {
    display: block;
    color: #101828;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}


.oem-depo-widget {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* OEM Code */
.col-lg-3:nth-child(1) .oem-depo-widget {
    background: linear-gradient(135deg, #eef4ff, #dbeafe);
    border-color: #bfdbfe;
}

.col-lg-3:nth-child(1) .oem-widget-icon {
    background: #2563eb;
    color: #fff;
}

/* OEM Name */
.col-lg-3:nth-child(2) .oem-depo-widget {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-color: #ddd6fe;
}

.col-lg-3:nth-child(2) .oem-widget-icon {
    background: #7c3aed;
    color: #fff;
}

/* Type */
.col-lg-3:nth-child(3) .oem-depo-widget {
    background: linear-gradient(135deg, #ecfdf3, #d1fadf);
    border-color: #a7f3d0;
}

.col-lg-3:nth-child(3) .oem-widget-icon {
    background: #059669;
    color: #fff;
}

/* State */
.col-lg-3:nth-child(4) .oem-depo-widget {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: #fed7aa;
}

.col-lg-3:nth-child(4) .oem-widget-icon {
    background: #ea580c;
    color: #fff;
}

/* GST */
.col-lg-3:nth-child(5) .oem-depo-widget {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: #fecaca;
}

.col-lg-3:nth-child(5) .oem-widget-icon {
    background: #dc2626;
    color: #fff;
}

/* Primary Contact */
.col-lg-3:nth-child(6) .oem-depo-widget {
    background: linear-gradient(135deg, #ecfeff, #cffafe);
    border-color: #a5f3fc;
}

.col-lg-3:nth-child(6) .oem-widget-icon {
    background: #0891b2;
    color: #fff;
}


/* Icon */
.oem-widget-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
}

/* Content */
.oem-widget-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oem-widget-content span {
    color: #475467;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.oem-widget-content strong {
    color: #101828;
    font-size: 15px;
    font-weight: 600;
    word-break: break-word;
}

/* Hover */
.oem-depo-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.10);
}

.oem-depo-widget:hover .oem-widget-icon {
    transform: scale(1.08);
}

/* Mobile */
@media (max-width: 576px) {
    .oem-depo-widget {
        min-height: 76px;
        padding: 14px;
    }

    .oem-widget-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}


.margin-0-btn a,.margin-0-btn button{
    margin:0 !important;
}

.import-desc-top {
    padding: 14px 16px;
    margin-bottom: 20px !important;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #16a34a;

    border-radius: 8px;

    color: #475569;
    font-size: 13px;
    line-height: 1.6;
}

.import-desc-top p {
    margin-bottom: 8px;
}

.import-desc-top p:last-child {
    margin-bottom: 0;
}

.import-desc-top strong {
    color: #1e293b;
    font-weight: 600;
}

.btn-imp-sb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 90px;
    height: 38px;
    padding: 0 18px;

    color: #fff !important;
    background: #16a34a !important;

    border: 1px solid #16a34a !important;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    text-decoration: none;

    transition: all 0.2s ease;
}

.btn-imp-sb:hover {
    background: #15803d !important;
    border-color: #15803d !important;
    transform: translateY(-1px);

    box-shadow: 0 5px 12px rgba(22, 163, 74, 0.2);
}

.btn-imp-sb:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Cancel Button */
.btn-imp-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 75px;
    height: 38px;
    padding: 0 18px;

    color: #475569 !important;
    background: #fff !important;

    border: 1px solid #cbd5e1 !important;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;
    text-decoration: none;

    transition: all 0.2s ease;
}

.btn-imp-cancel:hover {
    color: #1e293b !important;
    background: #f8fafc !important;
    border-color: #94a3b8 !important;

    transform: translateY(-1px);
}

.btn-imp-cancel:active {
    transform: translateY(0);
}

.instrction-odr {
    padding: 14px 16px;
    margin-bottom: 20px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;

    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.instrction-odr p {
    margin-bottom: 10px !important;
    color: #334155;
    font-weight: 600;
}

.instrction-odr code {
    display: block;
    padding: 10px 12px;

    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;

    color: #16a34a;
    font-size: 12px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.row-col-5-fil .col-lg-3{
    width:20%;
    padding:0 5px;
}

.center-gap{
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    gap:5px;
}
.center-gap .o-f-inp,
.center-gap select{
    width:100%;
}


.shift-box-xs {
    padding: 10px 18px;
    margin-bottom: 20px;

    background: #f1f4f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.shift-box-xs .title-w-sec {
    margin: 0;

    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    position: relative;
    padding-left: 12px;
    margin-bottom: 15px;
}

/*.shift-box-xs .title-w-sec::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/

/*    width: 4px;*/
/*    height: 18px;*/

/*    background: #16a34a;*/
/*    border-radius: 4px;*/
/*}*/

.role-accordion {
    margin-top: 10px;
}

/* Accordion Item */
.role-accordion .accordion-item {
    margin-bottom: 10px !important;

    background: #fff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;

    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* Accordion Header */
.role-accordion .accordion-header {
    margin: 0;
}

/* Accordion Button */
.role-accordion .accordion-button {
    padding: 13px 16px;

    color: #1e293b !important;
    background: #f8fafc !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-size: 14px;
    font-weight: 600;

    box-shadow: none !important;
    transition: all 0.2s ease;
}

/* Remove Bootstrap default focus */
.role-accordion .accordion-button:focus {
    box-shadow: none !important;
}

/* Open Accordion */
.role-accordion .accordion-button:not(.collapsed) {
    color: #fff !important;
    background: #0b3f8c !important;

    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Accordion Arrow */
.role-accordion .accordion-button::after {
    width: 12px;
    height: 12px;

    background-size: 12px;

    transition: transform 0.2s ease;
}

/* Accordion Body */
.role-accordion .accordion-body {
    padding: 16px;
    background: #fff;
}

/* Permission Group */
.role-accordion .permission-group {
    padding: 14px 16px !important;
    margin-bottom: 12px !important;

    background: #fff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 7px !important;

    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.role-accordion .permission-group:hover {
    border-color: #b9d3e5 !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}

/* Permission Group Title */
.role-accordion .permission-group strong {
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

/* Select All Label */
.role-accordion .permission-group > div:first-child label {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #64748b;
    font-size: 12px;
    font-weight: 500;

    cursor: pointer;
}

/* Checkboxes */
.role-accordion input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin: 0 6px 0 0;

    accent-color: #2a74a6;
    cursor: pointer;

    vertical-align: middle;
}

/* Permission Labels */
.role-accordion .permission-group .row label {
    display: inline-flex;
    align-items: center;

    color: #475569;
    font-size: 14px;
    font-weight: 400;

    cursor: pointer;

    transition: color 0.2s ease;
}

.role-accordion .permission-group .row label:hover {
    color: #2a74a6;
}

/* Permission Grid */
.role-accordion .permission-group .row {
    margin-top: 4px;
}

.btns-print-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Back Button */
.btns-print-group .back-show {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 38px;
    padding: 0 16px;

    color: #475569 !important;
    background: #fff !important;

    border: 1px solid #cbd5e1 !important;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    transition: all 0.2s ease;
}

.btns-print-group .back-show:hover {
    color: #1e293b !important;
    background: #f8fafc !important;
    border-color: #94a3b8 !important;

    transform: translateY(-1px);
}

/* Edit Template Button */
.btns-print-group .edit-temp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    height: 38px;
    padding: 0 18px;

    color: #fff !important;
    background: #2a74a6 !important;

    border: 1px solid #2a74a6 !important;
    border-radius: 6px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    transition: all 0.2s ease;
}

.btns-print-group .edit-temp:hover {
    color: #fff !important;
    background: #235f88 !important;
    border-color: #235f88 !important;

    transform: translateY(-1px);

    box-shadow: 0 5px 12px rgba(42, 116, 166, 0.2);
}

.btns-print-group .back-show:active,
.btns-print-group .edit-temp:active {
    transform: translateY(0);
    box-shadow: none;
}



.letter-tem-doc {
    max-width: 900px;
    margin: 10px 0;
    padding: 40px 45px;

    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;

    color: #334155;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;

    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
}

/* Header Logo */
.letter-tem-doc img {
    display: inline-block;
    max-width: 250px;
    max-height: 90px;

    object-fit: contain;
}

/* Header Address */
.letter-tem-doc > div[style*="white-space"] {
    margin-top: 8px;

    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

/* Header Divider */
.letter-tem-doc hr {
    margin: 18px 0 24px;

    border: 0;
    border-top: 1px solid #e2e8f0;
}

/* Letter Subject */
.letter-tem-doc h2 {
    margin: 0 0 28px;

    color: #1e293b;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* Letter Content */
.letter-tem-doc > div:not([style]) {
    color: #334155;
    font-size: 14px;
    line-height: 1.8;
}

/* Content Paragraphs */
.letter-tem-doc p {
    margin: 0 0 14px;
}

/* Content Headings */
.letter-tem-doc h1,
.letter-tem-doc h3,
.letter-tem-doc h4,
.letter-tem-doc h5,
.letter-tem-doc h6 {
    margin-top: 22px;
    margin-bottom: 10px;

    color: #1e293b;
}

/* Lists */
.letter-tem-doc ul,
.letter-tem-doc ol {
    margin: 10px 0 16px;
    padding-left: 25px;
}

.letter-tem-doc li {
    margin-bottom: 5px;
}

/* Links */
.letter-tem-doc a {
    color: #2a74a6;
    text-decoration: underline;
}

/* Tables inside Letter */
.letter-tem-doc table {
    width: 100%;
    margin: 18px 0;

    border-collapse: collapse;
}

.letter-tem-doc th,
.letter-tem-doc td {
    padding: 8px 10px;

    border: 1px solid #cbd5e1;
    text-align: left;
}

.letter-tem-doc th {
    background: #f8fafc;
    color: #1e293b;
    font-weight: 600;
}

/* Footer */
.letter-tem-doc > div[style*="border-top"] {
    margin-top: 50px !important;
    padding-top: 12px !important;

    border-top: 1px solid #cbd5e1 !important;

    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}



.preview-widget-info {
    padding: 15px;

    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

/* Name */
.preview-widget-info h3 {
    margin: 0 0 18px;

    color: #1e293b;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;

    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

/* Info List */
.preview-widget-info ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    margin: 0;
    padding: 0;

    list-style: none;
}
.preview-widget-info-cs ul {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));

    margin: 0;
    padding: 0;

    list-style: none;
}

/* Info Item */
.preview-widget-info li {
    padding: 9px 12px;

    color: #64748b;
    font-size: 14px;
    font-weight: 500;

    border-bottom: 1px solid #f1f5f9;
}

/* Value */
.preview-widget-info li span {
    color: #334155;
    font-weight: 500;
}

/* Label / Value separation */
.preview-widget-info li span:not(.status-green):not(.status-red) {
    margin-left: 4px;
}


.controller-detail-card {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 92px;
    padding: 16px 18px;

    border: 1px solid transparent;
    border-radius: 10px;

    transition: all 0.2s ease;
}

.controller-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}


/* Icon */
.controller-detail-icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 18px;
}


/* Content */
.controller-detail-content {
    min-width: 0;
}

.controller-detail-content span {
    display: block;
    margin-bottom: 4px;

    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.controller-detail-content strong {
    display: block;

    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================
   Widget 1 - Controller Code
   ========================================= */

.controller-detail-card.widget-code {
    background: #eff6ff;
    border-color: #dbeafe;
}

.controller-detail-card.widget-code .controller-detail-icon {
    color: #2563eb;
    background: #dbeafe;
}


/* =========================================
   Widget 2 - Controller Name
   ========================================= */

.controller-detail-card.widget-name {
    background: #f5f3ff;
    border-color: #ede9fe;
}

.controller-detail-card.widget-name .controller-detail-icon {
    color: #7c3aed;
    background: #ede9fe;
}


/* =========================================
   Widget 3 - Depot
   ========================================= */

.controller-detail-card.widget-depot {
    background: #fff7ed;
    border-color: #ffedd5;
}

.controller-detail-card.widget-depot .controller-detail-icon {
    color: #ea580c;
    background: #ffedd5;
}


/* =========================================
   Widget 4 - Phone
   ========================================= */

.controller-detail-card.widget-phone {
    background: #f0fdf4;
    border-color: #dcfce7;
}

.controller-detail-card.widget-phone .controller-detail-icon {
    color: #16a34a;
    background: #dcfce7;
}


/* =========================================
   Hover Effects
   ========================================= */

.controller-detail-card.widget-code:hover {
    border-color: #bfdbfe;
}

.controller-detail-card.widget-name:hover {
    border-color: #ddd6fe;
}

.controller-detail-card.widget-depot:hover {
    border-color: #fed7aa;
}

.controller-detail-card.widget-phone:hover {
    border-color: #bbf7d0;
}


.staff-detail-card {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 92px;
    padding: 16px 18px;

    border: 1px solid transparent;
    border-radius: 10px;

    transition: all 0.2s ease;
}

.staff-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}


/* Icon */
.staff-detail-icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 18px;
}


/* Content */
.staff-detail-content {
    min-width: 0;
}

.staff-detail-content span {
    display: block;
    margin-bottom: 4px;

    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.staff-detail-content strong {
    display: block;

    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================
   Staff Code - Blue
   ========================================= */

.staff-detail-card.staff-widget-code {
    background: #eff6ff;
    border-color: #dbeafe;
}

.staff-detail-card.staff-widget-code .staff-detail-icon {
    color: #2563eb;
    background: #dbeafe;
}

.staff-detail-card.staff-widget-code:hover {
    border-color: #bfdbfe;
}


/* =========================================
   Staff Name - Purple
   ========================================= */

.staff-detail-card.staff-widget-name {
    background: #f5f3ff;
    border-color: #ede9fe;
}

.staff-detail-card.staff-widget-name .staff-detail-icon {
    color: #7c3aed;
    background: #ede9fe;
}

.staff-detail-card.staff-widget-name:hover {
    border-color: #ddd6fe;
}


/* =========================================
   Designation - Orange
   ========================================= */

.staff-detail-card.staff-widget-designation {
    background: #fff7ed;
    border-color: #ffedd5;
}

.staff-detail-card.staff-widget-designation .staff-detail-icon {
    color: #ea580c;
    background: #ffedd5;
}

.staff-detail-card.staff-widget-designation:hover {
    border-color: #fed7aa;
}


/* =========================================
   Phone - Green
   ========================================= */

.staff-detail-card.staff-widget-phone {
    background: #f0fdf4;
    border-color: #dcfce7;
}

.staff-detail-card.staff-widget-phone .staff-detail-icon {
    color: #16a34a;
    background: #dcfce7;
}

.staff-detail-card.staff-widget-phone:hover {
    border-color: #bbf7d0;
}

.assignment-detail-card {
    position: relative;
    overflow: hidden;

    min-height: 95px;
    padding: 18px 20px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);

    transition: all 0.25s ease;
}

/* Decorative Circle */
.assignment-detail-card::before {
    content: "";
    position: absolute;

    width: 70px;
    height: 70px;

    top: -28px;
    right: -22px;

    background: #dbeafe;
    border-radius: 50%;

    opacity: 0.8;
}

/* Small Decorative Shape */
.assignment-detail-card::after {
    content: "";
    position: absolute;

    width: 12px;
    height: 12px;

    right: 18px;
    bottom: 14px;

    background: #93c5fd;
    border-radius: 3px;

    transform: rotate(45deg);
}


/* Content */
.assignment-detail-card span {
    position: relative;
    z-index: 1;

    display: block;

    margin-bottom: 7px;

    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.assignment-detail-card strong {
    position: relative;
    z-index: 1;

    display: block;

    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    word-break: break-word;
}


/* Hover */
.assignment-detail-card:hover {
    transform: translateY(-3px);

    border-color: #bfdbfe;

    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}


/* =========================================
   Optional: Color Variations
   Add these classes to the card if needed
   ========================================= */

.assignment-detail-card.assignment-blue {
    background: #eff6ff;
    border-color: #dbeafe;
}

.assignment-detail-card.assignment-blue::before {
    background: #dbeafe;
}

.assignment-detail-card.assignment-blue::after {
    background: #93c5fd;
}


.assignment-detail-card.assignment-purple {
    background: #f5f3ff;
    border-color: #ede9fe;
}

.assignment-detail-card.assignment-purple::before {
    background: #ede9fe;
}

.assignment-detail-card.assignment-purple::after {
    background: #c4b5fd;
}


.assignment-detail-card.assignment-orange {
    background: #fff7ed;
    border-color: #ffedd5;
}

.assignment-detail-card.assignment-orange::before {
    background: #ffedd5;
}

.assignment-detail-card.assignment-orange::after {
    background: #fdba74;
}


.assignment-detail-card.assignment-green {
    background: #f0fdf4;
    border-color: #dcfce7;
}

.assignment-detail-card.assignment-green::before {
    background: #dcfce7;
}

.assignment-detail-card.assignment-green::after {
    background: #86efac;
}


.driver-detail-card {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 92px;
    padding: 16px 18px;

    border: 1px solid transparent;
    border-radius: 10px;

    transition: all 0.2s ease;
}

.driver-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}


/* =========================================
   Icon
   ========================================= */

.driver-detail-icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 18px;
}


/* =========================================
   Content
   ========================================= */

.driver-detail-content {
    min-width: 0;
}

.driver-detail-content span {
    display: block;
    margin-bottom: 4px;

    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.driver-detail-content strong {
    display: block;

    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================
   Driver Code - Blue
   ========================================= */

.driver-detail-card.driver-widget-code {
    background: #eff6ff;
    border-color: #dbeafe;
}

.driver-detail-card.driver-widget-code .driver-detail-icon {
    color: #2563eb;
    background: #dbeafe;
}

.driver-detail-card.driver-widget-code:hover {
    border-color: #bfdbfe;
}


/* =========================================
   Driver Name - Purple
   ========================================= */

.driver-detail-card.driver-widget-name {
    background: #f5f3ff;
    border-color: #ede9fe;
}

.driver-detail-card.driver-widget-name .driver-detail-icon {
    color: #7c3aed;
    background: #ede9fe;
}

.driver-detail-card.driver-widget-name:hover {
    border-color: #ddd6fe;
}


/* =========================================
   License - Cyan
   ========================================= */

.driver-detail-card.driver-widget-license {
    background: #ecfeff;
    border-color: #cffafe;
}

.driver-detail-card.driver-widget-license .driver-detail-icon {
    color: #0891b2;
    background: #cffafe;
}

.driver-detail-card.driver-widget-license:hover {
    border-color: #a5f3fc;
}


/* =========================================
   Phone - Green
   ========================================= */

.driver-detail-card.driver-widget-phone {
    background: #f0fdf4;
    border-color: #dcfce7;
}

.driver-detail-card.driver-widget-phone .driver-detail-icon {
    color: #16a34a;
    background: #dcfce7;
}

.driver-detail-card.driver-widget-phone:hover {
    border-color: #bbf7d0;
}


/* =========================================
   Depot - Orange
   ========================================= */

.driver-detail-card.driver-widget-depot {
    background: #fff7ed;
    border-color: #ffedd5;
}

.driver-detail-card.driver-widget-depot .driver-detail-icon {
    color: #ea580c;
    background: #ffedd5;
}

.driver-detail-card.driver-widget-depot:hover {
    border-color: #fed7aa;
}


/* =========================================
   Branch - Rose
   ========================================= */

.driver-detail-card.driver-widget-branch {
    background: #fff1f2;
    border-color: #ffe4e6;
}

.driver-detail-card.driver-widget-branch .driver-detail-icon {
    color: #e11d48;
    background: #ffe4e6;
}

.driver-detail-card.driver-widget-branch:hover {
    border-color: #fecdd3;
}

.value-leave-dt{
       background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 11px;
    border-radius: 5px;
    font-size: 13px;
}

.leave-balance-grid {
    display: flex !important;
    /*flex-direction: column !important;*/
    flex-wrap:wrap;
    gap: 12px !important;
    width: 100% !important;
}


/* =========================================
   Leave Balance Row
   ========================================= */

.leave-balance-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;

    min-height: 82px !important;
    padding: 14px 16px !important;

    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;

    overflow: hidden !important;

    transition: all 0.25s ease !important;
    width:100%;
}


/* Decorative left accent */
.leave-balance-row::before {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 4px !important;

    background: #2a74a6 !important;

    border-radius: 12px 0 0 12px !important;
}


/* Decorative circle */
.leave-balance-row::after {
    content: "" !important;

    position: absolute !important;
    right: -25px !important;
    top: -35px !important;

    width: 90px !important;
    height: 90px !important;

    background: #f0f7fc !important;
    border-radius: 50% !important;

    pointer-events: none !important;
}


/* Hover */
.leave-balance-row:hover {
    transform: translateY(-2px) !important;

    border-color: #b9d3e5 !important;

    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08) !important;
}


/* =========================================
   Selected Leave
   ========================================= */

.leave-balance-row.selected {
    background: linear-gradient(
        135deg,
        #f0f7fc 0%,
        #ffffff 70%
    ) !important;

    border-color: #8db9d3 !important;

    box-shadow:
        0 5px 16px rgba(42, 116, 166, 0.10),
        inset 0 0 0 1px rgba(42, 116, 166, 0.04) !important;
}

.leave-balance-row.selected::before {
    width: 5px !important;
    background: #2a74a6 !important;
}


/* =========================================
   Leave Name
   ========================================= */

.leave-balance-name {
    position: relative !important;
    z-index: 2 !important;

    min-width: 140px !important;

    color: #1e293b !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}


/* Selected Badge */
.leave-balance-name span {
    display: inline-flex !important;
    align-items: center !important;

    margin-left: 7px !important;
    padding: 3px 8px !important;

    color: #1d4ed8 !important;
    background: #dbeafe !important;

    border: 1px solid #bfdbfe !important;
    border-radius: 20px !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    vertical-align: middle !important;
}


/* =========================================
   Metrics Container
   ========================================= */

.leave-balance-metrics {
    position: relative !important;
    z-index: 2 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(110px, 1fr)) !important;

    gap: 8px !important;

    flex: 1 !important;
    max-width: 560px !important;
}


/* Individual Metric */
.leave-balance-metrics > div {
    min-width: 100px !important;

    padding: 9px 12px !important;

    background: #f8fafc !important;

    border: 1px solid #edf2f7 !important;
    border-radius: 8px !important;

    text-align: center !important;

    transition: all 0.2s ease !important;
}

.leave-balance-metrics > div:hover {
    background: #ffffff !important;
    border-color: #d5e2ec !important;
    transform: translateY(-1px) !important;
}


/* Metric Label */
.leave-balance-metrics small {
    display: block !important;

    margin-bottom: 3px !important;

    color: #64748b !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}


/* Metric Value */
.leave-balance-metrics strong {
    display: block !important;

    color: #1e293b !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;
}


/* =========================================
   Different Metric Colors
   ========================================= */

/* Limit */
.leave-balance-metrics > div:nth-child(1) {
    background: #f8fafc !important;
}

.leave-balance-metrics > div:nth-child(1) strong {
    color: #475569 !important;
}


/* Used */
.leave-balance-metrics > div:nth-child(2) {
    background: #fff7ed !important;
    border-color: #ffedd5 !important;
}

.leave-balance-metrics > div:nth-child(2) strong {
    color: #ea580c !important;
}


/* Available */
.leave-balance-metrics > div:nth-child(3) {
    background: #f0fdf4 !important;
    border-color: #dcfce7 !important;
}

.leave-balance-metrics > div:nth-child(3) strong {
    color: #16a34a !important;
}


/* =========================================
   Selected Metric Highlight
   ========================================= */

.leave-balance-row.selected .leave-balance-metrics > div:nth-child(3) {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
}

.leave-balance-row.selected .leave-balance-metrics > div:nth-child(3) strong {
    color: #15803d !important;
}


/* =========================================
   Empty State
   ========================================= */

.leave-balance-grid > div:not(.leave-balance-row) {
    padding: 25px !important;

    color: #64748b !important;
    background: #f8fafc !important;

    border: 1px dashed #cbd5e1 !important;
    border-radius: 10px !important;

    font-size: 13px !important;
    text-align: center !important;
}

.attendance-row input,.attendance-row select,.attendance-row textarea{
    border:1px solid #ccc;
    font-size:13px;
    height:40px;
}
#salaryRows input,#salaryRows select,#salaryRows textarea{
    border:1px solid #ccc;
    font-size:13px;
    height:40px;
}

.vehicle-detail-card {
    display: flex !important;
    align-items: center !important;

    gap: 14px !important;

    min-height: 92px !important;

    padding: 16px 18px !important;

    border: 1px solid transparent !important;
    border-radius: 10px !important;

    transition: all 0.2s ease !important;

    overflow: hidden !important;
}

.vehicle-detail-card:hover {
    transform: translateY(-2px) !important;

    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}


/* =========================================
   Icon
   ========================================= */

.vehicle-detail-icon {
    flex: 0 0 46px !important;

    width: 46px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;

    font-size: 18px !important;

    transition: all 0.2s ease !important;
}

.vehicle-detail-card:hover .vehicle-detail-icon {
    transform: scale(1.06) !important;
}


/* =========================================
   Content
   ========================================= */

.vehicle-detail-content {
    min-width: 0 !important;
    flex: 1 !important;
}

.vehicle-detail-content span {
    display: block !important;

    margin-bottom: 4px !important;

    color: #64748b !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    line-height: 1.3 !important;
}

.vehicle-detail-content strong {
    display: block !important;

    color: #1e293b !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    line-height: 1.3 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* =========================================
   Vehicle Code - Blue
   ========================================= */

.vehicle-detail-card.vehicle-widget-code {
    background: #eff6ff !important;
    border-color: #dbeafe !important;
}

.vehicle-detail-card.vehicle-widget-code .vehicle-detail-icon {
    color: #2563eb !important;
    background: #dbeafe !important;
}

.vehicle-detail-card.vehicle-widget-code:hover {
    border-color: #bfdbfe !important;
}


/* =========================================
   Vehicle No - Purple
   ========================================= */

.vehicle-detail-card.vehicle-widget-no {
    background: #f5f3ff !important;
    border-color: #ede9fe !important;
}

.vehicle-detail-card.vehicle-widget-no .vehicle-detail-icon {
    color: #7c3aed !important;
    background: #ede9fe !important;
}

.vehicle-detail-card.vehicle-widget-no:hover {
    border-color: #ddd6fe !important;
}


/* =========================================
   Vehicle Type - Cyan
   ========================================= */

.vehicle-detail-card.vehicle-widget-type {
    background: #ecfeff !important;
    border-color: #cffafe !important;
}

.vehicle-detail-card.vehicle-widget-type .vehicle-detail-icon {
    color: #0891b2 !important;
    background: #cffafe !important;
}

.vehicle-detail-card.vehicle-widget-type:hover {
    border-color: #a5f3fc !important;
}


/* =========================================
   Fuel Type - Orange
   ========================================= */

.vehicle-detail-card.vehicle-widget-fuel {
    background: #fff7ed !important;
    border-color: #ffedd5 !important;
}

.vehicle-detail-card.vehicle-widget-fuel .vehicle-detail-icon {
    color: #ea580c !important;
    background: #ffedd5 !important;
}

.vehicle-detail-card.vehicle-widget-fuel:hover {
    border-color: #fed7aa !important;
}


/* =========================================
   OEM - Rose
   ========================================= */

.vehicle-detail-card.vehicle-widget-oem {
    background: #fff1f2 !important;
    border-color: #ffe4e6 !important;
}

.vehicle-detail-card.vehicle-widget-oem .vehicle-detail-icon {
    color: #e11d48 !important;
    background: #ffe4e6 !important;
}

.vehicle-detail-card.vehicle-widget-oem:hover {
    border-color: #fecdd3 !important;
}


/* =========================================
   Depot - Green
   ========================================= */

.vehicle-detail-card.vehicle-widget-depot {
    background: #f0fdf4 !important;
    border-color: #dcfce7 !important;
}

.vehicle-detail-card.vehicle-widget-depot .vehicle-detail-icon {
    color: #16a34a !important;
    background: #dcfce7 !important;
}

.vehicle-detail-card.vehicle-widget-depot:hover {
    border-color: #bbf7d0 !important;
}


 .vehicle-detail-card-2 {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        min-height: 78px;
        padding: 14px 16px;
    }

    .vehicle-detail-card-2 span {
        color: #6b7280;
        display: block;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .vehicle-detail-card-2 strong {
        color: #111827;
        display: block;
        font-size: 15px;
        font-weight: 600;
        word-break: break-word;
    }


.vehicle-detail-card-2 {
    position: relative;
    overflow: hidden;

    min-height: 95px;
    padding: 18px 20px;

    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);

    transition: all 0.25s ease;
}

/* Decorative Circle */
.vehicle-detail-card-2::before {
    content: "";
    position: absolute;

    width: 70px;
    height: 70px;

    top: -28px;
    right: -22px;

    background: #dbeafe;
    border-radius: 50%;

    opacity: 0.8;
}

/* Small Decorative Shape */
.vehicle-detail-card-2::after {
    content: "";
    position: absolute;

    width: 12px;
    height: 12px;

    right: 18px;
    bottom: 14px;

    background: #93c5fd;
    border-radius: 3px;

    transform: rotate(45deg);
}


/* Content */
.vehicle-detail-card-2 span {
    position: relative;
    z-index: 1;

    display: block;

    margin-bottom: 7px;

    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.vehicle-detail-card-2 strong {
    position: relative;
    z-index: 1;

    display: block;

    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    word-break: break-word;
}


/* Hover */
.vehicle-detail-card-2:hover {
    transform: translateY(-3px);

    border-color: #bfdbfe;

    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}




.col-box-cs {
    position: relative !important;

    padding: 16px 18px !important;

    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;

    transition: all 0.2s ease !important;
}

.col-box-cs:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06) !important;
}


/* =========================================
   Label
   ========================================= */

.col-box-cs > label {
    display: block !important;

    margin-bottom: 10px !important;

    color: #334155 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}


/* =========================================
   Column Picker
   ========================================= */

.col-box-cs .dor-column-picker {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;

    padding: 12px 14px !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
}


/* Left content */

.col-box-cs .dor-column-picker > div {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;

    min-width: 0 !important;
}


/* Count */

.col-box-cs #selectedDorColumnsCount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 28px !important;
    height: 28px !important;

    padding: 0 7px !important;

    color: #2563eb !important;

    background: #eff6ff !important;

    border: 1px solid #dbeafe !important;
    border-radius: 7px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}


/* Selected text */

.col-box-cs .dor-column-picker span {
    color: #64748b !important;

    font-size: 12px !important;
    font-weight: 500 !important;
}


/* =========================================
   Choose Columns Button
   ========================================= */

.col-box-cs .dor-column-picker button {
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    padding: 8px 13px !important;

    color: #2563eb !important;

    background: #eff6ff !important;

    border: 1px solid #bfdbfe !important;
    border-radius: 7px !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;
}


/* Button icon */

.col-box-cs .dor-column-picker button::before {
    content: "\f03a" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 11px !important;
}


/* Button hover */

.col-box-cs .dor-column-picker button:hover {
    color: #ffffff !important;

    background: #2563eb !important;

    border-color: #2563eb !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.18) !important;
}


/* =========================================
   Selected Columns Preview
   ========================================= */

.col-box-cs .dor-column-preview {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;

    margin-top: 10px !important;
}


/* If preview contains badges/spans */

.col-box-cs .dor-column-preview > * {
    display: inline-flex !important;
    align-items: center !important;

    padding: 5px 9px !important;

    color: #475569 !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}

.danger-text {
    color:red;
    font-size:12px;
    margin:0;
}


.between-cs-modal{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    
}


.check-btns-modal {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
margin-left: auto;
    margin-bottom: 14px !important;
}


/* Common Button */

.check-btns-modal button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    min-height: 34px !important;

    padding: 7px 13px !important;

    border-radius: 7px !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;
}


/* =========================================
   Check All
   ========================================= */

.check-btns-modal .btnCheck1 {
    color: #15803d !important;

    background: #f0fdf4 !important;

    border: 1px solid #bbf7d0 !important;
}

.check-btns-modal .btnCheck1::before {
    content: "\f00c" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 10px !important;
}

.check-btns-modal .btnCheck1:hover {
    color: #ffffff !important;

    background: #16a34a !important;

    border-color: #16a34a !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 5px 12px rgba(22, 163, 74, 0.18) !important;
}


/* =========================================
   Uncheck All
   ========================================= */

.check-btns-modal .btnCheck2 {
    color: #dc2626 !important;

    background: #fef2f2 !important;

    border: 1px solid #fecaca !important;
}

.check-btns-modal .btnCheck2::before {
    content: "\f00d" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 10px !important;
}

.check-btns-modal .btnCheck2:hover {
    color: #ffffff !important;

    background: #dc2626 !important;

    border-color: #dc2626 !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 5px 12px rgba(220, 38, 38, 0.18) !important;
}


/* =========================================
   Active / Click
   ========================================= */

.check-btns-modal button:active {
    transform: translateY(0) !important;

    box-shadow: none !important;
}



.report-excel {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left:auto;
    margin-top: 12px !important;
}


/* Button */

.report-excel a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    min-height: 38px !important;

    padding: 9px 16px !important;

    color: #15803d !important;
    background: #f0fdf4 !important;

    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    transition: all 0.2s ease !important;
}


/* Excel Icon */

.report-excel a::before {
    content: "\f1c3" !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;

    font-size: 14px !important;
}


/* Hover */

.report-excel a:not(.disabled):hover {
    color: #ffffff !important;

    background: #16a34a !important;

    border-color: #16a34a !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 6px 14px rgba(22, 163, 74, 0.18) !important;
}


/* Active */

.report-excel a:not(.disabled):active {
    transform: translateY(0) !important;

    box-shadow: none !important;
}


/* =========================================
   Disabled State
   ========================================= */

.report-excel a.disabled,
.report-excel a[aria-disabled="true"] {
    color: #94a3b8 !important;

    background: #f1f5f9 !important;

    border-color: #e2e8f0 !important;

    cursor: not-allowed !important;

    pointer-events: none !important;

    opacity: 0.75 !important;

    box-shadow: none !important;
}

.report-excel a.disabled::before,
.report-excel a[aria-disabled="true"]::before {
    color: #94a3b8 !important;
}


/* =========================================
   Loading State
   ========================================= */

.report-excel a.loading {
    pointer-events: none !important;

    opacity: 0.8 !important;
}

.report-excel a.loading::before {
    content: "\f110" !important;

    animation: dorExcelSpin 0.8s linear infinite !important;
}

@keyframes dorExcelSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



.col-box-cs {
    position: relative !important;

    width: 100% !important;

    padding: 16px 18px !important;

    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;

    transition: all 0.2s ease !important;
}

.col-box-cs:hover {
    border-color: #cbd5e1 !important;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}


/* =========================================
   REPORT COLUMNS LABEL
   ========================================= */

.col-box-cs > label {
    display: block !important;

    margin: 0 0 10px !important;

    color: #334155 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
}





/* =========================================
   MIDDLE - PICKER AREA
   ========================================= */

.col-box-middle {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 15px !important;

    width: 100% !important;

    padding: 11px 12px !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 9px !important;
}


/* =========================================
   BOTTOM - SELECTED COUNT
   ========================================= */

.col-box-bottom {
    display: flex !important;

    align-items: center !important;

    gap: 7px !important;

    min-width: 0 !important;
}


/* Count Badge */

.col-box-bottom strong {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 30px !important;

    height: 29px !important;

    padding: 0 8px !important;

    color: #0d6efd !important;

    background: #f5f3ff !important;

    border: 1px solid #ddd6fe !important;

    border-radius: 7px !important;

    font-size: 13px !important;

    font-weight: 700 !important;

    line-height: 1 !important;
}


/* "columns selected" */

.col-box-bottom span {
    color: #64748b !important;

    font-size: 12px !important;

    font-weight: 500 !important;

    white-space: nowrap !important;
}


/* =========================================
   CHOOSE COLUMNS BUTTON
   ========================================= */

.col-box-button {
    flex: 0 0 auto !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    min-height: 34px !important;

    padding: 7px 14px !important;

    color: #0d6efd !important;

    background: #f5f3ff !important;

    border: 1px solid #ddd6fe !important;

    border-radius: 7px !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: all 0.2s ease !important;
}


/* Button Icon */

.col-box-button::before {
    content: "\f03a" !important;

    font-family: "Font Awesome 6 Free" !important;

    font-weight: 900 !important;

    font-size: 11px !important;
}


/* Button Hover */

.col-box-button:hover {
    color: #ffffff !important;

    background: #0d6efd !important;

    border-color: #0d6efd !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 5px 12px rgba(124, 58, 237, 0.18) !important;
}


/* Button Active */

.col-box-button:active {
    transform: translateY(0) !important;

    box-shadow: none !important;
}


/* =========================================
   PREVIEW AREA
   ========================================= */

.col-box-preview {
    display: flex !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    gap: 6px !important;

    margin-top: 10px !important;

    min-height: 0 !important;
}


/* Preview Items */

.col-box-preview > * {
    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    padding: 5px 9px !important;

    color: #475569 !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 6px !important;

    font-size: 11px !important;

    font-weight: 500 !important;

    line-height: 1.3 !important;

    transition: all 0.15s ease !important;
}


/* Preview Hover */

.col-box-preview > *:hover {
    color: #0d6efd !important;

    background: #f5f3ff !important;

    border-color: #ddd6fe !important;
}

.check-modl label{
    font-size:13.5px !important;
}




.complaint-info-cont {
    position: relative !important;

    height: 100% !important;
    padding: 20px 22px !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;

    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05) !important;

    overflow: hidden !important;

    transition: all 0.25s ease !important;
}


/* Top accent */

/*.complaint-info-cont::before {*/
/*    content: "" !important;*/

/*    position: absolute !important;*/
/*    top: 0 !important;*/
/*    left: 0 !important;*/

/*    width: 100% !important;*/
/*    height: 2px !important;*/

/*    background: linear-gradient(*/
/*        90deg,*/
/*        #2563eb,*/
/*        #60a5fa*/
/*    ) !important;*/
/*}*/


/* Decorative circle */

.complaint-info-cont::after {
    content: "" !important;

    position: absolute !important;
    right: -35px !important;
    top: -35px !important;

    width: 100px !important;
    height: 100px !important;

    background: #eff6ff !important;

    border-radius: 50% !important;

    opacity: 0.7 !important;

    pointer-events: none !important;
}


.complaint-info-cont .title-w-sec {
    position: relative !important;
    z-index: 1 !important;

    margin: 0 0 12px !important;

    color: #1e293b !important;

    font-size: 15px !important;
    font-weight: 700 !important;
}



.complaint-info-cont hr {
    position: relative !important;
    z-index: 1 !important;

    margin: 0 0 18px !important;

    border: 0 !important;
    border-top: 1px solid #e2e8f0 !important;

    opacity: 1 !important;
}


.complaint-info-cont > div {
    position: relative !important;
    z-index: 1 !important;

    padding: 11px 13px !important;

    background: #f8fafc !important;

    border: 1px solid #eef2f7 !important;
    border-radius: 8px !important;

    color: #334155 !important;

    font-size: 14px !important;
    line-height: 1.5 !important;

    transition: all 0.2s ease !important;
}


/* Space between rows */

.complaint-info-cont > div.mb-3 {
    margin-bottom: 10px !important;
}


.complaint-info-cont > div strong {
    display: inline-block !important;

    margin-bottom: 4px !important;

    color: #64748b !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}



.complaint-info-cont > div br + * {
    color: #1e293b !important;
}

div.dataTables_wrapper div.dataTables_info{
    font-size:13px;
    color:#000;
     padding-top:10px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination{
    padding-top:10px;
}
.headertogle form{
    margin:0 !important;
}



.digital-time-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 6px 12px 6px 6px;

    background: #eef4f7;
    border-radius: 10px;

    font-family: "Poppins", sans-serif;
}

/* Clock icon box */
.clock-icon {
   width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb21;
    border-radius: 8px;
    color: #102d6c;
    font-size: 15px;
}

/* Text area */
.clock-content {
    display: flex;
    justify-content: center;
    gap:8px
}

/* Date */
.display-date {
    display: flex;
    align-items: center;
    gap: 3px;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    margin:0;
    color: #8a8a8a;
}

#day {
    color: #656464;
}

#daynum {
    color: #656464;
}

#month,
#year {
    color: #656464;
}

/* Time */
.display-time {
    margin-top: 0;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    padding:0;
    color: #000;
    letter-spacing: 0.5px;
}






/* -----------------------------------------
   Common button styling
   ----------------------------------------- */

.header-section-right .chat-nav-bell,
.header-section-right .headertogle {
    width: 44px !important;
    height: 40px !important;
    min-width: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;

    position: relative !important;

    text-decoration: none !important;

    border: 1px solid transparent !important;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease !important;
}


/* =========================================
   CHAT BUTTON
   ========================================= */

.header-section-right .chat-nav-bell {
       color: #df7f0e  !important;
        background: linear-gradient(135deg, #df7f0e47 0%, #ffc10738 100%) !important;
}

.header-section-right .chat-nav-bell:hover {
    color: #ffffff !important;

    background:#df7f0e !important;

   

    transform: translateY(-2px) !important;
}
.header-section-right .chat-nav-bell i{
     color: #df7f0e  !important;
}
.header-section-right .chat-nav-bell:hover i{
     color: #fff  !important;
}

/* =========================================
   SIDEBAR TOGGLE
   ========================================= */

.header-section-right .headertogle:first-of-type {
   color: #18a316 !important;
    background: linear-gradient(135deg, #18a3161f 0%, #18a3162e 100%) !important;
    /* border-color: #cbd5e1 !important; */

    cursor: pointer !important;
}

.header-section-right .headertogle:first-of-type:hover {
    color: #ffffff !important;

    background:#18a316 !important;

    border-color: #475569 !important;

    transform: translateY(-2px) !important;
}


/* =========================================
   LOGOUT BUTTON
   ========================================= */

.header-section-right .headertogle:last-of-type {
    color: #dc2626 !important;

    background: linear-gradient(
        135deg,
        #fff5f5 0%,
        #fee2e2 100%
    ) !important;

   
}

.header-section-right .headertogle:last-of-type:hover {
    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #ef4444 0%,
        #dc2626 100%
    ) !important;

  

    transform: translateY(-2px) !important;
}


/* =========================================
   ICONS
   ========================================= */

.header-section-right .chat-nav-bell i,
.header-section-right .headertogle i {
    font-size: 17px !important;
    line-height: 1 !important;
    transition: transform 0.25s ease !important;
}

.header-section-right .chat-nav-bell:hover i,
.header-section-right .headertogle:hover i {
    transform: scale(1.08) !important;
}


/* =========================================
   LOGOUT FORM
   ========================================= */

.header-section-right .headertogle form {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
}

.header-section-right .headertogle button {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: none !important;
    outline: none !important;

    background: transparent !important;
    color: inherit !important;

    cursor: pointer !important;

    border-radius: 10px !important;
}


/* =========================================
   CHAT UNREAD BADGE
   ========================================= */

.header-section-right .chat-nav-badge {
    position: absolute !important;

    top: -7px !important;
    right: -7px !important;

    min-width: 19px !important;
    height: 19px !important;

    padding: 0 5px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 6px !important;

    background: linear-gradient(
        135deg,
        #ef4444,
        #b91c1c
    ) !important;

    color: #ffffff !important;

    border: 2px solid #ffffff !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    box-shadow:
        0 3px 8px rgba(185, 28, 28, 0.30) !important;
}

.header-section-right .chat-nav-badge.d-none {
    display: none !important;
}


/* =========================================
   ACTIVE / CLICK EFFECT
   ========================================= */

.header-section-right .chat-nav-bell:active,
.header-section-right .headertogle:active {
    transform: translateY(0) scale(0.97) !important;
}








.sidebar-blur {
    position: relative;
    isolation: isolate;

    height: 100%;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(59, 130, 246, 0.20) 0,
            transparent 28%
        ),
        radial-gradient(
            circle at 0% 80%,
            rgba(34, 211, 238, 0.12) 0,
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 60%,
            rgba(139, 92, 246, 0.08) 0,
            transparent 22%
        ),
        linear-gradient(
            145deg,
            #12386d 0%,
            #0f3162 45%,
            #09264d 100%
        );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


/* =========================================
   LARGE DECORATIVE SHAPE
   ========================================= */

.sidebar-blur::before {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    top: -110px;
    right: -100px;

    border-radius: 42% 58% 65% 35%;

    background: linear-gradient(
        135deg,
        rgba(96, 165, 250, 0.18),
        rgba(37, 99, 235, 0.03)
    );

    filter: blur(8px);

    transform: rotate(25deg);

    pointer-events: none;
    z-index: -1;
}


/* =========================================
   BOTTOM DECORATIVE SHAPE
   ========================================= */

.sidebar-blur::after {
    content: "";
    position: absolute;

    width: 220px;
    height: 220px;

    bottom: -90px;
    left: -100px;

    border-radius: 65% 35% 40% 60%;

    background: linear-gradient(
        135deg,
        rgba(34, 211, 238, 0.13),
        rgba(59, 130, 246, 0.02)
    );

    filter: blur(10px);

    transform: rotate(-20deg);

    pointer-events: none;
    z-index: -1;
}



.dataTables_wrapper .pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;

    margin: 16px 0 4px;
    padding: 0;

    list-style: none;
}


/* =========================================
   PAGINATION ITEM
   ========================================= */

.dataTables_wrapper .pagination .page-item {
    margin: 0;
}


/* =========================================
   PAGINATION LINK
   ========================================= */

.dataTables_wrapper .pagination .page-link {
    min-width: 38px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px;

    border: 1px solid #e2e8f0;
    border-radius: 8px;

    background: #ffffff;

    color: #475569;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 2px 6px rgba(15, 49, 98, 0.06);

    transition:
        all 0.2s ease;

    cursor: pointer;
}


/* =========================================
   HOVER
   ========================================= */

.dataTables_wrapper .pagination .page-link:hover {
    color: #2563eb;

    background: #eff6ff;

    border-color: #bfdbfe;

    box-shadow:
        0 4px 10px rgba(37, 99, 235, 0.10);

    transform: translateY(-1px);
}


/* =========================================
   ACTIVE PAGE
   ========================================= */

.dataTables_wrapper .pagination .page-item.active .page-link {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #1d4ed8 100%
        );

    border-color: #2563eb;

    box-shadow:
        0 4px 12px rgba(37, 99, 235, 0.25);
}


/* =========================================
   ACTIVE HOVER
   ========================================= */

.dataTables_wrapper .pagination .page-item.active .page-link:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #1d4ed8 0%,
            #1e40af 100%
        );

    border-color: #1d4ed8;
}


/* =========================================
   DISABLED PREVIOUS / NEXT
   ========================================= */

.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: #94a3b8;

    background: #f8fafc;

    border-color: #e8edf3;

    box-shadow: none;

    cursor: not-allowed;

    opacity: 0.75;
}


/* =========================================
   PREVIOUS / NEXT
   ========================================= */

.dataTables_wrapper .pagination .previous .page-link,
.dataTables_wrapper .pagination .next .page-link {
    min-width: 68px;

    font-size: 12px;
}


/* =========================================
   CLICK EFFECT
   ========================================= */

.dataTables_wrapper .pagination .page-link:active {
    transform: scale(0.96);
}


/* =========================================
   REMOVE BOOTSTRAP DEFAULT BORDERS
   ========================================= */

.dataTables_wrapper .pagination .page-item:first-child .page-link,
.dataTables_wrapper .pagination .page-item:last-child .page-link {
    border-radius: 8px;
}



.role-accordions {
    width: 100%;
}


/* =========================================
   MAIN ACCORDION ITEM
   ========================================= */

.role-accordions .accordion-item {
    position: relative;

    margin-bottom: 12px !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;

    background: #ffffff;

    overflow: hidden;

    

    transition:
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}




/* =========================================
   ACCORDION HEADER
   ========================================= */

.role-accordions .accordion-header {
    margin: 0;
}


/* =========================================
   MAIN ACCORDION BUTTON
   ========================================= */

.role-accordions .accordion-button {
    position: relative;

    min-height: 58px;

    padding: 15px 50px 15px 20px;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #edf4fb 100%
        );

    color: #1e3a5f;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.1px;

    box-shadow: none !important;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


/* Small blue accent */
.role-accordions .accordion-button::before {
    content: "";

    position: absolute;

    left: 0;
    top: 16px;

    width: 4px;
    height: 26px;

    border-radius: 0 5px 5px 0;

    background: #2563eb;

    opacity: 0.75;

    transition:
        height 0.25s ease,
        opacity 0.25s ease;
}


/* Hover */
.role-accordions .accordion-button:hover {
    background:
        linear-gradient(
            135deg,
            #f1f7ff 0%,
            #e7f0fb 100%
        );

    color: #174a88;
}


/* =========================================
   OPEN ACCORDION
   ========================================= */

.role-accordions .accordion-button:not(.collapsed) {
    color: #fff;

    background: linear-gradient(135deg, #082647 0%, #1c3e64 100%);

    box-shadow: none !important;
}


.role-accordions .accordion-button:not(.collapsed)::before {
    height: 32px;
    opacity: 1;
}


/* Remove Bootstrap focus */
.role-accordions .accordion-button:focus {
    border-color: transparent !important;

    box-shadow: none !important;
}


/* =========================================
   ACCORDION ARROW
   ========================================= */

.role-accordions .accordion-button::after {
    width: 12px;
    height: 12px;

    margin-right: 5px;

    background-size: 12px;

    opacity: 0.55;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


.role-accordions .accordion-button:not(.collapsed)::after {
    opacity: 0.9;
}


/* =========================================
   ACCORDION BODY
   ========================================= */

.role-accordions .accordion-collapse {
    border-top: 1px solid #e7edf4;
}


.role-accordions .accordion-body {
    padding: 18px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}


/* =========================================
   PERMISSION GROUP
   ========================================= */

.role-accordions .permission-group {
    position: relative;

    margin-bottom: 14px !important;

    padding: 15px !important;

    border: 1px solid #e3eaf2 !important;

    border-radius: 10px !important;

    background: #eef4f7;

  

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.role-accordions .permission-group:hover {
    border-color: #c9d9eb !important;

    background: #fbfdff;

    box-shadow:
        0 5px 15px rgba(15, 49, 98, 0.07);
}


/* =========================================
   GROUP TITLE
   ========================================= */

.role-accordions .permission-group strong {
    display: inline-flex;
    align-items: center;

    color: #263b53;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.1px;
}


/* Small indicator before group title */
.role-accordions .permission-group strong::before {
    content: "";

    width: 7px;
    height: 7px;

    margin-right: 8px;

    border-radius: 3px;

    background: #3b82f6;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.10);
}


/* =========================================
   SELECT ALL
   ========================================= */

.role-accordions .permission-group > div:first-child label {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 6px 10px;

    border: 1px solid #dbe7f4;

    border-radius: 7px;

    background: #f5f9fe;

    color: #47617c;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        all 0.2s ease;
}


.role-accordions .permission-group > div:first-child label:hover {
    color: #2563eb;

    background: #eff6ff;

    border-color: #bfdbfe;
}


/* =========================================
   CHECKBOXES
   ========================================= */

.role-accordions input[type="checkbox"] {
    width: 16px;
    height: 16px;

    margin: 0 7px 0 0;

    vertical-align: middle;

    accent-color: #2563eb;

    cursor: pointer;
}


/* =========================================
   PERMISSION LABEL
   ========================================= */

.role-accordions .permission-group .row label {
    display: flex;
    align-items: center;

    min-height: 36px;

    padding: 7px 10px;

    border: 1px solid transparent;

    border-radius: 7px;

    color: #526273;

    font-size: 12.5px;
    font-weight: 500;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.role-accordions .permission-group .row label:hover {
    color: #1d4ed8;

    background: #f4f8fd;

    border-color: #e1ebf6;
}


/* =========================================
   CHECKED PERMISSION
   ========================================= */

.role-accordions .permission-group .row label:has(
    input[type="checkbox"]:checked
) {
    color: #1d4ed8;

    background: #eff6ff;

    border-color: #d6e7fb;

    font-weight: 600;
}


/* =========================================
   SELECT ALL CHECKED
   ========================================= */

.role-accordions .permission-group > div:first-child label:has(
    input[type="checkbox"]:checked
) {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    border-color: #2563eb;

    box-shadow:
        0 3px 8px rgba(37, 99, 235, 0.18);
}


/* =========================================
   PERMISSION GRID
   ========================================= */

.role-accordions .permission-group .row {
    margin-top: 4px;
}


/* =========================================
   SMOOTH COLLAPSE
   ========================================= */

.role-accordions .accordion-collapse {
    transition:
        height 0.3s ease;
}


/* =========================================
   LAST GROUP
   ========================================= */

.role-accordions .permission-group:last-child {
    margin-bottom: 0 !important;
}
.gap-between{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}
.bet-gap-cs{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

@media screen and (max-width:768px){
    .page-title nav{
        display:none;
    }
    .gap-between{
               flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .bet-gap-cs{
               flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
    }
}
.fil-btn-unset:before{
    content:unset !important;
}


.widget-salary-archive {
    position: relative;

    height: 100%;

    padding: 17px 18px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );

    border: 1px solid #e3eaf2;

    border-radius: 11px;

  

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* =========================================
   DECORATIVE BACKGROUND
   ========================================= */

.widget-salary-archive::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -35px;
    bottom: -45px;

    border-radius: 50%;

    background: rgba(37, 99, 235, 0.045);

    pointer-events: none;
}



/* =========================================
   LABEL
   ========================================= */

.widget-salary-archive p {
    position: relative;
    z-index: 1;

    margin: 0 0 7px;

    color: #64748b;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.65px;

    line-height: 1.4;
}


/* =========================================
   VALUE
   ========================================= */

.widget-salary-archive h6 {
    position: relative;
    z-index: 1;

    margin: 0;

    color: #1e3a5f;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.5;

    word-break: break-word;
}





.welcome-content-cs {
    width: min(920px, 92%);
    margin: 0 auto;

    text-align: center;
}


/* =========================================
   LOGO
   ========================================= */

.logo-wrap-cs {
    margin-bottom: 22px;
}

.logo-wrap-cs img {
    max-width: 190px;
    height: auto;

    /*filter:*/
    /*    drop-shadow(0 8px 18px rgba(15, 49, 98, 0.12));*/
    border:1px solid #ccc;
    border-radius:10px;

    transition: transform 0.3s ease;
}

.logo-wrap-cs img:hover {
    transform: translateY(-3px);
}


/* =========================================
   WELCOME TITLE
   ========================================= */

.welcome-title-cs {
    margin-bottom: 30px;
}

.welcome-title-cs span {
    display: inline-block;

    margin-bottom: 7px;

    color: #2563eb;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}

.welcome-title-cs h1 {
    margin: 0 0 7px;

    color: #172b4d;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: -0.5px;
}

.welcome-title-cs p {
    margin: 0;

    color: #64748b;

    font-size: 13px;
}


/* =========================================
   ACCESS CARDS WRAPPER
   ========================================= */

.main-index-box-btns-cs {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    width: 100%;
}


/* =========================================
   COMMON ACCESS CARD
   ========================================= */

.main-index-box-btns-cs .login-btn {
    position: relative;

    height: 100%;

    display: flex;
    align-items: center;

    padding: 28px 26px;

    overflow: hidden;

    border-radius: 18px;

    text-decoration: none;

    text-align: left;

    border: 1px solid transparent;

    box-shadow:
        0 10px 30px rgba(15, 49, 98, 0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* =========================================
   ADMIN CARD
   ========================================= */

.main-index-box-btns-cs .admin-login-btn {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #174a88 0%,
            #0f3162 55%,
            #09264d 100%
        );

    border-color: rgba(96, 165, 250, 0.25);

    box-shadow:
        0 12px 30px rgba(15, 49, 98, 0.22);
}


/* =========================================
   STAFF CARD
   ========================================= */

.main-index-box-btns-cs .staff-btn {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #087f8c 0%,
            #056b76 55%,
            #034f59 100%
        );

    border-color: rgba(45, 212, 191, 0.25);

    box-shadow:
        0 12px 30px rgba(5, 107, 118, 0.20);
}


/* =========================================
   CARD HOVER
   ========================================= */

.main-index-box-btns-cs .login-btn:hover {
    color: #ffffff;

    transform: translateY(-5px);

    text-decoration: none;
}

.main-index-box-btns-cs .admin-login-btn:hover {
    box-shadow:
        0 18px 40px rgba(15, 49, 98, 0.30);
}

.main-index-box-btns-cs .staff-btn:hover {
    box-shadow:
        0 18px 40px rgba(5, 107, 118, 0.28);
}


/* =========================================
   ICON BOX
   ========================================= */

.main-index-box-btns-cs .btn-icon {
    position: relative;
    z-index: 2;

    width: 62px;
    height: 62px;

    min-width: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 18px;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.13);

    border: 1px solid rgba(255, 255, 255, 0.15);

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.10);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.main-index-box-btns-cs .btn-icon i {
    font-size: 25px;
    color: #ffffff;
}

.main-index-box-btns-cs .login-btn:hover .btn-icon {
    transform: scale(1.08) rotate(-3deg);

    background: rgba(255, 255, 255, 0.20);
}


/* =========================================
   CONTENT
   ========================================= */

.main-index-box-btns-cs .login-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    flex: 1;
}

.main-index-box-btns-cs .login-content small {
    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.main-index-box-btns-cs .login-content strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.3;
}

.main-index-box-btns-cs .login-content em {
    margin-top: 5px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 11px;

    font-style: normal;
}


/* =========================================
   ARROW
   ========================================= */

.main-index-box-btns-cs .arrow {
    position: relative;
    z-index: 2;

    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: 12px;

    border-radius: 10px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.10);

    border: 1px solid rgba(255, 255, 255, 0.10);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.main-index-box-btns-cs .login-btn:hover .arrow {
    transform: translateX(4px);

    background: rgba(255, 255, 255, 0.18);
}

.main-index-box-btns-cs .arrow i {
    font-size: 13px;
}


/* =========================================
   DECORATIVE SHAPES
   ========================================= */

.main-index-box-btns-cs .access-shape {
    position: absolute;

    pointer-events: none;

    border-radius: 50%;
}


/* Large shape */
.main-index-box-btns-cs .shape-one {
    width: 210px;
    height: 210px;

    right: -90px;
    bottom: -125px;

    background: rgba(255, 255, 255, 0.07);

    filter: blur(1px);

    transition:
        transform 0.5s ease;
}


/* Small shape */
.main-index-box-btns-cs .shape-two {
    width: 90px;
    height: 90px;

    top: -35px;
    right: 85px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition:
        transform 0.5s ease;
}


/* Animate shapes on hover */
.main-index-box-btns-cs .login-btn:hover .shape-one {
    transform: scale(1.15) rotate(15deg);
}

.main-index-box-btns-cs .login-btn:hover .shape-two {
    transform: translate(-10px, 8px) scale(1.1);
}


/* =========================================
   ADMIN EXTRA GLOW
   ========================================= */

.main-index-box-btns-cs .admin-login-btn::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    left: -50px;

    border-radius: 50%;

    background: rgba(96, 165, 250, 0.13);

    filter: blur(15px);
}


/* =========================================
   STAFF EXTRA GLOW
   ========================================= */

.main-index-box-btns-cs .staff-btn::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    left: -50px;

    border-radius: 50%;

    background: rgba(45, 212, 191, 0.13);

    filter: blur(15px);
}






.syscon-entry-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px 20px;
    overflow: hidden;
    /*background:*/
    /*    radial-gradient(circle at 10% 15%, rgba(37, 99, 235, 0.10), transparent 28%),*/
    /*    radial-gradient(circle at 90% 85%, rgba(14, 165, 233, 0.10), transparent 30%),*/
    /*    linear-gradient(135deg, #f7faff 0%, #eef5fc 48%, #f8fbff 100%);*/
}


/* Background Grid */

.syscon-entry-grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px);
    background-size: 45px 45px;
}


/* Decorative Orbs */

.syscon-entry-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.syscon-entry-orb-one {
    width: 320px;
    height: 320px;
    top: -170px;
    left: -120px;
    background: rgba(37, 99, 235, 0.10);
}

.syscon-entry-orb-two {
    width: 390px;
    height: 390px;
    right: -180px;
    bottom: -210px;
    background: rgba(8, 145, 178, 0.10);
}


/* Main Container */

.syscon-entry-container {
    position: relative;
    z-index: 2;
    width: min(1050px, 100%);
}


/* =========================================
   HEADER
========================================= */

.syscon-entry-heading {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}


.syscon-entry-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 7px 13px;
    border: 1px solid rgba(37, 99, 235, 0.13);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.75);
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 5px 18px rgba(15, 49, 98, 0.05);
}


.syscon-entry-eyebrow i {
    font-size: 6px;
    color: #22c55e;
}


.syscon-entry-heading h1 {
    margin: 0;
    color: #142d50;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -1.3px;
}


.syscon-entry-heading h1 strong {
    color: #1755a5;
    font-weight: 700;
}


.syscon-entry-heading p {
    margin: 10px 0 0;
    color: #6b7d94;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================
   DIGITAL CLOCK
========================================= */

.syscon-entry-clock-box {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    min-width: 150px;
    text-align: left;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    /*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width:185px;
}


.syscon-entry-clock-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    color: #2563eb;
    background: #edf4ff;
}


.syscon-entry-clock-icon i {
    font-size: 15px;
}


.syscon-entry-clock-box div {
    display: flex;
    flex-direction: column;
}


.syscon-entry-clock-box strong {
    color: #17375f;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}


.syscon-entry-clock-box small {
    margin-top: 2px;
    color: #8291a5;
    font-size: 10px;
    font-weight: 500;
}


/* =========================================
   MAIN CARD
========================================= */

.syscon-entry-card {
    position: relative;
    padding: 25px 42px 25px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.88);
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.syscon-entry-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9, #14b8a6);
}


.syscon-entry-card-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    top: -190px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    /*background: rgba(37, 99, 235, 0.08);*/
    filter: blur(30px);
    pointer-events: none;
}


/* =========================================
   LOGO
========================================= */

.syscon-entry-brand {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 30px;
}


.syscon-entry-logo-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 72px;
    padding: 10px 22px;
    border: 1px solid #e4ebf4;
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 10px 28px rgba(15, 49, 98, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


.syscon-entry-logo-frame img {
    display: block;
    max-width: 155px;
    max-height: 52px;
    width: auto;
    height: auto;
}


.syscon-entry-brand > span {
    display: block;
    margin-top: 10px;
    color: #8a98aa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


/* =========================================
   LOGIN WIDGETS
========================================= */

.syscon-entry-options {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


.syscon-access-widget {
    position: relative;
    min-height: 150px;
    display: flex;
    align-items: center;
    padding: 27px;
    overflow: hidden;
    border-radius: 18px;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.syscon-access-widget:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-6px);
}


/* Admin */

.syscon-admin-widget {
    color: #ffffff;
    background:
        linear-gradient(135deg, #1d5ca8 0%, #123d78 52%, #0b2d59 100%);
    box-shadow: 0 15px 35px rgba(15, 49, 98, 0.22);
}


.syscon-admin-widget:hover {
    box-shadow: 0 22px 45px rgba(15, 49, 98, 0.30);
}


/* Staff */

.syscon-staff-widget {
    color: #ffffff;
    background:
        linear-gradient(135deg, #078995 0%, #05717c 52%, #045761 100%);
    box-shadow: 0 15px 35px rgba(5, 107, 118, 0.20);
}


.syscon-staff-widget:hover {
    box-shadow: 0 22px 45px rgba(5, 107, 118, 0.28);
}


/* Widget Icon */

.syscon-widget-icon {
    position: relative;
    z-index: 3;
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.15),
        0 8px 22px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s ease;
}


.syscon-widget-icon i {
    color: #ffffff;
    font-size: 25px;
}


.syscon-access-widget:hover .syscon-widget-icon {
    transform: scale(1.08) rotate(-4deg);
}


/* Widget Content */

.syscon-widget-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 1;
    flex-direction: column;
}


.syscon-widget-content small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}


.syscon-widget-content small i {
    font-size: 9px;
}


.syscon-widget-content strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}


.syscon-widget-content em {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 11px;
    font-style: normal;
    line-height: 1.5;
}


/* Arrow */

.syscon-widget-arrow {
    position: relative;
    z-index: 3;
    width: 39px;
    height: 39px;
    min-width: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.syscon-widget-arrow i {
    color: #ffffff;
    font-size: 13px;
}


.syscon-access-widget:hover .syscon-widget-arrow {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.19);
}


/* =========================================
   WIDGET SHAPES
========================================= */

.syscon-widget-shape {
    position: absolute;
    pointer-events: none;
}


.syscon-admin-shape-one {
    width: 230px;
    height: 230px;
    right: -120px;
    bottom: -140px;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.13);
    transition: transform 0.5s ease;
}


.syscon-admin-shape-two {
    width: 90px;
    height: 90px;
    top: -35px;
    right: 90px;
    border: 1px solid rgba(147, 197, 253, 0.15);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    transform: rotate(25deg);
    transition: transform 0.5s ease;
}


.syscon-staff-shape-one {
    width: 230px;
    height: 230px;
    right: -120px;
    bottom: -140px;
    border-radius: 50%;
    background: rgba(45, 212, 191, 0.13);
    transition: transform 0.5s ease;
}


.syscon-staff-shape-two {
    width: 90px;
    height: 90px;
    top: -35px;
    right: 90px;
    border: 1px solid rgba(94, 234, 212, 0.15);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    transform: rotate(25deg);
    transition: transform 0.5s ease;
}


.syscon-access-widget:hover .syscon-admin-shape-one,
.syscon-access-widget:hover .syscon-staff-shape-one {
    transform: scale(1.15);
}


.syscon-access-widget:hover .syscon-admin-shape-two,
.syscon-access-widget:hover .syscon-staff-shape-two {
    transform: rotate(40deg) translate(-8px, 8px);
}


/* =========================================
   ROUTE TRACK
========================================= */

.syscon-route-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 30px auto 20px;
    width: min(420px, 80%);
}


.syscon-route-line {
    height: 1px;
    flex: 1;
    background: repeating-linear-gradient(
        90deg,
        #d3dce8 0,
        #d3dce8 6px,
        transparent 6px,
        transparent 11px
    );
}


.syscon-route-stop {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #94a3b8;
    background: #f1f5f9;
}


.syscon-route-stop i {
    font-size: 9px;
}


.syscon-route-bus {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #ffffff;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 7px 18px rgba(37, 99, 235, 0.22);
}


.syscon-route-bus i {
    font-size: 16px;
}


/* =========================================
   FOOTER
========================================= */

.syscon-entry-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
    color: #94a0b0;
    font-size: 9px;
    font-weight: 600;
}


.syscon-entry-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


.syscon-entry-footer i {
    color: #3b82f6;
    font-size: 10px;
}


.syscon-footer-divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cbd5e1;
}



@media (max-width: 991px) {

    .syscon-entry-clock-box {
        position: relative;
        top: auto;
        right: auto;
        width: fit-content;
        margin: 0 auto 18px;
    }

    .syscon-entry-heading {
        margin-bottom: 25px;
    }

    .syscon-entry-card {
        padding: 32px 25px 22px;
    }

}


@media (max-width: 767px) {

    .syscon-entry-shell {
        padding: 35px 15px;
    }

    .syscon-entry-heading h1 {
        font-size: 29px;
    }

    .syscon-entry-heading p {
        font-size: 12px;
    }

    .syscon-desktop-break {
        display: none;
    }

    .syscon-entry-card {
        padding: 27px 17px 20px;
        border-radius: 20px;
    }

    .syscon-entry-logo-frame {
        min-width: 165px;
        min-height: 65px;
    }

    .syscon-entry-logo-frame img {
        max-width: 135px;
        max-height: 45px;
    }

    .syscon-entry-options {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .syscon-access-widget {
        min-height: 155px;
        padding: 21px 18px;
    }

    .syscon-widget-icon {
        width: 55px;
        height: 55px;
        min-width: 55px;
        margin-right: 13px;
    }

    .syscon-widget-icon i {
        font-size: 21px;
    }

    .syscon-widget-content strong {
        font-size: 16px;
    }

    .syscon-widget-content em {
        font-size: 10px;
    }

    .syscon-widget-arrow {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }

    .syscon-route-track {
        width: 90%;
        margin-top: 24px;
    }

    .syscon-entry-footer {
        flex-direction: column;
        gap: 7px;
    }

    .syscon-footer-divider {
        display: none;
    }

}


@media (max-width: 420px) {

    .syscon-entry-shell {
        padding: 25px 10px;
    }

    .syscon-entry-heading h1 {
        font-size: 26px;
    }

    .syscon-entry-card {
        padding: 24px 13px 18px;
    }

    .syscon-access-widget {
        min-height: 145px;
        padding: 18px 15px;
    }

    .syscon-widget-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .syscon-widget-icon i {
        font-size: 19px;
    }

    .syscon-widget-content strong {
        font-size: 14px;
    }

    .syscon-widget-content em {
        font-size: 9px;
    }

    .syscon-widget-arrow {
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin-left: 7px;
    }

}


.lat-login-box {
    position: relative;
    width: min(460px, 100%);
    margin: 0 auto;
    padding: 38px 36px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 22px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.98),
        rgba(247, 250, 255, 0.96)
    );
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* Top accent */
.lat-login-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(
        90deg,
        #174a88,
        #2563eb,
        #0ea5e9
    );
}

/* Decorative background shape */
.lat-login-box::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    top: -120px;
    right: -90px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    pointer-events: none;
}


/* =========================================
   LOGO
========================================= */

.lat-login-box > img {
    position: relative;
    z-index: 2;
    display: block;
    width: auto;
    width: 170px;
    border: 1px solid #ccc;
    margin: 0 auto 30px;
    border-radius: 16px;
}


/* =========================================
   FORM
========================================= */

.lat-login-box .lg-form {
    position: relative;
    z-index: 2;
}


.lat-login-box .form-login {
    position: relative;
}


/* =========================================
   INPUTS
========================================= */

.lat-login-box .form-control {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #dce4ef;
    border-radius: 11px;
    outline: none;
    color: #263b58;
    background: #ffffff;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 3px 12px rgba(15, 49, 98, 0.035);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.lat-login-box .form-control::placeholder {
    color: #9aa8b9;
    font-size: 12px;
    font-weight: 400;
}


.lat-login-box .form-control:hover {
    border-color: #c5d3e4;
    background: #fcfdff;
}


.lat-login-box .form-control:focus {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.09),
        0 8px 20px rgba(15, 49, 98, 0.06);
    transform: translateY(-1px);
}


/* =========================================
   PASSWORD INPUT
========================================= */

.lat-login-box #yourPassword {
    letter-spacing: 0.3px;
}


/* =========================================
   REMEMBER ME
========================================= */

.lat-login-box .form-check {
    align-items: center;
    margin-top: 2px;
}


.lat-login-box .form-check-input {
    width: 17px;
    height: 17px;
    margin-top: 0;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    cursor: pointer;
    background-color: #ffffff;
    box-shadow: none;
}


.lat-login-box .form-check-input:checked {
    border-color: #2563eb;
    background-color: #2563eb;
}


.lat-login-box .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}


.lat-login-box .form-check-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}


/* =========================================
   LOGIN BUTTON
========================================= */

.lat-login-box .lat-login-btn {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #174a88;
    border-radius: 11px;
    color: #ffffff;
   background: linear-gradient(135deg, #0b399e 0%, #053a7c 55%, #162a47 100%);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(23, 74, 136, 0.22),
        inset 0 1px rgba(255, 255, 255, 0.15);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}


.lat-login-box .lat-login-btn::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 100px;
    top: -35px;
    left: -20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.4s ease;
}


.lat-login-box .lat-login-btn::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -50px;
    bottom: -65px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.4s ease;
}


.lat-login-box .lat-login-btn:hover {
    color: #ffffff;
    border-color: #2563eb;
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow:
        0 15px 30px rgba(23, 74, 136, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.18);
}


.lat-login-box .lat-login-btn:hover::before {
    transform: translateX(15px) scale(1.2);
}


.lat-login-box .lat-login-btn:hover::after {
    transform: translate(-10px, -10px) scale(1.15);
}


.lat-login-box .lat-login-btn:active {
    transform: translateY(0);
}


/* =========================================
   VALIDATION
========================================= */

.lat-login-box .text-danger {
    display: block;
    padding-left: 3px;
    color: #dc3545;
    font-size: 11px;
    font-weight: 500;
}


/* =========================================
   SESSION ALERT
========================================= */

.lat-login-box .alert {
    position: relative;
    margin-bottom: 8px;
    padding: 11px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 9px;
    color: #166534;
    background: #f0fdf4;
    font-size: 12px;
    box-shadow: none;
}


/* =========================================
   FORM SPACING
========================================= */

.lat-login-box .lg-form .col-12 {
    position: relative;
}


.lat-login-box .lg-form > .col-12:not(:last-child) {
    margin-bottom: 2px;
}


/* =========================================
   OPTIONAL INPUT ICON STYLE
   Works if icons are added later
========================================= */

.lat-login-box .form-login.has-icon {
    position: relative;
}


.lat-login-box .form-login.has-icon .form-control {
    padding-left: 45px;
}


.lat-login-box .form-login.has-icon > i {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 3;
    color: #8da0b7;
    font-size: 14px;
    transform: translateY(-50%);
}

.lat-login-box  h2{
    font-size:20px;
    font-weight:600;
    text-align:center;
    margin-bottom:10px;
}































/* Keep the notification permission helper out of modal action areas. */
.chrome-notification-permission {
    max-width: calc(100vw - 40px);
    white-space: normal;
}
body.modal-open .chrome-notification-permission {
    display: none !important;
}