@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* Helper to prevent theme switch blinking */
.theme-transition-lock,
.theme-transition-lock * {
    transition: none !important;
    transition-duration: 0s !important;
    animation: none !important;
    animation-duration: 0s !important;
}

/* Light Theme */
:root[data-theme="light"] {
    /* General color */
    --white: #ffffff;
    --black: #000000;
    --primary-accent: linear-gradient(152.8deg, #7EA3ED -5.87%, #195BE0 91.81%);
    --dark-accent: #080B10;
    --highlighted-accent: #4180FF;
    /* State color */
    --error-accent: #dc2626;
    --warning-accent: #eab308;
    --success-accent: #17a84d;
    --info-accent: #1a8bca;
    --orange-accent: #fd7900;
    --cancel-accent: #6b6d73;
    /* Approve color */
    --approve-default: ;
    --approve-hover: ;
    --approve-click: ;
    /* Error Color */
    --error-hover: #E55656;
    --error-click: #C00505;
    /* Background color */
    --background-white: #ffffff;
    --background-primary: #f9fafb;
    --background-secondary: #f1f4f9;
    --background-tertiary: #f0f2f7;
    --background-quaternary: #e2e7f0;
    --background-quinary: #cbd2e1;
    --background-disabled: #e2e6f0;
    /* Lines color */
    --line-primary: #e8e8e8;
    --line-secondary: #d5d5d5;
    --line-tertiary: #bfbfbf;
    --line-quaternary: #969696;
    --line-quinary: #595959;
    /* Text color */
    --text-primary: #0f182a;
    --text-secondary: #475269;
    --text-disabled: #a5acb9;
    --text-placeholder: #b9bdc4;
    /* Icon color */
    --icon-primary: #475269;
    /* Chip background color */
    --chip-bg-cancel: #F2F2F2;
    --chip-bg-orange: #FEF1E5;
    --chip-bg-info: #E5F6FF;
    --chip-bg-success: #E5FFEE;
    --chip-bg-warning: #FFF9E5;
    --chip-bg-error: #FFE5E5;
    /* Shadow color */
    --shadow-add-card: 0 2px 6px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Dark Theme */
:root[data-theme="dark"] {
    /* General color */
    --white: #000000;
    --black: #ffffff;
    --primary-accent: linear-gradient(152.8deg, #7EA3ED -5.87%, #195BE0 91.81%);
    --dark-accent: #080B10;
    --highlighted-accent: #4180FF;
    /* State color */
    --error-accent: #dc2626;
    --warning-accent: #eab308;
    --success-accent: #17a84d;
    --info-accent: #1a8bca;
    --orange-accent: #fd7900;
    --cancel-accent: #6b6d73;
    /* Approve color */
    --approve-default: ;
    --approve-hover: ;
    --approve-click: ;
    /* Error Color */
    --error-hover: #E55656;
    --error-click: #C00505;
    /* Background color */
    --background-white: #080B10;
    --background-primary: #080808;
    --background-secondary: #0A0A0A;
    --background-tertiary: #111212;
    --background-quaternary: #18191A;
    --background-quinary: #27292B;
    --background-disabled: #606061;
    /* Lines color */
    --line-primary: #242424;
    --line-secondary: #474747;
    --line-tertiary: #707070;
    --line-quaternary: #8A8A8A;
    --line-quinary: #BDBDBD;
    /* Text color */
    --text-primary: #F2F2F2;
    --text-secondary: #99A6BF;
    --text-disabled: #44474D;
    --text-placeholder: #7D8085;
    /* Icon color */
    --icon-primary: #475269;
    /* Chip background color */
    --chip-bg-cancel: #191919;
    --chip-bg-orange: #171412;
    --chip-bg-info: #121517;
    --chip-bg-success: #111613;
    --chip-bg-warning: #171612;
    --chip-bg-error: #171212;
    /* Shadow color */
    --shadow-add-card: 0 2px 8px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35);
}

* {
    margin: 0px;
    padding: 0px;
    font-family: "Inter", sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    cursor: url('custom-cursor.png'), auto;
}

html,
body {
    width: 100%;
    background-color: var(--white);
    color: var(--text-primary);
}

/* ------------------------------- Scroll Bar ------------------------------- */
* {
    --sb-thumb-color: var(--chip-bg-cancel);
    --sb-size: 4px;
    scrollbar-color: var(--chip-bg-cancel);
}

*::-webkit-scrollbar {
    width: 4px;
    height: 0px;
}

*::-webkit-scrollbar-track {
    border-radius: 9px;
}

*::-webkit-scrollbar-thumb {
    background: var(--chip-bg-cancel);
    border-radius: 42px;
}

.hide-scroll::-webkit-scrollbar {
    display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ------------------------------- Fonts Sizes ------------------------------- */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

/* light */
.light-12 {
    font-size: 12px;
    font-weight: 300;
}

.light-14 {
    font-size: 14px;
    font-weight: 300;
}

.light-16 {
    font-size: 16px;
    font-weight: 300;
}

.light-18 {
    font-size: 18px;
    font-weight: 300;
}

.light-20 {
    font-size: 20px;
    font-weight: 300;
}

.light-22 {
    font-size: 22px;
    font-weight: 300;
}

.light-24 {
    font-size: 24px;
    font-weight: 300;
}

.light-26 {
    font-size: 26px;
    font-weight: 300;
}

.light-32 {
    font-size: 32px;
    font-weight: 300;
}

/* regular */
.regular-10 {
    font-size: 10px;
    font-weight: 400;
}

.regular-12 {
    font-size: 12px;
    font-weight: 400;
}

.regular-14 {
    font-size: 14px;
    font-weight: 400;
}

.regular-16 {
    font-size: 16px;
    font-weight: 400;
}

.regular-18 {
    font-size: 18px;
    font-weight: 400;
}

.regular-20 {
    font-size: 20px;
    font-weight: 400;
}

.regular-22 {
    font-size: 22px;
    font-weight: 400;
}

.regular-24 {
    font-size: 24px;
    font-weight: 400;
}

.regular-26 {
    font-size: 26px;
    font-weight: 400;
}

.regular-28 {
    font-size: 28px;
    font-weight: 400;
}

.regular-30 {
    font-size: 30px;
    font-weight: 400;
}

.regular-32 {
    font-size: 32px;
    font-weight: 400;
}

.regular-36 {
    font-size: 36px;
    font-weight: 400;
}

/* medium */
.medium-12 {
    font-size: 12px;
    font-weight: 500;
}

.medium-14 {
    font-size: 14px;
    font-weight: 500;
}

.medium-16 {
    font-size: 16px;
    font-weight: 500;
}

.medium-18 {
    font-size: 18px;
    font-weight: 500;
}

.medium-20 {
    font-size: 20px;
    font-weight: 500;
}

.medium-22 {
    font-size: 22px;
    font-weight: 500;
}

.medium-24 {
    font-size: 24px;
    font-weight: 500;
}

.medium-26 {
    font-size: 26px;
    font-weight: 500;
}

.medium-28 {
    font-size: 28px;
    font-weight: 500;
}

.medium-30 {
    font-size: 30px;
    font-weight: 500;
}

.medium-32 {
    font-size: 32px;
    font-weight: 500;
}

.medium-36 {
    font-size: 36px;
    font-weight: 500;
}

/* semibold */
.semibold-12 {
    font-size: 12px;
    font-weight: 600;
}

.semibold-14 {
    font-size: 14px;
    font-weight: 600;
}

.semibold-16 {
    font-size: 16px;
    font-weight: 600;
}

.semibold-18 {
    font-size: 18px;
    font-weight: 600;
}

.semibold-20 {
    font-size: 20px;
    font-weight: 600;
}

.semibold-22 {
    font-size: 22px;
    font-weight: 600;
}

.semibold-24 {
    font-size: 24px;
    font-weight: 600;
}

.semibold-26 {
    font-size: 26px;
    font-weight: 600;
}

.semibold-28 {
    font-size: 28px;
    font-weight: 600;
}

.semibold-30 {
    font-size: 30px;
    font-weight: 600;
}

.semibold-32 {
    font-size: 32px;
    font-weight: 600;
}

/*  bold  */
.bold-8 {
    font-size: 8px;
    font-weight: 700;
}

.bold-12 {
    font-size: 14px;
    font-weight: 700;
}

.bold-14 {
    font-size: 14px;
    font-weight: 700;
}

.bold-16 {
    font-size: 16px;
    font-weight: 700;
}

.bold-18 {
    font-size: 18px;
    font-weight: 700;
}

.bold-20 {
    font-size: 20px;
    font-weight: 700;
}

.bold-22 {
    font-size: 22px;
    font-weight: 700;
}

.bold-24 {
    font-size: 24px;
    font-weight: 700;
}

.bold-26 {
    font-size: 26px;
    font-weight: 700;
}

.bold-28 {
    font-size: 28px;
    font-weight: 700;
}

.bold-30 {
    font-size: 30px;
    font-weight: 700;
}

.bold-32 {
    font-size: 32px;
    font-weight: 700;
}

/*  extraBold  */
.extraBold-8 {
    font-size: 8px;
    font-weight: 800;
}

.extraBold-14 {
    font-size: 14px;
    font-weight: 800;
}

.extraBold-16 {
    font-size: 16px;
    font-weight: 800;
}

.extraBold-18 {
    font-size: 18px;
    font-weight: 800;
}

.extraBold-20 {
    font-size: 20px;
    font-weight: 800;
}

.extraBold-22 {
    font-size: 22px;
    font-weight: 800;
}

.extraBold-24 {
    font-size: 24px;
    font-weight: 800;
}

.extraBold-26 {
    font-size: 26px;
    font-weight: 800;
}

.extraBold-28 {
    font-size: 28px;
    font-weight: 800;
}

.extraBold-30 {
    font-size: 30px;
    font-weight: 800;
}

.extraBold-32 {
    font-size: 32px;
    font-weight: 800;
}

/* ------------------------------- Fonts Colors ------------------------------- */
.text-dark {
    color: var(--text-primary) !important;
}

.text-light {
    color: var(--text-secondary) !important;
}

.text--light {
    color: var(--text-secondary) !important;
}

.text-disabled {
    color: var(--text-disabled) !important;
}

.text-highlight {
    color: var(--highlighted-accent) !important;
}

.text-placeholder {
    color: var(--text-placeholder) !important;
}

.text-error {
    color: var(--error-click) !important;
}

.text-success-dark {
    color: var(--success-accent) !important;
}

.text-yellow {
    color: var(--warning-accent) !important;
}

.text-lime {
    color: var(--success-accent) !important;
}

.text-red {
    color: var(--error-accent) !important;
}

.text-danger {
    color: var(--error-accent) !important;
}

.text-warning {
    color: var(--warning-accent) !important;
}

.text-success {
    color: var(--success-accent) !important;
}

.text-secondary,
.text--secondary {
    color: var(--text-secondary) !important;
}

.line-through {
    text-decoration: line-through;
}

.d-none {
    display: none;
}

.border-top {
    border-top: 1px solid var(--line-primary) !important;
}

.border-bottom1,
.border-bottom {
    border-bottom: 1px solid var(--line-primary) !important;
}

.border {
    border: 1px solid var(--line-primary) !important;
}

.bg-white {
    background-color: var(--white) !important;
    background: var(--white) !important;
}

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

.w-60px {
    width: 60px !important;
}

.overflow-y-auto {
    overflow-y: auto;
}

.cursor-pointer {
    cursor: pointer;
}

/* ------------------------------- Spacing ------------------------------- */
.mt-12 {
    margin-top: 12px !important;
}

.mt-14 {
    margin-top: 14px !important;
}

.mt-18 {
    margin-top: 18px !important;
}

.g-14 {
    --bs-gutter-y: 14px;
}

.gap-6 {
    gap: 6px !important;
}

.gap-10 {
    gap: 10px !important;
}

.gap-12 {
    gap: 12px !important;
}

.gap-23 {
    gap: 23px !important;
}

.gap-18 {
    gap: 18px !important;
}

.p-12 {
    padding: 12px;
}

/* ------------------------------- Buttons ------------------------------- */
.btn {
    outline: none;
    width: fit-content;
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 8px;
    border-radius: 4px;
    padding: 0px 18px;
    text-wrap: nowrap;
    height: 36px;
}

.btn:focus {
    box-shadow: none;
}

.btn-sm {
    padding: 0px 16px;
    height: 32px;
}

.btn-md {
    padding: 0px 18px;
    height: 36px;
}

.btn-lg {
    padding: 0px 18px;
    height: 44px;
}

.btn-primary {
    border: none;
    background: var(--primary-accent);
    color: #fff;
}

.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:active:focus {
    border: none;
    border: 1px solid var(--highlighted-accent);
    color: var(--highlighted-accent);
    background-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus {
    border: none;
    background: var(--primary-accent);
    color: #fff;
    box-shadow: none;
}

.btn-primary-none-fill {
    outline: none;
    padding: 6px 16px;
    outline: none;
    width: fit-content;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    text-wrap: nowrap;
}

.btn-primary-none-fill:hover {
    box-shadow: none;
    outline: none;
    border: none;
    background-color: var(--background-quaternary);
    color: var(--highlighted-accent);
}

.btn-primary-none-fill:focus,
.btn-primary-none-fill:active,
.btn-primary-none-fill:active:focus {
    box-shadow: none;
    outline: none;
    border: none;
    background-color: var(--background-primary);
    color: var(--highlighted-accent);
}

.btn-secondary {
    border: 1px solid var(--line-primary);
    background: var(--background-tertiary);
    color: var(--highlighted-accent);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:active:focus {
    border: 1px solid var(--highlighted-accent);
    background: var(--background-tertiary);
    color: var(--highlighted-accent);
}

.btn-Tertiary-no-fill {
    border: none;
    background: transparent;
    color: var(--highlighted-accent);
}

.btn-Tertiary-no-fill:hover,
.btn-Tertiary-no-fill:focus,
.btn-Tertiary-no-fill:active,
.btn-Tertiary-no-fill:active:focus {
    border: none;
    background: transparent;
    color: var(--highlighted-accent);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline-primary:disabled,
.btn-Tertiary-no-fill:disabled {
    border: none;
    background-color: var(--background-disabled);
    background: var(--background-disabled);
    color: var(--text-primary);
    cursor: not-allowed;
}


.icon-btn {
    outline: none;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 23px;
    height: 36px;
    width: 36px;
}

.icon-btn-sm {
    height: 36px;
    width: 36px;
}

.icon-btn-md {
    height: 40px;
    width: 40px;
}

.icon-btn-lg {
    height: 48px;
    width: 48px;
}

.icon-btn-primary {
    border: none;
    border-radius: 23px;
    background: var(--primary-accent);
    color: var(--white);
    color: var(--white);
    box-shadow: 2px 2px 4px 0px #00000026, -2px -2px 4px 0px #00000026;
}

.icon-btn-primary:hover,
.icon-btn-primary:focus,
.icon-btn-primary:active,
.icon-btn-primary:active:focus {
    border: none;
    border-radius: 23px;
    background: var(--primary-accent);
    color: var(--white);
    color: var(--white);
    box-shadow: 2px 2px 4px 0px #00000026, -2px -2px 4px 0px #00000026;
}

.icon-btn-secondary {
    border: 1px solid var(--line-primary);
    background-color: var(--background-tertiary);
    color: var(--text-secondary);
    box-shadow: 1px 1px 6px 0px #00000014, -1px -1px 6px 0px #00000014;
}

.icon-btn-secondary:hover,
.icon-btn-secondary:focus,
.icon-btn-secondary:active,
.icon-btn-secondary:active:focus {
    border: 1px solid var(--line-primary);
    background-color: var(--background-tertiary);
    color: var(--text-secondary);
    box-shadow: 1px 1px 6px 0px #00000014, -1px -1px 6px 0px #00000014;
}

/* ------------------------------- Radio ------------------------------- */
.form-check.radio-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
}

.form-check.radio-custom label {
    color: var(--text-primary);
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--white);
    margin: 0;
    width: 17px;
    height: 17px;
    border: 1px solid var(--icon-primary);
    border-radius: 22px;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
}

input[type="radio"]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 22px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: var(--highlighted-accent);
}

input[type="radio"]:checked {
    border: 3px solid var(--highlighted-accent);
}

input[type="radio"]:disabled {
    border: 3px solid var(--chip-bg-cancel);
    background-color: var(--chip-bg-cancel);
    cursor: not-allowed;
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Input Date icon changes */

html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"] {
    color-scheme: dark;
}

html[data-theme="dark"] input[type="datetime-local"] {
    color-scheme: dark;
}

input[type="date"],
input[type="datetime-local"] {
    position: relative;
    padding: 10px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}

input[type="date"]:before,
input[type="datetime-local"]:before {
    background: none;
    display: block;
    content: url("../images/dateIcon.svg");
    width: 15px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 14px;
}

input[type="date"].is-invalid,
.was-validated .form-control:invalid,
input[type="datetime-local"].is-invalid,
.was-validated .form-control:invalid,
input[type="time"].is-invalid,
.was-validated .form-control:invalid {
    background-position: right calc(.375em + 1.7rem) center;
}

/* Input Time icon changes */

input[type="time"] {
    position: relative;
    padding: 10px;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}

input[type="time"]:before {
    background: none;
    display: block;
    content: url("../images/timeicon.svg");
    /* This is the calendar icon in FontAwesome */
    width: 15px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 14px;
}

/* ------------------------------- Checkbox ------------------------------- */
.form-check-input {
    height: 18px;
    width: 18px;
    border: 1px solid var(--icon-primary);
    background-color: transparent;
    margin: 4px;
}

.form-check-input[type="checkbox"] {
    border-radius: 2px;
    padding: 6px 3px;
}

.form-check-input:focus {
    box-shadow: none;
    border-color: var(--icon-primary);
}

.form-check-input:checked {
    background-color: var(--highlighted-accent);
    border-color: var(--icon-primary);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--highlighted-accent);
    border-color: var(--icon-primary);
}

.form-check-input:checked {
    background-color: var(--highlighted-accent);
    border-color: var(--highlighted-accent);
}

.form-check-input:active {
    filter: none;
}

.form-check-input:focus {
    border-color: var(--icon-primary);
    box-shadow: none;
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url('data:image/svg+xml,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L4.75 9.25L1 5.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* ------------------------------- tabs ------------------------------- */
.tabs-line-custom {
    padding: 8px 0px 0px 0px;
    overflow: auto;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
    border-bottom: 1px solid var(--line-primary);
}

.details-tab-button-inner-container {
    padding: 0px;
    position: sticky;
    z-index: 999;
    top: -1px;
    background: var(--white) !important;
    background-color: var(--white) !important;
    box-shadow: 0px 2px 4px 0px #00000014;
    border-bottom: 1px solid var(--line-primary);
}

.details-tab-button-inner-container .nav-tabs {
    padding: 0px 14px;
}

.tabs-line-custom .nav-link button {
    display: inline-block;
    background: var(--white) !important;
    background-color: var(--white) !important;
}

.tabs-line-custom .nav-link {
    outline: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 400;
    padding: 10px 12px 8px 12px;
    border-bottom: 3px solid transparent;
    box-shadow: none;
}

.tabs-line-custom .nav-link:hover {
    color: var(--text-primary);
    border-bottom: 4px solid transparent;
    padding: 10px 12px 8px 12px;
    background-color: transparent;
}

.tabs-line-custom .nav-link.active,
.tabs-line-custom .nav-link.focus,
.tabs-line-custom .nav-link.focus-within {
    color: var(--text-primary);
    border-bottom: 4px solid var(--highlighted-accent);
    padding: 10px 12px 8px 12px;
    font-size: 16px;
    font-weight: 500;
    background-color: transparent;
}

.tabs-body-content {
    padding: 32px;
    height: fit-content;
    overflow-y: auto;
    overflow-x: hidden;
}

/* rounded tab */
.outline-round-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.outline-round-tabs .nav-item .nav-link {
    border-radius: 61px;
    border: 1px solid var(--line-primary);
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 16.94px;
    padding: 8px 14px 8px 14px;
    font-weight: 500;
}

.outline-round-tabs .nav-item .nav-link.active {
    border: 1px solid var(--highlighted-accent);
    color: var(--highlighted-accent);
}

/* rounded fill tab */
.outline-round-fill-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    height: 40px;
}

.outline-round-fill-tabs .nav-item .nav-link {
    border-radius: 61px;
    border: 1px solid var(--line-secondary);
    background: var(--white);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 16.94px;
    padding: 10px 12px 10px 12px;
    font-weight: 500;
}

.outline-round-fill-tabs .nav-item .nav-link.active {
    border: 1px solid var(--highlighted-accent);
    background: var(--highlighted-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* text fill tab */
.text-fill-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.text-fill-tabs .nav-item .nav-link {
    border: none;
    background: transparent;
    color: var(--text-disabled);
    font-size: 14px;
    line-height: 16.94px;
    padding: 10px 12px 10px 12px;
    font-weight: 500;
}

.text-fill-tabs .nav-item .nav-link.active {
    border: none;
    background: transparent;
    color: var(--highlighted-accent);
    font-size: 14px;
    font-weight: 500;
}

/* Dashboard Tab */
.dashboard-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0px 16px;
    margin-top: 18px;
}

.dashboard-tab-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px;
    border: none;
    width: 100%;
    margin-bottom: 4px;
}

.dashboard-tab-button .nav-item {
    width: 100%;
}

.dashboard-tab-button .nav-item .nav-link {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-primary);
    border: none;
    background-color: var(--background-primary);
    border-radius: 0px;
    height: 33px;
    width: 100%;
    padding: 0px 11px 0px 11px;
    gap: 8px;
    transition: 0.1s ease;
}

.dashboard-tab-button .nav-item .nav-link.active {
    color: var(--white);
    border: none;
    height: 33px;
    width: 100%;
    border-radius: 4px;
    font-weight: 700;
    background-color: var(--highlighted-accent);
    transition: 0.1s ease;
}

/* goals-tab-button */
.goals-tab-btn {
    font-size: 12px !important;
    font-weight: 400;
}

.goals-tab-btn.active {
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ------------------------------- Input ------------------------------- */
.input-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.input-container {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-primary);
}

.input-container .form-control {
    display: block;
    width: 100%;
    padding: 0px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    height: 44px;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid var(--line-primary);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
}

.input-container label {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 400;
}

.input-container .form-control:focus {
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid var(--highlighted-accent);
    box-shadow: none !important;
}

.input-container .form-control::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-placeholder);
}

