* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}


html,
body {
    height: 100%;
}

ul {
    margin-left: 0;
    list-style: none;
}

.login-page-main-container {
    background-image: url(../images/pattern.png);
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;
}

.form-container {
    width: 100%;
    max-width: 500px;
}

button.btn.submit-login.w-100 {
    background-color: #347551;
}

.round-border {
    border-radius: 8px;
    height: 48px;
}

.login-sign-up-link {
    color: #347551;
}

h2.sign-in-title {
    padding-left: 20px;
    font-size: 36px;
    font-weight: 600;
}

h2.sign-in-title::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 34px;
    background-color: #347551;
    left: 0;
    top: 4px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.eye-icons-show-password {
    position: absolute;
    top: 46px;
    right: 12px;
}

.pattern-img-left {
    position: absolute;
    bottom: 0;
    z-index: -1;
    mix-blend-mode: darken;
}

.logo-conatiner>img.logo {
    max-width: 250px;
}

.custome-color {
    color: #232323;
}

p.login-title {
    font-size: 18px;
    color: #969696;
    margin-bottom: 22px;
}


/* write css for dashboard screen */
.dashboard-wrapper {
    background-color: #F5F5F5;
}

.dashboard-header {
    background: #fff;
    border-radius: 18px;
    padding: 6px 20px;
}


a.text-decoration-none {
    text-decoration: none;
    color: #444750;
}

ul.top-navigation-menu li a {
    padding: 8px 16px;
}

a.active-menu {
    background-color: #327551;
    color: #fff;
    border-radius: 8px;
}

.breadcrumb-item.active {
    color: #E55F00;
}

button.filter-btn {
    background-color: #221E1E;
    padding: 6px 12px;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
}

button.add-new-btn {
    background-color: #347551;
    padding: 10px 30px;
    color: #fff;
    border-radius: 8px;
}

.top-action-button button>img {
    margin-right: 10px;
}

.dashbord-body-container {
    background: #fff;
    padding: 16px;
    border-radius: 16px;
}

.work-order-list-table thead>tr {
    background-color: #E6EEEA;
}

.work-order-list-table thead>tr th {
    font-size: 14px;
    font-weight: 600;
    padding: 13px 10px;
    border-bottom: none;
}

.work-order-list-table tbody>tr td {
    font-size: 13px;
    font-weight: 400;
    color: #2F2F2F;
    padding: 14px 8px;
}

.work-order-list-table tbody>tr td.action-btn-group>button {
    border: 0;
    background-color: transparent;
}

.work-order-list-table thead>tr th:first-child,
.work-order-list-table tbody>tr td:first-child {
    width: 20px;
}

.work-order-list-table tbody>tr td:nth-child(2) span.assigned,
.work-order-list-table tbody>tr td:nth-child(2) span.unassigned,
.work-order-list-table tbody>tr td:nth-child(2) span.unread {
    border-radius: 8px;
    padding: 4px 6px;
    color: #fff;
    width: 100px;
    text-align: center;
    display: inline-block;
}

.work-order-list-table tbody>tr td:nth-child(2) span.assigned {
    background-color: #46946B;
}

.work-order-list-table tbody>tr td:nth-child(2) span.unassigned {
    background-color: #E55F00;
}

.work-order-list-table tbody>tr td:nth-child(2) span.unread {
    background-color: #70C8FF;
}

.table-pagination .button-group button {
    padding: 8px 12px;
    font-size: 14px;
    color: #313131;
    border-radius: 4px;
    border: 1px solid #E9E9E9;
    background-color: transparent;

}

.table-pagination .button-group button.current-page {
    color: #fff;
    background-color: #E55F00;
    font-weight: 600;
}

.show-result-information span,
.dt-info {
    font-size: 14px;
}

.search-bar-box {
    border: 1px solid #D0D5DD;
    padding: 2px 12px;
    max-width: 250px;
    border-radius: 4px;
}

.search-input {
    border: none;
    border-radius: 4px;
}

div.serach-img {
    width: 20px;
}

.select-page select.form-select {
    max-width: 64px;
}

.sub-title {
    color: #667085;
    font-size: 14px;
}

span.total-table-data {
    font-size: 12px;
    font-weight: 600;
    color: #E55F00;
    display: inline-block;
    background-color: #FFD9BE;
    border-radius: 16px;
    padding: 2px 8px;
    margin-left: 6px;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #E55F00;
    border-color: #E55F00;
}

.table>:not(:last-child)>:last-child>* {
    border-color: #dee2e6;
}

.error,
.red {
    color: red;
}

#togglePassword {
    cursor: pointer;
    right: 10px;
    top: 72%;
    transform:
        translateY(-50%);
}

#eyeIcon,
#eyeIconConfirm {
    font-size: 13px;
    color: gray;
}

.success,
.green {
    color: green;
}

/* start css by kajal */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #347551;
}

input:checked+.slider:before {
    transform: translateX(14px);
}

body {
    background-color: #f8f9fa;
    /* Light background for contrast */
}

.modal-content {
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* Soft shadow */
}

.modal-header {
    background-color: #5abb84;
    /* Bootstrap primary color */
    color: white;
    /* White text */
    border-top-left-radius: 10px;
    /* Rounded corners */
    border-top-right-radius: 10px;
    /* Rounded corners */
}

.modal-footer {
    border-top: none;
    /* Remove top border */
}

.form-check-label {
    margin-left: 10px;
    /* Space between checkbox and label */
}

.btn-modal {
    background-color: #193a28;
    color: #fff;
    border-color: #193a28;
}

/* end by kajal */

/* 16/04 */
.SmallFontQuery {
    font-size: 16px;
}

.CstmButtonNone {
    border: 0px;
    background-color: none;
    background: none;
}

.modalList {
    list-style: circle;
}

button.cancel-btn {
    padding: 10px 30px;
    border-radius: 8px;
}

/*  16/04 end */


/* Section Title */
.cstmEnhanceForm .user-info {
    font-size: .1cstmEnhanceForm .5rem;
    color: #333;
    margin-bottom: 15px;
}

/* Input Fields */
.cstmEnhanceForm .input-field-conatiner {
    margin-bottom: 15px;
}

.cstmEnhanceForm .form-label {
    font-weight: 600;
    color: #555;
}

.cstmEnhanceForm .form-control {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    transition: border 0.3s;
}

.cstmEnhanceForm .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Select Dropdown */
.cstmEnhanceForm .form-select {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    transition: border 0.3s;
}

.cstmEnhanceForm .form-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Checkbox Styles */
.cstmEnhanceForm .form-check-label {
    margin-left: 5px;
}

/* Button Styles */
.cstmEnhanceForm .cancel-btn,
.cstmEnhanceForm .add-new-btn {
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s;
}

.cstmEnhanceForm .cancel-btn {
    background-color: #f44336;
    color: white;
    border: none;
}

.cstmEnhanceForm .cancel-btn:hover {
    background-color: #d32f2f;
}

.cstmEnhanceForm .add-new-btn {
    background-color: #198754;
    color: white;
    border: none;
}

