/**
 * /*----------------------------------------------------
 *
 * To modify the appearance of the template,
 * you must edit this file which contains the styling for the actual.
 * template.
 *
 *
 *
 * Table of Content:
 * 01/ default-theme
 * 02/ dark-theme
 *
 *
 * =====================================================================
 *
 * @format
 * @File: Dark And Default lite mode
 * @Author: Onesttech
 * @URL: Author E-mail: onesttechbd@gmail.com
 * @Default Styles @Dark Style
 */
/*----------------------------------------------------*/

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

/* GLOBAL VARIABLE  */
:root {
    --font-Inter: "Inter", sans-serif;
}

/* DEFAULT_VARIABLE  */
.default-theme {
    /* text color */
    --primary-color: #5b58ff;
    --primary-color2: #fba036;
    --ot-text-primary: #6f767e;
    --ot-text-title: #181c32;
    --ot-text-subtitle: #33383f;
    --white: #fff;
    --theme-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
    --theme-shadow2: 0px 5px 20px 0px rgba(88, 59, 255, 0.3);

    --header-bg: #edfbff;
    --theme-bg: #edfbff;
    --bodybg: #f3f6f9;

    /* background color */
    --ot-bg-primary: #f0f3f5;
    --ot-bg-secondary: #ffffff;
    --ot-bg-secondary-opacity: rgba(255, 255, 255, 0.35);
    --ot-bg-tertiary: #ffffff;
    --ot-bg-progress: #e6e6e6;

    /* border color */
    --ot-border-primary: #eaeaea;
    --ot-border-secondary: #f4f4f4;

    /* border color rgba */
    --ot-border-color-rgb: 220, 228, 236;

    /* Primary Color rgba */
    --ot-primary-color-rgb: 91, 88, 255;

    /* badge background color */
    --ot-bg-badge-success: #29d697;
    --ot-bg-badge-danger: #ff6a54;
    --ot-bg-badge-warning: #fdc400;
    --ot-bg-badge-primary: #1890ff;
    --ot-bg-badge-custom: #f1faff;

    /* badge text color */
    --ot-text-badge-success: #0ea472;
    --ot-text-badge-danger: #e5533c;
    --ot-text-badge-warning: #b77800;
    --ot-text-badge-primary: #0d76d1;
    --ot-text-badge-info: #0aa2c0;
    --ot-text-badge-secondary: #64748b;
    --ot-text-badge-main: #5b58ff;

    /* badge light background color */
    --ot-bg-badge-light-success: #e4f8f0;
    --ot-bg-badge-light-danger: #fdedea;
    --ot-bg-badge-light-warning: #fdf4dc;
    --ot-bg-badge-light-primary: #e6f1fd;
    --ot-bg-badge-light-info: #e3f6fa;
    --ot-bg-badge-light-secondary: #eef1f6;
    --ot-bg-badge-light-main: #ecebff;
    --ot-bg-badge-light-main-rgb: 236, 235, 255;

    /* badge light text color */
    --ot-text-badge-light-success: #0ea472;
    --ot-text-badge-light-danger: #e5533c;
    --ot-text-badge-light-warning: #b77800;
    --ot-text-badge-light-primary: #0d76d1;

    /* badge deep text color */
    --ot-text-badge-deep-success: #29d697;
    --ot-text-badge-deep-danger: #ff6a54;
    --ot-text-badge-deep-warning: #fdc400;
    --ot-text-badge-deep-primary: #1890ff;

    /* table color */
    --ot-bg-table-card: #ffffff;
    --ot-border-table-card: #ffffff;
    --ot-bg-table-card-header: #ffffff;
    --ot-border-table-card-header: #eaeaea;
    --ot-border-table: #eaeaea;
    --ot-bg-table-thead: #f7fafc;
    --ot-border-table-thead: #eaeaea;
    --ot-bg-table-tbody: #f7fafc;
    --ot-bg-table-checkbox: #ffffff;
    --ot-border-table-checkbox: #eaeaea;
    --ot-color-table-icon-sorting-asc-up: #1a1d1f;
    --ot-color-table-icon-sorting-asc-down: #bebfc0;
    --ot-color-table-icon-sorting-desc-up: #bebfc0;
    --ot-color-table-icon-sorting-desc-down: #1a1d1f;
    --ot-bg-table-toolbar-per-page: #ffffff;
    --ot-border-table-toolbar-per-page: #eaeaea;
    --ot-bg-table-toolbar-btn-outline-primary: #ffffff;
    --ot-bg-table-toolbar-search: #ffffff;
    --ot-border-table-toolbar-search: #eaeaea;
    --ot-bg-table-toolbar-btn-action: #fcfcfc;
    --ot-border-table-toolbar-btn-action: #fcfcfc;

    /* table pagination */
    --ot-bg-table-pagination: #ffffff;
    --ot-text-table-pagination: #1a1d1f;
    --ot-border-table-pagination: #eaeaea;

    /* profile */
    --ot-bg-profile-menu: #fcfcfc;
    --ot-bg-profile-body: #fcfcfc;
    --ot-bg-profile-mobile-menu: #fcfcfc;
    --ot-disable-date: #b2bec3;
    --ot-bg-hover-datepicker: #f7f7f7;
    --ot-text-hover-datepicker: #000;
    --ot-bg-slider: #ccc;
    --ot-bg-before: #fff;
    --ot-bg-scrollbar: rgb(0 0 0 / 5%);
    --ot-scrollbar: #afd9ec;
}

/* DARK_VARIABLE  */
.dark-theme {
    /* text color */
    --primary-color: #5b58ff;
    --primary-color2: #fba036;
    --bodybg: #141518;
    --ot-text-primary: #acb4cb;
    --ot-text-subtitle: #757b8c;
    /* background color */
    --ot-bg-primary: #111415;
    --ot-bg-secondary: #1a1d20;
    --ot-bg-secondary-opacity: #1a1d20;
    --ot-bg-tertiary: #1f2124;
    --ot-bg-progress: #373737;
    /* border color */
    /* border color */
    --ot-border-primary: #eaeaea;
    --ot-border-secondary: #f4f4f4;

    --ot-border-color-rgb: 60, 68, 77;

    /* badge background color */
    --ot-bg-badge-success: #29d697;
    --ot-bg-badge-danger: #ff6a54;
    --ot-bg-badge-warning: #fdc400;
    --ot-bg-badge-primary: #1890ff;

    /* badge text color */
    --ot-text-badge-success: #3ee2a8;
    --ot-text-badge-danger: #ff8d79;
    --ot-text-badge-warning: #ffd043;
    --ot-text-badge-primary: #4da8ff;
    --ot-text-badge-info: #45d1e8;
    --ot-text-badge-secondary: #a5b0c2;
    --ot-text-badge-main: #918fff;

    /* badge light background color */
    --ot-bg-badge-light-success: rgba(41, 214, 151, 0.14);
    --ot-bg-badge-light-danger: rgba(255, 106, 84, 0.14);
    --ot-bg-badge-light-warning: rgba(253, 196, 0, 0.14);
    --ot-bg-badge-light-primary: rgba(24, 144, 255, 0.14);
    --ot-bg-badge-light-info: rgba(34, 184, 207, 0.14);
    --ot-bg-badge-light-secondary: rgba(148, 163, 184, 0.14);
    --ot-bg-badge-light-main: rgba(91, 88, 255, 0.16);

    /* badge light text color */
    --ot-text-badge-light-success: #3ee2a8;
    --ot-text-badge-light-danger: #ff8d79;
    --ot-text-badge-light-warning: #ffd043;
    --ot-text-badge-light-primary: #4da8ff;

    /* badge deep text color */
    --ot-text-badge-deep-success: #29d697;
    --ot-text-badge-deep-danger: #ff6a54;
    --ot-text-badge-deep-warning: #fdc400;
    --ot-text-badge-deep-primary: #1890ff;

    /* table color */
    --ot-bg-table-card: #1a1d20;
    --ot-border-table-card: #ffffff;
    --ot-bg-table-card-header: #1a1d20;
    --ot-border-table-card-header: transparent;
    --ot-border-table: transparent;
    --ot-bg-table-thead: #1f2124;
    --ot-border-table-thead: #1f2124;
    --ot-bg-table-tbody: #1f2124;
    --ot-bg-table-checkbox: #1a1d20;
    --ot-border-table-checkbox: #6f767e;
    --ot-color-table-icon-sorting-asc-up: rgba(190, 191, 192, 0.1);
    --ot-color-table-icon-sorting-asc-down: #bebfc0;
    --ot-color-table-icon-sorting-desc-up: #bebfc0;
    --ot-color-table-icon-sorting-desc-down: rgba(190, 191, 192, 0.1);
    --ot-bg-table-toolbar-per-page: #1f2124;
    --ot-border-table-toolbar-per-page: #272b30;
    --ot-bg-table-toolbar-btn-outline-primary: #1a1d20;
    --ot-bg-table-toolbar-search: #1f2124;
    --ot-border-table-toolbar-search: #272b30;
    --ot-bg-table-toolbar-btn-action: #1f2124;
    --ot-border-table-toolbar-btn-action: #272b30;
    /* table pagination */
    --ot-bg-table-pagination: #1a1d20;
    --ot-text-table-pagination: #ffffff;
    --ot-border-table-pagination: #272b30;
    /* profile */
    --ot-bg-profile-menu: var(--ot-bg-secondary);
    --ot-bg-profile-body: var(--ot-bg-secondary);
    --ot-bg-profile-mobile-menu: var(--ot-bg-secondary);
    --ot-disable-date: #424f5570;
    --ot-bg-hover-datepicker: #363636ae;
    --ot-text-hover-datepicker: rgb(255, 255, 255);
    --ot-bg-slider: #474747a8;
    --ot-bg-before: #000;
    --ot-bg-scrollbar: #272b30;
    --ot-scrollbar: #1c1f24;

    /* NEW_FOR_DARK_THEME_VARIABLE  */

    --body_bg: #141518;
    --card_bg: #1e1f25;
    --dropdown_bg: #2b2d35;

    --white: #fff;
    --white_text: #fff;
    --section_title: #fff;
    --title_text: #acb4cb;
    --body_text: #757b8c;

    --input_bg: #272b30;
    --input_bg_focus: #2c3035;

    --border_1: #212d4f;
    --border_2: #313339;
    --border_3: #4c5059;

    --ot-bg-badge-custom: #2b2d35;
    --ot-text-title: var(--ot-text-subtitle);
    --ot-border-primary: var(--border_2);
    --theme-shadow: 0px 6px 40px rgba(16, 16, 58, 0.4);
    --theme-shadow2: 0px 6px 40px rgba(16, 16, 58, 0.4);
}

.custom {
    /* text color */
    --primary-color: #3e5fce;
    --primary-color2: #fba036;
    --ot-text-primary: #6f767e;
    --ot-text-title: #181c32;
    --ot-text-subtitle: #33383f;
    --white: #fff;
    --theme-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
    --theme-shadow2: 0px 5px 20px 0px rgba(88, 59, 255, 0.3);

    --header-bg: #edfbff;
    --theme-bg: #edfbff;
    --bodybg: #f3f6f9;

    /* background color */
    --ot-bg-primary: #f0f3f5;
    --ot-bg-secondary: #ffffff;
    --ot-bg-secondary-opacity: rgba(255, 255, 255, 0.35);
    --ot-bg-tertiary: #ffffff;
    --ot-bg-progress: #e6e6e6;

    /* border color */
    --ot-border-primary: #eaeaea;
    --ot-border-secondary: #f4f4f4;

    /* badge background color */
    --ot-bg-badge-success: #29d697;
    --ot-bg-badge-danger: #ff6a54;
    --ot-bg-badge-warning: #fdc400;
    --ot-bg-badge-primary: #1890ff;
    --ot-bg-badge-custom: #f1faff;

    /* badge text color */
    --ot-text-badge-success: #0ea472;
    --ot-text-badge-danger: #e5533c;
    --ot-text-badge-warning: #b77800;
    --ot-text-badge-primary: #0d76d1;
    --ot-text-badge-info: #0aa2c0;
    --ot-text-badge-secondary: #64748b;
    --ot-text-badge-main: #5b58ff;

    /* badge light background color */
    --ot-bg-badge-light-success: #e4f8f0;
    --ot-bg-badge-light-danger: #fdedea;
    --ot-bg-badge-light-warning: #fdf4dc;
    --ot-bg-badge-light-primary: #e6f1fd;
    --ot-bg-badge-light-info: #e3f6fa;
    --ot-bg-badge-light-secondary: #eef1f6;
    --ot-bg-badge-light-main: #ecebff;

    /* badge light text color */
    --ot-text-badge-light-success: #0ea472;
    --ot-text-badge-light-danger: #e5533c;
    --ot-text-badge-light-warning: #b77800;
    --ot-text-badge-light-primary: #0d76d1;

    /* badge deep text color */
    --ot-text-badge-deep-success: #29d697;
    --ot-text-badge-deep-danger: #ff6a54;
    --ot-text-badge-deep-warning: #fdc400;
    --ot-text-badge-deep-primary: #1890ff;

    /* table color */
    --ot-bg-table-card: #ffffff;
    --ot-border-table-card: #ffffff;
    --ot-bg-table-card-header: #ffffff;
    --ot-border-table-card-header: #eaeaea;
    --ot-border-table: #eaeaea;
    --ot-bg-table-thead: #f7fafc;
    --ot-border-table-thead: #eaeaea;
    --ot-bg-table-tbody: #f7fafc;
    --ot-bg-table-checkbox: #ffffff;
    --ot-border-table-checkbox: #eaeaea;
    --ot-color-table-icon-sorting-asc-up: #1a1d1f;
    --ot-color-table-icon-sorting-asc-down: #bebfc0;
    --ot-color-table-icon-sorting-desc-up: #bebfc0;
    --ot-color-table-icon-sorting-desc-down: #1a1d1f;
    --ot-bg-table-toolbar-per-page: #ffffff;
    --ot-border-table-toolbar-per-page: #eaeaea;
    --ot-bg-table-toolbar-btn-outline-primary: #ffffff;
    --ot-bg-table-toolbar-search: #ffffff;
    --ot-border-table-toolbar-search: #eaeaea;
    --ot-bg-table-toolbar-btn-action: #fcfcfc;
    --ot-border-table-toolbar-btn-action: #fcfcfc;

    /* table pagination */
    --ot-bg-table-pagination: #ffffff;
    --ot-text-table-pagination: #1a1d1f;
    --ot-border-table-pagination: #eaeaea;

    /* profile */
    --ot-bg-profile-menu: #fcfcfc;
    --ot-bg-profile-body: #fcfcfc;
    --ot-bg-profile-mobile-menu: #fcfcfc;
    --ot-disable-date: #b2bec3;
    --ot-bg-hover-datepicker: #f7f7f7;
    --ot-text-hover-datepicker: #000;
    --ot-bg-slider: #ccc;
    --ot-bg-before: #fff;
    --ot-bg-scrollbar: rgb(0 0 0 / 5%);
    --ot-scrollbar: #afd9ec;
}

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

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

button {
    border: none;
    outline: none;
}

.dropdown-menu {
    margin-top: 10px !important;
}

#dropdown {
    background-color: #fcfcfc;
    border: 2px solid #f0eeee;
    border-radius: 5px 0px 0px 5px;
    font-weight: 500;
    font-size: 16px;
    padding: 8px 16px;
    letter-spacing: 0.02em;
    color: #1a1d1f;
}

#dropdown:hover {
    border: 2px solid #4a42ec;
    color: #4a42ec;
}

#dropdown:focus {
    border: 2px solid #4d5ee5;
    color: #066ecf;
}

.search-input {
    position: relative;
    text-align: center;
    padding: 15px 16px 15px 16px;
    border-bottom: 2px solid #f0eeee;
}

.search-input input {
    padding: 12px;
    width: 100%;
    border: 2px solid #f0eeee;
    border-radius: 50px;
    background: #fafafa;
    outline: none;
}

.search-input ::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.search-input ::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.search-input i {
    position: absolute;
    top: 29px;
    right: 27px;
    padding: 5px;
    background-color: #fafafa;
    color: #6f767e;
}

.search-input ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 8px 16px;
    gap: 16px;
}

.search-input ul li {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #6f767e;
}

.search-input ul li input {
    width: auto;
}

.search-input ul li ::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.search-input ul li ::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.input-with-icon {
    position: relative;
    margin-top: 16px;
    width: 336px;
    height: 40px;
}

.input-with-icon input {
    width: 336px;
    height: 40px;
    padding: 16px 45px;
    border: 2px solid #f0eeee;
    border-radius: 8px;
    outline: none;
}

.input-with-icon input:focus-visible {
    box-shadow: 0px 0px 10px rgba(10, 175, 255, 0.35);
    border: 2px solid #0010f7;
    outline: none;
}

.input-with-icon ::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.input-with-icon ::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.input-with-icon i {
    position: absolute;
    top: 16px;
    color: #6f767e;
}

.input-with-icon i.fa-user-o {
    left: 20px;
}

.input-with-icon i.fa-search {
    right: 20px;
}

textarea {
    width: 280px;
    height: 79px;
    margin-top: 0px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 7px;
    outline: none;
}

textarea::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

textarea::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

html,
body {
    height: 100%;
}

.progress {
    background: var(--bodybg);
    height: 8px;
    border-radius: 30px;
}

.progress-bar {
    border-radius: 30px;
    background: var(--primary-color);
}

option:hover {
    color: #4a42ec;
}

/*
    --------------------------------------------------
    Functions for the base stylesheet.
    Here will import all the functions from the functions file.
    --------------------------------------------------
*/
.pa-0 {
    padding: 0px !important;
}

.pl-0 {
    padding-left: 0px !important;
}

.pt-0 {
    padding-top: 0px !important;
}

.pr-0 {
    padding-right: 0px !important;
}

.pb-0 {
    padding-bottom: 0px !important;
}

.pl-2 {
    padding-left: 2px !important;
}

.pt-2 {
    padding-top: 2px !important;
}

.pr-2 {
    padding-right: 2px !important;
}

.pb-2 {
    padding-bottom: 2px !important;
}

.pt-4 {
    padding-top: 4px !important;
}

.pb-4 {
    padding-bottom: 4px !important;
}