.input-container .form-control.disabled,
input:disabled {
    background-color: var(--background-disabled);
    border: none;
}

.input-container .input_icon {
    position: absolute;
    top: calc(50% - 12px);
    right: 13px;
    z-index: 2;
}

.input-icons {
    width: 100%;
    position: relative;
}

.input-container .input-icons .form-control {
    padding: 0.48rem 2.3rem 0.48rem 0.75rem;
}

.input-container .input_icon_r {
    position: absolute;
    top: calc(50% - 12px);
    left: 13px;
    z-index: 2;
}

.input-icons_r {
    width: 100%;
    position: relative;
}

.input-container .input-icons_r .form-control {
    padding: 11px 40px 11px 16px;
}

.task-input-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-primary);
}

.task-input-container .form-control {
    display: block;
    width: 100%;
    padding: 12px 8px 0px 7px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    height: 44px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--line-primary);
    border-radius: 0px;
}

.task-input-container .form-control:focus {
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--line-primary);
    box-shadow: none !important;
}

.task-input-container .form-control::placeholder {
    font-size: 24px;
    font-weight: 300;
    color: var(--text-disabled);
}

/* Input Password */
.input-container .password_icon {
    position: absolute;
    top: calc(50% - 12px);
    right: 13px;
    z-index: 2;
}