.cstmEnhanceForm .add-new-btn:hover {
    background-color: #388e3c;
}

.borderContianer {
    background-color: rgb(250, 250, 250);
    border: 1px solid #ebebeb;
    border-radius: 10px;
    padding: 10px;
}

.cstmEnhanceForm input[type="text"],
.cstmEnhanceForm input[type="email"],
.cstmEnhanceForm input[type="number"],
.cstmEnhanceForm input[type="password"] {
    height: 40px;
}

.cstmEnhanceForm select {
    height: 40px;
}

.borderContianer:hover {
    border: 1px solid #41a871;
    background-color: #3275510a;
}

/* write css for form page 1st april 2025 */
*/ .user-input-field-conatiner {
    background: #fff;
    padding: 16px 8px;
    border-radius: 16px;
}

.input-field-conatiner {
    margin-bottom: 8px;
}

.input-field-conatiner label {
    margin-bottom: 4px;
    font-size: 14px;
    color: #444750;
}

input::placeholder {
    font-size: 14px;
    color: #444750;
}

select.form-select {
    font-size: 14px;
    color: #444750;
    height: 38px;
}

h6.user-info {
    margin-left: 12px;
    width: max-content;
    border-bottom: 2px solid #327551;
    font-size: 18px;
}

/* Write css for work order list */

.work-order-list-main-wrapper {
    background: #fff;
    padding: 16px 16px;
    border-radius: 16px;
}

h6.work-order-info-title {
    font-size: 20px;
    margin-bottom: 16px;
}

.edit-button {
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid #347551;
}

.edit-button img {
    width: 20px;
}

p.info-title {
    margin-bottom: 4px;
    color: #444750;
    font-size: 14px;
    margin-left: 4px;
}

h6.info-data {
    margin-bottom: 0;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
}

.work-order-details {
    /* background: #f5f5f5;
    border-radius: 16px;
    padding: 16px; */
    margin: 16px 0;
}

.information-details {
    /* border-bottom: 1px solid #eee; */
    padding-bottom: 10px;
    min-height: 58px;
}

/* write css for work order details screen 14th april */
.right-section-container-wrapper {
    background: #fff;
    padding: 16px 16px;
    border-radius: 16px;
    height: 100%;
}

h5.access-title {
    color: #3f4554;
}

.link-box a {
    color: #347551;
    font-size: 14px;
}

/* 10th may 2025 */
span#togglePassword.setup-import-password {
    cursor: pointer;
    right: 20px;
    top: 66%;
    transform: translateY(-50%);
}

a.btn.btn-success.import-order-btn {
    border-radius: 8px;
    padding: 10px 14px;
}

/* add new css 15th may */

button img.action-btn-size {
    width: 20px;
    height: 20px;
}

.work-order-list-table tbody>tr td.action-btn-group.button-group>button {
    border-radius: 6px;
    padding: 4px 8px;

}

.work-order-list-table tbody>tr td.action-btn-group.button-group>button.view-table {
    background-color: #e0ede6;
}

.work-order-list-table tbody>tr td.action-btn-group.button-group>button.edit-table {
    background-color: #e1e1ec;
}

.work-order-list-table tbody>tr td.action-btn-group.button-group>button.delete-table {
    background-color: #ffeeee;
}

.work-order-list-table tbody>tr td.action-btn-group.button-group>button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* add new css 19th may */
h6.end-user-title {
    border-top: 1px solid #ced4da;
    margin-top: 31px;
    padding: 16px 0 8px;
}

.right-section-container-wrapper-box {
    background: #fff;
    padding: 16px 16px;
    border-radius: 16px;
}

input[type="text"].field-size {
    max-width: 100px;
}

/* process import css 22 may 2025 */
div.import-work-order-container {
    background-color: #fff;
    padding: 20px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.main-title h2 {
    font-size: 24px;
    color: #444750;
    margin-bottom: 24px;
}

.import-top-header-filter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border-bottom: 1px solid #ced4da; */
}

div.work-order-list {
    border: 1px solid #ced4da;
    border-radius: 12px;
    padding: 20px 6px;
}

.select-filter-top {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.select-filter-top select {
    max-width: 300px;
}

.select-all-conatiner-box {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 3rem;
    width: 100%;
}

button.btn.import-all-btn {
    background-color: #327551;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
}

button.import-all-btn>img {
    max-width: 18px;
}

input[type="checkbox"].select-all {
    width: 20px;
    height: 20px;
}

label.select-all-label {
    line-height: 29px;
    padding-left: 8px;
}

span.work-ordre-number {
    font-size: 18px;
    font-weight: 600;
    padding-left: 8px;
}

.work-order-edit-form-wrapper {
    padding: 20px;
    background: #f7f7f7;
    border-radius: 12px;
}

.secttion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-header-btn button.import-order {

    background-color: #E0EDE6;
    border-radius: 8px;
    font-size: 16px;
    color: #327551;
}

.section-header-btn {
    display: flex;
    gap: 12px;
    align-items: center;
}

.section-header-btn button.cancel-order {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #ffdcdc;
    border-radius: 8px;
    font-size: 16px;
    color: #FF5D5D;
}

.section-header-btn button.cancel-order>img {
    max-width: 18px;
    margin-left: 8px;
}

/* add new css 27th may 2025 */

ul.sub-menu-list {
    margin-top: 16px;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    padding: 0;
    column-gap: 20px;
    border-bottom: 1px solid #327551;
}

li.sub-menu-list-items a.list-menu-link {
    text-decoration: none;
    /* color: #444750; */
    color: #000;
    padding: 6px 12px;
    border-radius: 6px;
}

.page-action-btn {
    display: flex;
    background: #fff;
    padding: 8px;
    gap: 12px;
    border-radius: 12px;
    margin-block: 20px 12px;
}

.page-action-btn button.custom-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #444750;
    border: none;
    padding: 8px 16px;
    background: transparent;
    border-radius: 10px;
}

li.sub-menu-list-items {
    padding: 13px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

li.sub-menu-list-items.active {
    background-color: #e1ede7;
    border-bottom: 4px solid #327551;
}

.page-action-btn button.custom-btn:hover {
    background-color: #deebe4;
}

/* add new css for select2 2nd jun 2025 */
.select-filter-top span.select2-container {
    width: 100%;
    max-width: 350px;
}

.select-filter-top .select2-container .select2-selection--single {
    height: auto !important;
}

.select-filter-top .select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: 5px;
    padding-bottom: 5px;
}

.select-filter-top .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px;
}

.input-field-conatiner .select2-container .select2-selection--single {
    height: auto !important;
}

.input-field-conatiner .select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: 5px;
    padding-bottom: 5px;
}

.input-field-conatiner .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px;
}

span#togglePassword.add-company-password {
    cursor: pointer;
    right: 10px;
    top: 42%;
    transform: translateY(-50%);
}

/* add new css 7th june 2025 */
.password-container-field span#togglePassword.setup-import-password {
    cursor: pointer;
    right: 10px;
    top: 71%;
    transform: translateY(-50%);
}