.pb-8 {
    padding-bottom: 8px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pl-12 {
    padding-left: 12px !important;
}

.pr-12 {
    padding-right: 12px !important;
}

.pv-14 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.pt-16 {
    padding-top: 16px !important;
}

.pb-16 {
    padding-bottom: 16px !important;
}

.pv-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.ph-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-24 {
    padding-bottom: 24px !important;
}

.ph-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.pb-30 {
    padding-bottom: 30px !important;
}

.pv-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

.ph-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

.pl-40 {
    padding-left: 40px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.pr-40 {
    padding-right: 40px !important;
}

.pb-40 {
    padding-bottom: 40px !important;
}

.pv-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.ph-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
}

.pt-100 {
    padding-top: 105px !important;
}

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

.mb-0 {
    margin-bottom: 0px !important;
}

.ml-2 {
    margin-left: 2px !important;
}

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

.mr-2 {
    margin-right: 2px !important;
}

.mb-2 {
    margin-bottom: 2px !important;
}

.ml-4 {
    margin-left: 4px !important;
}

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

.mr-4 {
    margin-right: 4px !important;
}

.mb-4 {
    margin-bottom: 4px !important;
}

.ml-6 {
    margin-left: 6px !important;
}

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

.mb-6 {
    margin-bottom: 6px !important;
}

.ml-8 {
    margin-left: 8px !important;
}

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

.mr-8 {
    margin-right: 8px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

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

.mr-10 {
    margin-right: 10px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

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

.mr-12 {
    margin-right: 12px !important;
}

.rtl .mr-12 {
    margin-right: 0px !important;
    margin-left: 12px !important;
}

.rtl .ot-dropdown-btn span {
    text-align: right;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mr-14 {
    margin-right: 14px !important;
}

.mr-16 {
    margin-right: 16px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

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

.mb-18 {
    margin-bottom: 18px !important;
}

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

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-22 {
    margin-bottom: 22px !important;
}

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

.mb-24 {
    margin-bottom: 24px !important;
}

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

.mb-30 {
    margin-bottom: 30px !important;
}

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

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.ml-62 {
    margin-left: 62px !important;
}

.ml-70 {
    margin-left: 70px !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-Inter);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

/* Heading Text */
h6,
h5,
h4,
h3,
h2,
h1 {
    color: var(--ot-text-title);
}

/* Heading Text */
p {
    margin: 0;
}

p,
a,
label {
    color: var(--ot-text-subtitle);
}

ol,
ul {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

/* FONT_SIZE */
.fs_12 {
    font-size: 12px;
}

/* FONT_WEIGHT  */
.fw-500 {
    font-weight: 500;
}

/* *************************************
                 COLORS
****************************************/
.gray_text {
    color: #b5b5c3;
}

.bg-info {
    background-color: #7239ea !important;
}

.bg-success {
    background-color: #009ef7 !important;
}

.bg-warning {
    background-color: #ffc700 !important;
}

.bg-danger {
    background-color: #f1416c !important;
}

/* MAX_HEIGHT  */
.mh_40 {
    max-height: 40px;
}

/* MIN_HEIGHT */
.min_h_250 {
    min-height: 250px !important;
}

/* WIDTH  */
.mw_40 {
    max-width: 40px;
}

/* BORDER_RADIUS  */
.rounded_6px {
    border-radius: 6px;
}

.crm_link_active {
    color: var(--primary-color) !important;
}

/*Changes while RTL Start*/
/* body.rtl .mCustomScrollBox {
  direction: rtl !important;
} */

body.rtl .header {
    right: 280px;
    left: 0;
    transition: -webkit- right 0.4s;
    transition: right 0.4s;
    transition:
        right 0.4s,
        -webkit- right 0.4s;
}

@media (max-width: 991.98px) {
    body.rtl .header {
        right: 0;
    }
}

body.rtl .half-expand .header {
    z-index: 22;
    right: 100px;
    transition: -webkit- right 0.4s;
    transition: right 0.4s;
    transition:
        right 0.4s,
        -webkit- right 0.4s;
}

body.rtl .profile-expand-list {
    float: right;
    align-items: baseline;
    width: 100%;
}

body.rtl .profile-expand-list .profile-expand-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.rtl .topbar-dropdown-menu h1 {
    float: right;
    padding-right: 20px;
    padding-left: 0;
}

/*Changes while RTL End*/
/* Dark Theme Style start*/

/* Dark Theme Style end*/
.header {
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22.5px 30px;
    background: var(--ot-bg-secondary-opacity);
    border-bottom: 2px solid #fff;
    transition: -webkit- left 0.4s;
    transition: left 0.4s;
    transition:
        left 0.4s,
        -webkit- left 0.4s;
}

.header .search-field {
    background: var(--ot-bg-secondary);
}

.header.on-scroll {
    background: var(--ot-bg-secondary);
}

.default-theme {
    background: var(--bodybg);
}

.default-theme .header.on-scroll {
    background: #edfbff;
}

@media (max-width: 991.98px) {
    .header {
        width: 100%;
        padding: 10px;
        left: 0;
        transition: transform 0.3s;
    }
}

/* .header .dropdown .dropdown-menu {
  transition: all 0.3s;
  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
} */

.header .close-toggle {
    display: none;
    transform: rotate(180deg);
    background: transparent;
}

.header .header-search {
    position: relative;
    width: 310px;
}

.header .header-search .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.header .header-search .search-field {
    width: 100%;
    padding: 12px 32px 12px 16px;
    border-radius: 8px;
    border: none;
    background-color: var(--ot-bg-primary);
}

.default-theme .header .header-search .search-field {
    background-color: var(--ot-bg-secondary) !important;
}

.header .header-search .search-field:focus-visible {
    outline-color: #eef0ff;
}

.header .header-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header .header-controls .header-control-item {
    margin-right: 38px;
}

.header .header-controls .header-control-item:last-child {
    margin-right: 0;
}

.header .header-controls .header-control-item .item-content button h6 {
    font-size: 14px;
}

.header .header-controls .header-control-item .item-content .profile-navigate {
    display: flex;
    align-items: center;
    gap: 12px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.header
    .header-controls
    .header-control-item
    .item-content
    .profile-navigate.show {
    display: flex !important;
}

.header
    .header-controls
    .header-control-item
    .item-content
    .profile-navigate
    .profile-photo {
    width: 40px;
    height: 40px;
    border-radius: 0.475rem;
}

.header
    .header-controls
    .header-control-item
    .item-content
    .profile-navigate
    .profile-info {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

.header
    .header-controls
    .header-control-item
    .item-content
    .profile-navigate
    .profile-info
    h6 {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
}

.header
    .header-controls
    .header-control-item
    .item-content
    .profile-navigate
    .profile-info
    p {
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    margin: 0;
}

.header .header-controls .header-control-item .item-content button.icon {
    width: 24px;
    height: 24px;
}

.half-expand .header {
    z-index: 22;
    left: 100px;
    transition: -webkit- left 0.4s;
    transition: left 0.4s;
    transition:
        left 0.4s,
        -webkit- left 0.4s;
}

@media (max-width: 991.98px) {
    .close-toggle {
        display: block !important;
    }
}

@media (max-width: 991.98px) {
    .md-none,
    .header-search {
        display: none !important;
    }
}

/* Topbar Dropdown Menu */
.topbar-dropdown-menu {
    max-width: 425px;
}

.topbar-dropdown-menu h1 {
    font-size: 20px;
    line-height: 32px;
    padding-left: 20px;
    font-weight: 600;
    color: var(--ot-text-primary);
}

.topbar-dropdown-menu .topbar-dropdown-content :last-child::before {
    content: none !important;
}

.topbar-dropdown-menu .topbar-dropdown-content .topbar-dropdown-item {
    padding: 0px;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    white-space: normal;
    gap: 1rem;
}

.topbar-dropdown-menu .topbar-dropdown-content .topbar-dropdown-item:hover {
    background-color: var(--ot-bg-primary);
}

.topbar-dropdown-menu .topbar-dropdown-content .topbar-dropdown-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    background: #efefef;
    left: 12px;
    right: 12px;
}

.topbar-dropdown-menu .topbar-dropdown-content .topbar-dropdown-item:active {
    color: #1e2125;
    background-color: #e9ecef;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-avater {
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    position: relative;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-avater
    img {
    width: 100%;
    height: 100%;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-avater
    .item-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6f767e;
    width: 10px;
    height: 10px;
    max-width: 10px;
    max-height: 10px;
    border-radius: 50%;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-avater
    .item-badge.active {
    background-color: #24c087;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-avater
    .item-badge.item-icon-badge {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    padding: 10px;
    background-color: #4a42ec;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-content
    h6 {
    font-size: 14px;
    line-height: 18px;
    color: var(--ot-text-primary);
    font-weight: 600;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-content
    h6
    span {
    color: var(--ot-text-primary);
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-content
    h6.message {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: 700;
    line-height: 15px;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-content
    h6.message
    span {
    font-size: 12px;
    font-weight: 400;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-status {
    color: var(--ot-text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-status
    .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    min-width: 6px;
    min-height: 6px;
    background-color: #6f767e;
}

.topbar-dropdown-menu
    .topbar-dropdown-content
    .topbar-dropdown-item
    .item-status
    .status-dot.active {
    background: #4a42ec;
}

.topbar-dropdown-menu .topbar-dropdown-footer {
    background: var(--primary-color);
    padding: 12px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
    transition: 0.3s;
}

.topbar-dropdown-menu .topbar-dropdown-footer a {
    color: #fff;
}

/* Profile Expand */
.profile-expand-dropdown {
    width: 265px;
    max-width: 265px;
}

.profile-expand-dropdown .profile-expand-container .profile-expand-list {
    gap: 20px;
    padding: 20px;
}

.profile-expand-dropdown
    .profile-expand-container
    .profile-expand-list
    .profile-expand-item {
    position: relative;
    text-decoration: none;
}

.profile-expand-dropdown
    .profile-expand-container
    .profile-expand-list
    .profile-expand-item.divider {
    margin-bottom: 20px;
}

.profile-expand-dropdown
    .profile-expand-container
    .profile-expand-list
    .profile-expand-item.divider::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    background: #efefef;
    left: 4px;
    right: 4px;
    height: 2px;
    top: 50px;
}

.profile-expand-dropdown
    .profile-expand-container
    .profile-expand-list
    .profile-expand-item
    span {
    font-weight: 500;
    font-size: 15px;
    line-height: 28px;
    color: var(--ot-text-primary);
    transition: 0.3s;
}

.profile-expand-dropdown
    .profile-expand-container
    .profile-expand-list
    .profile-expand-item:hover
    span {
    color: var(--ot-text-title);
}

.profile-expand-dropdown
    .profile-expand-container
    .profile-expand-list
    .profile-expand-item
    img {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

/* sidebar default design */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    width: 280px;
    background-color: var(--ot-bg-secondary-opacity);
    border-right: 2px solid #fff;
    transition: -webkit- width 0.4s;
    transition: width 0.4s;
    transition:
        width 0.4s,
        -webkit- width 0.4s;
}

.sidebar .close-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .sidebar .close-toggle {
        display: block;
    }
}

.sidebar .half-expand-toggle {
    display: block;
}

@media (max-width: 991.98px) {
    .sidebar .half-expand-toggle {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        z-index: 30;
        background-color: var(--ot-bg-secondary);
        z-index: 30;
        left: -100%;
        transition: -webkit-left 0.3s;
        transition: left 0.3s;
        transition:
            left 0.3s,
            -webkit-left 0.3s;
    }
}

.sidebar .sidebar-header {
    padding: 28px 14px;
    display: flex;
    align-items: center;
    align-items: baseline;
    grid-gap: 20px;
}

.sidebar .sidebar-header .sidebar-logo .full-logo {
    opacity: 1;
    visibility: visible;
    max-height: 100%;
    transition: -webkit- opacity 0.4s;
    transition: opacity 0.4s;
    transition:
        opacity 0.4s,
        -webkit- opacity 0.4s;
}

.sidebar .sidebar-header .sidebar-logo .half-logo {
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: opacity 1s;
}

.sidebar .sidebar-header .sidebar-toggle {
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.sidebar .sidebar-menu {
    height: calc(100vh - 60px);
    /* overflow-y: scroll; */
    overflow-x: none;
    /* font icon size */
    /* has arrows color */
    /* Default State reboot*/
}

.sidebar .sidebar-menu i {
    font-size: 22px;
}

.sidebar .sidebar-menu ol,
.sidebar .sidebar-menu ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.sidebar .sidebar-menu-group-heading {
    padding: 18px 25px 8px;
    margin: 0;
    list-style: none;
    pointer-events: none;
}

.sidebar .sidebar-menu-group-heading.is-first {
    padding-top: 8px;
}

.sidebar .sidebar-menu-group-heading .label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #9ca3af;
  margin: 0 0 5px;
}

.half-expand .sidebar .sidebar-menu-group-heading {
    display: none;
}

.sidebar .sidebar-menu ol a,
.sidebar .sidebar-menu ul a {
    text-decoration: none;
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item > ul > li > a {
    padding-left: 47px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul
    > li
    > ul
    > li
    > a {
    padding-left: 64px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    padding: 13px 0px 13px 25px;
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a1a5b7;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    a.parent-item-content::before {
    content: none;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > .sidebar-menu-item
    > .parent-item-content.active {
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-left: 2px solid var(--primary-color);
    background-color: rgba(115, 218, 255, 0.3);
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .active > a {
    background: none;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    .parent-item-content.has-arrow.active::after {
    color: var(--primary-color);
    transform: rotate(-135deg) translate(0, -50%);
    right: 20px;
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .mm-show {
    background: var(--bodybg);
}

.sidebar .sidebar-menu .sidebar-menu-section .mm-active > a {
    background: var(--primary-color);
    background-color: var(--primary-color);
    color: #fff !important;
}

.sidebar .sidebar-menu .sidebar-menu-section .mm-active > a::before {
    background: var(--primary-color);
}

.sidebar .sidebar-menu .sidebar-menu-section .mm-active > a.has-arrow::after {
    color: var(--primary-color);
}

.sidebar .sidebar-menu .sidebar-menu-section ul > li > a {
    padding-left: 28px;
}

.sidebar .sidebar-menu .sidebar-menu-section .mm-active ul {
    background: var(--bodybg);
}

.sidebar-expand .sidebar {
    left: 0;
    transition: left 0.3s;
}

.rtl .half-expand .sidebar .sidebar-header .half-expand-toggle {
    position: absolute;
    right: 100%;
    margin-right: 0px;
}

.rtl .half-expand .sidebar .sidebar-header .half-expand-toggle img {
    transform: rotate(180deg);
}

.rtl .half-expand .sidebar .sidebar-menu {
    overflow: visible;
}

.rtl
    .half-expand
    .sidebar
    .sidebar-menu
    .parent-menu-list
    .sidebar-menu-item
    .parent-item-content
    span {
    display: none;
}

.rtl
    .half-expand
    .sidebar
    .sidebar-menu
    .parent-menu-list
    .sidebar-menu-item
    a {
    border: none;
}

.rtl .half-expand .sidebar .sidebar-menu-item > ul > li > a {
    padding-left: 10px !important;
}

.rtl .half-expand .sidebar .sidebar-menu-item > ul > li > ul > li > a {
    padding-left: 30px !important;
}

.rtl .half-expand .parent-menu-list > li > ul {
    right: 85px !important;
}

.rtl .half-expand .sidebar-menu {
    position: absolute;
    left: 50%;
    top: 10%;
    z-index: 2000;
    overflow: hide;
    height: calc(100vh - 100px);
}

.rtl .half-expand .main-content {
    margin-right: 100px;
    transition: -webkit-margin-right 0.3s;
    transition: margin-right 0.3s;
    transition:
        margin-right 0.3s,
        -webkit-margin-right 0.3s;
}

.half-expand .sidebar {
    width: 100px;
}

.half-expand .sidebar .sidebar-header {
    position: relative;
}

.half-expand .sidebar .sidebar-header .sidebar-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.half-expand .sidebar .sidebar-header .sidebar-logo a .half-logo {
    opacity: 1;
    visibility: visible;
    height: auto;
    transition: -webkit- opacity 0.4s;
    transition: opacity 0.4s;
    transition:
        opacity 0.4s,
        -webkit- opacity 0.4s;
}

.half-expand .sidebar .sidebar-header .sidebar-logo a .full-logo {
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: -webkit- opacity 0.4s;
    transition: opacity 0.4s;
    transition:
        opacity 0.4s,
        -webkit- opacity 0.4s;
}

.half-expand .sidebar .sidebar-header .half-expand-toggle {
    position: absolute;
    left: 100%;
    margin-left: 10px;
}

.half-expand .sidebar .sidebar-header .half-expand-toggle img {
    transform: rotate(180deg);
}

.half-expand .sidebar .sidebar-menu {
    overflow: visible;
}

.half-expand .sidebar .sidebar-menu .parent-menu-list .sidebar-menu-item {
    position: relative;
}

.half-expand
    .sidebar
    .sidebar-menu
    .parent-menu-list
    > .sidebar-menu-item
    > .parent-item-content {
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.half-expand
    .sidebar
    .sidebar-menu
    .parent-menu-list
    .sidebar-menu-item
    .parent-item-content::after {
    content: none;
}

.half-expand
    .sidebar
    .sidebar-menu
    .parent-menu-list
    .sidebar-menu-item
    .parent-item-content
    span {
    display: none;
}

.half-expand .sidebar .sidebar-menu .parent-menu-list .sidebar-menu-item a {
    border: none;
}

.half-expand .sidebar .sidebar-menu-item > ul > li > a {
    padding-left: 10px !important;
}

.half-expand .sidebar ul.parent-menu-list > li > ul {
    position: absolute;
    top: 0;
    width: 236px;
    left: 100px;
    background: #fcfcfc !important;
    border: 1px solid #eaeaea;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
}

.half-expand .sidebar-header {
    background: var(--ot-bg-secondary);
    z-index: 3000000;
}

.half-expand .parent-menu-list > li > ul {
    left: 85px !important;
}

.half-expand .sidebar-menu {
    position: absolute;
    left: 50%;
    top: 10%;
    z-index: 2000;
    overflow: hide;
    height: calc(100vh - 100px);
    transform: translateX(-50%);
}

.half-expand .main-content {
    margin-left: 100px;
    transition: -webkit-margin-left 0.3s;
    transition: margin-left 0.3s;
    transition:
        margin-left 0.3s,
        -webkit-margin-left 0.3s;
}

/* Main Content */
/*Changes while RTL Start*/
body.rtl .main-content {
    margin-right: 280px;
    margin-left: 0;
    transition: -webkit-right 0.3s;
    transition: margin-right 0.3s;
    transition:
        margin-right 0.3s,
        -webkit-margin-right 0.3s;
}

@media (max-width: 768px) {
    body.rtl .main-content {
        width: 100%;
        margin-right: 0;
        transition: -webkit-left 0.3s;
        transition: margin-right 0.3s;
        transition:
            margin-right 0.3s,
            -webkit-margin-right 0.3s;
    }
}

/*Changes while RTL Start*/
.main-content {
    margin-left: 280px;
    transition: -webkit-left 0.3s;
    transition: margin-left 0.3s;
    transition:
        margin-left 0.3s,
        -webkit-margin-left 0.3s;
}

.navbar_main_content {
    margin-left: 0px;
    transition: -webkit-left 0.3s;
    transition: margin-left 0.3s;
    transition:
        margin-left 0.3s,
        -webkit-margin-left 0.3s;
}

@media (max-width: 991.98px) {
    .main-content {
        width: 100%;
        margin-left: 0;
        transition: -webkit-left 0.3s;
        transition: margin-left 0.3s;
        transition:
            margin-left 0.3s,
            -webkit-margin-left 0.3s;
    }
}

.main-content .dashboard-heading .title {
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
}

.summery-card .card-heading .card-icon {
    min-width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.summery-card .card-heading .card-content {
    margin-left: 16px;
    /* rtl */
}

.rtl .summery-card .card-heading .card-content {
    margin-left: 0;
    margin-right: 16px;
}

.summery-card .card-heading .card-content h4 {
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    margin-bottom: 0px;
    color: var(--ot-text-subtitle);
}

.summery-card .card-heading .card-content h1 {
    font-weight: 600;
    font-size: 30px;
    line-height: 42px;
    margin-top: 0px;
    color: var(--ot-text-title);
}

/* Datatable */
.table-content .table-toolbar {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 10px;
    color: #000000;
}

.table-content .table-toolbar .form-select {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: var(--ot-text-title);
    width: auto;
    padding: 10px 30px 10px 14px;
    border: 1px solid var(--ot-border-primary);
    border-radius: 8px;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    outline: 0;
    box-shadow: none;
    background-color: var(--ot-bg-table-toolbar-per-page);
    height: 40px;
}

.table-content .table-toolbar .form-select:focus {
    border-color: var(--primary-color);
}

.table-content .table-toolbar .btn-add {
    text-decoration: none;
    padding: 10px 17px;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    border-radius: 8px;
    display: block;
    text-align: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #ffffff;
}

.table-content .table-toolbar .btn-daterange,
.table-content .table-toolbar .dropdown-export .btn-export,
.table-content .table-toolbar .dropdown-designation .btn-designation {
    background: none;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: var(--ot-text-primary);
    border: 1px solid transparent;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all ease-in-out 0.1s;
    border: 1px solid var(--primary-color);
}

.table-content .table-toolbar .btn-daterange .icon,
.table-content .table-toolbar .dropdown-export .btn-export .icon,
.table-content .table-toolbar .dropdown-designation .btn-designation .icon {
    color: var(--primary-color);
    font-size: 14px;
}

.table-content .table-toolbar .btn-daterange:hover,
.table-content .table-toolbar .dropdown-export .btn-export:hover,
.table-content .table-toolbar .dropdown-designation .btn-designation:hover {
    box-shadow: none;
    background: var(--primary-color);
    color: #ffffff;
}

.table-content .table-toolbar .btn-daterange:hover .icon,
.table-content .table-toolbar .dropdown-export .btn-export:hover .icon,
.table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation:hover
    .icon {
    color: #ffffff;
}

.table-content .table-toolbar .btn-daterange:focus,
.table-content .table-toolbar .dropdown-export .btn-export:focus,
.table-content .table-toolbar .dropdown-designation .btn-designation:focus {
    box-shadow: none;
    background: var(--primary-color);
    color: #ffffff;
}

.table-content .table-toolbar .btn-daterange:focus .icon,
.table-content .table-toolbar .dropdown-export .btn-export:focus .icon,
.table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation:focus
    .icon {
    color: #ffffff;
}

.table-content .table-toolbar .search-box {
    position: relative;
    border: 0;
    border-radius: 8px;
}

.table-content .table-toolbar .search-box .form-control,
.table-content
    .table-toolbar
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select,
.profile-content
    .profile-body-form
    .form-box
    .table-content
    .table-toolbar
    .search-box
    .form-select {
    padding: 8px 45px 8px 16px;
    border: 0;
    box-shadow: none;
    background-color: var(--ot-bg-table-toolbar-search);
    color: var(--ot-text-title);
    border: 1px solid var(--ot-border-primary);
    min-height: 40px;
    line-height: 1;
}

.table-content .table-toolbar .search-box .form-control::-moz-placeholder,
.table-content
    .table-toolbar
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select::-moz-placeholder,
.profile-content
    .profile-body-form
    .form-box
    .table-content
    .table-toolbar
    .search-box
    .form-select::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #b2bec3;
}

.table-content .table-toolbar .search-box .form-control::placeholder,
.table-content
    .table-toolbar
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select::placeholder,
.profile-content
    .profile-body-form
    .form-box
    .table-content
    .table-toolbar
    .search-box
    .form-select::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #b2bec3;
}

.table-content .table-toolbar .search-box .icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #6f767e;
}

.table-content .table-toolbar .dropdown-designation .dropdown-menu {
    background: var(--ot-bg-secondary);
    border: 1px solid var(--ot-border-table-toolbar-btn-action);
    position: relative;
    color: var(--ot-text-title) !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    margin-top: 10px !important;
    padding: 0;
}

.table-content .table-toolbar .dropdown-designation .search-content {
    padding: 20px;
}

.table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box {
    position: relative;
    border: 1px solid #eaeaea;
    border-radius: 50px;
}

.table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-control,
.table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select,
.profile-content
    .profile-body-form
    .form-box
    .table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-select {
    width: 232px;
    padding: 8px 45px 8px 16px;
    border: none;
    border-radius: 50px;
    box-shadow: none;
    background-color: #ffffff;
    color: #1a1d1f;
}

.table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-control::-moz-placeholder,
.table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select::-moz-placeholder,
.profile-content
    .profile-body-form
    .form-box
    .table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-select::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #b2bec3;
}

.table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-control::placeholder,
.table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select::placeholder,
.profile-content
    .profile-body-form
    .form-box
    .table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-select::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #b2bec3;
}

.table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #6f767e;
}

.table-content .table-toolbar .dropdown-designation .list {
    padding: 26px;
    margin: 0;
}

.table-content .table-toolbar .dropdown-designation .list .list-item {
    list-style: none;
    margin-bottom: 24px;
}

.table-content
    .table-toolbar
    .dropdown-designation
    .list
    .list-item:last-child {
    margin-bottom: 0;
}

.table-content .table-toolbar .dropdown-designation .dropdown-item {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--ot-text-primary);
    border-radius: 4px;
    transition: 0.2s ease;
}

.table-content .table-toolbar .dropdown-designation .dropdown-item:hover {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.table-content .table-toolbar .dropdown-designation .dropdown-item:focus {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.table-content .table-toolbar .dropdown-designation .dropdown-item:active {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.table-content .table-toolbar .dropdown-designation .dropdown-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
    text-align: center;
}

.table-content .table-toolbar .dropdown-action .btn-dropdown {
    background: var(--ot-bg-table-toolbar-search);
    width: 40px;
    height: 40px;
    border-radius: 50px;
    color: var(--ot-text-title);
    font-size: 16px;
    border: 1px solid var(--ot-border-primary);
    transition: 0.3s;
}

.table-content .table-toolbar .dropdown-action .btn-dropdown:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.table-content .table-toolbar .dropdown-action .dropdown-menu {
    position: relative;
    background: var(--ot-bg-secondary);
    border: 1px solid var(--ot-border-table-toolbar-btn-action);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    padding: 16px;
    margin-top: 10px !important;
}

.table-content .table-toolbar .dropdown-action .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 8px;
    background: var(--ot-bg-secondary);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    transform: rotate(45deg);
    padding: 10px;
    border: 1px solid var(--ot-border-table-toolbar-btn-action);
}

.table-content .table-toolbar .dropdown-action .dropdown-menu::after {
    content: "";
    position: absolute;
    top: 0;
    right: 5px;
    background: var(--ot-bg-secondary);
    padding: 10px 15px;
}

.table-content .table-toolbar .dropdown-action .dropdown-menu li {
    margin-bottom: 4px;
}

.table-content .table-toolbar .dropdown-action .dropdown-menu li:last-child {
    margin-bottom: 0;
}

.table-content .table-toolbar .dropdown-action .dropdown-item {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: var(--ot-text-primary);
    border-radius: 4px;
    transition: 0.2s ease;
}

.table-content .table-toolbar .dropdown-action .dropdown-item:hover {
    background: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.table-content .table-toolbar .dropdown-action .dropdown-item:focus {
    background: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.table-content .table-toolbar .dropdown-action .dropdown-item:active {
    background: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.table-content .table-toolbar .dropdown-action .dropdown-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
    text-align: center;
}

.table-content .table-toolbar .dropdown-export .dropdown-menu {
    position: relative;
    background-color: var(--ot-bg-secondary);
    border: 1px solid var(--ot-border-primary);
    color: var(--ot-text-title);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    padding: 16px;
    margin-top: 10px !important;
}

.table-content .table-toolbar .dropdown-export .dropdown-menu li {
    margin-bottom: 4px;
}

.table-content .table-toolbar .dropdown-export .dropdown-menu li:last-child {
    margin-bottom: 0;
}

.table-content .table-toolbar .dropdown-export .dropdown-item {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: var(--ot-text-primary);
    border-radius: 4px;
    transition: 0.2s ease;
}

.table-content .table-toolbar .dropdown-export .dropdown-item:hover {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.table-content .table-toolbar .dropdown-export .dropdown-item:focus {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.table-content .table-toolbar .dropdown-export .dropdown-item:active {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.table-content .table-toolbar .dropdown-export .dropdown-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
    text-align: center;
}

.table-content.table-basic .card {
    background-color: var(--ot-bg-table-card);
    border: 1px solid transparent;
}

.table-content.table-basic .card-body {
    padding: 40px 40px;
}

.table-content.table-basic .card-header {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    color: var(--ot-text-title);
    padding: 15px 40px;
    border-bottom: 1px solid var(--ot-border-table-card-header);
    background-color: var(--ot-bg-table-card-header);
    border-radius: 0;
}

.table-content.table-basic .table {
    border-color: var(--ot-border-table);
    vertical-align: middle;
    margin: 0;
}

.table-content.table-basic .table .sorting_asc,
.table-content.table-basic .table .sorting_desc {
    position: relative;
}

.table-content.table-basic .table .sorting_asc::before,
.table-content.table-basic .table .sorting_desc::before {
    position: absolute;
    left: auto;
    right: 16px;
    /* content: "\f106";
  font-family: "Line Awesome Free"; */
    font-size: 12px;
    font-weight: 900;
    top: 42%;
    color: var(--ot-color-table-icon-sorting-asc-up);
    cursor: pointer;
    transform: translateY(-42%);
}

.table-content.table-basic .table .sorting_asc::after,
.table-content.table-basic .table .sorting_desc::after {
    position: absolute;
    left: auto;
    right: 16px;
    /* content: "\f107";
  font-family: "Line Awesome Free"; */
    font-size: 12px;
    font-weight: 900;
    top: 62%;
    color: var(--ot-color-table-icon-sorting-asc-down);
    cursor: pointer;
    transform: translateY(-62%);
}

.table-content.table-basic .table .sorting_desc::before {
    color: var(--ot-color-table-icon-sorting-desc-up);
}

.table-content.table-basic .table .sorting_desc::after {
    color: var(--ot-color-table-icon-sorting-desc-down);
}

.check-box .form-check-input {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--ot-border-table-checkbox);
    background-color: var(--ot-bg-table-checkbox);
    cursor: pointer;
}

.check-box .form-check-input:focus {
    box-shadow: none;
}

.check-box .form-check-input:checked {
    background-repeat: no-repeat;
    background-position: center;
}

.table-content.table-basic .table .thead {
  background: #ececec;
  border-bottom-color: var(--ot-border-table-thead);
}

.table-content.table-basic .table .thead tr th {
  font-family: var(--font-Inter);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  line-height: 21px;
  color: var(--ot-text-title);
  vertical-align: middle;
  white-space: nowrap;
  border-color: var(--ot-border-table-thead);
}

.table-content.table-basic .table .tbody tr td {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    color: var(--ot-text-primary);
    padding: 16px;
    vertical-align: middle;
    white-space: nowrap;
}

.table-content.table-basic .table .dropdown-action .btn-dropdown {
    width: 28px;
    height: 28px;
    background: var(--primary-color) !important;
    border-radius: 50px;
    color: var(--ot-bg-table-toolbar-btn-action);
    font-size: 10px;
    color: #fff;
}

.table-content.table-basic .table .dropdown-action .btn-dropdown:focus {
    background: var(--primary-color);
    box-shadow: 1px 1px 8px rgba(16, 108, 255, 0.12);
    color: #ffffff;
}

.table-content.table-basic .table .dropdown-action .dropdown-menu {
    background-color: var(--ot-bg-secondary) !important;
    border: 1px solid var(--ot-border-primary) !important;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 10px 8px;
    margin-top: 10px !important;
    min-width: 170px;
}

.table-content.table-basic .table .dropdown-action .dropdown-menu li {
    margin-bottom: 2px;
}

.table-content.table-basic
    .table
    .dropdown-action
    .dropdown-menu
    li:last-child {
    margin-bottom: 0;
}

.table-content.table-basic
    .table
    .dropdown-action
    .dropdown-menu
    > a.dropdown-item {
    margin-bottom: 2px;
}

.table-content.table-basic
    .table
    .dropdown-action
    .dropdown-menu
    > a.dropdown-item:last-child {
    margin-bottom: 0;
}

.table-content.table-basic .table .dropdown-action .dropdown-item {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: var(--ot-text-primary);
    border-radius: 4px;
    transition: 0.2s ease;
    white-space: nowrap;
}

.table-content.table-basic .table .dropdown-action .dropdown-item:hover {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title) !important;
}

.table-content.table-basic .table .dropdown-action .dropdown-item:focus {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title) !important;
}

.table-content.table-basic .table .dropdown-action .dropdown-item:active {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title) !important;
}

.table-content.table-basic .table .dropdown-action .dropdown-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
    text-align: center;
}

/* Charts */
.statistic-card .card-heading .card-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    color: #1a1d1f;
    margin: 0;
    padding: 0;
}

/* Common Buttons */
.ot-dropdown-btn {
    border-radius: 8px;
    padding: 15px 20px;
    outline: 0 !important;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--ot-border-primary) !important;
    background: var(--white);
    color: var(--ot-text-title);
    min-height: 40px;
    transition: 0.3s;
    min-width: 213px;
}

.ot-dropdown-btn span {
    flex: 1 1 0;
    text-align: left;
}

.ot-dropdown-btn:hover,
.ot-dropdown-btn:focus {
    /* background: var(--white); */
    color: var(--primary-color);
}

.ot-dropdown-btn::after {
    content: none;
}

.ot-btn-primary,
.ot-btn-danger {
    color: #ffffff !important;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    border-radius: 8px;
}

.ot-btn-danger {
    color: #ffffff !important;
    border: 1px solid #fd2201;
    background: linear-gradient(90deg, #ff6a54 0%, #fd2201 100%);
}

/* Tables */
.badge-basic-success-text {
    font-family: var(--font-Inter);
    font-weight: 600;
    font-size: 12px;
    border-radius: 50px;
    padding: 4px 10px;
    background: var(--ot-bg-badge-light-success);
    color: var(--ot-text-badge-deep-success);
}

.badge-basic-danger-text {
    font-family: var(--font-Inter);
    font-weight: 600;
    font-size: 12px;
    border-radius: 50px;
    padding: 4px 10px;
    background: var(--ot-bg-badge-light-danger);
    color: var(--ot-text-badge-deep-danger);
}

.badge-basic-warning-text {
    font-family: var(--font-Inter);
    font-weight: 600;
    font-size: 12px;
    border-radius: 50px;
    padding: 4px 10px;
    background: var(--ot-bg-badge-light-warning);
    color: var(--ot-text-badge-deep-warning);
}

.table-color-col,
.ot-table-bg {
    width: 100%;
}

.table-color-col thead th,
.ot-table-bg thead th {
    height: 56px;
    border-bottom: 1px solid #e9e9ef;
    padding-left: 16px;
    color: #1a1d1f;
}

.dark-theme .table-color-col thead th,
.dark-theme .ot-table-bg thead th {
    color: var(--ot-text-title);
}

.table-color-col thead th:first-child,
.ot-table-bg thead th:first-child {
    border-radius: 10px 0 0 0;
}

.table-color-col thead th:last-child,
.ot-table-bg thead th:last-child {
    border-radius: 0 10px 0 0;
}

.table-color-col tbody td,
.ot-table-bg tbody td {
    font-weight: 400;
    padding-left: 16px;
    height: 56px;
    color: #6f767e;
}

.ot-table-bg th,
.ot-table-bg tr:nth-child(even) {
    background-color: var(--bodybg);
}

.dark-theme .ot-table-bg th,
.dark-theme .ot-table-bg tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

.table-color-col th:nth-child(odd),
.table-color-col td:nth-child(odd) {
    background-color: var(--bodybg);
}

.table-color-col td {
    border-bottom: 1px solid #f5f5f5;
}

.table-color-col tr:last-child td {
    border: none;
}

.pagination-content.ot-table-bg .pagination,
.pagination-content.table-color-col .pagination {
    width: 368px;
}

.pagination-content.ot-table-bg .pagination li,
.pagination-content.table-color-col .pagination li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
    width: 32px;
    border: 1px solid #eaeaea;
    border-radius: 7px;
}

.pagination-content.ot-table-bg .pagination li a,
.pagination-content.table-color-col .pagination li a {
    color: #1a1d1f;
}

.pagination-content.ot-table-bg .pagination li a i,
.pagination-content.table-color-col .pagination li a i {
    color: #6f767e;
}

.pagination-content.ot-table-bg .pagination li:hover a,
.pagination-content.table-color-col .pagination li:hover a {
    color: #4a42ec;
}

.pagination-content.ot-table-bg .pagination li:hover,
.pagination-content.table-color-col .pagination li:hover {
    border-color: #4a42ec;
}

.selected {
    background: var(--primary-color);
}

.selected > a {
    color: white !important;
}

.submit-button {
    width: 100%;
    background: var(--primary-color);
    border-radius: 8px;
    color: white;
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    font-weight: 600;
}

.modal-header-image {
    background-size: cover;
    background-color: transparent;
    background-repeat: no-repeat;
}

.modal-content {
    border: none;
}

.btn-close {
    background: rgba(255, 255, 255, 0.3215686275);
    border-radius: 50%;
}

.btn-gradian {
    color: white;
    border: none;
    font-weight: 500;
    background: var(--primary-color);
    padding: 10px 15px;
    font-size: 14px;
}

.btn-gradian:hover {
    color: white;
}

.close-icon {
    float: right;
}

.text-wrap-auto {
    text-wrap: auto;
    white-space: normal !important;
    word-break: break-word;
}

/* Notice list: give Subject/Department more width; clamp Description to 2 lines */
.table-content.table-basic .table.notice-list-table {
    table-layout: fixed;
    width: 100%;
}

.table-content.table-basic .table.notice-list-table th:nth-child(1),
.table-content.table-basic .table.notice-list-table td:nth-child(1) {
    width: 20px;
}

.table-content.table-basic .table.notice-list-table th:nth-child(2),
.table-content.table-basic .table.notice-list-table td:nth-child(2) {
    width: 25px;
}

.table-content.table-basic .table.notice-list-table th:nth-child(3),
.table-content.table-basic .table.notice-list-table td:nth-child(3) {
    width: 45px;
}

.table-content.table-basic .table.notice-list-table th:nth-child(4),
.table-content.table-basic .table.notice-list-table td:nth-child(4) {
    width: 25%;
}

.table-content.table-basic .table.notice-list-table th:nth-child(5),
.table-content.table-basic .table.notice-list-table td:nth-child(5) {
    width: 15%;
}

.table-content.table-basic .table.notice-list-table th:nth-child(6),
.table-content.table-basic .table.notice-list-table td:nth-child(6) {
    width: 35%;
}

.table-content.table-basic .table.notice-list-table th:nth-child(7),
.table-content.table-basic .table.notice-list-table td:nth-child(7) {
    width: 70px;
    text-align: center;
}

.table-content.table-basic .table.notice-list-table td .line-clamp-2 {
    white-space: normal;
    word-break: break-word;
}

.accent {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.05));
    position: relative;
}

.accent span {
    position: absolute;
    bottom: 10px;
    padding-left: 5px;
}

.default-theme .dark_logo {
    display: inline-block !important;
}

.default-theme .white_logo {
    display: none;
}

.dark-theme .dark_logo {
    display: none;
}

.dark-theme .white_logo {
    display: inline-block !important;
}

button {
    border: none;
    outline: none;
}

.dropdown-menu {
    margin-top: 10px !important;
}

#dropdown {
    background-color: #fcfcfc;
    border: 2px solid #f0eeee;
    border-radius: 5px 0px 0px 5px;
    font-weight: 500;
    font-size: 16px;
    padding: 8px 16px;
    letter-spacing: 0.02em;
    color: #1a1d1f;
}

#dropdown:hover {
    border: 2px solid #4a42ec;
    color: #4a42ec;
}

#dropdown:focus {
    border: 2px solid #4d5ee5;
    color: #066ecf;
}

.search-input {
    position: relative;
    text-align: center;
    padding: 15px 16px 15px 16px;
    border-bottom: 2px solid #f0eeee;
}

.search-input input {
    padding: 12px;
    width: 100%;
    border: 2px solid #f0eeee;
    border-radius: 50px;
    background: #fafafa;
    outline: none;
}

.search-input ::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.search-input ::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.search-input i {
    position: absolute;
    top: 29px;
    right: 27px;
    padding: 5px;
    background-color: #fafafa;
    color: #6f767e;
}

.search-input ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 8px 16px;
    gap: 16px;
}

.search-input ul li {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #6f767e;
}

.search-input ul li input {
    width: auto;
}

.search-input ul li ::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.search-input ul li ::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.input-with-icon {
    position: relative;
    margin-top: 16px;
    width: 336px;
    height: 40px;
}

.input-with-icon input {
    width: 336px;
    height: 40px;
    padding: 16px 45px;
    border: 2px solid #f0eeee;
    border-radius: 8px;
    outline: none;
}

.input-with-icon input:focus-visible {
    box-shadow: 0px 0px 10px rgba(10, 175, 255, 0.35);
    border: 2px solid #0010f7;
    outline: none;
}

.input-with-icon ::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.input-with-icon ::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

.input-with-icon i {
    position: absolute;
    top: 16px;
    color: #6f767e;
}

.input-with-icon i.fa-user-o {
    left: 20px;
}

.input-with-icon i.fa-search {
    right: 20px;
}

textarea {
    width: 280px;
    height: 79px;
    margin-top: 0px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 7px;
    outline: none;
}

textarea::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

textarea::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #b2bec3;
}

option:hover {
    color: #4a42ec;
}

/* Badges */
.badge-success,
.badge-light-success,
.badge-primary,
.badge-light-primary,
.badge-warning,
.badge-light-warning,
.badge-danger,
.badge-info,
.badge-secondary,
.badge-main,
.badge-light-main {
    padding: 3px 10px;
    border: 0;
    background: var(--white);
    border-radius: 0.425rem;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    color: var(--ot-text-badge-success);
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    background: var(--ot-bg-badge-light-success);
}

.badge-danger {
    color: var(--ot-text-badge-danger);
    background: var(--ot-bg-badge-light-danger);
}

.badge-warning,
.badge-light-warning {
    color: var(--ot-text-badge-warning);
    background: var(--ot-bg-badge-light-warning);
}

.badge-primary,
.badge-light-primary {
    color: var(--ot-text-badge-primary);
    background: var(--ot-bg-badge-light-primary);
}

.badge-info {
    color: var(--ot-text-badge-info);
    background: var(--ot-bg-badge-light-info);
}

.badge-secondary {
    color: var(--ot-text-badge-secondary);
    background: var(--ot-bg-badge-light-secondary);
}

.badge-main,
.badge-light-main {
    color: var(--ot-text-badge-main);
    background: var(--ot-bg-badge-light-main);
}

.badge-light-success {
    color: var(--ot-text-badge-light-success);
    background: var(--ot-bg-badge-light-success);
}

.badge-light-warning {
    color: var(--ot-text-badge-light-warning);
    background: var(--ot-bg-badge-light-warning);
}

.badge-light-primary {
    color: var(--ot-text-badge-light-primary);
    background: var(--ot-bg-badge-light-primary);
}

/* Components */
.ot-pagination {
    margin-top: 40px;
}

.ot-pagination .pagination {
    margin: 0;
}

.ot-pagination .pagination .page-item {
    margin-right: 10px;
}

.ot-pagination .pagination .page-item:last-child {
    margin-right: 0;
}

.ot-pagination .pagination .page-item .page-link {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--ot-text-table-pagination);
    border: 1px solid var(--ot-border-table-pagination);
    border-radius: 7px;
    padding: 8px 12px;
    background-color: var(--ot-bg-table-pagination);
}

.ot-pagination .pagination .page-item .page-link:hover {
    background-color: transparent;
}

.ot-pagination .pagination .page-item .page-link:focus {
    box-shadow: none;
    background-color: transparent;
}

.ot-pagination .pagination .page-item .page-link.active {
    background-image: var(--primary-color), var(--primary-color);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px var(--ot-bg-table-pagination) inset;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--primary-color);
    border: 1px solid transparent;
    background: var(--primary-color);
}

/* profile */
.profile-content .profile-menu-mobile {
    background-color: var(--ot-bg-profile-mobile-menu);
}

@media (min-width: 991.98px) {
    .profile-content .profile-menu-mobile {
        display: none;
    }
}

.profile-content .profile-menu-mobile .btn-menu-mobile {
    background-color: var(--ot-bg-profile-mobile-menu);
    padding: 16px 24px;
    width: 100%;
    display: block;
    text-align: left;
}

.profile-content .profile-menu-mobile .btn-menu-mobile .icon {
    font-size: 18px;
    color: var(--ot-text-title);
}

.profile-content .profile-menu-mobile .offcanvas {
    width: 100%;
    max-width: 300px;
    background-color: var(--ot-bg-profile-mobile-menu);
}

.profile-content .profile-menu-mobile .offcanvas .offcanvas-body {
    padding: 0;
}

.profile-content .profile-menu-mobile .offcanvas .offcanvas-header {
    justify-content: end;
}

.profile-content .profile-menu-mobile .offcanvas .offcanvas-header .btn-close {
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.profile-content
    .profile-menu-mobile
    .offcanvas
    .offcanvas-header
    .btn-close:focus {
    box-shadow: none;
}

.profile-content .profile-menu-mobile .offcanvas .offcanvas-header .icon {
    font-size: 18px;
    color: var(--ot-text-title);
}

.profile-content .profile-menu-mobile .profile-menu {
    background-color: var(--ot-bg-profile-mobile-menu);
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 40px;
    border-right: 1px solid #eaeaea;
    flex: 0 0 300px;
    min-height: 1000px;
}

.profile-content .profile-menu-mobile .profile-menu-head {
    padding: 40px 28px 0px 40px;
}

.profile-content .profile-menu-mobile .profile-menu-head .body {
    margin-left: 12px;
}

.profile-content .profile-menu-mobile .profile-menu-head .body .title {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 18px;
    font-weight: 600;
    line-height: 16px;
    color: #1a1d1f;
    margin-bottom: 8px;
}

.profile-content .profile-menu-mobile .profile-menu-head .body .paragraph {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #6f767e;
}

.profile-content .profile-menu-mobile .profile-menu-body .nav-item {
    margin-bottom: 35px;
    border-right: 2px solid transparent;
    border-radius: 2px 0px 0px 2px;
}

.profile-content .profile-menu-mobile .profile-menu-body .nav-item:last-child {
    margin-bottom: 0;
}

.profile-content .profile-menu-mobile .profile-menu-body .nav-link {
    padding: 0px 0px 0px 40px;
    border-right: 2px solid transparent;
    border-radius: 2px 0px 0px 2px;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 15px;
    font-weight: 500;
    line-height: 16px;
    color: #6f767e;
}

.profile-content .profile-menu-mobile .profile-menu-body .nav-link.active {
    color: #4a42ec;
    border-right: 2px solid #4a42ec;
}

.profile-content .profile-menu-mobile .profile-menu-body .nav-link:hover {
    color: #4a42ec;
    border-right: 2px solid #4a42ec;
}

.profile-content .profile-menu {
    background-color: var(--ot-bg-profile-menu);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 40px;
    border-right: 1px solid var(--ot-border-primary);
    min-height: 1000px;
    flex: 0 0 300px;
}

@media (max-width: 1399.98px) {
    .profile-content .profile-menu {
        flex: 0 0 240px;
    }
}

@media (max-width: 991.98px) {
    .profile-content .profile-menu {
        display: none;
    }
}

.profile-content .profile-menu-head {
    padding: 60px 28px 0px 60px;
}

@media (max-width: 1399.98px) {
    .profile-content .profile-menu-head {
        padding: 60px 16px 0px 16px;
    }
}

.profile-content .profile-menu-head .body {
    margin-left: 12px;
}

@media (max-width: 1399.98px) {
    .profile-content .profile-menu-head .body {
        margin-left: 4px;
    }
}

.profile-content .profile-menu-head .body .title {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 18px;
    font-weight: 600;
    line-height: 16px;
    color: var(--ot-text-title);
    margin-bottom: 8px;
}

.profile-content .profile-menu-head .body .paragraph {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #6f767e;
}

.profile-content .profile-menu-body .nav-item {
    margin-bottom: 35px;
    border-right: 2px solid transparent;
    border-radius: 2px 0px 0px 2px;
}

.profile-content .profile-menu-body .nav-item:last-child {
    margin-bottom: 0;
}

.profile-content .profile-menu-body .nav-link {
    padding: 0px 0px 0px 60px;
    border-right: 2px solid transparent;
    border-radius: 2px 0px 0px 2px;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 15px;
    font-weight: 500;
    line-height: 16px;
    color: #6f767e;
}

@media (max-width: 1399.98px) {
    .profile-content .profile-menu-body .nav-link {
        padding: 0px 0px 0px 16px;
    }
}

.profile-content .profile-menu-body .nav-link.active {
    color: #4a42ec;
    border-right: 2px solid #4a42ec;
}

.profile-content .profile-menu-body .nav-link:hover {
    color: #4a42ec;
    border-right: 2px solid #4a42ec;
}

.profile-content .profile-body {
    width: 0%;
    flex: 1;
    background-color: var(--ot-bg-profile-body);
    padding: 80px 250px 80px 80px;
}

@media (max-width: 991.98px) {
    .profile-content .profile-body {
        width: unset;
    }
}

@media (max-width: 1399.98px) {
    .profile-content .profile-body {
        padding: 80px 24px 80px 24px;
    }
}

.profile-content .profile-body .btn-back {
    text-decoration: none;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #ffffff;
    padding: 11px 16px;
    background: #4a42ec;
    border-radius: 8px;
}

.profile-content .profile-body .title {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
    color: var(--ot-text-title);
    margin-bottom: 40px;
}

.profile-content .profile-body .nav {
    width: 100%;
    border-bottom: 1px solid var(--ot-border-primary);
}

.profile-content .profile-body .nav-item {
    margin-right: 40px;
}

@media (max-width: 1399.98px) {
    .profile-content .profile-body .nav-item {
        margin-right: 12px;
    }
}

.profile-content .profile-body .nav-item:last-child {
    margin-right: 0;
}

.profile-content .profile-body .nav-link {
    padding: 16px 0;
    border-radius: 0;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #6f767e;
    cursor: pointer;
    border-bottom: 1px solid transparent;
}

.profile-content .profile-body .nav-link.active {
    background-color: transparent;
    color: #4a42ec;
    border-bottom: 1px solid #4a42ec;
}

.profile-content .profile-body .nav-link:hover {
    background-color: transparent;
    color: #4a42ec;
    border-bottom: 1px solid #4a42ec;
}

.profile-content .profile-body-form .form-item {
    padding: 32px 0px;
    border-bottom: 1px solid var(--ot-border-primary);
}

.profile-content .profile-body-form .image-box {
    width: 100px;
    height: 100px;
    position: relative;
}

.profile-content .profile-body-form .image-box .icon {
    position: absolute;
    top: unset;
    right: 0;
    bottom: 0;
    left: unset;
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 32px;
    border: none;
    border-radius: 200px;
    background-color: #ffffff;
    color: #4a42ec;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
    cursor: pointer;
}

.profile-content .profile-body-form .title {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ot-text-title);
    margin-bottom: 8px;
}

.profile-content .profile-body-form .title .icon-required {
    font-size: 8px;
    color: #ff6a54;
}

.profile-content .profile-body-form .paragraph {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #6f767e;
}

.profile-content .profile-body-form .btn-edit {
    background-color: transparent;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #6f767e;
}

.profile-content .profile-body-form .form-box {
    margin-top: 12px;
}

.profile-content .profile-body-form .form-box .form-control,
.profile-content .profile-body-form .form-box .form-select {
    max-width: 336px;
    max-height: 40px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
}

.profile-content .profile-body-form .form-box .form-control::-moz-placeholder,
.profile-content .profile-body-form .form-box .form-select::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #6f767e;
}

.profile-content .profile-body-form .form-box .form-control::placeholder,
.profile-content .profile-body-form .form-box .form-select::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #6f767e;
}

.profile-content .profile-body-form .form-box .form-control:focus,
.profile-content .profile-body-form .form-box .form-select:focus {
    border-color: #eaeaea;
    box-shadow: none;
}

.profile-content .profile-body-form .form-box .unset-size {
    max-width: unset;
    max-height: unset;
}

.profile-content .profile-body-form .form-box .btn-update {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #ffffff;
    padding: 11px 20px;
    background: #4a42ec;
    border-radius: 8px;
    margin-top: 12px;
}

.profile-content .profile-body.padding-reduce {
    padding: 80px 40px;
}

@media (max-width: 1399.98px) {
    .profile-content .profile-body.padding-reduce {
        padding: 80px 24px;
    }
}

.profile-table-content .table-toolbar {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #000000;
}

.profile-table-content .table-toolbar .form-select {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: var(--ot-text-title);
    width: auto;
    padding: 10px 30px 10px 14px;
    border: 1px solid var(--ot-border-table-toolbar-per-page);
    border-radius: 8px;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    outline: 0;
    box-shadow: none;
    background-color: var(--ot-bg-table-toolbar-per-page);
}

.profile-table-content .table-toolbar .btn-add {
    text-decoration: none;
    padding: 10px 17px;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    border-radius: 8px;
    display: block;
    text-align: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #ffffff;
}

.profile-table-content .table-toolbar .btn-daterange,
.profile-table-content .table-toolbar .dropdown-export .btn-export,
.profile-table-content .table-toolbar .dropdown-designation .btn-designation {
    background-image: var(--primary-color), var(--primary-color);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px var(--ot-bg-table-toolbar-btn-outline-primary)
        inset;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: var(--ot-text-primary);
    border: 1px solid transparent;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all ease-in-out 0.1s;
}

.profile-table-content .table-toolbar .btn-daterange .icon,
.profile-table-content .table-toolbar .dropdown-export .btn-export .icon,
.profile-table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation
    .icon {
    color: var(--primary-color);
    font-size: 14px;
}

.profile-table-content .table-toolbar .btn-daterange:hover,
.profile-table-content .table-toolbar .dropdown-export .btn-export:hover,
.profile-table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation:hover {
    box-shadow: none;
    background: var(--primary-color);
    color: #ffffff;
}

.profile-table-content .table-toolbar .btn-daterange:hover .icon,
.profile-table-content .table-toolbar .dropdown-export .btn-export:hover .icon,
.profile-table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation:hover
    .icon {
    color: #ffffff;
}

.profile-table-content .table-toolbar .btn-daterange:focus,
.profile-table-content .table-toolbar .dropdown-export .btn-export:focus,
.profile-table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation:focus {
    box-shadow: none;
    background: var(--primary-color);
    color: #ffffff;
}

.profile-table-content .table-toolbar .btn-daterange:focus .icon,
.profile-table-content .table-toolbar .dropdown-export .btn-export:focus .icon,
.profile-table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation:focus
    .icon {
    color: #ffffff;
}

.profile-table-content .table-toolbar .search-box {
    position: relative;
    border: 1px solid var(--ot-border-table-toolbar-search);
    border-radius: 8px;
}

.profile-table-content .table-toolbar .search-box .form-control,
.profile-table-content
    .table-toolbar
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select,
.profile-content
    .profile-body-form
    .form-box
    .profile-table-content
    .table-toolbar
    .search-box
    .form-select {
    padding: 8px 45px 8px 16px;
    border: none;
    box-shadow: none;
    background-color: var(--ot-bg-table-toolbar-search);
    color: var(--ot-text-title);
}

.profile-table-content
    .table-toolbar
    .search-box
    .form-control::-moz-placeholder,
.profile-table-content
    .table-toolbar
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select::-moz-placeholder,
.profile-content
    .profile-body-form
    .form-box
    .profile-table-content
    .table-toolbar
    .search-box
    .form-select::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #b2bec3;
}

.profile-table-content .table-toolbar .search-box .form-control::placeholder,
.profile-table-content
    .table-toolbar
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select::placeholder,
.profile-content
    .profile-body-form
    .form-box
    .profile-table-content
    .table-toolbar
    .search-box
    .form-select::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #b2bec3;
}

.profile-table-content .table-toolbar .search-box .icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #6f767e;
}

