:root {
    --input-placeholder: #9ba2c1;
    --app-field-muted-color: var(--input-placeholder);
    --app-field-empty-color: var(--input-placeholder);
    --app-field-text-color: #667085;
    --app-field-font-size: 12px;
    --app-field-font-weight: 400;
    --app-field-line-height: 1.3;
    --app-field-height: 40px;
    --app-field-radius: 6px;
    --app-field-padding-y: 7px;
    --app-field-padding-x: 9px;
    --app-field-select-padding-right: 34px;
    --app-field-legend-font-size: 11px;
    --app-field-legend-padding-top: 12px;
    --app-field-legend-padding-bottom: 10px;
    --app-field-tag-max-width: 140px;
    --app-large-btn-min-height: 40px;
    --app-large-btn-padding-y: 10px;
    --app-large-btn-padding-x: 24px;
    --app-large-btn-radius: 6px;
    --app-large-btn-font-size: 14px;
    --app-large-btn-font-weight: 500;
    --app-modal-radius: var(--app-field-radius, 6px);
    --app-modal-border-color: rgba(254, 94, 21, 0.18);
    --app-modal-preview-bg: #fff7f2;
    --app-modal-preview-border: rgba(126, 50, 15, 0.16);
    --app-modal-preview-min-height: 420px;
    --main-color: #fe5e15;
    --border-color: #d6d6d6;
    --app-secondary-bg: #f3f4f6;
    --app-secondary-border: #d0d5dd;
    --app-secondary-color: #667085;
    --app-secondary-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --app-upload-height: var(--app-field-height, 48px);
    --app-upload-radius: var(--app-field-radius, 6px);
    --app-upload-btn-bg: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
    --app-upload-btn-color: var(--app-field-text-color, #667085);
}

input.app-field,
select.app-field,
.selectr-selected.app-field,
.selectr-input.app-field,
.dynamic-select .dynamic-select-header.app-field,
.dynamic-select .dynamic-select-header-placeholder.app-field {
    border: 1px solid var(--border-color, #d6d6d6) !important;
    border-radius: var(--app-field-radius, 6px) !important;
    color: var(--app-field-text-color, #667085) !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    min-height: var(--app-field-height, 48px) !important;
}

textarea.app-field {
    border: 1px solid var(--border-color, #d6d6d6) !important;
    border-radius: var(--app-field-radius, 6px) !important;
    color: var(--app-field-text-color, #667085) !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
}

input.app-field,
select.app-field,
textarea.app-field {
    padding: var(--app-field-padding-y, 7px) var(--app-field-padding-x, 9px) !important;
    box-sizing: border-box;
}

body
    input.app-field.app-field:not([type="checkbox"]):not([type="radio"]):not(
        [type="hidden"]
    ):not([type="submit"]):not([type="button"]):not([type="reset"]):not(
        [type="file"]
    ),
body select.app-field.app-field:not([multiple]):not([size]),
body .selectr-container:not(.multiple) .selectr-selected.app-field.app-field,
body .dynamic-select .dynamic-select-header.app-field.app-field,
body .dynamic-select .dynamic-select-header-placeholder.app-field.app-field,
body .datepicker-wrapper > input.app-field.app-field {
    height: var(--app-field-height, 48px) !important;
    min-height: var(--app-field-height, 48px) !important;
    box-sizing: border-box !important;
    background: #ffffff;
}

body .selectr-container.multiple .selectr-selected.app-field.app-field {
    min-height: var(--app-field-height, 48px) !important;
    box-sizing: border-box !important;
}

body input.app-field.app-field,
body select.app-field.app-field,
body textarea.app-field.app-field,
body .selectr-selected.app-field.app-field,
body .selectr-input.app-field.app-field,
body .dynamic-select .dynamic-select-header.app-field.app-field,
body .dynamic-select .dynamic-select-header-placeholder.app-field.app-field,
body .datepicker-wrapper > input.app-field.app-field,
body .filter-row > .selectr-container[class*="compact-multi"] .selectr-selected,
body
    .filter-row
    .filter-col
    > .selectr-container[class*="compact-multi"]
    .selectr-selected,
body
    .filter-panel
    .selectr-container[class*="compact-multi"]
    .selectr-selected {
    border-radius: var(--app-field-radius, 6px) !important;
}

select.app-field,
.selectr-selected.app-field,
.selectr-input.app-field {
    background-color: #fff !important;
}

select.app-field:not([multiple]):not([size]) {
    padding-right: var(--app-field-select-padding-right, 34px) !important;
}

body .selectr-container:not(.multiple) .selectr-selected.app-field.app-field,
body .dynamic-select .dynamic-select-header.app-field.app-field,
body .dynamic-select .dynamic-select-header-placeholder.app-field.app-field {
    display: flex !important;
    align-items: center !important;
    min-height: var(--app-field-height, 48px) !important;
    height: var(--app-field-height, 48px) !important;
}

body .selectr-container:not(.multiple) .selectr-selected.app-field.app-field,
body .dynamic-select .dynamic-select-header.app-field.app-field {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body .selectr-input.app-field.app-field {
    min-height: calc(var(--app-field-height, 48px) - 2px) !important;
    height: calc(var(--app-field-height, 48px) - 2px) !important;
    padding: 0 30px 0 var(--app-field-padding-x, 9px) !important;
}

input.app-field:focus,
select.app-field:focus,
textarea.app-field:focus,
.selectr-selected.app-field:focus,
.selectr-input.app-field:focus {
    border-color: var(--border-color, #d6d6d6) !important;
    box-shadow: none !important;
    outline: none !important;
}

input.app-field:disabled,
select.app-field:disabled,
textarea.app-field:disabled,
input.app-field[disabled],
select.app-field[disabled],
textarea.app-field[disabled] {
    opacity: 1 !important;
}

body input.app-field.app-field::placeholder,
body textarea.app-field.app-field::placeholder,
body .selectr-input.app-field.app-field::placeholder {
    color: var(
        --app-field-empty-color,
        var(--input-placeholder, #9ba2c1)
    ) !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    opacity: 1 !important;
}

body select.app-field.app-field:not(.has-real-value),
body input.app-field.app-field[type="date"]:not(.has-real-value),
body input.app-field.app-field[type="datetime-local"]:not(.has-real-value),
body input.app-field.app-field[type="month"]:not(.has-real-value),
body input.app-field.app-field[type="time"]:not(.has-real-value),
body input.app-field.app-field[type="week"]:not(.has-real-value),
body
    .selectr-container:not(.has-real-value)
    .selectr-selected.app-field.app-field,
body
    .selectr-container:not(.has-real-value)
    .selectr-placeholder.app-field.app-field,
body .selectr-container:not(.has-real-value) .selectr-label.app-field.app-field,
body
    .dynamic-select:not(.has-real-value)
    .dynamic-select-header.app-field.app-field,
body
    .dynamic-select:not(.has-real-value)
    .dynamic-select-header-placeholder.app-field.app-field {
    color: var(
        --app-field-empty-color,
        var(--input-placeholder, #9ba2c1)
    ) !important;
}

body
    input.app-field.app-field[type="date"]:not(
        .has-real-value
    )::-webkit-datetime-edit,
body
    input.app-field.app-field[type="datetime-local"]:not(
        .has-real-value
    )::-webkit-datetime-edit,
body
    input.app-field.app-field[type="month"]:not(
        .has-real-value
    )::-webkit-datetime-edit,
body
    input.app-field.app-field[type="time"]:not(
        .has-real-value
    )::-webkit-datetime-edit,
body
    input.app-field.app-field[type="week"]:not(
        .has-real-value
    )::-webkit-datetime-edit {
    color: var(
        --app-field-empty-color,
        var(--input-placeholder, #9ba2c1)
    ) !important;
}

body
    input.app-field.app-field[type="date"].has-real-value::-webkit-datetime-edit,
body
    input.app-field.app-field[type="datetime-local"].has-real-value::-webkit-datetime-edit,
body
    input.app-field.app-field[type="month"].has-real-value::-webkit-datetime-edit,
body
    input.app-field.app-field[type="time"].has-real-value::-webkit-datetime-edit,
body
    input.app-field.app-field[type="week"].has-real-value::-webkit-datetime-edit {
    color: var(--app-field-text-color, #667085) !important;
}

select.app-field option,
.selectr-container .selectr-placeholder.app-field.app-field,
.selectr-container .selectr-label.app-field.app-field,
.selectr-container .selectr-tag.app-field.app-field,
.selectr-container .selectr-option.app-field.app-field,
.dynamic-select .dynamic-select-header.app-field.app-field,
.dynamic-select .dynamic-select-header-placeholder.app-field.app-field,
.dynamic-select .dynamic-select-option.app-field.app-field {
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
}

select.app-field option,
body .selectr-container.has-real-value .selectr-selected.app-field.app-field,
body .selectr-container.has-real-value .selectr-label.app-field.app-field,
body .selectr-container .selectr-tag.app-field.app-field,
body .selectr-container .selectr-option.app-field.app-field,
body .dynamic-select.has-real-value .dynamic-select-header.app-field.app-field,
body .dynamic-select .dynamic-select-option.app-field.app-field {
    color: var(--app-field-text-color, #667085) !important;
}

body select.app-field.app-field,
body .selectr-selected.app-field.app-field,
body .selectr-selected.app-field.app-field .selectr-label,
body .selectr-selected.app-field.app-field .selectr-placeholder,
body .selectr-container.has-real-value .selectr-selected.app-field.app-field,
body .selectr-container.has-real-value .selectr-label.app-field.app-field,
body .selectr-container.multiple .selectr-tag.app-field.app-field,
body
    .selectr-container.multiple
    .selectr-tag.app-field.app-field
    .selectr-tag-text,
body .dynamic-select.has-real-value .dynamic-select-header.app-field.app-field,
body
    .dynamic-select.has-real-value
    .dynamic-select-header.app-field.app-field
    .dynamic-select-option-text {
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
}

.app-select-legend-wrap,
body .selectr-container.app-select-legend,
body .dynamic-select.app-select-legend {
    position: relative;
}

.app-select-legend-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
}

.app-select-legend-wrap::before,
body .selectr-container.app-select-legend::before,
body .dynamic-select.app-select-legend::before {
    content: attr(data-field-legend);
    position: absolute;
    top: 0;
    left: calc(var(--app-field-padding-x, 9px) + 2px);
    z-index: 5;
    max-width: calc(100% - 24px);
    padding: 0 4px;
    overflow: hidden;
    background: #fff;
    color: var(--app-field-muted-color, var(--input-placeholder, #9ba2c1));
    font-size: var(--app-field-legend-font-size, 11px);
    font-weight: var(--app-field-font-weight, 400);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transform-origin: left top;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    pointer-events: none;
    box-sizing: border-box;
}

.app-select-legend-wrap:focus-within::before,
.app-select-legend-wrap.has-real-value::before,
body .selectr-container.app-select-legend:focus-within::before,
body .selectr-container.app-select-legend.open::before,
body .selectr-container.app-select-legend.has-real-value::before,
body .dynamic-select.app-select-legend:focus-within::before,
body .dynamic-select.app-select-legend.open::before,
body .dynamic-select.app-select-legend.has-real-value::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
}

body .datepicker-wrapper.app-field-legend {
    position: relative;
}

body .datepicker-wrapper.app-field-legend::before {
    content: attr(data-field-legend);
    position: absolute;
    top: 0;
    left: calc(var(--app-field-padding-x, 9px) + 2px);
    z-index: 4;
    max-width: calc(100% - 28px);
    padding: 0 4px;
    overflow: hidden;
    background: #fff;
    color: var(--app-field-muted-color, var(--input-placeholder, #9ba2c1));
    font-size: var(--app-field-legend-font-size, 11px);
    font-weight: var(--app-field-font-weight, 400);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transform-origin: left top;
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    pointer-events: none;
}

body .datepicker-wrapper.app-field-legend:focus-within::before,
body .datepicker-wrapper.app-field-legend.has-real-value::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
}

body .app-select-legend-wrap > select.app-field.app-field,
body .selectr-container.app-select-legend .selectr-selected.app-field.app-field,
body .selectr-container.app-select-legend .selectr-input.app-field.app-field,
body
    .dynamic-select.app-select-legend
    .dynamic-select-header.app-field.app-field,
body
    .dynamic-select.app-select-legend
    .dynamic-select-header-placeholder.app-field.app-field {
    border-radius: var(--app-field-radius, 6px) !important;
}

body .app-select-legend-wrap:focus-within > select.app-field.app-field,
body .app-select-legend-wrap.has-real-value > select.app-field.app-field,
body
    .selectr-container.app-select-legend:focus-within
    .selectr-selected.app-field.app-field,
body
    .selectr-container.app-select-legend.open
    .selectr-selected.app-field.app-field,
body
    .selectr-container.app-select-legend.has-real-value
    .selectr-selected.app-field.app-field,
body
    .dynamic-select.app-select-legend:focus-within
    .dynamic-select-header.app-field.app-field,
body
    .dynamic-select.app-select-legend.open
    .dynamic-select-header.app-field.app-field,
body
    .dynamic-select.app-select-legend.has-real-value
    .dynamic-select-header.app-field.app-field {
    padding-top: var(--app-field-legend-padding-top, 16px) !important;
    padding-bottom: var(--app-field-legend-padding-bottom, 5px) !important;
}

body
    .filter-row
    .datepicker-wrapper.app-field-legend
    > input.app-field.app-field,
body
    .filter-panel
    .datepicker-wrapper.app-field-legend
    > input.app-field.app-field {
    border-radius: var(--app-field-radius, 6px) !important;
}

body
    .filter-row
    .datepicker-wrapper.app-field-legend:focus-within
    > input.app-field.app-field,
body
    .filter-row
    .datepicker-wrapper.app-field-legend.has-real-value
    > input.app-field.app-field,
body
    .filter-panel
    .datepicker-wrapper.app-field-legend:focus-within
    > input.app-field.app-field,
body
    .filter-panel
    .datepicker-wrapper.app-field-legend.has-real-value
    > input.app-field.app-field {
    padding-top: var(--app-field-legend-padding-top, 16px) !important;
    padding-bottom: var(--app-field-legend-padding-bottom, 5px) !important;
}

body
    .selectr-container.app-select-legend:focus-within
    .selectr-selected.app-field.app-field,
body
    .selectr-container.app-select-legend.open
    .selectr-selected.app-field.app-field,
body
    .selectr-container.app-select-legend.has-real-value
    .selectr-selected.app-field.app-field,
body
    .dynamic-select.app-select-legend:focus-within
    .dynamic-select-header.app-field.app-field,
body
    .dynamic-select.app-select-legend.open
    .dynamic-select-header.app-field.app-field,
body
    .dynamic-select.app-select-legend.has-real-value
    .dynamic-select-header.app-field.app-field {
    display: flex !important;
    align-items: center !important;
}

body
    .selectr-container.app-select-legend:focus-within
    .selectr-placeholder.app-field.app-field,
body
    .selectr-container.app-select-legend.open
    .selectr-placeholder.app-field.app-field,
body
    .selectr-container.app-select-legend.has-real-value
    .selectr-placeholder.app-field.app-field,
body
    .dynamic-select.app-select-legend:focus-within
    .dynamic-select-header-placeholder.app-field.app-field,
body
    .dynamic-select.app-select-legend.open
    .dynamic-select-header-placeholder.app-field.app-field,
body
    .dynamic-select.app-select-legend.has-real-value
    .dynamic-select-header-placeholder.app-field.app-field {
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body
    .filter-row
    .datepicker-wrapper.app-field-legend:focus-within
    > input.app-field.app-field::placeholder,
body
    .filter-row
    .datepicker-wrapper.app-field-legend.has-real-value
    > input.app-field.app-field::placeholder,
body
    .filter-panel
    .datepicker-wrapper.app-field-legend:focus-within
    > input.app-field.app-field::placeholder,
body
    .filter-panel
    .datepicker-wrapper.app-field-legend.has-real-value
    > input.app-field.app-field::placeholder {
    color: transparent !important;
}

body .app-select-legend-wrap::before,
body .selectr-container.app-select-legend::before,
body .dynamic-select.app-select-legend::before,
body .datepicker-wrapper.app-field-legend::before,
body .selectr-container[class*="compact-multi"]::before {
    content: none !important;
    display: none !important;
}

body .app-select-legend-wrap > select.app-field.app-field,
body
    .filter-row
    .datepicker-wrapper.app-field-legend
    > input.app-field.app-field,
body
    .filter-panel
    .datepicker-wrapper.app-field-legend
    > input.app-field.app-field {
    padding-top: var(--app-field-padding-y, 7px) !important;
    padding-bottom: var(--app-field-padding-y, 7px) !important;
}

body .selectr-container.app-select-legend .selectr-selected.app-field.app-field,
body
    .dynamic-select.app-select-legend
    .dynamic-select-header.app-field.app-field,
body .selectr-container[class*="compact-multi"].open .selectr-selected,
body
    .selectr-container[class*="compact-multi"].aa-has-summary
    .selectr-selected,
body
    .selectr-container[class*="compact-multi"].ca-has-summary
    .selectr-selected {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

body
    .selectr-container.app-select-legend
    .selectr-placeholder.app-field.app-field,
body
    .dynamic-select.app-select-legend
    .dynamic-select-header-placeholder.app-field.app-field {
    max-width: 100% !important;
    opacity: 1 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}

.file-upload {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    min-height: var(--app-upload-height, 50px);
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    border-radius: var(--app-upload-radius, 10px) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
    box-shadow: var(--app-secondary-shadow, 0 1px 2px rgba(16, 24, 40, 0.05));
}

.file-upload .upload-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 auto;
    min-width: 116px;
    min-height: calc(var(--app-upload-height, 50px) - 2px);
    margin-right: 0;
    padding: 0 18px;
    border: none !important;
    border-right: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    border-radius: 0 !important;
    background: var(
        --app-upload-btn-bg,
        linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)
    ) !important;
    color: var(--app-upload-btn-color, #344054) !important;
    font-family: inherit !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    transition: none !important;
}

.file-upload .upload-btn:hover,
.file-upload .upload-btn:focus {
    background: var(
        --app-upload-btn-bg,
        linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)
    ) !important;
    color: var(--app-upload-btn-color, #344054) !important;
    box-shadow: none !important;
}

.file-upload .upload-btn .file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-upload .file-name {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: calc(var(--app-upload-height, 50px) - 2px);
    padding: 0 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(
        --app-field-empty-color,
        var(--input-placeholder, #9ba2c1)
    ) !important;
    font-family: inherit !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    box-sizing: border-box;
}

.file-upload.has-real-value .file-name {
    color: var(--app-field-text-color, #667085) !important;
}

body input.form-control[type="file"] {
    min-height: var(--app-upload-height, 50px) !important;
    height: var(--app-upload-height, 50px) !important;
    padding: 0 !important;
    border: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    border-radius: var(--app-upload-radius, 10px) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
    color: var(
        --app-field-empty-color,
        var(--input-placeholder, #9ba2c1)
    ) !important;
    font-family: inherit !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    overflow: hidden;
    box-sizing: border-box !important;
    box-shadow: var(--app-secondary-shadow, 0 1px 2px rgba(16, 24, 40, 0.05));
}

body input.form-control[type="file"].has-real-value {
    color: var(--app-field-text-color, #667085) !important;
}

body input.form-control[type="file"]::-webkit-file-upload-button,
body input.form-control[type="file"]::file-selector-button {
    height: calc(var(--app-upload-height, 50px) - 2px);
    margin: 0 16px 0 0;
    padding: 0 18px;
    border: none !important;
    border-right: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    background: var(
        --app-upload-btn-bg,
        linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)
    ) !important;
    color: var(--app-upload-btn-color, #344054) !important;
    font-family: inherit !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    box-sizing: border-box;
    transition: none !important;
}

body input.form-control[type="file"]:hover:not(:disabled):not([readonly]),
body input.form-control[type="file"]:focus {
    border-color: var(--app-secondary-border, #d0d5dd) !important;
    box-shadow: none !important;
    outline: none !important;
}

body
    input.form-control[type="file"]:hover:not(:disabled):not(
        [readonly]
    )::-webkit-file-upload-button,
body
    input.form-control[type="file"]:hover:not(:disabled):not(
        [readonly]
    )::file-selector-button,
body input.form-control[type="file"]:focus::-webkit-file-upload-button,
body input.form-control[type="file"]:focus::file-selector-button {
    background: var(
        --app-upload-btn-bg,
        linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)
    ) !important;
    color: var(--app-upload-btn-color, #344054) !important;
}

body input.form-control[type="file"]:disabled,
body input.form-control[type="file"][disabled] {
    background: #f8fafc !important;
    cursor: not-allowed;
}

.selectr-container.multiple .selectr-tag {
    border: 1px solid var(--border-color, #d6d6d6) !important;
    border-radius: 6px !important;
    background: #fff !important;
}

body .selectr-container.multiple .selectr-tag.app-field.app-field {
    display: inline-flex !important;
    align-items: center !important;
    max-width: min(
        var(--app-field-tag-max-width, 140px),
        calc(100% - 6px)
    ) !important;
    padding: 3px 24px 3px 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    user-select: none;
}

body
    .selectr-container.multiple
    .selectr-tag.app-field.app-field
    .selectr-tag-text {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit;
}

body
    .selectr-container.multiple
    .selectr-tag.app-field.app-field
    .selectr-tag-remove {
    right: 4px !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
}

.selectr-option.active,
.selectr-option.selected,
.selectr-option.active.selected {
    color: var(--app-field-text-color, #667085) !important;
}

.cancel-btn,
.create-btn,
.filters-btn,
.filter-btn,
.table1-btn,
.table2-btn,
.ad-btn-blue,
.ad-btn-orange,
.ad-btn-update,
.ta-dispatch-btn,
.ta-bottom-btn,
.fd-update-btn,
.inspect-upload-btn,
.inspect-generate-btn,
.inspect-update-btn,
.nl-submit-btn,
.sid-submit-btn,
.add-image-btn,
.submit-images-btn,
.email-cta-btn,
.photos-gen-btn,
.leak-btn-primary,
.theme-modal .modal-footer .btn,
.modal-footer .btn.btn-secondary,
#btnUploadDocument,
#btnUploadPhoto,
#btnActionConfirm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--app-large-btn-min-height, 44px) !important;
    padding: var(--app-large-btn-padding-y, 10px)
        var(--app-large-btn-padding-x, 24px) !important;
    border-radius: var(--app-large-btn-radius, 6px) !important;
    font-size: var(--app-large-btn-font-size, 14px) !important;
    font-weight: var(--app-large-btn-font-weight, 500) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-sizing: border-box;
    white-space: nowrap !important;
}

body .btn:not(.btn-close):not(.btn-link):not(.inspect-delete),
body .btn-login,
body .action-btn,
body .btn-view,
body .btn-react,
body .delete-photo-btn,
body .preview-photo-btn,
body .preview-photo-pdf-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-height: var(--app-large-btn-min-height, 40px) !important;
    padding: var(--app-large-btn-padding-y, 10px)
        var(--app-large-btn-padding-x, 24px) !important;
    border-radius: var(--app-large-btn-radius, 6px) !important;
    font-size: var(--app-large-btn-font-size, 14px) !important;
    font-weight: var(--app-large-btn-font-weight, 500) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-sizing: border-box;
    white-space: nowrap !important;
}

.cancel-btn,
.table1-btn,
.leak-btn-primary {
    text-decoration: none !important;
}

.page-wrapper .table-wrapper {
    overflow-x: hidden !important;
    overflow-y: hidden;
}

.page-wrapper .table-wrapper > table,
.page-wrapper .table-wrapper .inspector-table {
    width: 100%;
    min-width: 0;
}

.page-wrapper .table-wrapper td.action-col,
.page-wrapper .table-wrapper th.action-col,
.page-wrapper .table-wrapper .action-col {
    white-space: nowrap !important;
}

.page-wrapper .table-wrapper td.action-col > div,
.page-wrapper .table-wrapper .action-col > div,
.page-wrapper .table-wrapper td.action-col.d-flex,
.page-wrapper .table-wrapper .action-col.d-flex {
    display: flex;
    align-items: center;
    justify-content: center !important;
    gap: 6px;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    max-width: 100%;
}

.page-wrapper .table-wrapper td.action-col > div > .table1-btn,
.page-wrapper .table-wrapper td.action-col > div > .table2-btn,
.page-wrapper .table-wrapper .action-col > div > .table1-btn,
.page-wrapper .table-wrapper .action-col > div > .table2-btn,
.page-wrapper .table-wrapper td.action-col.d-flex > .table1-btn,
.page-wrapper .table-wrapper td.action-col.d-flex > .table2-btn,
.page-wrapper .table-wrapper .action-col.d-flex > .table1-btn,
.page-wrapper .table-wrapper .action-col.d-flex > .table2-btn {
    flex: 0 0 auto;
    min-height: var(--app-large-btn-min-height, 44px) !important;
    padding: var(--app-large-btn-padding-y, 10px)
        var(--app-large-btn-padding-x, 24px) !important;
    font-size: var(--app-large-btn-font-size, 14px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.cancel-btn,
.btn.btn-secondary,
.theme-modal .btn-theme-secondary,
.modal-footer .btn.btn-secondary {
    background: var(--app-secondary-bg, #f3f4f6) !important;
    border: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    color: var(--app-secondary-color, #667085) !important;
    box-shadow: var(--app-secondary-shadow, 0 1px 2px rgba(16, 24, 40, 0.05));
}

.cancel-btn:hover,
.cancel-btn:focus,
.cancel-btn:active,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.theme-modal .btn-theme-secondary:hover,
.theme-modal .btn-theme-secondary:focus,
.theme-modal .btn-theme-secondary:active,
.modal-footer .btn.btn-secondary:hover,
.modal-footer .btn.btn-secondary:focus,
.modal-footer .btn.btn-secondary:active {
    background: var(--app-secondary-bg, #f3f4f6) !important;
    border-color: var(--app-secondary-border, #d0d5dd) !important;
    color: var(--app-secondary-color, #667085) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.doc-delete,
.delete-photo-btn,
.edit-assignment-page .documents-section .doc-delete {
    border: 1px solid #fe1519 !important;
    background: #fe1519 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.doc-delete:hover,
.doc-delete:focus,
.delete-photo-btn:hover,
.delete-photo-btn:focus,
.edit-assignment-page .documents-section .doc-delete:hover,
.edit-assignment-page .documents-section .doc-delete:focus {
    border-color: #fe1519 !important;
    background: #fe1519 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Keep custom button colors stable while active/loading/disabled */
.create-btn:is(:focus, :active, :disabled, .disabled),
.filters-btn:is(:focus, :active, :disabled, .disabled),
.table2-btn:is(:focus, :active, :disabled, .disabled) {
    background: #ff6600 !important;
    border-color: #ff6600 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.ad-btn-orange:is(:focus, :active, :disabled, .disabled),
.ad-btn-update:is(:focus, :active, :disabled, .disabled),
.inspect-generate-btn:is(:focus, :active, :disabled, .disabled),
.inspect-update-btn:is(:focus, :active, :disabled, .disabled),
.nl-submit-btn:is(:focus, :active, :disabled, .disabled),
.submit-images-btn:is(:focus, :active, :disabled, .disabled),
.email-cta-btn:is(:focus, :active, :disabled, .disabled),
.photos-gen-btn:is(:focus, :active, :disabled, .disabled),
.leak-btn-primary:is(:focus, :active, :disabled, .disabled),
.theme-modal .btn-theme-primary:is(:focus, :active, :disabled, .disabled),
.theme-modal .btn-theme-danger:is(:focus, :active, :disabled, .disabled),
#btnUploadDocument:is(:focus, :active, :disabled, .disabled),
#btnUploadPhoto:is(:focus, :active, :disabled, .disabled),
#btnActionConfirm:is(:focus, :active, :disabled, .disabled),
.edit-assignment-page
    .documents-section
    .doc-download:is(:focus, :active, :disabled, .disabled) {
    background: var(--main-color, #fe5e15) !important;
    border-color: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.ad-btn-blue:is(:focus, :active, :disabled, .disabled) {
    background: #005eff !important;
    border-color: #005eff !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.add-image-btn:is(:focus, :active, :disabled, .disabled),
.doc-download:is(:focus, :active, :disabled, .disabled) {
    background: #192a56 !important;
    border-color: #192a56 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.ta-dispatch-btn:is(:focus, :active, :disabled, .disabled),
.ta-bottom-green:is(:focus, :active, :disabled, .disabled) {
    background: #00a54b !important;
    border-color: #00a54b !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.doc-delete:is(:focus, :active, :disabled, .disabled),
.delete-photo-btn:is(:focus, :active, :disabled, .disabled),
.ta-bottom-red:is(:focus, :active, :disabled, .disabled),
.delete .table2-btn:is(:focus, :active, :disabled, .disabled),
.table-wrapper.delete .table2-btn:is(:focus, :active, :disabled, .disabled),
.edit-assignment-page
    .documents-section
    .doc-delete:is(:focus, :active, :disabled, .disabled) {
    background: #fe1519 !important;
    border-color: #fe1519 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.cancel-btn:is(:disabled, .disabled),
.btn.btn-secondary:is(:disabled, .disabled),
.theme-modal .btn-theme-secondary:is(:disabled, .disabled),
.modal-footer .btn.btn-secondary:is(:disabled, .disabled) {
    background: var(--app-secondary-bg, #f3f4f6) !important;
    border-color: var(--app-secondary-border, #d0d5dd) !important;
    color: var(--app-secondary-color, #667085) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.inspect-upload-btn:is(:disabled, .disabled) {
    background: var(--app-secondary-bg, #f3f4f6) !important;
    border-color: var(--app-secondary-border, #d0d5dd) !important;
    color: var(--app-secondary-color, #667085) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.table1-btn:is(:focus, :active, :disabled, .disabled) {
    background: #e8edf8 !important;
    border-color: #a7b8d6 !important;
    color: #3b4a6b !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.ta-save-btn:is(:focus, :active, :disabled, .disabled),
.fd-update-btn:is(:focus, :active, :disabled, .disabled),
.sid-submit-btn:is(:focus, :active, :disabled, .disabled),
.theme-modal .btn-theme-transparent:is(:focus, :active, :disabled, .disabled) {
    background: #ffffff !important;
    border-color: var(--main-color, #fe5e15) !important;
    color: var(--main-color, #fe5e15) !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.filter-btn {
    justify-content: space-between !important;
    gap: 8px;
}

.ta-dispatch-btn {
    /* Keep Bootstrap .btn hover/active states from resetting this custom button */
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #00a54b;
    --bs-btn-border-color: #00a54b;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #00a54b;
    --bs-btn-hover-border-color: #00a54b;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #00a54b;
    --bs-btn-active-border-color: #00a54b;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #00a54b;
    --bs-btn-disabled-border-color: #00a54b;
    width: fit-content !important;
    background: #00a54b !important;
    border-color: #00a54b !important;
    color: #ffffff !important;
}

.ta-dispatch-btn:hover,
.ta-dispatch-btn:focus,
.ta-dispatch-btn:focus-visible {
    background: #00a54b !important;
    border-color: #00a54b !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.theme-modal .modal-content {
    border: 1px solid var(--app-modal-border-color, rgba(254, 94, 21, 0.18)) !important;
    border-radius: var(--app-modal-radius, 6px) !important;
    overflow: visible;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
}

.theme-modal .modal-header {
    background: var(--main-color, #fe5e15) !important;
    border-bottom: none !important;
    padding: 14px 18px !important;
    border-radius: var(--app-modal-radius, 6px) var(--app-modal-radius, 6px) 0 0 !important;
}

.theme-modal .modal-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.theme-modal .btn-close {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    background: transparent
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M3 3l10 10M13 3L3 13' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e")
        center/16px 16px no-repeat !important;
    box-shadow: none !important;
}

.theme-modal .modal-body {
    position: relative;
    z-index: 2;
    overflow: visible;
    padding: 18px !important;
    color: #374151;
    font-size: 14px;
}

.theme-modal .modal-footer {
    border-top: none !important;
    position: relative;
    z-index: 1;
    padding: 0 18px 18px !important;
    gap: 10px;
}

.theme-modal .selectr-container,
.theme-modal .dynamic-select {
    position: relative;
}

.theme-modal .selectr-container.open,
.theme-modal .dynamic-select.open {
    z-index: 1065;
}

.theme-modal .selectr-options-container,
.theme-modal .dynamic-select .dynamic-select-options {
    z-index: 1066 !important;
}

.theme-modal .modal-footer .btn {
    margin: 0 !important;
}

.theme-modal .btn-theme-secondary {
    background: var(--app-secondary-bg, #f3f4f6) !important;
    border: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    color: var(--app-secondary-color, #667085) !important;
}

.theme-modal .btn-theme-secondary:hover {
    background: var(--app-secondary-bg, #f3f4f6) !important;
    border-color: var(--app-secondary-border, #d0d5dd) !important;
    color: var(--app-secondary-color, #667085) !important;
}

.theme-modal .btn-theme-primary {
    background: var(--main-color, #fe5e15) !important;
    border: 1px solid var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
}

.theme-modal .btn-theme-primary:hover {
    background: var(--main-color, #fe5e15) !important;
    border-color: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
}

.theme-modal .btn-theme-danger {
    background: #fe1519 !important;
    border: 1px solid #fe1519 !important;
    color: #ffffff !important;
}

.theme-modal .btn-theme-danger:hover,
.theme-modal .btn-theme-danger:focus {
    background: #fe1519 !important;
    border-color: #fe1519 !important;
    color: #ffffff !important;
}

.theme-modal .btn-theme-transparent {
    background: #ffffff !important;
    border: 1px solid var(--main-color, #fe5e15) !important;
    color: var(--main-color, #fe5e15) !important;
    box-shadow: none !important;
}

.theme-modal .btn-theme-transparent:hover,
.theme-modal .btn-theme-transparent:focus {
    background: #ffffff !important;
    border-color: var(--main-color, #fe5e15) !important;
    color: var(--main-color, #fe5e15) !important;
    box-shadow: none !important;
}

.theme-modal .theme-preview-modal-body {
    padding: 20px !important;
}

.theme-preview-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--app-modal-preview-min-height, 420px);
    max-height: 76vh;
    overflow: hidden;
    border: 1px solid var(--app-modal-preview-border, rgba(254, 94, 21, 0.16));
    border-radius: var(--app-modal-radius, 6px);
    background: var(--app-modal-preview-bg, #fff7f2);
}

.theme-preview-media,
.theme-preview-frame {
    width: 100%;
    height: 100%;
    min-height: var(--app-modal-preview-min-height, 420px);
    max-height: 76vh;
    border: 0;
    background: transparent;
}

.theme-preview-media {
    display: block;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.theme-preview-media.is-loaded {
    opacity: 1;
}

.theme-preview-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
    z-index: 2;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.theme-preview-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.theme-preview-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(254, 94, 21, 0.2);
    border-top-color: var(--main-color, #fe5e15);
    border-radius: 6px;
    animation: themePreviewSpin 0.8s linear infinite;
}

@keyframes themePreviewSpin {
    to {
        transform: rotate(360deg);
    }
}

.page-wrapper .table-wrapper > table thead th,
.page-wrapper .table-wrapper.delete .inspector-table thead th {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

.simplebar-content {
    padding: 0px !important;
}

.topbar,
.topbar > .container-fluid,
.topbar .topbar-custom,
.topbar .topbar-custom > .topbar-item,
.topbar .dropdown.topbar-item {
    overflow: visible !important;
}

.topbar .dropdown-menu {
    z-index: 1101 !important;
}

.topbar .topbar-custom .nav-link.topbar-user-toggle {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.topbar .topbar-custom .nav-link.topbar-user-toggle::after {
    display: none !important;
}

.topbar .topbar-custom .nav-link.topbar-user-toggle > .d-flex {
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0;
}

.topbar .topbar-custom .nav-link.topbar-user-toggle .topbar-user {
    flex: 0 0 auto;
}

.topbar .topbar-custom .nav-link.topbar-user-toggle .toopbar-details {
    min-width: 0;
}

.nav-link[data-bs-toggle="collapse"][aria-expanded="true"] span {
    font-weight: 500 !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav .nav-item .nav-link {
    font-weight: 400 !important;
}
body .datepicker-wrapper {
    position: relative;
}

body .datepicker-wrapper > input.app-field.app-field {
    padding-right: 40px !important;
}

body .datepicker-wrapper .datepicker-icon {
    position: absolute;
    top: 0;
    right: 12px;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

body .datepicker-wrapper .calendar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

body .datepicker-wrapper .calendar-icon img {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    opacity: 0.7;
}

body .filter-row .datepicker-wrapper,
body .filter-panel .datepicker-wrapper {
    position: relative;
}

body .filter-row .datepicker-wrapper .datepicker-icon,
body .filter-panel .datepicker-wrapper .datepicker-icon {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    transform: translateY(-50%) !important;
    line-height: 0 !important;
}

body .filter-row .datepicker-wrapper .calendar-icon,
body .filter-panel .datepicker-wrapper .calendar-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
}

body .filter-row .datepicker-wrapper .calendar-icon img,
body .filter-panel .datepicker-wrapper .calendar-icon img,
body .filter-row .datepicker-wrapper .datepicker-icon > img,
body .filter-panel .datepicker-wrapper .datepicker-icon > img {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    transform: translateY(-1px) !important;
    opacity: 0.75 !important;
}
ul li {
    list-style: none;
}
button {
    border-radius: 3px !important;
}
.leak a {
    text-align: center;
    font-family: poppins;
    font-weight: 700;
    font-size: 2.2rem;
    color: #16266f;
}
.color {
    color: var(--main-color);
}
.logo h2 {
    font-family: poppins;
    font-weight: 700;
    font-size: 2rem;
    color: #16266f;
    margin-top: 08px;
}
.leak span i {
    margin-top: 6px;
}
.startbar
    .startbar-menu
    .navbar-nav
    .nav-item
    .nav-link[data-bs-toggle="collapse"]::after {
    margin-left: 0px !important;
}

table tr th {
    text-align: center !important;
}

.edit-assignment-page .inspection-section .swiper-wrapper {
    align-items: stretch !important;
}

.edit-assignment-page .inspection-section .swiper-slide {
    display: flex !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.edit-assignment-page .inspection-section .inspect-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding: 18px;
    border: 1px solid #e4e7ec;
    background-color: white;
}

.edit-assignment-page .inspection-section .inspect-card,
.edit-assignment-page .inspection-section .inspect-img,
.edit-assignment-page .inspection-section .inspect-media-action,
.edit-assignment-page .documents-section .doc-card,
.edit-assignment-page .documents-section .doc-preview,
.edit-assignment-page .documents-section .doc-eye {
    border-radius: var(--app-field-radius, 6px) !important;
}

@media (min-width: 768px) {
    .edit-assignment-page .inspection-section .swiper-slide {
        width: calc((100% - 18px) / 2) !important;
    }
}

@media (min-width: 992px) {
    .edit-assignment-page .inspection-section .swiper-slide {
        width: calc((100% - 54px) / 4) !important;
    }
}

.edit-assignment-page .inspection-section .inspect-img {
    width: 100%;
    height: 188px;
    border: 1px solid #eaecf0;
    background: #f8fafc;
    object-fit: cover;
}

.edit-assignment-page .inspection-section .inspect-media {
    position: relative;
    margin-bottom: 14px;
}

.edit-assignment-page .inspection-section .inspect-media-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.edit-assignment-page .inspection-section .inspect-media-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px !important;
    padding: 0 !important;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.14);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.edit-assignment-page .inspection-section .inspect-media-action:hover,
.edit-assignment-page .inspection-section .inspect-media-action:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
}

.edit-assignment-page .inspection-section .inspect-media-action:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.edit-assignment-page .inspection-section .inspect-preview {
    border: 1px solid rgba(254, 94, 21, 0.18) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--main-color, #fe5e15) !important;
}

.edit-assignment-page .inspection-section .inspect-preview:hover,
.edit-assignment-page .inspection-section .inspect-preview:focus {
    border-color: rgba(254, 94, 21, 0.18) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--main-color, #fe5e15) !important;
}

.edit-assignment-page .inspection-section .inspect-preview i,
.edit-assignment-page .documents-section .doc-eye {
    font-size: 14px !important;
    line-height: 1 !important;
}

.edit-assignment-page .inspection-section .inspect-card .inspect-delete {
    position: static !important;
    border: 1px solid #fe1519 !important;
    background: #fe1519 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

.edit-assignment-page .inspection-section .inspect-card .inspect-delete:hover,
.edit-assignment-page .inspection-section .inspect-card .inspect-delete:focus {
    background: #fe1519 !important;
    color: #ffffff !important;
    border-color: #fe1519 !important;
    border-radius: 50% !important;
}

.edit-assignment-page .inspection-section .inspect-card .photo-title-input,
.edit-assignment-page .inspection-section .inspect-card .photo-desc-input {
    font-size: 13px !important;
}

.edit-assignment-page .inspection-section .inspect-card .photo-desc-input {
    min-height: 72px;
    height: 72px;
    max-height: 72px;
    resize: none;
    overflow-y: auto;
}

.edit-assignment-page .inspection-section .inspect-card .inspect-update-btn {
    border: 1px solid var(--main-color, #fe5e15) !important;
    background: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
}

.edit-assignment-page
    .inspection-section
    .inspect-card
    .inspect-update-btn:hover,
.edit-assignment-page
    .inspection-section
    .inspect-card
    .inspect-update-btn:focus {
    border-color: var(--main-color, #fe5e15) !important;
    background: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
}

.edit-assignment-page .inspect-buttons-container {
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.edit-assignment-page .inspect-upload-btn,
.edit-assignment-page .inspect-generate-btn {
    min-width: 240px;
    min-height: var(--app-large-btn-min-height, 44px) !important;
    padding: var(--app-large-btn-padding-y, 10px)
        var(--app-large-btn-padding-x, 24px) !important;
    border-radius: var(--app-large-btn-radius, 6px) !important;
    font-size: var(--app-large-btn-font-size, 14px) !important;
    font-weight: var(--app-large-btn-font-weight, 500) !important;
    gap: 10px;
}

.edit-assignment-page .btn:not(.btn-close),
.edit-assignment-page button:not(.btn-close) {
    border-radius: var(--app-large-btn-radius, 6px) !important;
}

.edit-assignment-page .page-title-box {
    margin-bottom: var(--app-page-title-row-gap, 16px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.edit-assignment-page .closed-topbar h2,
.edit-assignment-page .page-title-box .color,
.edit-assignment-page .page-title-box .color-dark {
    margin-top: var(--app-page-title-mt, 8px) !important;
    margin-bottom: var(--app-page-title-mb, 6px) !important;
    font-size: var(--app-page-title-size, 26px) !important;
    font-weight: var(--app-page-title-weight, 700) !important;
    line-height: 1.2 !important;
}

.edit-assignment-page .page-title-box .color-dark {
    color: var(--app-page-title-dark-color, #3f3b4a) !important;
}

.edit-assignment-page .assignment-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.edit-assignment-page .assignment-form > .row {
    --bs-gutter-x: 20px !important;
}

.edit-assignment-page .inspect-upload-btn {
    border: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    background: var(--app-secondary-bg, #f3f4f6) !important;
    color: var(--app-secondary-color, #667085) !important;
    box-shadow: var(--app-secondary-shadow, 0 1px 2px rgba(16, 24, 40, 0.05));
}

.edit-assignment-page .inspect-upload-btn:hover,
.edit-assignment-page .inspect-upload-btn:focus {
    border-color: var(--app-secondary-border, #d0d5dd) !important;
    background: var(--app-secondary-bg, #f3f4f6) !important;
    color: var(--app-secondary-color, #667085) !important;
    box-shadow: none !important;
}

.edit-assignment-page .inspect-generate-btn {
    border: 1px solid var(--main-color, #fe5e15) !important;
    background: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
}

.edit-assignment-page .inspect-generate-btn:hover,
.edit-assignment-page .inspect-generate-btn:focus {
    border-color: var(--main-color, #fe5e15) !important;
    background: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.edit-assignment-page .inspect-generate-btn:disabled,
.edit-assignment-page .inspect-generate-btn:disabled:hover,
.edit-assignment-page .inspect-generate-btn:disabled:focus {
    background: #f3f4f6 !important;
    border-color: #d0d5dd !important;
    color: #98a2b3 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.edit-assignment-page .inspect-upload-btn svg,
.edit-assignment-page .inspect-generate-btn svg {
    flex: 0 0 auto;
}

.edit-assignment-page .inspect-upload-btn svg path,
.edit-assignment-page .inspect-generate-btn svg path {
    fill: currentColor;
}

.edit-assignment-page .notes-logs-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.edit-assignment-page .notes-block,
.edit-assignment-page .logs-block {
    background: #ffffff;
    border: 1px solid var(--app-secondary-border, #d0d5dd);
    border-radius: var(--app-field-radius, 6px);
    padding: 22px 24px;
}

.edit-assignment-page .logs-block {
    margin-top: 0 !important;
}

.edit-assignment-page .notes-block .nl-list,
.edit-assignment-page .logs-block .nl-list {
    margin-bottom: 0;
}

.edit-assignment-page .notes-block .nl-item,
.edit-assignment-page .logs-block .nl-item {
    border: 1px solid var(--app-secondary-border, #d0d5dd);
    border-radius: var(--app-field-radius, 6px);
    background: #ffffff;
    padding: 12px 14px;
}

.edit-assignment-page .notes-block .nl-textarea {
    min-height: 92px;
}

.edit-assignment-page textarea.form-control:not(.is-invalid):not(.error):not(.valid):not(.success),
#uploadPhotosModal textarea.form-control:not(.is-invalid):not(.error):not(.valid):not(.success) {
    border: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.edit-assignment-page textarea.form-control:not(.is-invalid):not(.error):not(.valid):not(.success):focus,
#uploadPhotosModal textarea.form-control:not(.is-invalid):not(.error):not(.valid):not(.success):focus {
    border-color: var(--app-secondary-border, #d0d5dd) !important;
    box-shadow: none !important;
    outline: none !important;
}

.edit-assignment-page .ta-save-btn,
.edit-assignment-page .fd-update-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--app-large-btn-min-height, 44px) !important;
    height: var(--app-large-btn-min-height, 44px) !important;
    padding: var(--app-large-btn-padding-y, 10px)
        var(--app-large-btn-padding-x, 24px) !important;
    border-radius: var(--app-large-btn-radius, 6px) !important;
    font-size: var(--app-large-btn-font-size, 14px) !important;
    font-weight: var(--app-large-btn-font-weight, 500) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-sizing: border-box;
    white-space: nowrap !important;
}

.edit-assignment-page .logs-load-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--app-large-btn-min-height, 44px) !important;
    height: var(--app-large-btn-min-height, 44px) !important;
    padding: var(--app-large-btn-padding-y, 10px)
        var(--app-large-btn-padding-x, 24px) !important;
    border-radius: var(--app-large-btn-radius, 6px) !important;
    font-size: var(--app-large-btn-font-size, 14px) !important;
    font-weight: var(--app-large-btn-font-weight, 500) !important;
    line-height: 1.2 !important;
    border: 1px solid var(--main-color, #fe5e15) !important;
    background: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.edit-assignment-page .logs-load-more-btn:hover,
.edit-assignment-page .logs-load-more-btn:focus {
    border-color: var(--main-color, #fe5e15) !important;
    background: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.edit-assignment-page .ta-save-right {
    height: var(--app-large-btn-min-height, 44px) !important;
    margin-top: 0 !important;
    align-self: center !important;
    flex: 0 0 auto;
}

.edit-assignment-page .ta-textarea-save {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.edit-assignment-page .ta-textarea-save .ta-invoice-notice {
    flex: 1 1 auto;
    min-width: 0;
}

.edit-assignment-page .documents-section .doc-actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--app-large-btn-min-height, 44px) !important;
    height: var(--app-large-btn-min-height, 44px) !important;
    padding: 10px 18px !important;
    border-radius: var(--app-large-btn-radius, 6px) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    box-sizing: border-box;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.edit-assignment-page .documents-section .documents-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .edit-assignment-page .documents-section .documents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .edit-assignment-page .documents-section .documents-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.edit-assignment-page .documents-section .doc-card {
    display: flex;
    flex-direction: column;
    min-height: 276px;
    padding: 16px;
}

.edit-assignment-page .documents-section .doc-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 230px;
    margin-bottom: 14px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #eaecf0;
    background: #f8fafc;
}

.edit-assignment-page .documents-section .doc-icon {
    display: block;
}

.edit-assignment-page .documents-section .doc-icon-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.edit-assignment-page .documents-section .doc-icon-file {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
}

.edit-assignment-page .documents-section .doc-eye {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--main-color, #fe5e15) !important;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.edit-assignment-page .documents-section .doc-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0;
    margin-bottom: 12px;
    text-align: center;
}

.edit-assignment-page .documents-section .doc-actions {
    /* display: flex; */
    gap: 12px;
    margin-top: auto;
}

.edit-assignment-page .documents-section .doc-actions .btn {
    width: auto !important;
    flex: 1 1 0;
}

.edit-assignment-page .documents-section .doc-add {
    min-height: 276px;
    padding: 16px;
}

.edit-assignment-page .documents-section .doc-add-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
}

.edit-assignment-page .documents-section .doc-delete {
    border-color: #fe1519 !important;
    background: #fe1519 !important;
    color: #ffffff !important;
}

.edit-assignment-page .documents-section .doc-delete:hover,
.edit-assignment-page .documents-section .doc-delete:focus {
    border-color: #fe1519 !important;
    background: #fe1519 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.edit-assignment-page .documents-section .doc-download {
    border: 1px solid var(--main-color, #fe5e15) !important;
    background: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
}

.edit-assignment-page .documents-section .doc-download:hover,
.edit-assignment-page .documents-section .doc-download:focus {
    border-color: var(--main-color, #fe5e15) !important;
    background: var(--main-color, #fe5e15) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.swal2-popup .swal2-file {
    display: none !important;
}

.swal2-popup.swal2-toast .swal2-input,
.swal2-popup.swal2-toast .swal2-textarea,
.swal2-popup.swal2-toast .swal2-select,
.swal2-popup.swal2-toast .swal2-radio,
.swal2-popup.swal2-toast .swal2-checkbox,
.swal2-popup.swal2-toast .swal2-validation-message,
.swal2-popup.swal2-toast .swal2-actions,
.swal2-popup.swal2-toast .swal2-footer {
    display: none !important;
}

.swal2-popup.swal2-toast .swal2-html-container:empty {
    display: none !important;
}

@media (max-width: 575.98px) {
    .file-upload {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }

    .file-upload .upload-btn {
        width: 100%;
        min-width: 100%;
        min-height: calc(var(--app-upload-height, 48px) - 2px);
        border-right: none !important;
        border-bottom: 1px solid var(--app-secondary-border, #d0d5dd) !important;
        border-radius: 6px !important;
    }

    .file-upload .file-name {
        width: 100%;
        min-height: auto;
        padding: 0 2px 2px;
        white-space: normal;
        word-break: break-word;
    }

    .theme-modal .modal-footer {
        flex-wrap: wrap !important;
    }

    .theme-modal .modal-footer .btn,
    .button-row .cancel-btn,
    .button-row .create-btn {
        width: 100%;
    }

    .edit-assignment-page .inspect-upload-btn,
    .edit-assignment-page .inspect-generate-btn {
        min-width: 100%;
        width: 100%;
    }

    .edit-assignment-page .inspection-section .inspect-img {
        height: 172px;
    }
}

/* Bootstrap col padding */
/* 
.row .col,
.row .col-1,
.row .col-2,
.row .col-3,
.row .col-4,
.row .col-5,
.row .col-6,
.row .col-7,
.row .col-8,
.row .col-9,
.row .col-10,
.row .col-11,
.row .col-12 {
    padding-left: 0px !important;
} */

/* Unified file input fields */
input[type="file"]:not(.file-input):not(.d-none):not(
        .file-input-unified-source
    ) {
    width: 100%;
    min-height: var(--app-upload-height, 50px);
    height: var(--app-upload-height, 50px);
    padding: 0;
    border: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    border-radius: var(--app-upload-radius, 10px) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
    color: var(
        --app-field-empty-color,
        var(--input-placeholder, #9ba2c1)
    ) !important;
    font-family: inherit !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    overflow: hidden;
    box-sizing: border-box !important;
    box-shadow: var(--app-secondary-shadow, 0 1px 2px rgba(16, 24, 40, 0.05));
}

input[type="file"]:not(.file-input):not(.d-none):not(
        .file-input-unified-source
    ):focus {
    border-color: var(--app-secondary-border, #d0d5dd) !important;
    box-shadow: none !important;
    outline: none !important;
}

input[type="file"]:not(.file-input):not(.d-none):not(
        .file-input-unified-source
    )::file-selector-button,
input[type="file"]:not(.file-input):not(.d-none):not(
        .file-input-unified-source
    )::-webkit-file-upload-button {
    height: calc(var(--app-upload-height, 50px) - 2px);
    margin: 0 16px 0 0;
    padding: 0 18px;
    border: none !important;
    border-right: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    background: var(
        --app-upload-btn-bg,
        linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)
    ) !important;
    color: var(--app-upload-btn-color, #344054) !important;
    font-family: inherit !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    box-sizing: border-box;
    transition: none !important;
}

input[type="file"]:not(.file-input):not(.d-none):not(
        .file-input-unified-source
    ):hover::file-selector-button,
input[type="file"]:not(.file-input):not(.d-none):not(
        .file-input-unified-source
    ):hover::-webkit-file-upload-button,
input[type="file"]:not(.file-input):not(.d-none):not(
        .file-input-unified-source
    ):focus::file-selector-button,
input[type="file"]:not(.file-input):not(.d-none):not(
        .file-input-unified-source
    ):focus::-webkit-file-upload-button {
    background: var(
        --app-upload-btn-bg,
        linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)
    ) !important;
    color: var(--app-upload-btn-color, #344054) !important;
}

.file-upload.file-upload-standardized {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    min-height: var(--app-upload-height, 50px);
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    border-radius: var(--app-upload-radius, 10px) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
    box-shadow: var(--app-secondary-shadow, 0 1px 2px rgba(16, 24, 40, 0.05));
}

.file-upload.file-upload-standardized:hover {
    border-color: var(--app-secondary-border, #d0d5dd) !important;
}

.file-upload.file-upload-standardized:focus-within {
    border-color: var(--app-secondary-border, #d0d5dd) !important;
    box-shadow: var(--app-secondary-shadow, 0 1px 2px rgba(16, 24, 40, 0.05));
}

.file-upload.file-upload-standardized .upload-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 auto;
    min-width: 116px;
    min-height: calc(var(--app-upload-height, 50px) - 2px);
    margin-right: 0;
    padding: 0 18px;
    border: none !important;
    border-right: 1px solid var(--app-secondary-border, #d0d5dd) !important;
    border-radius: 0 !important;
    background: var(
        --app-upload-btn-bg,
        linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)
    ) !important;
    color: var(--app-upload-btn-color, #344054) !important;
    font-family: inherit !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    transition: none !important;
}

.file-upload.file-upload-standardized:hover .upload-btn,
.file-upload.file-upload-standardized:focus-within .upload-btn,
.file-upload.file-upload-standardized.has-real-value .upload-btn {
    background: var(
        --app-upload-btn-bg,
        linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)
    ) !important;
    color: var(--app-upload-btn-color, #344054) !important;
    box-shadow: none !important;
}

.file-upload.file-upload-standardized .file-name {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    min-height: calc(var(--app-upload-height, 50px) - 2px);
    padding: 0 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(
        --app-field-empty-color,
        var(--input-placeholder, #9ba2c1)
    ) !important;
    font-family: inherit !important;
    font-size: var(--app-field-font-size, 12px) !important;
    font-weight: var(--app-field-font-weight, 400) !important;
    line-height: var(--app-field-line-height, 1.3) !important;
    box-sizing: border-box;
}

.file-upload.file-upload-standardized.has-real-value .file-name {
    color: var(--app-field-text-color, #667085) !important;
}

.file-upload.file-upload-native input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.file-upload.file-upload-native .upload-btn,
.file-upload.file-upload-native .file-name {
    pointer-events: none;
}

.file-upload.file-upload-native input[type="file"]:disabled {
    cursor: not-allowed;
}

.file-upload.file-upload-native input[type="file"]:disabled ~ .upload-btn,
.file-upload.file-upload-native input[type="file"]:disabled ~ .file-name {
    opacity: 0.65;
}