.password-icons {
    width: 100%;
    position: relative;
}

.tell_country_select {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line-primary);
    border-radius: 4px;
    padding: 4px 8px;
}

.input-bg-light input {
    background-color: var(--background-primary) !important;
}

.input-bg-light input::placeholder {
    color: var(--text-secondary) !important;
}

.form-select {
    display: block;
    width: 100%;
    padding: 0px 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    height: 44px;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid var(--line-primary);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
}

.form-select option {
    background-color: var(--background-white);
    color: var(--black);
    border-color: var(--line-primary);
}

.form-select option:checked {
    background-color: var(--highlighted-accent);
}


.form-select:focus {
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid var(--highlighted-accent);
    box-shadow: none !important;
}

/* ------------------------------- Switch ------------------------------- */
.switch-container {
    display: flex;
    align-items: center;
}

.switch-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 20px;
}

.switch-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-container .toggle-switch .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border-radius: 38px;
    border: 1px solid var(--line-quaternary);
    transition: 0.4s;
}

.switch-container .toggle-switch .toggle-slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 3px;
    bottom: 2.5px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    transition: 0.4s;
}

.switch-container .toggle-switch input:disabled+.toggle-slider {
    background-color: #e0e0e0;
    cursor: not-allowed;
}

.switch-container .toggle-switch input:disabled+.toggle-slider:before {
    background-color: #b0b0b0;
}

.switch-container .toggle-switch input:disabled:checked+.toggle-slider {
    background-color: #e0e0e0;
}

.switch-container .toggle-switch input:checked+.toggle-slider {
    background-color: var(--highlighted-accent);
}

.switch-container .toggle-switch input:checked+.toggle-slider:before {
    transform: translateX(24px);
    background-color: var(--white);
}

*/ .switch-container {
    display: flex;
    align-items: center;
}

.switch-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 20px;
}

.switch-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-container .toggle-switch .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border-radius: 38px;
    transition: 0.4s;
    border: 1px solid var(--line-quaternary);
}

.switch-container .toggle-switch .toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 1px;
    background-color: var(--text-primary);
    border-radius: 50%;
    transition: 0.4s;
    border: 1px solid transparent;
}

.switch-container .toggle-switch input:checked+.toggle-slider {
    background-color: var(--highlighted-accent);
}

.switch-container .toggle-switch input:checked+.toggle-slider:before {
    transform: translateX(22px);
    background-color: var(--white);
}

.switch-container .toggle-switch input:disabled+.toggle-slider {
    background-color: var(--background-disabled);
    cursor: not-allowed;
}

.switch-container .toggle-switch input:disabled+.toggle-slider:before {
    background-color: var(--background-disabled);
}

.switch-container .toggle-switch input:disabled:checked+.toggle-slider {
    background-color: var(--background-disabled);
}

.switch-container .toggle-switch input:disabled:checked+.toggle-slider:before {
    transform: translateX(22px);
}


/* ------------------------------- Launch Screen ------------------------------- */
.launch_main_logo {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.launch_bottom_logo {
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    margin-bottom: 70px;
    justify-content: end;
}

.login_offcanvas {
    border-radius: 16px 16px 0px 0px;
}

.login_offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    padding: 12px 12px 6px 12px;
    justify-content: center;
    background-color: var(--background-white);
}

.login_offcanvas .offcanvas-body {
    padding: 10px 16px 32px 16px;
    background-color: var(--background-white);
}

.login_offcanvas .offcanvas-body .sub_heading {
    width: 80%;
    margin-top: 7px;
}