.profile-table-content .table-toolbar .dropdown-designation .dropdown-menu {
    position: relative;
    background-color: var(--ot-bg-secondary) !important;
    border: 1px solid var(--ot-border-primary) !important;
    color: var(--ot-text-title) !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    margin-top: 10px !important;
    padding: 0;
}

.profile-table-content .table-toolbar .dropdown-designation .search-content {
    padding: 20px;
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box {
    position: relative;
    border: 1px solid #eaeaea;
    border-radius: 50px;
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-control,
.profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select,
.profile-content
    .profile-body-form
    .form-box
    .profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-select {
    width: 232px;
    padding: 8px 45px 8px 16px;
    border: none;
    border-radius: 50px;
    box-shadow: none;
    background-color: #ffffff;
    color: #1a1d1f;
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-control::-moz-placeholder,
.profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select::-moz-placeholder,
.profile-content
    .profile-body-form
    .form-box
    .profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-select::-moz-placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #b2bec3;
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-control::placeholder,
.profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .profile-content
    .profile-body-form
    .form-box
    .form-select::placeholder,
.profile-content
    .profile-body-form
    .form-box
    .profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .form-select::placeholder {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #b2bec3;
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .search-content
    .search-box
    .icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #6f767e;
}

.profile-table-content .table-toolbar .dropdown-designation .list {
    padding: 26px;
    margin: 0;
}

.profile-table-content .table-toolbar .dropdown-designation .list .list-item {
    list-style: none;
    margin-bottom: 24px;
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .list
    .list-item:last-child {
    margin-bottom: 0;
}

.profile-table-content .table-toolbar .dropdown-designation .dropdown-item {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #6f767e;
    border-radius: 4px;
    transition: 0.2s ease;
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .dropdown-item:hover {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .dropdown-item:focus {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .dropdown-item:active {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.profile-table-content
    .table-toolbar
    .dropdown-designation
    .dropdown-item
    .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
    text-align: center;
}

.profile-table-content .table-toolbar .dropdown-action .btn-dropdown {
    border: 1px solid var(--ot-border-table-toolbar-btn-action);
    width: 40px;
    height: 40px;
    background: var(--ot-bg-table-toolbar-btn-action);
    box-shadow: 1px 1px 8px rgba(16, 108, 255, 0.12);
    border-radius: 50px;
    color: var(--primary-color);
    font-size: 16px;
}

.profile-table-content .table-toolbar .dropdown-action .btn-dropdown:focus {
    background: var(--primary-color);
    box-shadow: 1px 1px 8px rgba(16, 108, 255, 0.12);
    color: #ffffff;
}

.profile-table-content .table-toolbar .dropdown-action .dropdown-menu {
    position: relative;
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    padding: 16px;
    margin-top: 10px !important;
}

.profile-table-content .table-toolbar .dropdown-action .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 8px;
    background: #ffffff;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    transform: rotate(45deg);
    padding: 10px;
}

.profile-table-content .table-toolbar .dropdown-action .dropdown-menu::after {
    content: "";
    position: absolute;
    top: 0;
    right: 5px;
    background: #ffffff;
    padding: 10px 15px;
}

.profile-table-content .table-toolbar .dropdown-action .dropdown-menu li {
    margin-bottom: 4px;
}

.profile-table-content
    .table-toolbar
    .dropdown-action
    .dropdown-menu
    li:last-child {
    margin-bottom: 0;
}

.profile-table-content .table-toolbar .dropdown-action .dropdown-item {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #6f767e;
    border-radius: 4px;
    transition: 0.2s ease;
}

.profile-table-content .table-toolbar .dropdown-action .dropdown-item:hover {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.profile-table-content .table-toolbar .dropdown-action .dropdown-item:focus {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.profile-table-content .table-toolbar .dropdown-action .dropdown-item:active {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.profile-table-content .table-toolbar .dropdown-action .dropdown-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
    text-align: center;
}

.profile-table-content .table-toolbar .dropdown-export .dropdown-menu {
    position: relative;
    background-color: var(--ot-bg-secondary) !important;
    border: 1px solid var(--ot-border-primary) !important;
    color: var(--ot-text-title) !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 7px;
    padding: 16px;
    margin-top: 10px !important;
}

.profile-table-content .table-toolbar .dropdown-export .dropdown-menu li {
    margin-bottom: 4px;
}

.profile-table-content
    .table-toolbar
    .dropdown-export
    .dropdown-menu
    li:last-child {
    margin-bottom: 0;
}

.profile-table-content .table-toolbar .dropdown-export .dropdown-item {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #6f767e;
    border-radius: 4px;
    transition: 0.2s ease;
}

.profile-table-content .table-toolbar .dropdown-export .dropdown-item:hover {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.profile-table-content .table-toolbar .dropdown-export .dropdown-item:focus {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.profile-table-content .table-toolbar .dropdown-export .dropdown-item:active {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title);
}

.profile-table-content .table-toolbar .dropdown-export .dropdown-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
    text-align: center;
}

.profile-table-content .table {
    border-color: var(--ot-border-table);
    vertical-align: middle;
    margin: 0;
}

.profile-table-content .table .sorting_asc,
.profile-table-content .table .sorting_desc,
.profile-table-content .table-content.table-basic .table .sorting_desc,
.table-content.table-basic .profile-table-content .table .sorting_desc {
    position: relative;
}

.profile-table-content .table .sorting_asc::before,
.profile-table-content .table .sorting_desc::before,
.profile-table-content .table-content.table-basic .table .sorting_desc::before,
.table-content.table-basic .profile-table-content .table .sorting_desc::before {
    position: absolute;
    left: auto;
    right: 16px;
    content: "\f106";
    font-family: "Line Awesome Free";
    font-size: 12px;
    font-weight: 900;
    top: 42%;
    color: var(--ot-color-table-icon-sorting-asc-up);
    cursor: pointer;
    transform: translateY(-42%);
}

.profile-table-content .table .sorting_asc::after,
.profile-table-content .table .sorting_desc::after,
.profile-table-content .table-content.table-basic .table .sorting_desc::after,
.table-content.table-basic .profile-table-content .table .sorting_desc::after {
    position: absolute;
    left: auto;
    right: 16px;
    content: "\f107";
    font-family: "Line Awesome Free";
    font-size: 12px;
    font-weight: 900;
    top: 62%;
    color: var(--ot-color-table-icon-sorting-asc-down);
    cursor: pointer;
    transform: translateY(-62%);
}

.profile-table-content .table .sorting_desc::before {
    color: var(--ot-color-table-icon-sorting-desc-up);
}

.profile-table-content .table .sorting_desc::after {
    color: var(--ot-color-table-icon-sorting-desc-down);
}

.profile-table-content .table .check-box .form-check-input {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    border: 1px solid var(--ot-border-table-checkbox);
    background-color: var(--ot-bg-table-checkbox);
}

.profile-table-content .table .check-box .form-check-input:focus {
    box-shadow: none;
}

.profile-table-content .table .check-box .form-check-input:checked {
    background-repeat: no-repeat;
    background-position: center;
}

.profile-table-content .table .thead {
    background: var(--ot-bg-table-thead);
    border-bottom-color: var(--ot-border-table-thead);
}

.profile-table-content .table .thead tr th {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: var(--ot-text-title);
    padding: 16px 32px 16px 16px;
    vertical-align: middle;
    white-space: nowrap;
    border-color: var(--ot-border-table-thead);
}

.profile-table-content .table .tbody tr:nth-of-type(odd) {
    background: var(--ot-bg-table-tbody);
}

.profile-table-content .table .tbody tr td {
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 21px;
    color: var(--ot-text-primary);
    padding: 16px;
    vertical-align: middle;
    white-space: nowrap;
}

.profile-table-content .table .dropdown-action .btn-dropdown {
    border: 1px solid var(--ot-border-table-toolbar-btn-action);
    width: 28px;
    height: 28px;
    background: var(--ot-bg-table-toolbar-btn-action);
    box-shadow: 1px 1px 8px rgba(16, 108, 255, 0.12);
    border-radius: 50px;
    color: var(--primary-color);
    font-size: 10px;
}

.profile-table-content .table .dropdown-action .btn-dropdown:focus {
    background: var(--primary-color);
    box-shadow: 1px 1px 8px rgba(16, 108, 255, 0.12);
    color: #ffffff;
}

.profile-table-content .table .dropdown-action .dropdown-menu {
    background-color: var(--ot-bg-secondary) !important;
    border: 1px solid var(--ot-border-primary) !important;
    color: var(--ot-text-title) !important;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 10px 8px;
    margin-top: 10px !important;
    min-width: 170px;
}

.profile-table-content .table .dropdown-action .dropdown-menu li {
    margin-bottom: 2px;
}

.profile-table-content .table .dropdown-action .dropdown-menu li:last-child {
    margin-bottom: 0;
}

.profile-table-content
    .table
    .dropdown-action
    .dropdown-menu
    > a.dropdown-item {
    margin-bottom: 2px;
}

.profile-table-content
    .table
    .dropdown-action
    .dropdown-menu
    > a.dropdown-item:last-child {
    margin-bottom: 0;
}

.profile-table-content .table .dropdown-action .dropdown-item {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    font-family: var(--font-Inter);
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #6f767e;
    border-radius: 4px;
    transition: 0.2s ease;
    white-space: nowrap;
}

.profile-table-content .table .dropdown-action .dropdown-item:hover {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title) !important;
}

.profile-table-content .table .dropdown-action .dropdown-item:focus {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title) !important;
}

.profile-table-content .table .dropdown-action .dropdown-item:active {
    background-color: var(--ot-bg-primary);
    color: var(--ot-text-title) !important;
}

.profile-table-content .table .dropdown-action .dropdown-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 16px;
    flex-shrink: 0;
    text-align: center;
}

/* Inputs */
/* Custom Input field */
.ot_input {
    background-color: var(--ot-bg-secondary) !important;
    border: 1px solid var(--ot-border-primary) !important;
    outline: none !important;
    color: var(--ot-text-title) !important;
    font-size: 15px;
    padding-left: 16px;
}

.ot_input:focus-visible {
    box-shadow: 0px 0px 10px rgba(10, 175, 255, 0.35);
    border: 1px solid #4a42ec !important;
    outline: none;
}

.ot_input::-moz-placeholder,
.ot-form-control::-moz-placeholder,
.form-control::-moz-placeholder {
    font-weight: 400;
    font-size: 15px;
    color: #8c9dae;
}

.ot_input::placeholder,
.ot-form-control::placeholder,
.form-control::placeholder {
    font-weight: 400;
    font-size: 15px;
    color: #8c9dae;
}

.dark-theme .ot_input::-moz-placeholder,
.dark-theme .ot-form-control::-moz-placeholder,
.dark-theme .form-control::-moz-placeholder {
    color: #acb4cb;
    opacity: 1;
}

.dark-theme .ot_input::placeholder,
.dark-theme .ot-form-control::placeholder,
.dark-theme .form-control::placeholder {
    color: rgba(172, 180, 203, 0.4);
}

.input-check-radio {
    padding: 8px 0;
}

.input-check-radio .form-check {
    display: flex;
    align-items: self-end;
}

.input-check-radio .form-check .form-check-input {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    border: 1px solid var(--ot-border-table-checkbox);
    background-color: var(--ot-bg-table-checkbox);
    margin-right: 4px;
}

.input-check-radio .form-check .form-check-input:focus {
    box-shadow: none;
}

.input-check-radio .form-check .form-check-input:checked {
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}

.input-check-radio .form-check .form-check-label {
    margin-left: 8px;
}

/* Breadcrumbs */
.ot-breadcrumb {
    margin-bottom: 0;
}

.ot-breadcrumb-basic .breadcrumb-item a {
    color: var(--primary-color);
}

.ot-breadcrumb-basic .breadcrumb-item a.active {
    color: #6f767e;
}

/* Email Template */
.email-template {
    font-family: var(--font-Inter);
    text-align: center;
    padding: 56px 60px;
    background: white;
    border-radius: 8px;
    max-width: 600px;
    /* Template Buttton start */
    /* Template Buttton end */
}

.email-template .template-heading h1 {
    font-family: var(--font-Inter);
    font-weight: 600;
    font-size: 24px;
    line-height: 34px;
    margin-top: 20px;
}

.email-template .template-heading p {
    font-family: var(--font-Inter);
    font-size: 16px;
    line-height: 24px;
    color: #6f767e;
    margin-top: 20px;
}

.email-template .template-heading .color-black {
    color: #1a1d1f;
}

.email-template .template-body {
    font-family: var(--font-Inter);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #6f767e;
    padding: 14px;
}

.email-template .template-body .content-part {
    text-align: left;
    margin-bottom: 28px;
}

.email-template .template-body .content-part p a {
    font-family: var(--font-Inter);
    color: var(--primary-color);
}

.email-template .template-body .content-part h5 {
    font-family: var(--font-Inter);
    color: #1a1d1f;
    margin-top: 28px;
    padding: 0;
}

.email-template .template-body .content-details p {
    font-family: var(--font-Inter);
    padding: 0 14px;
    margin-bottom: 28px;
}

.email-template .template-body .content-details p .link {
    color: var(--primary-color);
}

.email-template .template-body .ot-primary-text {
    font-family: var(--font-Inter);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--primary-color);
    margin-top: 26px;
}

.email-template .template-body h4 {
    font-family: var(--font-Inter);
    font-weight: 600;
    font-size: 16px;
    color: #29d697;
}

.email-template .template-body h5 {
    font-family: var(--font-Inter);
    padding: 0 14px;
}

.email-template .template-button-group {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 14px;
    gap: 10px;
}

.email-template .template-button-group .template-btn {
    padding: 9px 2px;
    border-radius: 7px;
    background: var(--primary-color);
}

.email-template .template-button-group .template-btn span {
    font-family: var(--font-Inter);
    padding: 10px 16px;
    font-weight: 600;
    color: white;
    background: var(--primary-color);
}

.email-template .template-button-group .template-btn span:hover {
    outline: none;
    border: none;
    color: var(--primary-color);
    border-radius: 8px;
    background: white;
}

.email-template .template-btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.email-template .template-btn-container .template-btn {
    padding: 9px 2px;
    border-radius: 7px;
    background: var(--primary-color);
}

.email-template .template-btn-container .template-btn span {
    font-family: var(--font-Inter);
    padding: 10px 16px;
    font-weight: 600;
    color: white;
    background: var(--primary-color);
}

.email-template .template-btn-container .template-btn span:hover {
    outline: none;
    border: none;
    color: var(--primary-color);
    border-radius: 8px;
    background: white;
}

.email-template .template-footer {
    font-family: var(--font-Inter);
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #6f767e;
    border-top: 1px solid #dfe6e9;
    margin-top: 26px;
}

.email-template .template-footer p > a {
    color: var(--primary-color);
}

.email-template .template-footer .social-media-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 26px;
    gap: 8px;
}

.email-template .template-footer .social-media-button a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8.5px;
    border-radius: 50%;
    background: var(--primary-color);
}

.email-template .template-footer .social-media-button a:hover {
    background: var(--primary-color2);
}

.email-template .template-footer .template-footer-image {
    margin-top: 28px;
    margin-bottom: 8px;
}

@media (max-width: 576px) {
    .email-template {
        padding: 26px 30px;
    }

    .email-template .template-heading h1 {
        font-size: 20px;
        padding: 0 10px;
    }

    .email-template .template-heading p {
        font-size: 16px;
        padding: 0 8px;
    }

    .email-template .template-body {
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #6f767e;
    }

    .email-template .template-body p {
        padding: 0;
    }

    .email-template .template-body .template-content-image img {
        width: 100%;
        height: 100%;
    }

    .email-template .template-body h5 {
        padding: 0;
    }

    .email-template .template-button-group {
        flex-direction: column;
        padding: 0;
    }

    .email-template .template-button-group button {
        width: 100%;
    }

    .email-template .template-footer {
        font-size: 7px;
    }
}

/* STYLE FOR MINIMAL LOOK  */
* {
    /* scrollbar-color: #dceaed #e6f4f7; */
    scrollbar-color: #b3cdd1 #dceaed;
    scrollbar-width: thin;
    scrollbar-width: thin;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -moz-osx-font-smoothing: grayscale;
    /* Firefox */
    -webkit-font-smoothing: antialiased;
    /* WebKit  */
}

.header {
    border-bottom: 1px solid #b0ceff54;
}

.sidebar {
    border-right: 1px solid #b0ceff54;
}

.sidebar {
    border-right: 1px solid #b0ceff54;
    box-shadow:
        rgba(50, 50, 93, 0) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.04) 0px 3px 7px -3px;
    background: transparent;
}

.default-theme .header {
    background: #f7f7f7 !important;
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item > ul > li > a {
    padding-left: 47px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.child-menu-list .sidebar-menu-item:first-child {
    padding-top: 0;
}

.child-menu-list .sidebar-menu-item:last-child {
    padding-bottom: 0px;
}

.child-menu-list .nav-item:first-child {
    padding-top: 6px;
}

.child-menu-list .nav-item:last-child {
    padding-bottom: 8px;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    .active
    > a::before {
    background: var(--primary-color);
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .active > a {
    color: var(--primary-color);
}

/* File Uplode */
.ot_fileUploader {
    display: flex;
    align-items: center;
    border: 1px solid #f9f9f9 !important;
    height: 40px;
    border-radius: 8px;
    padding: 0 5px;
    background: #f9f9f9;
}

.ot_fileUploader input.form-control {
    border: 0 !important;
    border-radius: 8px;
    border: 0;
    height: 40px;
    width: 100%;
    box-shadow: none !important;
    background: none;
}

.ot_fileUploader button {
    background: transparent;
}

.ot_fileUploader .ot-btn-primary {
    padding: 5px 11px;
    font-size: 16px;
    font-weight: 500;
    margin: 0 !important;
}

.ot_fileUploader .ot-btn-primary:hover {
    border: 1px solid transparent;
    background: var(--primary-color);
    color: var(--white);
}

.input-check-radio .form-check .form-check-input,
.input-check-radio .form-check .form-check-label {
    cursor: pointer;
}

.left-side {
    flex-direction: row-reverse;
}

/* end File uplode */

.fw-bold.title-color h4 {
    font-weight: 500;
}

.form-control:focus {
    background: none !important;
    color: var(--ot-text-subtitle) !important;
}

.no-data-found-wrapper img {
    margin-bottom: 10px;
}

/*  */
.rtl .ot-pagination .pagination .page-item:last-child {
    margin-right: 10px;
}

.rtl .ot-pagination .pagination .page-item .fa-angle-right {
    transform: rotate(180deg);
}

.rtl .ot-pagination .pagination .page-item .fa-angle-left {
    transform: rotate(-180deg);
}

/* problem 10  */
.dropdown-item:hover {
    background-color: var(--ot-bg-secondary);
    color: var(--ot-text-title) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--ot-text-title) !important;
    text-decoration: none;
    background: none;
}

.dropdown-item {
    color: var(--ot-text-primary) !important;
}

.dropdown-menu.show {
    display: block;
    background: var(--ot-bg-secondary) !important;
}

.btn.show:focus,
.btn:active:focus {
    outline: none !important;
    box-shadow: none !important;
}

button:focus:not(:focus-visible) {
    outline: none !important;
}

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: none !important;
}

.role-permisssion-control {
    border: 1px solid var(--ot-border-primary);
    border-radius: 8px;
    padding: 28px;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--ot-bg-secondary) inset !important;
}

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: var(--ot-text-primary) !important;
}

.sidebar .sidebar-header {
    padding: 25px 14px !important;
}

.half-expand .sidebar .sidebar-menu {
    margin-top: 20px;
}

.breadcrumb-warning h3 {
    font-size: 18px;
    line-height: 1;
    margin: 0;
}

/* End design issues solve  */

.sidebar .sidebar-header {
    padding: 23px 14px !important;
    border-bottom: 1px solid #b0ceff54;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    .sidebar-menu-item {
    background: transparent !important;
}

.sidebar .sidebar-menu .sidebar-menu-section .mm-active > a {
    background: transparent;
    background-color: transparent;
    color: var(--primary-color) !important;
}

.form-control:focus {
    background: none !important;
    color: var(--ot-text-subtitle) !important;
}

textarea.form-control:focus {
    box-shadow: none !important;
    background: none !important;
    color: var(--ot-text-subtitle) !important;
    border: 1px solid #0010f7 !important;
}

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

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

/* new added  */
.header {
    border-bottom: 1px solid rgba(217, 219, 228, 0.6);
    box-shadow: none !important;
}

.sidebar .sidebar-header {
    padding: 23px 35px !important;
    border-bottom: 1px solid rgba(217, 219, 228, 0.6);
    min-height: 86px;
    align-items: center;
    position: relative;
    z-index: 12;
}

.sidebar {
    background: var(--bodybg) !important;
    border: 0;
}

.sidebar-menu {
    border-right: 1px solid rgba(217, 219, 228, 0.6);
}

/* .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .mm-show {
  background: transparent;
} */
.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a {
    padding: 9px 0px 9px 30px;
}

.sidebar-menu-section {
    padding-top: 20px;
}

/* .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .mm-show ,
.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item{
  background: var(--bodybg) !important;
} */

.sidebar .sidebar-menu .parent-item-content.active {
    color: var(--primary-color) !important;
}

.sidebar .sidebar-header .sidebar-toggle,
.header .header_control_left .sidebar-toggle {
    font-size: 20px;
    width: 30px;
    height: 30px;
    background: rgb(225, 227, 234);
    border-radius: 8px;
    color: #fff;
    line-height: 30px;
    color: var(--ot-text-title);
    transition: 0.3s;
    border-radius: 0.4rem !important;
}

.dark-theme .sidebar .sidebar-header .sidebar-toggle,
.dark-theme .header .header_control_left .sidebar-toggle {
    background: #2b2d35;
}

.sidebar .sidebar-header .sidebar-toggle:hover,
.header .sidebar-toggle:hover {
    background: var(--primary-color);
    color: white;
}

.header .sidebar-toggle.close-toggle:hover {
    background: none;
}

.company_name_clock {
    font-size: 30px;
    font-weight: 500;
    color: var(--ot-text-title);
    white-space: nowrap;
}

.place-switch {
    margin-top: 10px;
}

.header
    .header-controls
    .header-control-item
    .item-content
    .profile-navigate
    .profile-photo {
    width: 40px;
    height: 40px;
    border-radius: 0.475rem;
}

.header
    .header-controls
    .header-control-item
    .item-content
    .profile-navigate
    .profile-info
    span {
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    display: block;
    margin-bottom: 2px;
    color: var(--ot-text-subtitle);
}

.header
    .header-controls
    .header-control-item
    .item-content
    .profile-navigate
    .profile-info
    h6 {
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
}

/* .header-control-item .item-content i {
  color: var(--ot-text-title);
} */

.sm-btn-with-radius {
    width: auto;
    height: auto;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .header-controls .header-control-item {
    margin-right: 0;
}

.header .header-controls .header-control-item button:not(.attendance-nav__btn) {
  padding: 0 !important;
}

.header .header-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-gap: 8px;
}

.header
    .header-controls
    .header-control-item
    .item-content
    .profile-navigate
    .profile-photo
    img {
    width: 100%;
    height: 100%;
    border-radius: 0.475rem;
}

.header {
    border-bottom: 1px solid rgba(217, 219, 228, 0.6);
    box-shadow: none !important;
    background: #f7f7f7 !important;
    max-height: 86px;
}

.sidebar .sidebar-header {
    background: #f7f7f7 !important;
}

.header .header-search .search-field {
    display: block;
    width: 100%;
    padding: 0.775rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #5e6278;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #e1e3ea;
    appearance: none;
    border-radius: 0.65rem;
    box-shadow: false;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    box-shadow: none !important;
    padding-left: 3.25rem !important;
}

.header .header-search .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #7e8299;
}

