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

/* ------------------------------- Colors Variable ------------------------------- */
:root {
    --white: #ffffff;
    --black: #000000;
    --background-light: #f4f4f5;
    --background-light-2: #f3f6fb;
    --background-heavy: #ebebeb;
    --text-dark: #0f132a;
    --text-light: #848692;
    --text-disabled: #a5acb9;
    --text-placeholder: #b9bdc4;
    --text-highlight: #2160e1;
    --text-yellow: #ffcc00;
    --text-lime: #628400;
    --text-red: #ff3b30;
    --success-default: #22c55e;
    --success-dark: #14532d;
    --dashboard-highlight: #0d48ee;
    --Neutral-150: #f0f3f7;
    --Neutral-200: #e2e6f0;
    --Neutral-300: #cbd1e1;
    --Neutral-500: #646e8b;
    --Error-50: #fef2f2;
    --Error-500: #ef4444;
    --Error-dark: #7f1d1d;
    --warning-50: #fefce8;
    --warning: #d77604;
    --warning-dark: #713f12;
    --line-light: #dddee1;
    --line-medium: #b1b3b8;
    --line-dark: #8b8b8b;
    --icon-light: #646e8b;
    --icon-dark: #475069;
    --icon-disabled: #9ea0a7;
    --field-border-default: #cbd1e1;
    --input-text: #212529;
    --field-border-selected: #1248b9;
    --button-primary: linear-gradient(151.7deg,
            #7ea3ed -5.07%,
            #195be0 95.08%,
            #195be0 95.08%);
    --secondary-button-border: #d0d4df;
    --button-disabled: #e2e6f0;
    --button-secondary: linear-gradient(180deg, #ffffff 0%, #edf0f6 100%);
    --nav-active: #f6f6f6;
}

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

html,
body {
    width: 100%;
}

/* ------------------------------- Scroll Bar ------------------------------- */
* {
    --sb-thumb-color: var(--background-heavy);
    --sb-size: 4px;
    scrollbar-color: var(--background-heavy);
}

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

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

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

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

/* ------------------------------- 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-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-dark) !important;
}

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

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

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

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

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

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

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

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

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

.text-lime {
    color: var(--text-lime, #628400) !important;
}

.text-red {
    color: var(--text-red, #ff3b30) !important;
}

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

.d-none {
    display: none;
}

.border-bottom1 {
    border-bottom: 1px solid #dddee1;
}

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

/* ------------------------------- 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: 40px;
}

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

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

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

.btn-primary {
    border: none;
    background: var(--button-primary);
    color: var(--white);
}

.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 #165dff;
    color: var(--field-border-selected);
    background-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus {
    border: none;
    background: var(--button-primary);
    color: var(--white);
}

.btn-secondary {
    border: 1px solid var(--secondary-button-border);
    background: var(--button-secondary);
    color: var(--text-dark);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:active:focus {
    border: 1px solid var(--secondary-button-border);
    background: var(--button-secondary);
    color: var(--text-dark);
}

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

.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(--text-highlight);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline-primary:disabled,
.btn-Tertiary-no-fill:disabled {
    border: none;
    background-color: var(--button-disabled);
    background: var(--button-disabled);
    color: var(--text-disabled);
    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(--button-primary);
    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(--button-primary);
    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(--secondary-button-border);
    background-color: var(--button-secondary);
    color: var(--text-light);
    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(--secondary-button-border);
    background-color: var(--button-secondary);
    color: var(--text-light);
    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-dark);
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--white);
    margin: 0;
    width: 17px;
    height: 17px;
    border: 1px solid var(--Neutral-500);
    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(--text-highlight);
}

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

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

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

/* ------------------------------- Checkbox ------------------------------- */
.form-check-input {
    height: 18px;
    width: 18px;
    border: 1px solid var(--Neutral-500);
    margin: 4px;
}

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

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

.form-check-input:checked {
    background-color: var(--text-highlight);
    border-color: var(--Neutral-500);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--text-highlight);
    border-color: var(--Neutral-500);
}

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

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

.form-check-input:focus {
    border-color: var(--Neutral-500);
    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;
}

.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-light);
}