.viewWoLink {
    text-decoration: none;
    color: #2F2F2F;
}

.viewWoLink:hover {
    color: #2F2F2F;
}

/* auto assign wo by zip page css */
button.add-rule-btn,
button.show-address-form {
    background-color: #E0EDE6;
    border-radius: 8px;
    font-size: 16px;
    color: #327551;
}

p.description-title {
    font-size: 14px;
}

.individual-zip-conatainer {
    border: 1px solid #f5f5f5;
    padding: 16px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}



.zip-codes {
    max-width: 100%;
}

.delete-zip-codes {
    width: 100%;
    max-width: 100px;
}

:where(.show-contarctor, .show-company, .zip-codes) label {
    font-size: 17px;
    font-weight: 500;
    color: #444750;
}

.modal-footer button.modal-save-btn {
    background-color: #347551;
    color: #fff;
    border-radius: 6px;
    padding: 7px 24px;
    font-weight: 400;
    font-size: 15px;
}

/* #address-field {
    display: none;
} */


/* add new css 12th june */
.modal-assign-work-order-form a.add-rule-btn {
    background-color: #E0EDE6;
    border-radius: 8px;
    font-size: 16px;
    color: #327551;
}

p.zip-code-value {
    color: #444750;
    font-size: 14px;
    margin-bottom: 0;
}

.show-contarctor,
.show-company {
    width: 100%;
    max-width: 250px;
    border-right: 1px solid #cfc7c7;
}

p.contarctor-name,
p.company-name {
    font-size: 15px;
    color: #444750;
    margin-bottom: 0;
}

.assign-contractor-color {
    background-color: #9ee3be;
}

/* .show-contarctor, .show-company{
    width: 100%;
    min-width: 250px;
    max-width: 250px;
} */
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid black 1px;
    outline: 0;
    max-height: 69px;
    overflow: auto;
}

/* add new css for filter */

.filter-conatiner-wrapper {
    width: 100%;
    max-width: 1200px;
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    position: relative;
}

.checkbox-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0px;
}

.checkbox-wrapper>.form-check {
    width: 100%;
    max-width: 138px;
}

.filter-conatiner-wrapper .border-right {
    border-right: 1px solid gray;
}

.filter-field-wrapper .form-label {
    margin-bottom: 2px;
    font-size: 13px;
}

.checkbox-wrapper label {
    font-size: 13px;
}

.filter-field-wrapper select.form-select {
    height: auto;
}

.filter-conatiner-wrapper::after {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    background-color: #fff;
    top: -5px;
    left: 10%;
    transform: rotate(45deg);
}

/* add new css 8th july 2025 */
.dropdown-menu.dropdown-menu-end.custmMenuFilter {
    padding-bottom: 0;
    padding-top: 0;
}

.filter-bottom-action-btn {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #e6eeea;
}

.filter-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-action-btn span.fa-check-circle {
    color: #28a745;
}

.filter-action-btn span.fa-times-circle {
    color: #e93939;
}

.filter-action-btn span.fa-refresh {
    color: #7979c8;
}

.categoryCol {
    border-radius: 8px;
    padding: 4px 6px;
    color: #fff;
    width: 100px;
    text-align: center;
    display: inline-block;
}

.job-notes-main-container {
    margin: 0 auto;
    max-width: 600px;
}

.job-notes-header h6 {
    border-bottom: 1px solid #ced4da;
    padding-bottom: 8px;
}

button.add-rule-btn {
    background-color: #E0EDE6;
    border-radius: 8px;
    font-size: 16px;
    color: #327551;
}

.add-file-btn-box {
    border-bottom: 1px solid #ced4da;
    padding-bottom: 8px;
}

.cancel-jobnote {
    background-color: #ffdcdc;
    border-radius: 8px;
    font-size: 16px;
    color: #FF5D5D;
    padding: 10px 24px;
}

.newNoteForm {
    display: none;
}

.bg-theme-color {
    background-color: #e6eeea;
}

.hide {
    display: none;
}

.work-order-notes-list-wrapper {
    background: #fff;
    padding: 16px 16px;
    border-radius: 16px;
    max-width: 1200px;
}

h6.work-order-notes-title {
    font-size: 18px;
}

.msg-container-header {
    background-color: #e1ede7;
    padding: 10px 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.message-conatiner-box {
    padding: 8px 12px;
    background-color: #f5f5f5;
}

.message-conatiner-box p {
    font-size: 14px;
}

.notice-bar-status {
    color: #fff;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 14px;
    line-height: normal;
}

.notice-bar {
    background-color: #e55f0042;
    margin-top: 0px;


}

/* notice bar css */
.notice-bar p {
    padding: 4px 12px;
}

.table-container-wrapper {
    position: relative;
    display: inline-block;
}

.table-container {
    position: absolute;
    /* top: 30px; */
    left: 21px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 5px;
    z-index: 10;
}

#hoverButton {
    cursor: pointer;
    /* Change cursor to hand on hover */
}

.msg-container-header {
    padding: 0;
    width: 100%;
}

.word-order-notes-accordion button {
    border: none;
}

.work-order-notes-accordion button.accordion-button {
    background-color: #e1ede7;
}

.accordion-item.work-order-notes-accordion {
    border: none;
    margin-bottom: 16px;
}

.accordion-item.work-order-notes-accordion .accordion-body {
    padding: 0;

}

.accordion-item.work-order-notes-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: #000;
}

.accordion-item.work-order-notes-accordion .accordion-button {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.photos-container-main-wrapper {
    background: #fff;
    padding: 20px 20px;
    border-radius: 16px;
}

h6.photos-count {
    font-size: 18px;
}

.photos-conatiner-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.image-box {
    width: calc(10% - 9px);
    height: 154px;
    border-radius: 6px;
    position: relative;
}

.image-box>img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    opacity: 1;
}

button.delete-image {
    position: absolute;
    bottom: 8px;
    z-index: 9;
    right: 8px;
    padding: 0;
    cursor: pointer;
    background: #f5f5f5;
    color: #fd3d3d;
    width: 24px;
    height: 24px;
    display: none;
}

button.download-image,
button.zoom-image {
    position: absolute;
    top: 10px;
    z-index: 9;
    padding: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: #f5f5f5;
    display: none;
}

button.download-image {
    left: 8px;
    color: #347551;
}

button.zoom-image {
    left: 40px;
    color: #347551;
}