.half-expand .header {
    padding-left: 40px;
}

.half-expand .sidebar .sidebar-header .half-expand-toggle {
    position: absolute;
    left: 100%;
    margin-left: 0;
}

.dropdown-menu.show {
    border-radius: 5px 5px 10px 10px;
    border: 0px;
    padding: 15px 0px;
    margin-top: 0 !important;
    width: 100%;
    min-width: 180px;
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
}

.header__profile .profile-expand-list .profile_inner_img .thumb {
    max-width: 50px;
    max-height: 50px;
    flex-shrink: 0;
    width: 100%;
}

.crm_profile_wrapper .thumb img {
    border-radius: 8px;
    max-width: 50px;
    max-height: 50px;
    width: 100%;
    background-size: cover;
    object-fit: cover;
    object-position: center;
}

.header__profile .profile-expand-list .profile_inner_img .thumb img {
    border-radius: 4px;
}

/* SIDEBAR  */
/* sidebar arrow direction  */
.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    a.has-arrow::after {
    transform: rotate(135deg) translate(0, -50%);
    right: 20px;
}

.sidebar .sidebar-menu .sidebar-menu-section .mm-active > a.has-arrow::after {
    /* color: #fff; */
    transform: rotate(225deg) translate(0, -50%);
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul
    > li
    > ul
    > li
    > a {
    padding-left: 58px;
    padding-top: 7px;
    padding-bottom: 7px;
}

/* sidebar hoverable on half expand */
.half-expand .sidebar-dropdown-menu li {
    position: relative;
}

.half-expand .sidebar-dropdown-menu > li ul {
    position: absolute;
    left: 101%;
    top: 0;
    min-width: 200px;
    display: none;
    background: #fcfcfc !important;
    border: 1px solid #eaeaea;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
}

.half-expand .sidebar-dropdown-menu li:hover > ul,
.half-expand .sidebar-dropdown-menu li:hover > ul.collapse {
    display: block !important;
    height: auto !important;
    z-index: 1000;
}

.half-expand .sidebar .sidebar-menu {
    width: 100% !important;
}

.half-expand .sidebar ul.parent-menu-list > li > ul {
    left: 98px !important;
}

.dashboard_welcome_title {
    font-size: 22px;
}

/* Common Card */
.ot-card,
.table-content.table-basic .card {
    background-color: var(--ot-bg-secondary);
    box-shadow: var(--theme-shadow);
    border-radius: 8px;
    padding: 28px;
    border: none;
}

.ot-card .card-title h3,
.table-content.table-basic .card .card-title h3 {
    font-size: 18px;
}

.ot-card .card-header,
.ot-card .card-body,
.ot-card .card-footer,
.table-content.table-basic .card .card-footer {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
}

.table-content.table-basic .card-body {
    padding: 0;
}

.footer {
    border-top: 0;
    border-bottom: 0;
    background: #fff;
    box-shadow: var(--theme-shadow);
    padding: 21px 0px;
    width: 100%;
    border-radius: 8px;
}

.footer p {
    display: flex;
    margin-left: 28px;
    color: #b5b5c3;
    justify-content: center;
}

.footer p a {
    margin-left: 3px;
    color: var(--primary-color);
}

/* SCROLLBAR  */
/* .sidebar .ps__thumb-y {
  background-color: #ddd;
  border-radius: 6px;
  width: 4px;
  right: 0px;
}
.sidebar .ps__rail-y.ps--clicking .ps__thumb-y,
.sidebar .ps__rail-y:focus>.ps__thumb-y,
.sidebar .ps__rail-y:hover>.ps__thumb-y {
  background-color: #ccc;
  width: 4px;
}
.sidebar .ps__rail-y {
  width: 4px;
}
.sidebar .ps .ps__rail-x.ps--clicking,
.sidebar .ps .ps__rail-x:focus,
.sidebar .ps .ps__rail-x:hover,
.sidebar .ps .ps__rail-y.ps--clicking,
.sidebar .ps .ps__rail-y:focus,
.sidebar .ps .ps__rail-y:hover {
  background-color: transparent;
} */

.sidebar .sidebar-menu {
    height: calc(100vh - 86px);
    overflow-x: none;
    top: 0 !important;
    position: relative;
}

/* TABLE  */
.table-content.table-basic .table {
    border-color: transparent;
}

.table.table-bordered tbody tr {
    border-color: inherit;
    border-width: inherit;
    border-style: inherit;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #e1e3ea;
}

.table-content.table-basic .table .thead tr {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #e1e3ea;
}

.table-content.table-basic .table .thead tr th {
    padding: 0.75rem;
    border: 0;
    color: var(--ot-text-primary);
}

.table.table-bordered .tbody tr td {
    border: 0;
}

.table-content.table-basic .table .tbody tr td {
    padding: 0.75rem;
    color: var(--ot-text-primary);
}

.form-label {
    color: var(--ot-text-title);
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 8px;
}

.breadcrumb-warning {
    padding: 24px !important;
    margin-bottom: 20px;
}

.dark-theme .breadcrumb-warning {
    padding: 20px;
    margin-bottom: 20px;
}

.breadcrumb-warning h1 {
    font-size: 18px;
    line-height: 1;
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a {
    position: relative;
}

.half-expand .sidebar .sidebar-menu {
    margin-top: 0;
}

/* SELECT_STYLE  */
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  color: var(--ot-text-title);
  padding-right: 16px;
}

.select2-container
    .select2-selection--single.select2-sm
    .select2-selection__arrow {
    height: 40px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 16px;
  color: #5E6278;
  line-height: 40px !important;
  padding-right: 30px;
  font-size: 15px;
  font-weight: 400;
}

.select2-container
    .select2-selection--single.select2-sm
    .select2-selection__rendered {
    line-height: 40px !important;
}

.select2-container .select2-selection--multiple {
    min-height: 40px;
    background-color: rgba(249, 249, 249, 0.2) !important;
    border-color: rgba(220, 228, 236, 0.7) !important;
    border-radius: 8px;
    border: 1px solid rgba(220, 228, 236, 0.7) !important;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--multiple {
    padding-bottom: 0 !important;
}

.select2-container.select2-container--focus .select2-selection--multiple {
    background: rgba(249, 249, 249, 0.2) !important;
    border-color: rgba(220, 228, 236, 0.7) !important;
    border: 1px solid rgba(220, 228, 236, 0.7) !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 7px;
    margin: 0;
    box-sizing: border-box;
}

.select2-container .select2-search--inline {
    display: inline-flex;
    align-items: center;
    float: none;
    margin: 0;
    padding: 0;
}

.select2-container .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 2px !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 34px !important;
    border: none !important;
    color: #8c9dae;
    box-sizing: border-box;
}

.select2-container
    .select2-search--inline
    .select2-search__field::-moz-placeholder {
    color: #8c9dae !important;
    opacity: 1;
    line-height: 34px;
}

.select2-container .select2-search--inline .select2-search__field::placeholder {
    color: #8c9dae !important;
    opacity: 1;
    line-height: 34px;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__placeholder {
    color: #8c9dae !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    margin-top: 0;
    background-color: var(--ot-bg-progress);
    color: var(--ot-text-title);
    border-radius: 8px;
    border: 0;
    height: 25px;
    display: inline-flex;
    align-items: center;
    border: 0 !important;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__display {
    cursor: default;
    padding-left: 2px;
    padding-right: 5px;
    font-size: 14px;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    background-color: var(--ot-bg-progress);
    color: var(--ot-text-title);
    border-radius: 8px;
    border: 0;
    height: 30px;
    display: inline-flex;
    align-items: center;
    background: rgba(87, 59, 255, 0.1);
    padding: 0 12px 0 22px;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
    width: 25px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
}

.select2-container--open {
    z-index: 9999999;
}

.select2-container .select2-results > .select2-results__options {
    border-radius: 0px;
    box-shadow: none;
    background-color: #fff;
    border: 0;
    padding: 0;
    min-width: 180px;
}

.select2-results__option--selectable {
    font-size: 14px;
    font-weight: 500;
    color: #687083;
    line-height: 30px;
    display: flex;
    align-items: center;
    min-height: 30px;
    text-transform: capitalize;
    padding-left: 20px;
    transition: 0.3s;
}

.select2-container
    .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container .select2-results__option--selected {
    background-color: #f4f6fa !important;
    color: var(--primary-color) !important;
}

.select2-container .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--ot-border-primary) !important;
    color: var(--ot-text-title) !important;
    background-color: var(--ot-bg-secondary) !important;
    height: 35px;
    width: 100%;
}

.select2-container--open .select2-dropdown {
    min-width: 180px;
}

.header .select2-container--open .select2-dropdown {
    right: 0;
    left: auto;
}

/* INPUT_STYLE  */
.select2-container .select2-selection--single {
  height: 40px !important;
  background-color: rgba(249, 249, 249, 0.2) !important;
  border: 1px solid var(--ot-border-primary) !important;
  border-radius: 8px;
}

.select2-container .select2-selection--single.select2-sm {
    height: 40px !important;
    background-color: rgba(249, 249, 249, 0.2) !important;
    border: 1px solid var(--ot-border-primary) !important;
    border-radius: 8px;
}

.ot_input, .ot-form-control {
  background-color: rgba(249, 249, 249, 0.2) !important;
  border-color: #F9F9F9 !important;
  color: #5E6278 !important;
  transition: color 0.2s ease;
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--ot-text-title);
  height: 40px;
}

.ot-input-readonly-field {
    position: relative;
}

.ot-input-readonly-field .ot-input-readonly__icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(var(--ot-primary-color-rgb), 0.55);
    font-size: 16px;
    pointer-events: none;
    line-height: 1;
}

.single-select
    > .select2-container.language-select-container
    .select2-selection--single {
    height: 40px !important;
    background-color: rgba(249, 249, 249, 0.2) !important;
    border: 1px solid var(--ot-border-primary) !important;
    border-radius: 8px;
    color: var(--ot-text-primary);
}

.single-select
    > .select2-container.language-select-container
    .select2-selection--single
    .select2-selection__rendered,
.single-select
    > .select2-container--default.language-select-container
    .select2-selection--single
    .select2-selection__arrow {
    color: var(--ot-text-primary);
}

.single-select
    > .select2-container.language-select-container
    .select2-selection--single
    .select2-selection__arrow {
    height: 40px !important;
}

.single-select
    > .select2-container.language-select-container
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 40px !important;
}

.single-select
    > .select2-container.language-select-container
    .select2-selection--single:hover {
    background: transparent !important;
}

.single-select
    > .select2-container.language-select-container
    .select2-selection--single:hover
    .select2-selection__rendered,
.single-select
    > .select2-container--default.language-select-container
    .select2-selection--single:hover
    .select2-selection__arrow {
    color: var(--ot-text-primary);
    font-weight: 400 !important;
}

textarea.form-control,
textarea.ot_input {
    background-color: transparent !important;
    border: 1px solid rgba(220, 228, 236, 0.7) !important;
    color: #5e6278 !important;
    transition: color 0.2s ease;
    padding: 10px 16px;
    border-radius: 8px;
    color: var(--ot-text-title);
    min-height: 120px;
}

.ot_input:focus,
.ot-form-control:focus,
textarea.form-control:focus,
textarea.ot_input:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: rgba(220, 228, 236, 0.7) !important;
}

/*
---------------------------------------
Select2 SM Style
Usage: add class "select2-sm" on the <select>
Select2 inserts .select2-container as the next sibling and does not copy this class.
---------------------------------------
*/

select.select2-sm + .select2-container .select2-selection--single,
.select2-container.select2-sm .select2-selection--single {
    height: 40px !important;
    min-height: 40px !important;
}

select.select2-sm
    + .select2-container
    .select2-selection--single
    .select2-selection__rendered,
.select2-container.select2-sm
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 40px !important;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 35px;
}

select.select2-sm
    + .select2-container
    .select2-selection--single
    .select2-selection__arrow,
.select2-container.select2-sm
    .select2-selection--single
    .select2-selection__arrow {
    height: 40px !important;
    right: 8px;
    /* padding-right: 0; */
}

select.select2-sm
    + .select2-container.select2-container--default
    .select2-selection--single
    .select2-selection__arrow,
.select2-container.select2-sm.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    right: 8px;
}

select.select2-sm + .select2-container .select2-selection--multiple,
.select2-container.select2-sm .select2-selection--multiple {
    min-height: 40px !important;
}

/*
---------------------------------------
ot_input / ot-form-control SM Style (40px)
---------------------------------------
*/

.ot_input.ot_input-sm,
.ot-form-control.ot_input-sm {
    height: 40px !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
    font-size: 14px;
    line-height: 1.4;
}

textarea.ot_input.ot_input-sm,
textarea.ot-form-control.ot_input-sm {
    height: auto !important;
    min-height: 80px !important;
}

/* MODAL_STYLE  */
.modal-title {
    font-size: 20px;
    color: var(--ot-text-title) !important;
    font-weight: 600 !important;
}

.sidebar_scrollbar_active .mCSB_container {
    margin-right: 0 !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    position: relative;
    width: 6px;
    background-color: #eee !important;
}

.mCSB_scrollTools .mCSB_draggerRail {
    width: 3px;
}

.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #ddd;
}

.mCSB_scrollTools {
    opacity: 0;
}

.mCSB_scrollTools {
    width: 4px;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item:not(.child-menu-list)
    a.active::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 100%;
    background: var(--primary-color);
    left: 0;
    top: 0;
    border-radius: 0 30px 30px 0;
}

.rtl
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item:not(.child-menu-list)
    a.active::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 100%;
    background: var(--primary-color);
    left: 0;
    top: 0;
    border-radius: 30px 0 0 30px;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul
    > li
    > ul
    > li
    > a {
    padding-left: 60px;
}

.half-expand .mCSB_container {
    overflow: visible;
}

.half-expand .sidebar .sidebar-menu {
    height: calc(100vh - 0px);
    overflow-x: none;
    top: 0 !important;
    position: fixed;
    left: 0;
    width: 100px;
}

.half-expand .mCustomScrollBox {
    position: relative;
    overflow: visible;
}

.half-expand .sidebar .sidebar-menu {
    height: calc(100vh - 60px);
    overflow-x: none;
    top: 86px !important;
    position: fixed;
    left: 0;
    width: 100px !important;
}

.half-expand .sidebar-menu {
    transform: none;
}

.half-expand .sidebar .sidebar-header {
    position: relative;
    z-index: 12122;
}

.half-expand .sidebar ul.parent-menu-list > li > ul {
    position: absolute;
    top: 0;
    width: 236px;
    left: 100px;
    background: #fff !important;
    border: 0;
    box-shadow: 0px 0px 50px 0px rgb(82 63 105 / 15%);
    border-radius: 8px;
    padding: 10px 10px !important;
}

.half-expand .sidebar-dropdown-menu > li ul {
    background: #fff !important;
    border: 0;
    box-shadow: 0px 0px 50px 0px rgb(82 63 105 / 15%);
    border-radius: 8px;
    padding: 10px 10px !important;
}

.half-expand .sidebar .sidebar-dropdown-menu .sidebar-menu-item li span {
    display: block !important;
}

.half-expand .sidebar .sidebar-menu-item > ul > li > ul > li > a {
    padding-left: 10px !important;
}

.half-expand .child-menu-list .sidebar-menu-item:last-child {
    padding-bottom: 0;
}

.half-expand .child-menu-list .nav-item:last-child {
    padding-bottom: 0;
}

/* .crm_theme_btn {
  background-color: var(--primary-color);
  padding: 12px 15px;
  color: var(--white) !important;
  min-width: 120px;
  border-radius: 6px;
  transition: .3s;
  border: 0;
  text-transform: capitalize;
} */

.crm_theme_btn {
    background-color: var(--primary-color);
    padding: 9.5px 15px;
    color: var(--white) !important;
    min-height: 40px;
    min-width: 120px;
    border-radius: 6px;
    transition: 0.3s;
    border: 0;
    text-transform: capitalize;
    font-size: 16px;
}

.crm_theme_btn:hover,
.crm_theme_btn:focus {
    color: var(--white) !important;
}

.crm_theme_btn:disabled,
.crm_theme_btn.disabled,
.crm_theme_btn.btn-sm:disabled,
.crm_theme_btn.btn-sm.disabled,
.crm_theme_btn:disabled:hover,
.crm_theme_btn.disabled:hover,
.crm_theme_btn.btn-sm:disabled:hover,
.crm_theme_btn.btn-sm.disabled:hover,
.crm_theme_btn:disabled:focus,
.crm_theme_btn.disabled:focus,
.crm_theme_btn.btn-sm:disabled:focus,
.crm_theme_btn.btn-sm.disabled:focus {
    background-color: var(--ot-bg-badge-light-main) !important;
    color: rgba(var(--ot-primary-color-rgb), 0.55) !important;
    border: 1px solid rgba(91, 88, 255, 0.22) !important;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
    font-weight: 500;
    transform: none;
    filter: none;
}