.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-light);
    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-dark);
    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-dark);
    border-bottom: 4px solid var(--text-highlight);
    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 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 #D5D5D5;
    background: #FFFFFF;
    color: #0F182A;
    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(--text-highlight);
    background: var(--text-highlight);
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
}

/* 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-medium);
    background-color: transparent;
    color: var(--text-light);
    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(--text-highlight);
    color: var(--text-highlight);
}

/* 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-dark);
    border: none;
    background-color: var(--background-light);
    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(--field-border-selected);
    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-dark);
}

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

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

.input-container .form-control:focus {
    color: var(--input-text, #212529);
    background-color: transparent;
    border: 1px solid var(--field-border-selected);
    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: #cccccc60;
    border: none;
}

.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-dark);
}

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

.task-input-container .form-control:focus {
    color: var(--input-text, #212529);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--line-medium);
    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(--field-border-default);
    border-radius: 4px;
    padding: 4px 8px;
}

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

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

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

.form-select:focus {
    color: var(--input-text, #212529);
    background-color: transparent;
    border: 1px solid var(--field-border-selected);
    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 #949db8;
    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-light);
    border-radius: 50%;
    transition: 0.4s;
}

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

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

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

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

.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(--field-border-default);
    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-light);
    width: 100%;
    margin: 0px 0px;
}

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

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

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

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

/* ------------------------------- Header ------------------------------- */
.header {
    background-color: var(--white);
    background: var(--white);
    text-wrap: nowrap;
}

/* ------------------------------- Bottom Navbar ------------------------------- */
.bottom-navbar {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 0px 16px 20px 16px;
    background-color: var(--background-light);
    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-dark);
    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(--text-highlight);
    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(--text-highlight) !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 .offcanvas-header {
    padding: 48px 28px 24px 28px;
    gap: 12px;
    opacity: 0px;
    background-color: var(--background-light);
}

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

.sidebar_user_icon {
    border-radius: 50%;
}

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

.sidebar-nav ul {
    list-style-type: none;
    padding-left: 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: 0px 8px;
    min-height: calc(100vh - 350px);
    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-dark);
    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(--nav-active);
    color: var(--text-highlight);
    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(--text-highlight) !important;
}

.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 - 100px);
    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: 35px;
    font-size: 16px;
    height: 35px;
    color: var(--text-dark);
    padding: 6px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid var(--line-medium);
    background: transparent;
    font-weight: bold;
    outline: none;
    transition: all 0.1s;
}

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

.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: 0px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-add {
    height: 52px;
    padding: 0px 16px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 2px 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% - 12px);
    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-dark);
    height: 38px;
    background-color: var(--background-light);
    background-clip: padding-box;
    border: 1px solid var(--line-light);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none !important;
    border-radius: 4px;
}

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

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

.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 Dropdown ------------------------------- */
.custom-dropdown {
    height: 32px;
    padding: 4px 12px 4px 12px;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--line-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    text-wrap: nowrap;
    background-color: transparent;
}

/* ------------------------------- Custom Chips ------------------------------- */
.alert-chip {
    background: #fee2e2;
    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(--background-heavy);
    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-light);
    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: #a7ff62;
}