.login_mehtod_container {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login_mehtod_button {
    height: 46px;
    padding: 8px 18px 8px 18px;
    border-radius: 4px;
    border: 1px solid var(--line-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
}

.login_mehtod_button .regular-16 {
    padding-right: 8px;
}

/* ------------------------------- Custom HR ------------------------------- */
.custom-hr {
    border: 1px solid var(--line-primary);
    width: 100%;
    margin: 0px 0px;
}

.custom-hr-m18 {
    border: 1px solid var(--line-primary);
    width: 100%;
    margin: 18px 0px;
}

.custom-hr-m20 {
    border: 1px solid var(--line-primary);
    width: 100%;
    margin: 20px 0px;
}

.custom-property-hr {
    border: 1px solid var(--line-primary);
    width: 100%;
    margin: 14px 0px;
}

.custom-NotesTab-hr {
    border: 1px solid var(--line-primary);
    width: 100%;
    margin: 12px 0px;
}

/* ------------------------------- Header ------------------------------- */
.wrapper {
    background-color: var(--white);
}

.header {
    background-color: var(--white);
    background: var(--white);
    text-wrap: nowrap;
    box-shadow: 0px 2px 4px 0px #0000000F;
}

/* ------------------------------- Bottom Navbar ------------------------------- */
.bottom-navbar {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 0px 16px 20px 16px;
    background-color: var(--background-primary);
    user-select: none;
}

/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* remove padding bottom from .bottom-navbar for usses , only added for mobile simultation testing */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */

.bottom-navbar .nav .nav-item {
    padding: 0px;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-navbar .nav .nav-item .nav-link {
    padding: 0px;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 5px 0px 5px;
    color: var(--text-primary);
    width: fit-content;
    border-top: 4px solid transparent;
    transition: 0.3s ease-in-out;
    border-radius: 1px;
}

.bottom-navbar .nav .nav-item .nav-link.active {
    padding: 0px;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 5px 0px 5px;
    color: var(--black);
    width: fit-content;
    border-top: 4px solid var(--highlighted-accent);
    transition: 0.3s ease-in-out;
    border-radius: 1px;
}

.bottom-navbar .nav .nav-item .nav-link.active .bottom-nav-btn span svg path {
    fill: var(--highlighted-accent) !important;
}

.bottom-navbar .nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.bottom-navbar .bottom-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ------------------------------- Sidebar ------------------------------- */
.sidebar {
    max-width: 80%;
}

.sidebar-main-body {
    background-color: var(--background-white);
}

.offcanvas-body {
    background-color: var(--white);
}

.sidebar .offcanvas-header {
    padding: 10px 28px 24px 28px;
    opacity: 0px;
    background-color: var(--background-secondary);
}

.sidebar .offcanvas-body {
    padding: 0px;
}

.sidebar_user_icon {
    border-radius: 50%;
    height: 56px;
    width: 56px;
    object-fit: contain;
}

.sidebar-search {
    padding: 20px 24px;
}

.sidebar-nav ul {
    list-style-type: none;
    padding-left: 0px !important;
    margin-bottom: 0px !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-nav ul,
.sidebar-nav-bottom ul {
    list-style-type: none;
    padding-left: 0px !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-nav {
    padding: 20px 8px;
    min-height: calc(100vh - 247px);
    overflow: scroll;
}

.sidebar-nav-bottom {
    padding: 0px 8px 32px 0px;
}

.sidebar-nav .nav-list,
.sidebar-nav-bottom .nav-list {
    width: 100%;
}

.sidebar-nav .nav-list a,
.sidebar-nav-bottom .nav-list a {
    text-decoration: none;
}

.sidebar-nav .nav-list .nav-item,
.sidebar-nav-bottom .nav-list .nav-item {
    text-decoration: none;
    padding: 7px 18px;
    border-radius: 4px;
    display: flex;
    gap: 8px;
    color: var(--text-primary);
    align-items: center;
}

.sidebar-nav .nav-list .nav-item.active,
.sidebar-nav-bottom .nav-list .nav-item.active {
    text-decoration: none;
    padding: 7px 18px;
    border-radius: 4px;
    display: flex;
    gap: 8px;
    background-color: var(--background-quaternary);
    color: var(--highlighted-accent);
    align-items: center;
}

/* 
.sidebar-nav .nav-list .nav-item.active svg,
.sidebar-nav .nav-list .nav-item.active svg path,
.sidebar-nav .nav-list .nav-item.active svg g circle,
.sidebar-nav .nav-list .nav-item.active svg g path,
.sidebar-nav .nav-list .nav-item.active svg mask path {
  fill: var(--highlighted-accent) !important;
} */


.sidebar-nav .nav-list .nav-item .unactive-icon {
    display: block;
}

.sidebar-nav .nav-list .nav-item .active-icon {
    display: none;
}

.sidebar-nav .nav-list .nav-item.active .active-icon {
    display: block;
}

.sidebar-nav .nav-list .nav-item.active .unactive-icon {
    display: none;
}

.sidebar-org-body {
    padding: 20px 16px;
}

.arrow_icon {
    transition: transform 0s;
}

/* ------------------------------- Login ------------------------------- */
.login_header {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login_main_container {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.login_main {
    height: calc(100vh - 0px);
    padding: 0px 16px 16px 16px;
    width: 100%;
}

.login_main .input-container {
    margin-top: 24px;
}

.otp-field-container {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 16px;
}

.otp-field {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    gap: 6px;
    margin-top: 32px;
}

.otp-field input {
    width: 45px;
    font-size: 16px;
    height: 45px;
    color: var(--text-primary);
    padding: 6px;
    text-align: center;
    border-radius: 4px;
    background-color: var(--white);
    border: 1px solid var(--line-primary);
    font-weight: bold;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.otp-field input:focus {
    border: 1px solid var(--highlighted-accent);
}

.otp_resend_img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 100px;
    height: 100%;
}

/* ------------------------------- Search ------------------------------- */
.SearchToOverlay {
    position: fixed;
    top: 120px;
    /* fixed accordingly */
    left: 0;
    z-index: 999999;
    min-width: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    transition: 0.3s linear;
}

/* header */
.header-main {
    height: 60px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border-bottom: 1px solid var(--line-primary);
}

.header-add {
    height: 52px;
    padding: 0px 16px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 4px 4px 0px #00000014;
}

.search-bar-container {
    height: 51px;
    padding: 4px 0px 4px 16px;
    gap: 8px;
}

.search-bar-inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.search-icon {
    width: 100%;
    position: relative;
}

.search-bar-inner-container .search_icon {
    position: absolute;
    top: calc(50% - 14px);
    left: 13px;
    z-index: 2;
}

.search-bar-container .form-control {
    display: block;
    width: 100%;
    padding: 0px 8px 0px 40px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    height: 38px;
    background-color: var(--background-primary);
    background-clip: padding-box;
    border: 1px solid var(--line-secondary);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none !important;
    border-radius: 4px;
}

.search-bar-container .form-control:focus {
    color: var(--text-primary);
    background-color: var(--background-primary);
    border: 1px solid var(--line-primary);
}

.search-bar-container .form-control::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
}

.sub-header {
    padding: 8px 16px 12px 16px;
    gap: 8px;
    border: 0px 0px 2px 0px;
    display: flex;
    align-items: center;
    opacity: 0px;
    background: var(--white);
}


/* ------------------------------- Custom Chips ------------------------------- */
.alert-chip {
    background: var(--chip-bg-error);
    height: 20px;
    padding: 6px 8px 6px 8px;
    gap: 10px;
    text-wrap: nowrap;
    border-radius: 61px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.muted-chip {
    background: var(--chip-bg-cancel);
    height: 20px;
    padding: 6px 8px 6px 8px;
    gap: 10px;
    text-wrap: nowrap;
    border-radius: 61px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.muted-light-chip {
    background: var(--background-primary);
    height: 20px;
    padding: 6px 8px 6px 8px;
    gap: 10px;
    text-wrap: nowrap;
    border-radius: 61px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.active-chip {
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px 4px 8px;
    gap: 6px;
    border-radius: 22px;
    width: fit-content;
    background-color: var(--success-accent);
}

.muted-chip-md {
    background: var(--chip-bg-cancel);
    height: 24px;
    padding: 6px 8px 6px 8px;
    gap: 10px;
    text-wrap: nowrap;
    border-radius: 61px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.muted-basic-chip {
    background: var(--chip-bg-cancel);
    height: 24px;
    padding: 0px 6px 0px 6px;
    gap: 10px;
    text-wrap: nowrap;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.success-basic-chip {
    background: var(--chip-bg-success);
    height: 24px;
    padding: 0px 6px 0px 6px;
    gap: 10px;
    text-wrap: nowrap;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.success-chip {
    background: var(--chip-bg-success);
    height: 20px;
    padding: 0px 10px 0px 10px;
    gap: 6px;
    text-wrap: nowrap;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.lime-chip {
    background: var(--chip-bg-success);
    height: 20px;
    padding: 0px 8px 0px 8px;
    gap: 4px;
    text-wrap: nowrap;
    border-radius: 61px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.warning-basic-chip {
    background-color: var(--chip-bg-warning);
    border: none;
    height: 20px;
    padding: 6px 8px 6px 8px;
    gap: 10px;
    text-wrap: nowrap;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.muted-chip-lg {
    background: var(--chip-bg-cancel);
    height: 24px;
    padding: 6px 8px 6px 8px;
    text-wrap: nowrap;
    gap: 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.muted-dark-chip-lg {
    background: var(--chip-bg-cancel);
    height: 24px;
    padding: 6px 8px 6px 8px;
    text-wrap: nowrap;
    gap: 10px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.warning-chip {
    height: 24px;
    padding: 0px 6px 0px 6px;
    gap: 2px;
    text-wrap: nowrap;
    border-radius: 6px;
    border: 0.5px solid var(--warning-accent);
    opacity: 0px;
    background-color: var(--chip-bg-error);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.warning-chip-rounded {
    height: 22px;
    padding: 0px 8px 0px 8px;
    gap: 2px;
    text-wrap: nowrap;
    border-radius: 22px;
    border: none;
    color: var(--warning-accent);
    background-color: var(--warning-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.error-chip-rounded {
    height: 22px;
    padding: 0px 6px 0px 6px;
    gap: 0px;
    text-wrap: nowrap;
    border-radius: 22px;
    border: none;
    color: var(--error-accent);
    background-color: var(--chip-bg-error);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.success-outline-chip-sm {
    height: 23px;
    padding: 0px 6px 0px 6px;
    text-wrap: nowrap;
    gap: 8px;
    border-radius: 41px;
    border: 1px solid var(--success-accent);
    background-color: var(--chip-bg-success);
    color: var(--success-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.amenities-chip {
    height: 44px;
    padding: 0px 18px 0px 18px;
    text-wrap: nowrap;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background-color: var(--background-primary);
    width: fit-content;
}

.unmapped-chip {
    height: 20px;
    padding: 0px 8px 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 4px;
    background-color: var(--warning-accent);
    width: fit-content;
}

.mapped-chip {
    height: 20px;
    padding: 0px 8px 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 4px;
    background-color: var(--success-accent);
    width: fit-content;
}


.user-chip {
    height: 36px;
    padding: 0px 8px 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 22px;
    background-color: var(--chip-bg-cancel);
    width: fit-content;
    text-wrap: nowrap;
}

.user-chip-sm {
    height: 23px;
    padding: 0px 12px 0px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 22px;
    background-color: var(--chip-bg-cancel);
    width: fit-content;
    text-wrap: nowrap;
}

.role-chip {
    height: 36px;
    padding: 0px 8px 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-wrap: nowrap;
    border-radius: 22px;
    background-color: var(--icon-primary);
    width: fit-content;
}

.user_name_badge {
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-accent);
    border-radius: 48px;
}

.kanban_chip {
    height: 32px;
    padding: 7.5px 12px 7.5px 12px;
    gap: 6px;
    border-radius: 23px;
    background-color: #E4E4E4;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------- Kanban View ------------------------------- */
.kanban-main {
    padding: 0px 16px 16px 16px;
    background-color: var(--background-primary);
}

.kanban_container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    overflow: auto;
    height: calc(100vh - 194px);
}

.kanban_type_header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0px 6px 0px;
}

.kanban-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.kanban_view_list {
    padding: 12px 0px 16px 0px;
    border-bottom: 1px solid var(--line-primary);
}

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

.kanban_switch_header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 12px 16px;
    overflow: auto;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
}

.tags-count {
    position: absolute;
    top: -7px;
    right: -8px;
    padding: 4px;
    height: fit-content;
    width: fit-content;
    border-radius: 100%;
    background-color: var(--highlighted-accent);
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
    line-height: 8px;
}

/* ------------------------------- listing ------------------------------- */
.listing-main-container {
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: calc(100vh - 130px);
    background-color: var(--background-secondary);
}

.listing-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background-color: var(--white);
}

.listing-card-container {
    border: 1px solid var(--line-primary);
    border-radius: 4px;
}

.listing-card-inner-container {
    padding: 10px 12px;
    gap: 10px;
}

.listing-quick-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 12px;
    height: 32px;
    cursor: pointer;
    background-color: var(--background-secondary);
}

/* ------ Inquiry Details ------ */
.header-details {
    height: 52px;
    width: 100%;
    z-index: 999;
    top: 0px;
    padding: 0px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--background-secondary);
}

.main-details {
    overflow: auto;
    height: calc(100vh - 55px);
}

.details-sub-header {
    padding: 24px 16px 0px 16px;
    gap: 26px;
}

/* ------------------------------- Offcanvas & Modals ------------------------------- */
/* Filter-Offcanvas */
.FilterOffcanvas {
    min-height: 100vh;
    box-shadow: 0px -16px 20.5px 0px #0000001F;
}

.FilterOffcanvas .offcanvas-header {
    height: 54px;
    padding: 0px 16px 0px 16px;
    border-bottom: 1px solid var(--line-primary);
    opacity: 0px;
    background-color: var(--background-white);
}

.FilterOffcanvas .offcanvas-body {
    background-color: var(--background-white);
    padding: 0px;
}

.Filter-tab-container .Filter-tab-btn {
    width: fit-content;
    text-wrap: nowrap;
}

.Filter-tab-container .Filter-tab-btn .nav-link {
    height: 54px;
    padding: 0px 15px 0px 15px;
    border-radius: 0px;
    text-align: left;
    color: var(--text-primary);
    border-bottom: 1px solid var(--line-primary);
}

.Filter-tab-container .Filter-tab-btn .nav-link.active {
    height: 54px;
    padding: 0px 15px 0px 15px;
    border-radius: 0px;
    text-align: left;
    color: var(--text-primary);
    background-color: var(--chip-bg-cancel);
    border-bottom: 1px solid var(--line-primary);
}

.Filter-tab-container .Filter-tab-content {
    border-left: 1px solid var(--line-primary);
    height: calc(100vh - 98px);
    overflow: scroll;
    width: 100%;
    padding: 20px 14px 20px 14px;
    gap: 12px;
}

.condition-filter-header {
    background-color: var(--background-primary);
    padding: 14px 8px 14px 8px;
    border-radius: 4px;
}

.condition-filter-container .condition-filter-header {
    display: flex;
    align-items: center;
    user-select: none;
    justify-content: space-between;
}

.condition-filter-container .condition-filter-header button {
    display: flex;
    align-items: center;
    gap: 6px;
}

.condition-filter-container .condition-filter-body {
    padding: 0px 8px 14px 8px;
    user-select: none;
    background-color: var(--background-primary);
}

.condition-filter-btn {
    display: flex;
    user-select: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 8px 14px 0px;
    border-bottom: 1px solid var(--line-primary);
}

.condition-filter-btn:last-child {
    display: flex;
    user-select: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 8px 14px 0px;
    border-bottom: none;
}

.filter-inner-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.condition-filter-body {
    display: none;
}

.condition-filter-body.show {
    display: block;
}

.con-filter-arrow.rotate {
    transform: rotate(90deg);
}

/* Tags Offcanvas */
.tagOffcanvas {
    background-color: var(--background-white);
}

.tagOffcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    padding: 7px;
    justify-content: center;
    background-color: var(--background-white);
}

.tagOffcanvas .offcanvas-body {
    padding: 3px 16px 32px 16px;
    background-color: var(--background-white);
}

.tags-inner-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* list offcanvas */
.list_offcanvas {
    border-radius: 16px 16px 0px 0px;
    box-shadow: 0px -16px 20.5px 0px #0000001F;
    background-color: var(--background-white);
}

.list_offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    padding: 12px 12px 6px 12px;
    justify-content: center;
    background-color: var(--background-white);
}

.list_offcanvas .offcanvas-body {
    padding: 10px 16px 32px 16px;
    background-color: var(--background-white);
}

.list_offcanvas .offcanvas-button {
    padding: 12px 4px 12px 4px;
    cursor: pointer;
    gap: 16px;
    width: 100%;
    border-radius: 4px;
    border-bottom: 1px solid var(--line-primary);
}

.list_offcanvas .offcanvas-button:last-of-type {
    border-bottom: 1px solid transparent;
}

/* View offcanvas */
.view_offcanvas {
    background-color: var(--background-white);
    border-radius: 16px 16px 0px 0px;
    box-shadow: 0px -16px 20.5px 0px #0000001F;
}

.view_offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    padding: 12px 12px 6px 12px;
    justify-content: center;
    background-color: var(--background-white);
}

.view_offcanvas .offcanvas-body {
    padding: 10px 16px 32px 16px;
    background-color: var(--background-white);
}

.view_offcanvas .offcanvas-button {
    padding: 12px 4px 12px 4px;
    cursor: pointer;
    gap: 16px;
    width: 100%;
    border-radius: 4px;
    border-bottom: 1px solid var(--line-primary);
}

.view_offcanvas .offcanvas-button:last-of-type {
    border-bottom: 1px solid transparent;
}

/* list offcanvas */
.list_offcanvas {
    border-radius: 16px 16px 0px 0px;
    box-shadow: 0px -16px 20.5px 0px #0000001F;
}

.list_offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    padding: 12px 12px 6px 12px;
    justify-content: center;
    background-color: var(--background-white);
}

.list_offcanvas .offcanvas-body {
    background-color: var(--background-white);
    padding: 10px 16px 32px 16px;
}

.list_offcanvas .offcanvas-button {
    padding: 12px 4px 12px 4px;
    cursor: pointer;
    gap: 16px;
    width: 100%;
    border-radius: 4px;
    border-bottom: 1px solid var(--line-primary);
}

.list_offcanvas .offcanvas-button:last-of-type {
    border-bottom: 1px solid transparent;
}

/* Filter_offcanvas */
.Filter_offcanvas {
    background-color: var(--background-white);
    border-radius: 16px 16px 0px 0px;
    box-shadow: 0px -16px 20.5px 0px #0000001F;
}

.Filter_offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    padding: 12px 12px 6px 12px;
    justify-content: center;
    background-color: var(--background-white);
}

.Filter_offcanvas .offcanvas-body {
    background-color: var(--background-white);
    padding: 10px 16px 32px 16px;
}

.Filter_offcanvas .offcanvas-button {
    padding: 12px 4px 12px 4px;
    cursor: pointer;
    gap: 16px;
    width: 100%;
    border-radius: 4px;
    /* border-bottom: 1px solid var(--line-primary); */
    border-bottom: 1px solid var(--line-primary);
}


.completed_chip {
    height: 20px;
    padding: 8px;
    gap: 6px;
    border-radius: 4px;
    background-color: var(--success-accent);
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter_chip_container {
    padding: 9px 16px;
    gap: 8px;
    border-radius: 4px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


/* .Filter_offcanvas .offcanvas-button:last-of-type{
  border-bottom: 1px solid transparent;
} */
/* Export Modal */
.Export_Modal .modal-content {
    background-color: var(--background-primary);
}

.Export_Modal .modal-body {
    padding: 42px 24px;
    gap: 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    background-color: var(--background-primary);
}

.Export_Modal .Export_Modal_header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
}

/* overview-details */
.overview-container {
    position: relative;
    height: fit-content;
    margin-bottom: 92px;
}

.details-title {
    margin: 0px 16px 0px 18px;
    padding: 18px 0px 6px 0px;
    border-top: 1px solid var(--line-primary);
}

.overview-details {
    padding: 18px 16px 26px 16px;
    gap: 28px;
    display: flex;
    flex-direction: column;
}

.overview-details-p {
    padding: 6px 16px 26px 16px;
    gap: 28px;
    display: flex;
    flex-direction: column;
}

.overview-cards-container {
    padding: 12px 16px 12px 16px;
    background-color: var(--chip-bg-warning);
}

.overview-cards {
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 0px 0px 20px 0px;
    gap: 10px;
    opacity: 0px;
}

.overview-bottombar {
    background-color: var(--white);
    padding: 12px 16px 40px 16px;
    box-shadow: 0px -4px 2px 0px #0000000a;
    width: 100%;
    position: fixed;
    bottom: 0;
}

/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* adjust margin bottom and height from .overview-bottombar according to .overview-bottombar  for usses , here only added for mobile simultation testing */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */

.overview-bottombar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.overview-bottombar-inner button {
    padding: 0px 14px;
}

/* property */
.inquiry-property-container {
    padding: 24px 16px;
}

.inquiry-property-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.property-list-img {
    position: relative;
    display: flex;
    align-items: end;
}

.property-list-img-overlay {
    position: absolute;
    padding: 0px 0px 4px 4px;
}

.property-list-chip {
    padding: 2px 6px 2px 6px;
    color: var(--white);
    gap: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.78);
}

/* Followups */

.dashboard-followup-card {
    border: 1px solid var(--line-primary);
    padding: 12px;
    border-radius: 4px;
    color: var(--text-primary);
}

.inquiry-followup-cards-container {
    padding: 12px 16px 12px 16px;
}

.inquiry-followup-cards {
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 10px 0px 0px 0px;
    gap: 10px;
    opacity: 0px;
}

.followup-tab-sticky {
    position: sticky;
    top: 45px;
    background-color: var(--white);
    padding: 18px 0px 12px 0px;
    z-index: 99;
}

.followup-details-container {
    padding: 0px 16px;
}

/* Notes */
.NotesTab-sticky {
    position: sticky;
    top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    padding: 18px 16px 12px 16px;
    z-index: 99;
}

.NotesTab-container {
    padding: 4px 16px;
    margin-bottom: 92px;
}

/* timeline */
.timeline-body {
    padding-left: 10px;
}

.timeline-card input {
    margin-left: 1px;
}

.timeline-body-inner {
    padding-left: 17px;
    padding-bottom: 10px;
    border-left: 1px solid var(--line-primary);
}

.timeline-card {
    margin-top: 4px;
}


.followup-timeline-highlight {
    border-left: 3px solid var(--highlighted-accent);
    padding: 8px 0px 8px 16px;
    background-color: var(--background-secondary);
    margin-top: 8px;
}

.followup-timeline-complete {
    border-left: 3px solid var(--success-accent);
    padding: 8px 0px 8px 16px;
    background-color: var(--chip-bg-success);
    margin-top: 8px;
}

/* -------- Add Inquiry -------- */
.add-main-container {
    background-color: var(--background-secondary);
    padding: 14px 0px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
    height: calc(100vh - 53px);
}

.add-inner-container {
    background-color: var(--white);
    padding: 24px 16px 24px 16px;
    gap: 16px;
}

/* -------- Add Task -------- */
.module-container {
    padding: 12px;
    gap: 24px;
    border-radius: 4px;
    background-color: var(--background-secondary);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.input-container-col {
    display: flex;
    align-items: center;
    gap: 8px;
}

.set-reminder-container {
    padding: 16px;
    border-radius: 4px;
    background-color: var(--background-secondary);
}

.set-reminder-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0px;
}

.set-reminder-container {
    display: none;
}

.set-reminder-container.show {
    display: block;
}

.checklist-container {
    padding: 1px 16px 1px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--background-primary);
}

.attachment-container {
    border: 1px dashed var(--highlighted-accent);
    border-radius: 4px;
    padding: 16px;
    cursor: pointer;
    user-select: none;
}

/*-------- Task Details -------- */
.task-detail-main {
    overflow: auto;
    height: calc(100vh - 150px);
    padding: 12px 16px;
    margin-bottom: 97px;
}

.module-highlight-container {
    background-color: var(--highlighted-accent);
    display: flex;
    align-items: center;
    height: 28px;
    justify-content: space-between;
    padding: 0px 16px 0px 16px;
    margin-bottom: 28px;
    border-radius: 4px;
}

.task-detail-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line-primary);
    padding: 18px 0px;
}

.details-reminder-container {
    background-color: var(--background-primary);
    padding: 8px 16px;
    margin-top: 8px;
}

.details-reminder-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9.5px 0px;
    border-top: 1px solid var(--line-primary);
}

.detail-checklist-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0px;
    border-bottom: 1px solid var(--line-primary);
}

.attached-file-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.attached-file {
    display: flex;
    height: 64px;
    width: 64px;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--black);
    border-radius: 4px;
}

.attached-file img {
    height: 64px;
    width: 64px;
    object-fit: cover;
    gap: 16px;
    border: 1px solid var(--black);
    border-radius: 4px;
}

.task_checklist {
    padding: 3px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task_attachment_container {
    padding: 26px 16px 26px 16px;
}

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

.task_attachment_inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.AttachmentFloatButton {
    position: absolute;
    bottom: 30px;
    right: 16px;
}

.task_notes_card {
    display: flex;
    gap: 8px;
    border-radius: 2px;
}

.task_notes_card_body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    width: 100%;
}

.task_notes_card_body span {
    text-wrap: nowrap !important;
}

.task_notes_card_inner {
    background-color: var(--background-secondary);
    padding: 8px;
}

.Task-NotesTab-sticky {
    position: sticky;
    top: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    padding: 26px 16px 20px 16px;
    z-index: 99;
}

.Task-NotesTab-container {
    padding: 0px 16px 16px 16px;
    margin-bottom: 96px;
}

/* ----------------------------- Settings ------------------------------- */
.settings-header {
    height: 52px;
    display: flex;
    align-items: center;
    background-color: var(--white);
    padding: 0px 16px 0px 16px;
}

.settings-main-container {
    background-color: var(--background-tertiary);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
    height: calc(100vh - 165px);
}

.settings-title-container {
    padding: 12px 16px 0px 16px;
    background-color: var(--white);
}

.settings-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    background-color: var(--white);
    padding: 0px 16px;
    border-bottom: 1px solid var(--line-primary);
}

.setting-bottom-border {
    border-bottom: 1px solid var(--line-primary);
}

/* ----------------------------- Property Search ------------------------------- */
.property-search-box .form-control {
    box-shadow: 0px 4px 8px 0px #00000014 !important;
    background-color: var(--white);
    height: 44px;
}

.property-search-box .form-control:focus {
    box-shadow: 0px 4px 8px 0px #00000014 !important;
    background-color: var(--white);
    height: 44px;
}

.property-container {
    padding: 8px 16px;
    overflow: auto;
    height: calc(100vh - 165px);
    padding-bottom: 80px;
}

.property-image-container {
    background-repeat: no-repeat;
    object-fit: cover;
    height: fit-content;
    max-height: 300px;
    gap: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.property-image-container img {
    background-repeat: no-repeat;
    object-fit: cover;
    width: 100%;
    max-height: 300px;
}

.property-image-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 16px;
}

.property-Details-container {
    padding: 31px 16px;
}

.amenities-chip-container {
    display: flex;
    margin-top: 18px;
    align-items: center;
    gap: 8px;
    overflow: auto;
    overflow: auto;
    white-space: nowrap;
}

/* ----------------------------- Dashboard ------------------------------- */
.dashboard-main-container {
    overflow: auto;
    height: calc(100vh - 61px);
    background-color: var(--background-secondary);
}

.p16 {
    padding: 16px;
}

/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* adjust margin bottom and height from .dashboard-main-container according to .bottom-navbar  for usses , here only added for mobile simultation testing */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */
/* Alert */

.inquiry-count-card {
    padding: 14px 12px;
    text-wrap: nowrap;
    flex-wrap: wrap;
    border-radius: 4px;
    border: 1px solid var(--line-primary);
    background: var(--white);
}

.follpw-up-card {
    padding: 8px 12px;
    text-wrap: nowrap;
    flex-wrap: wrap;
    border-radius: 4px;
    border: 1px solid var(--line-primary);
    background: var(--chip-bg-cancel);
}

.property-card-container {
    padding: 24px 16.5px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--white);
}

.property-info-card-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: 8px;
}

.property-info-card {
    padding: 8px 0px 8px 14px;
    gap: 8px;
    width: 100%;
    text-wrap: nowrap;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.property-info-card.success {
    background: var(--chip-bg-success);
    border-left: 3px solid var(--success-accent);
}

.property-info-card.info {
    background: var(--chip-bg-info);
    border-left: 3px solid var(--info-accent);
}

.property-info-card.alerts {
    background: var(--chip-bg-error);
    border-left: 3px solid var(--error-accent);
}

/* Onboarding Flow */
.onboarding_main {
    height: calc(100vh - 64px);
    width: 100%;
}

.onboarding_inner_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.onboarding-main {
    padding: 24px 16px;
}

.onboarding-inputs-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    align-items: end;
}

.onboarding-body {
    padding: 28px 16px;
}

.onboarding-button {
    padding: 0px 16px 24px 16px;
}

/* Onboarding step-2 */
.onboarding-join-container {
    display: flex;
    margin-top: 24px;
    flex-direction: column;
    gap: 16px;
}

.onboarding-join-add-container {
    padding: 20px;
    gap: 18px;
    border-radius: 4px;
    border: 1px solid var(--line-primary);
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

/* steps */
.steps-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.steps-bar {
    border: 3px solid var(--background-tertiary);
    border-radius: 33px;
    width: 100%;
    margin: 0px;
    opacity: 100%;
}

.steps-bar.active {
    border: 3px solid var(--highlighted-accent);
    border-radius: 33px;
    width: 100%;
    margin: 0px;
    opacity: 100%;
}

/* import */
.import-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
}

.import-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.import-button {
    padding: 0px 16px 16px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.import-attachment-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 2px;
    border: 0.8px dashed var(--highlighted-accent);
}

.import-attachment {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    padding: 40px 0px;
}

.import-attached-file-container {
    padding: 12px 16px 12px 16px;
    gap: 10px;
    border-radius: 4px;
    border: 1px solid var(--line-primary);
}

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

.attached-file-detail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mapping-container {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    border-radius: 4px;
    border: 1px solid var(--line-primary);
}

.import-mapping-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 32px;
}

.mapping-bottom-button {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--white);
    padding: 4px 0px 4px 0px;
}

.import-main-body {
    padding: 28px 16px;
    height: calc(100vh - 125px);
    overflow: auto;
    margin-bottom: 60px;
}

.mapped-card-container {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mapped-card {
    padding: 16px;
    border-radius: 4px;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    background-color: var(--chip-bg-success);
    border-left: 3px solid var(--success-accent);
}

.Unmapped-card {
    padding: 16px;
    width: 100%;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--chip-bg-warning);
    border-left: 3px solid var(--warning-accent);
}

/* Create custom view */
.ccv_header {
    padding: 0px 16px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--background-secondary);
}

