.invalid-feedback,
.invalid-feedback:hover {
    padding-left: 20px !important;
    font-size: 12px !important;
    color: #dc3545 !important
}

.error,
.invalid-feedback,
.invalid-feedback:hover {
    color: #dc3545 !important
}

#allJobDataTable+.dataTables_wrapper .child,
#quickSearchResults,
tr.child td.child {
    padding: 0 !important
}

html {
    scroll-behavior: smooth
}

.invalid-feedback:hover {
    font-weight: unset !important
}

.filename,
.remove-pill,
.site_table .badge {
    font-size: 14px
}

.is-invalid {
    border: 1px solid #dc3545 !important
}

select.is-invalid+.select2-container {
    border: 1px solid #dc3545 !important;
    border-radius: 8px
}

select.is-invalid+.select2-container span.select2-selection.select2-selection--single {
    border: none !important
}

.mr-1,
.mr-2 {
    margin-right: 1rem !important
}

.mr-3 {
    margin-right: 1.5rem !important
}

.bootstrap-tagsinput {
    width: 100%;
    padding: .45rem .9rem;
    line-height: 1.5
}

.bootstrap-tagsinput .tag {
    text-transform: uppercase;
    background-color: #727cf5;
    border-radius: 3px;
    padding-left: 5px;
    padding-right: 5px
}

.bootstrap-tagsinput .tag [data-role=remove] {
    border-left: 1px solid;
    padding-left: 3px
}

.hide {
    display: none
}

.component-card-box,
.show {
    display: block
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0 !important;
    z-index: 55
}

.component-card-link .card {
    transition: background-color .3s, box-shadow .3s
}

.component-card-link:hover .card {
    background-color: #f8f9fa;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2)
}

.icon-green {
    color: #74a368
}

.lb-dataContainer {
    position: absolute !important;
    top: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important
}

.img-thumbnail.selected,
.imgBoxfix .image-card.selected {
    box-shadow: 0 0 6px 2px #78a469
}

.searchable-dropdown-btn:active,
.searchable-dropdown-btn:focus,
.searchable-dropdown-search:focus {
    border-color: #75a469;
    box-shadow: 0 0 0 .2rem rgba(117, 164, 105, .25)
}

.image-card {
    height: 100%;
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer
}

.img-thumbnail {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain
}

.media-library-btn {
    padding: 11px 12px !important
}

.image-box {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    background: #f2f2f2
}

.image-item {
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: 5px
}

.image-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px
}

.filename {
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 100%;
    max-width: 400px;
    text-align: start
}

.drawing-area.drawing-mode,
.drawing-mode {
    cursor: crosshair !important
}

.autofill_roof.success,
.autofill_status.success,
.sidebar_active {
    color: #75a469 !important;
    transition: color .3s
}

.autofill_roof.pending,
.autofill_status.error {
    color: #fbac45 !important;
    transition: color .3s
}

.address-container {
    line-height: 1.4;
    max-width: 100px
}

.address-container .address-full,
.address-container .address-short {
    word-wrap: break-word;
    word-break: break-word;
    display: inline
}

.read-less-btn,
.read-more-btn {
    text-decoration: none;
    font-weight: 500;
    transition: .3s
}

.read-less-btn:hover,
.read-more-btn:hover {
    text-decoration: underline;
    color: #0056b3 !important
}

.read-less-btn i,
.read-more-btn i {
    font-size: 10px;
    margin-right: 2px
}

#allPropertiesDataTable td,
#propertyDataTable td,
#restorePropertiesDataTable td {
    vertical-align: middle
}

#allPropertiesDataTable td:first-child,
#propertyDataTable td:first-child,
#restorePropertiesDataTable td:first-child {
    text-align: center;
    white-space: nowrap
}

@media (max-width:768px) {
    .address-container {
        max-width: 200px
    }
}

@media (max-width:576px) {
    .address-container {
        max-width: 150px
    }
}

#icon-preview svg {
    width: 100px;
    height: 100px
}

#iconsGallery .image-card.selected,
#iconsGallery .image-card:hover {
    border: 1px solid #eaeaea;
    border-radius: 6px
}

.searchable-dropdown-btn {
    width: 100%;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem
}

.searchable-dropdown-btn:active,
.searchable-dropdown-btn:focus {
    background-color: #fff
}