.muted-chip-md {
    background: var(--background-heavy);
    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(--background-heavy);
    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: #dcfce7;
    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: #dcfce7;
    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: #f5ffda;
    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(--Error-50);
    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(--background-heavy);
    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(--Neutral-200);
    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);
    opacity: 0px;
    background-color: var(--Error-50);
    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-dark);
    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-dark, #7f1d1d);
    background-color: var(--Error-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.error-fill-chip {
    height: 28px;
    padding: 0px 16px 0px 16px;
    gap: 0px;
    text-wrap: nowrap;
    border-radius: 22px;
    border: none;
    color: var(--Error-dark, #7f1d1d);
    background-color: var(--Error-500, #ef4444);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
}

.success-outline-chip {
    height: 24px;
    padding: 0px 11px 0px 11px;
    text-wrap: nowrap;
    gap: 2px;
    border-radius: 22px;
    border: 1px solid var(--success-default);
    opacity: 0px;
    background-color: transparent;
    color: var(--success-dark);
    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-default);
    background-color: #edfaf2;
    color: var(--success-default);
    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-light);
    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: #d2bd00;
    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: #00900e;
    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(--Neutral-200);
    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(--Neutral-150, #f0f3f7);
    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-light);
    width: fit-content;
}

.user_name_badge {
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1b395c;
    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-light);
}

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

.kanbar-card {
    padding: 16px 12px 16px 12px;
    width: 100%;
    gap: 12px;
    border-radius: 4px;
    border: 1px solid var(--Neutral-300);
    background-color: var(--white);
    box-shadow: 0px 2px 4px 0px #30303030, 0px 0px 1px 0px #12141930;
}

.kanbar-card .kanban-card-inner {
    display: flex;
}

.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-light);
}

.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;
}

.kanban_switch {
    height: 32px;
    padding: 4px 12px 4px 12px;
    gap: 4px;
    border: none;
    border-radius: 4px;
    font-weight: 400;
    width: fit-content;
    font-size: 14px;
    background-color: #f2f2f2;
    color: var(--text-dark);
}

.kanban_switch.active {
    height: 32px;
    padding: 4px 12px 4px 12px;
    gap: 4px;
    border-radius: 4px;
    width: fit-content;
    font-weight: 500;
    font-size: 14px;
    background-color: #edf6ff;
    color: var(--text-highlight);
}

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

.inquiry-main {
    padding: 0px 16px 16px 16px;
    background-color: var(--white);
}

.inquiry-card-container {
    gap: 16px;
    padding: 16px 0px;
    border-bottom: 1px solid var(--line-light);
}

.inquiry-card-container:last-child {
    gap: 16px;
    padding: 16px 0px;
    border-bottom: none;
}

/* ------ 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-light);
}

.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-light);
    opacity: 0px;
}

.FilterOffcanvas .offcanvas-body {
    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-dark);
    border-bottom: 1px solid var(--line-light);
}

.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-dark);
    background-color: var(--background-heavy);
    border-bottom: 1px solid var(--line-light);
}

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

.condition-filter-header {
    background-color: var(--background-light);
    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-light);
}

.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-light);
}

.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 .offcanvas-header {
    display: flex;
    align-items: center;
    padding: 7px;
    justify-content: center;
}

.tagOffcanvas .offcanvas-body {
    padding: 3px 16px 32px 16px;
}

.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;
}

.list_offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    padding: 12px 12px 6px 12px;
    justify-content: center;
}

.list_offcanvas .offcanvas-body {
    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-light);
}

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

/* View offcanvas */
.view_offcanvas {
    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;
}

.view_offcanvas .offcanvas-body {
    padding: 10px 16px 32px 16px;
}

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

.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;
}

.list_offcanvas .offcanvas-body {
    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-light);
}

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

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

.Filter_offcanvas .offcanvas-body {
    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-light);
}

.filter_menu {
    border-radius: 4px;
}

.filter_inner_container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 22px;
}

.filter_menu .filter_menu_header {
    background-color: var(--background-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9.5px 16px;
}

.filter_menu .filter_menu_body {
    background-color: #e1e1e1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
}

/* .Filter_offcanvas .offcanvas-button:last-of-type{
  border-bottom: 1px solid transparent;
} */
/* Export Modal */
.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;
}

.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-light);
}

.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: linear-gradient(186.58deg,
            #fdfcf2 78.39%,
            rgba(253, 252, 242, 0) 94.83%);
}