.ccv-step-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.ccv-body {
    padding: 24px 16px;
}

.ccv-body-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ccv-button {
    padding: 12px 16px 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0px -4px 2px 0px #0000000A;
    background-color: var(--white);
}

.ccv-button-fixed {
    position: fixed;
    bottom: 10px;
}

.condition-container {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 22px;
    background-color: var(--background-primary);
}

.ccv-body-conditions {
    padding: 28px 16px;
    height: calc(100vh - 168px);
    overflow: auto;
    margin-bottom: 60px;
}

.column-container-selection {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.column-container-btn {
    display: flex;
    user-select: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0px 8px 0px 0px;
    height: 32px;
}

.user_role_container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chip-btn {
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Media Query for Small Mobile devices */
@media only screen and (max-width: 328px) {
    .light-14 {
        font-size: 12px;
        font-weight: 300;
    }

    .light-16 {
        font-size: 14px;
        font-weight: 300;
    }

    .light-18 {
        font-size: 16px;
        font-weight: 300;
    }

    .regular-10 {
        font-size: 8px;
        font-weight: 400;
    }

    .regular-12 {
        font-size: 10px;
        font-weight: 400;
    }

    .regular-14 {
        font-size: 12px;
        font-weight: 400;
    }

    .regular-16 {
        font-size: 14px;
        font-weight: 400;
    }

    .regular-18 {
        font-size: 16px;
        font-weight: 400;
    }

    .regular-20 {
        font-size: 18px;
        font-weight: 400;
    }

    .regular-22 {
        font-size: 20px;
        font-weight: 400;
    }

    .regular-24 {
        font-size: 22px;
        font-weight: 400;
    }

    .regular-26 {
        font-size: 24px;
        font-weight: 400;
    }

    .regular-28 {
        font-size: 26px;
        font-weight: 400;
    }

    .regular-30 {
        font-size: 28px;
        font-weight: 400;
    }

    .regular-32 {
        font-size: 30px;
        font-weight: 400;
    }

    .regular-36 {
        font-size: 34px;
        font-weight: 400;
    }

    .medium-12 {
        font-size: 10px;
        font-weight: 500;
    }

    .medium-14 {
        font-size: 12px;
        font-weight: 500;
    }

    .medium-16 {
        font-size: 14px;
        font-weight: 500;
    }

    .medium-18 {
        font-size: 16px;
        font-weight: 500;
    }

    .medium-20 {
        font-size: 18px;
        font-weight: 500;
    }

    .medium-22 {
        font-size: 20px;
        font-weight: 500;
    }

    .medium-24 {
        font-size: 22px;
        font-weight: 500;
    }

    .medium-26 {
        font-size: 24px;
        font-weight: 500;
    }

    .medium-28 {
        font-size: 26px;
        font-weight: 500;
    }

    .medium-30 {
        font-size: 28px;
        font-weight: 500;
    }

    .medium-32 {
        font-size: 30px;
        font-weight: 500;
    }

    .medium-36 {
        font-size: 34px;
        font-weight: 500;
    }

    .semibold-12 {
        font-size: 10px;
        font-weight: 600;
    }

    .semibold-14 {
        font-size: 12px;
        font-weight: 600;
    }

    .semibold-16 {
        font-size: 14px;
        font-weight: 600;
    }

    .semibold-18 {
        font-size: 16px;
        font-weight: 600;
    }

    .semibold-20 {
        font-size: 18px;
        font-weight: 600;
    }

    .semibold-22 {
        font-size: 20px;
        font-weight: 600;
    }

    .semibold-24 {
        font-size: 22px;
        font-weight: 600;
    }

    .semibold-26 {
        font-size: 24px;
        font-weight: 600;
    }

    .semibold-28 {
        font-size: 26px;
        font-weight: 600;
    }

    .semibold-30 {
        font-size: 28px;
        font-weight: 600;
    }

    .bold-8 {
        font-size: 6px;
        font-weight: 700;
    }

    .bold-14 {
        font-size: 12px;
        font-weight: 700;
    }

    .bold-16 {
        font-size: 14px;
        font-weight: 700;
    }

    .bold-18 {
        font-size: 16px;
        font-weight: 700;
    }

    .bold-20 {
        font-size: 18px;
        font-weight: 700;
    }

    .bold-22 {
        font-size: 20px;
        font-weight: 700;
    }

    .bold-24 {
        font-size: 22px;
        font-weight: 700;
    }

    .bold-26 {
        font-size: 24px;
        font-weight: 700;
    }

    .bold-28 {
        font-size: 26px;
        font-weight: 700;
    }

    .bold-30 {
        font-size: 28px;
        font-weight: 700;
    }

    .otp-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        /* gap: 6px; */
        margin-top: 24px;
    }

    .otp-field input {
        width: 40px;
        font-size: 16px;
        height: 40px;
        color: var(--text-primary);
        padding: 6px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid var(--line-primary);
        background: transparent;
        font-weight: bold;
        outline: none;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .sidebar .offcanvas-header {
        padding: 35px 15px 15px 15px;
        text-wrap: nowrap;
    }

    .bottom-navbar {
        padding: 0px 5px 20px 5px;
    }

    .bottom-navbar .nav {
        display: flex;
        flex-wrap: nowrap;
    }

    .bottom-navbar .nav .nav-item .nav-link {
        font-size: 12px;
        padding: 2px 2px 0px 2px;
    }

    .bottom-navbar .nav .nav-item .nav-link.active {
        font-size: 12px;
        padding: 2px 2px 0px 2px;
    }

    .overview-bottombar {
        background-color: var(--white);
        padding: 12px 16px 40px 16px;
        box-shadow: 0px -4px 2px 0px #0000000a;
        width: 100%;
        position: fixed;
        bottom: 0;
    }

    .overview-bottombar-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 10px;
    }

    .overview-bottombar-inner button {
        padding: 0px 15px;
    }

    .tabs-line-custom {
        padding: 4px 0px 0px 0px;
    }

    .followup-tab-sticky {
        padding: 8px 0px 8px 0px;
    }

    .followup-tab-sticky .outline-round-tabs {
        flex-wrap: nowrap;
        display: flex;
        gap: 4px;
        margin-bottom: 4px;
    }

    .details-sub-header {
        padding: 18px 16px 0px 16px;
        gap: 26px;
    }

    .overview-details {
        gap: 20px;
    }

    .inquiry-property-card {
        text-wrap: nowrap;
    }

    .inquiry-property-card .regular-14 {
        font-size: 11px;
    }

    .mapped-card .regular-16 {
        font-size: 12px !important;
    }

    .Unmapped-card .regular-16 {
        font-size: 12px !important;
    }

    .login_offcanvas .offcanvas-header {
        display: flex;
        align-items: center;
        padding: 8px;
        justify-content: center;
    }

    .login_offcanvas .offcanvas-body {
        padding: 12px 16px 16px 16px;
    }

    .login_offcanvas .offcanvas-body .sub_heading {
        width: 100%;
        margin-top: 0px;
    }

    .login_mehtod_container {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .login_mehtod_button {
        height: 36px;
        padding: 8px 18px 8px 18px;
        border-radius: 4px;
        border: 1px solid var(--line-primary);
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100% !important;
    }

    /* ----------------------------- Custom Dropdown ------------------------------- */
    .custom-dropdown {
        height: 30px;
        padding: 3px 9px 3px 9px;
        gap: 2px;
        border-radius: 25px;
        border: 1px solid var(--line-primary);
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: fit-content;
        text-wrap: nowrap;
        background-color: transparent;
    }
}

/* Media Query for Tab devices */
@media only screen and (min-width: 600px) {
    .launch_main_logo img {
        min-width: 140%;
        object-fit: cover;
    }

    .otp-field {
        display: flex;
        align-items: center;
        justify-content: start;
        width: 100%;
        gap: 6px;
        margin-top: 24px;
    }

    /* steps */
    .steps-bar {
        border: 3px solid var(--background-tertiary);
    }

    .steps-bar.active {
        border: 3px solid var(--highlighted-accent);
    }

    .otp-field-container {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 16px;
    }
}

.header-collapse .accordion-body .sub-header {
    padding: 4px 16px 4px 0px;
    overflow: auto;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
}

.searchClosebutton {
    display: none;
}

.accordionCollapseButton.collapsed svg path {
    fill: var(--icon-primary);
}


/* ========================= snackbar / Toster ========================= */
#snackbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    visibility: hidden;
    min-width: 300px;
    background-color: rgba(23, 168, 77, 1);
    color: var(--white);
    text-align: start;
    border-radius: 2px;
    padding: 6px 12px;
    margin: 0px 20px;
    border-radius: 4px;
    position: fixed;
    z-index: 1;
    left: 0px;
    bottom: 130px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 130px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 130px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 130px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 130px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

.organization_card {
    border: 1px solid var(--line-tertiary);
    background: var(--background-white);
    padding: 12px 8px;
    border-radius: 2px;

}

/* Subscription Plan */

.subscription-plan-card {
    border: 1px solid var(--line-primary);
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.subscription-plan-card .subscription-plan-card-title {
    padding: 4px 16px;
    background-color: var(--background-disabled);
    border-bottom: 1px solid var(--line-primary);
    color: var(--white);
}

.subscription-plan-card.active {
    border: 1px solid var(--highlighted-accent);
    width: 100%;
    box-shadow: 0px 1px 1px 0px #30303030, 0px 0px 1px 0px #00000030;
    border-radius: 6px;
    overflow: hidden;
    background-color: transparent;
}

.subscription-plan-card.active .subscription-plan-card-title {
    padding: 4px 16px;
    background-color: var(--highlighted-accent);
    border-bottom: 1px solid var(--highlighted-accent);
}

.subscription-selecte-plan {
    border-top: 1px solid var(--line-primary);
    border-bottom: 1px solid var(--line-primary);
    width: 100%;
    background-color: var(--highlighted-accent);
    padding: 0px 3px;
}

/* ======================= */

.product-selection-card {
    border: 1px solid var(--line-primary);
    background: var(--background-primary);
    backdrop-filter: blur(50px);
    padding: 14px 22px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-selection-card:focus,
.product-selection-card:hover {
    background: var(--background-tertiary);
    border: 1px solid var(--line-primary);
    outline: none;
}

/* Timeline */

.timeline-border {
    width: 1px;
    height: 125px;
    background: var(--line-primary);
}

.word-break {
    word-break: break-all;
    /* word-break: keep-all */
}

/* Filter bar section */

.filterbar-contents {
    padding: 18px 32px;
    height: calc(100dvh - 475px) !important;
    min-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--background-tertiary);

}

.filterbar-contents-chip {
    width: fit-content;
    border-radius: 50px;
    background: transparent;
    border: 1px solid var(--line-secondary);
    padding: 8px 11px;
    gap: 4px;
}

.listing-more-details-chip {
    background-color: #e2e7f0;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
}

.cursor-pointer {
    cursor: pointer;
}

/* ------ Charts of Account---------- */

.coa-tree {
    padding: 0px;
    margin: 0px;
}

ul {
    list-style-type: none;
}

.coa-tree input:not(.tree-row-checkbox) {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.coa-tree .tree-row-checkbox:checked {
    border: transparent;
}

.coa-tree .tree-row-checkbox {
    margin: 0;
}

.coa-tree input~ul {
    display: none;
}

.coa-tree input:checked~ul {
    display: block;
}

/* ————————————————————–
    Tree rows
  */

.coa-tree li {
    line-height: 1.2;
    position: relative;
    /* padding: 0 0 1em 1.5em; */
}

.coa-tree ul li {
    padding: 1em 0 0 2.3em;
}

.coa-tree>li:last-child {
    padding-bottom: 0;
}

.coa-tree li {
    list-style-image: url("../images/.svg");
    /* list-style-image: none; */
}

/* ————————————————————–
    Tree labels
  */

.tree_label {
    position: relative;
    display: inline-block;
    width: 100%;
    /* border-bottom: 1px solid var(--line-table); */
}

label.tree_label {
    cursor: pointer;
}

label.tree_label:hover {
    color: var(--text-secondary);
}

label.tree_label .row>.col,
label.tree_label~ul>li>span.tree_label .row>.col {
    padding: 10px 12px;
}

/* ————————————————————–
    Tree expanded icon
  */

label.tree_label:before {
    background: url("../images/rolesOpen.svg");
    color: var(--text-primary);
    position: relative;
    z-index: 1;
    float: left;
    margin: 0 1em 0 -1.3em;
    width: 20px;
    height: 20px;
    /* border-radius: 1em; */
    content: "";
    text-align: center;
    line-height: 0.9em;
    left: 1.4rem;
    top: 1.5rem;
}

:checked~label.tree_label:before {
    background: url("../images/rolesClose.svg");
}

/* ————————————————————–
    Tree branches
  */

.coa-tree .parentNode:before {
    content: initial;
}

.coa-tree li:before {
    position: absolute;
    top: -2rem;
    bottom: 0;
    left: 3em;
    display: block;
    width: 0;
    border-left: 1px dashed var(--line-secondary);
    height: 100%;
    content: "";
}

:checked~ul>li>.tree_label:after {
    position: absolute;
    top: 1rem;
    left: -6em;
    display: block;
    height: 0.5em;
    width: 1.5em;
    content: "";
    /* background: url("../images/tree_arrow.svg") center center no-repeat; */
}

.coa-tree li:last-child:before {
    /* height: 1em; */
    bottom: auto;
}

.coa-tree>li:last-child:before {
    display: none;
}

.roles-tree {
    padding: 24px 0px;
}

.roles-tree>ul {
    padding-left: 10px;
}

.roles-tree ul li {
    list-style: none;
    padding: 10px 0px;
}

.border-tree {
    border: 1px dashed var(--line-secondary);
}

.setting-roles-card {
    background: var(--background-white);
    border: 1px solid var(--line-secondary);
    box-shadow: 0px 2px 4px 0px #30303030, 0px 0px 1px 0px #12141930;
    padding: 14px 10px;
    border-radius: 8px;
    width: fit-content;
    z-index: 1;
}

.dropdown .dropdown-menu-custom {
    min-width: fit-content;
    width: fit-content;
    border: 0px;
    box-shadow: 0px 4px 10px 0px #0000001F;
    padding: 0px;
    margin: 0px;
    background-color: var(--background-white);
}

.dropdown .dropdown-menu-custom .dropdown-item {
    color: var(--text-primary);
    padding: 12px 16px;
}

.dropdown .dropdown-menu-custom .dropdown-item:focus,
.dropdown .dropdown-menu-custom .dropdown-item:hover,
.dropdown .dropdown-menu-custom .dropdown-item:active {
    text-decoration: none;
    background-color: var(--background-tertiary);
}


.tree-view-accordion {
    padding: 6px;
    border: none !important;
    border-radius: 4px;
    width: 100%;
}

.tree-view-accordion .accordion-header .accordion-button {
    border-radius: 0px;
}

.tree-view-accordion:last-of-type .accordion-button.collapsed {
    border-radius: 0px;
}

.tree-view-accordion .accordion-header .accordion-button:focus {
    border: none;
    box-shadow: none;
}

.tree-view-accordion .accordion-header .accordion-button:not(.collapsed) {
    color: var(--text-primary);
    background-color: transparent;
    box-shadow: none;
}

.tree-view-accordion .accordion-header .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    font-size: 1rem;
    color: var(--text-primary);
    text-align: left;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
}

.tree-view-accordion .accordion-header .accordion-button::after {
    position: absolute;
    left: 0px;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-left: auto;
    content: "";
    background-image: url("../images/chevron-down.svg") !important;
    background-repeat: no-repeat;
    background-size: 38px;
}

.tree-view-accordion .arrow-box {
    height: 24px;
    width: 24px;
}


.modules-numbering-card {
    border: 1px solid var(--line-primary);
    background: var(--background-tertiary);
    border-radius: 6px;
    padding: 14px 24px;
}

.modules-numbering-card-list {
    background: var(--white);
    border-radius: 4px;
    padding: 12px 16px;
}

.select-box-arrow {
    background: var(--background-white);
    border: 1px solid var(--line-primary);
    padding: 12px;
    border-radius: 4px;
    width: 100%;
    height: 44px;
}

.dropdown-values-card-list {
    background: var(--background-primary);
    padding: 12px 14px;
}

.tags-card-list {
    background: transparent;
    border: 1px solid var(--line-primary);
    padding: 12px 14px;
}

.tags-card-list .round-box {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}


/* Chip */


.chip-cancel {
    color: var(--cancel-accent);
    background-color: var(--chip-bg-cancel);
    width: fit-content;
    padding: 0px 8px;
    gap: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    border-radius: 22px;
}

.chip-orange {
    color: var(--orange-accent);
    background-color: var(--chip-bg-orange);
    width: fit-content;
    padding: 0px 8px;
    gap: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    border-radius: 22px;
}

.chip-info {
    color: var(--info-accent);
    background-color: var(--chip-bg-info);
    width: fit-content;
    padding: 0px 8px;
    gap: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    border-radius: 22px;
}

.chip-warning {
    color: var(--warning-accent);
    background-color: var(--chip-bg-warning);
    width: fit-content;
    padding: 0px 8px;
    gap: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    border-radius: 22px;
}

.chip-success {
    color: var(--success-accent);
    background-color: var(--chip-bg-success);
    width: fit-content;
    padding: 0px 8px;
    gap: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    border-radius: 22px;
}

.chip-error {
    color: var(--error-accent);
    background-color: var(--chip-bg-error);
    width: fit-content;
    padding: 0px 8px;
    gap: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    border-radius: 22px;
}

.setting-user-active {
    padding: 4px 16px 4px 16px;
    gap: 6px;
    border-radius: 22px;
    background: #dcfce7;
    color: #14532d;
    font-size: 14px;
    font-weight: 500;
}

.setting-user-inactive {
    padding: 4px 16px 4px 16px;
    gap: 6px;
    border-radius: 22px;
    background: #e2e6f0;
    color: #0f132a;
    font-size: 14px;
    font-weight: 500;
}

.setting-user-secondary {
    padding: 4px 16px;
    gap: 6px;
    border-radius: 22px;
    background: #e2e6f0;
    color: #0f132a;
    font-size: 14px;
    font-weight: 500;
}

.setting-user-primary {
    padding: 4px 16px;
    gap: 6px;
    border-radius: 22px;
    background: #dbeafe;
    color: #1e3a8a;
    font-size: 14px;
    font-weight: 500;
}

.setting-user-success {
    padding: 4px 16px;
    gap: 6px;
    border-radius: 22px;
    background: var(--chip-bg-success);
    color: var(--success-accent);
    font-size: 14px;
    font-weight: 500;
}

.setting-user-danger {
    padding: 4px 16px;
    gap: 6px;
    border-radius: 22px;
    background: var(--chip-bg-error);
    color: var(--error-accent);
    font-size: 14px;
    font-weight: 500;
}

/* Custom backdrop for top offcanvas */
.custom-offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 37, 41, 0.5);
    /* Bootstrap dark backdrop */
    z-index: 1060;
    /* below the second offcanvas */
}

.on-hold-chip {
    padding: 4px 16px 4px 16px;
    gap: 6px;
    border-radius: 22px;
    background: #fefce8;
    color: #713f12;
    font-size: 14px;
    font-weight: 500;
}

.profile-chip-gray {
    width: fit-content;
    padding: 4px 8px;
    background: #f0f3f7;
    border-radius: 22px;
}

.profile-chip-gray img {
    max-width: 16px;
    min-width: 16px;
    max-height: 16px;
    min-height: 16px;
    border-radius: 50%;
    object-fit: contain;
}

.high-chip {
    width: fit-content;
    padding: 4px 8px;
    gap: 6px;
    border-radius: 22px;
    background: #fee2e2;
    color: #ef4444;
    font-size: 16px;
    font-weight: 500;
}

.paid-chip {
    width: fit-content;
    padding: 4px 8px;
    gap: 6px;
    border-radius: 22px;
    background: #dcfce7;
    color: #14532d;
    font-size: 14px;
    font-weight: 800;
}

.upcoming-follow-textbox {
    padding: 8px 16px;
    border-left: 3px solid #8c7ab7;
    background: #f9f9fb;
}

.previou-follow-textbox {
    padding: 8px 16px;
    border-left: 3px solid #22c55e;
    background: #dcfce74d;
}

/* Notification */

.notification-card-bg {
    background-color: var(--background-primary);
}

.notification-card {
    padding: 16px 24px;
}

.avatars {
    display: flex;
    margin-left: 10px;
    width: fit-content;
}

.avatars__item {
    border: 2px solid var(--white);
    border-radius: 100%;
    color: var(--white);
    display: block;
    height: 30px;
    width: 30px;
    text-align: center;
    transition: margin 0.1s ease-in-out;
    overflow: hidden;
    margin-left: -12px;
}

.avatars__item:first-child {
    z-index: 5;
}

.avatars__item:nth-child(2) {
    z-index: 4;
}

.avatars__item:nth-child(3) {
    z-index: 3;
}

.avatars__item:nth-child(4) {
    z-index: 2;
}

.avatars__item:nth-child(5) {
    z-index: 1;
}

.avatars__item:last-child {
    z-index: 0;
}

.avatars__item img {
    width: 100%;
}

.avatars:hover .avatars__item {
    margin-right: 12px;
}

.mentation-screen-bg {
    background: url(../images/mentationBG_light.svg) no-repeat center center;
    background-size: cover;
    /* image proportion ke sath poore screen cover karega */
    height: 100dvh;
    /* viewport ki full height */
    width: 100%;
    /* viewport ki full width */
}

.property-create-selection {
    height: 100px;
    width: 100%;
    background-color: var(--background-secondary);
    border: 1px solid var(--highlighted-accent);
    border-radius: 4px;
}

.add-follow-up-hidden {
    display: none;
}

.property-dashboard-dots {
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background-color: var(--black);
}

.property-previous-search-section {
    border: 1px solid var(--line-secondary);
    padding: 9px 11px;
    border-radius: 22px;
    color: var(--text-secondary);
}

.property-previous-search-section.active {
    border: 1px solid var(--highlighted-accent);
    color: var(--highlighted-accent);
}

.property-listing-card-section {
    border-radius: 4px;
    position: relative;
    border: 1px solid var(--line-primary);
}


.property-listing-card-img-chip-sale {
    background-color: var(--chip-bg-success);
    padding: 4px 16px;
    border-radius: 22px;
    width: fit-content;
    color: var(--success-accent);
    font-weight: 500;
    font-size: 12px;
    position: absolute;
    bottom: 9px;
    left: 5px;
}

.property-listing-card-img-chip-rent {
    background-color: var(--chip-bg-orange);
    padding: 4px 16px;
    border-radius: 22px;
    width: fit-content;
    color: var(--orange-accent);
    font-weight: 500;
    font-size: 12px;
    position: absolute;
    bottom: 9px;
    left: 5px;
}

.property-listing-card-img-chip-gray {
    background-color: var(--chip-bg-cancel);
    padding: 4px 8px;
    border-radius: 22px;
    width: fit-content;
    color: var(--cancel-accent);
    font-weight: 600;
    font-size: 12px;
}

.px16-py18 {
    padding: 18px 16px;
}

/* Attachment drag & drop */

#drop-area__ {
    border: 2px dashed var(--line-tertiary);
    border-radius: 4px;
    padding: 18px;
    cursor: pointer;
    background-color: var(--background-quaternary);
}