.tooltips {
    position: absolute;
    bottom: -240px;
    background-color: #e0ede6;
    padding: 8px;
    color: #000;
    z-index: 10;
    width: 240px;
    opacity: 1;
    display: none;
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tooltips::before {
    position: absolute;
    content: "";
    top: -6px;
    left: 32px;
    width: 14px;
    height: 14px;
    background-color: #e0ede6;
    transform: rotate(-45deg);

}

.tooltips p {
    margin-bottom: 0;
}

.tooltips p strong,
.tooltips p span {
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.image-box:hover .tooltips,
.image-box:hover button.download-image,
.image-box:hover button.zoom-image,
.image-box:hover button.delete-image {
    display: block;
}

.image-box:hover>img {
    opacity: 0.6;
}

/* .image-box button.btn.delete-image:hover + .tooltips{
    display: block;
} */
.modal-photos-details {
    display: flex;
    gap: 10px;
}

.modal-photos-details img {
    width: 65%;
    border-radius: 4px;
}

.modal-photos-details .right-content-bx {
    width: calc(35% - 20px);
}

div.right-content-bx .tooltips {
    position: static;
    width: 100%;
    display: block;
    background: transparent;
    box-shadow: none;
}

div.right-content-bx .tooltips:before {
    display: none;
}

#photoDetailsModal .modal-body #close-modal-photo {
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: black;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background-size: 12px;
}

.modal-image-details {
    width: 65%;
    overflow: hidden;
    max-height: 500px;
    position: relative;
    text-align: center;
}

.modal-image-details img {
    max-width: 400px;
    object-fit: contain;
}

/* attachment job note css */
.attachments-section {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attachment-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.attachment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.attachment-card .card-body {
    padding: 15px;
}

.attachment-card .card-title {
    font-size: 16px;
    font-weight: 600;
}

.attachment-card .btn {
    font-size: 12px;
    padding: 5px 15px;
}

/* add new css 28th july */
/* .table-container{
    display: none;
}
#hoverButton:hover + .table-container{
    display: block;
} */

/* add new css 19th august 2025 */
.dashboard-header {
    position: sticky;
    top: 0;
    z-index: 9;
}

.subheader-conatiner {
    position: sticky;
    top: 62px;
    background: #f5f5f5;
    z-index: 6;
}

div.top-page-header-menu {
    position: sticky;
    top: 117px;
    background-color: #f5f5f5;
    z-index: 5;
}

div.page-action-btn {
    position: sticky;
    top: 207px;
    box-shadow: 0px 5px 5px #f5f5f5;
    z-index: 4;
}

.page-action-btn.userActionBtn {
    top: 119px;
}

.nav-link.custom-tab-btn {
    color: #2d724d;
    font-size: 14px;
    border-radius: 8px;
    font-weight: 500;
}

.nav-link.custom-tab-btn.active {
    color: #fff;
    font-size: 14px;
    border-radius: 8px;
    background-color: #2d724d;
    font-weight: 400;
}

.add-new-btn.upload-doc {
    display: flex;
    gap: 4px;
    align-items: center;
    background-color: #d13a14;
    padding: 4px 16px;
    font-size: 14px;
    border-radius: 24px;
}

/* .select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: 5px;
    padding-bottom: 5px;
} */

/* 26-08-2025 new css */
.custmPhotoContain .image-box:nth-child(10) .tooltips,
.custmPhotoContain .image-box:nth-child(20) .tooltips,
.custmPhotoContain .image-box:nth-child(30) .tooltips {
    right: 0;
}

.custmPhotoContain .image-box:nth-child(10) .tooltips::before,
.custmPhotoContain .image-box:nth-child(20) .tooltips::before,
.custmPhotoContain .image-box:nth-child(30) .tooltips::before {
    right: 42px;
    left: unset;
}

.custmAppDoc .photos-conatiner-box .image-box .tooltips {
    bottom: unset;
    top: 100%;
}

.custmSelect .select2-container--default .select2-selection--single {

    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    color: #212529;
    background-color: #fff;
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); */
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    font-size: 14px;
    color: #444750;
    height: 38px;
}

.custmSelect .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 26px;
}

.custmSelect .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
}

.notice-bar .table-container {
    left: 0;
}

/* add new css for document screen */
.image-box a img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.image-box.document-box-wrapper {
    height: auto;
}

.image-box.document-box-wrapper:hover {
    background-color: #f4f4f4;
}

.max-width-150px {
    width: 185px;
}

#work-history-table {
    max-height: 300px;
    overflow: auto;
}

.modal-image-details button {
    display: flex;
    align-items: center;
    position: absolute;
    top: calc(50% - 15px);
    background: transparent;
    border: 1px solid #333;
    border-radius: 2px;
    padding: 4px;
}

button.btn-previews-img {
    left: 30px;
}

button.btn-next-img {
    right: 30px;
}

.modal-image-details button:hover {
    background: #333;
    color: white;
}

.modal-image-details button svg {
    width: 20px;
    height: 20px;
}

/* Permisson CSS */
.permission-header {
    background-color: #cee7d5;
    border: 0;
    padding: 10px 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.permission-header h6.heading-title {
    margin-bottom: 0;
    color: #333;
    font-size: 16px;
}

.permission-sub-category-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.permission-wrapper-main {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
}

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

.padding-vertical {
    padding-top: 8px;
    padding-bottom: 8px;
}

h5.field-title-padding {
    padding-left: 12px;
}

/* add new css 7th oct 2025 */

.image-box {
    width: 154px;
    height: 154px;
    border-radius: 6px 6px 0 0;
    position: relative;
}

.image-box>img {
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 0 0;
    object-fit: cover;
}

.checkbox-for-select-image {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 9;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.download-photos-box {
    position: relative;
    display: inline-block;
}

ul.download-photos-optinos {
    display: none;
    margin-bottom: 0;
    list-style: none;
    position: absolute;
    background: #f5f5f5;
    z-index: 99;
    padding-left: 0;
    border-radius: 6px;
    top: 32px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
    width: 120px;
}

ul.download-photos-optinos::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 42%;
    top: -4px;
    background-color: #f5f5f5;
    transform: rotate(45deg);
}

ul.download-photos-optinos li:first-child {
    border-bottom: 1px solid #cdcdcd;
}

ul.download-photos-optinos li {
    padding: 4px;
}

ul.download-photos-optinos li button {
    font-size: 14px;
    width: 100%;
    padding: 4px 0;
}

ul.download-photos-optinos li button:hover {
    background: #e0ede6;
}

.button-container-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-photos-box:hover ul.download-photos-optinos {
    display: block;
}

.show-time-stamp-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    background: #347551;
    color: #fff;
    border-radius: 0 0 6px 6px;
    padding: 6px 10px;
}

span.stamp-heading {
    font-size: 10px;
    font-weight: 600;
}

span.value {
    font-size: 12px;
}

/* write new css 8th october 2025 */
button.move-button {
    background-color: #347551;
    color: #fff;
    line-height: normal;
    font-size: 12px;
    padding: 4px 6px;
}

.move-copy-photos-section {
    position: relative;
    display: inline-block;
}

.update-move-copy-box {
    display: none;
    margin-bottom: 0;
    list-style: none;
    position: absolute;
    background: #f5f5f5;
    z-index: 99;
    padding-left: 0;
    border-radius: 6px;
    top: 32px;
    width: max-content;
    padding: 4px 8px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
}

.move-copy-photos-section:hover .update-move-copy-box {
    display: block;
}

.file-move-input-contianer input[type="text"] {
    padding: 2px 8px;
}