.overview-cards {
    display: flex;
    align-items: start;
    gap: 10px;
    padding: 12px 0px 12px 1px;
    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 */
.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-light);
}

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

.timeline-highlight {
    border-left: 4px solid #4fbdfa;
    padding-left: 8px;
    margin-top: 8px;
}

.followup-timeline-highlight {
    border-left: 3px solid #8c7ab7;
    padding: 8px 0px 8px 16px;
    background-color: #f9f9fb;
    margin-top: 8px;
}

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

.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-light-2);
    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-light);
}

.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-light);
}

.attachment-container {
    border: 1px dashed var(--text-highlight);
    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(--field-border-selected);
    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-light);
    padding: 18px 0px;
}

.details-reminder-container {
    background-color: var(--background-light);
    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-light);
}

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

.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(--nav-active);
    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-light);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
    height: calc(100vh - 52px);
}

.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-light);
}

/* ----------------------------- 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-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    background-color: rgba(255, 255, 255, 0.78);
    padding: 0px 8px;
    gap: 8px;
    color: var(--icon-dark);
    border-radius: 4px;
}

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

.tax-assessment-card {
    padding: 16px;
    border-radius: 4px;
    border: 1px solid var(--Neutral-300);
    display: flex;
    justify-content: space-between;
    box-shadow: 3px 3px 6px 0px #00000005, -3px -3px 4px 0px #00000005;
}

.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 - 133px);
    margin-bottom: 73px;
}

/* 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 */

.dashboard-tab-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--background-light);
}

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

.sales-card {
    padding: 16px;
    text-wrap: nowrap;
    flex-wrap: wrap;
    gap: 0px;
    border-radius: 4px;
    border: 1px solid var(--Neutral-300);
    background: var(--white);
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.02),
        -3px -3px 4px 0px rgba(0, 0, 0, 0.02);
    display: flex;
    justify-content: space-between;
}

.sales-card-highlight {
    background: var(--dashboard-highlight);
}

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

.Property-card-highlight {
    padding: 16px;
    text-wrap: nowrap;
    gap: 0px;
    border-radius: 4px;
    border: 1px solid var(--Neutral-300);
    background: var(--dashboard-highlight);
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.02),
        -3px -3px 4px 0px rgba(0, 0, 0, 0.02);
    display: flex;
    justify-content: space-between;
}

.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: rgba(34, 197, 94, 0.08);
    border-left: 3px solid var(--success-default);
}

.property-info-card.info {
    background: rgba(79, 189, 250, 0.08);
    border-left: 3px solid #4fbdfa;
}

.property-info-card.alerts {
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid #dc2626;
}

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

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

/* progress-bar */
.progress {
    width: 100%;
    height: 12px;
}

.progress-wrap {
    background: #22c55e;
    margin-top: 12px;
    padding: 0px 12px 0px 0px;
    border-radius: 0px;
    overflow: hidden;
    position: relative;

    .progress-bar {
        background: #bedaff;
        left: 0;
        position: absolute;
        top: 0;
        border-radius: 0px;
    }
}

.chart-container {
    position: relative;
    width: 120px;
    margin: auto;
}

.doughnut-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.chart-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0px;
    border-bottom: 1px solid #e5e6eb;
}

.chart-info-card:last-child {
    border-bottom: none;
}

.chart-info-head-Item-1 {
    border-left: 2px solid #165dff;
    padding-left: 8px;
}

.chart-info-head-Item-2 {
    border-left: 2px solid #14c9c9;
    padding-left: 8px;
}

.chart-info-head-Item-3 {
    border-left: 2px solid #f7ba1e;
    padding-left: 8px;
}

.line-Chart-container {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background-color: var(--white);
}

.line-chart #salesLineChart {
    min-height: 200px !important;
    max-height: 300px !important;
    min-width: 100% !important;
}

.ver-bar-chart {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background-color: var(--white);
}

.sales-ver-bar-chart {
    height: 100%;
    width: 100%;
}