.crm_theme_btn.ot-btn-danger:disabled,
.crm_theme_btn.ot-btn-danger.disabled,
.crm_theme_btn.ot-btn-danger:disabled:hover,
.crm_theme_btn.ot-btn-danger.disabled:hover,
.crm_theme_btn.ot-btn-danger:disabled:focus,
.crm_theme_btn.ot-btn-danger.disabled:focus {
    background-color: var(--ot-bg-badge-light-danger) !important;
    color: var(--ot-text-badge-danger) !important;
    border: 1px solid rgba(229, 83, 60, 0.22) !important;
}

.crm_theme_btn.btn-sm {
    padding: 6px 12px;
    min-height: 38px;
    min-width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-gap: 5px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.action-btn {
    min-height: 40px;
    min-width: 120px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    text-transform: capitalize;
}

.action-btn:hover,
.action-btn:focus {
    text-decoration: none;
}

/* Breadcrumb "Create" dropdown menus (client/project/task/supplier/employee).
   Bootstrap's default .dropdown-item keeps white-space: nowrap, so longer
   labels ("New Purchase Invoice", "New Checklist Template") render past the
   menu's edge when Popper constrains its width near the viewport edge. */
.record-create-menu {
    min-width: 220px;
    max-width: 280px;
}

.record-create-menu .dropdown-item {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    white-space: normal;
}

.record-create-menu .dropdown-item .icon {
    flex-shrink: 0;
    line-height: 1.4;
}

.crm_line_btn {
    text-transform: capitalize;
    border-color: var(--input_bg);
    color: var(--ot-text-title);
    font-weight: 500;
    transition: 0.3s;
    padding: 10px 15px;
    border-radius: 8px;
    background-color: var(--input_bg);
    min-height: 40px;
    line-height: 1;
    display: flex;
    align-items: center;
    grid-gap: 4px;
}

.crm_line_btn:hover {
    color: var(--primary-color);
}

.modal .btn-close {
    background: var(--bodybg);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    opacity: 1;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: none !important;
    margin: 0;
}

.modal .btn-close i {
    transition: 0.3s;
    transform: rotate(0deg);
}

.modal .btn-close:hover {
    background: var(--primary-color);
    color: var(--white);
    opacity: 1;
}

.modal .btn-close:hover i {
    transform: rotate(180deg);
}

/* NICE_SELECT_UPDATED  */
.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
}

.select2-container .select2-dropdown {
    border: 0;
    box-shadow: 0px 0px 50px 0px rgb(82 63 105 / 15%);
    border-radius: 0.65rem;
    padding: 1rem 0;
    background-color: var(--white);
    padding-bottom: 0;
    border: 0 !important;
}

.select2-container .select2-dropdown .select2-search {
    padding: 0.5rem 1.25rem;
    margin: 0;
}

.select2-container .select2-results {
    padding: 8px 0;
}

.select2-container .select2-dropdown .select2-search .select2-search__field {
    background-color: #fff;
    padding: 0.55rem 0.75rem;
    color: var(--bs-gray-300);
    font-size: 0.95rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.4rem;
    outline: 0 !important;
}

.select2-results {
    display: block;
}

.select2-container .select2-dropdown .select2-results__option {
    max-height: 250px;
    overflow-y: auto;
    transition: 0.3s;
}

.select2-container .select2-dropdown .select2-results__option {
    color: var(--bs-gray-700);
    transition: color 0.2s ease;
    padding: 0.36rem 1.25rem;
    margin: 0 0;
}

.table-content .table-toolbar .btn-add,
.table-content .table-toolbar .btn-daterange,
.table-content .table-toolbar .dropdown-export .btn-export,
.table-content .table-toolbar .dropdown-designation .btn-designation {
    border-color: var(--ot-border-primary);
    background: var(--white);
    color: var(--ot-text-title);
    font-weight: 500;
    transition: 0.3s;
}

.table-content .table-toolbar .btn-add:hover,
.table-content .table-toolbar .btn-daterange:hover,
.table-content .table-toolbar .dropdown-export .btn-export:hover,
.table-content .table-toolbar .dropdown-designation .btn-designation:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.table-content .table-toolbar .search-box input:focus {
    border-color: var(--primary-color);
}

.app_sync_btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    width: 100%;
}

/* FROM_CU_UI */
/* single select */
.single-select {
    width: 100%;
}

.single-select > .select2-container .select2-selection--single {
    background: var(--white);
    border-radius: 8px;
    border: 0;
    outline: 0 !important;
    height: 40px;
    border: 0 !important;
    border: 1px solid var(--ot-border-primary) !important;
    color: var(--ot-text-title);
    transition: 0.3s;
}

.single-select
    > .select2-container
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--ot-text-title);
    padding-right: 30px;
    line-height: 40px;
    font-weight: 400;
}

.single-select
    > .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 40px;
    color: var(--ot-text-title);
}

.default-theme
    .single-select
    > .select2-container.select2-container--open.language-select-container
    .select2-selection--single,
.default-theme
    .single-select
    > .select2-container.language-select-container
    .select2-selection--single:hover {
    border-color: rgba(87, 59, 255, 0.5) !important;
}

/* TODO_STYLE  */
.bullet {
    display: inline-block;
    border-radius: 6px;
    height: 4px;
    flex-shrink: 0;
}

.bullet-vertical {
    width: 4px;
    height: 8px;
    border-radius: 6px;
}

.text-gray-800 {
    color: var(--ot-text-primary) !important;
}

.text-muted {
    color: var(--ot-text-primary) !important;
}

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

.dark-theme .text-title {
    color: var(--ot-text-subtitle) !important;
}

/* .product-purchase-list tbody td {
  color: var(--ot-text-title) !important;
} */

.h-40px {
    height: 40px !important;
}

.single_todo {
    grid-gap: 16px;
    flex-wrap: wrap;
}

.single_todo .todo_title {
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
}

.single_todo .todo_title:hover {
    color: var(--primary-color) !important;
}

.single_todo .todo_para_text {
    font-size: 12px;
    font-weight: 400;
    color: var(--ot-text-primary);
}

.single_todo:not(:last-child) {
    margin-bottom: 12px;
    border-bottom: 1px dashed #e1e3ea;
    padding-bottom: 12px;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul
    > li
    > ul
    > li
    > ul
    > li
    > a {
    padding-left: 70px;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul
    > li
    > ul
    > li
    > ul
    > li
    > ul
    > li
    > a {
    padding-left: 75px;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul
    > li
    > ul
    > li
    > ul
    > li
    > ul
    > li
    > ul
    > li
    > a {
    padding-left: 80px;
}

.symbol {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    border-radius: 0.475rem;
}

.symbol.symbol-50px .symbol-label {
    width: 50px;
    height: 50px;
}

.symbol .symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #3f4254;
    background-color: #f9f9f9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 0.475rem;
}

.crm_height_full {
    height: calc(100% - 24px);
    margin-bottom: 24px !important;
}

.bg-success {
    background-color: #50cd89 !important;
}

.progress {
    background: var(--bodybg);
}

.client_box {
    grid-gap: 16px;
    min-width: 200px;
}

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

.client_box .client_title:hover {
    color: var(--primary-color);
}

.client_box .client_para_text {
    font-size: 12px;
    font-weight: 400;
    color: var(--ot-text-primary);
}

.progress-bar {
    border-radius: 0.375rem;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 30px 25px;
}

.order-summary {
    padding: 30px 0 !important;
}

.crm_navTabs {
    grid-gap: 1rem;
}

.crm_navTabs .nav-item .nav-link {
    color: #a1a5b7;
    border: 0;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
    padding: 15px 0;
    margin: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    border-radius: 0;
    font-weight: 500;
}

.crm_navTabs .nav-item .nav-link.active,
.crm_navTabs .nav-item .nav-link:hover {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

.crm_profile_wrapper .thumb {
    max-width: 160px;
    max-height: 160px;
    flex-shrink: 0;
    width: 100%;
}

.crm_profile_wrapper .thumb img {
    border-radius: 8px;
    max-width: 160px;
    max-height: 160px;
    width: 100%;
    background-size: cover;
    object-fit: cover;
    object-position: center;
}

.contactInfo_text {
    color: #b5b5c3;
    transition: 0.3s;
}

.contactInfo_text:hover {
    color: var(--primary-color);
}

.horizontal_line {
    background: #b5b5c3;
    height: 10px;
    width: 1px;
}

.crm_profile_boxes {
    display: flex;
    align-items: center;
    grid-gap: 12px;
    margin-top: 22px;
}

.crm_profile_boxes .single_crm_profile_box {
    border: 1px dashed #e1e3ea;
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 130px;
}

.crm_profile_boxes .single_crm_profile_box h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}

.crm_profile_boxes .single_crm_profile_box p {
    font-size: 14px;
    color: #b5b5c3;
    margin-bottom: 0;
}

.search_suggestion {
    background: var(--white);
    border-radius: 0.475rem;
    width: 310px !important;
    box-shadow: var(--theme-shadow);
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px 20px;
    top: 100%;
}

.search_suggestion li {
    list-style: none;
}

.search_suggestion .suggestion_link {
    font-size: 14px;
    font-weight: 400;
    color: var(--ot-text-primary);
    padding: 6px 0;
    display: block;
    transition: 0.3s;
}

.search_suggestion .search-suggestion-group {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 2px;
}

.search_suggestion .search-suggestion-title {
    display: block;
}

.search_suggestion .suggestion_link:hover {
    color: var(--primary-color);
}

.daterangepicker {
    font-family: var(--font-Inter);
    box-shadow: 0px 0px 10px 0px rgb(82 63 105 / 15%);
}

.sidebar .sidebar-menu .child-menu-list .sidebar-menu-item i {
    display: none !important;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    ul.child-menu-list
    li.sidebar-menu-item
    a::before,
.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    ul.child-menu-list
    li.sidebar-menu-item
    a.active::before,
.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    ul.child-menu-list
    li.sidebar-menu-item
    a.has-arrow.active::before {
    content: "" !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #a1a5b7 !important;
    position: relative !important;
}

.half-expand .parent-item-content .has-arrow::after {
    content: "0";
}

.half-expand
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    ul
    li
    a.has-arrow::after {
    position: absolute;
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-width: 1px 0 0 1px;
    border-style: solid;
    border-color: initial;
    right: 1em;
    transform: rotate(-225deg) translate(0, -50%) !important;
    transform-origin: top;
    top: 50%;
    transition: all 0.3s ease-out;
}

.half-expand .child-menu-list .nav-item:first-child {
    padding-top: 0px;
}

button.primary-btn-small-input {
    padding: 0;
}

#pac-input:focus {
    background-color: #fff !important;
    width: 80% !important;
}

#pac-input {
    background-color: #fff !important;
    width: 80% !important;
}

/* SECONDARY_STYLE  */
.table-content .table-toolbar .form-select {
    background-image: url("/assets/images/basic-datatable/show/down-icon.svg");
}

.check-box .form-check-input:checked {
    background:
        url("/assets/images/basic-datatable/check/ok.svg"), var(--primary-color);
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}

.profile-table-content .table-toolbar .form-select {
    background-image: url("/assets/images/basic-datatable/show/down-icon.svg");
}

.profile-table-content .table .check-box .form-check-input:checked {
    background:
        url("/assets/images/basic-datatable/check/ok.svg"), var(--primary-color);
    background-repeat: no-repeat;
    background-position: center;
}

.input-check-radio .form-check .form-check-input:checked {
    background:
        url("/assets/images/basic-datatable/check/ok.svg"), var(--primary-color);
    background-repeat: no-repeat;
    background-position: center;
}

.profile-table-content .table .check-box .form-check-input:checked {
    background:
        url("/assets/images/basic-datatable/check/ok.svg"), var(--primary-color);
    background-repeat: no-repeat;
    background-position: center;
}

/* // select 2 */
.modal .ot-form-control {
    color: #797979;
}

.dry-color {
    color: #6e6b7b;
}

.modal .select2-container {
    display: block;
}

#toast-container > .toast-success {
    background-color: #a5dc86 !important;
    -webkit-box-shadow: 0 0 12px #a5dc86;
    box-shadow: 0 0 12px #a5dc86;
}

#toast-container > .toast-error {
    background-color: #f27474 !important;
    -webkit-box-shadow: 0 0 12px #f27474;
    box-shadow: 0 0 12px #f27474;
}

#toast-container > .toast-warning {
    background-color: #e7e622 !important;
    -webkit-box-shadow: 0 0 12px #e7e622;
    box-shadow: 0 0 12px #e7e622;
}

#toast-container > .toast-info {
    background-color: #3fc3ee !important;
    -webkit-box-shadow: 0 0 12px #3fc3ee;
    box-shadow: 0 0 12px #3fc3ee;
}

#toast-container > div {
    width: 351px !important;
    height: 80px;
    font-size: 1em;
    opacity: 1 !important;
}

#toast-container > div {
    margin: 0;
}

input.select2-search__field:focus-visible {
    outline: none;
}

input[type="file"] {
    padding-left: 10px !important;
}

input[type="file"]::file-selector-button {
    background: var(--ot-bg-table-tbody);
    color: var(--ot-text-title);
    transition: 1s;
    height: 40px;
    margin-top: -10px;
}

input[type="file"]::-ms-browse:hover {
    background: var(--ot-bg-table-tbody);
    color: var(--ot-text-title);
}

input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--ot-bg-table-tbody) !important;
    color: var(--ot-text-title);
}

input[type="file"]::file-selector-button:hover {
    background: var(--ot-bg-table-tbody) !important;
    color: var(--ot-text-title);
}

input[type="file"]::-webkit-file-upload-button {
    background: var(--ot-bg-table-tbody);
    color: var(--ot-text-title);
}

.staff-profile-image-small {
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.modal-content {
    background-color: var(--ot-bg-secondary) !important;
    color: var(--ot-text-title) !important;
    border-radius: 8px;
}

span.username,
span.description {
    color: var(--ot-text-title);
}

.info-box-card {
    background: var(--ot-bg-table-tbody);
    filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.07));
}

.nav-tabs {
    padding-bottom: 0;
    margin-bottom: 0px;
    background: 0 0;
    border-radius: 1px;
    padding-left: 0;
    padding-right: 0;
    border-bottom: none;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-bottom: 1px solid #5669ff;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
    border: 0;
    border-radius: 0;
    background: 0 0;
    color: var(--primary-color);
    margin-bottom: 1px;
}

.address-tabs .nav-tabs .nav-link,
.address-tabs .nav-tabs .nav-link:hover,
.address-tabs .nav-tabs .nav-link:focus {
    margin-bottom: calc(var(--bs-nav-tabs-border-width) * -1);
    background: 0 0;
    border: none !important;
    color: var(--primary-color) !important;
}

.address-tabs .nav-tabs .nav-link.active {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.project-tabs > li > a {
    color: #6f767e;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    font-size: 14px;
}

.mb-20 {
    margin-bottom: 20px;
}

/* toastr */
.colored-toast.swal2-icon-success {
    background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
    background-color: #e7e622 !important;
}

.colored-toast.swal2-icon-info {
    background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
    background-color: #87adbd !important;
}

.colored-toast .swal2-title {
    color: white;
}

.colored-toast .swal2-close {
    color: white;
}

.colored-toast .swal2-html-container {
    color: white;
}

/* toastr */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    width: 45px;
}

input:checked + .slider {
    background: var(--primary-color);
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:focus + .slider {
    box-shadow: 0 0 1px #4466f2;
}

input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 30px;
    height: 25px;
}

.slider.round:before {
    border-radius: 50%;
}

.btn_odd_row {
    background-color: var(--ot-bg-table-tbody);
    padding-top: 10px;
}

.btn_even_row {
    padding-top: 10px;
}

.mt-30 {
    margin-top: 30px;
}

.staff-profile-image-small {
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-13 {
    font-size: 13px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-16 {
    font-size: 16px !important;
}

.c-none {
    display: none;
}

/* /// project notes */
.sticky-note {
    position: relative;
    margin-bottom: 30px;
    background: #ff8;
    padding: 20px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 1;
    text-align: justify;
}

.sticky-note:hover {
    cursor: move;
}

.sticky-note > * {
    z-index: 1;
}

.sticky-note::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sticky-note:hover::after {
    opacity: 1;
}

.cursor-pointer {
    cursor: pointer !important;
}

/****** Style Star Rating Widget *****/
.rating {
    border: none;
    float: left;
}

.rating > input {
    display: none;
}

.rating > label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: "Line Awesome Free";
    display: inline-block;
    content: "\f005";
}

.rating > .half:before {
    content: "\f089";
    position: absolute;
}

.rating > label {
    color: #ddd;
    float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating>input:checked~label, /* show gold star when clicked */ .rating:not(:checked)>label:hover, /* hover current star */ .rating:not(:checked)>label:hover~label, i.fa-star, i.fa-star-half-alt {
    color: #ffd700;
}

/* hover previous stars in list */

.rating>input:checked+label:hover, /* hover current star when changing rating */ .rating>input:checked~label:hover, .rating>label:hover~input:checked~label, /* lighten current selection */ .rating>input:checked~label:hover~label {
    color: #ffed85;
}

/* end */
input[type="range"] {
    height: 40px;
}

/* image */
.custom-image-upload-wrapper,
.custom-image-upload-wrapper .image-area {
    width: 150px;
    height: 150px;
    border-radius: 0.25rem;
    border: 1px solid #ddd;
}

.custom-image-upload-wrapper {
    position: relative;
    background-color: var(--base-color);
}

.custom-image-upload-wrapper .image-area img {
    width: auto !important;
    max-height: 100%;
    border-radius: 0.25rem;
}

.custom-image-upload-wrapper .input-area {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    padding: 5px 0;
    background-color: rgba(0, 0, 0, 0.4);
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    transition: all 0.25s ease-in-out;
}

.custom-image-upload-wrapper .input-area #upload-label {
    width: 100%;
    font-size: 90%;
    cursor: pointer;
    margin-bottom: 0;
    text-align: center;
    color: #fff !important;
}

.custom-image-upload-wrapper .input-area:hover {
    opacity: 1;
}

.tooltip {
    z-index: 21;
}

.select2-container {
    margin-bottom: 0px !important;
}

/* // custom chart */
.custom-chart {
    position: relative;
    height: 400px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* table */
.custom-chart.table-content.table-basic .card-body {
    padding: 0;
    padding-top: 12px;
}

.custom-chart table thead th {
    font-weight: 300 !important;
    font-size: 14px;
    line-height: 16px;
}

.custom-chart table tbody td {
    font-weight: 300 !important;
    font-size: 12px;
    font-family: var(--font-Inter);
    font-style: normal;
    padding: 16px;
}

/* dashboard card design */
.dashboard-card-icon img {
    max-width: 24px;
    max-height: 24px;
}

.dashboard-card-icon i {
    font-size: 24px;
}

.place-switch {
    height: 10%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    position: relative;
}

.place-switch .switch-field {
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    padding: 2px;
    border-radius: 2rem;
}

.place-switch .switch-field input {
    display: none;
}

.place-switch .switch-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: #333;
    font-size: 1em;
    font-weight: 400;
    text-align: center;
    text-shadow: none;
    padding: 0.5em 1em;
    margin: 0;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    border-radius: 2rem;
    cursor: pointer;
    color: #fff;
}

.place-switch .switch-field label p {
    margin: 0;
    color: #fff;
    font-weight: 400;
}

.place-switch .switch-field:hover {
    cursor: pointer;
}

.place-switch .switch-field input:checked + label {
    background-color: #fff;
    color: var(--primary-color);
    border-radius: 50px;
}

.place-switch .switch-field input:checked + label p {
    color: var(--primary-color);
}

/* button hold  */
.button-hold-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-hold {
    --color: #f6f8ff;
    --background: #2b3044;
    --icon: var(--color);
    --progress-border: #646b8c;
    --progress-active: #fff;
    --progress-success: #5c86ff;
    --tick-stroke: var(--progress-active);
    --shadow: rgba(0, 9, 61, 0.2);
    width: 125px;
    height: 125px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    border: 0;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    -webkit-appearance: none;
    transition:
        transform 0.3s,
        box-shadow 0.3s;
    transform: scale(var(--scale, 1)) translateZ(0);
    color: var(--color);

    display: flex;
    align-items: center;
    justify-content: center;
}

.button-hold:focus-visible {
    border: none;
    outline: none;
}

.button-hold > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-hold:focus {
    outline: none;
    border: none;
}

.button-hold > div:before {
    content: url("/assets/images/touch-screen-white.png");
    position: absolute;
    transform: scale(var(--background-scale, 1));
    z-index: 1;
    width: 40px;
}

.button-hold > div svg {
    display: block;
}

.button-hold > div svg.icon,
.button-hold > div svg.tick {
    position: absolute;
}

.button-hold > div svg.icon {
    width: 8px;
    height: 8px;
    left: 6px;
    top: 6px;
    fill: var(--icon);
    z-index: 1;
    transition:
        opacity 0.2s,
        transform 0.2s;
    opacity: var(--icon-opacity, 1);
    transform: translateY(var(--icon-y, 0)) scale(var(--icon-scale, 1));
}

.button-hold > div svg.progress,
.button-hold > div svg.tick {
    fill: none;
}

.button-hold > div svg.progress {
    width: 125px;
    height: 125px;
    background: var(--primary-color);
    border-radius: 50%;
    transform: rotate(-180deg) scale(var(--progress-scale, 1));
    transition: transform 0.5s ease;
}

.button-hold > div svg.progress circle {
    stroke-dashoffset: 1;
    stroke-dasharray: var(--progress-array, 0) 52;
    stroke-width: 16;
    stroke: var(--progress-active);
    transition: stroke-dasharray var(--duration) linear;
}

.button-hold > div svg.tick {
    width: 125px;
    height: 125px;
    left: 15px;
    top: 10px;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--tick-stroke);
    transition: stroke 0.3s ease 0.7s;
}

.button-hold > div svg.tick polyline {
    stroke-dasharray: 18 18 18;
    stroke-dashoffset: var(--tick-offset, 18);
    transition: stroke-dashoffset 0.4s ease 0.7s;
}

.button-hold:focus:not(.process),
.button-hold:hover:not(.process) {
    --shadow-y: 8px;
    --shadow-blur: 16px;
}

.button-hold:active:not(.success) {
    --scale: 0.96;
    --shadow-y: 4px;
    --shadow-blur: 8px;
}

.button-hold.process,
.button-hold.success {
    --progress-array: 52;
    --icon-y: -4px;
    --icon-scale: 0.6;
    --icon-opacity: 0;
}

.button-hold.success {
    --progress-border: none;
    --progress-scale: 0.11;
    --tick-stroke: var(--progress-success);
    --background-scale: 0;
    --tick-offset: 36;
}

.button-hold.success > div svg.progress {
    -webkit-animation: tick 0.3s linear forwards 0.4s;
    animation: tick 0.3s linear forwards 0.4s;
}

@-webkit-keyframes tick {
    100% {
        transform: rotate(-90deg) translate(0, -5px)
            scale(var(--progress-scale));
    }
}

@keyframes tick {
    100% {
        transform: rotate(-90deg) translate(0, -5px)
            scale(var(--progress-scale));
    }
}

.modal .form-select {
    height: 40px;
}

.form-select {
    height: 40px;
    padding: 10px 16px;
    border: 1px solid var(--ot-border-primary);
    border-radius: 8px;
    background-color: rgba(249, 249, 249, 0.2);
    color: #5e6278;
    font-size: 15px;
    display: block;
}

.daterange-table-filter:focus,
.daterange-table-filter:focus-visible {
    box-shadow: 0px 0px 10px rgb(10 175 255 / 35%);
    border: 1px solid #0010f7 !important;
    outline: none;
}

input.daterange-table-filter {
  height: 40px !important;
  border-radius: 8px;
  padding-left: 10px;
  display: block;
}

/* === range theme and appearance === */
input[type="range"] {
    font-size: 1.5rem;
    width: 100%;
}

input[type="range"] {
    color: var(--primary-color);
    --thumb-height: 1.9rem;
    --track-height: 0.125em;
    --track-color: rgba(0, 0, 0, 0.2);
    --brightness-hover: 180%;
    --brightness-down: 80%;
    --clip-edges: 0.125em;
}

/* === range commons === */
input[type="range"] {
    position: relative;
    background: #fff0;
    overflow: hidden;
}

input[type="range"]:active {
    cursor: grabbing;
}

/* === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
    position: relative;
}

input[type="range"]::-webkit-slider-thumb {
    --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
    --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
    --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
    --clip-further: calc(100% + 1px);
    --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
        100vmax currentColor;

    width: var(--thumb-width, var(--thumb-height));
    background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
        50% calc(var(--track-height) + 1px);
    background-color: currentColor;
    box-shadow: var(--box-fill);
    border-radius: var(--thumb-width, var(--thumb-height));

    filter: brightness(100%);
    clip-path: polygon(
        100% -1px,
        var(--clip-edges) -1px,
        0 var(--clip-top),
        -100vmax var(--clip-top),
        -100vmax var(--clip-bottom),
        0 var(--clip-bottom),
        var(--clip-edges) 100%,
        var(--clip-further) var(--clip-further)
    );
}

input[type="range"]:hover::-webkit-slider-thumb {
    filter: brightness(var(--brightness-hover));
    cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
    filter: brightness(var(--brightness-down));
    cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(var(--track-color) 0 0) scroll no-repeat
        center / 100% calc(var(--track-height) + 1px);
}

input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

/* === Firefox specific styles === */
input[type="range"],
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
    appearance: none;
    transition: all ease 100ms;
    height: var(--thumb-height);
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    background: #fff0;
}

input[type="range"]::-moz-range-thumb {
    background: currentColor;
    border: 0;
    width: var(--thumb-width, var(--thumb-height));
    border-radius: var(--thumb-width, var(--thumb-height));
    cursor: grab;
}

input[type="range"]:active::-moz-range-thumb {
    cursor: grabbing;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    background: var(--track-color);
}

input[type="range"]::-moz-range-progress {
    appearance: none;
    background: currentColor;
    transition-delay: 30ms;
}

input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-progress {
    height: calc(var(--track-height) + 1px);
    border-radius: var(--track-height);
}

