* {
    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;
}

.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: 51px;
    right: 11px;
}

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

.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: 10px 16px;
}

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

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

button.filter-btn {
    background-color: #221E1E;
    padding: 10px 30px;
    color: #fff;
    border-radius: 8px;
}

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: 16px;
    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: 5;
}

div.top-page-header-menu {
    position: sticky;
    top: 123px;
    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:120px;
    bottom:unset;
}