#drop-area__ .drop-area__box {
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--white);
    padding: 8px;
}

#drop-area__ .drop-area__box label {
    border-radius: 4px;
    cursor: pointer;
    background-color: transparent;
    padding: 6px 12px;
    border: none;
    outline: none;
    color: var(--highlighted-accent);
    font-size: 14px;
    font-weight: 600;
}

#drop-area__ .drop-area__box label:hover {
    color: var(--highlighted-accent);
}

#drop-area__ .drop-area__box ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#drop-area__ .drop-area__box ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
}

#file-list__ {
    list-style: none;
    padding: 0;
}

/* ========================= Digital Card view ========================= */

.digital-card-view {
    box-shadow: 3px 3px 6px 0px #00000005, -3px -3px 4px 0px #00000005;
    border: 1px solid var(--line-primary);
    background: var(--white);
    border-radius: 4px;
    padding: 24px 18px;
    height: 100%;
    width: 100%;
}

.digital-inner-card-view {
    background: var(--background-secondary);
    padding: 14px 16px;
    border-radius: 4px;
}

.resources-card {
    border: 1px solid var(--line-primary);
    /* padding: 16px 20px; */
}

.email-input-chip {
    background: var(--background-tertiary);
    padding: 4px 6px;
    font-weight: 400;
    font-size: 16px;
    border-radius: 4px;
}