input[type="range"]::-moz-range-thumb,
input[type="range"]::-moz-range-progress {
    filter: brightness(100%);
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:hover::-moz-range-progress {
    filter: brightness(var(--brightness-hover));
}

input[type="range"]:active::-moz-range-thumb,
input[type="range"]:active::-moz-range-progress {
    filter: brightness(var(--brightness-down));
}

input[type="range"]:disabled::-moz-range-thumb {
    cursor: not-allowed;
}

.rtl input[type="range"] {
    transform: scaleX(-1);
}

.rtl input[type="range"]::-webkit-slider-runnable-track {
    transform: scaleX(-1);
}

.rtl input[type="range"]::-webkit-slider-thumb {
    transform: scaleX(-1);
}

.topbar-dropdown-menu .topbar-dropdown-footer a {
    background: var(--primary-color);
    padding: 12px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
    display: block;
    color: #fff;
}

.topbar-dropdown-menu .topbar-dropdown-footer a:hover {
    background: var(--primary-color2);
}

.fs-10 {
    font-size: 10px;
}

.font-italic {
    font-style: italic;
}

.img-circle {
    border-radius: 50%;
}

.img-bordered-sm {
    border: 2px solid #adb5bd;
    padding: 2px;
}

.user-block img {
    float: left;
    height: 40px;
    width: 40px;
}

.user-block .username {
    font-size: 16px;
    font-weight: 600;
    margin-top: -1px;
}

.user-block .description {
    color: #6c757d;
    font-size: 13px;
    margin-top: -3px;
}

.c-none {
    display: none;
}

.post {
    border-bottom: 0 !important;
}

.post {
    border-bottom: 1px solid #adb5bd;
    color: #666;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

/* /// project notes */
.sticky-note {
    position: relative;
    margin-bottom: 30px;
    background: #ff8;
    padding: 20px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 1;
    text-align: justify;
}

.sticky-note:hover {
    cursor: move;
}

.sticky-note > * {
    z-index: 1;
}

.sticky-note::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sticky-note:hover::after {
    opacity: 1;
}

.cursor-pointer {
    cursor: pointer !important;
}

.single-post {
    position: relative;
    background: #fff;
    -webkit-box-shadow: 0 0 50px rgb(10 42 67 / 5%);
    box-shadow: 0 0 50px rgb(10 42 67 / 5%);
    border-radius: 8px;
}

.single-post .author {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 0 50px rgb(10 42 67 / 5%);
    box-shadow: 0 0 50px rgb(10 42 67 / 5%);
    border-radius: 15px;
    position: absolute;
    top: 10px;
    left: 10px;
    line-height: 30px;
    z-index: 1;
}

.single-post .author img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.profile-body-cus {
    width: 100% !important;
    padding: 20px !important;
}

.profile-menu-head h2.title {
    font-size: 18px;
    margin-bottom: 0px;
}

.profile-menu-head p.paragraph {
    font-size: 14px;
}

.bg-gray {
    background: #f7fafc !important;
}

@media screen and (max-width: 991.98px) {
    .new-profile-content {
        display: none;
    }
}

@media screen and (max-width: 575px) {
    .breadcrumb-warning {
        flex-direction: column;
        gap: 10px;
    }
}

.language-select-container {
    width: 100% !important;
}

.profile-expand-dropdown
    .profile-expand-container
    .profile-expand-list
    .profile-expand-item
    i {
    margin-right: 10px;
    font-size: 25px;
}

.profile-expand-item span {
    display: flex;
    align-items: center;
}

.datepicker-icon {
    position: relative;
}

.datepicker-icon i {
    position: absolute;
    top: 10px;
    right: 8px;
    font-size: 20px;
    color: var(--ot-text-title);
}

.table-content.table-basic .table .dropdown-action .dropdown-item:hover {
    color: var(--ot-text-secondary) !important;
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a {
    font-weight: 500;
    color: var(--ot-text-primary);
    font-size: 14px;
    transition: 0.3s;
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item a:hover {
    color: var(--ot-text-title);
}

.profile-border {
    padding-bottom: 20px;
    border-bottom: 2px solid #f4f4f4;
}

.profile-expand-dropdown .profile-expand-container .profile-expand-list {
    padding: 28px;
}

/* rtl */
.rtl .half-expand-toggle img {
    transform: rotate(180deg);
}

.rtl .half-expand .half-expand-toggle img {
    transform: rotate(0deg) !important;
}

.rtl .breadcrumb-item + .breadcrumb-item::before {
    float: unset;
    padding-left: 7px;
}

.rtl .modal-header .btn-close {
    margin: unset;
}

.rtl .table-content .table-toolbar .dropdown-export .dropdown-menu li {
    text-align: right;
}

.rtl .table-content .table-toolbar .dropdown-export .dropdown-item .icon {
    margin-left: 8px;
}

.rtl .input-check-radio .form-check .form-check-input {
    margin-left: 4px;
}

.rtl .input-check-radio .form-check .form-check-label {
    margin-right: 8px;
}

.radio-button-group .btn-group .btn.radio-active {
    box-shadow: none;
    border-radius: 0.3rem;
    background: var(--primary-color);
    border: 1px solid #21c6fb;
    transition: all 0.25s ease-in-out;
    color: #fff;
}

@media (max-width: 991.98px) {
    .ot-pagination nav {
        overflow-x: scroll;
    }
}

/*Auth Container start */
.auth-page {
    height: 100vh;
    display: flex;
    overflow-x: hidden;
}

.auth-container {
    max-width: 560px;
    margin: auto;
    font-family: var(--font-Inter);
}

.auth-container .form-wrapper .form-container {
    width: 360px;
}

.auth-container .form-wrapper .form-logo img {
    max-width: 154px;
    border-radius: 50%;
}

.auth-container .form-wrapper .form-heading .title {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--ot-text-title);
}

.auth-container .form-wrapper .form-heading .subtitle {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: var(--ot-text-primary);
}

.auth-container .form-wrapper .social-login {
    width: 100%;
}

.auth-container .form-wrapper .auth-form {
    width: 360px;
}

.auth-container .form-wrapper .auth-form label {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--ot-text-title);
    margin-bottom: 8px;
}

.auth-container .form-wrapper .auth-form .input-field-group {
    width: 100%;
    line-height: 0;
}

.auth-container .form-wrapper .auth-form input[type="text"],
.auth-container .form-wrapper .auth-form input[type="password"],
.auth-container .form-wrapper .auth-form input[type="date"],
.auth-container .form-wrapper .auth-form select,
.auth-container .form-wrapper .auth-form input[type="email"] {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    color: var(--ot-text-title);
}

.auth-container .form-wrapper .auth-form input[type="text"]::placeholder,
.auth-container .form-wrapper .auth-form input[type="password"]::placeholder,
.auth-container .form-wrapper .auth-form input[type="date"]::placeholder,
.auth-container .form-wrapper .auth-form select::placeholder,
.auth-container .form-wrapper .auth-form input[type="email"]::placeholder {
    color: #b2bec3;
}

.auth-container .form-wrapper .auth-form input[type="text"]:focus-visible,
.auth-container .form-wrapper .auth-form input[type="password"]:focus-visible,
.auth-container .form-wrapper .auth-form input[type="date"]:focus-visible,
.auth-container .form-wrapper .auth-form select:focus-visible,
.auth-container .form-wrapper .auth-form input[type="email"]:focus-visible {
    box-shadow: 0px 0px 10px rgba(10, 175, 255, 0.35);
    border: 1px solid #0010f7;
    outline: none;
}

.auth-container .form-wrapper .auth-form .custom-input-field {
    width: 100%;
    position: relative;
}

.auth-container .form-wrapper .auth-form .custom-input-field img {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.auth-container .form-wrapper .auth-form .custom-input-field i {
    position: absolute;
    right: 16px;
    transform: translateY(-50%);
    top: 50%;
    color: var(--ot-text-primary);
    font-size: 18px;
    cursor: pointer;
}

.auth-container .form-wrapper .auth-form .input-error {
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    margin-bottom: 0;
}

.auth-container .form-wrapper .auth-form .input-error.error-danger {
    color: #ff6a54;
}

.auth-container .form-wrapper .auth-form .forgot-password {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: var(--ot-text-primary);
}

.auth-container .form-wrapper .auth-form .submit-btn {
    width: 100%;
    background: #4a42ec !important;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
}

.auth-container .form-wrapper .auth-form .submit-btn:hover {
    background: #ff991a !important;
}

.auth-container .form-wrapper .authenticate-now {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: var(--ot-text-primary);
}

.auth-container .form-wrapper .authenticate-now a {
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-container .form-wrapper .authenticate-now a:hover {
    background: var(--primary-color2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.submit-button-only-border {
    background: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color);
}

.submit-button-only-border:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
}

/* Error */
.cus-error {
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    margin-bottom: 20px;
}

/*Auth Container end */
@media (max-width: 768px) {
    .form-wrapper {
        padding: 40px 50px !important;
    }

    .form-container,
    .auth-form {
        width: 320px !important;
    }
}

@media (max-width: 576px) {
    .form-wrapper {
        padding: 30px 40px !important;
    }

    .form-container,
    .auth-form {
        width: 300px !important;
    }
}

@media (max-width: 480px) {
    .form-wrapper {
        padding: 40px 20px !important;
    }

    .form-container,
    .auth-form {
        width: 280px !important;
    }

    .social-login span {
        font-size: 10px;
    }
}

/* topbar */
@media screen and (max-width: 991.98px) {
    .header {
        padding: 9.5px 20px;
    }

    .main-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1150px) {
    .summery-card .card-heading .card-content h4 {
        width: 64px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .ot-card {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.w-60 {
    width: 60px;
}

.h-60 {
    height: 60px;
}

.accordion-button:focus {
    box-shadow: 0px 0px 10px rgb(10 175 255 / 35%) !important;
    border: 1px solid #0010f7 !important;
}

.accordion-item,
.accordion-button {
    background-color: var(--ot-bg-secondary) !important;
    border: 1px solid var(--ot-border-primary) !important;
}

.accordion-button span {
    color: var(--ot-text-title) !important;
}

.accordion-button::after {
    background-image: none;
    content: "\f107";
    font-family: "Line Awesome Free";
    font-weight: 900;
    color: var(--ot-text-title);
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
}

.accordion-button.collapsed,
.accordion-button {
    padding: 5px 20px;
}

.sidebar-logo {
    width: 150px;
    height: 30px;
}

img.full-logo {
    max-width: 100%;
}

/* App Screen Settings End*/
.select2-container--default .select2-results__option--selected {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

.topbar-dropdown-menu h1 {
    font-size: 20px;
    padding-left: 0;
    font-weight: 500;
    color: var(--bs-black);
}

.topbar_notifications {
    max-width: 340px;
}

.btn-gradian.height48 {
    padding: 13.5px 15px;
    min-height: 40px;
}

div#layout-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#layout-wrapper main {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#layout-wrapper .page-content {
    flex: 1 1 0;
}

.table-content .table-toolbar .dropdown-export .dropdown-menu {
    padding: 24px;
    border: 0px;
    width: 100%;
    min-width: 180px;
}

.header
    .header-controls
    .header-control-item
    .item-content
    button.profile-navigate
    .profile-info
    h6 {
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.header
    .header-controls
    .header-control-item
    .item-content
    button.profile-navigate
    .profile-info
    p {
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    margin: 0;
}

.modal-header-image {
    padding: 19.5px 25px;
    border-bottom: 1px solid #f4f4f4;
    margin: 0 !important;
}

.single-select
    > .select2-container
    .select2-selection--single
    .select2-selection__rendered {
    padding-right: 40px;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    right: 10px;
}

.sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul
    > li
    > ul
    > li
    > a {
    padding-left: 64px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.radio-button-group .btn-group .btn.radio-active {
    border-radius: 0 0.3rem 0.3rem 0;
}

.radio-button-group .btn-group .btn.radio-active {
    border-radius: 0 0.3rem 0.3rem 0;
}

.radio-button-group .btn-group .btn:not(:first-child) {
    border-radius: 0 0.3rem 0.3rem 0;
}

.radio-button-group .btn-group .btn:not(:last-child) {
    border-radius: 0.3rem 0 0 0.3rem;
}

/* RTL style  */
*[dir="rtl"]
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    a.has-arrow::after {
    transform: rotate(-45deg) translate(0, -50%);
}

*[dir="rtl"]
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .mm-active
    > a.has-arrow::after {
    transform: rotate(-135deg) translate(0, -50%);
}

body.rtl
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b {
    margin-left: 7px;
}

body.rtl .topbar-dropdown-menu h1 {
    float: none;
    padding-right: 0px;
    padding-left: 0;
}

body.rtl .topbar-dropdown-header {
    text-align: right;
}

body.rtl .topbar-dropdown-content {
    text-align: right;
}

body.rtl .mr-16 {
    margin-right: 0 !important;
    margin-left: 16px !important;
}

body.rtl
    .profile-expand-dropdown
    .profile-expand-container
    .profile-expand-list
    .profile-expand-item
    i {
    margin-right: 0px;
    margin-left: 10px;
}

body.rtl .sidebar {
    border-right: 0;
    border-left: 0;
}

body.rtl .mr-10 {
    margin-left: 10px !important;
    margin-right: 0px !important;
}

body.rtl .mr-8 {
    margin-right: 0px !important;
    margin-left: 8px !important;
}

body.rtl .table-content .table-toolbar .dropdown-action .dropdown-menu {
    text-align: right;
}

body.rtl .mr-14 {
    margin-right: 0 !important;
    margin-left: 14px !important;
}

body.rtl .table-content.table-basic .table .sorting_asc::before,
body.rtl .table-content.table-basic .table .sorting_desc::before,
body.rtl .table-content.table-basic .table .sorting_asc::after,
body.rtl .table-content.table-basic .table .sorting_desc::after {
    right: auto;
    left: 16px;
}

body.rtl .form-check .form-check-input {
    float: right;
}

body.rtl .accordion-button::after {
    margin-right: auto;
    margin-left: 0;
}

body.rtl .table-content.table-basic .table .thead tr th {
    padding: 16px 12px 16px 32px;
}

body.rtl .input-check-radio .form-check {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
}

body.rtl .select2-results__options {
    text-align: right;
}

body.rtl .select2-results__option {
    padding: 10px 15px;
}

.form-select:focus-visible {
    box-shadow: none !important;
}

@media (max-width: 768px) {
    body.rtl .header .header-controls .header-control-item {
        margin-left: 0;
        margin-right: auto;
    }

    body.rtl .header .header-controls {
        flex: 1 0 0;
    }

    .header .header-controls {
        flex: 66% 0 0;
        justify-content: flex-end;
        justify-content: space-between;
    }
}

/* new css added  */
.cus-error {
    margin-top: 5px;
}

.height_600 {
    height: 600px;
}

.fs_12 {
    font-size: 12px !important;
}

.modal_headerBg_color {
    background: #001f3f;
}

.mapH_500 {
    height: 500px;
}

.error {
    color: red;
    font-size: 12px;
}

.error-msg {
    color: red;
    font-size: 14px;
}

.ot_fileUploader .ot-btn-primary {
    margin-left: 5px;
}

/* responsive media query  */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sidebar {
        width: 240px;
    }

    .main-content {
        margin-left: 240px;
    }

    .header {
        left: 240px;
    }

    body.rtl .main-content {
        margin-right: 240px;
    }
}

@media (min-width: 320px) and (max-width: 768px) {
    .header .header-controls {
        flex: 1 0 0 !important;
    }

    .header button {
        padding: 0;
    }

    .sidebar .sidebar-header {
        padding: 14px 35px !important;
        min-height: 60px;
    }

    .sidebar .sidebar-header .sidebar-toggle {
        margin-left: auto;
        margin-right: 0;
    }
}

.theme_dropdown .btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(217, 219, 228, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
}

.theme_dropdown .theme_list {
    font-size: 14px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    grid-gap: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.theme_dropdown .theme_list i {
    font-size: 20px;
}

.theme_dropdown .theme_list:hover {
    color: var(--primary-color) !important;
}

/* RTL_STYLE  */
.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
    margin-right: 0;
    margin-left: 0;
}

/*Changes while RTL Start*/
body.rtl .sidebar .sidebar-menu {
    height: calc(100vh - 60px);
    overflow-x: none;
}

body.rtl .sidebar .sidebar-menu ol,
body.rtl .sidebar .sidebar-menu ul {
    padding-right: 0;
    margin-right: 0;
}

body.rtl .sidebar .sidebar-menu ol a,
body.rtl .sidebar .sidebar-menu ul a {
    text-decoration: none;
}

body.rtl .sidebar .sidebar-menu .sidebar-menu-section ul > li > a {
    padding-right: 28px;
}

body.rtl .sidebar-expand .sidebar {
    right: 0;
    transition: right 0.3s;
}

body.rtl
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    a.has-arrow::after {
    right: auto;
    left: 20px;
    right: auto;
}

body.rtl
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    .parent-item-content.has-arrow.active::after {
    right: auto;
    left: 20px;
}

body.rtl
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    a.active::before {
    left: auto;
    right: 0;
}

body.rtl .sidebar-menu {
    border: 0;
}

body.rtl .half-expand .sidebar .sidebar-menu {
    left: auto;
    right: 0;
}

body.rtl .half-expand .sidebar ul.parent-menu-list > li > ul {
    left: auto;
    right: 94px !important;
    z-index: 1212;
}

body.rtl
    .half-expand
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    ul
    li
    a.has-arrow::after {
    transform: rotate(-45deg) translate(0, -50%) !important;
    left: 20px;
    right: auto;
}

body.rtl .half-expand .sidebar-dropdown-menu > li ul {
    left: auto;
    right: 100%;
    transition: 0.3s;
}

body.rtl .sidebar-menu {
    border-right: 0;
    border-left: 1px solid rgba(217, 219, 228, 0.6);
}

body.rtl .half-expand .header {
    padding-left: 20px;
    padding-right: 40px;
}

body.rtl .sidebar {
    right: 0;
}

body[dir="rtl"]
    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
    padding-right: 20px;
    text-align: right;
    padding-left: 40px;
}

body[dir="rtl"] .header .header-search .search-field {
    padding-left: 1rem !important;
    padding-right: 3.25rem !important;
}

body[dir="rtl"]
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    right: auto;
    left: 25px;
}

body[dir="rtl"] .profile-border {
    width: 100%;
}

body[dir="rtl"] .header .header-search .search-icon {
    left: auto;
    right: 30px;
}

body[dir="rtl"] .select2-container .select2-dropdown .select2-results__option {
    justify-content: flex-end;
}

body[dir="rtl"]
    .select2-container
    .select2-dropdown
    .select2-search
    .select2-search__field {
    text-align: right;
}

body[dir="rtl"]
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul
    > li
    > a {
    padding-left: 0;
    padding-right: 47px;
}

body[dir="rtl"]
    .half-expand
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul
    > li
    > a {
    padding-left: 0;
    padding-right: 28px;
}

body[dir="rtl"] .card_scroll_active .mCSB_inside > .mCSB_container {
    margin-right: 0;
    margin-left: 4px;
}

body[dir="rtl"] .card_scroll_active .mCustomScrollBox {
    padding-right: 0;
    padding-left: 25px;
}

body[dir="rtl"] .card_scroll_active {
    padding-left: 0;
    padding-right: 28px !important;
}

@media (max-width: 768px) {
    body.rtl .sidebar {
        right: -100%;
        transition: right 0.3s;
    }
}

@media (max-width: 991.98px) {
    body.rtl .sidebar {
        right: -100%;
        transition: right 0.3s;
    }

    body.rtl .main-content {
        margin-right: 0;
    }
}

/* lead activity css  */
.activity-feed {
    padding: 15px;
    list-style: none;
}

.activity-feed .feed-item {
    position: relative;
    padding-bottom: 20px;
    padding-left: 30px;
    border-left: 1px dashed #e1e3ea;
}

.activity-feed .feed-item:last-child {
    border-color: transparent;
}

.activity-feed .feed-item .timeline-icon {
    width: 40px;
    height: 40px;
    background: var(--bodybg);
    border-radius: 50%;
    position: absolute;
    left: -20px;
    top: 0;
    color: var(--ot-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.activity-feed .feed-item .date {
    display: block;
    position: relative;
    top: -5px;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--ot-text-primary);
    padding-top: 17px;
    margin-bottom: 8px;
    font-weight: 500;
}

.activity-feed .feed-item .text {
    position: relative;
    top: -3px;
}

.highlight {
    color: red;
}

.lead-creator {
    font-weight: 700;
}

.timeLIne_content {
    border: 1px dashed #e1e3ea;
    padding: 15px 20px 15px 20px;
    border-radius: 8px;
    max-width: 750px;
}

.timeLIne_content .badge {
    margin-bottom: 10px;
}

.timeLIne_content p {
    font-size: 16px;
    font-weight: 400;
    color: var(--ot-text-primary);
}

.timeLIne_content p {
    font-size: 16px;
    font-weight: 400;
    color: var(--ot-text-primary);
}

.lead-creator {
    font-weight: 500;
    color: var(--ot-text-subtitle);
}

.text-normal {
    white-space: normal !important;
    max-width: 200px !important;
}

.header_control_left .half-expand-toggle i {
    position: relative;
    top: 0px;
    left: 0;
}

.half-expand .header_control_left .half-expand-toggle i {
    transform: rotate(180deg);
    left: -1px;
}

.table_scrollbar_active {
    position: relative;
}

.table_scrollbar_active .mCSB_horizontal.mCSB_inside > .mCSB_container {
    margin-bottom: 10px;
}

.card_scroll_active .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 4px;
}

.card_scroll_active .mCSB_inside > .mCSB_container {
    margin-right: 6px;
}

.card_scroll_active .mCSB_scrollTools {
    right: 0px;
}

.card_scroll_active .mCSB_scrollTools .mCSB_draggerRail {
    background-color: transparent;
}

.card_scroll_active .mCustomScrollBox {
    padding-right: 25px;
}

.card_scroll_active .card-body {
    max-height: 400px;
    padding-right: 0;
    position: relative;
}

.card_scroll_active {
    padding-right: 0 !important;
}

/* TABLE_HEIGHT  */
.table_scrollbar_active {
    max-height: 400px;
    position: relative;
}

.header_square_box {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(217, 219, 228, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
    background: transparent;
    color: var(--ot-text-primary);
    transition: 0.3s;
}

.header_square_box:hover,
.theme_dropdown .btn:hover {
    color: var(--primary-color);
    border-color: rgba(87, 59, 255, 0.5);
}

.default-theme
    .single-select
    > .select2-container.language-select-container
    .select2-selection--single {
    border-color: rgba(217, 219, 228, 0.6) !important;
}

/* lead activity css  */

/*------------------------------------------------------
---------------- DARK_THEME_STYLE    -------------------
-------------------------------------------------------*/

body.dark-theme {
    background: none;
    background-color: var(--bodybg) !important;
}

.header {
    border-bottom: 1px solid rgba(217, 219, 228, 0.6);
    background: #f7f7f7 !important;
}

.dark-theme .sidebar {
    border-right: none;
}

.dark-theme .sidebar .sidebar-menu-group-heading .label {
    color: var(--ot-text-subtitle, #9ca3af);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-theme .half-expand ul.parent-menu-list > li > ul {
    background: var(--ot-bg-secondary) !important;
    border: none;
}

.dark-theme .sidebar-menu .sidebar-menu-section .mm-active > a::before {
    background: var(--primary-color);
}

.dark-theme .sidebar-menu .sidebar-menu-section .mm-active ul {
    background-color: var(--ot-bg-primary);
}

.dark-theme .half-expand .sidebar-header {
    background: var(--ot-bg-secondary);
}

.dark-theme .bg-gray {
    background: #1a1d20 !important;
}

.dark-theme input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.dark-theme .radio-button-group .btn-group .btn {
    color: #fff;
}

@media (max-width: 991.98px) {
    .dark-theme .sidebar-expand .sidebar {
        background: #111415 !important;
    }
}

.dark-theme .table-content .table-toolbar .dropdown-export .dropdown-menu,
.dark-theme .dropdown-menu.show {
    box-shadow: var(--theme-shadow);
}

.dark-theme .ot-form-control:focus-visible,
.dark-theme .ot-form-control:focus,
.dark-theme .form-select:focus-visible {
    box-shadow: none !important;
    outline: none;
}

.dark-theme .profile-border {
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border_2);
}

.dark-theme .footer {
    background: var(--ot-bg-table-card);
    box-shadow:
        rgba(var(--ot-bg-table-card), 0) 0px 6px 12px -2px,
        rgba(var(--ot-bg-table-card), 0.04) 0px 3px 7px -3px;
}

.dark-theme
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    .parent-item-content.has-arrow.active::after {
    color: var(--white);
}

.dark-theme
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    .mm-show,
.dark-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item ul {
    background: var(--card_bg) !important;
}

.dark-theme .header {
    border-color: var(--border_2);
    background: var(--card_bg) !important;
}

.dark-theme .sidebar-menu,
.dark-theme .sidebar .sidebar-header {
    border-color: var(--border_2) !important;
    background: var(--card_bg) !important;
}

.dark-theme .sidebar .sidebar-header {
    background: var(--card_bg) !important;
}

.dark-theme .header .header-search .search-field {
    border-color: var(--border_2);
    background: transparent;
}

.dark-theme .header .header-search .search-field {
    border-color: var(--border_2) !important;
    background: transparent;
    background-color: transparent !important;
}

.dark-theme .header .header-search .search-field:focus {
    border-color: var(--border_3) !important;
}

.dark-theme .header-control-item .item-content i:hover {
    color: var(--white);
}

.dark-theme .ot-card,
.dark-theme .table-content.table-basic .card {
    background-color: var(--card_bg) !important;
    box-shadow: var(--theme-shadow) !important;
    border-radius: 8px;
    padding: 28px;
    border: none;
}

.dark-theme h6,
.dark-theme h5,
.dark-theme h4,
.dark-theme h3,
.dark-theme h2,
.dark-theme h1 {
    color: var(--title_text);
}

.dark-theme p,
.dark-theme a,
.dark-theme label {
    color: var(--body_text);
}

.dark-theme .single_todo .todo_title {
    color: var(--title_text);
}

.dark-theme .single_todo:not(:last-child) {
    border-color: var(--border_2);
}

.dark-theme .single_todo .todo_para_text {
    color: var(--body_text);
}

.dark-theme .table-content.table-basic .table .thead tr th,
.dark-theme .client_box .client_para_text {
    color: var(--title_text);
}

.dark-theme .table.table-bordered tbody tr,
.dark-theme .table-content.table-basic .table .thead tr {
    border-bottom-color: var(--border_2);
}

.dark-theme .client_box .client_title {
    color: var(--title_text);
}

.dark-theme .symbol .symbol-label {
    background-color: #141518;
}

.dark-theme .table-content.table-basic .table .tbody tr td {
    color: var(--body_text);
}

.dark-theme .theme_dropdown .btn {
    border-color: var(--border_3);
    color: var(--title_text);
    transition: 0.3s;
}

.dark-theme .theme_dropdown .btn:hover {
    color: var(--white);
}

.dark-theme
    .single-select
    > .select2-container.language-select-container
    .select2-selection--single {
    border: 1px solid var(--border_3) !important;
    background: none !important;
    color: var(--title_text);
}

.dark-theme .sidebar .sidebar-header .sidebar-toggle {
    background: var(--border_2);
}

.dark-theme .select2-container .select2-dropdown {
    background-color: var(--dropdown_bg);
}

.dark-theme
    .select2-container
    .select2-search--dropdown
    .select2-search__field {
    border: 1px solid var(--border_3) !important;
    color: var(--title_text) !important;
    background-color: var(--dropdown_bg) !important;
}

.dark-theme .select2-container .select2-results > .select2-results__options {
    background-color: var(--dropdown_bg);
}

.dark-theme .select2-container .select2-dropdown .select2-results__option {
    color: var(--title_text);
}

.dark-theme .select2-container .select2-results__option--selected {
    background-color: transparent !important;
    color: var(--primary-color) !important;
}

.dark-theme
    .select2-container
    .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--white_text) !important;
    background-color: transparent !important;
}

.dark-theme .ot_input,
.dark-theme .ot-form-control,
.dark-theme .ot_fileUploader,
.dark-theme .select2-container .select2-selection--single {
    background-color: var(--input_bg) !important;
    border-color: var(--input_bg) !important;
    color: var(--title_text) !important;
}

.dark-theme .ot_input:focus,
.dark-theme .ot-form-control:focus,
.dark-theme textarea.form-control:focus,
.dark-theme textarea.ot_input:focus {
    background-color: var(--input_bg_focus) !important;
    box-shadow: none !important;
    border-color: var(--input_bg_focus) !important;
}

.dark-theme
    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
    color: var(--ot-text-primary);
}

.dark-theme .table-content.table-basic .table .dropdown-action .dropdown-menu,
.dark-theme .profile-table-content .table .dropdown-action .dropdown-menu {
    background-color: var(--dropdown_bg) !important;
    border-color: var(--border_2) !important;
    color: var(--body_text) !important;
}

.dark-theme
    .table-content.table-basic
    .table
    .dropdown-action
    .dropdown-item:hover,
.dark-theme
    .profile-table-content
    .table
    .dropdown-action
    .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--white_text) !important;
}

.dark-theme .table-content .table-toolbar .btn-daterange .icon,
.dark-theme .table-content .table-toolbar .dropdown-export .btn-export .icon,
.dark-theme
    .table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation
    .icon {
    color: var(--body_text);
    margin: 0 5px 0 0;
    transition: 0.3s;
}

.dark-theme .table-content .table-toolbar .btn-add,
.dark-theme .table-content .table-toolbar .btn-daterange,
.dark-theme .table-content .table-toolbar .dropdown-export .btn-export,
.dark-theme
    .table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation {
    border-color: var(--border_2);
    background: var(--ot-border-primary);
    color: var(--body_text);
    background: transparent;
}

.dark-theme .table-content .table-toolbar .btn-add:hover,
.dark-theme .table-content .table-toolbar .btn-daterange:hover,
.dark-theme .table-content .table-toolbar .dropdown-export .btn-export:hover,
.dark-theme
    .table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation:hover {
    background: transparent;
    color: var(--white);
    border-color: var(--border_3);
}

.dark-theme .table-content .table-toolbar .btn-daterange:hover .icon,
.dark-theme
    .table-content
    .table-toolbar
    .dropdown-export
    .btn-export:hover
    .icon,
.dark-theme
    .table-content
    .table-toolbar
    .dropdown-designation
    .btn-designation:hover
    .icon {
    color: var(--white);
    margin: 0 5px 0 0;
}

.dark-theme .table-content.table-basic .table .dropdown-action .btn-dropdown {
    background: var(--input_bg) !important;
}

.dark-theme
    .table-content
    .table-toolbar
    .dropdown-export
    .dropdown-item:hover {
    background-color: transparent;
}

.dark-theme .theme_dropdown .theme_list {
    background: transparent;
}

.dark-theme .dropdown-menu.show {
    background: var(--dropdown_bg) !important;
}

.dark-theme .profile-info span {
    color: var(--title_text);
}

.dark-theme
    .profile-expand-dropdown
    .profile-expand-container
    .profile-expand-list
    .profile-expand-item:hover
    span {
    color: var(--white) !important;
}

.dark-theme .select2-container .select2-selection--multiple {
    background-color: var(--input_bg) !important;
    border-color: var(--input_bg) !important;
    color: var(--title_text) !important;
}

.dark-theme .select2-container .select2-search--inline .select2-search__field {
    color: var(--title_text) !important;
}

.dark-theme
    .select2-container
    .select2-search--inline
    .select2-search__field::-moz-placeholder {
    color: var(--ot-text-primary) !important;
    opacity: 1;
}

.dark-theme
    .select2-container
    .select2-search--inline
    .select2-search__field::placeholder {
    color: var(--ot-text-primary) !important;
    opacity: 1;
}

.dark-theme
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__placeholder {
    color: var(--ot-text-primary) !important;
}

.dark-theme
    .select2-container
    .select2-selection--multiple
    .select2-selection__choice {
    background: rgb(91 88 255 / 20%);
}

.dark-theme
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:hover,
.dark-theme
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:focus {
    color: var(--title_text);
}

.dark-theme .ot-dropdown-btn {
    background: transparent;
}

.dark-theme .ot-dropdown-btn:hover,
.dark-theme .ot-dropdown-btn:focus {
    color: var(--white);
}

.dark-theme .dropdown-item.active,
.dark-theme .dropdown-item:active,
.dark-theme .dropdown-item:hover {
    color: var(--white) !important;
    text-decoration: none;
    background: none;
}

.dark-theme .search_suggestion {
    background: var(--dropdown_bg);
    box-shadow: var(--theme-shadow);
}

.dark-theme .search_suggestion .suggestion_link {
    color: var(--body_text);
}

.dark-theme .search_suggestion .suggestion_link:hover {
    color: var(--white);
}

.dark-theme .modal-content {
    background-color: var(--card_bg) !important;
}

.dark-theme .modal-header-image {
    border-bottom: 1px solid var(--border_2);
    margin: 0;
}

.dark-theme .modal .btn-close {
    background: var(--input_bg);
    color: var(--title_text);
}

.dark-theme .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: var(--input_bg) !important;
}

.dark-theme .mCSB_scrollTools .mCSB_draggerRail {
    background-color: var(--card_bg);
}

.dark-theme
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    a:hover {
    color: var(--white_text);
}

.dark-theme .table-content .table-toolbar .search-box .form-control:focus {
    border: 1px solid var(--border_3);
}

.dark-theme .table-content .table-toolbar .dropdown-action .btn-dropdown:hover {
    background: transparent;
    border-color: var(--border_3);
    color: var(--white);
}

.dark-theme .table-content .table-toolbar .form-select:hover,
.dark-theme .table-content .table-toolbar .form-select:focus {
    border-color: var(--border_3);
}

.cke_chrome {
    border: 1px solid rgba(217, 219, 228, 0.6);
    border-radius: 8px 8px 0 0;
}

.cke_chrome .cke_top {
    border-bottom: 1px solid rgba(217, 219, 228, 0.6);
    border-radius: 8px 8px 0 0;
    background: #f9f9f9;
}

.cke_chrome .cke_inner {
    border-radius: 8px;
}

.cke_chrome {
    display: block;
    border: 1px solid rgba(217, 219, 228, 0.6);
    padding: 0;
}

.dark-theme .cke_chrome html,
.dark-theme .cke_reset,
.dark-theme .cke_reset body {
    background: transparent;
    background-color: transparent;
}

.dark-theme .cke_chrome .cke_top {
    background: var(--input_bg);
}

.dark-theme .cke_chrome .cke_top,
.dark-theme .cke_chrome,
.dark-theme .cke_chrome,
.dark-theme .cke_bottom {
    border-color: var(--input_bg);
}

.dark-theme .cke_editable,
.dark-theme .cke_bottom {
    background: var(--input_bg);
    background-color: var(--input_bg);
}

.dark-theme .timeLIne_content,
.dark-theme .crm_profile_boxes .single_crm_profile_box,
.dark-theme .activity-feed .feed-item {
    border-color: var(--border_2);
}

.dark-theme .activity-feed .feed-item .timeline-icon {
    background: var(--border_2);
}

.dark-theme .cke_editable {
    color: var(--white);
}

.dark-theme .daterangepicker {
    background: var(--dropdown_bg);
    border-color: var(--border_3);
}

.dark-theme .daterangepicker.show-ranges.ltr .drp-calendar.left,
.dark-theme .daterangepicker .drp-buttons {
    border-color: var(--border_3);
}

.dark-theme .daterangepicker .calendar-table {
    background: var(--dropdown_bg);
    background: var(--border_2);
    padding: 10px;
    border-radius: 8px;
}

.dark-theme .daterangepicker td.off,
.dark-theme .daterangepicker td.off.in-range,
.dark-theme.daterangepicker td.off.start-date,
.dark-theme .daterangepicker td.off.end-date {
    border-color: transparent;
    color: var(--body_text);
}

.dark-theme .daterangepicker td.in-range {
    color: var(--white_text);
}

.half-expand .sidebar .sidebar-header .sidebar-logo a .half-logo {
    max-width: 45px;
    max-height: 45px;
    height: 45px;
}

.half-expand .sidebar_logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-theme input:-webkit-autofill {
    -webkit-text-fill-color: var(--title_text) !important;
}

.modal {
    background: rgba(105, 120, 160, 0.16);
    backdrop-filter: blur(4px);
}

.dark-theme .modal {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}

.place-switch .switch-field label {
    padding: 13px 43px;
}

.timer-field {
    margin: 20px 0 0 0;
}

.rtl .header .header-search {
    right: 10px;
}

.dark-theme .cke_toolgroup a.cke_button:last-child:after,
.dark-theme
    .cke_toolgroup
    a.cke_button.cke_button_disabled:hover:last-child:after,
.dark-theme .cke_combo:after,
.dark-theme .cke_combo:after,
.dark-theme .cke_combo_arrow {
    border-color: var(--body_text);
}

.dark-theme .cke_chrome .cke_top {
    background: rgb(117 123 140 / 10%) !important;
}

.dark-theme .cke_combo:after {
    border-color: var(--body_text);
}

.dark-theme .cke_combo_text {
    color: var(--body_text);
}

.dark-theme .cke_toolbar_separator {
    background-color: var(--body_text);
}

#toast-container .toast {
    background-color: #007bff !important;
    box-shadow: none !important;
}