.file-move-input-contianer label.form-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.file-move-input-contianer::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 12%;
    top: -4px;
    background-color: #f5f5f5;
    transform: rotate(45deg);

}

/* date stamp css */
.date-stamp-button-container {
    position: relative;
    display: inline-block;
}

.date-stamp-info-container {
    display: none;
    margin-bottom: 0;
    list-style: none;
    position: absolute;
    background: #f5f5f5;
    z-index: 99;
    padding-left: 0;
    border-radius: 6px;
    top: 32px;
    width: max-content;
    padding: 4px 8px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
}

.date-stamp-button-container:hover .date-stamp-info-container {
    display: block;
}

.date-stamp-info-container::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 12%;
    top: -4px;
    background-color: #f5f5f5;
    transform: rotate(45deg);
}

.date-stamp-info-container .top-container,
.date-stamp-info-container .bottom-container {
    display: flex;
    align-items: end;
    gap: 12px;
}

.date-stamp-info-container input[type="date"],
.date-stamp-info-container input[type="time"] {
    padding: 2px 8px;
}

.date-stamp-info-container label.form-label,
.date-stamp-info-container label.form-check-label {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}

.date-stamp-info-container label.form-check-label {
    margin-bottom: 0;
}

.date-fields input.form-control {
    font-size: 12px;
}

.date-stamp-info-container .form-check-input[type=checkbox] {
    width: 14px;
    height: 14px;
    margin-top: 0;
}

.form-check-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hideTimeStamp {
    display: none !important;
}

.cancel-edit-auto-work {
    background-color: #ffdcdc;
    border-radius: 8px;
    font-size: 16px;
    color: #FF5D5D;
    padding: 10px 24px;
    border: none;
}

.docnamefile {
    word-break: break-all;
}

.auto-work-page-action {

    top: 129px !important;

}

#documents-container .document-box-wrapper button.delete-image {
    top: 130px;
    bottom: unset;
}

/* invoice css */
.invoice-details-container {
    margin: 16px 0;
}

p.payment-title-text {
    font-style: italic;
}

p.payment-title-text strong {
    font-style: normal;
}

.card-address-container,
.card-info-container {
    background-color: #f5f5f5;
    padding: 10px 0px;
    border-radius: 8px;
    height: 100%;
}

button.btn.autopay-button {
    display: flex;
    font-size: 14px;
    align-items: center;
    gap: 6px;
    background-color: #ea8d2d;
    border-radius: 8px;
    color: #fff;
    margin: 16px auto 0;
}

#credit-card-info {
    display: block;
}

#ach-info {
    display: none;
}

h6.payment-mode-title {
    margin-bottom: 14px;
}

.table-column-filter-container {
    background-color: #fff;
    width: 100%;
    max-width: 500px;
    margin: 20px 0;
    border-radius: 12px;
    padding: 16px;
}

.active-column-list ul,
.inactive-column-list ul {
    padding-left: 0;
    height: 100%;
    max-height: 400px;
    overflow: auto;
    margin-bottom: 0;
}

.active-column-list ul li,
.inactive-column-list ul li {
    padding: 6px 8px;
    font-size: 14px;
    background: #dfefe6;
    margin-bottom: 4px;
    border-radius: 6px;
    text-align: center;
}

.drag-checkbox {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 6px 0;
}

.drag-checkbox .form-check label {
    font-size: 14px;
    font-weight: 500;
}

h6.column-title {
    padding-left: 8px;
    padding-bottom: 4px;
}

.column-bottom-button button {
    font-size: 12px;
    border-radius: 8px;
    line-height: normal;
    padding: 3px 12px;
    font-weight: 500;
    color: #000;
}

.column-bottom-button button img {
    width: 18px;
}

.column-bottom-button button.save {
    background-color: #e0ede6;

}

.column-bottom-button button.cancel {
    background-color: #ffeeee;
    ;

}

.column-bottom-button button.reset {
    background-color: #e1e1ec;

}

.column-bottom-button {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
}

button.columns {
    background-color: #000;
    padding: 10px 30px;
    color: #fff;
    border-radius: 8px;
}

.table-column-filter-container {
    display: none;
}

.table-column-filter-container.show {
    display: block;
}


/* write css for Bulk Update filter */
.bulk-update-container {
    display: none;
}

.bulk-update-container.show {
    display: block;
}

.bulk-update-fields-wrapper label.label-custom {
    font-size: 14px;
    margin-bottom: 4px;
}

.bulk-conatiner-wrapper {
    width: 100%;
    max-width: 1200px;
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    position: relative;
}


.bulk-update-container select.form-select {
    height: unset;
}

button.goup-update {
    background-color: #347551;
    padding: 6px 12px;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
}

.top-action-button .goup-update>img {
    width: 20px;
    margin-right: 4px;
}

button.columns {
    background-color: #000;
    padding: 6px 12px;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
}

.top-action-button .columns>img {
    width: 20px;
    margin-right: 4px;
}

.invoice-details-container {
    margin: 16px 0;
}

p.payment-title-text {
    font-style: italic;
}

p.payment-title-text strong {
    font-style: normal;
}

.card-address-container,
.card-info-container {
    background-color: #f5f5f5;
    padding: 10px 0px;
    border-radius: 8px;
    height: 100%;
}

button.btn.autopay-button {
    display: flex;
    font-size: 14px;
    align-items: center;
    gap: 6px;
    background-color: #ea8d2d;
    border-radius: 8px;
    color: #fff;
    margin: 16px auto 0;
}

#credit-card-info {
    display: block;
}

#ach-info {
    display: none;
}

h6.payment-mode-title {
    margin-bottom: 14px;
}

/* Custom styles to match the image colors and layout */
.navbar-custom {
    background-color: #1d426e;
    /* Dark Blue Header */
    color: white;
    padding: 0;
}

.navbar-custom .nav-link,
.navbar-custom .navbar-brand {
    color: #ffffff !important;
    padding: 1rem 1rem;
}

.navbar-custom .nav-link:hover {
    background-color: #2b568d;
}