.searchable-dropdown-menu {
    width: 100%;
    padding: 0;
    max-height: 200px;
    overflow-y: auto
}

.searchable-dropdown-menu li {
    padding: 0 6px 3px
}

.searchable-dropdown-menu li:first-child {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding: 6px
}

.searchable-dropdown-option {
    cursor: pointer;
    color: #000;
    border-radius: 10px
}

.searchable-dropdown-option:hover {
    background-color: #75a469;
    color: #fff
}

.dropdown-toggle::after {
    position: absolute;
    right: 10px;
    top: 15px;
    border-top: 7px solid;
    border-right: 7px solid transparent;
    border-bottom: 0;
    border-left: 7px solid transparent
}

#reportParams .dropdown-pill,
.searchable-dropdown .dropdown-pill {
    background: #75a469;
    color: #fff;
    border-radius: 20px;
    padding: 10px 17px;
    position: relative;
    display: inline-block
}

.selected-dropdown-options {
    position: static;
    padding-top: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.selected-dropdown-options span {
    margin-right: 0;
    position: relative;
    display: inline-block;
    margin-bottom: 0
}

#reportParams span {
    margin-right: 6px;
    position: relative;
    display: inline-block;
    margin-bottom: 5px
}

.remove-pill {
    background: #ed4a4a;
    color: #fff;
    border-radius: 14px;
    font-weight: 700;
    padding: 0 6px;
    border: none;
    position: absolute;
    top: -5px;
    display: inline-block;
    right: 2px
}

.icon-toggle {
    position: relative;
    display: inline-flex;
    background: #e5e5e5;
    border-radius: 20px;
    padding: 0
}

.toggle-btn {
    width: 46px;
    height: 46px;
    border: none;
    background: 0 0;
    color: #6c757d;
    z-index: 2;
    font-size: 26px
}

.toggle-btn.active {
    color: #fff
}

.toggle-indicator {
    position: absolute;
    width: 46px;
    height: 46px;
    background: #75a469;
    border-radius: 16px;
    transition: transform .25s
}

.dataset-strip {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px
}

.dataset-chip {
    --dataset-color: #75a469;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--dataset-color);
    border-radius: 999px;
    padding: 3px 10px;
    background: rgba(117, 164, 105, .08);
    color: #2f3f2d;
    cursor: pointer;
    user-select: none;
    transition: opacity .15s
}

.dataset-chip.inactive {
    opacity: 1
}

.dataset-chip.inactive .dataset-chip-dot,
.dataset-chip.inactive .dataset-chip-label {
    opacity: .5
}

.dataset-chip-label {
    font-size: 12px;
    font-weight: 600;
    margin-right: 1px;
    color: #000;
    opacity: 1
}

.dataset-chip-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dataset-color);
    border: 1px solid #2f3f2d;
    display: inline-block
}

.dataset-chip-remove {
    width: 18px;
    height: 18px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: 0 0;
    color: #8d8d8d
}

.dataset-chip-remove i {
    font-size: 10px;
    line-height: 1
}

.dataset-chip-remove:hover {
    color: #606060
}

#datasetParamsList {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.dataset-params-group {
    border-left: 3px solid var(--dataset-color, #75a469);
    padding-left: 8px
}

.dataset-params-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #355131;
    margin-bottom: 4px
}

.dataset-params-title-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dataset-color, #75a469);
    display: inline-block
}

.dataset-params-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.dataset-params-pill {
    background: var(--dataset-color, #75a469);
    color: #fff;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px
}

.apexcharts-tooltip,
.apexcharts-tooltip-series-group,
.apexcharts-tooltip-text,
table tbody tr td .btn-secondary i::before,
table tbody tr td .btn-success i::before {
    color: #fff !important
}

#analytics hr {
    border-top: 3px solid #75a469;
    opacity: unset
}

.apexcharts-tooltip {
    background: #1e1e1e !important;
    border-radius: 6px
}

.apexcharts-tooltip-title {
    background: #2a2a2a !important;
    color: #fff !important
}

#quickSearchInput,
#quickSearchInput:active {
    border: 1px solid #75a469 !important;
    width: 140px !important;
    border-radius: 6px 0 0 6px !important;
    outline: 0 !important
}

#quickSearchResults {
    width: 262px !important
}