#toast-container .toast-success {
    background-color: #60c160 !important;
}

#toast-container .toast-error {
    background-color: #da4932 !important;
}

#toast-container .toast-info {
    background-color: #4d90fd !important;
}

#toast-container .toast-warning {
    background-color: #f69703 !important;
}

#toast-container .toast-message {
    font-size: 13px;
}

.dark-theme .swal2-popup {
    background: var(--bodybg) !important;
}

.swal2-container.swal2-center > .swal2-popup {
    border-radius: 8px;
}

.dark-theme
    .table-content
    .table-toolbar
    .dropdown-action
    .dropdown-menu::before {
    background: var(--dropdown_bg);
    border: 1px solid var(--dropdown_bg);
}

.timeLIne_content p {
    font-size: 16px;
    font-weight: 400;
    color: var(--ot-text-primary);
}

.timeLIne_content p {
    font-size: 16px;
    font-weight: 400;
    color: var(--ot-text-primary);
}

.lead-creator {
    font-weight: 500;
    color: var(--ot-text-subtitle);
}

.text-normal {
    white-space: normal !important;
    max-width: 200px !important;
}

._lead_nav {
    text-transform: capitalize;
}

/* lead activity css  */
.dark-theme
    .table-content
    .table-toolbar
    .dropdown-action
    .dropdown-menu::after {
    background: var(--dropdown_bg);
}

.dark-theme .client_box .client_para_text {
    color: var(--body_text);
}

.client_box .client_title {
    transition: 0.3s;
}

.dark-theme .client_box .client_title:hover {
    color: var(--primary-color);
}

.table-responsive {
    min-height: 335px;
}

.dark-theme
    .table-content
    .table-toolbar
    .dropdown-action
    .dropdown-item:hover {
    background: transparent;
}

html body.rtl .mCustomScrollBox .mCSB_container {
    direction: rtl !important;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
    bottom: -7px;
}

.dark-theme .header_square_box {
    border-color: var(--border_3) !important;
}

.dark-theme .header_square_box:hover,
.dark-theme .theme_dropdown .btn:hover {
    color: #fff;
}

/*------------------------------------------------
                    POS_STYLE
-------------------------------------------------*/
.product-title .btn-link {
    padding: 0 !important;
}

.product-title .product-title-text {
    text-align: left !important;
}

.pos-section .product-price,
.sub-total {
    color: var(--ot-text-title);
}

.dark-theme .pos-section .product-price,
.dark-theme .pos-section .sub-total {
    color: var(--title_text);
}

.dark-theme .product-title {
    color: var(--title_text);
}

.pos-section .totals .subtotal,
.pos-section .totals .item,
.pos-section .totals .discount,
.pos-section .totals .coupon,
.pos-section .totals .tax,
.pos-section .totals .shipping,
.pos-section .totals .product-tax {
    color: var(--ot-text-title) !important;
}

.dark-theme .pos-section .totals .subtotal,
.dark-theme .pos-section .totals .item,
.dark-theme .pos-section .totals .discount,
.dark-theme .pos-section .totals .coupon,
.dark-theme .pos-section .totals .tax,
.dark-theme .pos-section .totals .shipping,
.dark-theme .pos-section .totals .product-tax {
    color: var(--title_text);
}

.product-list .product-img .product-code {
    color: var(--ot-text-subtitle);
}

.dark-theme .product-list .product-img .product-code {
    color: var(--title_text);
}

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

.btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--primary-color);
  border-color: var(--primary-color)
}

.btn-outline-primary {
    color: var(--primary-color);
    background-color: transparent;
    background-image: none;
    border-color: var(--primary-color);
}

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

.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--primary-color);
    background-color: transparent;
}

.btn-check:checked + .btn-outline-primary:focus,
.btn-outline-primary:not([disabled]):not(.disabled).active,
.btn-outline-primary:not([disabled]):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    -webkit-box-shadow: 0 0 0 0.2rem rgba(51, 179, 90, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(51, 179, 90, 0.5);
}

.blockquote {
    padding: 0.5rem 1rem;
    margin-bottom: 2rem;
    font-size: 1.25rem;
    border-left: 5px solid var(--primary-color);
}

.table thead {
    background-color: #f3f2f7;
}

.dark-theme .table thead {
    background-color: var(--input_bg) !important;
}

.sendmail-form {
    display: inline-block;
}

#loader {
    position: fixed;
    left: 53%;
    top: 50%;
    z-index: 1;
    width: 50px;
    height: 50px;
    margin: -75px 0 0 -75px;
    border: 2px solid #d9d9db;
    border-radius: 50%;
    border-top: 2px solid var(--primary-color);
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0;
    }

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

@keyframes animatebottom {
    from {
        bottom: -100px;
        opacity: 0;
    }

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

.brand-img,
.category-img,
.delivery-link,
.product-img,
.purchase-link,
.quotation-link,
.return-link,
.sale-link,
.transfer-link {
    cursor: pointer;
}

.form-control,
.input-group-text {
    background-color: #fdfdff;
    border-color: #e4e6fc;
}

.mce-panel {
    border: 1px solid #e4e6fc;
    border-radius: 5px;
}

div.ui-keyboard {
    position: fixed;
    z-index: 2000;
    top: auto !important;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 180px;
    background-color: rgba(255, 255, 255, 0.8);
}

.ui-keyboard-button {
    min-width: 3em;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    background: var(--primary-color);
    width: 300px;
    padding: 15px;
    position: absolute !important;
    z-index: 999;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front li.ui-menu-item {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    list-style: none;
    padding: 5px 10px;
    padding-left: 0;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front
    li.ui-menu-item:hover {
    opacity: 0.7;
}

.table td {
    border-bottom: 1px solid #ebe9f1;
}

.table thead th {
    border-bottom: 1px solid #e4e6fc;
    font-weight: 600;
}

section {
    padding: 30px 0;
}

.dt-buttons {
    float: left;
    vertical-align: middle;
    width: 30%;
}

.dt-buttons {
    display: inline-block;
    text-align: right;
    width: 40%;
}

.dt-buttons .buttons-delete {
    line-height: 1;
}

.dt-buttons button {
    padding: 0.25rem 0.75rem;
}

.dt-buttons button span {
    color: #fff;
}

.dt-button-collection.dropdown-menu {
    background: var(--primary-color);
    padding: 10px 15px;
}

.dt-button-collection.dropdown-menu a {
    background: 0 0;
    font-size: 14px;
    line-height: 30px;
}

.buttons-delete {
    background: #eb543a;
    border: none;
}

.table.totals tr td {
    vertical-align: middle;
}

.table.order-list tr td .btn-link,
.table.totals tr td .btn-link {
    color: var(--primary-color);
    text-decoration: none !important;
}

#product-table tr:last-child td:hover {
    border-bottom: 1px solid var(--primary-color);
}

#product-table td {
    border: none;
    border-right: 1px solid #e4e6fc;
    border-bottom: 1px solid #e4e6fc;
}

.table-bordered td,
.table-bordered th {
    border-color: #e4e6fc;
}

.dark-theme .table-bordered td,
.dark-theme .table-bordered th {
    border-color: #3e4155;
}

#product-table tr td:first-child {
    border-left: 1px solid #e4e6fc;
}

#product-table tr:first-child td {
    border-top: 1px solid #e4e6fc;
}

#product-table td:hover {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

#product-table tr:first-child td:hover {
    border-top: 1px solid var(--primary-color);
}

#product-table tr td:first-child:hover {
    border-left: 1px solid var(--primary-color);
}

#product-table td p {
    margin: 15px 0 0;
}

#product-table td:hover p {
    color: var(--primary-color);
}

.product-img {
    margin-bottom: 0;
    padding: 15px 7px 0;
    text-align: center;
    text-transform: capitalize;
    width: 20%;
}

.brand-img img,
.category-img img,
.product-img img {
    height: 70px;
    max-width: 100%;
    width: auto;
}

.brand-img,
.category-img {
    text-transform: capitalize;
}

.card-header {
    border-bottom: none;
}

section.pos-section {
    padding: 5px 0;
    position: relative;
}

.qc-panel {
    background: rgba(var(--ot-bg-badge-light-main-rgb), 0.3);
    border: 1px solid rgba(var(--ot-bg-badge-light-main-rgb), 0.8);
    border-radius: 8px;
    padding: 16px;
    height: 100%;
}

.qc-panel__header {
    margin-bottom: 14px;
}

.qc-panel__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ot-text-title);
    line-height: 1.2;
}

.qc-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.crm_theme_btn.btn-sm {
    min-width: 0;
    background: var(--primary-color);
    color: var(--white) !important;
    border: 0;
    border-radius: 5px;
}

.qc-panel__grid .crm_theme_btn.btn-sm:hover,
.qc-panel__grid .crm_theme_btn.btn-sm:focus {
    background: var(--primary-color);
    color: var(--white) !important;
    filter: brightness(0.92);
}

.qc-panel .qc-btn--clear {
    width: 100%;
    min-width: 0;
    background: var(--ot-bg-badge-danger);
    color: var(--white) !important;
    border: 0;
    box-shadow: none;
}

.qc-panel .qc-btn--clear:hover,
.qc-panel .qc-btn--clear:focus {
    background: var(--ot-bg-badge-danger);
    color: var(--white) !important;
    filter: brightness(0.92);
    transform: translateY(-1px);
}

.transaction-list {
    height: 43vh;
    overflow-y: auto;
    width: 100%;
}

.btn-default.minus,
.btn-default.minus:focus,
.btn-default.plus,
.btn-default.plus:focus {
    background-color: #d6deff;
    border: none;
}

.form-control.qty {
    border: none;
    font-size: 0.9em;
}

@media all and (min-width: 768px) {
    .table-fixed tbody,
    .table-fixed td,
    .table-fixed th,
    .table-fixed thead,
    .table-fixed tr {
        display: block;
    }

    .table-fixed tr {
        clear: both;
    }

    .table-fixed tbody td,
    .table-fixed thead > tr > th {
        float: left;
        border-bottom-width: 0;
    }
}

.minus,
.plus {
    padding: 0.35rem 0.75rem;
}

.numkey.qty {
    padding: 0 0.75rem;
    max-width: 50px;
    text-align: center;
}

.product-title {
    text-transform: capitalize;
}

#myTable .input-group {
    max-width: 150px;
}

.filter-window {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    display: none;
}

.datepicker.datepicker-dropdown {
    padding: 15px;
}

.checkbox label {
    cursor: pointer;
    vertical-align: top;
}

.checkbox label:before {
    background-color: transparent;
}

.checkbox label::after {
    color: var(--primary-color);
}

.form-container {
    max-width: 600px;
    margin: 10px auto;
}

.form-container h1 {
    font-weight: 300;
    font-size: 2.5rem;
}

.dropzone {
    border: 1px solid #e4e6fc;
    border-radius: 5px;
    background: #fff;
}

#imageUpload {
    margin-bottom: 0;
    min-height: 80px;
}

div.has-error > input {
    border: 1px solid #dc3545;
}

div.has-error > .form-text {
    color: #dc3545;
}

#success-text {
    margin-top: 20px;
    font-size: 1.2rem;
}

.dripicons-question {
    color: var(--primary-color);
}

.modal {
    background-color: rgba(255, 255, 255, 0.4);
}

.modal-header {
    border-bottom: 1px solid #ebe9f1;
}

.modal-content {
    border: none;
}

.totals .col-sm-4 {
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
    line-height: 2;
}

.totals .col-sm-4:nth-child(4),
.totals .col-sm-4:nth-child(5),
.totals .col-sm-4:nth-child(6) {
    border-bottom: none;
}

.payment-amount {
    background-color: #d6deff;
    margin-top: 10px;
    text-align: center;
}

.payment-amount {
    color: var(--primary-color);
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 0;
    padding: 15px;
    text-transform: capitalize;
    border-radius: 8px;
}

.dark-theme .payment-amount {
    background-color: #2b2d35;
}

.payment-amount h2 {
    margin: 0;
}

.totals .totals-title {
    color: var(--ot-text-primary);
    display: inline-block;
    width: 100px;
    margin: 4px 0;
}

.table-container {
    height: 75vh;
    overflow-y: auto;
}

@media all and (max-width: 1023px) {
    nav.navbar {
        padding: 0 10px;
    }

    .place-switch .switch-field label {
        padding: 13px 18px;
    }

    .dt-buttons {
        float: none;
        text-align: center;
        width: 100%;
    }
}

.tagsinput,
.tagsinput * {
    box-sizing: border-box;
}

.tagsinput {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background: #fff;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #556270;
    padding: 5px 5px 0;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}

.tagsinput.focus {
    border-color: #ccc;
}

.tagsinput .tag {
    position: relative;
    background: #556270;
    display: block;
    max-width: 100%;
    word-wrap: break-word;
    color: #fff;
    padding: 5px 30px 5px 5px;
    border-radius: 2px;
    margin: 0 5px 5px 0;
}

.tagsinput .tag .tag-remove {
    position: absolute;
    background: 0 0;
    display: block;
    width: 30px;
    height: 30px;
    top: 0;
    right: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    color: #ff6b6b;
    line-height: 30px;
    padding: 0;
    border: 0;
}

.tagsinput .tag .tag-remove:after,
.tagsinput .tag .tag-remove:before {
    background: #ff6b6b;
    position: absolute;
    display: block;
    width: 10px;
    height: 2px;
    top: 14px;
    left: 10px;
    content: "";
}

.tagsinput .tag .tag-remove:before {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.tagsinput .tag .tag-remove:after {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}

.tagsinput div {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.tagsinput div input {
    background: 0 0;
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    padding: 5px;
    border: 0;
    margin: 0 5px 5px 0;
}

.tagsinput div input.error {
    color: #ff6b6b;
}

.tagsinput div input::-ms-clear {
    display: none;
}

.tagsinput div input::-webkit-input-placeholder {
    color: #ccc;
    opacity: 1;
}

.tagsinput div input:-moz-placeholder {
    color: #ccc;
    opacity: 1;
}

.tagsinput div input::-moz-placeholder {
    color: #ccc;
    opacity: 1;
}

.tagsinput div input:-ms-input-placeholder {
    color: #ccc;
    opacity: 1;
}

.pos_edit_btn {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--primary-color);
    background: var(--bodybg);
}

.flex_item_fill {
    flex: 1 1 0;
}

/* dropsone  */

@-webkit-keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30%,
    70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

@-moz-keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30%,
    70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

@keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30%,
    70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

@-webkit-keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-moz-keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

.dropzone,
.dropzone * {
    box-sizing: border-box;
}

.dropzone {
    min-height: 150px;
    border: 1px dashed #e1e3ea;
    background: white;
    padding: 20px 20px;
}

.dropzone.dz-clickable {
    cursor: pointer;
}

.dropzone.dz-clickable * {
    cursor: default;
}

.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
    cursor: pointer;
}

.dropzone.dz-started .dz-message {
    display: none;
}

.dropzone.dz-drag-hover {
    border-style: solid;
}

.dropzone.dz-drag-hover .dz-message {
    opacity: 0.5;
}

.dropzone .dz-message {
    text-align: center;
    margin: 2em 0;
}

.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 16px;
    min-height: 100px;
}

.dropzone .dz-preview:hover {
    z-index: 1000;
}