.sub-nav {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-link {
    color: #495057;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}



.paid-status {
    color: #198754;
    /* Green */
    font-weight: bold;
}

.text-header {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.text-paid {
    color: #28a745;
    font-weight: 600;
}

.invoice-card {
    background-color: white;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}

.payment-section {
    background-color: white;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}

.payment-form-box {
    background-color: #f7f7f7;
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}

.form-label-sm {
    font-size: 0.85rem;
    margin-bottom: 2px;
}

/* write css for contractor bid screen */
table.bid-details-table thead tr th:first-child {
    width: 32px;
    max-width: 32px;
}

table.bid-details-table.completion-table thead tr th:first-child {
    width: 120px;
    max-width: 120px;
}


table.bid-details-table thead tr th:nth-last-child(6) {
    width: 250px;
    max-width: 250px;
}

table.bid-details-table thead tr th:nth-child(2) {
    width: 300px;
    max-width: 300px
}

table.bid-details-table.completion-table thead tr th:nth-child(2) {
    width: 300px;
    max-width: 300px
}

table.bid-details-table thead tr th:nth-child(3) {
    width: 120px;
    max-width: 120px
}

table.bid-details-table.completion-table thead tr th:nth-child(4),
table.bid-details-table.completion-table thead tr th:nth-child(5),
table.bid-details-table.completion-table thead tr th:nth-child(7),
table.bid-details-table.completion-table thead tr th:nth-child(8) {
    width: 120px;
    max-width: 120px
}

table.bid-details-table.completion-table thead tr th:nth-child(9) {
    width: 120px;
    max-width: 120px
}

table.bid-details-table thead tr:first-child th {
    padding: 8px 8px;
    font-weight: 700;
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

table.bid-details-table thead tr:first-child th:nth-child(2),
table.bid-details-table thead tr:first-child th:last-child {
    background-color: #8cb9a14a;
}

table.bid-details-table.completion-table thead tr:first-child th:nth-child(2) {
    background-color: #fff;
}

table.bid-details-table.completion-table thead tr:first-child th:nth-child(3),
table.bid-details-table.completion-table thead tr:first-child th:last-child,
table.bid-details-table.completion-table thead tr:first-child th:first-child {
    background-color: #8cb9a14a;
}

table.bid-details-table thead tr:last-child th {
    font-size: 16px;
    font-weight: 600;
}

table.bid-details-table thead tr:last-child th:nth-child(3),
table.bid-details-table thead tr:last-child th:nth-child(4),
table.bid-details-table thead tr:last-child th:nth-child(5),
table.bid-details-table thead tr:last-child th:nth-last-child(1),
table.bid-details-table thead tr:last-child th:nth-last-child(2),
table.bid-details-table thead tr:last-child th:nth-last-child(6) {
    background-color: #d9dddb4a;

}

table.bid-details-table tbody tr td:nth-child(3),
table.bid-details-table tbody tr td:nth-child(4),
table.bid-details-table tbody tr td:nth-child(5),
table.bid-details-table tbody tr td:nth-child(6),
table.bid-details-table tbody tr td:nth-last-child(1),
table.bid-details-table tbody tr td:nth-last-child(2) {
    background-color: #d9dddb4a;

}

table.bid-details-table thead tr:last-child th:last-child {
    width: 50px;
    max-width: 50px;
}

table.bid-details-table.completion-table thead tr:last-child th:last-child {
    width: auto;
    max-width: auto;
}

.bid-top-header-btngroup {
    display: flex;
    justify-content: end;
    gap: 6px;
    padding: 16px 0;
}

.bid-top-header-btngroup button {
    padding: 5px 0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    width: 84px;
    text-align: center;
}

.bid-top-header-btngroup button.saveNote {
    background-color: #347551;
    color: #fff;
}

.bid-top-header-btngroup button.cancel-jobnote {
    background-color: #e3e9e6;
    color: #5e5a5a;
}

h5.biddingitem-title {
    color: #e04040;
    margin: 0;
    font-size: 16px;
    padding: 4px 0;
}

.other-inputfield>button {
    right: 9px;
    top: 7px;
    padding: 0;

}

.other-inputfield>button>i {
    font-size: 14px;
}

.logged-user {
    display: inline-block;
    padding: 0 7px;
    font-weight: 500;
}

/* Base button style similar to Bootstrap's btn-success */
.custom-btn-success {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    background-color: #28a745;
    /* Success color */
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.2s ease;
    text-decoration: none;
    /* Remove text decoration */
}

.custom-btn-success:hover {
    background-color: #218838;
    /* Darker green when hovered */
    border-color: #1e7e34;
    /* Darker border color */
    color: #fff;
}

.custom-btn-success:active {
    background-color: #1e7e34;
    /* Even darker on active */
    border-color: #1c7430;
    /* Darker border on click */
}

.custom-btn-success:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
    /* Green shadow */
}

/* For small buttons - btn-xs */
.custom-btn-success.btn-xs {
    padding: 0.25rem 0.5rem;
    /* Smaller padding for the xs size */
    font-size: 0.75rem;
    /* Smaller font size */
    line-height: 1.25;
    /* Smaller line height */
}

/* Base button style similar to Bootstrap's btn-danger */
.custom-btn-danger {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    background-color: #dc3545;
    /* Danger color */
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.2s ease;
    text-decoration: none;
    /* Remove text decoration */
}

/* For small buttons - btn-xs */
.custom-btn-danger.btn-xs {
    padding: 0.25rem 0.5rem;
    /* Smaller padding for the xs size */
    font-size: 0.75rem;
    /* Smaller font size */
    line-height: 1.25;
    /* Smaller line height */
}

/* Hover effect */
.custom-btn-danger:hover {
    background-color: #c82333;
    /* Darker red when hovered */
    border-color: #bd2130;
    /* Darker border color */
    color: #fff;
}

/* Active effect */
.custom-btn-danger:active {
    background-color: #b21f2d;
    /* Even darker on active */
    border-color: #9f1b28;
    /* Darker border on click */
}

/* Focus effect */
.custom-btn-danger:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
    /* Red shadow */
}

/* Base button style similar to Bootstrap's btn-secondary */
.custom-btn-secondary {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    /* Secondary color */
    background-color: #6c757d;
    /* Secondary color */
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.2s ease;
    text-decoration: none;
    /* Remove text decoration */
}

/* For small buttons - btn-xs */
.custom-btn-secondary.btn-xs {
    padding: 0.25rem 0.5rem;
    /* Smaller padding for the xs size */
    font-size: 0.75rem;
    /* Smaller font size */
    line-height: 1.25;
    /* Smaller line height */
}

/* Hover effect */
.custom-btn-secondary:hover {
    background-color: #5a6268;
    /* Darker grey when hovered */
    border-color: #545b62;
    /* Darker border color */
    color: #fff;
}

/* Active effect */
.custom-btn-secondary:active {
    background-color: #4e555b;
    /* Even darker on active */
    border-color: #494f54;
    /* Darker border on click */
}

/* Focus effect */
.custom-btn-secondary:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    /* Grey shadow */
}

/* write new css 28th nov 2025 */

table tr td span.categoryCol {
    border-radius: 8px;
    padding: 4px 6px;
    color: #fff;
    width: 100px;
    text-align: center;
    display: inline-block;
    background-color: #f6b000;
}

.heading_wrapper h2 {
    font-size: 20px;
    margin: 14px 0;
}

/* table tr td span.approved{
    background-color: #46946B;
}
  table tr td span.pending{
    background-color: #f6b000;
}
  table tr td span.reject{
    background-color: #c1c1c1;
} */

/* button{
    width: auto;
    font-weight: 500;
    padding: 4px 12px;
}
button.reject{
    background-color: #d73839;
}
button.approved{
  background-color: #1b6f43;
} */

.bid-completion-note-container {
    background: #fff;
    padding: 16px 16px;
    border-radius: 16px;
}

.bid-tab-title {
    font-size: 18px;
}

table.past-bid-table thead tr th {
    background-color: #347551;
    font-size: 14px;
    text-align: left;
    color: #fff;
}

td table.past-bid-innertable tr:nth-child(odd) td {
    background-color: #a5a5a51f;
}

td table.past-bid-innertable thead {
    background-color: #cee7d5;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

td table.past-bid-innertable tr td {
    font-size: 14px;
    font-weight: 400;

}

table.past-bid-table thead tr th:first-child,
td table.past-bid-innertable tr td:first-child {
    width: 50px;
    max-width: 50px;
}

table.past-bid-table thead tr th:nth-child(2),
td table.past-bid-innertable tr td:nth-child(2) {
    width: 250px;
    max-width: 250px;
}

table.past-bid-table thead tr th:nth-child(3),
table.past-bid-table thead tr th:nth-child(6),
table.past-bid-table thead tr th:nth-child(7),
td table.past-bid-innertable tr td:nth-child(3),
td table.past-bid-innertable tr td:nth-child(6),
td table.past-bid-innertable tr td:nth-child(7) {
    width: 140px;
    max-width: 140px;
}

table.past-bid-table thead tr th:nth-child(4),
table.past-bid-table thead tr th:nth-child(5),
td table.past-bid-innertable tr td:nth-child(4),
td table.past-bid-innertable tr td:nth-child(5) {
    width: 200px;
    max-width: 200px;
}

h6.bid-completion-header {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
}

.bid-completion-header-section {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 16px;
}

ul.bid-button-list {
    display: flex;
    gap: 8px;
}

button.show-bid-btn {
    font-size: 14px;
    font-weight: 500;
    border: none;
    background: #dae1dc;
    line-height: normal;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}

button.show-bid-btn:hover,
button.show-bid-btn.active {
    background: #cee7d5;
}

.loader {
    width: 30px;
    height: 30px;
    border: 4px solid #f3f3f3;
    /* Light gray */
    border-top: 4px solid #3498db;
    /* Blue */
    border-radius: 50%;
    animation: spin 2s linear infinite;
    margin-left: 10px;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* new cssn 24th  feb 2026 */

.login-field-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.logo-conatiner {
    padding-top: 16px;
}

.header-navigation ul {
    gap: 12px;
}

div.dt-layout-table {
    width: 100%;
    overflow: auto;
}

/* admin dashboard header section csss */
.navbar-wrapper-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* suggestion box css */
#suggestion-box {
    background: white;
    border: 1px solid #ddd;
    border-top: none;
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.suggestion-item:hover {
    background-color: #f8f9fa;
}

.no-exist {
    color: #dc3545;
    padding: 10px;
    font-weight: bold;
}

/* Base badge style */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

/* Success Badge (Green) */
.badge-success {
    color: #fff;
    background-color: #28a745;
}

/* Danger Badge (Red) */
.badge-danger {
    color: #fff;
    background-color: #dc3545;
}

/* Warning/Charge Back Badge (Orange - Optional) */
.badge-warning {
    color: #212529;
    background-color: #ffc107;
}

/* Rounded Pill Style */
.badge-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 10rem;
}

th span.dt-column-title {
    white-space: nowrap;
}

table thead th:last-child {
    min-width: 100px;
}

/* .work-order-list-table thead tr th:first-child {
    min-width: 200px;
} */

.file-preview-container a {
    width: 80px;
    height: 80px;
}

.file-preview-container a img.preview-uploaded-images {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 8px;
}

.file-preview-container {
    border: 1px solid #ced4da;
    padding: 8px;
    border-radius: 8px;
}

p.card-title.file-name {
    font-size: 13px;
    font-weight: 500;
}

.invoice-field-wrapper input[type="text"].form-control {
    width: 100%;
    max-width: 100%;
}

/* invoice page css */
.filter-sidebar {
    background: #ffffff;
    padding: 24px;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.02);
    border-radius: 16px;
}

.section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    font-weight: 700;
    margin: 0px 0 15px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 5px;
}