/* ----------------------------- Light & Dark mode ------------------------------- */
.light-dark-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    color: var(--text-disabled);
    transition: none;
    cursor: pointer;
}

.light-dark-card:hover {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background-color: var(--background-quaternary);
    border-radius: 4px;
    color: var(--text-secondary);
    transition: none;
}

.light-dark-card.active,
.light-dark-card:hover.active {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background-color: #4180FF30;
    border-radius: 4px;
    color: var(--highlighted-accent);
}

.light-dark-card.active svg path,
.light-dark-card:hover.active svg path {
    stroke: var(--highlighted-accent)
}

.light-dark-card:hover svg path {
    stroke: var(--text-secondary)
}

.icon-round-warning {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: var(--chip-bg-warning);
}

/* ===================================================== */

.offcanvas-custome {
    width: 550px !important;
    background-color: var(--background-white);
}

.offcanvas-custome .offcanvas-header {
    padding: 12px 18px 12px 18px;
    border-bottom: 1px solid var(--background-quinary) !important;
}

.offcanvas-custome .offcanvas-body .p32 {
    padding: 32px;
}

.offcanvas-custome .offcanvas-footer {
    box-shadow: 0px -4px 8px 0px #0000000a;
    padding: 18px 32px;
}





.tags-chip-view {
    padding: 8px 12px;
    background-color: var(--background-tertiary);
    border-radius: 4px;
}