#quickSearchResults .qs-result {
    white-space: normal;
    gap: 8px;
    padding: 10px 12px
}

#quickSearchResults .qs-result+.qs-result {
    border-top: 1px solid #e8ecef
}

#quickSearchResults .qs-result-main {
    display: flex;
    flex-direction: column;
    min-width: 0
}

#quickSearchResults .qs-result-title {
    color: #212529;
    line-height: 1.2;
    word-break: break-word
}

#quickSearchResults .qs-result-secondary {
    color: #6c757d;
    font-size: 12px;
    line-height: 1.2;
    margin-top: 2px
}

#quickSearchResults .qs-result-type {
    color: #8b949e !important;
    font-size: 12px;
    white-space: nowrap;
    line-height: 1.2
}

.selected-row-border {
    position: relative
}

.selected-row-border td {
    border-top: 2px solid #75a469 !important;
    border-bottom: 2px solid #75a469 !important
}

.selected-row-border td:first-child {
    border-left: 2px solid #75a469 !important;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

.selected-row-border td:last-child {
    border-right: 2px solid #75a469 !important;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.checklist-image-badge {
    background: #ff3b30;
    color: #fff;
    border-radius: 50px;
    padding: 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 4px
}

#allPropertiesDataTable .expand-icon,
#importAllPropertiesTable .ia-expand-icon,
#propertyDataTable .expand-icon,
#restorePropertiesDataTable .expand-icon,
.expand-icon {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px
}

#allJobDataTable .expand-icon i::before,
#allPropertiesDataTable .expand-icon i::before,
#importAllPropertiesTable .ia-expand-icon i::before,
#propertyDataTable .expand-icon i::before,
#restorePropertiesDataTable .expand-icon i::before {
    font-size: 40px !important
}

table.dataTable tbody tr td .form-check-input,
table.dataTable thead tr th .form-check-input {
    vertical-align: super;
    width: 1.3em;
    height: 1.3em
}

.child-table-wrapper {
    padding: 8px 0 8px 60px;
    width: 100%;
    box-sizing: border-box;
    background: #f9fafb
}

.child-table-wrapper table.dataTable {
    width: 100% !important;
    margin: 0 !important
}

.child-table-wrapper .dataTables_wrapper {
    padding: 0;
    width: 100%
}

.child-table-wrapper .dataTables_scrollBody {
    width: 100% !important
}

.child-dt-top {
    padding: 6px 0 4px;
    font-size: 12px;
    color: #6c757d
}

.child-dt-bottom {
    padding: 6px 0 2px;
    display: flex;
    justify-content: flex-end
}

.btn-success,
.btn-success:disabled {
    color: #fff;
    background-color: #75a469;
    border-color: #75a469;
    -webkit-box-shadow: 0 2px 6px 0 rgb(117 164 105 / 50%);
    box-shadow: 0 2px 6px 0 rgb(117 164 105 / 50%)
}

.btn-success:focus,
.btn-success:hover {
    color: #fff;
    background-color: #668d5c;
    border-color: #668d5c
}

#imageNotesModal .image-notes-modal-content,
#reportImageNoteModal .image-notes-modal-content {
    border-radius: 12px;
    overflow: hidden;
    min-height: 500px;
    max-height: 520px;
    display: flex;
    flex-direction: column
}

#imageNotesModal .image-notes-modal-header,
#reportImageNoteModal .image-notes-modal-header {
    position: relative;
    justify-content: center;
    border-bottom: 1px solid #dee2e6;
    padding: 14px 48px
}

#imageNotesModal .image-notes-modal-header .btn-close,
#reportImageNoteModal .image-notes-modal-header .btn-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%)
}

#imageNotesModal .image-notes-modal-title,
#reportImageNoteModal .image-notes-modal-title {
    font-weight: 600;
    font-size: 1rem;
    text-align: center
}

#imageNotesModal .image-notes-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid #000;
    border-radius: 8px;
    margin: 12px
}

#imageNotesModal .image-notes-modal-body .list-group-item,
#reportImageNoteModal .image-notes-modal-body .list-group-item {
    border-left: none;
    border-right: none;
    padding-left: 0;
    padding-right: 0
}

#imageNotesModal .image-notes-modal-body .list-group-item:first-child,
#reportImageNoteModal .image-notes-modal-body .list-group-item:first-child {
    border-top: none
}