.section-title i {
    margin-right: 8px;
}

.filter-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
}

.form-label {
    font-weight: 500;
    color: #334155;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.invoice-field-wrapper {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px;
    transition: all 0.2s;
}

.form-control,
.form-select {
    font-size: 0.85rem;
    border-radius: 6px;
}

/* .form-control{
        border: none;
        background: transparent;
        font-size: 0.85rem;
        color: #1e293b;
    }

    .form-control:focus {
        box-shadow: none;
        background: transparent;
    } */
.range-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #94a3b8;
    padding: 0 5px;
}

.btn-apply {
    background: #3b82f6;
    color: white;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    margin-top: 20px;
}

.range-to {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    padding: 0 5px;
}

/* --- New Modified UI CSS --- */

/* Radio Toggle Buttons for Group By */
.group-by-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.group-btn {
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 5px 12px;
    border: 1px solid #cbd5e1;
    color: #64748b;
}

.btn-check:checked+.group-btn {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

/* Extra Columns Grid Layout */
.column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two columns */
    row-gap: 4px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
}

.column-item {
    /* background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px; */
    padding: 6px 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.column-item>label.form-label {
    margin-bottom: 0;
    font-weight: 400;
}

.column-item:hover {
    background: #f8fafc;
    border-color: #3b82f6;
}

.column-item .form-check-input {
    margin: 0;
    cursor: pointer;
}

.column-item .form-check-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    margin-left: 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fix for aligned dropdowns in Financial Status */
.dropdown-group-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dropdown-group-inline .form-label {
    margin: 0;
}

.dropdown-group-inline .form-select {
    width: 50%;
}

.report-action-btn-container button {
    min-width: 100px;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 16px;
}

.report-action-btn-container button.close-button {
    border: 1px solid #e83939;
    color: #e83939;

}

.report-action-btn-container button.reset-button {
    border: 1px solid #fa9a0e;
    color: #fa9a0e;
}

.report-action-btn-container button.reset-button span.fa-refresh {
    color: #fa9a0e;
}

.report-action-btn-container button.filter-report {
    background-color: transparent;
    border: 1px solid #6B7280;
    color: #6B7280;
}

.report-action-btn-container button.export-file {
    color: #fff;
    background-color: #347551;
    border: 1px solid #347551;
}

.table-tab-filter>button.btn {
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 8px;
    border: 1px solid #c5eed8;
}

.table-tab-filter>button.btn.active {
    background: #c5eed8;
}

.show-table-summary-title h6>span {
    font-size: 18px;
    color: #347551;
    font-weight: 600;
}

span.total-records-title>span {
    font-size: 16px;
    color: #347551;
    font-weight: 600;

}

table tr th input[type="checkbox"].table-cstm-checkbox,
table tr td input[type="checkbox"].table-cstm-checkbox {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin-right: 3px;
}

/* dashborad css */
.admin-summary-dashboard {
    padding: 24px;
    background: linear-gradient(225deg, #1B5E35 14.64%, #347551 85.36%);
}

p.admin-greeting-title {
    color: #A7F3D0;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

h3.admin-header-title {
    color: #FFF;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
}

h4.header-info {
    color: #FFF;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
}

p.hedaer-info-title {
    color: #A7F3D0;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
}

.header-summary {
    padding: 0 20px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.card-summary-info .show-status {
    color: #6B7280;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;

}

.card-summary-info .show-data {
    color: #111827;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;

}

.card-summary-info .work-type {
    color: #9CA3AF;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.summary-card-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 24px 0px;
}

.card-summary {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-summary.pending-card {
    border-left: 5px solid #F59E0B;
}

.card-summary.progress-card {
    border-left: 5px solid #2563EB;
}

.card-summary.viewed-card {
    border-left: 5px solid #347551;
}

.card-summary.completed-card {
    border-left: 5px solid #7C3AED;
}

.card-summary.overdue-card {
    border-left: 5px solid #EF4444;
}

.progress-custom {
    width: 80px;
    height: 6px;
}

span.avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 12px;
}

.contractor-list-container,
.client-overview-container {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
}

.contractor-list-container>div,
.client-overview-container>div {
    width: 100%;
}

.contractor-list-info-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F9FAFB;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #F3F4F6;
}

h6.contactor-name {
    color: #111827;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

span.assigned-task {
    color: #9CA3AF;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.contractor-list-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contractor-heading-title h5 {
    color: #111827;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.contractor-heading-title a {
    color: #347551;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
}

span.badge-status {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

span.badge-status.review {
    background-color: #fef3c7;
    color: #92400e;
}

span.badge-status.active {
    background-color: #D1FAE5;
    color: #059669;
}

span.badge-status.new {
    background-color: #EDE9FE;
    color: #7C3AED;
}

.client-list-container {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}

.client-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clients-overview {
    border: 1px solid #F3F4F6;
}

button.add-clients-btn {
    color: #FFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    border-radius: 8px;
    background: #347551;
    display: flex;
    padding: 7px 14px;
    align-items: center;
    gap: 6px;
}

.client-overview-header h6 {
    color: #111827;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.client-overview-header p {
    color: #9CA3AF;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
}

.donut-chart-container,
.line-charts-container-box,
.bar-charts-container-box {
    padding: 20px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
    height: 100%;
}

h5.graph-title {
    color: #111827;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.charts-container-box {
    margin-bottom: 24px;
}

.area-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.title-area h5 {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.title-area p {
    margin: 0;
    color: #9CA3AF;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
}

/* Time Filter Buttons */
.time-filter {
    background: #f3f4f6;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    gap: 4px;
}

.data-filter-btn {
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}

.data-filter-btn.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* table group invoice  */
 table.group-invoice thead tr th {
        white-space: nowrap;

    }

    /* table.group-invoice>tbody>tr:nth-child(odd)>td>table>tbody>tr>td.internal-header {
        background: linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%);
        border-bottom: 1px solid #C7D2FE;
        color: #3730A3;
        font-size: 14px;
        font-weight: 600;
    } */
     table.group-invoice>tbody>tr.group-header-row.even>td > .table-header-title{
        background: linear-gradient(180deg, #EEF2FF 0%, #E0E7FF 100%);
        border-bottom: 1px solid #C7D2FE;
        color: #3730A3;
        font-size: 14px;
        font-weight: 600;
    }

   table.group-invoice>tbody>tr.group-header-row.odd>td > .table-header-title {
        border-bottom: 1px solid #FED7AA;
        background: linear-gradient(180deg, #FFF7ED 0%, #FFEDD5 100%);
        color: #9A3412;
        font-size: 14px;
        font-weight: 600;
    }
     table.group-invoice>tbody>tr.group-header-row.odd>td span.show-total-invoice {
        border: 1px solid #FED7AA;
        background: #FFEDD5;

    }

    table.group-invoice>tbody>tr.group-header-row.odd>td  span.total-invoice-amount {
        color: #fff;
        background: #EA580C;
        border: 1px solid #EA580C;


    }
    


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

    .table-header-title .invoice-section-right {
        display: flex;
        align-items: center;
        gap: 16px;
        position: sticky;
        right: 8px;
    }

   

    span.show-total-invoice {
        background: #E0E7FF;
        border-radius: 20px;
        border: 1px solid #C7D2FE;
        padding: 5px 14px;
    }

    span.total-invoice-amount {
        background: #3730A3;
        border-radius: 20px;
        border: 1px solid #3730A3;
        padding: 5px 14px;
        color: #fff;
    }

    .table-header-title span.show-client-name {
        position: sticky;
        left: 8px;
    }


    /* table filter section */

            .custom-checkbox {
           display: flex;
            align-items: center;
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            background-color: #f8f9fa; 
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

        /* Hide default checkbox */
        .custom-checkbox input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Custom checkbox appearance */
        .checkmark {
            position: relative;
            height: 16px;
            width: 16px;
            background-color: #fff;
            border: 2px solid #dee2e6;
            border-radius: 4px; /* Border radius for modern UI */
            transition: all 0.2s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* Hover state */
        .custom-checkbox:hover input ~ .checkmark {
            border-color: #adb5bd;
            background-color: #f8f9fa;
        }

        /* Focus state for accessibility */
        .custom-checkbox input:focus ~ .checkmark {
            box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
            border-color: #198754;
        }

        /* Checked state - Green background */
        .custom-checkbox input:checked ~ .checkmark {
            background-color: #198754; /* Bootstrap success green */
            border-color: #198754;
        }

        /* Check icon (using Bootstrap Icon font) */
        .checkmark::after {
            content: '\2714'; /* Bootstrap Icons checkmark */
            color: transparent;
            font-size: 10px;
            font-weight: bold;
            transition: all 0.2s ease-in-out;
            transform: scale(0);
        }

        /* Show white checkmark when checked */
        .custom-checkbox input:checked ~ .checkmark::after {
            color: #fff;
            transform: scale(1);
        }

        /* Label styling */
        .checkbox-label {
            margin-left: 10px;
            font-size: 12px;
            color: #212529;
            font-weight: 500;
        }


.custom-checkbox:hover {
    border-color: #adb5bd;
}
.column-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

.column-header h3 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #28a745;
    margin-bottom: 0;
}

.column-header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #28a745;
    margin-right: 8px;
}
.table-filter-container .checkbox-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.table-filter-container {
    background: #f8fafc;
    border-radius: 10px;
       padding: 4px 15px 15px;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
}
#reportTable tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
table.contractor-payment thead tr th, table.client-payment-received thead tr th,
table.contractor-payment tfoot tr td{
    white-space: nowrap;
}
.filter-bottom-action-btn{
    display: flex;
    align-items: center;
    gap: 12px;
}

/* add new css 10th june 2026 */

.select-hours label, .enter-minutes-works label{
    font-size: 12px;
    font-weight: 600;
}
.select-hours select.form-select{
    height: 25px;
    padding-top: 0;
    padding-bottom: 0;
}

.select-hours, .enter-minutes-works{
    display: flex;
    align-items: center;
    gap: 6px;
}
.enter-minutes-works input[type="text"]{
    width:48px;
}