.dropzone .dz-preview:hover .dz-details {
    opacity: 1;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
    border-radius: 20px;
    background: #999;
    background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview.dz-file-preview .dz-details {
    opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
    background: white;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-remove {
    font-size: 14px;
    text-align: center;
    display: block;
    cursor: pointer;
    border: none;
}

.dropzone .dz-preview .dz-remove:hover {
    text-decoration: underline;
}

.dropzone .dz-preview:hover .dz-details {
    opacity: 1;
}

.dropzone .dz-preview .dz-details {
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    font-size: 13px;
    min-width: 100%;
    max-width: 100%;
    padding: 2em 1em;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
    line-height: 150%;
}

.dropzone .dz-preview .dz-details .dz-size {
    margin-bottom: 1em;
    font-size: 16px;
}

.dropzone .dz-preview .dz-details .dz-filename {
    white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
    border: 1px solid rgba(200, 200, 200, 0.8);
    background-color: rgba(255, 255, 255, 0.8);
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0 0.4em;
    border-radius: 3px;
}

.dropzone .dz-preview:hover .dz-image img {
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-filter: blur(8px);
    filter: blur(8px);
}

.dropzone .dz-preview .dz-image {
    border-radius: 20px;
    overflow: hidden;
    width: 120px;
    height: 120px;
    position: relative;
    display: block;
    z-index: 10;
}

.dropzone .dz-preview .dz-image img {
    display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
    -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
    opacity: 1;
    -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
    pointer-events: none;
    opacity: 0;
    z-index: 500;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px;
}

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
    display: block;
    width: 54px;
    height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    -webkit-animation: pulse 6s ease infinite;
    -moz-animation: pulse 6s ease infinite;
    -ms-animation: pulse 6s ease infinite;
    -o-animation: pulse 6s ease infinite;
    animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
    opacity: 1;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    height: 16px;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    width: 80px;
    margin-left: -40px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-transform: scale(1);
    border-radius: 8px;
    overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
    background: #333;
    background: linear-gradient(to bottom, #666, #444);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    -webkit-transition: width 300ms ease-in-out;
    -moz-transition: width 300ms ease-in-out;
    -ms-transition: width 300ms ease-in-out;
    -o-transition: width 300ms ease-in-out;
    transition: width 300ms ease-in-out;
}

.dropzone .dz-preview.dz-error .dz-error-message {
    display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
    pointer-events: none;
    z-index: 1000;
    position: absolute;
    display: block;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    font-size: 13px;
    top: 130px;
    left: -10px;
    width: 140px;
    background: #be2626;
    background: linear-gradient(to bottom, #be2626, #a92222);
    padding: 0.5em 1.2em;
    color: white;
}

.dropzone .dz-preview .dz-error-message:after {
    content: "";
    position: absolute;
    top: -6px;
    left: 64px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #be2626;
}

.leads_datatable p {
    white-space: normal !important;
}

.empty_widget_inner .mCS_img_loaded {
    max-width: 120px;
    margin: 20px auto;
}

.empty_widget {
    min-height: 400px;
}

.invalid-feedback {
    display: block;
}

.dark-theme .dropzone {
    border: 1px solid var(--input_bg) !important;
    border-radius: 5px;
    background: var(--input_bg) !important;
    color: var(--white);
}

.dropzone .dz-preview.dz-image-preview {
    background: var(--ot-bg-primary);
    padding: 10px;
    border-radius: 8px;
}

.dark-theme .mce-panel {
    border: 0 solid var(--input_bg);
    border: 0 solid var(--input_bg);
    background-color: var(--input_bg);
}

.mce-btn {
    border: 1px solid var(--border_2);
    text-shadow: 0 1px 1px var(--border_2);
    background: var(--input_bg);
}

.dashboard-first-character {
    font-size: 25px;
    background-image: radial-gradient(circle, #da0806, #da0806);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--white);
    -webkit-text-stroke: 4px transparent;
}

.symbol:has(.dashboard-first-character) {
    background-color: #f9f9f9;
}

.dark-theme .symbol:has(.dashboard-first-character) {
    background-color: #141518;
}

.dark-theme .mce-menubtn button {
    color: var(--title_text);
    background: var(--input_bg_focus);
}

.dark-theme .mce-btn-group:not(:first-child) {
    border-left: 1px solid var(--border_1);
}

.dark-theme .mce-btn {
    border: 1px solid var(--input_bg_focus);
    background: var(--input_bg_focus);
}

.dark-theme .mce-btn:hover,
.dark-theme .mce-btn:active {
    background: #2b2d35;
    border-color: #2b2d35;
}

.mce-menubar .mce-menubtn:hover,
.mce-menubar .mce-menubtn.mce-active,
.mce-menubar .mce-menubtn:focus {
    border-color: #2b2d35 !important;
    background: #2b2d35 !important;
}

.dark-theme .mce-menubar {
    border: 1px solid var(--border_2) !important;
}

.dark-theme .mce-splitbtn .mce-open:hover,
.dark-theme .mce-splitbtn .mce-open:active,
.dark-theme .mce-splitbtn.mce-active:hover .mce-open {
    border-color: var(--border_2);
}

.dark-theme .mce-menu-item:hover .mce-text,
.dark-theme .mce-menu-item:focus .mce-text,
.dark-theme .mce-menu-item:hover .mce-ico,
.dark-theme .mce-menu-item:focus .mce-ico {
    color: var(--body_text) !important;
}

.dark-theme .mce-menu-item.mce-disabled .mce-text,
.dark-theme .mce-menu-item.mce-disabled:hover .mce-text,
.dark-theme .mce-menu-item.mce-disabled .mce-ico,
.dark-theme .mce-menu-item.mce-disabled:hover .mce-ico {
    color: #fff !important;
}

.dark-theme .mce-menu-item.mce-disabled,
.dark-theme .mce-menu-item.mce-disabled:hover {
    background: var(--body_text);
}

.dark-theme .mce-container-body,
.dark-theme .mce-panel body {
    background: var(--input_bg);
}

.dark-theme .mce-menu-item.mce-selected {
    background: var(--input_bg);
}

.dark-theme .mce-menu-item:hover,
.mce-menu-item:focus {
    background: var(--input_bg);
}

body.dark-theme iframe body {
    background: var(--input_bg) !important;
}

/* Summernote editor lists — restore markers overridden by global ol,ul { padding: 0 } */
.note-editor .note-editing-area .note-editable ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.note-editor .note-editing-area .note-editable ol {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.note-editor .note-editing-area .note-editable ul ul {
    list-style-type: circle;
}

.note-editor .note-editing-area .note-editable ul ul ul {
    list-style-type: square;
}

.note-editor .note-editing-area .note-editable li {
    display: list-item;
    list-style: inherit;
}

.note-editor .note-toolbar .note-btn.active {
    background-color: #ebebeb;
    border-color: #5b58ff;
    box-shadow: inset 0 1px 3px rgba(91, 88, 255, 0.25);
    color: #5b58ff;
}

/* Summernote dark theme */
.dark-theme .note-editor.note-frame {
    border-color: var(--border_2);
}

.dark-theme .note-toolbar {
    background-color: var(--input_bg);
    border-bottom-color: var(--border_2);
}

.dark-theme .note-btn {
    color: var(--title_text);
    background-color: var(--input_bg_focus);
    border-color: var(--border_2);
}

.dark-theme .note-btn:hover,
.dark-theme .note-btn:focus,
.dark-theme .note-btn.active {
    background-color: var(--dropdown_bg);
    color: var(--white_text);
}

.dark-theme .note-editor .note-editing-area .note-editable {
    background-color: var(--input_bg);
    color: var(--title_text);
}

.dark-theme .note-editor .note-editing-area .note-editable p,
.dark-theme .note-editor .note-editing-area .note-editable span,
.dark-theme .note-editor .note-editing-area .note-editable li,
.dark-theme .note-editor .note-editing-area .note-editable h1,
.dark-theme .note-editor .note-editing-area .note-editable h2,
.dark-theme .note-editor .note-editing-area .note-editable h3,
.dark-theme .note-editor .note-editing-area .note-editable h4,
.dark-theme .note-editor .note-editing-area .note-editable h5,
.dark-theme .note-editor .note-editing-area .note-editable h6 {
    color: var(--title_text);
}

.dark-theme .note-statusbar {
    background-color: var(--input_bg);
    border-top-color: var(--border_2);
}

.taskTable_compact .tbody td p {
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* new  */
.header .header-search .search-field {
    display: block;
    width: 100%;
    padding: 0.775rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid rgba(217, 219, 228, 0.6) !important;
    appearance: none;
    border-radius: 8px;
    box-shadow: none !important;
    padding-left: 3.25rem !important;
    height: 40px;
}

.sidebar .sidebar-header .sidebar-toggle,
.header .header_control_left .sidebar-toggle {
    font-size: 18px;
    width: 40px;
    height: 40px;
    background: none;
    border-radius: 8px;
    line-height: 30px;
    color: var(--ot-text-primary);
    transition: 0.3s;
    border: 1px solid rgba(217, 219, 228, 0.6) !important;
}

.dark-theme .sidebar .sidebar-header .sidebar-toggle,
.dark-theme .header .header_control_left .sidebar-toggle {
    border-color: var(--border_2) !important;
}

.sidebar .sidebar-header .sidebar-toggle:hover,
.header .sidebar-toggle:hover {
    background: var(--primary-color);
    color: white;
    border: 1px solid transparent !important;
}

.default-theme .header {
    background: #fff !important;
}

.sidebar {
    background: #fff !important;
    background: transparent !important;
    border: 0;
}

.sidebar .sidebar-header {
    background: #fff !important;
}

.sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item .mm-show {
    background: #fff;
}

.table-content .table-toolbar {
  padding-bottom: 15px;
  /* margin-bottom: 20px; */
}

.ot_input,
.ot-form-control,
.select2-container .select2-selection--single,
.ot_input:focus,
.ot-form-control:focus {
    border: 1px solid var(--ot-border-primary) !important;
}

.ot-form-control.ot-input-readonly,
.ot_input.ot-input-readonly,
.ot-form-control.ot-input-readonly:hover,
.ot_input.ot-input-readonly:hover,
.ot-form-control.ot-input-readonly:focus,
.ot_input.ot-input-readonly:focus,
.ot-form-control.ot-input-readonly:focus-visible,
.ot_input.ot-input-readonly:focus-visible,
.ot-form-control.ot-input-readonly:active,
.ot_input.ot-input-readonly:active {
    background-color: var(--ot-bg-badge-light-main) !important;
    border: 1px dashed rgba(var(--ot-primary-color-rgb), 0.32) !important;
    color: var(--ot-text-title) !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: not-allowed !important;
    padding-right: 2.75rem;
    font-weight: 500;
}

.dark-theme .ot-form-control.ot-input-readonly,
.dark-theme .ot_input.ot-input-readonly,
.dark-theme .ot-form-control.ot-input-readonly:hover,
.dark-theme .ot_input.ot-input-readonly:hover,
.dark-theme .ot-form-control.ot-input-readonly:focus,
.dark-theme .ot_input.ot-input-readonly:focus,
.dark-theme .ot-form-control.ot-input-readonly:focus-visible,
.dark-theme .ot_input.ot-input-readonly:focus-visible,
.dark-theme .ot-form-control.ot-input-readonly:active,
.dark-theme .ot_input.ot-input-readonly:active {
    background-color: rgba(var(--ot-primary-color-rgb), 0.12) !important;
    border: 1px dashed rgba(var(--ot-primary-color-rgb), 0.28) !important;
    color: var(--ot-text-subtitle) !important;
    box-shadow: none !important;
    outline: none !important;
}

.select2-container .select2-selection--multiple {
    border: 1px solid var(--ot-border-primary) !important;
}

.ot_fileUploader .ot-btn-primary:hover,
.ot_fileUploader .ot-btn-primary {
    border: 1px solid transparent;
    background: #6c757da6;
}

.table-content.table-basic .table .dropdown-action .btn-dropdown {
    background: #6c757da6 !important;
}

textarea.form-control,
textarea.ot_input {
    border: 1px solid rgba(220, 228, 236, 0.7) !important;
}

textarea.cke_editable {
    font-size: 15px !important;
    color: var(--ot-text-title) !important;
    font-weight: 400 !important;
}

.default-theme .sidebar-menu-section {
    background: #fff;
}

.default-theme .sidebar .sidebar-menu {
    background: #fff !important;
}

.default-theme
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    .mm-show,
.default-theme .sidebar .sidebar-menu .sidebar-menu-section .sidebar-menu-item {
    background: #fff;
}

.default-theme
    .sidebar
    .sidebar-menu
    .sidebar-menu-section
    .sidebar-menu-item
    > ul {
    background: #fff !important;
}

.dark-theme .table-content .table-toolbar {
    border-color: var(--border_2);
}

/* address tab button */

a.nav-link.address-link.active {
    background-color: var(--primary-color);
    padding: 9.5px 15px;
    color: var(--white) !important;
    border-radius: 8px;
    transition: 0.3s;
    border: 0;
}

.badge-secondary {
    color: var(--ot-text-badge-secondary);
    background: var(--ot-bg-badge-light-secondary);
}

/* Input append */

.input-append-right {
    right: 0;
    height: 40px;
    z-index: 9;
}

.input-group-text {
    height: 40px !important;
}

.img-cover {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.line-clamp-1 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.font-700 {
    font-weight: 700;
}

.text-20 {
    font-size: 20px !important;
}

.line-clamp-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mb-20 {
    margin-bottom: 20px !important;
}

/* Custom Input for pos */
.numkey.qty {
    height: 35px !important;
}

/* new dark for client  */
.dark-theme .fc-unthemed th,
.dark-theme .fc-unthemed td,
.dark-theme .fc-unthemed thead,
.dark-theme .fc-unthemed tbody,
.dark-theme .fc-unthemed .fc-divider,
.dark-theme .fc-unthemed .fc-row,
.dark-theme .fc-unthemed .fc-content,
.dark-theme .fc-unthemed .fc-popover,
.dark-theme .fc-unthemed .fc-list-view,
.dark-theme .fc-unthemed .fc-list-heading td {
    border-color: #313339;
    color: var(--title_text);
}

.dark-theme .fc-unthemed td.fc-today {
    background: rgba(255, 255, 255, 0.2);
}

.table_toolbar_select .select2-container .select2-selection--single {
    height: 40px;
    background-color: transparent !important;
}

.table_toolbar_select
    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 40px;
    color: var(--ot-text-title);
}

.table_toolbar_select .select2-container {
    min-width: 100px;
}

.table_toolbar_select
    .select2-container
    .select2-selection--single
    .select2-selection__arrow {
    height: 40px;
    color: var(--ot-text-title);
    padding-right: 16px;
}

.table_toolbar_select
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    right: 1px !important;
    width: 15px;
}

/* new  */
.table-content.table-basic .table .tfoot tr {
    padding: 0.75rem;
    color: var(--ot-text-primary);
    border-color: inherit;
    border-width: inherit;
    border-style: inherit;
    border-top-width: 1px;
    border-top-style: dashed;
    border-top-color: #e1e3ea;
}

.table-content.table-basic .table .tfoot tr td {
    border: 0;
}

.input_with_button button {
    padding: 0;
    min-width: 37px;
    padding: 0 !important;
    min-height: 37px !important;
    font-size: 22px;
}

.input_with_button button {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.input_with_button:hover button {
    opacity: 1;
    visibility: visible;
}

.row_delete_btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.row_delete_btn i {
    line-height: 30px;
}

/* ---------------------------------------
            Resource Plan tab
--------------------------------------- */
.resource-plan-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 24px 0 24px;
}

.resource-plan-toolbar__group,
.resource-plan-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.resource-plan-toolbar__actions {
    margin-left: auto;
}

.ot-segment {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--ot-border-primary);
    border-radius: 8px;
    background: var(--ot-bg-secondary, rgba(249, 249, 249, 0.2));
}

.ot-segment__btn {
    border: 0;
    background: transparent;
    color: var(--ot-text-title);
    font-size: 14px;
    font-weight: 500;
    padding: 0 16px;
    border-radius: 6px;
    line-height: 1;
    min-width: 88px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.ot-segment__btn:hover:not(.is-active) {
    background: rgba(91, 88, 255, 0.08);
    color: var(--primary-color);
}

.ot-segment__btn.is-active {
    background: var(--primary-color);
    color: #fff;
}

.ot-segment__btn:focus {
    outline: none;
    box-shadow: none;
}

.resource-plan-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    cursor: pointer;
}

.resource-plan-switch > span:last-child {
    font-size: 14px;
    font-weight: 500;
    color: var(--ot-text-title);
    line-height: 1.2;
}

.resource-plan-toolbar .crm_theme_btn.btn-sm {
    min-height: 40px;
    height: 40px;
    min-width: 100px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
}

.dark-theme .ot-segment {
    background: var(--input_bg);
    border-color: var(--input_bg);
}

.dark-theme .ot-segment__btn {
    color: var(--white);
}

.dark-theme .ot-segment__btn:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.06);
}

.dark-theme .resource-plan-switch > span:last-child {
    color: var(--ot-text-title);
}

/* resource  */
.resource_accordian .accordion-body {
    margin-left: 200px !important;
    padding-top: 20px !important;
}

.resource_accordian .accordion-item {
    border: 0 !important;
}

.resource_accordian .accordion-item .accordion-button {
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ot-text-title);
    min-height: 45px;
    font-weight: 500;
    border-radius: 0 !important;
}

.resource_accordian .accordion-item .accordion-button:hover {
    background: #f2f5ff !important;
}

.resource_accordian .accordion-item .accordion-button {
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ot-text-title);
    min-height: 45px;
    font-weight: 500;
    border-radius: 0 !important;
    padding: 5px 40px;
}

.resource_accordian .resource_accordian_row {
    width: 100%;
    display: grid;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 24px 0 16px;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    width: calc(100% - 200px);
}

.resource_accordian .accordion-button::after {
    left: 15px;
    right: auto;
    position: absolute;
}

.resource_card .resource_card_header span {
    font-size: 14px;
    font-weight: 500;
    color: var(--ot-text-title);
}

.resource_card .resource_card_body {
    background: #aad6d7;
    border-radius: 4px;
    padding: 12px;
    transition: 0.3s;
}

.resource_card .resource_card_body:hover {
    background: #aad6d7;
}

.resource_card .resource_card_body .time_range_count {
    padding: 0px 10px;
    background: #fff;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    line-height: 30px;
}

.resource_card .resource_card_footer button {
    background: #e6ebff;
    padding: 6px;
    font-size: 12px;
    border-radius: 4px;
    width: 100%;
    font-weight: 900;
    transition: 0.3s;
}

.resource_card .resource_card_footer button:hover {
    background: #ced9fe;
}

.resource_card .description {
    color: #2e384d;
}

.resource_card .description_meta {
    color: #818794;
    font-size: 12px;
}

/* resource_item_header  */
.resource_item_header {
    width: 100%;
    display: grid;
    min-height: 40px;
    grid-template-rows: auto;
    box-sizing: border-box;
    padding: 0 24px 0 16px;
    content-visibility: auto;
    position: relative;
    grid-template-columns: 200px 1fr 1fr 1fr 1fr 1fr;
    background: #f2f5ff;
    align-items: center;
    font-weight: 600;
}

/* resource_accordian_hour_count  */
.resource_accordian_hour_count {
    width: 100%;
    display: grid;
    min-height: 40px;
    grid-template-rows: auto;
    box-sizing: border-box;
    padding: 0 24px 0 20px;
    content-visibility: auto;
    position: relative;
    /* grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); */
    grid-template-columns: repeat(5, minmax(260px, 1fr));
    align-items: center;
    font-weight: 600;
}

.resource_accordian_hour_count {
    flex: 1 1 0;
    display: grid;
    border-radius: 4px;
}

.resource_accordian_hour_count .resource_accordian_hour_count_item {
    background: #d4ebeb;
    padding: 6px 8px;
}

/* count manage  */
.resource_accordian .resource_accordian_row {
    grid-template-columns: repeat(7, minmax(260px, 1fr));
    overflow: auto;
}

.resource_accordian_hour_count {
    grid-template-columns: repeat(7, minmax(260px, 1fr));
    overflow: auto;
}

.resource_item_header {
    grid-template-columns: 200px repeat(7, minmax(260px, 1fr));
    overflow: auto;
}

.alert .btn-close {
    background: var(--bodybg);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    opacity: 1;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: none !important;
    margin: 8px;
}

.alert .btn-close i {
    transition: 0.3s;
    transform: rotate(0deg);
}

.alert .btn-close:hover {
    background: var(--primary-color);
    color: var(--white);
    opacity: 1;
}

.alert .btn-close:hover i {
    transform: rotate(180deg);
}

/* form step footer (Back / Next bar) */
.form-step-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid var(--ot-border-primary);
}

.form-step-footer .crm_line_btn,
.form-step-footer .crm_theme_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 110px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.form-step-footer .crm_line_btn i,
.form-step-footer .crm_theme_btn i {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.3s;
}

.form-step-footer .crm_line_btn:hover i {
    transform: translateX(-3px);
}

.form-step-footer .crm_theme_btn:hover i {
    transform: translateX(3px);
}

.dark-theme .form-step-footer {
    background: var(--card_bg);
    border-color: var(--border_2);
}

/* --------------------------------------------------------------
                        SALE SUMMARY
-------------------------------------------------------------- */

.sale-summary-card {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-bottom: 16px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--ot-border-primary);
    background: var(--ot-bg-primary);
    overflow: hidden;
}

.sale-summary-item {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
    min-width: 0;
    border-right: 1px solid var(--ot-border-primary);
}

.sale-summary-item:last-child {
    border-right: none;
}

.sale-summary-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ot-text-primary);
}

.sale-summary-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ot-text-title);
}

.sale-summary-total {
    background: rgba(91, 88, 255, 0.08);
}

.sale-summary-total .sale-summary-label {
    color: var(--primary-color);
    font-weight: 600;
}

.sale-summary-total .sale-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.dark-theme .sale-summary-card {
    background: var(--input_bg);
    border-color: var(--border_2);
}

.dark-theme .sale-summary-item {
    border-right-color: var(--border_2);
}

.dark-theme .sale-summary-label {
    color: var(--body_text);
}

.dark-theme .sale-summary-value {
    color: var(--title_text);
}

.dark-theme .sale-summary-total {
    background: rgba(91, 88, 255, 0.16);
}

.dark-theme .sale-summary-total .sale-summary-label,
.dark-theme .sale-summary-total .sale-summary-value {
    color: var(--primary-color);
}

@media (max-width: 767.98px) {
    .sale-summary-item {
        flex: 1 1 45%;
        border-right: none;
        border-bottom: 1px solid var(--ot-border-primary);
    }

    .dark-theme .sale-summary-item {
        border-bottom-color: var(--border_2);
    }

    .sale-summary-item:nth-last-child(-n + 2) {
        border-bottom: none;
    }
}

/* --------------------------------------------------------------
                        SUPPORT TICKET
-------------------------------------------------------------- */

.card-options {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.ticket-reply-card {
    border: 1px dashed #e1e3ea;
    border-radius: 8px;
    padding: 16px 18px;
    background: var(--ot-bg-secondary);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ticket-reply-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--theme-shadow);
}

.ticket-reply-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ot-border-primary);
}

.ticket-reply-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ticket-reply-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--ot-bg-badge-light-primary);
    border: 2px solid var(--ot-bg-badge-light-primary);
}

.ticket-reply-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ticket-reply-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ticket-reply-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ot-text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-reply-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ot-text-primary);
    white-space: nowrap;
}

.ticket-reply-time i {
    font-size: 12px;
    color: var(--primary-color);
}

.ticket-reply-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ot-text-primary);
    word-break: break-word;
}

.ticket-reply-body p {
    margin-bottom: 8px;
    color: inherit;
}

.ticket-reply-body p:last-child {
    margin-bottom: 0;
}

.dark-theme .ticket-reply-card {
    background: var(--input_bg);
    border-color: var(--border_2);
}

.dark-theme .ticket-reply-card:hover {
    border-color: var(--primary-color);
}

.dark-theme .ticket-reply-header {
    border-bottom-color: var(--border_2);
}

.dark-theme .ticket-reply-name {
    color: var(--white_text);
}

.dark-theme .ticket-reply-time,
.dark-theme .ticket-reply-body,
.dark-theme .ticket-reply-body p {
    color: var(--title_text);
}

.dark-theme .ticket-reply-avatar {
    background: var(--ot-bg-badge-light-primary);
    border-color: var(--border_3);
}

/* --------------------------------------------------------------
                        TASK DETAILS
-------------------------------------------------------------- */

.project-overview-description ul,
.project-overview-description ol {
    padding-left: 16px;
    color: var(--ot-text-subtitle);
}

.project-overview-left .table thead {
    background-color: #f3f2f7;
}

.dark-theme .project-overview-left .table thead {
    background-color: #2b2c37;
}

.project-overview-left .table thead th {
    color: var(--ot-text-title);
}

.dark-theme .project-overview-left .table thead th {
    color: var(--white_text);
}

.project-overview-right .assigned-members-title {
    margin-top: 20px;
    margin-bottom: 8px;
}

.project-overview-right .table-cell {
    border: none;
    margin-bottom: 15px;
    padding: 8px !important;
}

.project-overview-right .followers-title {
    margin-top: 20px;
    margin-bottom: 8px;
}

/* --------------------------------------------------------------
                        MAILBOX SIDEBAR
-------------------------------------------------------------- */
.mailbox_sidebar_item {
    padding: 4px 16px;
    border-radius: 6px;
    font-weight: 400;
    color: var(--ot-text-primary);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 8px;
    background-color: var(--white);

    &:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.selected {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.focus {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.focus:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.focus:selected {
        background-color: var(--primary-color);
        color: var(--white);
    }
}

.dark-theme .mailbox_sidebar_item {
    background-color: var(--input_bg);

    &:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.selected {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.focus {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.focus:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.focus:selected {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.focus:focus {
        background-color: var(--primary-color);
        color: var(--white);
    }
    &.focus:focus:hover {
        background-color: var(--primary-color);
        color: var(--white);
    }
}

.mailbox_sidebar_item a {
    color: var(--ot-text-title);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    transition: all 0.3s ease;
    &:hover {
        color: var(--white);
    }
    &.selected {
        color: var(--white);
    }
}

/* --------------------------------------------------------------
                        PRODUCT DETAILS
-------------------------------------------------------------- */

#product-details .modal-dialog {
    max-width: 980px;
}

#product-details .product-details-img {
    background: var(--ot-bg-badge-light-secondary);
    border: 1px solid rgba(var(--ot-border-color-rgb), 0.5);
    border-radius: 6px;
    padding: 20px;
    min-height: 320px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#product-details .product-details-img img {
    max-width: 100%;
    max-height: 280px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

#product-details .product-details-info {
    border: 1px solid var(--ot-border-primary, #eaeaea);
    border-radius: 6px;
    background: var(--ot-bg-secondary, #fff);
    overflow: hidden;
    height: 100%;
}

#product-details .product-details-info .pd-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(var(--ot-border-color-rgb), 0.5);
}

#product-details .product-details-info .pd-row:last-child {
    border-bottom: 0;
}

#product-details .product-details-info .pd-label {
    color: var(--ot-text-primary, #6f767e);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#product-details .product-details-info .pd-value {
    color: var(--ot-text-title, #181c32);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

#product-details .product-details-info .pd-row.pd-accent {
    background: var(--ot-bg-badge-light-main, #ecebff);
}

#product-details .product-details-info .pd-row.pd-accent .pd-value {
    color: var(--primary-color, #5b58ff);
}

#product-details .pd-content-card {
    margin-top: 20px;
    border: 1px solid rgba(var(--ot-border-color-rgb), 0.5);
    border-radius: 6px;
    background: var(--ot-bg-secondary, #fff);
    padding: 20px 22px;
}

#product-details .pd-content-card .pd-content-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ot-text-title, #181c32);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--ot-border-color-rgb), 0.5);
}

#product-details #product_details {
    color: var(--ot-text-subtitle, #33383f);
    font-size: 14px;
    line-height: 1.7;
}

#product-details #product_details > p:first-child {
    margin-bottom: 18px;
    color: var(--ot-text-primary, #6f767e);
}

#product-details #product_details h2,
#product-details #product_details h3,
#product-details #product_details h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ot-text-title, #181c32);
    margin: 22px 0 10px;
    padding-left: 10px;
    border-left: 3px solid var(--primary-color, #5b58ff);
    line-height: 1.3;
}

#product-details #product_details ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    gap: 8px;
}

#product-details #product_details ul li {
    position: relative;
    padding: 10px 12px 10px 34px;
    background: var(--ot-bg-badge-light-secondary, #eef1f6);
    border-radius: 8px;
    color: var(--ot-text-title, #181c32);
    font-size: 13px;
    line-height: 1.5;
}

#product-details #product_details ul li::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color, #5b58ff);
}

#product-details #product_details table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 8px 0 16px;
    border: 1px solid rgba(var(--ot-border-color-rgb), 0.5);
    border-radius: 6px;
    overflow: hidden;
}

#product-details #product_details table th,
#product-details #product_details table td {
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid rgba(var(--ot-border-color-rgb), 0.5);
    text-align: left;
}

#product-details #product_details table tr:last-child th,
#product-details #product_details table tr:last-child td {
    border-bottom: 0;
}

#product-details #product_details table th {
    width: 38%;
    color: var(--ot-text-primary, #6f767e);
    font-weight: 500;
    background: var(--ot-bg-badge-light-secondary, #eef1f6);
}

#product-details #product_details table td {
    color: var(--ot-text-title, #181c32);
    font-weight: 600;
}

#product-details .product-warehouse-quantity {
    margin-top: 20px;
    border: 1px solid rgba(var(--ot-border-color-rgb), 0.5);
    border-radius: 6px;
    padding: 18px 20px;
    background: var(--ot-bg-secondary, #fff);
}

#product-details .product-warehouse-quantity h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ot-text-title, #181c32);
    margin: 0 0 14px;
}

.dark-theme #product-details .product-details-img,
.dark-theme #product-details .product-details-info,
.dark-theme #product-details .pd-content-card,
.dark-theme #product-details .product-warehouse-quantity {
    background: var(--ot-bg-secondary);
    border-color: var(--ot-border-primary);
}

.dark-theme #product-details .product-details-info .pd-row.pd-accent {
    background: rgba(91, 88, 255, 0.12);
}

.dark-theme #product-details #product_details ul li,
.dark-theme #product-details #product_details table th {
    background: rgba(255, 255, 255, 0.04);
}

/* Table Header */

.crm-table-header {
    background-color: #eceff4;
}

.dark-theme .crm-table-header {
    background-color: #2b2d35;
}

/* --------------------------------------------------------------
                        SERVICE DETAILS
-------------------------------------------------------------- */

.service-details-content .nav-tabs .nav-link {
    color: var(--white);
    background-color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.3s ease;
    border: none;
    &:hover {
        color: var(--white);
    }
    &.selected {
        color: var(--white);
    }
}

.dark-theme .service-details-content .nav-tabs .nav-link {
    color: var(--white);
    background-color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    border: none;
    transition: all 0.3s ease;
    &:hover {
        color: var(--white);

        background-color: var(--primary-color);
    }
    &.selected {
        color: var(--white);
        background-color: var(--primary-color);
    }
}

.login-bg::before {
    background-image: url(../../images/auth-bg.png);
}

/* Employee form section titles */
.form-section-title {
    width: 100%;
    margin: 8px 0 20px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ot-text-title);
    background: linear-gradient(
        90deg,
        rgba(91, 88, 255, 0.08) 0%,
        rgba(91, 88, 255, 0.02) 100%
    );
    border: 1px solid rgba(91, 88, 255, 0.12);
    border-left: 3px solid var(--primary-color);
    border-radius: 8px;
}

.form-section-subtitle {
    width: 100%;
    margin: 16px 0 16px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ot-text-title);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: linear-gradient(
        90deg,
        rgba(111, 118, 126, 0.08) 0%,
        rgba(111, 118, 126, 0.02) 100%
    );
    border: 1px solid var(--ot-border-primary);
    border-left: 3px solid #8c9dae;
    border-radius: 8px;
}

.dark-theme .form-section-title {
    color: var(--title_text, var(--ot-text-title));
    background: linear-gradient(
        90deg,
        rgba(91, 88, 255, 0.18) 0%,
        rgba(91, 88, 255, 0.06) 100%
    );
    border-color: rgba(91, 88, 255, 0.22);
    border-left-color: var(--primary-color);
}

.dark-theme .form-section-subtitle {
    color: var(--title_text, var(--ot-text-title));
    background: linear-gradient(
        90deg,
        rgba(172, 180, 203, 0.12) 0%,
        rgba(172, 180, 203, 0.04) 100%
    );
    border-color: var(--border_3, var(--ot-border-primary));
    border-left-color: #acb4cb;
}

/* Task checklist modal */
.task-checklist-modal {
    padding-top: 0;
}

.task-checklist-modal__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.task-checklist-modal__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--ot-border-primary);
    border-radius: 10px;
    background: var(--ot-bg-secondary, rgba(249, 249, 249, 0.35));
}

.task-checklist-modal__stat-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--ot-text-title);
}

.task-checklist-modal__stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ot-text-primary);
}

.task-checklist-item {
    display: flex;
    gap: 14px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--ot-border-primary);
    border-radius: 12px;
    background: var(--ot-bg-table-card, #fff);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.task-checklist-item:last-of-type {
    margin-bottom: 0;
}

.task-checklist-item:hover {
    border-color: rgba(91, 88, 255, 0.25);
    box-shadow: 0 8px 24px rgba(91, 88, 255, 0.08);
}

.task-checklist-item__index {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ot-bg-badge-light-main, #ecebff);
    color: var(--ot-text-badge-main, #5b58ff);
    font-size: 14px;
    font-weight: 600;
}

.task-checklist-item__body {
    flex: 1;
    min-width: 0;
}

.task-checklist-item__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ot-text-title);
    word-break: break-word;
}

.task-checklist-item__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-checklist-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--ot-border-primary);
    background: var(--ot-bg-secondary, rgba(249, 249, 249, 0.35));
}

.task-checklist-step__dot {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--ot-border-primary);
    background: #fff;
    font-size: 10px;
    line-height: 1;
}

.task-checklist-step__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ot-text-primary);
}

.task-checklist-step--active {
    border-color: rgba(91, 88, 255, 0.28);
    background: var(--ot-bg-badge-light-main, #ecebff);
}

.task-checklist-step--active .task-checklist-step__dot {
    border-color: var(--primary-color);
    background: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(91, 88, 255, 0.15);
}

.task-checklist-step--active .task-checklist-step__label {
    color: var(--primary-color);
}

.task-checklist-step--completed {
    border-color: rgba(14, 164, 114, 0.22);
    background: var(--ot-bg-badge-light-success, #e4f8f0);
}

.task-checklist-step--completed .task-checklist-step__dot {
    border-color: var(--ot-text-badge-success, #0ea472);
    background: var(--ot-text-badge-success, #0ea472);
    color: #fff;
}

.task-checklist-step--completed .task-checklist-step__label {
    color: var(--ot-text-badge-success, #0ea472);
}

.task-checklist-modal__empty {
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed var(--ot-border-primary);
    border-radius: 12px;
    background: var(--ot-bg-secondary, rgba(249, 249, 249, 0.35));
}

.task-checklist-modal__empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--ot-bg-badge-light-main, #ecebff);
    color: var(--primary-color);
    font-size: 28px;
}

.task-checklist-modal__empty h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ot-text-title);
}

.task-checklist-modal__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ot-border-primary);
}

.dark-theme .task-checklist-modal__stat,
.dark-theme .task-checklist-item,
.dark-theme .task-checklist-modal__empty {
    background: var(--input_bg);
    border-color: var(--border_2, var(--input_bg));
}

.dark-theme .task-checklist-item:hover {
    border-color: rgba(91, 88, 255, 0.35);
    box-shadow: none;
}

.dark-theme .task-checklist-step {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border_2, var(--input_bg));
}

.dark-theme .task-checklist-step__dot {
    background: var(--input_bg);
    border-color: var(--border_2, var(--input_bg));
}

.dark-theme .task-checklist-step--active {
    background: rgba(91, 88, 255, 0.14);
}

.dark-theme .task-checklist-step--completed {
    background: rgba(14, 164, 114, 0.12);
}

.dark-theme .task-checklist-modal__empty-icon {
    background: rgba(91, 88, 255, 0.14);
}

.dark-theme .task-checklist-modal__footer {
    border-color: var(--border_2, var(--input_bg));
}

@media (max-width: 767.98px) {
    .task-checklist-modal__summary {
        grid-template-columns: 1fr;
    }

    .task-checklist-item {
        flex-direction: column;
    }

    .task-checklist-item__steps {
        flex-direction: column;
        align-items: flex-start;
    }
}

.width-800 {
    width: 800px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}