.tags-chip-view_added_by_you {

    padding: 8px 12px;

    background-color: var(--background-tertiary);

    border-radius: 4px;

}


#no-internet-or-wifi-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

#no-internet-or-wifi-popup .popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#no-internet-or-wifi-popup .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background-white);
    border-radius: 16px;
    padding: 40px 50px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 350px;
    max-width: 90%;
    z-index: 10000;
}

#no-internet-or-wifi-popup .popup-content img {
    width: 120px;
    height: auto;
    margin-bottom: 20px;
}

#no-internet-or-wifi-popup .popup-content h2 {
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

#no-internet-or-wifi-popup .popup-content p {
    color: var(--text-secondary);
    font-size: 16px;
    margin: 0;
}


/* ----------------------------- Light & Dark mode ------------------------------- */
.light-dark-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    color: var(--text-disabled);
    transition: none;
}

.light-dark-card:hover {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background-color: var(--background-quaternary);
    border-radius: 4px;
    color: var(--text-secondary);
    transition: none;
}

.light-dark-card.active,
.light-dark-card:hover.active {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background-color: #4180FF30;
    border-radius: 4px;
    color: var(--highlighted-accent);
}

.light-dark-card.active svg path,
.light-dark-card:hover.active svg path {
    stroke: var(--highlighted-accent)
}

.light-dark-card:hover svg path {
    stroke: var(--text-secondary)
}

.icon-round-warning {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: var(--chip-bg-warning);
}

/* ===================================================== */

.header-round-btn {
    border: 0px;
    outline: none;
    background-color: transparent;
    width: 36px;
    height: 36px;
    border-radius: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-round-btn:hover {
    background-color: var(--background-quaternary);
    box-shadow: 1px 1px 2px 0px #0000000a, -1px -1px 2px 0px #0000000a;
}

.header-round-btn:focus,
.header-round-btn:active,
.header-round-btn:active:focus {
    background-color: var(--background-primary);
    border: 1px solid var(--highlighted-accent);
}

.modal-content {
    background-color: var(--background-white);
}