.sales-ver-bar-chart #salesBarChart {
    height: 100% !important;
    width: 100% !important;
}

.hor-bar-chart {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background-color: var(--white);
}

.hor-Group-bar-chart {
    padding: 24px 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: var(--white);
}

.sales-hor-bar-chart #SalesHorizontalBarChart {
    min-height: 200px !important;
    max-height: 100% !important;
    width: 100%;
}

.Group-bar-chart {
    width: 100%;
    height: 50vh;
}

.Group-bar-chart #propertyHorizontalGroupBar {
    width: 100% !important;
    height: 100%;
}

.top-perf-emp-container {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background-color: var(--white);
}

.perf-emp-card {
    display: flex;
    text-wrap: nowrap;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0px;
    border-bottom: 1px solid var(--Neutral-300);
}

.dash-last-space {
    height: 100px;
}

/* Onboarding Flow */
.onboarding_main {
    height: calc(100vh - 62px);
    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-light);
    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 #f2f2f2;
    border-radius: 33px;
    width: 100%;
    margin: 0px;
    opacity: 100%;
}

.steps-bar.active {
    border: 3px solid var(--text-highlight);
    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(--text-highlight);
}

.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-light);
}

.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-light);
}

.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: #e6fee9;
    border-left: 3px solid #06b718;
}

.Unmapped-card {
    padding: 16px;
    width: 100%;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #faf7ea;
    border-left: 3px solid #e1b003;
}

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

.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: #fafafa;
}

.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-dark);
        padding: 6px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid var(--line-medium);
        background: transparent;
        font-weight: bold;
        outline: none;
        transition: all 0.1s;
    }

    .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(--field-border-default);
        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-medium);
        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 #f2f2f2;
    }

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

    .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: #475069;
}

/* ========================= snackbar / Toster ========================= */
#snackbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    visibility: hidden;
    min-width: 300px;
    background-color: #14532d;
    color: #fff;
    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: 0.5px solid #cbd1e1;
    background: #ffffff;
    padding: 12px 8px;
    border-radius: 2px;
}

/* Subscription Plan */

.subscription-plan-card {
    border: 1px solid #cbd1e1;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.subscription-plan-card .subscription-plan-card-title {
    padding: 4px 16px;
    background-color: #949db8;
    border-bottom: 1px solid #cbd1e1;
}

.subscription-plan-card.active {
    border: 1px solid #1248b9;
    width: 100%;
    box-shadow: 0px 1px 1px 0px #30303030, 0px 0px 1px 0px #00000030;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f6f9ff;
}

.subscription-plan-card.active .subscription-plan-card-title {
    padding: 4px 16px;
    background-color: #1248b9;
    border-bottom: 1px solid #cbd1e1;
}

.subscription-selecte-plan {
    border-top: 1px solid #e2e6f0;
    border-bottom: 1px solid #e2e6f0;
    width: 100%;
    background-color: var(--text-highlight);
    padding: 0px 3px;
}

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

.product-selection-card {
    border: 1px solid rgba(232, 232, 232, 1);
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(50px);
    padding: 14px 22px;
}

/* .product-selection-card:focus,
.product-selection-card:focus-visible,
.product-selection-card:focus-within {
  background: rgba(240, 242, 247, 1);
  border: 1px solid rgba(232, 232, 232, 1);
} */
.product-selection-card {
    border: 1px solid rgba(232, 232, 232, 1);
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(50px);
    padding: 14px 22px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-selection-card:focus,
.product-selection-card:hover {
    background: rgba(240, 242, 247, 1);
    border: 1px solid rgba(180, 180, 180, 1);
    outline: none;
}

.resources-card {
    border: 1px solid #e2e6f0;
    /* padding: 16px 20px; */
}

.email-input-chip {
    background: #f2f7f6;
    padding: 4px 6px;
    font-weight: 400;
    font-size: 16px;
    border-radius: 4px;
}